feat: Allow to change Site or Page icon - MEED-7838 - Meeds-io/MIPs#159…

… (#4200) Allow to select a specific icon when adding a site or a page.
Meeds-io · Nov 23, 2024 · f8d52e8 · f8d52e8
1 parent b9e31b8
commit f8d52e8
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 37 deletions.
diff --git a/component/core/src/main/java/io/meeds/social/navigation/plugin/PageSidebarPlugin.java b/component/core/src/main/java/io/meeds/social/navigation/plugin/PageSidebarPlugin.java
@@ -104,9 +104,6 @@ public static SidebarItem resolveProperties(NavigationService navigationService,
                                 Long.parseLong(nodeId),
                                 locale));
       item.setTarget(node.getState().getTarget());
-      if (node.getState() != null && node.getState().getIcon() != null) {
-        item.setIcon(node.getState().getIcon());
-      }
       SiteKey siteKey = node.getState().getSiteKey();
       PortalConfig site = layoutService.getPortalConfig(siteKey);
       if (site != null) {

diff --git a/component/core/src/main/java/io/meeds/social/navigation/plugin/SiteSidebarPlugin.java b/component/core/src/main/java/io/meeds/social/navigation/plugin/SiteSidebarPlugin.java
@@ -128,35 +128,29 @@ public SidebarItem resolveProperties(SidebarItem item, String username, Locale l
                                                                                            .get(SITE_TYPE_PROP_NAME),
                                                                                        item.getProperties()
                                                                                            .get(SITE_NAME_PROP_NAME)));
-    if (rootNode != null && rootNode.getSize() > 0) {
-      NodeContext<NodeContext<Object>> firstNode = rootNode.get(0);
-      if (firstNode.getData() != null
-          && firstNode.getData().getState() != null
-          && firstNode.getData().getState().getIcon() != null) {
-        item.setIcon(firstNode.getData().getState().getIcon());
-      }
-      if (StringUtils.equals(item.getProperties().get(SITE_EXPAND_PAGES_PROP_NAME), "true")) {
-        Collection<NodeContext<Object>> nodes = rootNode.getNodes();
-        item.setItems(new ArrayList<>());
-        nodes.forEach(node -> {
-          if (node.getData() != null
-              && node.getData().getState() != null
-              && isVisibilityEligible(node.getData().getState())) {
-            SidebarItem pageItem = new SidebarItem(SidebarItemType.PAGE);
-            pageItem.setProperties(Collections.singletonMap(NODE_ID_PROP_NAME, node.getData().getId()));
-            pageItem.setUrl(node.getData().getName());
-            PageSidebarPlugin.resolveProperties(navigationService,
-                                                layoutService,
-                                                translationService,
-                                                descriptionService,
-                                                resourceBundleManager,
-                                                localeConfigService,
-                                                pageItem,
-                                                locale);
-            item.getItems().add(pageItem);
-          }
-        });
-      }
+    if (rootNode != null
+        && rootNode.getSize() > 0
+        && StringUtils.equals(item.getProperties().get(SITE_EXPAND_PAGES_PROP_NAME), "true")) {
+      Collection<NodeContext<Object>> nodes = rootNode.getNodes();
+      item.setItems(new ArrayList<>());
+      nodes.forEach(node -> {
+        if (node.getData() != null
+            && node.getData().getState() != null
+            && isVisibilityEligible(node.getData().getState())) {
+          SidebarItem pageItem = new SidebarItem(SidebarItemType.PAGE);
+          pageItem.setProperties(Collections.singletonMap(NODE_ID_PROP_NAME, node.getData().getId()));
+          pageItem.setUrl(node.getData().getName());
+          PageSidebarPlugin.resolveProperties(navigationService,
+                                              layoutService,
+                                              translationService,
+                                              descriptionService,
+                                              resourceBundleManager,
+                                              localeConfigService,
+                                              pageItem,
+                                              locale);
+          item.getItems().add(pageItem);
+        }
+      });
     }
     return item;
   }

