@vue-skuilder/platform-ui 0.1.1

package/src/components/Courses/CourseCardBrowser.vue

@@ -0,0 +1,365 @@
+<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-model="c.isOpen"
+                location="left center"
+                transition="slide-x-transition"
+                style="display: flex; flex-direction: row-reverse"
+              >
+                <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="editMode !== 'tags' ? 'outlined' : 'elevated'"
+                  :color="editMode === 'tags' ? 'teal' : 'teal-darken-3'"
+                  @click.stop="editMode = 'tags'"
+                >
+                  <v-icon>mdi-bookmark</v-icon>
+                </v-btn>
+
+                <v-btn
+                  key="flag"
+                  icon
+                  size="small"
+                  :variant="editMode !== 'flag' ? 'outlined' : 'elevated'"
+                  :color="editMode === 'flag' ? 'error' : 'error-darken-3'"
+                  @click.stop="editMode = '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="editMode === 'tags'"
+              :course-i-d="courseId"
+              :card-i-d="c.id.split('-')[1]"
+              class="mt-4"
+            />
+
+            <div v-show="editMode === '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 { displayableDataToViewData } from '@vue-skuilder/common';
+import TagsInput from '@/components/Edit/TagsInput.vue';
+import { PaginatingToolbar, ViewComponent, CardLoader, alertUser } from '@vue-skuilder/common-ui';
+import { allCourses } from '@vue-skuilder/courses';
+import { getDataLayer, CourseDBInterface, CardData, DisplayableData, Tag } from '@vue-skuilder/db';
+import { defineComponent } from 'vue';
+import { Status } from '@vue-skuilder/common';
+
+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: '',
+    },
+  },
+
+  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 },
+      editMode: 'none' as 'tags' | 'flag' | 'none',
+      delBtn: false,
+      updatePending: true,
+      userIsRegistered: false,
+      questionCount: 0,
+      tags: [] as Tag[],
+      viewLookup: (x: unknown) => allCourses.getView(x),
+    };
+  },
+
+  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.editMode = '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 = allCourses.getView(
+              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/Courses/CourseEditor.vue

