bulk tidy (#695)

- **fix: userinput strings render inline...**
- **refactor: bulk card processing logic to own files**
- **add elo parsing to bulk-tags**

Author: NiloCK

packages/common-ui/src/components/studentInputs/UserInputString.vue

@@ -1,16 +1,14 @@
 <template>
-  <v-container class="pa-0">
-    <v-text-field
+  <span class="user-input-container">
+    <input
       v-model="answer"
       :autofocus="autofocus"
-      :prepend-icon="prependIcon"
       type="text"
-      variant="underlined"
-      single-line
-      hide-details
+      class="user-input-string"
+      ref="input"
       @keyup.enter="submitAnswer(answer)"
-    ></v-text-field>
-  </v-container>
+    />
+  </span>
 </template>
 
 <script lang="ts">
@@ -61,3 +59,31 @@ export default defineComponent({
   },
 });
 </script>
+
+<style scoped>
+.user-input-container {
+  display: inline-block;
+  min-width: 6em;
+  vertical-align: baseline;
+}
+
+.user-input-string {
+  display: inline-block;
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid currentColor;
+  color: currentColor;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  padding: 0;
+  margin: 0;
+  text-align: center;
+  width: 100%;
+  outline: none;
+}
+
+.user-input-string:focus {
+  border-bottom: 2px solid currentColor;
+}
+</style>

packages/platform-ui/src/components/Edit/BulkImportView.vue

@@ -11,10 +11,12 @@ Example:
 Card 1 Question
 {{blank}}
 tags: tagA, tagB
+elo: 1500
 ---
 ---
 Card 2 Question
 Another {{blank}}
+elo: 1200
 tags: tagC"
           rows="15"
           varient="outlined"
@@ -75,18 +77,7 @@ import { BlanksCardDataShapes } from '@vue-skuilder/courses';
 import { getCurrentUser } from '@vue-skuilder/common-ui';
 import { getDataLayer, CourseDBInterface } from '@vue-skuilder/db';
 import { alertUser } from '@vue-skuilder/common-ui'; // For user feedback
