From 3a4cf8cc348bc388353b4560dd7fdcd64f19937c Mon Sep 17 00:00:00 2001
From: NiloCK <colin@mrkennedy.ca>
Date: Sun, 18 May 2025 15:02:30 -0300
Subject: [PATCH 1/5] add a bulk-input component

---
 .../src/components/Edit/BulkImportView.vue    | 272 ++++++++++++++++++
 1 file changed, 272 insertions(+)
 create mode 100644 packages/platform-ui/src/components/Edit/BulkImportView.vue

diff --git a/packages/platform-ui/src/components/Edit/BulkImportView.vue b/packages/platform-ui/src/components/Edit/BulkImportView.vue
new file mode 100644
index 000000000..4fc9ab767
--- /dev/null
+++ b/packages/platform-ui/src/components/Edit/BulkImportView.vue
@@ -0,0 +1,272 @@
+<template>
+  <v-container fluid>
+    <v-row>
+      <v-col cols="12">
+        <v-textarea
+          v-model="bulkText"
+          label="Bulk Card Input"
+          placeholder="Paste card data here.
+Separate cards with two consecutive '---' lines on their own lines.
+Example:
+Card 1 Question
+{{blank}}
+tags: tagA, tagB
+---
+---
+Card 2 Question
+Another {{blank}}
+tags: tagC"
+          rows="15"
+          varient="outlined"
+          data-cy="bulk-import-textarea"
+        ></v-textarea>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12">
+        <v-btn
+          color="primary"
+          :loading="processing"
+          :disabled="!bulkText.trim()"
+          data-cy="bulk-import-process-btn"
+          @click="processCards"
+        >
+          Process Cards
+          <v-icon end>mdi-play-circle-outline</v-icon>
+        </v-btn>
+      </v-col>
+    </v-row>
+    <v-row v-if="results.length > 0">
+      <v-col cols="12">
+        <v-list density="compact">
+          <v-list-subheader>Import Results</v-list-subheader>
+          <v-list-item
+            v-for="(result, index) in results"
+            :key="index"
+            :class="{ 'lime-lighten-5': result.status === 'success', 'red-lighten-5': result.status === 'error' }"
+          >
+            <v-list-item-title>
+              <v-icon :color="result.status === 'success' ? 'green' : 'red'">
+                {{ result.status === 'success' ? 'mdi-check-circle' : 'mdi-alert-circle' }}
+              </v-icon>
+              Card {{ index + 1 }}
+            </v-list-item-title>
+            <v-list-item-subtitle>
+              <div v-if="result.message" class="ml-6">{{ result.message }}</div>
+              <div v-if="result.cardId" class="ml-6">ID: {{ result.cardId }}</div>
+              <details v-if="result.status === 'error' && result.originalText" class="ml-6">
+                <summary>Original Input</summary>
+                <pre style="white-space: pre-wrap; background-color: #f5f5f5; padding: 5px">{{
+                  result.originalText
+                }}</pre>
+              </details>
+            </v-list-item-subtitle>
+          </v-list-item>
+        </v-list>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { CourseConfig, DataShape, Status } from '@vue-skuilder/common';
+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[];
+}
+
+export default defineComponent({
+  name: 'BulkImportView',
+  props: {
+    courseCfg: {
+      type: Object as PropType<CourseConfig>,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      bulkText: '',
+      results: [] as ImportResult[],
+      processing: false,
+      courseDB: null as CourseDBInterface | null,
+    };
+  },
+  created() {
+    if (this.courseCfg?.courseID) {
+      this.courseDB = getDataLayer().getCourseDB(this.courseCfg.courseID);
+    } else {
+      console.error('[BulkImportView] Course config or Course ID is missing.');
+      alertUser({
+        text: 'Course configuration is missing. Cannot initialize bulk import.',
+        status: Status.error,
+      });
+    }
+  },
+  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({
+          text: 'Database connection not available. Cannot process cards.',
+          status: Status.error,
+        });
+        this.processing = false;
+        return;
+      }
+      if (!this.bulkText.trim()) return;
+
+      this.processing = true;
+      this.results = [];
+
+      const cardDelimiter = '\n---\n---\n';
+      const cardStrings = this.bulkText.split(cardDelimiter);
+      const currentUser = await getCurrentUser();
+      const userName = currentUser.getUsername();
+      const dataShapeToUse: DataShape = BlanksCardDataShapes[0];
+
+      if (!dataShapeToUse) {
+        this.results.push({
+          originalText: 'N/A - Configuration Error',
+          status: 'error',
+          message: 'Could not find BlanksCardDataShapes. Aborting.',
+        });
+        this.processing = false;
+        return;
+      }
+
+      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 {
+          const result = await this.courseDB.addNote(
+            'default',
+            dataShapeToUse,
+            cardData,
+            userName,
+            tags,
+            undefined, // deck
+            undefined // elo
+          );
+
+          if (result.status === Status.ok) {
+            this.results.push({
+              originalText,
+              status: 'success',
+              message: 'Card added successfully.',
+              cardId: '(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 as any).message || 'Unknown error'}`,
+          });
+        }
+      }
+
+      if (this.results.length === 0 && cardStrings.length > 0 && cardStrings.every((s) => !s.trim())) {
+        // This case handles if bulkText only contained delimiters or whitespace
+        this.results.push({
+          originalText: this.bulkText,
+          status: 'error',
+          message: 'No valid card data found. Please check your input and delimiters.',
+        });
+      }
+
+      this.processing = false;
+      if (!this.results.some((r) => r.status === 'error')) {
+        // Potentially clear bulkText if all successful, or offer a button to do so
+        // this.bulkText = '';
+      }
+    },
+  },
+});
+</script>
+
+<style scoped>
+.lime-lighten-5 {
+  background-color: #f9fbe7 !important; /* Vuetify's lime lighten-5 */
+}
+.red-lighten-5 {
+  background-color: #ffebee !important; /* Vuetify's red lighten-5 */
+}
+pre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  background-color: #f5f5f5;
+  padding: 10px;
+  border-radius: 4px;
+  margin-top: 5px;
+}
+</style>

