@vue-skuilder/platform-ui 0.1.1

package/src/components/Courses/CourseRouter.vue

@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <div v-if="initComplete">
+      <course-information v-if="courseId !== undefined && courseId !== ''" :course-id="courseId" />
+      <v-container v-else-if="candidates.length === 0">
+        <v-row class="text-h4">
+          {{ query }}
+        </v-row>
+        <v-divider></v-divider>
+        <v-row class="ma-3 text-h5">Nothing here!</v-row>
+
+        <v-row class="ma-3">
+          <v-dialog v-model="newCourseDialog" fullscreen transition="dialog-bottom-transition" :overlay="false">
+            <template #activator="{ props }">
+              <v-btn color="primary" v-bind="props">Start a new Quilt</v-btn>
+            </template>
+            <course-editor :name="query" @course-editing-complete="newCourseDialog = false" />
+          </v-dialog>
+        </v-row>
+      </v-container>
+      <v-container v-else>
+        <div>
+          <span class="text-h3">{{ query }} </span> <span class="text-h5">could refer to:</span>
+          <v-divider></v-divider>
+
+          <div v-for="(c, i) in candidates" :key="i" class="ma-5">
+            <v-row class="text-h5">
+              <a @click="loadQuery(c.courseID)">{{ c.name }} </a>
+              -
+              <v-text-field
+                :id="`${i}-disambiguator`"
+                v-model="c.disambiguator"
+                label="Disambiguator"
+                @change="update(c)"
+              ></v-text-field>
+              {{ c.description }}
+            </v-row>
+          </div>
+        </div>
+      </v-container>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { getDataLayer } from '@vue-skuilder/db';
+import { CourseConfig } from '@vue-skuilder/common';
+import CourseEditor from './CourseEditor.vue';
+import CourseInformation from './CourseInformation.vue';
+
+export default defineComponent({
+  name: 'CourseRouter',
+
+  components: {
+    CourseInformation,
+    CourseEditor,
+  },
+
+  props: {
+    query: {
+      type: String,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      courseList: [] as CourseConfig[],
+      courseId: undefined as string | undefined,
+      candidates: [] as CourseConfig[],
+      newCourseDialog: false,
+      initComplete: false,
+    };
+  },
+
+  async created() {
+    this.courseList = await getDataLayer().getCoursesDB().getCourseList();
+    this.loadQuery();
+  },
+
+  methods: {
+    update(c: CourseConfig) {
+      if (c.courseID && c.disambiguator) {
+        getDataLayer().getCoursesDB().disambiguateCourse(c.courseID, c.disambiguator);
+      } else {
+        // todo: indicate error on input box
+      }
+    },
+
+    loadQuery(q?: string) {
+      let query: string;
+      if (q) {
+        query = q.toLowerCase();
+      } else {
+        query = this.query.toLowerCase();
+      }
+
+      this.candidates = this.courseList.filter((c) => {
+        const snakedName = c.name.replaceAll(' ', '_').toLowerCase();
+        return query === snakedName || query === c.courseID || query === `${snakedName}_(${c.disambiguator})`;
+      });
+
+      if (this.candidates.length === 1) {
+        this.courseId = this.candidates[0].courseID!;
+      } else if (this.candidates.length === 0) {
+        this.courseId = '';
+      }
+
+      this.initComplete = true;
+    },
+  },
+});
+</script>
+
+<style></style>

package/src/components/Courses/CourseStubCard.vue

@@ -0,0 +1,76 @@
+<template>
+  <v-card v-if="!updatePending && courseConfig" data-cy="available-course-card">
+    <v-card-item>
+      <v-card-title data-cy="course-title">
+        {{ courseConfig.name }}
+        <v-icon v-if="isPrivate" icon="mdi-eye-off" class="ml-2"></v-icon>
+      </v-card-title>
+    </v-card-item>
+
+    <v-card-text>
+      Questions: {{ questionCount }}
+      <p>{{ courseConfig.description }}</p>
+    </v-card-text>
+
+    <v-card-actions>
+      <v-btn color="primary" @click="navigateToInfo">More Info</v-btn>
+      <v-btn data-cy="register-course-button" :loading="addingCourse" color="primary" @click="registerForCourse">
+        Register
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { getCurrentUser } from '@vue-skuilder/common-ui';
+import { CourseConfig, log } from '@vue-skuilder/common';
+import { getDataLayer } from '@vue-skuilder/db';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'CourseStubCard',
+
+  props: {
+    courseId: {
+      type: String,
+      required: true,
+    },
+  },
+  emits: ['refresh'],
+
+  data() {
+    return {
+      courseConfig: null as CourseConfig | null,
+      questionCount: 0,
+      isPrivate: false,
+      updatePending: true,
+      addingCourse: false,
+    };
+  },
+
+  async created() {
+    try {
+      const db = getDataLayer().getCourseDB(this.courseId);
+      this.courseConfig = (await db.getCourseConfig())!;
+      this.isPrivate = !this.courseConfig.public;
+      this.questionCount = (await db.getCourseInfo()).cardCount;
+      this.updatePending = false;
+    } catch (e) {
+      console.error(`Error loading course ${this.courseId}: ${e}`);
+    }
+  },
+
+  methods: {
+    async registerForCourse() {
+      this.addingCourse = true;
+      log(`Attempting to register for ${this.courseId}.`);
+      await (await getCurrentUser()).registerForCourse(this.courseId);
+      this.$emit('refresh');
+    },
+    navigateToInfo() {
+      const path = `/q/${this.courseConfig?.name.replaceAll(' ', '_')}`;
+      this.$router.push(path);
+    },
+  },
+});
+</script>

