feat: Disallow root navigation node deletion - MEED-7133 - Meeds-io/m…

…eeds#2335 (#213)
Meeds-io · Sep 6, 2024 · fd251b1 · fd251b1
1 parent 375eb29
commit fd251b1
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 59 deletions.
diff --git a/layout-webapp/src/main/resources/locale/portlet/SiteNavigation_en.properties b/layout-webapp/src/main/resources/locale/portlet/SiteNavigation_en.properties
@@ -115,3 +115,4 @@ siteNavigation.label.nodeType.group.caption=Choose this option if you want the n
 siteNavigation.label.nodeType.pageOrLink.caption=Choose this option if you want the node to be linked with a new page, an existing page or a web link
 siteNavigation.errorCreatingNode=An unkown error occurred while saving item
 siteNavigation.errorUpdatingNode=An unkown error occurred while saving item
+layout.rootNodeCantBeDeleted=This cannot be deleted. Disable it if needed.
diff --git a/.../src/main/webapp/vue-app/common-layout-components/components/site-navigation/NodeItem.vue b/.../src/main/webapp/vue-app/common-layout-components/components/site-navigation/NodeItem.vue
@@ -69,10 +69,11 @@
             </v-col>
             <v-col
               cols="2"
-              class="my-0 py-0">
+              class="mb-1 mt-0 py-0">
               <site-navigation-node-item-menu
                 :navigation-node="navigationNode"
                 :hover="hover"
+                :can-delete="canDelete"
                 :can-move-up="canMoveUp"
                 :can-move-down="canMoveDown"
                 :node-to-paste="nodeToPaste"
@@ -126,14 +127,15 @@
     </tr>
     <template v-if="displayChildren && !hideChildren">
       <site-navigation-node-item
-        v-for="child in navigationNode.children"
+        v-for="(child, index) in navigationNode.children"
         :key="child.id"
         :navigation-node="child"
-        :can-move-up="canMoveUpChildNode(child)"
-        :can-move-down="canMoveDownChildNode(child)"
+        :can-move-up="index > 0"
+        :can-move-down="index < (navigationNode.children.length - 1)"
         :cols="cols + 1"
         :hide-children="hideChildren"
-        :expanded="expanded" />
+        :expanded="expanded"
+        can-delete />
     </template>
   </div>
 </template>
@@ -145,6 +147,10 @@ export default {
       type: Object,
       default: null,
     },