diff --git a/webapp/src/main/resources/locale/portlet/GeneralSettings_en.properties b/webapp/src/main/resources/locale/portlet/GeneralSettings_en.properties
@@ -239,7 +239,7 @@ generalSettings.sidebar.spacesNamesPlaceHolder=Menu item name
 generalSettings.sidebar.spacesNamesDrawerTitle=Add Menu item translations
 generalSettings.sidebar.spacesSelectLimit=Select number of items to list
 generalSettings.sidebar.linkName=Name
-generalSettings.sidebar.linkDescription=Description
+generalSettings.sidebar.linkDescription=Tooltip
 generalSettings.sidebar.linkLabel=Link
 generalSettings.sidebar.linkIcon=Update the icon
 generalSettings.sidebar.linkTarget=Opens in same tab

diff --git a/...-settings/components/navigation/sidebar/drawer/NavigationSettingsAddSidebarSiteDrawer.vue b/...-settings/components/navigation/sidebar/drawer/NavigationSettingsAddSidebarSiteDrawer.vue
@@ -95,6 +95,10 @@
             outlined
             dense />
         </template>
+        <font-icon-input
+          v-model="icon"
+          :label="$t('generalSettings.sidebar.linkIcon')"
+          class="mt-4 mb-2" />
       </div>
     </template>
     <template #footer>
@@ -127,7 +131,9 @@ export default {
     settings: null,
     option: null,
     item: null,
+    icon: null,
     siteId: null,
+    nodeId: null,
     sites: null,
     isNew: true,
     excludeSpaceSites: true,
@@ -155,7 +161,13 @@ export default {
       return this.site?.siteType;
     },
     siteIcon() {
-      return this.site?.siteNavigations && this.getFirstIcon(this.site.siteNavigations) || null;
+      return !this.loading
+          && this.site?.siteNavigations
+          && this.getFirstIcon(this.site.siteNavigations)
+          || null;
+    },
+    pageIcon() {
+      return this.nodeId && this.page?.icon || null;
     },
     modified() {
       return this.isNew
@@ -183,7 +195,7 @@ export default {
       }
     },
     page() {
-      return this.pages?.find?.(p => p.id === this.nodeId);
+      return this.pages?.find?.(p => Number(p.id) === Number(this.nodeId));
     },
   },
   watch: {
@@ -205,6 +217,16 @@ export default {
         this.retrieveSite();
       }
     },
+    siteIcon() {
+      if (this.drawer && this.isSiteOption) {
+        this.icon = this.siteIcon || this.icon || 'fa-project-diagram';
+      }
+    },
+    pageIcon() {
+      if (this.drawer && this.isPageOption) {
+        this.icon = this.pageIcon || this.icon || 'fa-project-diagram';
+      }
+    },
   },
   created() {
     this.$root.$on('sidebar-item-add-site', this.open);
@@ -228,6 +250,7 @@ export default {
         properties: {},
       };
       this.isNew = !item;
+      this.icon = this.item.icon || 'fa-project-diagram';
       this.initialized = false;
       if (!this.item.properties) {
         this.item.properties = {};
@@ -264,11 +287,10 @@ export default {
       this.saving = true;
       try {
         await this.retrieveSite();
-        const siteIcon = this.site?.siteNavigations && this.getFirstIcon(this.site.siteNavigations) || null;
         this.item.name = this.isPageOption ? this.page.label : this.site.displayName;
         this.item.url = this.isPageOption ? `/portal/${this.siteName}/${this.page.uri}` : `/portal/${this.siteName}`;
         this.item.target = this.isPageOption ? this.page.target : null;
-        this.item.icon = this.isPageOption ? this.page.icon : siteIcon;
+        this.item.icon = this.icon;
         this.item.type = this.isPageOption ? 'PAGE' : 'SITE';
         this.item.properties = this.isPageOption ? {
           siteId: this.siteId,