tidy w/ no input form

Author: NiloCK

packages/platform-ui/src/components/Edit/NavigationStrategy/NavigationStrategyEditor.vue

@@ -7,38 +7,22 @@
       <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. Course will be served via default ELO based strategy.</p>
+        <p>No navigation strategies defined for this course.</p>
       </div>
-
-      <navigation-strategy-list
+      
+      <navigation-strategy-list 
         v-else
-        :strategies="strategies"
-        :active-strategy-id="activeStrategyId"
-        @edit="editStrategy"
-        @activate="activateStrategy"
+        :strategies="strategies" 
+        @edit="editStrategy" 
         @delete="confirmDeleteStrategy"
       />
 
-      <v-btn color="primary" class="mt-4" @click="createNewStrategy">
+      <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="showForm" max-width="700px">
-        <v-card>
-          <v-card-title class="text-h5">
-            {{ isEditing ? 'Edit Navigation Strategy' : 'Create Navigation Strategy' }}
-          </v-card-title>
-          <v-card-text>
-            <navigation-strategy-form
-              :strategy="currentStrategy"
-              :course-id="courseId"
-              @save="saveStrategy"
-              @cancel="cancelEdit"
-            />
-          </v-card-text>
-        </v-card>
-      </v-dialog>
+
 
       <v-dialog v-model="showDeleteConfirm" max-width="400px">
         <v-card>
@@ -59,15 +43,13 @@
 import { defineComponent } from 'vue';
 import type { ContentNavigationStrategyData } from '@vue-skuilder/db/src/core/types/contentNavigationStrategy';
 import NavigationStrategyList from './NavigationStrategyList.vue';
