@vue-skuilder/common-ui 0.2.34 → 0.2.36

package/dist/components/CardSearchResults.vue_vue_type_script_lang.mjs

@@ -0,0 +1,71 @@
+import "../_virtual/_rolldown/runtime.mjs";
+import { defineComponent as e } from "vue";
+//#region src/components/CardSearchResults.vue?vue&type=script&lang.ts
+var t = e({
+	name: "CardSearchResults",
+	emits: { "card-selected": (e) => typeof e.cardId == "string" && typeof e.courseId == "string" },
+	props: {
+		query: {
+			type: String,
+			required: !0
+		},
+		dataLayer: {
+			type: Object,
+			required: !0
+		},
+		courseFilter: {
+			type: String,
+			default: null
+		}
+	},
+	data() {
+		return {
+			cards: [],
+			loading: !1,
+			error: null,
+			selectedCardId: null
+		};
+	},
+	watch: { query: {
+		immediate: !0,
+		handler(e) {
+			e && this.fetchResults(e);
+		}
+	} },
+	methods: {
+		async fetchResults(e) {
+			this.loading = !0, this.error = null;
+			try {
+				let t = [];
+				if (this.courseFilter) t = [this.courseFilter], console.log(`Filtering search to course: ${this.courseFilter}`);
+				else {
+					let { CourseLookup: e } = await import("@vue-skuilder/db");
+					t = (await e.allCourseWare()).map((e) => e._id).filter(Boolean), console.log(`Searching across all ${t.length} courses`);
+				}
+				let n = [];
+				for (let r of t) {
+					let t = await this.dataLayer.getCourseDB(r).searchCards(e);
+					for (let e of t) n.push({
+						...e,
+						courseId: r
+					});
+				}
+				this.cards = n, console.log(`Search completed: found ${n.length} cards across ${t.length} courses`);
+			} catch (e) {
+				this.error = "Error fetching search results.", console.error("Search error:", e);
+			} finally {
+				this.loading = !1;
+			}
+		},
+		selectCard(e) {
+			this.selectedCardId = e._id, this.$emit("card-selected", {
+				cardId: e._id,
+				courseId: e.courseId
+			});
+		}
+	}
+});
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=CardSearchResults.vue_vue_type_script_lang.mjs.map

package/dist/components/CardSearchResults.vue_vue_type_script_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardSearchResults.vue_vue_type_script_lang.mjs","names":[],"sources":["../../src/components/CardSearchResults.vue"],"sourcesContent":["<template>\n  <div class=\"card-search-results\">\n    <div v-if=\"loading\">Loading...</div>\n    <div v-else-if=\"error\">{{ error }}</div>\n    <div v-else>\n      <v-list>\n        <v-list-item \n          v-for=\"card in cards\" \n          :key=\"card._id\"\n          @click=\"selectCard(card)\"\n          :class=\"{'selected-card': card._id === selectedCardId}\"\n          class=\"cursor-pointer\"\n        >\n          <v-list-item-title>{{ card._id }}</v-list-item-title>\n          <v-list-item-subtitle>Course: {{ card.courseId }}</v-list-item-subtitle>\n        </v-list-item>\n      </v-list>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, PropType } from 'vue';\nimport { DataLayerProvider, CardData } from '@vue-skuilder/db';\n\ninterface CardWithCourse extends CardData {\n  courseId: string;\n}\n\nexport default defineComponent({\n  name: 'CardSearchResults',\n  emits: {\n    'card-selected': (payload: { cardId: string; courseId: string }) => \n      typeof payload.cardId === 'string' && typeof payload.courseId === 'string'\n  },\n  props: {\n    query: {\n      type: String,\n      required: true,\n    },\n    dataLayer: {\n      type: Object as PropType<DataLayerProvider>,\n      required: true,\n    },\n    courseFilter: {\n      type: String as PropType<string | null>,\n      default: null,\n    },\n  },\n  data() {\n    return {\n      cards: [] as CardWithCourse[],\n      loading: false,\n      error: null as string | null,\n      selectedCardId: null as string | null,\n    };\n  },\n  watch: {\n    query: {\n      immediate: true,\n      handler(newQuery) {\n        if (newQuery) {\n          this.fetchResults(newQuery);\n        }\n      },\n    },\n  },\n  methods: {\n    async fetchResults(query: string) {\n      this.loading = true;\n      this.error = null;\n      try {\n        let courseIds: string[] = [];\n        \n        // Get course IDs efficiently\n        if (this.courseFilter) {\n          // Single course search - no need to fetch all courses\n          courseIds = [this.courseFilter];\n          console.log(`Filtering search to course: ${this.courseFilter}`);\n        } else {\n          // Get all course IDs without expensive config lookups\n          const { CourseLookup } = await import('@vue-skuilder/db');\n          const lookupCourses = await CourseLookup.allCourseWare();\n          courseIds = lookupCourses.map(c => c._id).filter(Boolean);\n          console.log(`Searching across all ${courseIds.length} courses`);\n        }\n        \n        const allCards: CardWithCourse[] = [];\n\n        for (const courseId of courseIds) {\n          const courseDB = this.dataLayer.getCourseDB(courseId);\n          const cards = await courseDB.searchCards(query);\n          \n          for (const card of cards) {\n            allCards.push({\n              ...card,\n              courseId: courseId,\n            });\n          }\n        }\n        this.cards = allCards;\n        console.log(`Search completed: found ${allCards.length} cards across ${courseIds.length} courses`);\n      } catch (e) {\n        this.error = 'Error fetching search results.';\n        console.error('Search error:', e);\n      } finally {\n        this.loading = false;\n      }\n    },\n    \n    selectCard(card: CardWithCourse) {\n      this.selectedCardId = card._id;\n      this.$emit('card-selected', { cardId: card._id, courseId: card.courseId });\n    },\n  },\n});\n</script>\n\n<style scoped>\n.selected-card {\n  background-color: #e0f2f7; /* Light blue background */\n  border-left: 4px solid #2196f3; /* Blue left border */\n}\n\n.cursor-pointer {\n  cursor: pointer;\n}\n</style>\n"],"mappings":";;;AA6BA,IAAA,IAAe,EAAgB;CAC7B,MAAM;CACN,OAAO,EACL,kBAAkB,MAChB,OAAO,EAAQ,UAAW,YAAY,OAAO,EAAQ,YAAa,UACrE;CACD,OAAO;EACL,OAAO;GACL,MAAM;GACN,UAAU;GACX;EACD,WAAW;GACT,MAAM;GACN,UAAU;GACX;EACD,cAAc;GACZ,MAAM;GACN,SAAS;GACV;EACF;CACD,OAAO;AACL,SAAO;GACL,OAAO,EAAC;GACR,SAAS;GACT,OAAO;GACP,gBAAgB;GACjB;;CAEH,OAAO,EACL,OAAO;EACL,WAAW;EACX,QAAQ,GAAU;AAChB,GAAI,KACF,KAAK,aAAa,EAAS;;EAGhC,EACF;CACD,SAAS;EACP,MAAM,aAAa,GAAe;AAEhC,GADA,KAAK,UAAU,IACf,KAAK,QAAQ;AACb,OAAI;IACF,IAAI,IAAsB,EAAE;AAG5B,QAAI,KAAK,aAGP,CADA,IAAY,CAAC,KAAK,aAAa,EAC/B,QAAQ,IAAI,+BAA+B,KAAK,eAAe;SAC1D;KAEL,IAAM,EAAE,oBAAiB,MAAM,OAAO;AAGtC,KADA,KADsB,MAAM,EAAa,eAAe,EAC9B,KAAI,MAAK,EAAE,IAAI,CAAC,OAAO,QAAQ,EACzD,QAAQ,IAAI,wBAAwB,EAAU,OAAM,UAAW;;IAGjE,IAAM,IAA6B,EAAE;AAErC,SAAK,IAAM,KAAY,GAAW;KAEhC,IAAM,IAAQ,MADG,KAAK,UAAU,YAAY,EAAS,CACxB,YAAY,EAAM;AAE/C,UAAK,IAAM,KAAQ,EACjB,GAAS,KAAK;MACZ,GAAG;MACO;MACX,CAAC;;AAIN,IADA,KAAK,QAAQ,GACb,QAAQ,IAAI,2BAA2B,EAAS,OAAM,gBAAiB,EAAU,OAAM,UAAW;YAC3F,GAAG;AAEV,IADA,KAAK,QAAQ,kCACb,QAAQ,MAAM,iBAAiB,EAAE;aACzB;AACR,SAAK,UAAU;;;EAInB,WAAW,GAAsB;AAE/B,GADA,KAAK,iBAAiB,EAAK,KAC3B,KAAK,MAAM,iBAAiB;IAAE,QAAQ,EAAK;IAAK,UAAU,EAAK;IAAU,CAAC;;EAE7E;CACF,CAAC"}

