@vue-skuilder/platform-ui 0.1.1

package/src/components/Study/SessionConfiguration.vue

@@ -0,0 +1,371 @@
+<template>
+  <div v-if="hasRegistrations">
+    <div data-cy="select-quilts-header" class="text-h4 mb-4">Study Session Setup</div>
+
+    <div class="session-layout">
+      <!-- Left Column: Course Selection -->
+      <div class="course-selection-container">
+        <div class="text-h6 mb-3">Select Quilts to Study</div>
+        <table width="100%">
+          <thead>
+            <tr>
+              <th>
+                <v-checkbox
+                  id="SelectAll"
+                  ref="selectAll"
+                  v-model="allSelected"
+                  autofocus
+                  label="Select All"
+                  @update:model-value="toggleAll"
+                ></v-checkbox>
+              </th>
+
+              <th>
+                Reviews
+                <!-- <v-icon>info</v-icon> -->
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="classroom in activeClasses" :key="classroom.classID">
+              <td>
+                <v-checkbox v-model="classroom.selected" :label="`Class: ${classroom.name}`" @click.capture="update" />
+              </td>
+              <td>-</td>
+            </tr>
+            <tr v-for="course in activeCourses" :key="course.courseID">
+              <td>
+                <v-checkbox
+                  v-model="course.selected"
+                  data-cy="course-checkbox"
+                  :label="`q/${course.name}`"
+                  @click.capture="update"
+                />
+              </td>
+              <td>{{ course.reviews }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Right Column: Time Configuration and Start Button -->
+      <div class="fixed-controls-container">
+        <div class="fixed-controls">
+          <div class="text-h6 mb-3">Session Settings</div>
+
+          <div class="mb-5">
+            <v-text-field
+              ref="numberField"
+              v-model="timeLimit"
+              class="time-limit-field"
+              variant="outlined"
+              label="Study Session Timelimit"
+              prepend-inner-icon="mdi-clock-outline"
+              prepend-icon="mdi-minus"
+              append-icon="mdi-plus"
+              :suffix="timeLimit > 1 ? 'minutes' : 'minute'"
+              mask="##"
+              type="number"
+              @click:prepend="dec"
+              @click:append="inc"
+            />
+          </div>
+
+          <SkMouseTrapToolTip
+            hotkey="enter"
+            command="Start Session"
+            :disabled="!activeCourses.length && !activeClasses.length"
+            highlight-effect="scale"
+          >
+            <v-btn
+              data-cy="start-studying-button"
+              color="success"
+              size="large"
+              block
+              class="start-btn"
+              @click="startSession"
+            >
+              <v-icon start>mdi-play</v-icon>
+              Start!
+            </v-btn>
+          </SkMouseTrapToolTip>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div v-else class="text-h4">
+    <p>You don't have anything to study!</p>
+    <p>Head over to the <router-link to="/quilts">Quilts</router-link> page to find something for you.</p>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { SkldrMouseTrap, getCurrentUser, SkMouseTrapToolTip } from '@vue-skuilder/common-ui';
+import { CourseRegistration, UserDBInterface, getDataLayer, ContentSourceID } from '@vue-skuilder/db';
+
+export interface SessionConfigMetaData {
+  selected: boolean;
+  name: string;
+  reviews: number;
+}
+
+export default defineComponent({
+  name: 'SessionConfiguration',
+
+  components: {
+    SkMouseTrapToolTip,
+  },
+
+  props: {
+    initialTimeLimit: {
+      type: Number,
+      required: true,
+      default: 5,
+    },
+  },
+
+  emits: ['initStudySession'],
+
+  data() {
+    return {
+      registeredHotkeys: [] as (string | string[])[],
+      allSelected: true,
+      activeCourses: [] as (CourseRegistration & SessionConfigMetaData)[],
+      activeClasses: [] as ({ classID: string } & SessionConfigMetaData)[],
+      hasRegistrations: true,
+      user: null as UserDBInterface | null,
+      timeLimit: this.initialTimeLimit,
+    };
+  },
+
+  watch: {
+    timeLimit: {
+      handler() {
+        if (this.timeLimit <= 0) {
+          this.timeLimit = 1;
+        }
+      },
+    },
+  },
+
+  beforeUnmount() {
+    // Clean up registered hotkeys when component unmounts
+    if (this.registeredHotkeys) {
+      this.registeredHotkeys.forEach(key => {
+        SkldrMouseTrap.removeBinding(key);
+      });
+    }
+  },
+
+  async created() {
+    this.user = await getCurrentUser();
+    this.timeLimit = this.initialTimeLimit;
+
+    this.setHotkeys();
+    await Promise.all([this.getActiveCourses(), this.getActiveClassrooms()]);
+
+    if (this.activeCourses.length === 0 && this.activeClasses.length === 0) {
+      this.hasRegistrations = false;
+    }
+  },
+
+  mounted() {
+    document.getElementById('SelectAll')!.focus();
+  },
+
+  unmounted() {
+    // Clean up registered hotkeys when component unmounts
+    if (this.registeredHotkeys) {
+      this.registeredHotkeys.forEach(key => {
+        SkldrMouseTrap.removeBinding(key);
+      });
+    }
+  },
+
+  methods: {
+    inc() {
+      this.timeLimit = this.timeLimit + 1;
+      console.log(`inc to ${this.timeLimit}`);
+    },
+
+    dec() {
+      this.timeLimit--;
+      console.log(`dec to ${this.timeLimit}`);
+    },
+
+    update() {
+      console.log(JSON.stringify(this.activeCourses));
+      console.log(JSON.stringify(this.activeClasses));
+    },
+
+    toggleAll(): void {
+      console.log(`Toggling all courses`);
+      this.activeCourses.forEach((crs) => {
+        crs.selected = this.allSelected;
+      });
+      this.activeClasses.forEach((cl) => {
+        cl.selected = this.allSelected;
+      });
+      console.log(JSON.stringify(this.activeCourses));
+    },
+
+    startSession() {
+      // Clean up any registered hotkeys before starting session
+      if (this.registeredHotkeys) {
+        this.registeredHotkeys.forEach(key => {
+          SkldrMouseTrap.removeBinding(key);
+        });
+      }
+      const selectedCourses: ContentSourceID[] = this.activeCourses
+        .filter((c) => c.selected)
+        .map((c) => ({
+          type: 'course',
+          id: c.courseID,
+        }));
+      const selectedClassrooms: ContentSourceID[] = this.activeClasses
+        .filter((cl) => cl.selected)
+        .map((cl) => ({
+          type: 'classroom',
+          id: cl.classID,
+        }));
+      const allSelectedSources = [...selectedCourses, ...selectedClassrooms];
+      this.$emit('initStudySession', allSelectedSources, this.timeLimit);
+    },
+
+    async getActiveClassrooms() {
+      const classes = await (await getCurrentUser()).getActiveClasses();
+      const activeClasses: ({ classID: string } & SessionConfigMetaData)[] = [];
+
+      console.log(`Active classes: ${JSON.stringify(classes)}`);
+
+      await Promise.all(
+        classes.map((c) =>
+          (async (classID: string) => {
+            const classDb = await getDataLayer().getClassroomDB(classID, `student`);
+            activeClasses.push({
+              classID,
+              name: classDb.getConfig().name,
+              selected: true,
+              reviews: 0,
+            });
+          })(c)
+        )
+      );
+      this.activeClasses = activeClasses;
+    },
+
+    async getActiveCourses() {
+      this.activeCourses = (await this.user!.getActiveCourses()).map((c) => ({
+        ...c,
+        selected: true,
+        name: '',
+        reviews: 0,
+      }));
+
+      Promise.all(
+        this.activeCourses.map(async (c, i) => {
+          const cfg = await getDataLayer().getCoursesDB().getCourseConfig(c.courseID);
+          const crsInterface = await this.user?.getCourseInterface(c.courseID);
+          return (async () => {
+            return Promise.all([
+              (this.activeCourses[i].name = cfg.name),
+              (this.activeCourses[i].reviews = await crsInterface!.getScheduledReviewCount()),
+            ]);
+          })();
+        })
+      );
+    },
+
+    setHotkeys() {
+      const hotkeys = [
+        {
+          hotkey: 'right',
+          callback: () => {
+            this.timeLimit++;
+          },
+          command: 'Increase time limit',
+        },
+        {
+          hotkey: 'left',
+          callback: () => {
+            this.timeLimit--;
+          },
+          command: 'Decrease time limit',
+        },
+      ];
+      SkldrMouseTrap.addBinding(hotkeys);
+      this.registeredHotkeys = hotkeys.map(k => k.hotkey);
+    },
+  },
+});
+</script>
+
+<style scoped>
+td {
+  text-align: center;
+  align-content: center;
+}
+
+.cb {
+  align-content: center !important;
+  text-align: center !important;
+}
+
+/* Layout for session configuration */
+.session-layout {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Fixed controls container */
+.fixed-controls-container {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.fixed-controls {
+  display: flex;
+  flex-direction: column;
+}
+
+.time-limit-field {
+  width: 100%;
+  margin-bottom: 16px;
+}
+
+.start-btn {
+  margin-top: 8px;
+  max-height: 150px;
+}
+
+/* Course selection styles */
+.course-selection-container {
+  width: 100%;
+}
+
+/* Media queries for desktop layout */
+@media (min-width: 960px) {
+  .session-layout {
+    flex-direction: row;
+    gap: 40px;
+  }
+
+  .fixed-controls-container {
+    width: 300px;
+    flex-shrink: 0;
+  }
+
+  .fixed-controls {
+    position: sticky;
+    top: 20px;
+    padding-left: 20px;
+  }
+
+  .course-selection-container {
+    flex-grow: 1;
+    border-right: 1px solid rgba(0, 0, 0, 0.12);
+    padding-right: 20px;
+  }
+}
+</style>

package/src/components/TextSwap.vue

@@ -0,0 +1,65 @@
+<template>
+  <transition appear name="fade" mode="out-in">
+    <a :key="index" @click="next()">{{ text[index] }}</a>
+  </transition>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export interface ITextSwap {
+  next: () => void;
+  text: string[];
+  index: number;
+}
+
+export default defineComponent({
+  name: 'TextSwap',
+
+  props: {
+    text: {
+      type: Array as () => string[],
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      index: 0,
+    };
+  },
+
+  methods: {
+    next() {
+      if (this.text.length > 1) {
+        const previous = this.index;
+        // this.index = -1; // triggering animation
+        // this.index = previous;
+        while (this.index === previous) {
+          this.index = Math.floor(Math.random() * this.text.length);
+        }
+      }
+    },
+  },
+});
+</script>
+
+<style scoped>
+a {
+  color: inherit;
+  text-decoration: underline;
+  text-decoration-color: #aaa;
+  text-decoration-style: dotted;
+  text-underline-offset: 2px;
+  text-underline-position: below;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

package/src/components/User/UserStats.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <h2>Stats!</h2>
+    One day: {{ scheduledReviews[0] }}
+    <br />
+    Seven day: {{ scheduledReviews[1] }}
+    <br />
+    Thirty Day: {{ scheduledReviews[2] }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { User } from '@vue-skuilder/db';
+import { getCurrentUser } from '@vue-skuilder/common-ui';
+
+const user = ref<User | null>(null);
+const scheduledReviews = ref<number[]>([]);
+
+onMounted(async () => {
+  user.value = await getCurrentUser();
+
+  // Using Promise.all to handle all forecasts concurrently
+  const days = [1, 7, 30];
+  const forecasts = await Promise.all(days.map((d) => user.value!.getReviewsForcast(d)));
+  scheduledReviews.value = forecasts.map((f) => f.length);
+});
+</script>
+
+<style scoped></style>

package/src/dev/DataInputFormTester.vue

@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <data-input-form
+      v-if="component && dataShape"
+      :data-shape="dataShape"
+      :course-cfg="{
+        courseID: 'testCourse',
+        name: 'testCourseName',
+        description: 'All of these courses will be the same!',
+        admins: ['admin'],
+        creator: 'admin',
+        deleted: false,
+        moderators: [],
+        public: true,
+        disambiguator: 'testCourseName',
+        questionTypes: [],
+        dataShapes: [],
+      }"
+      :preview-component="component"
+    />
+    <div v-else>
+      No component loaded :/
+      <!--
+
+    todo: provide list of Question type components, with router links
+    to their DataInputFormTester loaders.
+
+    --></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import DataInputForm from '../../src/components/Edit/ViewableDataInputForm/DataInputForm.vue';
+import { DataShape } from '../../src/base-course/Interfaces/DataShape';
+import { useRoute } from 'vue-router';
+import { Question } from '@vue-skuilder/common-ui';
+
+type CourseShapes = {
+  courseID: string;
+  dataShapes: DataShape[];
+};
+
+const questionModules = import.meta.glob('../**/questions/**/index.ts', {
+  // Adding eager: false ensures lazy loading
+  eager: false,
+});
+
+type ModuleExports = {
+  [key: string]: unknown;
+};
+
+export default defineComponent({
+  name: 'DataInputFormTester',
+
+  components: {
+    DataInputForm,
+  },
+
+  setup() {
+    return {
+      route: useRoute(),
+    };
+  },
+
+  data() {
+    return {
+      dataShape: null as DataShape | null,
+      cds: null as CourseShapes[] | null,
+      component: null as typeof Question | null,
+    };
+  },
+
+  async created() {
+    try {
+      const q = this.route.params.pathMatch;
+      const modulePath = `../${q}/index.ts`;
+
+      console.log('Looking for module:', modulePath);
+      console.log('Available paths:', Object.keys(questionModules));
+
+      if (modulePath in questionModules) {
+        const module = (await questionModules[modulePath]()) as ModuleExports;
+
+        // Find the Question implementation
+        const matchingExport = Object.entries(module).find(([name, exportValue]) => {
+          const isClass = typeof exportValue === 'function';
+          const extendsQuestion = isClass && exportValue.prototype instanceof Question;
+
+          console.log(`Checking export "${name}":`, {
+            isClass,
+            extendsQuestion,
+            type: typeof exportValue,
+          });
+
+          return extendsQuestion;
+        });
+
+        if (!matchingExport) {
+          throw new Error('No export found extending Question class');
+        }
+
+        this.component = matchingExport[1] as typeof Question;
+
+        const ds = this.component?.dataShapes[0];
+        if (ds) {
+          this.dataShape = ds;
+        }
+      } else {
+        throw new Error(`No module found at path: ${modulePath}`);
+      }
+    } catch (e) {
+      console.log('[difTester] Error loading component', e);
+    }
+  },
+});
+</script>

package/src/dev/readme.md

@@ -0,0 +1,3 @@
+This folder contains components, etc, useful for dev-time only.
+
+It is not included in the final build.