@@ -0,0 +1,164 @@
+<template>
+  <v-card>
+    <v-toolbar flat color="primary" dark>
+      <v-card-title class="text-h6 font-weight-regular"> Start a New Quilt </v-card-title>
+      <v-spacer></v-spacer>
+      <v-btn icon @click="clearFormAndDismiss">
+        <v-icon icon="mdi-close"></v-icon>
+      </v-btn>
+    </v-toolbar>
+    <v-form>
+      <v-container>
+        <v-row class="cols sm md">
+          <v-text-field
+            v-model="courseName"
+            counter="30"
+            :rules="nameRules"
+            label="Quilt Name"
+            required
+            hint="Short and descriptive"
+            data-cy="course-name-input"
+          ></v-text-field>
+        </v-row>
+        <v-row class="cols sm md">
+          <v-textarea
+            v-model="description"
+            variant="outlined"
+            counter="300"
+            auto-grow
+            label="Quilt Description"
+            hint="Describe the course. What subject is covered? Who might be interested?"
+            data-cy="course-description-input"
+          >
+          </v-textarea>
+        </v-row>
+        <v-row class="cols sm md">
+          <label>Public or private quilt?</label>
+          <v-radio-group
+            v-model="publicCourse"
+            required
+            hint="Private quilts can be shared and collaborated on with other individual users, but will not be accessable without an invitation. A private quilt can be made public later."
+            persistent-hint
+            inline
+            data-cy="course-visibility-radio"
+          >
+            <v-radio label="Public" :value="true" data-cy="public-radio"></v-radio>
+            <v-radio label="Private" :value="false" data-cy="private-radio"></v-radio>
+          </v-radio-group>
+        </v-row>
+        <v-row class="cols sm md">
+          <v-btn :loading="updatePending" color="primary" data-cy="save-course-button" @click="submit">
+            Save Course Changes
+          </v-btn>
+        </v-row>
+      </v-container>
+    </v-form>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import Mousetrap from 'mousetrap';
+import serverRequest from '../../server';
+import { CourseConfig, CreateCourse, DataShape55, QuestionType55, ServerRequestType } from '@vue-skuilder/common';
+import { alertUser, getCurrentUser } from '@vue-skuilder/common-ui';
+
+export default defineComponent({
+  name: 'CourseEditor',
+
+  props: {
+    name: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+
+  emits: ['CourseEditingComplete'],
+
+  data() {
+    return {
+      mousetrap: new Mousetrap(this.$el),
+      id: '',
+      courseName: '',
+      description: '',
+      publicCourse: false,
+      deleted: false,
+      admins: [] as string[],
+      moderators: [] as string[],
+      dataShapes: [] as DataShape55[],
+      questionTypes: [] as QuestionType55[],
+      banner: undefined as Blob | undefined,
+      thumb: undefined as Blob | undefined,
+      updatePending: false,
+      nameRules: [
+        (value: string): string | boolean => {
+          const max = 30;
+          if (value.length > max) {
+            return `Course name must be ${max} characters or less`;
+          } else {
+            return true;
+          }
+        },
+      ],
+    };
+  },
+
+  created() {
+    this.mousetrap.bind('esc', this.clearFormAndDismiss);
+  },
+
+  methods: {
+    async submit() {
+      this.updatePending = true;
+
+      const u = await getCurrentUser();
+
+      const config: CourseConfig = {
+        name: this.courseName,
+        description: this.description,
+        public: this.publicCourse,
+        deleted: this.deleted,
+        creator: u.getUsername(),
+        admins: this.admins,
+        moderators: this.moderators,
+        dataShapes: this.dataShapes,
+        questionTypes: this.questionTypes,
+      };
+
+      const result = await serverRequest<CreateCourse>({
+        data: config,
+        type: ServerRequestType.CREATE_COURSE,
+        response: null,
+        user: u.getUsername(),
+      });
+
+      if (result.response && result.response.ok) {
+        alertUser({
+          text: `Course ${this.courseName} created.`,
+          status: result.response!.status,
+        });
+        this.clearFormAndDismiss();
+      } else {
+        alertUser({
+          text: `Failed to create course ${this.courseName}.`,
+          status: result.response!.status,
+        });
+        console.warn(`Resp: ${JSON.stringify(result.response)}`);
+      }
+
+      this.updatePending = false;
+    },
+
+    clearFormAndDismiss() {
+      this.description = '';
+      this.publicCourse = false;
+      this.deleted = false;
+      this.admins = [];
+      this.moderators = [];
+
+      this.$emit('CourseEditingComplete');
+    },
+  },
+});
+</script>

package/src/components/Courses/CourseInformation.vue

@@ -0,0 +1,164 @@
+<template>
+  <div v-if="!updatePending">
+    <h1 class="text-h4 mb-2"><router-link to="/q">Quilts</router-link> / {{ courseConfig.name }}</h1>
+
+    <p class="text-body-2">
+      {{ courseConfig.description }}
+    </p>
+
+    <transition name="component-fade" mode="out-in">
+      <div v-if="userIsRegistered">
+        <router-link :to="`/study/${courseId}`" class="me-2">
+          <v-btn color="success">Start a study session</v-btn>
+        </router-link>
+        <router-link :to="`/edit/${courseId}`" class="me-2">
+          <v-btn data-cy="add-content-btn" color="indigo-lighten-1">
+            <v-icon start>mdi-plus</v-icon>
+            Add content
+          </v-btn>
+        </router-link>
+        <router-link :to="`/courses/${courseId}/elo`" class="me-2">
+          <v-btn color="green-darken-2" title="Rank course content for difficulty">
+            <v-icon start>mdi-format-list-numbered</v-icon>
+            Arrange
+          </v-btn>
+        </router-link>
+        <v-btn 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>
+        <router-link :to="`/q/${courseId}/preview`">
+          <v-btn variant="outlined" color="primary" class="me-2">Start a trial study session</v-btn>
+        </router-link>
+      </div>
+    </transition>
+    <midi-config v-if="isPianoCourse" :_id="courseId" :user="user" class="my-3" />
+
+    <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">
+          <router-link :to="`/q/${courseId}/tags/${tag.name}`">
+            <v-chip variant="tonal" class="me-2 mb-2">
+              {{ tag.name }}
+            </v-chip>
+          </router-link>
+        </span>
+      </v-card-text>
+    </v-card>
+
+    <course-card-browser class="my-3" :course-id="courseId" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { MidiConfig } from '@vue-skuilder/courses';
+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 '@vue-skuilder/common-ui';
+
+export default defineComponent({
+  name: 'CourseInformation',
+
+  components: {
+    MidiConfig,
+    CourseCardBrowser,
+  },
+
+  props: {
+    courseId: {
+      type: String as PropType<string>,
+      required: true,
+    },
+  },
+
+  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(): boolean {
+      return this.courseConfig.name.toLowerCase().includes('piano');
+    },
+  },
+
+  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>