185: Add a generic model editor for any data type

client/src/components/ModelEditor.vue

@@ -15,7 +15,9 @@
     <div v-if="AuthService.isAdmin(auth0) && state.isEditMode">
       <div v-for="viewKey in modelService.objectViewKeys">
         <div class="capitalize text-white border-white border-2 rounded p-1 pl-2 my-2 mr-12">{{ viewKey.key }}</div>
-        <input v-if="viewKey.kind !== 'code'" v-model="(state.viewModel as any)[viewKey.key]" :type="viewKey.kind">
+        <input v-if="viewKey.kind === 'text'" v-model="(state.viewModel as any)[viewKey.key]" type="text">
+        <input v-if="viewKey.kind === 'number'" v-model="(state.viewModel as any)[viewKey.key]" type="number">
+        <input v-if="viewKey.kind === 'select'" v-model="(state.viewModel as any)[viewKey.key]" type="text" placeholder="TODO: NOT IMPLEMENTED">
         <CodeEditor v-if="viewKey.kind === 'code'" v-model="(state.viewModel as any)[viewKey.key]" :height="viewKey.height ?? 2"></CodeEditor>
       </div>
 

client/src/models/index.ts

@@ -1,5 +1,5 @@
 export type Id = string;
-export type InputKind = 'text' | 'number' | 'code';
+export type InputKind = 'text' | 'number' | 'code' | 'select';
 
 export type ViewKey = {
   key: string

client/src/services/AssignmentService.ts

@@ -5,6 +5,11 @@ import type ModelService from './ModelService';
 export default class AssignmentService implements ModelService<Assignment>  {
   objectViewKeys: ViewKey[] = [
     { key: 'id', kind: 'text' },
+    { key: 'name', kind: 'text' },
+    { key: 'description', kind: 'code' },
+    { key: 'problemExplanation', kind: 'code' },
+    { key: 'requiredSectionIds', kind: 'select' },
+    { key: 'courseId', kind: 'select' },
   ];
 
   make(): Assignment {

client/src/services/SectionService.ts

@@ -5,6 +5,11 @@ import type ModelService from './ModelService';
 export default class SectionService implements ModelService<Section> {
   objectViewKeys: ViewKey[] = [
     { key: 'id', kind: 'text' },
+    { key: 'content', kind: 'code' },
+    { key: 'difficulty', kind: 'number' },
+    { key: 'description', kind: 'code' },
+    { key: 'name', kind: 'text' },
+    { key: 'courseId', kind: 'select'},
   ];
 
   make(): Section {

client/src/views/AssignmentView.vue

@@ -14,9 +14,7 @@
             :handler="async () => await deleteAssignmentAsync(id)" text="Delete?"
             class="w-20"></Button>
         </span>
-        <AssignmentEditor :handler="createAssignmentAsync" handlerText="Create" assignmentId=""
-          assignmentProblemExplanation="" assignmentDescription="" assignmentName="" :assignmentSectionIds="[]">
-        </AssignmentEditor>
+        <ModelEditor :handler="createAssignmentAsync" handlerText="Create" modelKind="assignment"></ModelEditor>
       </div>
     </div>
   </div>
@@ -25,9 +23,9 @@
 <script setup lang="ts">
 import AuthService from '@/services/AuthService';
 import Button from '@/components/Button.vue';
-import AssignmentEditor, { type AssignmentEditorState } from '@/components/AssignmentEditor.vue';
 import AssignmentLink from '@/components/AssignmentLink.vue';
 import AssignmentService from '@/services/AssignmentService';
+import ModelEditor from '@/components/ModelEditor.vue';
 import Spinner from '@/components/Spinner.vue';
 import type { AssignmentIndex } from '@/models';
 import { onMounted, reactive } from 'vue';
@@ -45,7 +43,7 @@ const state = reactive({
   assignmentIndex: {} as AssignmentIndex,
 });
 
-async function createAssignmentAsync(state: AssignmentEditorState) {
+async function createAssignmentAsync(state: any) {
   const assignmentToCreate = {
     id: state.id,
     problemExplanation: state.problemExplanation,

client/src/views/CourseView.vue

@@ -40,6 +40,8 @@ const state = reactive({
 });
 
 async function createCourseAsync(state: any) {
+  // TODO: Move these kind of functions out
+  // of the view and into their corresponding Service
   state.metadata = {
     name: state.name,
     description: state.description,
@@ -49,7 +51,6 @@ async function createCourseAsync(state: any) {
     content: state.content,
     metadata: state.metadata,
   };
-  console.log(courseToCreate);
   await CourseService.createAsync(
     courseToCreate,
     {