package/dist/components/CourseCardBrowser.mjs

@@ -0,0 +1,175 @@
+import "../_virtual/_rolldown/runtime.mjs";
+import e from "../_virtual/_plugin-vue_export-helper.mjs";
+import t from "./CourseCardBrowser.vue_vue_type_script_lang.mjs";
+/* empty css                                                                   */
+import { Fragment as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, mergeProps as l, normalizeClass as u, openBlock as d, renderList as f, resolveComponent as p, toDisplayString as m, vShow as h, withCtx as g, withDirectives as _, withModifiers as v } from "vue";
+//#region src/components/CourseCardBrowser.vue
+var y = {
+	key: 0,
+	class: "d-flex justify-center align-center pa-6"
+}, b = { key: 1 }, x = {
+	key: 0,
+	class: "px-4 py-2 bg-blue-grey-lighten-5"
+}, S = {
+	key: 0,
+	class: "mt-4"
+}, C = { class: "mt-4" }, w = {
+	key: 0,
+	class: "ml-4"
+};
+function _sfc_render(e, t, T, E, D, O) {
+	let k = p("v-progress-circular"), A = p("paginating-toolbar"), j = p("v-list-item-title"), M = p("v-list-item-subtitle"), N = p("v-btn"), P = p("v-icon"), F = p("v-speed-dial"), I = p("v-list-item"), L = p("card-loader"), R = p("v-chip"), z = p("v-chip-group"), B = p("tags-input"), V = p("v-list"), H = p("v-card");
+	return d(), r(H, null, {
+		default: g(() => [e.updatePending ? (d(), a("div", y, [c(k, {
+			indeterminate: "",
+			color: "primary"
+		})])) : (d(), a("div", b, [
+			c(A, {
+				title: "Exercises",
+				page: e.page,
+				pages: e.pages,
+				subtitle: `(${e.questionCount})`,
+				onFirst: e.first,
+				onPrev: e.prev,
+				onNext: e.next,
+				onLast: e.last,
+				onSetPage: t[0] || (t[0] = (t) => e.setPage(t))
+			}, null, 8, [
+				"page",
+				"pages",
+				"subtitle",
+				"onFirst",
+				"onPrev",
+				"onNext",
+				"onLast"
+			]),
+			c(V, null, {
+				default: g(() => [(d(!0), a(n, null, f(e.cards, (p) => (d(), a(n, { key: p.card.cardID }, [c(I, {
+					class: u({
+						"bg-blue-grey-lighten-5": p.isOpen,
+						"elevation-4": p.isOpen
+					}),
+					density: "compact",
+					"data-cy": "course-card"
+				}, {
+					prepend: g(() => [o("div", null, [c(j, { class: u([{ "text-blue-grey-darken-1": p.isOpen }, "font-weight-medium"]) }, {
+						default: g(() => [s(m(e.cardPreview[p.card.cardID]), 1)]),
+						_: 2
+					}, 1032, ["class"]), c(M, null, {
+						default: g(() => [s(" ELO: " + m(e.cardElos[p.card.cardID]?.global?.score || "(unknown)"), 1)]),
+						_: 2
+					}, 1024)])]),
+					append: g(() => [c(F, {
+						modelValue: p.isOpen,
+						"onUpdate:modelValue": (e) => p.isOpen = e,
+						location: "left center",
+						transition: "slide-x-transition",
+						style: {
+							display: "flex",
+							"flex-direction": "row-reverse"
+						},
+						persistent: ""
+					}, {
+						activator: g(({ props: t }) => [c(N, l({ ref_for: !0 }, t, {
+							icon: p.isOpen ? "mdi-close" : "mdi-plus",
+							size: "small",
+							variant: "text",
+							onClick: (t) => e.clearSelections(p.card.cardID)
+						}), null, 16, ["icon", "onClick"])]),
+						default: g(() => [e.editMode === "full" ? (d(), r(N, {
+							key: "tags",
+							icon: "",
+							size: "small",
+							variant: e.internalEditMode === "tags" ? "elevated" : "outlined",
+							color: e.internalEditMode === "tags" ? "teal" : "teal-darken-3",
+							onClick: t[1] || (t[1] = v((t) => e.internalEditMode = "tags", ["stop"]))
+						}, {
+							default: g(() => [c(P, null, {
+								default: g(() => t[4] || (t[4] = [s("mdi-bookmark")])),
+								_: 1
+							})]),
+							_: 1
+						}, 8, ["variant", "color"])) : i("", !0), e.editMode === "full" ? (d(), r(N, {
+							key: "flag",
+							icon: "",
+							size: "small",
+							variant: e.internalEditMode === "flag" ? "elevated" : "outlined",
+							color: e.internalEditMode === "flag" ? "error" : "error-darken-3",
+							onClick: t[2] || (t[2] = v((t) => e.internalEditMode = "flag", ["stop"]))
+						}, {
+							default: g(() => [c(P, null, {
+								default: g(() => t[5] || (t[5] = [s("mdi-flag")])),
+								_: 1
+							})]),
+							_: 1
+						}, 8, ["variant", "color"])) : i("", !0)]),
+						_: 2
+					}, 1032, ["modelValue", "onUpdate:modelValue"])]),
+					_: 2
+				}, 1032, ["class"]), p.isOpen ? (d(), a("div", x, [
+					c(L, {
+						qualified_id: p.card,
+						"view-lookup": e.viewLookup,
+						class: "elevation-1"
+					}, null, 8, ["qualified_id", "view-lookup"]),
+					e.editMode === "readonly" && e.cardTags[p.card.cardID] ? (d(), a("div", S, [c(z, null, {
+						default: g(() => [(d(!0), a(n, null, f(e.cardTags[p.card.cardID], (e) => (d(), r(R, {
+							key: e.name,
+							size: "small",
+							color: "primary",
+							variant: "outlined"
+						}, {
+							default: g(() => [s(m(e.name), 1)]),
+							_: 2
+						}, 1024))), 128))]),
+						_: 2
+					}, 1024)])) : i("", !0),
+					_(c(B, {
+						"course-i-d": e.courseId,
+						"card-i-d": p.card.cardID,
+						class: "mt-4"
+					}, null, 8, ["course-i-d", "card-i-d"]), [[h, e.internalEditMode === "tags" && e.editMode === "full"]]),
+					_(o("div", C, [c(N, {
+						color: "error",
+						variant: "outlined",
+						onClick: (e) => p.delBtn = !0
+					}, {
+						default: g(() => t[6] || (t[6] = [s(" Delete this card ")])),
+						_: 2
+					}, 1032, ["onClick"]), p.delBtn ? (d(), a("span", w, [t[8] || (t[8] = o("span", { class: "mr-2" }, "Are you sure?", -1)), c(N, {
+						color: "error",
+						variant: "elevated",
+						onClick: (t) => e.deleteCard(p.card.cardID)
+					}, {
+						default: g(() => t[7] || (t[7] = [s(" Confirm ")])),
+						_: 2
+					}, 1032, ["onClick"])])) : i("", !0)], 512), [[h, e.internalEditMode === "flag" && e.editMode === "full"]])
+				])) : i("", !0)], 64))), 128))]),
+				_: 1
+			}),
+			c(A, {
+				class: "elevation-0",
+				page: e.page,
+				pages: e.pages,
+				onFirst: e.first,
+				onPrev: e.prev,
+				onNext: e.next,
+				onLast: e.last,
+				onSetPage: t[3] || (t[3] = (t) => e.setPage(t))
+			}, null, 8, [
+				"page",
+				"pages",
+				"onFirst",
+				"onPrev",
+				"onNext",
+				"onLast"
+			])
+		]))]),
+		_: 1
+	});
+}
+var T = /* @__PURE__ */ e(t, [["render", _sfc_render], ["__scopeId", "data-v-5ecc9d21"]]);
+//#endregion
+export { T as default };
+
+//# sourceMappingURL=CourseCardBrowser.mjs.map

