@vue-skuilder/platform-ui 0.1.1

package/src/components/Edit/ComponentRegistration/ComponentRegistration.vue

@@ -0,0 +1,235 @@
+<template>
+  <div>
+    <h3>DataShapes</h3>
+    <ul>
+      <li v-for="dataShape in dataShapes" :key="dataShape.name" class="ma-2">
+        <v-btn v-if="!dataShape.registered" size="small" @click="registerShape(dataShape.name)"> Register </v-btn>
+        <span v-else class="inset"> (Registered) </span>
+        {{ dataShape.name }}
+        <ul>
+          <div v-for="view in dataShape.dataShape.views" :key="view.name">
+            <li v-if="view">
+              {{ view.name }}
+            </li>
+          </div>
+        </ul>
+      </li>
+    </ul>
+
+    <h3>Questions</h3>
+    <ul>
+      <li v-for="question in questions" :key="question.name" class="ma-2">
+        <v-btn v-if="!question.registered" size="small" @click="registerQuestionView(question.name)"> Register </v-btn>
+        <span v-else class="inset"> (Registered) </span>
+        {{ question.name }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { Displayable } from '@vue-skuilder/common-ui';
+import { allCourses } from '@vue-skuilder/courses';
+import { getDataLayer, CourseDBInterface } from '@vue-skuilder/db';
+import {
+  NameSpacer,
+  QuestionDescriptor,
+  CourseConfig,
+  DataShape55,
+  QuestionType55,
+  DataShape,
+} from '@vue-skuilder/common';
+import * as _ from 'lodash';
+import { getCurrentUser } from '@vue-skuilder/common-ui';
+
+export interface DataShapeRegistrationStatus {
+  name: string;
+  course: string;
+  dataShape: DataShape;
+  registered: boolean;
+}
+
+export interface QuestionRegistrationStatus {
+  name: string;
+  course: string;
+  question: typeof Displayable;
+  registered: boolean;
+}
+
+export default defineComponent({
+  name: 'ComponentRegistration',
+
+  props: {
+    course: {
+      type: String,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      dataShapes: [] as (DataShapeRegistrationStatus & { displayable: typeof Displayable })[],
+      questions: [] as QuestionRegistrationStatus[],
+      courseDatashapes: [] as DataShape55[],
+      courseQuestionTypes: [] as QuestionType55[],
+      courseConfig: undefined as CourseConfig | undefined,
+      courseDB: null as CourseDBInterface | null,
+    };
+  },
+
+  async created() {
+    this.courseDB = getDataLayer().getCourseDB(this.course);
+    this.courseConfig = await this.courseDB.getCourseConfig();
+    this.courseDatashapes = this.courseConfig.dataShapes;
+    this.courseQuestionTypes = this.courseConfig.questionTypes;
+
+    const dataShapeData = allCourses.allDataShapes();
+
+    allCourses.allDataShapesRaw().forEach((ds) => {
+      console.log(`[ComponentRegistration] Datashape:\n${JSON.stringify(ds)}`);
+    });
+
+    dataShapeData.forEach((shape) => {
+      const index = this.courseDatashapes.find((test) => {
+        return test.name === NameSpacer.getDataShapeString(shape);
+      });
+
+      this.dataShapes.push({
+        name: shape.dataShape,
+        course: shape.course,
+        dataShape: allCourses.getDataShape(shape),
+        registered: index !== undefined,
+        displayable: shape.displayable,
+      });
+    });
+
+    this.dataShapes = _.sortBy(this.dataShapes, ['registered', 'name']);
+
+    const courseNameList = allCourses.courses.map((course) => course.name);
+    const questionData: Array<[QuestionDescriptor, typeof Displayable]> = [];
+
+    courseNameList.forEach((course) => {
+      const courseQs = allCourses.getCourse(course)!.questions;
+
+      courseQs.forEach((courseQ) => {
+        questionData.push([
+          {
+            course,
+            questionType: courseQ.name,
+          },
+          courseQ,
+        ]);
+      });
+    });
+
+    questionData.forEach((question) => {
+      const index = this.courseQuestionTypes.find((test) => {
+        return NameSpacer.getQuestionString(question[0]) === test.name;
+      });
+
+      this.questions.push({
+        course: question[0].course,
+        name: question[1].name,
+        registered: index !== undefined,
+        question: question[1],
+      });
+    });
+  },
+
+  methods: {
+    async registerShape(shapeName: string) {
+      const shape = this.dataShapes.find((findShape) => {
+        return findShape.name === shapeName;
+      })!;
+
+      this.courseConfig!.dataShapes.push({
+        name: NameSpacer.getDataShapeString({
+          dataShape: shape.name,
+          course: shape.course,
+        }),
+        questionTypes: [],
+      });
+
+      const update = await this.courseDB!.updateCourseConfig(this.courseConfig!);
+
+      if (update.ok) {
+        shape.registered = true;
+      }
+    },
+
+    async registerQuestionView(questionName: string) {
+      const question = this.questions.find((q) => {
+        return q.name === questionName;
+      })!;
+
+      const nsQuestionName = NameSpacer.getQuestionString({
+        course: question.course,
+        questionType: question.name,
+      });
+
+      this.courseConfig!.questionTypes.push({
+        name: nsQuestionName,
+        viewList: question.question.views.map((v) => {
+          if (v.name) {
+            return v.name;
+          } else {
+            return 'unnamedComponent';
+          }
+        }),
+        dataShapeList: question.question.dataShapes.map((d) =>
+          NameSpacer.getDataShapeString({
+            course: question.course,
+            dataShape: d.name,
+          })
+        ),
+      });
+
+      question.question.dataShapes.forEach((ds) => {
+        const nsDatashapeName = NameSpacer.getDataShapeString({
+          course: question.course,
+          dataShape: ds.name,
+        });
+
+        for (const db of this.courseConfig!.dataShapes) {
+          if (db.name === nsDatashapeName) {
+            db.questionTypes.push(nsQuestionName);
+          }
+        }
+      });
+
+      const update = await this.courseDB!.updateCourseConfig(this.courseConfig!);
+      const u = await getCurrentUser();
+
+      if (update.ok) {
+        question.registered = true;
+        console.log(`[ComponentRegistration]
+Question: ${JSON.stringify(question)}
+CourseID: ${this.course}
+        `);
+        if (question.question.seedData) {
+          console.log(`[ComponentRegistration] Question has seed data!`);
+          question.question.seedData.forEach((d) => {
+            this.courseDB!.addNote(question.course, question.question.dataShapes[0], d, u.getUsername(), []);
+          });
+        } else {
+          console.log(`[ComponentRegistration] Question has NO seed data!`);
+        }
+      }
+    },
+  },
+});
+</script>
+
+<style scoped>
+div {
+  margin-top: 15px;
+}
+
+.inset {
+  background-color: rgb(240, 240, 243);
+  font-size: smaller;
+  padding: 2px;
+  border-radius: 2px;
+}
+</style>

package/src/components/Edit/ComponentRegistration/UnregisteredComponentsTable.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <table>
+      <thead>
+        <td></td>
+      </thead>
+    </table>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+// [ ] delete this file
+
+export default defineComponent({
+  name: 'UnregisteredComponentsTable',
+});
+</script>

package/src/components/Edit/CourseEditor.vue

@@ -0,0 +1,162 @@
+<template>
+  <div v-if="course" class="courseEditor">
+    <div v-if="loading">
+      <v-progress-circular indeterminate color="secondary"></v-progress-circular>
+    </div>
+    <div v-else>
+      <h1 class="text-h4">
+        <router-link to="/q">Quilts</router-link> /
+        <router-link :to="`/q/${courseConfig ? courseConfig.name : course}`">{{ courseConfig?.name }}</router-link>
+      </h1>
+
+      <v-tabs v-model="currentTab" bg-color="primary" grow>
+        <v-tab value="single">Single Card Input</v-tab>
+        <v-tab value="bulk">Bulk Import</v-tab>
+        <v-tab value="registration">Navigation</v-tab>
+        <v-tab value="registration">Component Registration</v-tab>
+      </v-tabs>
+
+      <v-window v-model="currentTab">
+        <v-window-item value="single">
+          <v-container fluid>
+            <v-select
+              v-model="selectedShape"
+              label="What kind of content are you adding?"
+              :items="registeredDataShapes.map((shape) => shape.name)"
+              class="mt-4"
+            />
+            <data-input-form
+              v-if="selectedShape !== '' && courseConfig && dataShape"
+              :data-shape="dataShape"
+              :course-cfg="courseConfig"
+            />
+          </v-container>
+        </v-window-item>
+
+        <v-window-item value="bulk">
+          <v-container fluid>
+            <bulk-import-view v-if="courseConfig" :course-cfg="courseConfig" class="mt-4" />
+          </v-container>
+        </v-window-item>
+
+        <v-window-item value="registration">
+          <v-container fluid>
+            <component-registration :course="course" class="mt-4" />
+          </v-container>
+        </v-window-item>
+        
+        <v-window-item value="navigation">
+          <v-container fluid>
+            <navigation-strategy-editor :course-id="course" />    
+          </v-container>
+        </v-window-item>
+        
+      </v-window>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import ComponentRegistration from '@/components/Edit/ComponentRegistration/ComponentRegistration.vue';
+import NavigationStrategyEditor from '@/components/Edit/NavigationStrategy/NavigationStrategyEditor.vue';
+import { allCourses } from '@vue-skuilder/courses';
+import { BlanksCard, BlanksCardDataShapes } from '@vue-skuilder/courses';
+import { CourseConfig, NameSpacer, DataShape } from '@vue-skuilder/common';
+import DataInputForm from './ViewableDataInputForm/DataInputForm.vue';
+import BulkImportView from './BulkImportView.vue'; // Added import
+import { getDataLayer } from '@vue-skuilder/db';
+import { useDataInputFormStore } from '@/stores/useDataInputFormStore';
+
+export default defineComponent({
+  name: 'CourseEditor',
+
+  components: {
+    DataInputForm,
+    ComponentRegistration,
+    NavigationStrategyEditor,
+    BulkImportView,
+  },
+
+  props: {
+    course: {
+      type: String,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      registeredDataShapes: [] as DataShape[],
+      dataShapes: [] as DataShape[],
+      selectedShape: BlanksCard.dataShapes[0].name,
+      courseConfig: null as CourseConfig | null,
+      dataShape: BlanksCardDataShapes[0] as DataShape,
+      loading: true,
+      currentTab: 'single',
+      dataInputFormStore: useDataInputFormStore(),
+    };
+  },
+
+  watch: {
+    selectedShape: {
+      handler(value?: string) {
+        if (value) {
+          this.dataShape = this.getDataShape(value);
+          this.dataInputFormStore.setDataShape(this.dataShape);
+
+          this.dataInputFormStore.dataInputForm.course = this.courseConfig;
+        }
+      },
+    },
+  },
+
+  async created() {
+    this.courseConfig = await getDataLayer().getCoursesDB().getCourseConfig(this.course);
+
+    // for testing getCourseTagStubs...
+    // log(JSON.stringify(await getCourseTagStubs(this.course)));
+
+    // this.dataShapes = BaseCards.dataShapes;
+    // this.registeredDataShapes = BaseCards.dataShapes;
+    // BaseCards.dataShapes.forEach((shape) => {
+    //   this.dataShapes.push(shape);
+    //   this.registeredDataShapes.push(shape);
+    // });
+
+    // #55 make all 'programmed' datashapes available, rather than
+    // the previous code-based name scoping
+    allCourses.courses.forEach((course) => {
+      course.questions.forEach((question) => {
+        question.dataShapes.forEach((ds) => {
+          this.dataShapes.push(ds);
+        });
+      });
+    });
+
+    this.courseConfig.dataShapes.forEach((ds) => {
+      this.registeredDataShapes.push(
+        this.dataShapes.find((shape) => {
+          return shape.name === NameSpacer.getDataShapeDescriptor(ds.name).dataShape;
+        })!
+      );
+    });
+
+    this.loading = false;
+  },
+
+  methods: {
+    getDataShape(shapeName: string): DataShape {
+      return this.dataShapes.find((shape) => {
+        return shape.name === shapeName;
+      })!;
+    },
+  },
+});
+</script>
+
+<style scoped>
+div {
+  margin-top: 15px;
+}
+</style>

package/src/components/Edit/NavigationStrategy/NavigationStrategyEditor.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="navigation-strategy-editor">
+    <div v-if="loading">
+      <v-progress-circular indeterminate color="secondary"></v-progress-circular>
+    </div>
+    <div v-else>
+      <h2 class="text-h5 mb-4">Navigation Strategies</h2>
+
+      <div v-if="strategies.length === 0" class="no-strategies">
+        <p>No navigation strategies defined for this course.</p>
+      </div>
+      
+      <navigation-strategy-list 
+        v-else
+        :strategies="strategies" 
+        @edit="editStrategy" 
+        @delete="confirmDeleteStrategy"
+      />
+
+      <v-btn color="primary" class="mt-4" disabled title="New strategy types coming soon">
+        <v-icon start>mdi-plus</v-icon>
+        Add New Strategy
+      </v-btn>
+
+
+
+      <v-dialog v-model="showDeleteConfirm" max-width="400px">
+        <v-card>
+          <v-card-title class="text-h5">Delete Strategy</v-card-title>
+          <v-card-text> Are you sure you want to delete the strategy "{{ strategyToDelete?.name }}"? </v-card-text>
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn color="error" @click="deleteStrategy">Delete</v-btn>
+            <v-btn @click="showDeleteConfirm = false">Cancel</v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import type { ContentNavigationStrategyData } from '@vue-skuilder/db/src/core/types/contentNavigationStrategy';
+import NavigationStrategyList from './NavigationStrategyList.vue';
+import { getDataLayer, DocType, Navigators } from '@vue-skuilder/db';
+
+export default defineComponent({
+  name: 'NavigationStrategyEditor',
+
+  components: {
+    NavigationStrategyList,
+  },
+
+  props: {
+    courseId: {
+      type: String,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      strategies: [] as ContentNavigationStrategyData[],
+      loading: true,
+      showDeleteConfirm: false,
+      strategyToDelete: null as ContentNavigationStrategyData | null
+    };
+  },
+
+  async created() {
+    await this.loadStrategies();
+  },
+
+  methods: {
+    async loadStrategies() {
+      this.loading = true;
+      try {
+        const dataLayer = getDataLayer();
+        const courseDB = dataLayer.getCourseDB(this.courseId);
+        
+        // Get all navigation strategies
+        this.strategies = await courseDB.getAllNavigationStrategies();
+      } catch (error) {
+        console.error('Failed to load navigation strategies:', error);
+        // In case of error, use a placeholder
+        this.strategies = [
+          {
+            id: 'ELO',
+            docType: DocType.NAVIGATION_STRATEGY,
+            name: 'ELO',
+            description: 'Default ELO-based navigation strategy',
+            implementingClass: Navigators.ELO,
+            course: this.courseId,
+            serializedData: '',
+          },
+        ];
+      }
+      this.loading = false;
+    },
+
+    createNewStrategy() {
+      // Disabled for now - new strategy types will be implemented in the future
+      console.log('Creating new strategies is not yet implemented');
+    },
+
+    editStrategy(strategy: ContentNavigationStrategyData) {
+      // Strategy editing is not yet implemented
+      console.log(`Editing strategy ${strategy.id} is not yet implemented`);
+    },
+
+
+
+    confirmDeleteStrategy(strategy: ContentNavigationStrategyData) {
+      this.strategyToDelete = strategy;
+      this.showDeleteConfirm = true;
+    },
+
+    async deleteStrategy() {
+      if (!this.strategyToDelete) return;
+
+      this.loading = true;
+      try {
+        const dataLayer = getDataLayer();
+        const courseDB = dataLayer.getCourseDB(this.courseId);
+        
+        // Since deleteNavigationStrategy doesn't exist in the interface yet,
+        // we'll use updateNavigationStrategy with an empty/invalid strategy that
+        // will be ignored by the system
+        const emptyStrategy: ContentNavigationStrategyData = {
+          id: this.strategyToDelete!.id,
+          docType: DocType.NAVIGATION_STRATEGY,
+          name: "DELETED",
+          description: "This strategy has been deleted",
+          implementingClass: "",
+          course: this.courseId,
+          serializedData: ""
+        };
+        
+        // Update with empty strategy
+        await courseDB.updateNavigationStrategy(this.strategyToDelete!.id, emptyStrategy);
+        console.log(`Strategy ${this.strategyToDelete!.id} marked as deleted`);
+
+        // Remove from our local array
+        this.strategies = this.strategies.filter((s) => s.id !== this.strategyToDelete?.id);
+
+        this.showDeleteConfirm = false;
+        this.strategyToDelete = null;
+      } catch (error) {
+        console.error('Failed to delete navigation strategy:', error);
+      }
+      this.loading = false;
+    },
+  },
+});
+</script>
+
+<style scoped>
+.navigation-strategy-editor {
+  padding: 16px;
+}
+
+.no-strategies {
+  margin: 20px 0;
+  padding: 20px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  text-align: center;
+}
+</style>

package/src/components/Edit/NavigationStrategy/NavigationStrategyList.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="navigation-strategy-list">
+    <v-list>
+      <v-list-item
+        v-for="strategy in strategies"
+        :key="strategy.id"
+        lines="three"
+      >
+        <template #prepend>
+          <v-icon> mdi-navigation </v-icon>
+        </template>
+
+        <v-list-item-title class="text-h6">
+          {{ strategy.name }}
+        </v-list-item-title>
+
+        <v-list-item-subtitle>{{ strategy.description }}</v-list-item-subtitle>
+
+        <v-list-item-subtitle class="strategy-details mt-2">
+          <div><strong>Type:</strong> {{ strategy.implementingClass }}</div>
+          <div v-if="strategy.serializedData"><strong>Configuration:</strong> {{ getDisplayConfig(strategy) }}</div>
+        </v-list-item-subtitle>
+
+        <template #append>
+          <div class="d-flex">
+            <v-btn icon size="small" title="Edit Strategy (coming soon)" class="mr-1" disabled>
+              <v-icon>mdi-pencil</v-icon>
+            </v-btn>
+
+            <v-btn
+              icon
+              size="small"
+              title="Delete Strategy"
+              class="mr-1"
+              @click="$emit('delete', strategy)"
+            >
+              <v-icon>mdi-delete</v-icon>
+            </v-btn>
+          </div>
+        </template>
+      </v-list-item>
+    </v-list>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import type { ContentNavigationStrategyData } from '@vue-skuilder/db/src/core/types/contentNavigationStrategy';
+
+export default defineComponent({
+  name: 'NavigationStrategyList',
+
+  props: {
+    strategies: {
+      type: Array as PropType<ContentNavigationStrategyData[]>,
+      required: true,
+    },
+  },
+
+  emits: ['edit', 'delete'],
+
+  methods: {
+    getDisplayConfig(strategy: ContentNavigationStrategyData): string {
+      if (!strategy.serializedData) return 'No configuration';
+
+      try {
+        // Try to parse the serialized data to show a more user-friendly display
+        const config = JSON.parse(strategy.serializedData);
+        return Object.keys(config)
+          .map((key) => `${key}: ${config[key]}`)
+          .join(', ');
+      } catch {
+        // If it's not valid JSON, just return as is
+        return strategy.serializedData;
+      }
+    },
+  },
+});
+</script>
+
+<style scoped>
+.navigation-strategy-list {
+  margin: 16px 0;
+}
+
+
+
+.strategy-details {
+  font-size: 0.9em;
+  color: rgba(0, 0, 0, 0.6);
+}
+</style>