@vue-skuilder/common-ui 0.1.4 → 0.1.6

package/src/components/CourseCardBrowser.vue

@@ -0,0 +1,384 @@
+<template>
+  <v-card>
+    <div v-if="updatePending" class="d-flex justify-center align-center pa-6">
+      <v-progress-circular indeterminate color="primary" />
+    </div>
+    <div v-else>
+      <paginating-toolbar
+        title="Exercises"
+        :page="page"
+        :pages="pages"
+        :subtitle="`(${questionCount})`"
+        @first="first"
+        @prev="prev"
+        @next="next"
+        @last="last"
+        @set-page="(n) => setPage(n)"
+      />
+
+      <v-list>
+        <template v-for="c in cards" :key="c.id">
+          <v-list-item
+            :class="{
+              'bg-blue-grey-lighten-5': c.isOpen,
+              'elevation-4': c.isOpen,
+            }"
+            density="compact"
+            data-cy="course-card"
+          >
+            <template #prepend>
+              <div>
+                <v-list-item-title :class="{ 'text-blue-grey-darken-1': c.isOpen }" class="font-weight-medium">
+                  {{ cardPreview[c.id] }}
+                </v-list-item-title>
+                <v-list-item-subtitle>
+                  {{ c.id.split('-').length === 3 ? c.id.split('-')[2] : '' }}
+                </v-list-item-subtitle>
+              </div>
+            </template>
+
+            <template #append>
+              <v-speed-dial
+                v-if="editMode === 'full'"
+                v-model="c.isOpen"
+                location="left center"
+                transition="slide-x-transition"
+                style="display: flex; flex-direction: row-reverse"
+                persistent
+              >
+                <template #activator="{ props }">
+                  <v-btn
+                    v-bind="props"
+                    :icon="c.isOpen ? 'mdi-close' : 'mdi-plus'"
+                    size="small"
+                    variant="text"
+                    @click="clearSelections(c.id)"
+                  />
+                </template>
+
+                <v-btn
+                  key="tags"
+                  icon
+                  size="small"
+                  :variant="internalEditMode !== 'tags' ? 'outlined' : 'elevated'"
+                  :color="internalEditMode === 'tags' ? 'teal' : 'teal-darken-3'"
+                  @click.stop="internalEditMode = 'tags'"
+                >
+                  <v-icon>mdi-bookmark</v-icon>
+                </v-btn>
+
+                <v-btn
+                  key="flag"
+                  icon
+                  size="small"
+                  :variant="internalEditMode !== 'flag' ? 'outlined' : 'elevated'"
+                  :color="internalEditMode === 'flag' ? 'error' : 'error-darken-3'"
+                  @click.stop="internalEditMode = 'flag'"
+                >
+                  <v-icon>mdi-flag</v-icon>
+                </v-btn>
+              </v-speed-dial>
+            </template>
+          </v-list-item>
+
+          <div v-if="c.isOpen" class="px-4 py-2 bg-blue-grey-lighten-5">
+            <card-loader :qualified_id="c.id" :view-lookup="viewLookup" class="elevation-1" />
+
+            <tags-input
+              v-show="internalEditMode === 'tags'"
+              :course-i-d="courseId"
+              :card-i-d="c.id.split('-')[1]"
+              class="mt-4"
+            />
+
+            <div v-show="internalEditMode === 'flag'" class="mt-4">
+              <v-btn color="error" variant="outlined" @click="c.delBtn = true"> Delete this card </v-btn>
+              <span v-if="c.delBtn" class="ml-4">
+                <span class="mr-2">Are you sure?</span>
+                <v-btn color="error" variant="elevated" @click="deleteCard(c.id)"> Confirm </v-btn>
+              </span>
+            </div>
+          </div>
+        </template>
+      </v-list>
+
+      <paginating-toolbar
+        class="elevation-0"
+        :page="page"
+        :pages="pages"
+        @first="first"
+        @prev="prev"
+        @next="next"
+        @last="last"
+        @set-page="(n) => setPage(n)"
+      />
+    </div>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { displayableDataToViewData, Status } from '@vue-skuilder/common';
+import { getDataLayer, CourseDBInterface, CardData, DisplayableData, Tag } from '@vue-skuilder/db';
+// local imports
+import TagsInput from './TagsInput.vue';
+import PaginatingToolbar from './PaginatingToolbar.vue';
+import { ViewComponent } from '../composables/Displayable';
+import CardLoader from './cardRendering/CardLoader.vue';
+import { alertUser } from './SnackbarService';
+
+function isConstructor(obj: unknown) {
+  try {
+    // @ts-expect-error - we are specifically probing an unknown object
+    new obj();
+    return true;
+  } catch (e) {
+    console.warn(`not a constructor: ${obj}, err: ${e}`);
+    return false;
+  }
+}
+
+export default defineComponent({
+  name: 'CourseCardBrowser',
+
+  components: {
+    CardLoader,
+    TagsInput,
+    PaginatingToolbar,
+  },
+
+  props: {
+    courseId: {
+      type: String,
+      required: true,
+    },
+    tagId: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    viewLookupFunction: {
+      type: Function,
+      required: true,
+      default: (x: unknown) => {
+        console.warn('No viewLookupFunction provided to CourseCardBrowser');
+        return null;
+      },
+    },
+    editMode: {
+      type: String as PropType<'none' | 'readonly' | 'full'>,
+      required: false,
+      default: 'full',
+    },
+  },
+
+  data() {
+    return {
+      courseDB: null as CourseDBInterface | null,
+      page: 1,
+      pages: [] as number[],
+      cards: [] as { id: string; isOpen: boolean; delBtn: boolean }[],
+      cardData: {} as { [card: string]: string[] },
+      cardPreview: {} as { [card: string]: string },
+      internalEditMode: 'none' as 'tags' | 'flag' | 'none',
+      delBtn: false,
+      updatePending: true,
+      userIsRegistered: false,
+      questionCount: 0,
+      tags: [] as Tag[],
+      viewLookup: this.viewLookupFunction,
+    };
+  },
+
+  async created() {
+    try {
+      this.courseDB = getDataLayer().getCourseDB(this.courseId);
+
+      if (this.tagId) {
+        this.questionCount = (await this.courseDB.getTag(this.tagId)).taggedCards.length;
+      } else {
+        this.questionCount = (await this.courseDB!.getCourseInfo()).cardCount;
+      }
+
+      for (let i = 1; (i - 1) * 25 < this.questionCount; i++) {
+        this.pages.push(i);
+      }
+
+      await this.populateTableData();
+    } catch (error) {
+      console.error('Error initializing CourseCardBrowser:', error);
+    } finally {
+      this.updatePending = false;
+    }
+  },
+
+  methods: {
+    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(n: number) {
+      this.page = n;
+      this.populateTableData();
+    },
+    clearSelections(exception: string = '') {
+      this.cards.forEach((card) => {
+        if (card.id !== exception) {
+          card.isOpen = false;
+        }
+      });
+      this.internalEditMode = 'none';
+      this.delBtn = false;
+    },
+    async deleteCard(c: string) {
+      console.log(`Deleting card ${c}`);
+      const res = await this.courseDB!.removeCard(c.split('-')[1]);
+      if (res.ok) {
+        this.cards = this.cards.filter((card) => card.id != c);
+        this.clearSelections();
+      } else {
+        console.error(`Failed to delete card:\n\n${JSON.stringify(res)}`);
+        alertUser({
+          text: 'Failed to delete card',
+          status: Status.error,
+        });
+      }
+    },
+    async populateTableData() {
+      this.updatePending = true;
+      if (this.tagId) {
+        const tag = await this.courseDB!.getTag(this.tagId);
+        this.cards = tag.taggedCards.map((c) => {
+          return { id: `${this.courseId}-${c}`, isOpen: false, delBtn: false };
+        });
+      } else {
+        this.cards = (await this.courseDB!.getCardsByELO(0, 25)).map((c) => {
+          return {
+            id: c,
+            isOpen: false,
+            delBtn: false,
+          };
+        });
+      }
+
+      const toRemove: string[] = [];
+      const hydratedCardData = (
+        await this.courseDB!.getCourseDocs<CardData>(
+          this.cards.map((c) => c.id.split('-')[1]),
+          {
+            include_docs: true,
+          }
+        )
+      ).rows
+        .filter((r) => {
+          if (r.doc) {
+            return true;
+          } else {
+            console.error(`Card ${r.id}.doc not found.\ncard: ${JSON.stringify(r)}`);
+            // toRemove.push(r.id);
+            // if (this.tagId) {
+            //   this.courseDB!.removeTagFromCard(r.id, this.tagId);
+            // }
+            return false;
+          }
+        })
+        .map((r) => r.doc!);
+
+      this.cards = this.cards.filter((c) => !toRemove.includes(c.id.split('-')[1]));
+
+      hydratedCardData.forEach((c) => {
+        if (c && c.id_displayable_data) {
+          this.cardData[c._id] = c.id_displayable_data;
+        }
+      });
+
+      try {
+        await Promise.all(
+          this.cards.map(async (c) => {
+            const _cardID: string = c.id.split('-')[1];
+
+            const tmpCardData = hydratedCardData.find((c) => c._id == _cardID);
+            if (!tmpCardData || !tmpCardData.id_displayable_data) {
+              console.error(`No valid data found for card ${_cardID}`);
+              return;
+            }
+            const tmpView: ViewComponent = this.viewLookupFunction(
+              tmpCardData.id_view || 'default.question.BlanksCard.FillInView'
+            );
+
+            const tmpDataDocs = tmpCardData.id_displayable_data.map((id) => {
+              return this.courseDB!.getCourseDoc<DisplayableData>(id, {
+                attachments: false,
+                binary: true,
+              });
+            });
+
+            const allDocs = await Promise.all(tmpDataDocs);
+            await Promise.all(
+              allDocs.map((doc) => {
+                const tmpData = [];
+                tmpData.unshift(displayableDataToViewData(doc));
+
+                // [ ] remove/replace this after the vue 3 migration is complete
+                // see PR #510
+                if (isConstructor(tmpView)) {
+                  const view = new tmpView();
+                  view.data = tmpData;
+
+                  this.cardPreview[c.id] = view.toString();
+                } else {
+                  this.cardPreview[c.id] = tmpView.name ? tmpView.name : 'Unknown';
+                }
+              })
+            );
+          })
+        );
+      } catch (error) {
+        console.error('Error populating table data:', error);
+      } finally {
+        this.updatePending = false;
+        this.$forceUpdate();
+      }
+    },
+  },
+});
+</script>
+
+<style scoped>
+.component-fade-enter-active,
+.component-fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+.component-fade-enter, .component-fade-leave-to
+/* .component-fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+
+.component-scale-enter-active,
+.component-scale-leave-active {
+  max-height: auto;
+  transform: scale(1, 1);
+  transform-origin: top;
+  transition:
+    transform 0.3s ease,
+    max-height 0.3s ease;
+}
+.component-scale-enter,
+.component-fade-leave-to {
+  max-height: 0px;
+  transform: scale(1, 0);
+  overflow: hidden;
+}
+</style>

package/src/components/CourseInformation.vue

@@ -0,0 +1,194 @@
+<template>
+  <div v-if="!updatePending">
+    <slot name="header" :course-config="courseConfig" :course-id="courseId">
+      <h1 class="text-h4 mb-2">{{ courseConfig.name }}</h1>
+    </slot>
+
+    <p class="text-body-2">
+      {{ courseConfig.description }}
+    </p>
+
+    <slot
+      name="actions"
+      :user-is-registered="userIsRegistered"
+      :course-id="courseId"
+      :edit-mode="editMode"
+      :register="register"
+      :drop="drop"
+    >
+      <!-- Default fallback content if no actions slot provided -->
+      <transition name="component-fade" mode="out-in">
+        <div v-if="userIsRegistered">
+          <v-btn color="success" class="me-2">Start a study session</v-btn>
+          <v-btn v-if="editMode === 'full'" data-cy="add-content-btn" color="indigo-lighten-1" class="me-2">
+            <v-icon start>mdi-plus</v-icon>
+            Add content
+          </v-btn>
+          <v-btn
+            v-if="editMode === 'full'"
+            color="green-darken-2"
+            title="Rank course content for difficulty"
+            class="me-2"
+          >
+            <v-icon start>mdi-format-list-numbered</v-icon>
+            Arrange
+          </v-btn>
+          <v-btn v-if="editMode === 'full'" color="error" size="small" variant="outlined" @click="drop">
+            Drop this course
+          </v-btn>
+        </div>
+        <div v-else>
+          <v-btn data-cy="register-btn" color="primary" class="me-2" @click="register">Register</v-btn>
+          <v-btn variant="outlined" color="primary" class="me-2">Start a trial study session</v-btn>
+        </div>
+      </transition>
+    </slot>
+
+    <slot name="additional-content"></slot>
+
+    <v-card class="my-2">
+      <v-toolbar density="compact">
+        <v-toolbar-title>Tags</v-toolbar-title>
+        <v-toolbar-items>
+          <v-btn variant="text">({{ tags.length }})</v-btn>
+        </v-toolbar-items>
+      </v-toolbar>
+      <v-card-text>
+        <span v-for="(tag, i) in tags" :key="i">
+          <slot name="tag-link" :tag="tag" :course-id="courseId">
+            <v-chip variant="tonal" class="me-2 mb-2">
+              {{ tag.name }}
+            </v-chip>
+          </slot>
+        </span>
+      </v-card-text>
+    </v-card>
+
+    <course-card-browser
+      class="my-3"
+      :course-id="courseId"
+      :view-lookup-function="viewLookupFunction"
+      :edit-mode="editMode"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+// import { MidiConfig } from '@vue-skuilder/courses'; // Removed to break circular dependency
+import CourseCardBrowser from './CourseCardBrowser.vue';
+import { log } from '@vue-skuilder/common';
+import { CourseDBInterface, Tag, UserDBInterface, getDataLayer } from '@vue-skuilder/db';
+import { CourseConfig } from '@vue-skuilder/common';
+import { getCurrentUser } from '../stores/useAuthStore';
+
+export default defineComponent({
+  name: 'CourseInformation',
+
+  components: {
+    // MidiConfig, // Removed to break circular dependency
+    CourseCardBrowser,
+  },
+
+  props: {
+    courseId: {
+      type: String as PropType<string>,
+      required: true,
+    },
+    viewLookupFunction: {
+      type: Function,
+      required: false,
+      default: (x: unknown) => {
+        console.warn('No viewLookupFunction provided to CourseInformation');
+        return null;
+      },
+    },
+    editMode: {
+      type: String as PropType<'none' | 'readonly' | 'full'>,
+      required: false,
+      default: 'full',
+    },
+  },
+
+  data() {
+    return {
+      courseDB: null as CourseDBInterface | null,
+      nameRules: [
+        (value: string): string | boolean => {
+          const max = 30;
+          return value.length > max ? `Course name must be ${max} characters or less` : true;
+        },
+      ],
+      updatePending: true,
+      courseConfig: {} as CourseConfig,
+      userIsRegistered: false,
+      tags: [] as Tag[],
+      user: null as UserDBInterface | null,
+    };
+  },
+
+  computed: {
+    // isPianoCourse removed - piano-specific logic should be in wrapper component
+  },
+
+  async created() {
+    this.courseDB = getDataLayer().getCourseDB(this.courseId);
+    this.user = await getCurrentUser();
+
+    const userCourses = await this.user.getCourseRegistrationsDoc();
+    this.userIsRegistered =
+      userCourses.courses.filter((c) => {
+        return c.courseID === this.courseId && (c.status === 'active' || c.status === undefined);
+      }).length === 1;
+
+    this.courseConfig = (await this.courseDB!.getCourseConfig())!;
+    this.tags = (await this.courseDB!.getCourseTagStubs()).rows.map((r) => r.doc!);
+    this.updatePending = false;
+  },
+
+  methods: {
+    async register() {
+      log(`Registering for ${this.courseId}`);
+      const res = await this.user!.registerForCourse(this.courseId);
+      if (res.ok) {
+        this.userIsRegistered = true;
+      }
+    },
+
+    async drop() {
+      log(`Dropping course ${this.courseId}`);
+      const res = await this.user!.dropCourse(this.courseId);
+      if (res.ok) {
+        this.userIsRegistered = false;
+      }
+    },
+  },
+});
+</script>
+
+<style scoped>
+.component-fade-enter-active,
+.component-fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+.component-fade-enter,
+.component-fade-leave-to {
+  opacity: 0;
+}
+
+.component-scale-enter-active,
+.component-scale-leave-active {
+  max-height: auto;
+  transform: scale(1, 1);
+  transform-origin: top;
+  transition:
+    transform 0.3s ease,
+    max-height 0.3s ease;
+}
+.component-scale-enter,
+.component-fade-leave-to {
+  max-height: 0px;
+  transform: scale(1, 0);
+  overflow: hidden;
+}
+</style>

package/src/components/PaginatingToolbar.vue

@@ -2,7 +2,7 @@
   <v-toolbar density="compact">
     <v-toolbar-title>
       <span>{{ title }}</span>
-      <span v-if="subtitle" class="ms-2 text-subtitle-2">{{ subtitle }}</span>
+      <span v-if="subtitle" class="ms-2 text-subtitle-2" data-cy="paginating-toolbar-subtitle">{{ subtitle }}</span>
     </v-toolbar-title>
     <v-spacer></v-spacer>
     <v-btn variant="text" icon color="secondary" :disabled="page == 1" @click="$emit('first')">

package/src/components/SnackbarService.vue

@@ -23,7 +23,7 @@ import { defineComponent } from 'vue';
 import { Status } from '@vue-skuilder/common';
 import { SnackbarOptions, setInstance } from './SnackbarService';
 
-const SnackbarService = defineComponent({
+export default defineComponent({
   name: 'SnackbarService',
 
   data() {
@@ -66,6 +66,4 @@ const SnackbarService = defineComponent({
     },
   },
 });
-
-export default SnackbarService;
 </script>