package/src/components/Courses/EloModeration.vue

@@ -0,0 +1,122 @@
+<template>
+  <v-container v-if="!updatePending">
+    <v-row>
+      <v-col cols="12">
+        <h1>Which seems <em>harder</em>?</h1>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <v-btn color="success" class="ma-5" @click="vote('a')">
+          <v-icon>mdi-check</v-icon>
+        </v-btn>
+        <card-loader class="ma-2" :qualified_id="id1" :view-lookup="viewLookup" />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <v-btn color="success" class="ma-5" @click="vote('b')">
+          <v-icon>mdi-check</v-icon>
+        </v-btn>
+        <card-loader class="ma-2" :qualified_id="id2" :view-lookup="viewLookup" />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { CardLoader } from '@vue-skuilder/common-ui';
+import { allCourses } from '@vue-skuilder/courses';
+import { CourseElo, adjustCourseScores, CourseConfig } from '@vue-skuilder/common';
+import { CourseDBInterface, getDataLayer } from '@vue-skuilder/db';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'ELOModerator',
+
+  components: {
+    CardLoader,
+  },
+
+  props: {
+    courseId: {
+      type: String,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      courseDB: null as CourseDBInterface | null,
+      updatePending: true,
+      courseConfig: null as CourseConfig | null,
+      cards: [] as {
+        courseId: string;
+        cardId: string;
+        elo: CourseElo;
+        count: number;
+      }[],
+      id1: '',
+      id2: '',
+      elo1: null as CourseElo | null,
+      elo2: null as CourseElo | null,
+      viewLookup: allCourses.getView,
+    };
+  },
+
+  async created() {
+    this.courseDB = getDataLayer().getCourseDB(this.courseId);
+
+    this.courseConfig = (await this.courseDB!.getCourseConfig())!;
+    await this.getNewCards();
+  },
+
+  methods: {
+    vote(x: 'a' | 'b') {
+      if (!this.elo1 || !this.elo2) return;
+
+      const scores = adjustCourseScores(this.elo1, this.elo2, x === 'a' ? 1 : 0, {
+        globalOnly: true,
+      });
+
+      this.courseDB!.updateCardElo(this.cards[0].cardId, scores.userElo);
+      this.courseDB!.updateCardElo(this.cards[1].cardId, scores.cardElo);
+
+      this.getNewCards();
+    },
+
+    async getNewCards() {
+      if (!this.courseDB) return;
+
+      this.updatePending = true;
+      this.cards = await this.courseDB!.getInexperiencedCards();
+
+      // console.log('Comparing:\n\t' + JSON.stringify(this.cards));
+
+      this.id1 = '';
+      this.id2 = '';
+
+      this.id1 = `${this.courseId}-${this.cards[0].cardId}`;
+      this.id2 = `${this.courseId}-${this.cards[1].cardId}`;
+
+      this.elo1 = this.cards[0].elo;
+      this.elo2 = this.cards[1].elo;
+
+      this.updatePending = false;
+    },
+  },
+});
+</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;
+}
+</style>

package/src/components/Courses/TagInformation.vue

