add confirmation step to bulk inputs (#698)

Author: NiloCK

packages/common-ui/src/components/SkMouseTrap.vue

@@ -1,23 +1,26 @@
 <template>
   <v-dialog v-if="display" max-width="500px" transition="dialog-transition">
     <template #activator="{ props }">
-      <v-btn icon color="primary" v-bind="props"> ? </v-btn>
+      <v-btn icon color="primary" v-bind="props">
+        <v-icon>mdi-keyboard</v-icon>
+      </v-btn>
     </template>
 
     <v-card>
-      <v-toolbar color="teal" dark>
-        <v-toolbar-title>Shortcut keys for this card:</v-toolbar-title>
-        <v-spacer></v-spacer>
+      <v-toolbar color="teal" dark dense>
+        <v-toolbar-title class="text-subtitle-1">Shortcut keys:</v-toolbar-title>
       </v-toolbar>
-      <v-list>
-        <v-list-item v-for="hk in commands" :key="Array.isArray(hk.hotkey) ? hk.hotkey.join(',') : hk.hotkey">
-          <v-btn variant="outlined" color="black">
+      <v-list dense>
+        <v-list-item
+          v-for="hk in commands"
+          :key="Array.isArray(hk.hotkey) ? hk.hotkey.join(',') : hk.hotkey"
+          class="py-1"
+        >
+          <v-btn variant="outlined" color="primary" class="text-white" size="small">
             {{ Array.isArray(hk.hotkey) ? hk.hotkey[0] : hk.hotkey }}
           </v-btn>
           <v-spacer></v-spacer>
-          <span class="text-right">
-            {{ hk.command }}
-          </span>
+          <span class="text-caption ml-2">{{ hk.command }}</span>
         </v-list-item>
       </v-list>
     </v-card>

packages/platform-ui/src/utils/bulkImport/cardParser.ts renamed to packages/common/src/bulkImport/cardParser.ts

@@ -1,4 +1,4 @@
-import { ParsedCard } from './types';
+import { ParsedCard } from './types.js';
 
 /**
  * Configuration for the bulk card parser
@@ -25,12 +25,15 @@ 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 {
+export function parseCard(
+  cardString: string,
+  config: CardParserConfig = DEFAULT_PARSER_CONFIG
+): ParsedCard | null {
   const trimmedCardString = cardString.trim();
   if (!trimmedCardString) {
     return null;
@@ -40,18 +43,18 @@ export function parseCard(cardString: string, config: CardParserConfig = DEFAULT
   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
@@ -71,7 +74,7 @@ export function parseCard(cardString: string, config: CardParserConfig = DEFAULT
       metadataLines++;
     }
   }
-  
+
   // Remove metadata lines from the end of the content
   if (metadataLines > 0) {
     markdownLines.splice(markdownLines.length - metadataLines);
@@ -82,29 +85,53 @@ export function parseCard(cardString: string, config: CardParserConfig = DEFAULT
     // 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
+  return bulkText
+    .split(CARD_DELIMITER)
+    .map((card) => card.trim())
+    .filter((card) => card); // Filter out empty strings
+}
+
+/**
+ * Parses a bulk text input into an array of structured ParsedCard objects.
+ *
+ * @param bulkText - Raw string containing multiple cards.
+ * @param config - Optional parser configuration.
+ * @returns Array of ParsedCard objects. Filters out cards that fail to parse.
+ */
+export function parseBulkTextToCards(
+  bulkText: string,
+  config: CardParserConfig = DEFAULT_PARSER_CONFIG
+): ParsedCard[] {
+  const cardStrings = splitCardsText(bulkText);
+  const parsedCards: ParsedCard[] = [];
+
+  for (const cardString of cardStrings) {
+    const parsedCard = parseCard(cardString, config);
+    if (parsedCard) {
+      parsedCards.push(parsedCard);
+    }
+  }
+  return parsedCards;
 }
 
 /**
  * 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());
-}
+  return cardStrings.length > 0 && cardStrings.some((card) => !!card.trim());
+}

packages/common/src/bulkImport/types.ts

@@ -0,0 +1,28 @@
+// We no longer need to import DataShape since we've moved the interfaces that used it
+// import { DataShape } from '@vue-skuilder/common';
+
+/**
+ * Interface representing a parsed card from bulk import
+ */
+export interface ParsedCard {
+  /** The markdown content of the card */
+  markdown: string;
+  /** Tags associated with the card */
+  tags: string[];
+  /** ELO rating for the card (optional) */
+  elo?: number;
+}
+
+/**
+ * Interface for card data ready to be stored in the database
+ */
+export interface CardData {
+  /** Card markdown content */
+  Input: string;
+  /** Card media uploads */
+  Uploads: any[];
+  /** Any additional fields can be added as needed */
+  [key: string]: any;
+}
+
+// ImportResult and BulkCardProcessorConfig have been moved to @vue-skuilder/db

packages/common/src/index.ts

@@ -6,6 +6,9 @@ export * from './logshim.js';
 export * from './validators.js';
 export * from './fieldConverters.js';
 
+export * from './bulkImport/cardParser.js';
+export * from './bulkImport/types.js';
+
 // interfaces
 export * from './interfaces/index.js';
 

packages/platform-ui/src/utils/bulkImport/cardProcessor.ts renamed to packages/db/src/core/bulkImport/cardProcessor.ts

@@ -1,59 +1,41 @@
-import { Status } from '@vue-skuilder/common';
-import { CourseDBInterface } from '@vue-skuilder/db';
-import { ParsedCard, ImportResult, BulkCardProcessorConfig, CardData } from './types';
-import { parseCard, splitCardsText } from './cardParser';
+import { CourseElo, Status, ParsedCard, CardData } from '@vue-skuilder/common';
+import { CourseDBInterface } from '../../core/interfaces/courseDB';
+import { ImportResult, BulkCardProcessorConfig } from './types';
 
 /**
  * Processes multiple cards from bulk text input
  *
- * @param bulkText - Raw text containing multiple cards
+ * @param parsedCards - Array of parsed cards to import
  * @param courseDB - Course database interface
  * @param config - Configuration for the card processor
  * @returns Array of import results
  */
-export async function processBulkCards(
-  bulkText: string,
+export async function importParsedCards(
+  parsedCards: ParsedCard[],
   courseDB: CourseDBInterface,
   config: BulkCardProcessorConfig
 ): Promise<ImportResult[]> {
   const results: ImportResult[] = [];
 
-  if (!bulkText.trim()) {
-    return results;
-  }
-
-  const cardStrings = splitCardsText(bulkText);
-  if (cardStrings.length === 0) {
-    results.push({
-      originalText: bulkText,
-      status: 'error',
-      message: 'No valid card data found. Please check your input and delimiters.',
-    });
-    return results;
-  }
-
-  for (const cardString of cardStrings) {
-    const originalText = cardString.trim();
-    if (!originalText) continue;
-
-    const parsed = parseCard(originalText);
-
-    if (!parsed) {
-      results.push({
-        originalText,
-        status: 'error',
-        message: 'Failed to parse card: Empty content after tag removal or invalid format.',
-      });
-      continue;
-    }
-
+  for (const parsedCard of parsedCards) {
     try {
-      const result = await processCard(parsed, courseDB, config);
+      // processCard takes a ParsedCard and returns an ImportResult
+      const result = await processCard(parsedCard, courseDB, config);
       results.push(result);
     } catch (error) {
       console.error('Error processing card:', error);
+      // Reconstruct originalText from parsedCard for this specific catch block
+      // This is a fallback if processCard itself throws an unhandled error.
+      // Normally, processCard should return an ImportResult with status 'error'.
+      let errorOriginalText = parsedCard.markdown;
+      if (parsedCard.tags && parsedCard.tags.length > 0) {
+        errorOriginalText += `\ntags: ${parsedCard.tags.join(', ')}`;
+      }
+      if (parsedCard.elo !== undefined) {
+        errorOriginalText += `\nelo: ${parsedCard.elo}`;
+      }
       results.push({
-        originalText,
+        originalText: errorOriginalText,
         status: 'error',
         message: `Error processing card: ${
           error instanceof Error ? error.message : 'Unknown error'
@@ -95,7 +77,7 @@ async function processCard(
     Uploads: [], // No uploads for bulk import
   };
 
-  const tagsElo = {};
+  const tagsElo: CourseElo['tags'] = {};
   for (const tag of tags) {
     tagsElo[tag] = {
       score: elo || 0,

packages/db/src/core/bulkImport/index.ts

@@ -0,0 +1,2 @@
+export * from './cardProcessor.js';
+export * from './types.js';

packages/platform-ui/src/utils/bulkImport/types.ts renamed to packages/db/src/core/bulkImport/types.ts

@@ -14,30 +14,6 @@ export interface ImportResult {
   cardId?: string;
 }
 
-/**
- * Interface representing a parsed card from bulk import
- */
-export interface ParsedCard {
-  /** The markdown content of the card */
-  markdown: string;
-  /** Tags associated with the card */
-  tags: string[];
-  /** ELO rating for the card (optional) */
-  elo?: number;
-}
-
-/**
- * Interface for card data ready to be stored in the database
- */
-export interface CardData {
-  /** Card markdown content */
-  Input: string;
-  /** Card media uploads */
-  Uploads: any[];
-  /** Any additional fields can be added as needed */
-  [key: string]: any;
-}
-
 /**
  * Configuration for the bulk card processor
  */
@@ -48,4 +24,4 @@ export interface BulkCardProcessorConfig {
   courseCode: string;
   /** The username of the current user */
   userName: string;
-}
+}

packages/db/src/core/index.ts

@@ -5,3 +5,4 @@ export * from './types/types-legacy';
 export * from './types/user';
 export * from '../util/Loggable';
 export * from './util';
+export * from './bulkImport';