From 91b5dbe66cc809f3d87971c91f5fe7a25390d302 Mon Sep 17 00:00:00 2001
From: NiloCK <colin@mrkennedy.ca>
Date: Sun, 18 May 2025 15:05:31 -0300
Subject: [PATCH 2/5] add bulkEditor tab option

---
 .../src/components/Edit/CourseEditor.vue      | 59 ++++++++++++-------
 1 file changed, 39 insertions(+), 20 deletions(-)

diff --git a/packages/platform-ui/src/components/Edit/CourseEditor.vue b/packages/platform-ui/src/components/Edit/CourseEditor.vue
index c892cfbc1..779a39bc8 100644
--- a/packages/platform-ui/src/components/Edit/CourseEditor.vue
+++ b/packages/platform-ui/src/components/Edit/CourseEditor.vue
@@ -8,21 +8,42 @@
         <router-link to="/q">Quilts</router-link> /
         <router-link :to="`/q/${courseConfig ? courseConfig.name : course}`">{{ courseConfig?.name }}</router-link>
       </h1>
-      <v-btn color="success" @click="toggleComponent">Content Editing / Component Registration</v-btn>
-      <div v-if="editingMode">
-        <v-select
-          v-model="selectedShape"
-          label="What kind of content are you adding?"
-          :items="registeredDataShapes.map((shape) => shape.name)"
-        />
-
-        <data-input-form
-          v-if="!loading && selectedShape !== '' && courseConfig && dataShape"
-          :data-shape="dataShape"
-          :course-cfg="courseConfig"
-        />
-      </div>
-      <component-registration v-else :course="course" />
+
+      <v-tabs v-model="currentTab" bg-color="primary" grow>
+        <v-tab value="single">Single Card Input</v-tab>
+        <v-tab value="bulk">Bulk Import</v-tab>
+        <v-tab value="registration">Component Registration</v-tab>
+      </v-tabs>
+
+      <v-window v-model="currentTab">
+        <v-window-item value="single">
+          <v-container fluid>
+            <v-select
+              v-model="selectedShape"
+              label="What kind of content are you adding?"
+              :items="registeredDataShapes.map((shape) => shape.name)"
+              class="mt-4"
+            />
+            <data-input-form
+              v-if="selectedShape !== '' && courseConfig && dataShape"
+              :data-shape="dataShape"
+              :course-cfg="courseConfig"
+            />
+          </v-container>
+        </v-window-item>
+
+        <v-window-item value="bulk">
+          <v-container fluid>
+            <bulk-import-view v-if="courseConfig" :course-cfg="courseConfig" class="mt-4" />
+          </v-container>
+        </v-window-item>
+
+        <v-window-item value="registration">
+          <v-container fluid>
+            <component-registration :course="course" class="mt-4" />
+          </v-container>
+        </v-window-item>
+      </v-window>
     </div>
   </div>
 </template>
