Merge pull request #5481 from christianbeeznest/ofaj-21605

Internal: Refactor link list display - refs BT#21605

assets/vue/components/links/LinkCategoryCard.vue

@@ -1,12 +1,12 @@
 <template>
   <BaseCard plain class="bg-white">
-    <template #header>
+    <template v-if="showHeader" #header>
       <div class="px-4 py-2 -mb-2 bg-gray-15">
         <slot name="header"/>
       </div>
     </template>
 
-    <hr class="-mt-2 mb-4 -mx-4">
+    <hr v-if="showHeader" class="-mt-2 mb-4 -mx-4">
 
     <div>
       <slot/>
@@ -19,4 +19,10 @@ import BaseCard from "../basecomponents/BaseCard.vue"
 import {useI18n} from "vue-i18n"
 
 const {t} = useI18n()
+defineProps({
+  showHeader: {
+    type: Boolean,
+    default: true,
+  },
+});
 </script>

assets/vue/views/links/LinksList.vue

@@ -28,7 +28,7 @@
       </div>
     </LinkCategoryCard>
 
-    <div v-if="!linksWithoutCategory && !categories">
+    <div v-if="!linksWithoutCategory.length && !categories.length">
       <!-- Render the image and create button -->
       <EmptyState
         :summary="t('Add your first link to this course')"
@@ -48,10 +48,10 @@
       v-if="!isLoading"
       class="flex flex-col gap-4"
     >
-      <!-- Render the list of links -->
+      <!-- Render the list of links without a category -->
-      <LinkCategoryCard v-if="linksWithoutCategory && linksWithoutCategory.length > 0">
+      <LinkCategoryCard v-if="linksWithoutCategory.length > 0" :showHeader="false">
         <template #header>
-          <h5>{{ t("General") }}</h5>
+          <h5>{{ t('General') }}</h5>
         </template>
 
         <ul>
@@ -74,9 +74,11 @@
         </ul>
       </LinkCategoryCard>
 
+      <!-- Render the list of categorized links -->
       <LinkCategoryCard
         v-for="category in categories"
         :key="category.info.id"
+        :showHeader="true"
       >
         <template #header>
           <div class="flex justify-between">
@@ -132,8 +134,8 @@
             />
           </li>
         </ul>
-        <p v-if="!category.links || category.links === 0">
+        <p v-if="!category.links || category.links.length === 0">
-          {{ t("There are no links in this category") }}
+          {{ t('There are no links in this category') }}
         </p>
       </LinkCategoryCard>
     </div>
@@ -152,7 +154,7 @@
       <div v-if="categoryToDelete">
         <p class="mb-2 font-semibold">{{ categoryToDelete.info.title }}</p>
         <p>
-          {{ t("With links") }}: {{ (categoryToDelete.links || []).map((l) => l.title).join(", ") }}
+          {{ t('With links') }}: {{ (categoryToDelete.links || []).map((l) => l.title).join(', ') }}
         </p>
       </div>
     </BaseDialogDelete>
@@ -187,7 +189,7 @@ const notifications = useNotification()
 const isCurrentTeacher = securityStore.isCurrentTeacher
 
 const linksWithoutCategory = ref([])
-const categories = ref({})
+const categories = ref([])
 
 const selectedLink = ref(null)
 const selectedCategory = ref(null)
@@ -206,11 +208,11 @@ const categoryToDelete = ref(null)
 
 const isLoading = ref(true)
 
-const linkValidationResults = ref({});
+const linkValidationResults = ref({})
 
 onMounted(() => {
   linksWithoutCategory.value = []
-  categories.value = {}
+  categories.value = []
   fetchLinks()
 })
 
@@ -243,11 +245,14 @@ async function deleteLink() {
 
 async function checkLink(id, url) {
   try {
-    const result = await linkService.checkLink(url, id);
+    const result = await linkService.checkLink(url, id)
-    linkValidationResults.value = { ...linkValidationResults.value, [id]: { isValid: result.isValid } };
+    linkValidationResults.value = { ...linkValidationResults.value, [id]: { isValid: result.isValid } }
   } catch (error) {
-    console.error("Error checking link:", error);
+    console.error("Error checking link:", error)
-    linkValidationResults.value = { ...linkValidationResults.value, [id]: { isValid: false, message: error.message || 'Link validation failed' } };
+    linkValidationResults.value = {
+      ...linkValidationResults.value,
+      [id]: { isValid: false, message: error.message || "Link validation failed" }
+    }
   }
 }
 
@@ -276,8 +281,7 @@ async function moveUp(id, position) {
     notifications.showSuccessNotification(t("Link moved up"))
     await fetchLinks()
   } catch (error) {
-    console.error("Error moving link up:", error)
+    notifications.showErrorNotification(t("Could not move link up"))
-    notifications.showErrorNotification(t("Could not moved link up"))
   }
 }
 
@@ -288,8 +292,7 @@ async function moveDown(id, position) {
     notifications.showSuccessNotification(t("Link moved down"))
     await fetchLinks()
   } catch (error) {
-    console.error("Error moving link down:", error)
+    notifications.showErrorNotification(t("Could not move link down"))
-    notifications.showErrorNotification(t("Could not moved link down"))
   }
 }