Datalayer abstraction (#658)

Author: NiloCK

packages/common-ui/package.json

@@ -46,6 +46,7 @@
   },
   "devDependencies": {
     "@cypress/vite-dev-server": "^6.0.3",
+    "@types/pouchdb": "^6.4.2",
     "@typescript-eslint/eslint-plugin": "^8.25.0",
     "@typescript-eslint/parser": "^8.25.0",
     "@vitejs/plugin-vue": "^5.2.1",

packages/common-ui/src/components/StudySession.vue

@@ -19,7 +19,7 @@
         Start <a @click="$emit('session-finished')">another study session</a>, or try
         <router-link :to="`/edit/${courseID}`">adding some new content</router-link> to challenge yourself and others!
       </p>
-      <heat-map activity-records-getter="user.getActivityRecords" />
+      <heat-map :activity-records-getter="user.getActivityRecords" />
     </div>
 
     <div v-else ref="shadowWrapper">
@@ -72,34 +72,27 @@
 import { defineComponent, PropType } from 'vue';
 import { isQuestionView } from '../composables/CompositionViewable';
 import { alertUser } from './SnackbarService';
-import ViewComponent from '../composables/Displayable';
+import { ViewComponent } from '@/composables';
 import SkMouseTrap from './SkMouseTrap.vue';
 import StudySessionTimer from './StudySessionTimer.vue';
 import HeatMap from './HeatMap.vue';
 import CardViewer from './cardRendering/CardViewer.vue';
 
 import {
-  getCourseDoc,
-  removeScheduledCardReview,
-  scheduleCardReview,
   ContentSourceID,
   getStudySource,
   isReview,
   StudyContentSource,
   StudySessionItem,
-  CourseDB,
-  getCourseName,
-  updateCardElo,
   docIsDeleted,
   CardData,
   CardHistory,
   CardRecord,
   DisplayableData,
   isQuestionRecord,
   CourseRegistrationDoc,
-  updateUserElo,
-  User,
-  StudentClassroomDB,
+  DataLayerProvider,
+  UserDBInterface,
 } from '@vue-skuilder/db';
 import { SessionController, StudySessionRecord } from '@vue-skuilder/db';
 import { newInterval } from '@vue-skuilder/db';
@@ -148,7 +141,11 @@ export default defineComponent({
       required: true,
     },
     user: {
-      type: Object as PropType<User>,
+      type: Object as PropType<UserDBInterface>,
+      required: true,
+    },
+    dataLayer: {
+      type: Object as PropType<DataLayerProvider>,
       required: true,
     },
     sessionConfig: {
@@ -242,7 +239,7 @@ export default defineComponent({
     handleClassroomMessage() {
       return (v: unknown) => {
         alertUser({
-          text: this.user?.username || '[Unknown user]',
+          text: this.user?.getUsername() || '[Unknown user]',
           status: Status.ok,
         });
         console.log(`[StudySession] There was a change in the classroom DB:`);
@@ -294,11 +291,11 @@ export default defineComponent({
       const sessionClassroomDBs = await Promise.all(
         this.contentSources
           .filter((s) => s.type === 'classroom')
-          .map(async (c) => StudentClassroomDB.factory(c.id, this.user))
+          .map(async (c) => await this.dataLayer.getClassroomDB(c.id, 'student'))
       );
 
       sessionClassroomDBs.forEach((db) => {
-        db.setChangeFcn(this.handleClassroomMessage());
+        // db.setChangeFcn(this.handleClassroomMessage());
       });
 
       this.sessionController = new SessionController(this.sessionContentSources, 60 * this.sessionTimeLimit);
@@ -311,7 +308,9 @@ export default defineComponent({
 
       this.contentSources
         .filter((s) => s.type === 'course')
-        .forEach(async (c) => (this.courseNames[c.id] = await getCourseName(c.id)));
+        .forEach(
+          async (c) => (this.courseNames[c.id] = (await this.dataLayer.getCoursesDB().getCourseConfig(c.id)).name)
+        );
 
       console.log(`[StudySession] Session created:
         ${this.sessionController.toString()}
@@ -429,20 +428,17 @@ export default defineComponent({
       if (k) {
         console.warn(`k value interpretation not currently implemented`);
       }
+      const courseDB = this.dataLayer.getCourseDB(this.currentCard.card.course_id);
       const userElo = toCourseElo(this.userCourseRegDoc!.courses.find((c) => c.courseID === course_id)!.elo);
-      const cardElo = (
-        await new CourseDB(this.currentCard.card.course_id, () => Promise.resolve(this.user)).getCardEloData([
-          this.currentCard.card.card_id,
-        ])
-      )[0];
+      const cardElo = (await courseDB.getCardEloData([this.currentCard.card.card_id]))[0];
 
       if (cardElo && userElo) {
         const eloUpdate = adjustCourseScores(userElo, cardElo, userScore);
         this.userCourseRegDoc!.courses.find((c) => c.courseID === course_id)!.elo = eloUpdate.userElo;
 
         Promise.all([
-          updateUserElo(this.user!.username, course_id, eloUpdate.userElo),
-          updateCardElo(course_id, card_id, eloUpdate.cardElo),
+          this.user!.updateUserElo(course_id, eloUpdate.userElo),
+          courseDB.updateCardElo(card_id, eloUpdate.cardElo),
         ]).then((results) => {
           const user = results[0];
           const card = results[1];
@@ -482,11 +478,11 @@ export default defineComponent({
 
       if (isReview(item)) {
         console.log(`[StudySession] Removing previously scheduled review for: ${item.cardID}`);
-        removeScheduledCardReview(this.user!.username, item.reviewID);
+        this.user!.removeScheduledCardReview(this.user!.getUsername(), item.reviewID);
       }
 
-      scheduleCardReview({
-        user: this.user!.username,
+      this.user!.scheduleCardReview({
+        user: this.user!.getUsername(),
         course_id: history.courseID,
         card_id: history.cardID,
         time: nextReviewTime,
@@ -516,15 +512,15 @@ export default defineComponent({
       console.log(`[StudySession] Now displaying: ${qualified_id}`);
 
       try {
-        const tmpCardData = await getCourseDoc<CardData>(_courseID, _cardID);
+        const tmpCardData = await this.dataLayer.getCourseDB(_courseID).getCourseDoc<CardData>(_cardID);
 
         if (!isCourseElo(tmpCardData.elo)) {
           tmpCardData.elo = toCourseElo(tmpCardData.elo);
         }
 
         const tmpView: ViewComponent = this.getViewComponent(tmpCardData.id_view);
         const tmpDataDocs = tmpCardData.id_displayable_data.map((id) => {
-          return getCourseDoc<DisplayableData>(_courseID, id, {
+          return this.dataLayer.getCourseDB(_courseID).getCourseDoc<DisplayableData>(id, {
             attachments: true,
             binary: true,
           });
@@ -566,7 +562,7 @@ export default defineComponent({
         const err = e as Error;
         if (docIsDeleted(err) && isReview(item)) {
           console.warn(`Card was deleted: ${qualified_id}`);
-          removeScheduledCardReview(this.user!.username, item.reviewID);
+          this.user!.removeScheduledCardReview(this.user!.getUsername(), item.reviewID);
         }
 
         this.loadCard(this.sessionController!.nextCard('dismiss-error'));

packages/common-ui/src/components/cardRendering/CardLoader.vue

@@ -14,7 +14,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
-import { getCourseDoc, CardData, CardRecord, DisplayableData } from '@vue-skuilder/db';
+import { getDataLayer, CardData, CardRecord, DisplayableData } from '@vue-skuilder/db';
 import { log, displayableDataToViewData, ViewData, ViewDescriptor } from '@vue-skuilder/common';
 import { ViewComponent } from '@/composables';
 import CardViewer from './CardViewer.vue';
@@ -72,12 +72,13 @@ export default defineComponent({
       this.loading = true;
       const _courseID = qualified_id.split('-')[0];
       const _cardID = qualified_id.split('-')[1];
+      const courseDB = getDataLayer().getCourseDB(_courseID);
 
       try {
-        const tmpCardData = await getCourseDoc<CardData>(_courseID, _cardID);
+        const tmpCardData = await courseDB.getCourseDoc<CardData>(_cardID);
         const tmpView = this.viewLookup(tmpCardData.id_view);
         const tmpDataDocs = tmpCardData.id_displayable_data.map((id) => {
-          return getCourseDoc<DisplayableData>(_courseID, id, {
+          return courseDB.getCourseDoc<DisplayableData>(id, {
             attachments: true,
             binary: true,
           });

packages/common-ui/tsconfig.json

@@ -16,7 +16,7 @@
         "paths": {
             "@/*": ["src/*"]
         },
-        "types": ["vite/client", "vitest/globals", "cypress"]
+        "types": ["vite/client", "vitest/globals", "cypress", "pouchdb"]
     },
     "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"],
     "exclude": ["node_modules", "dist"]

packages/courses/src/piano/utility/MidiConfig.vue

@@ -81,7 +81,7 @@ import { defineComponent, ref, watch, onMounted } from 'vue';
 import { alertUser } from '@vue-skuilder/common-ui';
 import SkMidi from './midi';
 import { Status } from '@vue-skuilder/common';
-import { User } from '@vue-skuilder/db';
+import { UserDBInterface } from '@vue-skuilder/db';
 import { InputEventNoteon } from 'webmidi';
 import PianoRangeVisualizer from './PianoRangeVisualizer.vue';
 
@@ -102,7 +102,7 @@ export default defineComponent({
       required: true,
     },
     user: {
-      type: Object as () => User,
+      type: Object as () => UserDBInterface,
       required: true,
     },
   },
@@ -390,7 +390,7 @@ export default defineComponent({
     });
 
     const retrieveSettings = async () => {
-      const s = await props.user.getCourseSettings(props._id);
+      const s = await (await props.user.getCourseInterface(props._id)).getCourseSettings();
 
       if (s?.midiinput) {
         const savedInput = s.midiinput.toString();

packages/courses/src/piano/utility/midi.ts

@@ -11,7 +11,7 @@ import webmidi, {
 import { Note, Interval } from '@tonaljs/tonal';
 import { alertUser } from '@vue-skuilder/common-ui';
 import { Status } from '@vue-skuilder/common';
-import { User } from '@vue-skuilder/db';
+import { UserDBInterface } from '@vue-skuilder/db';
 // import Navigator from '@types/webmidi';
 
 export interface NoteEvent {
@@ -307,9 +307,9 @@ class SkMidi {
     return this._state;
   }
 
-  private _userLookup: (() => Promise<User>) | null;
+  private _userLookup: (() => Promise<UserDBInterface>) | null;
 
-  private constructor(userLookup?: () => Promise<User>) {
+  private constructor(userLookup?: () => Promise<UserDBInterface>) {
     this._userLookup = userLookup ?? null;
   }
 
@@ -395,7 +395,8 @@ class SkMidi {
       // Get all course settings that might have MIDI configurations
       const courses = await user.getActiveCourses();
       for (const course of courses) {
-        const settings = await user.getCourseSettings(course.courseID);
+        const cdb = await user.getCourseInterface(course.courseID);
+        const settings = await cdb.getCourseSettings();
         if (settings?.midiinput || settings?.midioutput) {
           // We found MIDI settings, use the first valid ones
           if (settings.midiinput && this.webmidi.getInputById(settings.midiinput.toString())) {

packages/db/src/core/index.ts

@@ -1,6 +1,7 @@
 // Export all core interfaces and types
-// This will be populated with interface definitions extracted from the Vue package
-export * from './types';
+
 export * from './interfaces';
-export * from './types-legacy';
-export * from './Loggable';
+export * from './types/types-legacy';
+export * from './types/user';
+export * from '../util/Loggable';
+export * from './util';

packages/db/src/core/interfaces.ts

@@ -0,0 +1,26 @@
+import { ClassroomConfig } from '@vue-skuilder/common';
+
+/**
+ * Admin functionality
+ */
+export interface AdminDBInterface {
+  /**
+   * Get all users
+   */
+  getUsers(): Promise<PouchDB.Core.Document<{}>[]>;
+
+  /**
+   * Get all courses
+   */
+  getCourses(): Promise<PouchDB.Core.Document<{}>[]>;
+
+  /**
+   * Remove a course
+   */
+  removeCourse(id: string): Promise<PouchDB.Core.Response>;
+
+  /**
+   * Get all classrooms
+   */
+  getClassrooms(): Promise<(ClassroomConfig & { _id: string })[]>;
+}

packages/db/src/core/interfaces/adminDB.ts

@@ -0,0 +1,75 @@
+import { ClassroomConfig } from '@vue-skuilder/common';
+import { ScheduledCard } from '../types/user';
+import { StudySessionNewItem, StudySessionReviewItem } from './contentSource';
+
+/**
+ * Classroom management
+ */
+export interface ClassroomDBInterface {
+  /**
+   * Get classroom config
+   */
+  getConfig(): ClassroomConfig;
+
+  /**
+   * Get assigned content
+   */
+  getAssignedContent(): Promise<AssignedContent[]>;
+}
+
+export interface TeacherClassroomDBInterface extends ClassroomDBInterface {
+  /**
+   * For teacher interfaces: assign content
+   */
+  assignContent?(content: AssignedContent): Promise<boolean>;
+
+  /**
+   * For teacher interfaces: remove content
+   */
+  removeContent?(content: AssignedContent): Promise<void>;
+}
+
+export interface StudentClassroomDBInterface extends ClassroomDBInterface {
+  /**
+   * For student interfaces: get pending reviews
+   */
+  getPendingReviews?(): Promise<(StudySessionReviewItem & ScheduledCard)[]>;
+
+  /**
+   * For student interfaces: get new cards
+   */
+  getNewCards?(limit?: number): Promise<StudySessionNewItem[]>;
+}
+
+export type AssignedContent = AssignedCourse | AssignedTag | AssignedCard;
+
+export interface AssignedTag extends ContentBase {
+  type: 'tag';
+  tagID: string;
+}
+export interface AssignedCourse extends ContentBase {
+  type: 'course';
+}
+export interface AssignedCard extends ContentBase {
+  type: 'card';
+  cardID: string;
+}
+
+interface ContentBase {
+  type: 'course' | 'tag' | 'card';
+  /**
+   * Username of the assigning teacher.
+   */
+  assignedBy: string;
+  /**
+   * Date the content was assigned.
+   */
+  assignedOn: moment.Moment;
+  /**
+   * A 'due' date for this assigned content, for scheduling content
+   * in advance. Content will not be actively pushed to students until
+   * this date.
+   */
+  activeOn: moment.Moment;
+  courseID: string;
+}