@vue-skuilder/platform-ui 0.1.1

package/src/stores/useDataInputFormStore.ts

@@ -0,0 +1,49 @@
+import { defineStore } from 'pinia';
+import { DataShape } from '@/base-course/Interfaces/DataShape';
+import { CourseConfig } from '@/server/types';
+import { FieldInputInstance } from '@/components/Edit/ViewableDataInputForm/FieldInput.types';
+import { useFieldInputStore } from './useFieldInputStore';
+import { ViewComponent } from '@/base-course/Displayable';
+
+interface DataInputForm {
+  // current props
+  dataShape: DataShape | null;
+  course: CourseConfig | null;
+
+  shapeViews: ViewComponent[];
+  fields: FieldInputInstance[];
+
+  fieldStore: ReturnType<typeof useFieldInputStore>;
+
+  uploading: boolean;
+}
+
+export interface DataInputFormState {
+  dataInputForm: DataInputForm;
+}
+
+export const useDataInputFormStore = defineStore('dataInputForm', {
+  state: (): DataInputFormState => ({
+    dataInputForm: {
+      dataShape: null,
+      course: null,
+      shapeViews: [],
+
+      fields: [],
+      fieldStore: useFieldInputStore(),
+      uploading: false,
+    },
+  }),
+  // actions or getters if needed
+  actions: {
+    setDataShape(ds: DataShape) {
+      this.dataInputForm.dataShape = ds;
+      this.dataInputForm.fieldStore.dataShape = ds;
+      this.dataInputForm.fieldStore.$reset();
+    },
+    setCourse(course: CourseConfig) {
+      this.dataInputForm.course = course;
+    },
+    // etc. create any convenience setters or methods you wish
+  },
+});

package/src/stores/useFieldInputStore.ts

@@ -0,0 +1,191 @@
+import { DataShape, FieldType, Status, fieldConverters } from '@vue-skuilder/common';
+import { defineStore } from 'pinia';
+
+export interface MediaInputs {
+  [key: `audio-${number}`]: unknown;
+  [key: `image-${number}`]: unknown;
+}
+
+export interface FieldInputStore {
+  // [key: string]: unknown;
+
+  // // Raw field values by field name
+  //
+  //
+
+  /**
+   * The
+   */
+  dataShape: DataShape | null;
+
+  /**
+   * Raw input field values by field name - the user-edited submissions
+   */
+  inputs: Record<string, unknown>;
+
+  /**
+   * additions from the MediaDragDrop editor.
+   */
+  mediaInputs: MediaInputs;
+
+  inputIsValid: boolean;
+
+  /**
+   * Validation status of each field - all must be true for the form to be valid and the data to be submissable
+   */
+  validation: Record<string, boolean>;
+  /**
+   * Input prepared for sending to the database
+   */
+  convertedInput: Record<string, unknown>;
+  /**
+   * Input prepared for local rendering in a preview
+   */
+  previewInput: Record<string, unknown>;
+
+  // getFieldValue(fieldName: string): unknown;
+}
+
+export const useFieldInputStore = defineStore('fieldStore', {
+  state: (): FieldInputStore => ({
+    dataShape: null as DataShape | null,
+    inputs: {},
+    mediaInputs: {} as MediaInputs,
+    inputIsValid: false,
+
+    validation: {},
+    convertedInput: {},
+    previewInput: {},
+  }),
+
+  getters: {
+    isValidated(): boolean {
+      return this.inputIsValid;
+    },
+
+    getPreview: (state) => {
+      if (state.inputIsValid) return state.previewInput;
+      else return {};
+    },
+    getConverted: (state) => {
+      if (state.inputIsValid) return state.convertedInput;
+      else return {};
+    },
+  },
+
+  actions: {
+    $reset() {
+      console.log(`[FieldInputStore].reset()`);
+      this.inputs = {};
+      this.mediaInputs = {};
+      this.validation = {};
+      this.convertedInput = {};
+      this.previewInput = {};
+      this.inputIsValid = false;
+
+      // Clear all media entries
+      const MAX_MEDIA_INPUTS = 10;
+      for (let i = 1; i <= MAX_MEDIA_INPUTS; i++) {
+        const audioKey = `audio-${i}` as keyof MediaInputs;
+        const imageKey = `image-${i}` as keyof MediaInputs;
+
+        delete this.mediaInputs[audioKey];
+        delete this.mediaInputs[imageKey];
+      }
+    },
+
+    setFieldValue(fieldName: string, value: unknown) {
+      this.inputs[fieldName] = value;
+      this.validate();
+      this.convert();
+    },
+
+    setMedia(
+      fieldName: keyof MediaInputs,
+      media: {
+        content_type: string;
+        data: Blob;
+      }
+    ) {
+      console.log(`[FieldInputStore].setMedia: ${fieldName}`);
+      this.mediaInputs[fieldName] = media;
+      this.convert();
+    },
+
+    validate() {
+      this.validation = {};
+
+      if (this.dataShape === null) {
+        this.inputIsValid = false;
+        return;
+      }
+
+      this.inputIsValid = true;
+
+      for (const field of this.dataShape.fields) {
+        if (field.validator) {
+          const result = field.validator.test(this.inputs[field.name] as unknown as string);
+          if (result.status === Status.ok) {
+            this.validation[field.name] = true;
+          } else {
+            this.inputIsValid = false;
+            this.validation[field.name] = false;
+          }
+        }
+      }
+    },
+
+    convert() {
+      this.convertedInput = {};
+
+      this.dataShape?.fields.forEach((f) => {
+        this.convertedInput[f.name] = fieldConverters[f.type].databaseConverter(
+          this.inputs[f.name]
+        );
+        this.previewInput[f.name] = fieldConverters[f.type].previewConverter(this.inputs[f.name]);
+      });
+
+      // Check for media entries
+      for (let i = 1; i < 11; i++) {
+        const index = `audio-${i}` as keyof MediaInputs;
+        const value = this.mediaInputs[index];
+        if (value) {
+          this.convertedInput[index] = fieldConverters[FieldType.AUDIO].databaseConverter(value);
+          this.previewInput[index] = fieldConverters[FieldType.AUDIO].previewConverter(value);
+        } else {
+          break;
+        }
+      }
+
+      for (let i = 1; i < 11; i++) {
+        const index = `image-${i}` as keyof MediaInputs;
+        const value = this.mediaInputs[index];
+        if (value) {
+          this.convertedInput[index] = fieldConverters[FieldType.IMAGE].databaseConverter(value);
+          this.previewInput[index] = fieldConverters[FieldType.IMAGE].previewConverter(value);
+        } else {
+          break;
+        }
+      }
+    },
+
+    clearMediaEntries() {
+      // Clear all media entries up to a reasonable limit
+      for (let i = 1; i <= 10; i++) {
+        delete this.mediaInputs[`audio-${i}`];
+        delete this.mediaInputs[`image-${i}`];
+        delete this.convertedInput[`audio-${i}`];
+        delete this.convertedInput[`image-${i}`];
+        delete this.previewInput[`audio-${i}`];
+        delete this.previewInput[`image-${i}`];
+      }
+    },
+
+    clearField(fieldName: string) {
+      delete this.inputs[fieldName];
+      delete this.validation[fieldName];
+      delete this.convertedInput[fieldName];
+      delete this.previewInput[fieldName];
+    },
+  },
+});

