feat: Add Sidebar Item Actions - Meeds-io/MIPs#159

Meeds-io · Nov 21, 2024 · 24888b0 · 24888b0
1 parent 01e48b0
commit 24888b0
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 9 deletions.
diff --git a/webapp/src/main/resources/locale/portlet/GeneralSettings_en.properties b/webapp/src/main/resources/locale/portlet/GeneralSettings_en.properties
@@ -206,3 +206,5 @@ generalSettings.header.sidebarMove=Move
 generalSettings.header.sidebarActions=Action
 generalSettings.sidebarSeparator=Separator
 generalSettings.navigationSettingsUpdatedSuccessfully=Navigation Setttings updated successfully
+generalSettings.editSideBarItem=Edit item
+generalSettings.removeSideBarItem=Remove item
diff --git a/...pp/src/main/webapp/vue-apps/general-settings/components/navigation/NavigationSettings.vue b/...pp/src/main/webapp/vue-apps/general-settings/components/navigation/NavigationSettings.vue
@@ -28,7 +28,7 @@
     <portal-general-settings-navigation-settings-sidebar
       :settings="navigationSettings"
       @changed="navigationSettings.sidebar = $event" />
-    <div class="d-flex justify-end mt-4">
+    <div class="d-flex justify-end mt-8">
       <v-btn
         :aria-label="$t('generalSettings.cancel')"
         :disabled="loading"
@@ -99,6 +99,7 @@ export default {
         this.$navigationConfigurationService.saveConfiguration(this.navigationSettings);
       } finally {
         this.$root.$emit('alert-message', this.$t('generalSettings.navigationSettingsUpdatedSuccessfully'), 'success');
+        this.originalNavigationSettings = JSON.parse(JSON.stringify(this.navigationSettings));
         window.setTimeout(() => this.loading = false, 200);
       }
     },

diff --git a/...app/vue-apps/general-settings/components/navigation/sidebar/NavigationSettingsSidebar.vue b/...app/vue-apps/general-settings/components/navigation/sidebar/NavigationSettingsSidebar.vue
@@ -113,14 +113,22 @@
             </v-card>
           </div>
         </template>
-        <template slot="item.enabled" slot-scope="{item}">
-          <div class="d-flex justify-center">
-            <v-switch v-model="item.enabled" class="ma-auto" />
-          </div>
-        </template>
-        <template slot="item.mobile" slot-scope="{item}">
-          <div class="d-flex justify-center">
-            <v-switch v-model="item.mobile" class="ma-auto" />
+        <template slot="item.action" slot-scope="{item}">
+          <div class="d-flex justify-end">
+            <v-btn
+              v-if="item.type !== 'SEPARATOR'"
+              :title="$t('generalSettings.editSideBarItem')"
+              class="me-2"
+              icon>
+              <v-icon size="20">fa-edit</v-icon>
+            </v-btn>
+            <v-btn
+              :title="$t('generalSettings.removeSideBarItem')"
+              color="error"
+              icon
+              @click="remove(item)">
+              <v-icon size="20">fa-trash</v-icon>
+            </v-btn>
           </div>
         </template>
       </v-data-table>
@@ -195,6 +203,9 @@ export default {
     changeAllowedMode(mode, enable) {
       this.menuSettings.allowedModes = this.allModes.filter(m => (enable && (this.allowedModes.indexOf(m) >= 0 || m === mode)) || (!enable && this.allowedModes.indexOf(m) >= 0 && m !== mode));
     },
+    remove(item) {
+      this.menuSettings.items.splice(this.menuSettings.items.indexOf(item), 1);
+    },
     moveUp(index) {
       const item = this.menuSettings.items[index];
       this.menuSettings.items.splice(index, 1);