-import NavigationStrategyForm from './NavigationStrategyForm.vue';
 import { getDataLayer, DocType, Navigators } from '@vue-skuilder/db';
 
 export default defineComponent({
   name: 'NavigationStrategyEditor',
 
   components: {
     NavigationStrategyList,
-    NavigationStrategyForm,
   },
 
   props: {
@@ -80,13 +62,9 @@ export default defineComponent({
   data() {
     return {
       strategies: [] as ContentNavigationStrategyData[],
-      currentStrategy: null as ContentNavigationStrategyData | null,
-      showForm: false,
-      isEditing: false,
       loading: true,
-      activeStrategyId: '',
       showDeleteConfirm: false,
-      strategyToDelete: null as ContentNavigationStrategyData | null,
+      strategyToDelete: null as ContentNavigationStrategyData | null
     };
   },
 
@@ -98,14 +76,11 @@ export default defineComponent({
     async loadStrategies() {
       this.loading = true;
       try {
-        const courseDB = getDataLayer().getCoursesDB(this.courseId);
-
+        const dataLayer = getDataLayer();
+        const courseDB = dataLayer.getCourseDB(this.courseId);
+        
         // Get all navigation strategies
         this.strategies = await courseDB.getAllNavigationStrategies();
-
-        // Get the active strategy
-        const activeStrategy = await courseDB.surfaceNavigationStrategy();
-        this.activeStrategyId = activeStrategy.id;
       } catch (error) {
         console.error('Failed to load navigation strategies:', error);
         // In case of error, use a placeholder
@@ -120,74 +95,21 @@ export default defineComponent({
             serializedData: '',
           },
         ];
-        this.activeStrategyId = 'ELO';
       }
       this.loading = false;
     },
 
     createNewStrategy() {
-      this.currentStrategy = {
-        id: '', // Will be generated when saved
-        docType: DocType.NAVIGATION_STRATEGY,
-        name: '',
-        description: '',
-        implementingClass: Navigators.ELO, // Default to ELO
-        course: this.courseId,
-        serializedData: '',
-      };
-      this.isEditing = false;
-      this.showForm = true;
+      // Disabled for now - new strategy types will be implemented in the future
+      console.log('Creating new strategies is not yet implemented');
     },
 
     editStrategy(strategy: ContentNavigationStrategyData) {
-      this.currentStrategy = { ...strategy };
-      this.isEditing = true;
-      this.showForm = true;
-    },
-
-    async saveStrategy(strategy: ContentNavigationStrategyData) {
-      this.loading = true;
-      try {
-        const courseDB = getDataLayer().getCoursesDB(this.courseId);
-
-        if (this.isEditing) {
-          // Update existing strategy
-          await courseDB.updateNavigationStrategy(strategy.id, strategy);
-        } else {
-          // For new strategies, generate an ID if not provided
-          if (!strategy.id) {
-            strategy.id = `strategy-${Date.now()}`;
-          }
-          // Add new strategy
-          await courseDB.addNavigationStrategy(strategy);
-        }
-
-        // Reload strategies to get the updated list
-        await this.loadStrategies();
-        this.showForm = false;
-      } catch (error) {
-        console.error('Failed to save navigation strategy:', error);
-        // In a real app, you would show an error message to the user
-      }
-      this.loading = false;
-    },
-
-    cancelEdit() {
-      this.showForm = false;
-      this.currentStrategy = null;
+      // Strategy editing is not yet implemented
+      console.log(`Editing strategy ${strategy.id} is not yet implemented`);
     },
 
-    async activateStrategy(strategyId: string) {
-      // Set the active strategy ID locally
-      this.activeStrategyId = strategyId;
-
-      // In a real implementation, you would save this preference to the database
-      // For now, we just log it
-      console.log(`Strategy ${strategyId} activated`);
 
-      // In the future, you might implement:
-      // await courseDB.setActiveNavigationStrategy(strategyId);
-    },
 
     confirmDeleteStrategy(strategy: ContentNavigationStrategyData) {
       this.strategyToDelete = strategy;
@@ -199,13 +121,27 @@ export default defineComponent({
 
       this.loading = true;
       try {
-        // In a real implementation, you would call an API to delete the strategy
-        console.log(`Strategy ${this.strategyToDelete.id} deleted`);
-
-        // For now, we only support removal from the local array
-        // In the future, you would implement:
-        // await courseDB.deleteNavigationStrategy(this.strategyToDelete.id);
-
+        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;

packages/platform-ui/src/components/Edit/NavigationStrategy/NavigationStrategyList.vue

@@ -4,16 +4,14 @@
       <v-list-item
         v-for="strategy in strategies"
         :key="strategy.id"
-        :class="{ 'active-strategy': strategy.id === activeStrategyId }"
         lines="three"
       >
         <template #prepend>
-          <v-icon :color="strategy.id === activeStrategyId ? 'primary' : ''"> mdi-navigation </v-icon>
+          <v-icon> mdi-navigation </v-icon>
         </template>
 
         <v-list-item-title class="text-h6">
           {{ strategy.name }}
-          <v-chip v-if="strategy.id === activeStrategyId" color="primary" size="small" class="ml-2"> Active </v-chip>
         </v-list-item-title>
 
         <v-list-item-subtitle>{{ strategy.description }}</v-list-item-subtitle>
@@ -25,7 +23,7 @@
 
         <template #append>
           <div class="d-flex">
-            <v-btn icon size="small" title="Edit Strategy" class="mr-1" @click="$emit('edit', strategy)">
+            <v-btn icon size="small" title="Edit Strategy (coming soon)" class="mr-1" disabled>
               <v-icon>mdi-pencil</v-icon>
             </v-btn>
 
@@ -34,23 +32,10 @@
               size="small"
               title="Delete Strategy"
               class="mr-1"
-              :disabled="strategy.id === activeStrategyId"
               @click="$emit('delete', strategy)"
             >
               <v-icon>mdi-delete</v-icon>
             </v-btn>
-
-            <v-btn
-              icon
-              size="small"
-              title="Set as Active Strategy"
-              class="mr-1"
-              :disabled="strategy.id === activeStrategyId"
-              color="success"
-              @click="$emit('activate', strategy.id)"
-            >
-              <v-icon>mdi-check-circle</v-icon>
-            </v-btn>
           </div>
         </template>
       </v-list-item>
@@ -70,13 +55,9 @@ export default defineComponent({
       type: Array as PropType<ContentNavigationStrategyData[]>,
       required: true,
     },
-    activeStrategyId: {
-      type: String,
-      required: true,
-    },
   },
 
-  emits: ['edit', 'delete', 'activate'],
+  emits: ['edit', 'delete'],
 
   methods: {
     getDisplayConfig(strategy: ContentNavigationStrategyData): string {
@@ -102,9 +83,7 @@ export default defineComponent({
   margin: 16px 0;
 }
 
-.active-strategy {
-  background-color: rgba(0, 0, 0, 0.05);
-}
+
 
 .strategy-details {
   font-size: 0.9em;