package/src/types/shims-vuetify.d.ts

@@ -0,0 +1,12 @@
+declare module 'vuetify/lib' {
+  import Vuetify from 'vuetify';
+  export default Vuetify;
+}
+
+declare module 'vuetify/types' {
+  import Vue from 'vue';
+  interface Vue {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    $vuetify: any;
+  }
+}

package/src/types/svg.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg?raw' {
+  const content: string;
+  export default content;
+}

package/src/utils/bulkImport/index.ts

@@ -0,0 +1,94 @@
+// Re-export parsing utilities from common
+export {
+  ParsedCard,
+  CardData,
+  parseCard,
+  parseBulkTextToCards,
+  isValidBulkFormat,
+  splitCardsText,
+  CardParserConfig,
+  CARD_DELIMITER
+} from '@vue-skuilder/common';
+
+// Re-export database utilities from db
+export {
+  ImportResult,
+  BulkCardProcessorConfig,
+  importParsedCards,
+  validateProcessorConfig
+} from '@vue-skuilder/db';
+
+// Example usage for documentation purposes:
+/*
+import { CourseDBInterface } from '@vue-skuilder/db';
+import { DataShape } from '@vue-skuilder/common';
+import {
+  importParsedCards,      // Renamed from processBulkCards
+  validateProcessorConfig,
+  parseCard,              // Still useful for single card parsing
+  splitCardsText,         // Still useful for understanding delimiters or manual splitting
+  isValidBulkFormat,
+  parseBulkTextToCards    // New function for parsing bulk text to ParsedCard[]
+} from './index'; // Assuming this index.ts correctly re-exports them
+
+async function exampleUsage(courseDB: CourseDBInterface, dataShape: DataShape) {
+  // Example bulk text
+  const bulkText = `Card 1 Question
+{{blank}}
+tags: tagA, tagB
+elo: 1500
+---
+---
+Card 2 Question
+Another {{blank}}
+elo: 1200
+tags: tagC`;
+
+  // Validate config for processing
+  const config = {
+    dataShape,
+    courseCode: 'COURSE-123',
+    userName: 'user123'
+  };
+
+  const validation = validateProcessorConfig(config);
+  if (!validation.isValid) {
+    console.error(validation.errorMessage);
+    return;
+  }
+
+  // Step 1: Parse the bulk text into an array of ParsedCard objects
+  // isValidBulkFormat can be used as a preliminary check if needed
+  if (!isValidBulkFormat(bulkText)) {
+    console.error("Invalid bulk format");
+    return;
+  }
+  const parsedCardsArray = parseBulkTextToCards(bulkText);
+
+  if (parsedCardsArray.length === 0 && bulkText.trim().length > 0) {
+    console.error("No cards could be parsed from the input.");
+    // Potentially show an error or return if no cards were parsed,
+    // even if the format had delimiters, maybe all cards were empty.
+    return;
+  }
+
+  // Step 2: Process the array of parsed cards
+  const results = await importParsedCards(parsedCardsArray, courseDB, config);
+
+  // Check results
+  console.log(`Attempted to import ${parsedCardsArray.length} cards.`);
+  console.log(`Successfully imported: ${results.filter(r => r.status === 'success').length}`);
+  console.log(`Failed: ${results.filter(r => r.status === 'error').length}`);
+
+  // Example of parsing a single card (remains the same)
+  const singleCard = `Example card with a {{blank}}
+elo: 1600
+tags: tag1, tag2`;
+  const parsedSingle = parseCard(singleCard); // Renamed 'parsed' to 'parsedSingle' for clarity
+  console.log('Parsed single card:', {
+    markdown: parsedSingle?.markdown,
+    tags: parsedSingle?.tags,
+    elo: parsedSingle?.elo
+  });
+}
+*/