+    rootNodeId: {
+      type: String,
+      default: null,
+    },
     canMoveUp: {
       type: Boolean,
       default: () => false,
@@ -197,6 +203,9 @@ export default {
     navigationNodeType() {
       return !this.navigationNode.pageKey && 'group' || this.navigationNode.pageLink && 'link' ||  this.navigationNode.pageKey && 'page';
     },
+    canDelete() {
+      return Number(this.navigationNode.id) !== Number(this.rootNodeId);
+    },
     visibilityIcon() {
       switch (this.navigationNode?.visibility) {
       case 'TEMPORAL':
@@ -251,12 +260,6 @@ export default {
     });
   },
   methods: {
-    canMoveUpChildNode(navigationNode) {
-      return this.navigationNode.children.indexOf(navigationNode) > 0;
-    },
-    canMoveDownChildNode(navigationNode) {
-      return this.navigationNode.children.indexOf(navigationNode) < this.navigationNode.children.length - 1;
-    },
     moveUpChildNode(navigationNodeId) {
       if (this.navigationNode.children.length) {
         const index = this.navigationNode?.children?.findIndex?.(navigationNode => navigationNode.id === navigationNodeId);

diff --git a/.../main/webapp/vue-app/common-layout-components/components/site-navigation/NodeItemMenu.vue b/.../main/webapp/vue-app/common-layout-components/components/site-navigation/NodeItemMenu.vue
@@ -35,7 +35,7 @@
     </template>
     <v-list class="pa-0" dense>
       <v-list-item
-        class="subtitle-2"
+        class="text-body menu-text-color"
         @click="$root.$emit('open-site-navigation-add-node-drawer', navigationNode)">
         <v-list-item-icon class="me-1">
           <v-icon
@@ -45,14 +45,12 @@
           </v-icon>
         </v-list-item-icon>
         <v-list-item-title
-          class="subtitle-2">
+          class="text-body menu-text-color">
           <span class="ps-1">{{ $t('siteNavigation.drawer.addNode.title') }}</span>
         </v-list-item-title>
       </v-list-item>
       <v-divider />
-      <v-list-item
-        class="subtitle-2"
-        @click="copyNodeLink">
+      <v-list-item @click="copyNodeLink">
         <v-list-item-icon class="me-1">
           <v-icon
             size="16"
@@ -61,13 +59,12 @@
           </v-icon>
         </v-list-item-icon>
         <v-list-item-title
-          class="subtitle-2">
+          class="text-body menu-text-color">
           <span class="ps-1">{{ $t('siteNavigation.label.copyLink') }}</span>
         </v-list-item-title>
       </v-list-item>
       <v-list-item
         v-if="canEditPageLayout"
-        class="subtitle-2" 
         @click="editLayout">
         <v-list-item-icon class="me-1">
           <v-icon
@@ -76,13 +73,11 @@
             fas fa-table
           </v-icon>
         </v-list-item-icon>
-        <v-list-item-title
-          class="subtitle-2">
+        <v-list-item-title class="text-body menu-text-color">
           <span class="ps-1">{{ $t('siteNavigation.label.editLayout') }}</span>
         </v-list-item-title>
       </v-list-item>
       <v-list-item
-        class="subtitle-2"
         @click="$root.$emit('open-site-navigation-edit-node-drawer', navigationNode)">
         <v-list-item-icon class="me-1">
           <v-icon
@@ -91,14 +86,12 @@
             fas fa-edit
           </v-icon>
         </v-list-item-icon>
-        <v-list-item-title
-          class="subtitle-2">
+        <v-list-item-title class="text-body menu-text-color">
           <span class="ps-1">{{ $t('siteNavigation.drawer.editNode.title') }}</span>
         </v-list-item-title>
       </v-list-item>
       <v-divider />
       <v-list-item
-        class="subtitle-2"
         @click="cutNode">
         <v-list-item-icon class="me-1">
           <v-icon
@@ -107,13 +100,11 @@
             fas fa-cut
           </v-icon>
         </v-list-item-icon>
-        <v-list-item-title
-          class="subtitle-2">
+        <v-list-item-title class="text-body menu-text-color">
           <span class="ps-1">{{ $t('siteNavigation.label.cutNode') }}</span>
         </v-list-item-title>
       </v-list-item>
       <v-list-item
-        class="subtitle-2"
         @click="copyNode">
         <v-list-item-icon class="me-1">
           <v-icon
@@ -122,14 +113,12 @@
             fas fa-copy
           </v-icon>
         </v-list-item-icon>
-        <v-list-item-title
-          class="subtitle-2">
+        <v-list-item-title class="text-body menu-text-color">
           <span class="ps-1">{{ $t('siteNavigation.label.copyNode') }}</span>
         </v-list-item-title>
       </v-list-item>
       <v-list-item
         v-if="pasteMode"
-        class="subtitle-2"
         @click="pasteNode">
         <v-list-item-icon class="me-1">
           <v-icon
@@ -138,14 +127,12 @@
             fas fa-paste
           </v-icon>
         </v-list-item-icon>
-        <v-list-item-title
-          class="subtitle-2">
+        <v-list-item-title class="text-body menu-text-color">
           <span class="ps-1">{{ $t('siteNavigation.label.pasteNode') }}</span>
         </v-list-item-title>
       </v-list-item>
       <v-list-item
         v-if="canMoveUp"
-        class="subtitle-2"
         @click="moveUpNode()">
         <v-list-item-icon class="me-1">
           <v-icon
@@ -154,13 +141,11 @@
             mdi-mouse-move-up
           </v-icon>
         </v-list-item-icon>
-        <v-list-item-title
-          class="subtitle-2">
+        <v-list-item-title class="text-body menu-text-color">
           <span class="ps-1">{{ $t('siteNavigation.label.moveUp') }}</span>
         </v-list-item-title>
       </v-list-item>
       <v-list-item
-        class="subtitle-2"
         v-if="canMoveDown"
         @click="moveDownNode()">
         <v-list-item-icon class="me-1">
@@ -170,13 +155,11 @@
             mdi-mouse-move-down
           </v-icon>
         </v-list-item-icon>
-        <v-list-item-title
-          class="subtitle-2">
+        <v-list-item-title class="text-body menu-text-color">
           <span class="ps-1">{{ $t('siteNavigation.label.moveDown') }}</span>
         </v-list-item-title>
       </v-list-item>
       <v-list-item
-        class="subtitle-2"
         v-if="canEditPage"
         @click="openManagePermissionsDrawer">
         <v-list-item-icon class="me-1">
@@ -186,28 +169,38 @@
             fas fa-shield-alt
           </v-icon>
         </v-list-item-icon>
-        <v-list-item-title
-          class="subtitle-2">
+        <v-list-item-title class="text-body menu-text-color">
           <span class="ps-1">{{ $t('siteNavigation.label.manageAccess') }}</span>
         </v-list-item-title>
       </v-list-item>
       <v-divider />
-      <v-list-item
-        class="subtitle-2"
-        @click="deleteNode()">
-        <v-list-item-icon class="me-1">
-          <v-icon
-            width="50"
-            size="16"
-            class="pe-1 error-color">
-            fas fa-trash
-          </v-icon>
-        </v-list-item-icon>
-        <v-list-item-title
-          class="subtitle-2">
-          <span class="ps-1 error-color">{{ $t('siteNavigation.label.delete') }}</span>
-        </v-list-item-title>
-      </v-list-item>
+      <v-tooltip :disabled="canDelete" top>
+        <template #activator="{on, attrs}">
+          <div
+            v-bind="attrs"
+            v-on="on">
+            <v-list-item
+              :disabled="!canDelete"
+              v-on="canDelete && {
+                click: deleteNode,
+              }">
+              <v-list-item-icon class="me-1">
+                <v-icon
+                  :class="canDelete && 'error-color' || 'text--disabled'"
+                  width="50"
+                  size="16"
+                  class="pe-1">
+                  fas fa-trash
+                </v-icon>
+              </v-list-item-icon>
+              <v-list-item-title class="text-body ps-1">
+                <span :class="canDelete && 'error-color' || 'text--disabled'">{{ $t('siteNavigation.label.delete') }}</span>
+              </v-list-item-title>
+            </v-list-item>
+          </div>
+        </template>
+        <span>{{ $t('layout.rootNodeCantBeDeleted') }}</span>
+      </v-tooltip>
       <v-divider />
     </v-list>
   </v-menu>
@@ -224,6 +217,10 @@ export default {
       type: Object,
       default: null,
     },
+    canDelete: {
+      type: Boolean,
+      default: false,
+    },
     canMoveUp: {
       type: Boolean,
       default: () => false,
@@ -239,7 +236,7 @@ export default {
     pasteMode: {
       type: String,
       default: null,
-    }
+    },
   },
   data: () => ({
     displayActionMenu: false,

diff --git a/...src/main/webapp/vue-app/common-layout-components/components/site-navigation/NodesList.vue b/...src/main/webapp/vue-app/common-layout-components/components/site-navigation/NodesList.vue
@@ -31,7 +31,8 @@
             :can-move-up="canMoveUpNode(props.item)"
             :can-move-down="canMoveDownNode(props.item)"
             :hide-children="hideChildren"
-            :expanded="expanded" />
+            :expanded="expanded"
+            :root-node-id="rootNodeId" />
         </template>
       </v-data-table>
     </template>
@@ -59,6 +60,9 @@ export default {
     },
   },
   computed: {
+    rootNodeId() {
+      return this.navigationNodes?.length === 1 && this.navigationNodes[0].id;
+    },
     headers() {
       return [
         {