@@ -34,6 +55,7 @@ import { allCourses } from '@vue-skuilder/courses';
 import { BlanksCard, BlanksCardDataShapes } from '@vue-skuilder/courses';
 import { CourseConfig, NameSpacer, DataShape } from '@vue-skuilder/common';
 import DataInputForm from './ViewableDataInputForm/DataInputForm.vue';
+import BulkImportView from './BulkImportView.vue'; // Added import
 import { getDataLayer } from '@vue-skuilder/db';
 import { useDataInputFormStore } from '@/stores/useDataInputFormStore';
 
@@ -43,6 +65,7 @@ export default defineComponent({
   components: {
     DataInputForm,
     ComponentRegistration,
+    BulkImportView,
   },
 
   props: {
@@ -60,7 +83,7 @@ export default defineComponent({
       courseConfig: null as CourseConfig | null,
       dataShape: BlanksCardDataShapes[0] as DataShape,
       loading: true,
-      editingMode: true,
+      currentTab: 'single',
       dataInputFormStore: useDataInputFormStore(),
     };
   },
@@ -118,10 +141,6 @@ export default defineComponent({
         return shape.name === shapeName;
       })!;
     },
-
-    toggleComponent() {
-      this.editingMode = !this.editingMode;
-    },
   },
 });
 </script>

From 668454cc9b6509f53b8cc50af7d38aad1ab08c44 Mon Sep 17 00:00:00 2001
From: NiloCK <colin@mrkennedy.ca>
Date: Sun, 18 May 2025 15:32:37 -0300
Subject: [PATCH 3/5] fixes for card datashape lookup

---
 .../src/components/Edit/BulkImportView.vue    | 46 +++++++++++++++++--
 1 file changed, 42 insertions(+), 4 deletions(-)

diff --git a/packages/platform-ui/src/components/Edit/BulkImportView.vue b/packages/platform-ui/src/components/Edit/BulkImportView.vue
index 4fc9ab767..9f8df9a23 100644
--- a/packages/platform-ui/src/components/Edit/BulkImportView.vue
+++ b/packages/platform-ui/src/components/Edit/BulkImportView.vue
@@ -70,7 +70,7 @@ tags: tagC"
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
-import { CourseConfig, DataShape, Status } from '@vue-skuilder/common';
+import { CourseConfig, DataShape, Status, NameSpacer } from '@vue-skuilder/common';
 import { BlanksCardDataShapes } from '@vue-skuilder/courses';
 import { getCurrentUser } from '@vue-skuilder/common-ui';
 import { getDataLayer, CourseDBInterface } from '@vue-skuilder/db';