package/src/views/About.vue

@@ -0,0 +1,29 @@
+<template>
+  <v-container class="about">
+    <v-row>
+      <v-col>
+        <h1 class="text-h2 mb-6">Todo.</h1>
+
+        <p class="text-body-1 mb-4">
+          This is a placeholder for the about page. It will be filled in with more information later.
+        </p>
+
+        <v-btn :to="'./notes'" variant="text" color="primary"> Release Notes </v-btn>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'AboutView',
+  components: {},
+  data() {
+    return {
+      type: 'Viewable',
+    };
+  },
+});
+</script>

package/src/views/Admin.vue

@@ -0,0 +1,128 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col>
+        <h1 class="text-h3 mb-6">{{ title }}</h1>
+
+        <!-- Users Section -->
+        <v-card class="mb-6">
+          <v-card-title>
+            <h3>Users - {{ registeredUsers.length }}</h3>
+          </v-card-title>
+          <v-card-text>
+            <v-list>
+              <v-list-item v-for="u in registeredUsers" :key="u._id">
+                <v-list-item-title>User: {{ u.name }}</v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-card-text>
+        </v-card>
+
+        <!-- Quilts Section -->
+        <v-card class="mb-6">
+          <v-card-title>
+            <h3>
+              <router-link to="/courses" class="text-decoration-none">Quilts</router-link>
+              - {{ courses.length }}
+            </h3>
+          </v-card-title>
+          <v-card-text>
+            <v-list>
+              <v-list-item v-for="c in courses" :key="c._id">
+                <v-list-item-title>
+                  <router-link :to="`/q/${c._id}`" class="text-decoration-none">{{ c.name }}</router-link>
+                  - {{ c._id }}
+                  <v-btn density="compact" icon="mdi-close" variant="text" size="small" @click="removeCourse(c._id)" />
+                </v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-card-text>
+        </v-card>
+
+        <!-- Classrooms Section -->
+        <v-card>
+          <v-card-title>
+            <h3>Classrooms - {{ classrooms.length }}</h3>
+          </v-card-title>
+          <v-card-text>
+            <v-list>
+              <v-list-item v-for="c in classrooms" :key="c._id">
+                <v-list-item-title>
+                  <router-link :to="`/c/${c._id}`" class="text-decoration-none">{{ c.name }}</router-link>
+                  {{ c.name }} - {{ c.teachers }} - {{ c.students.length }} students
+                </v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { AdminDBInterface, getDataLayer } from '@vue-skuilder/db';
+import { GuestUsername } from '@vue-skuilder/db';
+interface User {
+  _id: string;
+  name: string;
+}
+
+interface Course {
+  _id: string;
+  name: string;
+}
+
+interface Classroom {
+  _id: string;
+  name: string;
+  teachers: string[];
+  students: string[];
+}
+
+export default defineComponent({
+  name: 'AdminView',
+
+  data() {
+    return {
+      title: 'Admin Panel',
+      db: null as AdminDBInterface | null,
+      users: [] as User[],
+      courses: [] as Course[],
+      classrooms: [] as Classroom[],
+    };
+  },
+
+  computed: {
+    registeredUsers(): User[] {
+      return this.users.filter((u) => {
+        return !(u.name as string).startsWith(GuestUsername);
+      });
+    },
+  },
+
+  async created() {
+    try {
+      this.db = await getDataLayer().getAdminDB();
+      this.users = (await this.db.getUsers()) as unknown as User[];
+      this.courses = (await this.db.getCourses()) as unknown as Course[];
+      this.classrooms = await this.db.getClassrooms();
+    } catch (e) {
+      this.title = 'This page is for database admins only.';
+      throw `${JSON.stringify(e)} - ${e}\n\nNot an admin!`;
+    }
+  },
+
+  methods: {
+    removeCourse(id: string): void {
+      console.log(`Removing ${id}`);
+      if (this.db) {
+        this.db.removeCourse(id);
+      }
+    },
+  },
+});
+</script>
+
+<style scoped></style>