@@ -0,0 +1,209 @@
+<template>
+  <div>
+    <!-- todo: -->
+    <h1>
+      <router-link :to="`/q/${course.name}`">{{ course.name }}</router-link> > Tag: {{ tag.name }}
+    </h1>
+    <br />
+    <p>{{ tag.taggedCards.length }} card{{ tag.taggedCards.length === 1 ? '' : 's' }}</p>
+
+    <v-text-field
+      ref="snippetEditor"
+      v-model="snippetModel"
+      variant="outlined"
+      :readonly="!editingSnippet"
+      :counter="editingSnippet"
+      label="Brief tag description:"
+      placeholder="No snippet yet - add one!"
+      type="text"
+    >
+      <template #prepend>
+        <span v-if="editingSnippet">
+          <v-icon color="primary" @click="saveSnippet">mdi-content-save</v-icon>
+        </span>
+        <v-icon v-else color="primary" @click="editSnippet">mdi-pencil</v-icon>
+      </template>
+      <template #append>
+        <v-icon v-if="editingSnippet" @click="cancelEditSnippet">mdi-cancel</v-icon>
+        <v-fade-transition leave-absolute>
+          <!-- spinner while awaiting async write of edits -->
+          <v-progress-circular v-if="snippetSaving" size="20" color="info" indeterminate></v-progress-circular>
+        </v-fade-transition>
+      </template>
+    </v-text-field>
+
+    <v-text-field
+      ref="wikiEditor"
+      v-model="wikiModel"
+      variant="outlined"
+      :readonly="!editingWiki"
+      :counter="editingWiki"
+      label="Extended tag description:"
+      placeholder="No wiki yet - consider adding one!"
+      textarea
+    >
+      <template #prepend>
+        <span v-if="editingWiki">
+          <v-icon color="primary" @click="saveWiki">mdi-content-save</v-icon>
+        </span>
+        <v-icon v-else color="primary" @click="editWiki">mdi-pencil</v-icon>
+      </template>
+      <template #append>
+        <v-icon v-if="editingWiki" @click="cancelEditWiki">mdi-cancel</v-icon>
+        <v-fade-transition leave-absolute>
+          <!-- spinner while awaiting async write of edits -->
+          <v-progress-circular v-if="wikiSaving" size="20" color="info" indeterminate></v-progress-circular>
+        </v-fade-transition>
+      </template>
+    </v-text-field>
+
+    <course-card-browser :course-id="courseId" :tag-id="tagId" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { DocType, Tag, getDataLayer, CourseDBInterface } from '@vue-skuilder/db';
+import { Status, CourseConfig } from '@vue-skuilder/common';
+import CourseCardBrowser from './CourseCardBrowser.vue';
+import { alertUser } from '@vue-skuilder/common-ui';
+
+export default defineComponent({
+  name: 'TagInformation',
+
+  components: {
+    CourseCardBrowser,
+  },
+
+  props: {
+    tagId: {
+      type: String,
+      required: true,
+    },
+    courseId: {
+      type: String,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      snippetModel: '',
+      editingSnippet: false,
+      snippetSaving: false,
+
+      wikiModel: '',
+      editingWiki: false,
+      wikiSaving: false,
+
+      courseDB: null as CourseDBInterface | null,
+
+      tag: {
+        course: this.courseId,
+        name: this.tagId,
+        snippet: '',
+        wiki: '',
+        taggedCards: [],
+        docType: DocType.TAG,
+      } as Tag,
+
+      course: {
+        courseID: this.courseId,
+        name: '',
+        description: '',
+        public: false,
+        deleted: false,
+        dataShapes: [],
+        questionTypes: [],
+        creator: '',
+        admins: [],
+        moderators: [],
+      } as CourseConfig,
+    };
+  },
+
+  async created() {
+    this.courseDB = getDataLayer().getCourseDB(this.courseId);
+    this.tag = await this.courseDB.getTag(this.tagId);
+    this.snippetModel = this.tag.snippet;
+    this.wikiModel = this.tag.wiki;
+    this.course = await this.courseDB.getCourseConfig();
+  },
+
+  methods: {
+    editSnippet() {
+      console.log('[TagInformation] EditSnip');
+      this.editingSnippet = true;
+      (this.$refs.snippetEditor as HTMLInputElement).focus();
+    },
+
+    editWiki() {
+      console.log('[TagInformation] EditWiki');
+      this.editingWiki = true;
+      (this.$refs.wikiEditor as HTMLInputElement).focus();
+    },
+
+    async saveSnippet() {
+      this.snippetSaving = true;
+
+      const update = await this.courseDB!.updateTag({
+        ...this.tag,
+        snippet: this.snippetModel,
+      });
+
+      if (update.ok) {
+        console.log('[TagInformation] OK');
+        this.tag.snippet = this.snippetModel;
+        alertUser({
+          text: `Updated applied - thanks!`,
+          status: Status.ok,
+        });
+      } else {
+        alertUser({
+          text: `error in applying update!`,
+          status: Status.error,
+        });
+      }
+
+      this.editingSnippet = false;
+      this.snippetSaving = false;
+    },
+
+    async saveWiki() {
+      this.wikiSaving = true;
+
+      const update = await this.courseDB!.updateTag({
+        ...this.tag,
+        wiki: this.wikiModel,
+      });
+
+      if (update.ok) {
+        this.tag.wiki = this.wikiModel;
+        alertUser({
+          text: `Updated applied - thanks!`,
+          status: Status.ok,
+        });
+      } else {
+        alertUser({
+          text: `error in applying update!`,
+          status: Status.error,
+        });
+      }
+
+      this.editingWiki = false;
+      this.wikiSaving = false;
+    },
+
+    cancelEditSnippet() {
+      console.log('[TagInformation] Cancelling EditSnip');
+      this.editingSnippet = false;
+      this.snippetModel = this.tag.snippet;
+    },
+
+    cancelEditWiki() {
+      this.editingWiki = false;
+      this.wikiModel = this.tag.wiki;
+    },
+  },
+});
+</script>