package/dist/components/CourseCardBrowser.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CourseCardBrowser.mjs","names":[],"sources":["../../src/components/CourseCardBrowser.vue"],"sourcesContent":["<template>\n  <v-card>\n    <div v-if=\"updatePending\" class=\"d-flex justify-center align-center pa-6\">\n      <v-progress-circular indeterminate color=\"primary\" />\n    </div>\n    <div v-else>\n      <paginating-toolbar\n        title=\"Exercises\"\n        :page=\"page\"\n        :pages=\"pages\"\n        :subtitle=\"`(${questionCount})`\"\n        @first=\"first\"\n        @prev=\"prev\"\n        @next=\"next\"\n        @last=\"last\"\n        @set-page=\"(n) => setPage(n)\"\n      />\n\n      <v-list>\n        <template v-for=\"c in cards\" :key=\"c.card.cardID\">\n          <v-list-item\n            :class=\"{\n              'bg-blue-grey-lighten-5': c.isOpen,\n              'elevation-4': c.isOpen,\n            }\"\n            density=\"compact\"\n            data-cy=\"course-card\"\n          >\n            <template #prepend>\n              <div>\n                <v-list-item-title :class=\"{ 'text-blue-grey-darken-1': c.isOpen }\" class=\"font-weight-medium\">\n                  {{ cardPreview[c.card.cardID] }}\n                </v-list-item-title>\n                <v-list-item-subtitle>\n                  ELO: {{ cardElos[c.card.cardID]?.global?.score || '(unknown)' }}\n                </v-list-item-subtitle>\n              </div>\n            </template>\n\n            <template #append>\n              <v-speed-dial\n                v-model=\"c.isOpen\"\n                location=\"left center\"\n                transition=\"slide-x-transition\"\n                style=\"display: flex; flex-direction: row-reverse\"\n                persistent\n              >\n                <template #activator=\"{ props }\">\n                  <v-btn\n                    v-bind=\"props\"\n                    :icon=\"c.isOpen ? 'mdi-close' : 'mdi-plus'\"\n                    size=\"small\"\n                    variant=\"text\"\n                    @click=\"clearSelections(c.card.cardID)\"\n                  />\n                </template>\n\n                <v-btn\n                  v-if=\"editMode === 'full'\"\n                  key=\"tags\"\n                  icon\n                  size=\"small\"\n                  :variant=\"internalEditMode !== 'tags' ? 'outlined' : 'elevated'\"\n                  :color=\"internalEditMode === 'tags' ? 'teal' : 'teal-darken-3'\"\n                  @click.stop=\"internalEditMode = 'tags'\"\n                >\n                  <v-icon>mdi-bookmark</v-icon>\n                </v-btn>\n\n                <v-btn\n                  v-if=\"editMode === 'full'\"\n                  key=\"flag\"\n                  icon\n                  size=\"small\"\n                  :variant=\"internalEditMode !== 'flag' ? 'outlined' : 'elevated'\"\n                  :color=\"internalEditMode === 'flag' ? 'error' : 'error-darken-3'\"\n                  @click.stop=\"internalEditMode = 'flag'\"\n                >\n                  <v-icon>mdi-flag</v-icon>\n                </v-btn>\n              </v-speed-dial>\n            </template>\n          </v-list-item>\n\n          <div v-if=\"c.isOpen\" class=\"px-4 py-2 bg-blue-grey-lighten-5\">\n            <card-loader :qualified_id=\"c.card\" :view-lookup=\"viewLookup\" class=\"elevation-1\" />\n\n            <!-- Tags display for readonly mode -->\n            <div v-if=\"editMode === 'readonly' && cardTags[c.card.cardID]\" class=\"mt-4\">\n              <v-chip-group>\n                <v-chip\n                  v-for=\"tag in cardTags[c.card.cardID]\"\n                  :key=\"tag.name\"\n                  size=\"small\"\n                  color=\"primary\"\n                  variant=\"outlined\"\n                >\n                  {{ tag.name }}\n                </v-chip>\n              </v-chip-group>\n            </div>\n\n            <tags-input\n              v-show=\"internalEditMode === 'tags' && editMode === 'full'\"\n              :course-i-d=\"courseId\"\n              :card-i-d=\"c.card.cardID\"\n              class=\"mt-4\"\n            />\n\n            <div v-show=\"internalEditMode === 'flag' && editMode === 'full'\" class=\"mt-4\">\n              <v-btn color=\"error\" variant=\"outlined\" @click=\"c.delBtn = true\"> Delete this card </v-btn>\n              <span v-if=\"c.delBtn\" class=\"ml-4\">\n                <span class=\"mr-2\">Are you sure?</span>\n                <v-btn color=\"error\" variant=\"elevated\" @click=\"deleteCard(c.card.cardID)\"> Confirm </v-btn>\n              </span>\n            </div>\n          </div>\n        </template>\n      </v-list>\n\n      <paginating-toolbar\n        class=\"elevation-0\"\n        :page=\"page\"\n        :pages=\"pages\"\n        @first=\"first\"\n        @prev=\"prev\"\n        @next=\"next\"\n        @last=\"last\"\n        @set-page=\"(n) => setPage(n)\"\n      />\n    </div>\n  </v-card>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, PropType } from 'vue';\nimport { displayableDataToViewData, Status, CourseElo } from '@vue-skuilder/common';\nimport {\n  getDataLayer,\n  CourseDBInterface,\n  CardData,\n  DisplayableData,\n  Tag,\n  TagStub,\n  QualifiedCardID,\n} from '@vue-skuilder/db';\n// local imports\nimport TagsInput from './TagsInput.vue';\nimport PaginatingToolbar from './PaginatingToolbar.vue';\nimport { ViewComponent } from '../composables/Displayable';\nimport CardLoader from './cardRendering/CardLoader.vue';\nimport { alertUser } from './SnackbarService';\n\n// Legacy isConstructor function removed - no longer needed for Vue 3 components\n\nexport default defineComponent({\n  name: 'CourseCardBrowser',\n\n  components: {\n    CardLoader,\n    TagsInput,\n    PaginatingToolbar,\n  },\n\n  props: {\n    courseId: {\n      type: String,\n      required: true,\n    },\n    tagId: {\n      type: String,\n      required: false,\n      default: '',\n    },\n    viewLookupFunction: {\n      type: Function,\n      required: true,\n      default: () => {\n        console.warn('No viewLookupFunction provided to CourseCardBrowser');\n        return null;\n      },\n    },\n    editMode: {\n      type: String as PropType<'none' | 'readonly' | 'full'>,\n      required: false,\n      default: 'full',\n    },\n  },\n\n  data() {\n    return {\n      courseDB: null as CourseDBInterface | null,\n      page: 1,\n      pages: [] as number[],\n      cards: [] as { card: QualifiedCardID; isOpen: boolean; delBtn: boolean }[],\n      cardData: {} as { [card: string]: string[] },\n      cardPreview: {} as { [card: string]: string },\n      cardElos: {} as Record<string, CourseElo>,\n      cardTags: {} as Record<string, TagStub[]>,\n      internalEditMode: 'none' as 'tags' | 'flag' | 'none',\n      delBtn: false,\n      updatePending: true,\n      userIsRegistered: false,\n      questionCount: 0,\n      tags: [] as Tag[],\n      viewLookup: this.viewLookupFunction,\n    };\n  },\n\n  async created() {\n    try {\n      this.courseDB = getDataLayer().getCourseDB(this.courseId);\n\n      if (this.tagId) {\n        this.questionCount = (await this.courseDB.getTag(this.tagId)).taggedCards.length;\n      } else {\n        this.questionCount = (await this.courseDB!.getCourseInfo()).cardCount;\n      }\n\n      for (let i = 1; (i - 1) * 25 < this.questionCount; i++) {\n        this.pages.push(i);\n      }\n\n      await this.populateTableData();\n    } catch (error) {\n      console.error('Error initializing CourseCardBrowser:', error);\n    } finally {\n      this.updatePending = false;\n    }\n  },\n\n  methods: {\n    idQualify(id: string): string {\n      const delimiters = id.includes('-');\n      if (delimiters) {\n        return id;\n      } else {\n        return `${this.courseId}-${id}`;\n      }\n    },\n\n    idToQualifiedObject(id: string): QualifiedCardID {\n      const delimiters = id.includes('-');\n      if (delimiters) {\n        const parts = id.split('-');\n        return {\n          courseID: parts[0],\n          cardID: parts[1],\n        };\n      } else {\n        return {\n          courseID: this.courseId,\n          cardID: id,\n        };\n      }\n    },\n\n    first() {\n      this.page = 1;\n      this.populateTableData();\n    },\n    prev() {\n      this.page--;\n      this.populateTableData();\n    },\n    next() {\n      this.page++;\n      this.populateTableData();\n    },\n    last() {\n      this.page = this.pages.length;\n      this.populateTableData();\n    },\n    setPage(n: number) {\n      this.page = n;\n      this.populateTableData();\n    },\n    async loadCardTags(cardIds: string[]) {\n      try {\n        // Use the proper API method to get tags for each card\n        await Promise.all(\n          cardIds.map(async (cardId) => {\n            const appliedTags = await this.courseDB!.getAppliedTags(cardId);\n\n            // Convert to TagStub format\n            this.cardTags[cardId] = appliedTags.rows.map((row) => ({\n              name: row.value.name,\n              snippet: row.value.snippet,\n              count: row.value.count,\n            }));\n          })\n        );\n      } catch (error) {\n        console.error('Error loading card tags:', error);\n      }\n    },\n    clearSelections(exception: string = '') {\n      this.cards.forEach((card) => {\n        if (card.card.cardID !== exception) {\n          card.isOpen = false;\n        }\n      });\n      this.internalEditMode = 'none';\n      this.delBtn = false;\n    },\n    async deleteCard(cID: string) {\n      console.log(`Deleting card ${cID}`);\n      const res = await this.courseDB!.removeCard(cID);\n      if (res.ok) {\n        this.cards = this.cards.filter((card) => card.card.cardID != cID);\n        this.clearSelections();\n      } else {\n        console.error(`Failed to delete card:\\n\\n${JSON.stringify(res)}`);\n        alertUser({\n          text: 'Failed to delete card',\n          status: Status.error,\n        });\n      }\n    },\n    async populateTableData() {\n      this.updatePending = true;\n      if (this.tagId) {\n        const tag = await this.courseDB!.getTag(this.tagId);\n        this.cards = tag.taggedCards.map((c) => {\n          return { card: { cardID: c, courseID: this.courseId }, isOpen: false, delBtn: false };\n        });\n      } else {\n        this.cards = (await this.courseDB!.getCardsByELO(0, 25)).map((c) => {\n          return {\n            card: c,\n            isOpen: false,\n            delBtn: false,\n          };\n        });\n      }\n\n      const toRemove: string[] = [];\n      const hydratedCardData = (\n        await this.courseDB!.getCourseDocs<CardData>(\n          this.cards.map((c) => c.card.cardID),\n          {\n            include_docs: true,\n          }\n        )\n      ).rows\n        .filter((r) => {\n          if (r.doc) {\n            return true;\n          } else {\n            console.error(`Card ${r.id}.doc not found.\\ncard: ${JSON.stringify(r)}`);\n            // toRemove.push(r.id);\n            // if (this.tagId) {\n            //   this.courseDB!.removeTagFromCard(r.id, this.tagId);\n            // }\n            return false;\n          }\n        })\n        .map((r) => r.doc!);\n\n      this.cards = this.cards.filter((c) => !toRemove.includes(c.card.cardID));\n\n      hydratedCardData.forEach((c) => {\n        if (c && c.id_displayable_data) {\n          this.cardData[c._id] = c.id_displayable_data;\n        }\n      });\n\n      try {\n        await Promise.all(\n          this.cards.map(async (c) => {\n            const _cardID: string = c.card.cardID;\n\n            const tmpCardData = hydratedCardData.find((c) => c._id == _cardID);\n            if (!tmpCardData || !tmpCardData.id_displayable_data) {\n              console.error(`No valid data found for card ${_cardID}`);\n              return;\n            }\n            const tmpView: ViewComponent = this.viewLookupFunction(\n              tmpCardData.id_view || 'default.question.BlanksCard.FillInView'\n            );\n\n            const tmpDataDocs = tmpCardData.id_displayable_data.map((id) => {\n              return this.courseDB!.getCourseDoc<DisplayableData>(id, {\n                attachments: false,\n                binary: true,\n              });\n            });\n\n            const allDocs = await Promise.all(tmpDataDocs);\n            await Promise.all(\n              allDocs.map((doc) => {\n                const tmpData = [];\n                tmpData.unshift(displayableDataToViewData(doc));\n\n                // Vue 3: Use component name for preview (legacy constructor code removed)\n                this.cardPreview[c.card.cardID] = tmpView.name ? tmpView.name : 'Unknown';\n              })\n            );\n          })\n        );\n\n        // Load ELO data for all cards\n        const cardIds = this.cards.map((c) => c.card.cardID);\n        const eloData = await this.courseDB!.getCardEloData(cardIds); // general case lookup\n\n        // Store ELO data indexed by card ID\n        cardIds.forEach((cardId, index) => {\n          this.cardElos[cardId] = eloData[index];\n        });\n\n        // Load tags for each card\n        await this.loadCardTags(cardIds);\n      } catch (error) {\n        console.error('Error populating table data:', error);\n      } finally {\n        this.updatePending = false;\n        this.$forceUpdate();\n      }\n    },\n  },\n});\n</script>\n\n<style scoped>\n.component-fade-enter-active,\n.component-fade-leave-active {\n  transition: opacity 0.5s ease;\n}\n.component-fade-enter, .component-fade-leave-to\n/* .component-fade-leave-active below version 2.1.8 */ {\n  opacity: 0;\n}\n\n.component-scale-enter-active,\n.component-scale-leave-active {\n  max-height: auto;\n  transform: scale(1, 1);\n  transform-origin: top;\n  transition:\n    transform 0.3s ease,\n    max-height 0.3s ease;\n}\n.component-scale-enter,\n.component-fade-leave-to {\n  max-height: 0px;\n  transform: scale(1, 0);\n  overflow: hidden;\n}\n</style>\n"],"mappings":"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"}