@@ -107,6 +107,15 @@ export default defineComponent({
   created() {
     if (this.courseCfg?.courseID) {
       this.courseDB = getDataLayer().getCourseDB(this.courseCfg.courseID);
+
+      // Validate that we have datashapes in the course config
+      if (!this.courseCfg.dataShapes || this.courseCfg.dataShapes.length === 0) {
+        console.error('[BulkImportView] Course config does not contain any dataShapes.');
+        alertUser({
+          text: 'Course configuration has no dataShapes. Bulk import may not work correctly.',
+          status: Status.warning,
+        });
+      }
     } else {
       console.error('[BulkImportView] Course config or Course ID is missing.');
       alertUser({
@@ -157,6 +166,16 @@ export default defineComponent({
       }
       if (!this.bulkText.trim()) return;
 
+      // Validate that we have datashapes in the course config
+      if (!this.courseCfg?.dataShapes || this.courseCfg.dataShapes.length === 0) {
+        alertUser({
+          text: 'This course has no data shapes configured. Cannot import cards.',
+          status: Status.error,
+        });
+        this.processing = false;
+        return;
+      }
+
       this.processing = true;
       this.results = [];
 
@@ -164,6 +183,8 @@ export default defineComponent({
       const cardStrings = this.bulkText.split(cardDelimiter);
       const currentUser = await getCurrentUser();
       const userName = currentUser.getUsername();
+
+      // Use the BlanksCardDataShapes for the data structure
       const dataShapeToUse: DataShape = BlanksCardDataShapes[0];
 
       if (!dataShapeToUse) {
@@ -176,6 +197,14 @@ export default defineComponent({
         return;
       }
 
+      // Log the course configuration to help with debugging
+      console.log('[BulkImportView] Processing with course config:', {
+        courseID: this.courseCfg.courseID,
+        dataShapes: this.courseCfg.dataShapes,
+        questionTypes: this.courseCfg.questionTypes,
+        dataShapeToUse: dataShapeToUse.name,
+      });
+
       for (const cardString of cardStrings) {
         const originalText = cardString.trim();
         if (!originalText) continue;
@@ -201,8 +230,17 @@ export default defineComponent({
         };
 
         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');
+          }
+
+          const codeCourse = NameSpacer.getDataShapeDescriptor(configDataShape.name).course;
+          console.log(`[BulkImportView] Using codeCourse: ${codeCourse} for note addition`);
+
           const result = await this.courseDB.addNote(
-            'default',
+            codeCourse,
             dataShapeToUse,
             cardData,
             userName,
@@ -216,7 +254,7 @@ export default defineComponent({
               originalText,
               status: 'success',
               message: 'Card added successfully.',
-              cardId: '(unknown)',
+              cardId: result.id ? result.id : '(unknown)',
             });
           } else {
             this.results.push({
@@ -230,7 +268,7 @@ export default defineComponent({
           this.results.push({
             originalText,
             status: 'error',
-            message: `Error adding card: ${(error as any).message || 'Unknown error'}`,
+            message: `Error adding card: ${error instanceof Error ? error.message : 'Unknown error'}`,
           });
         }
       }

From cc913fb897036d2b8756a0ca4549889e84d2b34d Mon Sep 17 00:00:00 2001
From: NiloCK <colin@mrkennedy.ca>
Date: Sun, 18 May 2025 15:59:07 -0300
Subject: [PATCH 4/5] return IDs

---
 packages/db/src/core/types/db.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/db/src/core/types/db.ts b/packages/db/src/core/types/db.ts
index 2c00d55f7..80ddbea97 100644
--- a/packages/db/src/core/types/db.ts
+++ b/packages/db/src/core/types/db.ts
@@ -3,4 +3,5 @@ import { Status } from '@vue-skuilder/common';
 export interface DataLayerResult {
   status: Status;
   message: string;
+  id?: string;
 }

From 09090b322bf19b3dd887551b701aa7b6a55ef7d1 Mon Sep 17 00:00:00 2001
From: NiloCK <colin@mrkennedy.ca>
Date: Sun, 18 May 2025 16:00:19 -0300
Subject: [PATCH 5/5] improve error returns from addNote...

avoid swallowed errors & false success result
---
 packages/db/src/impl/pouch/courseAPI.ts | 31 ++++++++++++++++++++-----
 packages/db/src/impl/pouch/courseDB.ts  | 18 ++++++++++++--
 2 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/packages/db/src/impl/pouch/courseAPI.ts b/packages/db/src/impl/pouch/courseAPI.ts
index ae42c8ac9..354c722d7 100644
--- a/packages/db/src/impl/pouch/courseAPI.ts
+++ b/packages/db/src/impl/pouch/courseAPI.ts
@@ -40,16 +40,27 @@ export async function addNote55(
   });
 
   if (result.ok) {
-    // create cards
-    await createCards(courseID, dataShapeId, result.id, tags, elo);
+    try {
+      // create cards
+      await createCards(courseID, dataShapeId, result.id, tags, elo);
+    } catch (error) {
+      console.error(
+        `[addNote55] Failed to create cards for note ${result.id}: ${
+          error instanceof Error ? error.message : String(error)
+        }`
+      );
+      // Add info to result to indicate card creation failed
+      (result as any).cardCreationFailed = true;
+      (result as any).cardCreationError = error instanceof Error ? error.message : String(error);
+    }
   } else {
-    console.log(`Error adding note: ${result}`);
+    console.error(`[addNote55] Error adding note. Result: ${JSON.stringify(result)}`);
   }
 
   return result;
 }
 
-export async function createCards(
+async function createCards(
   courseID: string,
   datashapeID: PouchDB.Core.DocumentId,
   noteID: PouchDB.Core.DocumentId,
@@ -66,8 +77,16 @@ export async function createCards(
     }
   }
 
+  if (questionViewTypes.length === 0) {
+    const errorMsg = `No questionViewTypes found for datashapeID: ${datashapeID} in course config. Cards cannot be created.`;
+    console.error(errorMsg);
+    throw new Error(errorMsg);
+  }
+
+  let createdCards = 0;
   for (const questionView of questionViewTypes) {
-    createCard(questionView, courseID, dsDescriptor, noteID, tags, elo);
+    await createCard(questionView, courseID, dsDescriptor, noteID, tags, elo);
+    createdCards++;
   }
 }
 
@@ -86,7 +105,7 @@ async function createCard(
   for (const rQ of cfg.questionTypes) {
     if (rQ.name === questionViewName) {
       for (const view of rQ.viewList) {
-        addCard(
+        await addCard(
           courseID,
           dsDescriptor.course,
           [noteID],
diff --git a/packages/db/src/impl/pouch/courseDB.ts b/packages/db/src/impl/pouch/courseDB.ts
index 4cdda3b45..a97ffc370 100644
--- a/packages/db/src/impl/pouch/courseDB.ts
+++ b/packages/db/src/impl/pouch/courseDB.ts
@@ -367,14 +367,28 @@ above:\n${above.rows.map((r) => `\t${r.id}-${r.key}\n`)}`;
     try {
       const resp = await addNote55(this.id, codeCourse, shape, data, author, tags, uploads, elo);
       if (resp.ok) {
+        // Check if card creation failed (property added by addNote55)
+        if ((resp as any).cardCreationFailed) {
+          console.warn(
+            `[courseDB.addNote] Note added but card creation failed: ${
+              (resp as any).cardCreationError
+            }`
+          );
+          return {
+            status: Status.error,
+            message: `Note was added but no cards were created: ${(resp as any).cardCreationError}`,
+            id: resp.id,
+          };
+        }
         return {
           status: Status.ok,
           message: '',
+          id: resp.id,
         };
       } else {
         return {
           status: Status.error,
-          message: 'Unexpected ',
+          message: 'Unexpected error adding note',
         };
       }
     } catch (e) {
@@ -384,7 +398,7 @@ above:\n${above.rows.map((r) => `\t${r.id}-${r.key}\n`)}`;
       );
       return {
         status: Status.error,
-        message: `Error adding note to course. ${(e as PouchError).reason}`,
+        message: `Error adding note to course. ${(e as PouchError).reason || err.message}`,
       };
     }
   }