-
-interface ImportResult {
-  originalText: string;
-  status: 'success' | 'error';
-  message: string;
-  cardId?: string;
-}
-
-interface ParsedCard {
-  markdown: string;
-  tags: string[];
-}
+import { ImportResult, processBulkCards, validateProcessorConfig, isValidBulkFormat } from '@/utils/bulkImport';
 
 export default defineComponent({
   name: 'BulkImportView',
@@ -125,36 +116,6 @@ export default defineComponent({
     }
   },
   methods: {
-    parseCard(cardString: string): ParsedCard | null {
-      const trimmedCardString = cardString.trim();
-      if (!trimmedCardString) {
-        return null;
-      }
-
-      const lines = trimmedCardString.split('\n');
-      let tags: string[] = [];
-      const markdownLines = [...lines];
-
-      if (lines.length > 0) {
-        const lastLine = lines[lines.length - 1].trim();
-        if (lastLine.toLowerCase().startsWith('tags:')) {
-          tags = lastLine
-            .substring(5)
-            .split(',')
-            .map((tag) => tag.trim())
-            .filter((tag) => tag);
-          markdownLines.pop(); // Remove the tags line
-        }
-      }
-
-      const markdown = markdownLines.join('\n').trim();
-      if (!markdown) {
-        // Card must have some markdown content
-        return null;
-      }
-      return { markdown, tags };
-    },
-
     async processCards() {
       if (!this.courseDB) {
         alertUser({
@@ -164,7 +125,11 @@ export default defineComponent({
         this.processing = false;
         return;
       }
-      if (!this.bulkText.trim()) return;
+
+      if (!isValidBulkFormat(this.bulkText)) {
+        this.processing = false;
+        return;
+      }
 
       // Validate that we have datashapes in the course config
       if (!this.courseCfg?.dataShapes || this.courseCfg.dataShapes.length === 0) {
@@ -179,8 +144,6 @@ export default defineComponent({
       this.processing = true;
       this.results = [];
 
-      const cardDelimiter = '\n---\n---\n';
-      const cardStrings = this.bulkText.split(cardDelimiter);
       const currentUser = await getCurrentUser();
       const userName = currentUser.getUsername();
 
@@ -205,80 +168,49 @@ export default defineComponent({
         dataShapeToUse: dataShapeToUse.name,
       });
 
-      for (const cardString of cardStrings) {
-        const originalText = cardString.trim();
-        if (!originalText) continue;
-
-        const parsed = this.parseCard(originalText);
-
-        if (!parsed) {
-          this.results.push({
-            originalText,
-            status: 'error',
-            message: 'Failed to parse card: Empty content after tag removal or invalid format.',
-          });
-          continue;
-        }
-
-        const { markdown, tags } = parsed;
-
-        // The BlanksCardDataShapes expects an 'Input' field for markdown
-        // and an 'Uploads' field for media.
-        const cardData = {
-          Input: markdown,
-          Uploads: [], // As per requirement, no uploads for bulk import
-        };
-
-        try {
-          // Extract course code from first dataShape in course config
-          const configDataShape = this.courseCfg?.dataShapes?.[0];
-          if (!configDataShape) {
-            throw new Error('No data shapes found in course configuration');
-          }
+      // Extract course code from first dataShape in course config
+      const configDataShape = this.courseCfg?.dataShapes?.[0];
+      if (!configDataShape) {
+        this.results.push({
+          originalText: 'N/A - Configuration Error',
+          status: 'error',
+          message: 'No data shapes found in course configuration',
+        });
+        this.processing = false;
+        return;
+      }
 
-          const codeCourse = NameSpacer.getDataShapeDescriptor(configDataShape.name).course;
-          console.log(`[BulkImportView] Using codeCourse: ${codeCourse} for note addition`);
+      const codeCourse = NameSpacer.getDataShapeDescriptor(configDataShape.name).course;
+      console.log(`[BulkImportView] Using codeCourse: ${codeCourse} for note addition`);
 
-          const result = await this.courseDB.addNote(
-            codeCourse,
-            dataShapeToUse,
-            cardData,
-            userName,
-            tags,
-            undefined, // deck
-            undefined // elo
-          );
+      // Prepare processor configuration
+      const config = {
+        dataShape: dataShapeToUse,
+        courseCode: codeCourse,
+        userName: userName,
+      };
 
-          if (result.status === Status.ok) {
-            this.results.push({
-              originalText,
-              status: 'success',
-              message: 'Card added successfully.',
-              cardId: result.id ? result.id : '(unknown)',
-            });
-          } else {
-            this.results.push({
-              originalText,
-              status: 'error',
-              message: result.message || 'Failed to add card to database. Unknown error.',
-            });
-          }
-        } catch (error) {
-          console.error('Error adding note:', error);
-          this.results.push({
-            originalText,
-            status: 'error',
-            message: `Error adding card: ${error instanceof Error ? error.message : 'Unknown error'}`,
-          });
-        }
+      // Validate processor configuration
+      const validation = validateProcessorConfig(config);
+      if (!validation.isValid) {
+        this.results.push({
+          originalText: 'N/A - Configuration Error',
+          status: 'error',
+          message: validation.errorMessage || 'Invalid processor configuration',
+        });
+        this.processing = false;
+        return;
       }
 
-      if (this.results.length === 0 && cardStrings.length > 0 && cardStrings.every((s) => !s.trim())) {
-        // This case handles if bulkText only contained delimiters or whitespace
+      // Process the cards
+      try {
+        this.results = await processBulkCards(this.bulkText, this.courseDB, config);
+      } catch (error) {
+        console.error('[BulkImportView] Error processing cards:', error);
         this.results.push({
           originalText: this.bulkText,
           status: 'error',
-          message: 'No valid card data found. Please check your input and delimiters.',
+          message: `Error processing cards: ${error instanceof Error ? error.message : 'Unknown error'}`,
         });
       }
 

packages/platform-ui/src/utils/bulkImport/cardParser.ts

@@ -0,0 +1,110 @@
+import { ParsedCard } from './types';
+
+/**
+ * Configuration for the bulk card parser
+ */
+export interface CardParserConfig {
+  /** Custom tag identifier (defaults to 'tags:') */
+  tagIdentifier?: string;
+  /** Custom ELO identifier (defaults to 'elo:') */
+  eloIdentifier?: string;
+}
+
+/**
+ * Default configuration for the card parser
+ */
+const DEFAULT_PARSER_CONFIG: CardParserConfig = {
+  tagIdentifier: 'tags:',
+  eloIdentifier: 'elo:',
+};
+
+/**
+ * Card delimiter used to separate cards in bulk input
+ */
+export const CARD_DELIMITER = '\n---\n---\n';
+
+/**
+ * Parses a single card string into a structured object
+ * 
+ * @param cardString - Raw string containing card content
+ * @param config - Optional parser configuration
+ * @returns ParsedCard object or null if parsing fails
+ */
+export function parseCard(cardString: string, config: CardParserConfig = DEFAULT_PARSER_CONFIG): ParsedCard | null {
+  const trimmedCardString = cardString.trim();
+  if (!trimmedCardString) {
+    return null;
+  }
+
+  const lines = trimmedCardString.split('\n');
+  let tags: string[] = [];
+  let elo: number | undefined = undefined;
+  const markdownLines = [...lines];
+  
+  // Process the lines from bottom to top to handle metadata
+  let metadataLines = 0;
+  
+  // Get the configured identifiers
+  const tagId = config.tagIdentifier || DEFAULT_PARSER_CONFIG.tagIdentifier;
+  const eloId = config.eloIdentifier || DEFAULT_PARSER_CONFIG.eloIdentifier;
+  
+  // Check the last few lines for metadata (tags and elo)
+  for (let i = lines.length - 1; i >= 0 && i >= lines.length - 2; i--) {
+    const line = lines[i].trim();
+    
+    // Check for tags
+    if (line.toLowerCase().startsWith(tagId!.toLowerCase())) {
+      tags = line
+        .substring(tagId!.length)
+        .split(',')
+        .map((tag) => tag.trim())
+        .filter((tag) => tag);
+      metadataLines++;
+    }
+    // Check for ELO
+    else if (line.toLowerCase().startsWith(eloId!.toLowerCase())) {
+      const eloValue = line.substring(eloId!.length).trim();
+      const parsedElo = parseInt(eloValue, 10);
+      if (!isNaN(parsedElo)) {
+        elo = parsedElo;
+      }
+      metadataLines++;
+    }
+  }
+  
+  // Remove metadata lines from the end of the content
+  if (metadataLines > 0) {
+    markdownLines.splice(markdownLines.length - metadataLines);
+  }
+
+  const markdown = markdownLines.join('\n').trim();
+  if (!markdown) {
+    // Card must have some markdown content
+    return null;
+  }
+  
+  return { markdown, tags, elo };
+}
+
+/**
+ * Splits a bulk text input into individual card strings
+ * 
+ * @param bulkText - Raw string containing multiple cards
+ * @returns Array of card strings
+ */
+export function splitCardsText(bulkText: string): string[] {
+  return bulkText.split(CARD_DELIMITER)
+    .map(card => card.trim())
+    .filter(card => card); // Filter out empty strings
+}
+
+/**
+ * Validates if a bulk text input has valid format
+ * 
+ * @param bulkText - Raw string containing multiple cards
+ * @returns true if valid, false otherwise
+ */
+export function isValidBulkFormat(bulkText: string): boolean {
+  const cardStrings = splitCardsText(bulkText);
+  return cardStrings.length > 0 && cardStrings.some(card => !!card.trim());
+}