package/dist/components/CourseCardBrowser.vue.d.ts

@@ -297,7 +297,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly required: false;
             readonly default: "";
         };
-    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("first" | "prev" | "next" | "last" | "set-page")[], "first" | "prev" | "next" | "last" | "set-page", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("next" | "prev" | "first" | "last" | "set-page")[], "next" | "prev" | "first" | "last" | "set-page", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
         readonly pages: {
             readonly type: PropType<number[]>;
             readonly required: true;
@@ -317,9 +317,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             readonly default: "";
         };
     }>> & Readonly<{
-        onFirst?: ((...args: any[]) => any) | undefined;
-        onPrev?: ((...args: any[]) => any) | undefined;
         onNext?: ((...args: any[]) => any) | undefined;
+        onPrev?: ((...args: any[]) => any) | undefined;
+        onFirst?: ((...args: any[]) => any) | undefined;
         onLast?: ((...args: any[]) => any) | undefined;
         "onSet-page"?: ((...args: any[]) => any) | undefined;
     }>, {

package/dist/components/CourseCardBrowser.vue_vue_type_script_lang.mjs

@@ -0,0 +1,173 @@
+import "../_virtual/_rolldown/runtime.mjs";
+import { alertUser as e } from "./SnackbarService.mjs";
+import t from "./PaginatingToolbar.mjs";
+import n from "./cardRendering/CardLoader.mjs";
+import r from "./TagsInput.mjs";
+import { defineComponent as i } from "vue";
+import { Status as a, displayableDataToViewData as o } from "@vue-skuilder/common";
+import { getDataLayer as s } from "@vue-skuilder/db";
+//#region src/components/CourseCardBrowser.vue?vue&type=script&lang.ts
+var c = i({
+	name: "CourseCardBrowser",
+	components: {
+		CardLoader: n,
+		TagsInput: r,
+		PaginatingToolbar: t
+	},
+	props: {
+		courseId: {
+			type: String,
+			required: !0
+		},
+		tagId: {
+			type: String,
+			required: !1,
+			default: ""
+		},
+		viewLookupFunction: {
+			type: Function,
+			required: !0,
+			default: () => (console.warn("No viewLookupFunction provided to CourseCardBrowser"), null)
+		},
+		editMode: {
+			type: String,
+			required: !1,
+			default: "full"
+		}
+	},
+	data() {
+		return {
+			courseDB: null,
+			page: 1,
+			pages: [],
+			cards: [],
+			cardData: {},
+			cardPreview: {},
+			cardElos: {},
+			cardTags: {},
+			internalEditMode: "none",
+			delBtn: !1,
+			updatePending: !0,
+			userIsRegistered: !1,
+			questionCount: 0,
+			tags: [],
+			viewLookup: this.viewLookupFunction
+		};
+	},
+	async created() {
+		try {
+			this.courseDB = s().getCourseDB(this.courseId), this.tagId ? this.questionCount = (await this.courseDB.getTag(this.tagId)).taggedCards.length : this.questionCount = (await this.courseDB.getCourseInfo()).cardCount;
+			for (let e = 1; (e - 1) * 25 < this.questionCount; e++) this.pages.push(e);
+			await this.populateTableData();
+		} catch (e) {
+			console.error("Error initializing CourseCardBrowser:", e);
+		} finally {
+			this.updatePending = !1;
+		}
+	},
+	methods: {
+		idQualify(e) {
+			return e.includes("-") ? e : `${this.courseId}-${e}`;
+		},
+		idToQualifiedObject(e) {
+			if (e.includes("-")) {
+				let t = e.split("-");
+				return {
+					courseID: t[0],
+					cardID: t[1]
+				};
+			} else return {
+				courseID: this.courseId,
+				cardID: e
+			};
+		},
+		first() {
+			this.page = 1, this.populateTableData();
+		},
+		prev() {
+			this.page--, this.populateTableData();
+		},
+		next() {
+			this.page++, this.populateTableData();
+		},
+		last() {
+			this.page = this.pages.length, this.populateTableData();
+		},
+		setPage(e) {
+			this.page = e, this.populateTableData();
+		},
+		async loadCardTags(e) {
+			try {
+				await Promise.all(e.map(async (e) => {
+					let t = await this.courseDB.getAppliedTags(e);
+					this.cardTags[e] = t.rows.map((e) => ({
+						name: e.value.name,
+						snippet: e.value.snippet,
+						count: e.value.count
+					}));
+				}));
+			} catch (e) {
+				console.error("Error loading card tags:", e);
+			}
+		},
+		clearSelections(e = "") {
+			this.cards.forEach((t) => {
+				t.card.cardID !== e && (t.isOpen = !1);
+			}), this.internalEditMode = "none", this.delBtn = !1;
+		},
+		async deleteCard(t) {
+			console.log(`Deleting card ${t}`);
+			let n = await this.courseDB.removeCard(t);
+			n.ok ? (this.cards = this.cards.filter((e) => e.card.cardID != t), this.clearSelections()) : (console.error(`Failed to delete card:\n\n${JSON.stringify(n)}`), e({
+				text: "Failed to delete card",
+				status: a.error
+			}));
+		},
+		async populateTableData() {
+			this.updatePending = !0, this.tagId ? this.cards = (await this.courseDB.getTag(this.tagId)).taggedCards.map((e) => ({
+				card: {
+					cardID: e,
+					courseID: this.courseId
+				},
+				isOpen: !1,
+				delBtn: !1
+			})) : this.cards = (await this.courseDB.getCardsByELO(0, 25)).map((e) => ({
+				card: e,
+				isOpen: !1,
+				delBtn: !1
+			}));
+			let e = [], t = (await this.courseDB.getCourseDocs(this.cards.map((e) => e.card.cardID), { include_docs: !0 })).rows.filter((e) => e.doc ? !0 : (console.error(`Card ${e.id}.doc not found.\ncard: ${JSON.stringify(e)}`), !1)).map((e) => e.doc);
+			this.cards = this.cards.filter((t) => !e.includes(t.card.cardID)), t.forEach((e) => {
+				e && e.id_displayable_data && (this.cardData[e._id] = e.id_displayable_data);
+			});
+			try {
+				await Promise.all(this.cards.map(async (e) => {
+					let n = e.card.cardID, r = t.find((e) => e._id == n);
+					if (!r || !r.id_displayable_data) {
+						console.error(`No valid data found for card ${n}`);
+						return;
+					}
+					let i = this.viewLookupFunction(r.id_view || "default.question.BlanksCard.FillInView"), a = r.id_displayable_data.map((e) => this.courseDB.getCourseDoc(e, {
+						attachments: !1,
+						binary: !0
+					})), s = await Promise.all(a);
+					await Promise.all(s.map((t) => {
+						[].unshift(o(t)), this.cardPreview[e.card.cardID] = i.name ? i.name : "Unknown";
+					}));
+				}));
+				let e = this.cards.map((e) => e.card.cardID), n = await this.courseDB.getCardEloData(e);
+				e.forEach((e, t) => {
+					this.cardElos[e] = n[t];
+				}), await this.loadCardTags(e);
+			} catch (e) {
+				console.error("Error populating table data:", e);
+			} finally {
+				this.updatePending = !1, this.$forceUpdate();
+			}
+		}
+	}
+});
+//#endregion
+export { c as default };
+
+//# sourceMappingURL=CourseCardBrowser.vue_vue_type_script_lang.mjs.map

package/dist/components/CourseCardBrowser.vue_vue_type_script_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CourseCardBrowser.vue_vue_type_script_lang.mjs","names":[],"sources":["../../src/components/CourseCardBrowser.vue"],"sourcesContent":["<template>\n  <v-card>\n    <div v-if=\"updatePending\" class=\"d-flex justify-center align-center pa-6\">\n      <v-progress-circular indeterminate color=\"primary\" />\n    </div>\n    <div v-else>\n      <paginating-toolbar\n        title=\"Exercises\"\n        :page=\"page\"\n        :pages=\"pages\"\n        :subtitle=\"`(${questionCount})`\"\n        @first=\"first\"\n        @prev=\"prev\"\n        @next=\"next\"\n        @last=\"last\"\n        @set-page=\"(n) => setPage(n)\"\n      />\n\n      <v-list>\n        <template v-for=\"c in cards\" :key=\"c.card.cardID\">\n          <v-list-item\n            :class=\"{\n              'bg-blue-grey-lighten-5': c.isOpen,\n              'elevation-4': c.isOpen,\n            }\"\n            density=\"compact\"\n            data-cy=\"course-card\"\n          >\n            <template #prepend>\n              <div>\n                <v-list-item-title :class=\"{ 'text-blue-grey-darken-1': c.isOpen }\" class=\"font-weight-medium\">\n                  {{ cardPreview[c.card.cardID] }}\n                </v-list-item-title>\n                <v-list-item-subtitle>\n                  ELO: {{ cardElos[c.card.cardID]?.global?.score || '(unknown)' }}\n                </v-list-item-subtitle>\n              </div>\n            </template>\n\n            <template #append>\n              <v-speed-dial\n                v-model=\"c.isOpen\"\n                location=\"left center\"\n                transition=\"slide-x-transition\"\n                style=\"display: flex; flex-direction: row-reverse\"\n                persistent\n              >\n                <template #activator=\"{ props }\">\n                  <v-btn\n                    v-bind=\"props\"\n                    :icon=\"c.isOpen ? 'mdi-close' : 'mdi-plus'\"\n                    size=\"small\"\n                    variant=\"text\"\n                    @click=\"clearSelections(c.card.cardID)\"\n                  />\n                </template>\n\n                <v-btn\n                  v-if=\"editMode === 'full'\"\n                  key=\"tags\"\n                  icon\n                  size=\"small\"\n                  :variant=\"internalEditMode !== 'tags' ? 'outlined' : 'elevated'\"\n                  :color=\"internalEditMode === 'tags' ? 'teal' : 'teal-darken-3'\"\n                  @click.stop=\"internalEditMode = 'tags'\"\n                >\n                  <v-icon>mdi-bookmark</v-icon>\n                </v-btn>\n\n                <v-btn\n                  v-if=\"editMode === 'full'\"\n                  key=\"flag\"\n                  icon\n                  size=\"small\"\n                  :variant=\"internalEditMode !== 'flag' ? 'outlined' : 'elevated'\"\n                  :color=\"internalEditMode === 'flag' ? 'error' : 'error-darken-3'\"\n                  @click.stop=\"internalEditMode = 'flag'\"\n                >\n                  <v-icon>mdi-flag</v-icon>\n                </v-btn>\n              </v-speed-dial>\n            </template>\n          </v-list-item>\n\n          <div v-if=\"c.isOpen\" class=\"px-4 py-2 bg-blue-grey-lighten-5\">\n            <card-loader :qualified_id=\"c.card\" :view-lookup=\"viewLookup\" class=\"elevation-1\" />\n\n            <!-- Tags display for readonly mode -->\n            <div v-if=\"editMode === 'readonly' && cardTags[c.card.cardID]\" class=\"mt-4\">\n              <v-chip-group>\n                <v-chip\n                  v-for=\"tag in cardTags[c.card.cardID]\"\n                  :key=\"tag.name\"\n                  size=\"small\"\n                  color=\"primary\"\n                  variant=\"outlined\"\n                >\n                  {{ tag.name }}\n                </v-chip>\n              </v-chip-group>\n            </div>\n\n            <tags-input\n              v-show=\"internalEditMode === 'tags' && editMode === 'full'\"\n              :course-i-d=\"courseId\"\n              :card-i-d=\"c.card.cardID\"\n              class=\"mt-4\"\n            />\n\n            <div v-show=\"internalEditMode === 'flag' && editMode === 'full'\" class=\"mt-4\">\n              <v-btn color=\"error\" variant=\"outlined\" @click=\"c.delBtn = true\"> Delete this card </v-btn>\n              <span v-if=\"c.delBtn\" class=\"ml-4\">\n                <span class=\"mr-2\">Are you sure?</span>\n                <v-btn color=\"error\" variant=\"elevated\" @click=\"deleteCard(c.card.cardID)\"> Confirm </v-btn>\n              </span>\n            </div>\n          </div>\n        </template>\n      </v-list>\n\n      <paginating-toolbar\n        class=\"elevation-0\"\n        :page=\"page\"\n        :pages=\"pages\"\n        @first=\"first\"\n        @prev=\"prev\"\n        @next=\"next\"\n        @last=\"last\"\n        @set-page=\"(n) => setPage(n)\"\n      />\n    </div>\n  </v-card>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, PropType } from 'vue';\nimport { displayableDataToViewData, Status, CourseElo } from '@vue-skuilder/common';\nimport {\n  getDataLayer,\n  CourseDBInterface,\n  CardData,\n  DisplayableData,\n  Tag,\n  TagStub,\n  QualifiedCardID,\n} from '@vue-skuilder/db';\n// local imports\nimport TagsInput from './TagsInput.vue';\nimport PaginatingToolbar from './PaginatingToolbar.vue';\nimport { ViewComponent } from '../composables/Displayable';\nimport CardLoader from './cardRendering/CardLoader.vue';\nimport { alertUser } from './SnackbarService';\n\n// Legacy isConstructor function removed - no longer needed for Vue 3 components\n\nexport default defineComponent({\n  name: 'CourseCardBrowser',\n\n  components: {\n    CardLoader,\n    TagsInput,\n    PaginatingToolbar,\n  },\n\n  props: {\n    courseId: {\n      type: String,\n      required: true,\n    },\n    tagId: {\n      type: String,\n      required: false,\n      default: '',\n    },\n    viewLookupFunction: {\n      type: Function,\n      required: true,\n      default: () => {\n        console.warn('No viewLookupFunction provided to CourseCardBrowser');\n        return null;\n      },\n    },\n    editMode: {\n      type: String as PropType<'none' | 'readonly' | 'full'>,\n      required: false,\n      default: 'full',\n    },\n  },\n\n  data() {\n    return {\n      courseDB: null as CourseDBInterface | null,\n      page: 1,\n      pages: [] as number[],\n      cards: [] as { card: QualifiedCardID; isOpen: boolean; delBtn: boolean }[],\n      cardData: {} as { [card: string]: string[] },\n      cardPreview: {} as { [card: string]: string },\n      cardElos: {} as Record<string, CourseElo>,\n      cardTags: {} as Record<string, TagStub[]>,\n      internalEditMode: 'none' as 'tags' | 'flag' | 'none',\n      delBtn: false,\n      updatePending: true,\n      userIsRegistered: false,\n      questionCount: 0,\n      tags: [] as Tag[],\n      viewLookup: this.viewLookupFunction,\n    };\n  },\n\n  async created() {\n    try {\n      this.courseDB = getDataLayer().getCourseDB(this.courseId);\n\n      if (this.tagId) {\n        this.questionCount = (await this.courseDB.getTag(this.tagId)).taggedCards.length;\n      } else {\n        this.questionCount = (await this.courseDB!.getCourseInfo()).cardCount;\n      }\n\n      for (let i = 1; (i - 1) * 25 < this.questionCount; i++) {\n        this.pages.push(i);\n      }\n\n      await this.populateTableData();\n    } catch (error) {\n      console.error('Error initializing CourseCardBrowser:', error);\n    } finally {\n      this.updatePending = false;\n    }\n  },\n\n  methods: {\n    idQualify(id: string): string {\n      const delimiters = id.includes('-');\n      if (delimiters) {\n        return id;\n      } else {\n        return `${this.courseId}-${id}`;\n      }\n    },\n\n    idToQualifiedObject(id: string): QualifiedCardID {\n      const delimiters = id.includes('-');\n      if (delimiters) {\n        const parts = id.split('-');\n        return {\n          courseID: parts[0],\n          cardID: parts[1],\n        };\n      } else {\n        return {\n          courseID: this.courseId,\n          cardID: id,\n        };\n      }\n    },\n\n    first() {\n      this.page = 1;\n      this.populateTableData();\n    },\n    prev() {\n      this.page--;\n      this.populateTableData();\n    },\n    next() {\n      this.page++;\n      this.populateTableData();\n    },\n    last() {\n      this.page = this.pages.length;\n      this.populateTableData();\n    },\n    setPage(n: number) {\n      this.page = n;\n      this.populateTableData();\n    },\n    async loadCardTags(cardIds: string[]) {\n      try {\n        // Use the proper API method to get tags for each card\n        await Promise.all(\n          cardIds.map(async (cardId) => {\n            const appliedTags = await this.courseDB!.getAppliedTags(cardId);\n\n            // Convert to TagStub format\n            this.cardTags[cardId] = appliedTags.rows.map((row) => ({\n              name: row.value.name,\n              snippet: row.value.snippet,\n              count: row.value.count,\n            }));\n          })\n        );\n      } catch (error) {\n        console.error('Error loading card tags:', error);\n      }\n    },\n    clearSelections(exception: string = '') {\n      this.cards.forEach((card) => {\n        if (card.card.cardID !== exception) {\n          card.isOpen = false;\n        }\n      });\n      this.internalEditMode = 'none';\n      this.delBtn = false;\n    },\n    async deleteCard(cID: string) {\n      console.log(`Deleting card ${cID}`);\n      const res = await this.courseDB!.removeCard(cID);\n      if (res.ok) {\n        this.cards = this.cards.filter((card) => card.card.cardID != cID);\n        this.clearSelections();\n      } else {\n        console.error(`Failed to delete card:\\n\\n${JSON.stringify(res)}`);\n        alertUser({\n          text: 'Failed to delete card',\n          status: Status.error,\n        });\n      }\n    },\n    async populateTableData() {\n      this.updatePending = true;\n      if (this.tagId) {\n        const tag = await this.courseDB!.getTag(this.tagId);\n        this.cards = tag.taggedCards.map((c) => {\n          return { card: { cardID: c, courseID: this.courseId }, isOpen: false, delBtn: false };\n        });\n      } else {\n        this.cards = (await this.courseDB!.getCardsByELO(0, 25)).map((c) => {\n          return {\n            card: c,\n            isOpen: false,\n            delBtn: false,\n          };\n        });\n      }\n\n      const toRemove: string[] = [];\n      const hydratedCardData = (\n        await this.courseDB!.getCourseDocs<CardData>(\n          this.cards.map((c) => c.card.cardID),\n          {\n            include_docs: true,\n          }\n        )\n      ).rows\n        .filter((r) => {\n          if (r.doc) {\n            return true;\n          } else {\n            console.error(`Card ${r.id}.doc not found.\\ncard: ${JSON.stringify(r)}`);\n            // toRemove.push(r.id);\n            // if (this.tagId) {\n            //   this.courseDB!.removeTagFromCard(r.id, this.tagId);\n            // }\n            return false;\n          }\n        })\n        .map((r) => r.doc!);\n\n      this.cards = this.cards.filter((c) => !toRemove.includes(c.card.cardID));\n\n      hydratedCardData.forEach((c) => {\n        if (c && c.id_displayable_data) {\n          this.cardData[c._id] = c.id_displayable_data;\n        }\n      });\n\n      try {\n        await Promise.all(\n          this.cards.map(async (c) => {\n            const _cardID: string = c.card.cardID;\n\n            const tmpCardData = hydratedCardData.find((c) => c._id == _cardID);\n            if (!tmpCardData || !tmpCardData.id_displayable_data) {\n              console.error(`No valid data found for card ${_cardID}`);\n              return;\n            }\n            const tmpView: ViewComponent = this.viewLookupFunction(\n              tmpCardData.id_view || 'default.question.BlanksCard.FillInView'\n            );\n\n            const tmpDataDocs = tmpCardData.id_displayable_data.map((id) => {\n              return this.courseDB!.getCourseDoc<DisplayableData>(id, {\n                attachments: false,\n                binary: true,\n              });\n            });\n\n            const allDocs = await Promise.all(tmpDataDocs);\n            await Promise.all(\n              allDocs.map((doc) => {\n                const tmpData = [];\n                tmpData.unshift(displayableDataToViewData(doc));\n\n                // Vue 3: Use component name for preview (legacy constructor code removed)\n                this.cardPreview[c.card.cardID] = tmpView.name ? tmpView.name : 'Unknown';\n              })\n            );\n          })\n        );\n\n        // Load ELO data for all cards\n        const cardIds = this.cards.map((c) => c.card.cardID);\n        const eloData = await this.courseDB!.getCardEloData(cardIds); // general case lookup\n\n        // Store ELO data indexed by card ID\n        cardIds.forEach((cardId, index) => {\n          this.cardElos[cardId] = eloData[index];\n        });\n\n        // Load tags for each card\n        await this.loadCardTags(cardIds);\n      } catch (error) {\n        console.error('Error populating table data:', error);\n      } finally {\n        this.updatePending = false;\n        this.$forceUpdate();\n      }\n    },\n  },\n});\n</script>\n\n<style scoped>\n.component-fade-enter-active,\n.component-fade-leave-active {\n  transition: opacity 0.5s ease;\n}\n.component-fade-enter, .component-fade-leave-to\n/* .component-fade-leave-active below version 2.1.8 */ {\n  opacity: 0;\n}\n\n.component-scale-enter-active,\n.component-scale-leave-active {\n  max-height: auto;\n  transform: scale(1, 1);\n  transform-origin: top;\n  transition:\n    transform 0.3s ease,\n    max-height 0.3s ease;\n}\n.component-scale-enter,\n.component-fade-leave-to {\n  max-height: 0px;\n  transform: scale(1, 0);\n  overflow: hidden;\n}\n</style>\n"],"mappings":"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"}