From 2be20c5ee285a95abc45cce8d683f32dafc9e216 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 24 Sep 2022 01:12:04 +0530
Subject: [PATCH] feat(gui): add appstore in navbar menu

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components.d.ts               |  2 +
 .../components/dashboard/settings/Modal.vue   | 50 ++++++++++---------
 .../composables/useUIPermission/index.ts      |  9 ++--
 packages/nc-gui/layouts/base.vue              | 15 ++++++
 packages/nc-gui/pages/index/apps.vue          |  4 +-
 5 files changed, 49 insertions(+), 31 deletions(-)

diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
index 18d80347a9..e9ea1978af 100644
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@@ -190,6 +190,8 @@ declare module '@vue/runtime-core' {
     MdiSort: typeof import('~icons/mdi/sort')['default']
     MdiStar: typeof import('~icons/mdi/star')['default']
     MdiStarOutline: typeof import('~icons/mdi/star-outline')['default']
+    MdiStorefrontOutline: typeof import('~icons/mdi/storefront-outline')['default']
+    MdiStorefrontSutline: typeof import('~icons/mdi/storefront-sutline')['default']
     MdiTable: typeof import('~icons/mdi/table')['default']
     MdiTableArrowRight: typeof import('~icons/mdi/table-arrow-right')['default']
     MdiTableLarge: typeof import('~icons/mdi/table-large')['default']
diff --git a/packages/nc-gui/components/dashboard/settings/Modal.vue b/packages/nc-gui/components/dashboard/settings/Modal.vue
index ac42ee69c6..6b775a87bb 100644
--- a/packages/nc-gui/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui/components/dashboard/settings/Modal.vue
@@ -56,40 +56,42 @@ const tabsInfo: TabGroup = {
     subTabs: {
       ...(isUIAllowed('userMgmtTab')
         ? {
-          usersManagement: {
-            // Users Management
-            title: t('title.userMgmt'),
-            body: UserManagement,
-          },
-        }
+            usersManagement: {
+              // Users Management
+              title: t('title.userMgmt'),
+              body: UserManagement,
+            },
+          }
         : {}),
       ...(isUIAllowed('apiTokenTab')
         ? {
-          apiTokenManagement: {
-            // API Tokens Management
-            title: t('title.apiTokenMgmt'),
-            body: ApiTokenManagement,
-          },
-        }
+            apiTokenManagement: {
+              // API Tokens Management
+              title: t('title.apiTokenMgmt'),
+              body: ApiTokenManagement,
+            },
+          }
         : {}),
     },
     onClick: () => {
       $e('c:settings:team-auth')
     },
-  }, ...(isUIAllowed('appStore')
+  },
+  ...(isUIAllowed('appStore')
     ? {
-      appStore: {
-        // App Store
-        title: t('title.appStore'),
-        icon: StoreFrontOutline,
-        subTabs: {
-          new: {
-            title: 'Apps',
-            body: AppStore,
+        appStore: {
+          // App Store
+          title: t('title.appStore'),
+          icon: StoreFrontOutline,
+          subTabs: {
+            new: {
+              title: 'Apps',
+              body: AppStore,
+            },
+          },
+          onClick: () => {
+            $e('c:settings:appstore')
           },
-        },
-        onClick: () => {
-          $e('c:settings:appstore')
         },
       }
     : {}),
diff --git a/packages/nc-gui/composables/useUIPermission/index.ts b/packages/nc-gui/composables/useUIPermission/index.ts
index ee2bc2796f..e3fb3aba54 100644
--- a/packages/nc-gui/composables/useUIPermission/index.ts
+++ b/packages/nc-gui/composables/useUIPermission/index.ts
@@ -11,13 +11,12 @@ const hasPermission = (role: Role | ProjectRole, hasRole: boolean, permission: P
 
   if (isString(rolePermission) && rolePermission === '*') return true
 
-
   // todo: type correction
-  if('include' in rolePermission[permission as keyof typeof rolePermission]){
-    return rolePermission[permission as keyof typeof rolePermission].include[permission]
+  if ('include' in rolePermission) {
+    return rolePermission.include[permission]
   }
-  if('exclude' in rolePermission[permission as keyof typeof rolePermission]){
-    return !rolePermission[permission as keyof typeof rolePermission].exclude[permission]
+  if ('exclude' in rolePermission) {
+    return !rolePermission.exclude[permission]
   }
 
   return rolePermission[permission as keyof typeof rolePermission]
diff --git a/packages/nc-gui/layouts/base.vue b/packages/nc-gui/layouts/base.vue
index dab22ba952..715f128d16 100644
--- a/packages/nc-gui/layouts/base.vue
+++ b/packages/nc-gui/layouts/base.vue
@@ -13,6 +13,8 @@ const hasSider = ref(false)
 
 const sidebar = ref<HTMLDivElement>()
 
+const { isUIAllowed } = useUIPermission()
+
 const logout = () => {
   signOut()
   navigateTo('/signin')
@@ -87,6 +89,19 @@ hooks.hook('page:finish', () => {
                   </nuxt-link>
                 </a-menu-item>
 
+                <a-menu-divider class="!m-0" />
+                <a-menu-item v-if="isUIAllowed('appStore')" key="0" class="!rounded-t">
+                  <nuxt-link
+                    v-e="['c:settings:appstore', { page: true }]"
+                    class="nc-project-menu-item group !no-underline"
+                    to="/apps"
+                  >
+                    <MdiStorefrontOutline class="mt-1 group-hover:text-accent" />&nbsp;
+
+                    <span class="prose group-hover:text-primary">{{ $t('title.appStore') }}</span>
+                  </nuxt-link>
+                </a-menu-item>
+
                 <a-menu-divider class="!m-0" />
 
                 <a-menu-item key="1" class="!rounded-b group">
diff --git a/packages/nc-gui/pages/index/apps.vue b/packages/nc-gui/pages/index/apps.vue
index 286fdb93d2..169a67bfd5 100644
--- a/packages/nc-gui/pages/index/apps.vue
+++ b/packages/nc-gui/pages/index/apps.vue
@@ -9,8 +9,8 @@ definePageMeta({
 </script>
 
 <template>
-  <div class="p-4 h-full overflow-auto">
-    <h1>{{ $t('label.appStore') }}</h1>
+  <div class="p-10 h-full overflow-auto">
+    <h1 class="text-3xl text-center mb-11">{{ $t('title.appStore') }}</h1>
     <AppStore />
   </div>
 </template>