feat: add placeholder pages

ICIJ · Oct 3, 2024 · 3e95b29 · 3e95b29
1 parent 7de3929
commit 3e95b29
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 5 deletions.
diff --git a/src/lang/en.json b/src/lang/en.json
@@ -9,7 +9,8 @@
     "reset": "Reset",
     "confirmLabel": "Are you sure?",
     "emptyTextTable": "There are no records to show",
-    "you": "You"
+    "you": "You",
+    "building": "Our team is still crafting something awesome for this page. Stay tuned!"
   },
   "addonCard": {
     "version": "Version: {v}",

diff --git a/src/router/index.js b/src/router/index.js
@@ -299,18 +299,55 @@ export const routes = [
                       }
                     }
                   },
+                  {
+                    name: 'project.view.overview.paths',
+                    path: '',
+                    props: true,
+                    component: () => import('@/views/Project/ProjectView/ProjectViewOverview/ProjectViewOverviewPaths'),
+                    meta: {
+                      icon: 'tree-structure',
+                      title() {
+                        return 'Paths'
+                      }
+                    }
+                  },
+                  {
+                    name: 'project.view.overview.graph',
+                    path: '',
+                    props: true,
+                    component: () => import('@/views/Project/ProjectView/ProjectViewOverview/ProjectViewOverviewGraph'),
+                    meta: {
+                      icon: 'polygon',
+                      title() {
+                        return 'Graph'
+                      }
+                    }
+                  },
                   {
                     name: 'project.view.overview.details',
                     path: '',
                     props: true,
                     component: () =>
                       import('@/views/Project/ProjectView/ProjectViewOverview/ProjectViewOverviewDetails'),
                     meta: {
-                      icon: 'chart-bar',
+                      icon: 'circles-three-plus',
                       title() {
                         return 'Details'
                       }
                     }
+                  },
+                  {
+                    name: 'project.view.overview.history',
+                    path: '',
+                    props: true,
+                    component: () =>
+                      import('@/views/Project/ProjectView/ProjectViewOverview/ProjectViewOverviewHistory'),
+                    meta: {
+                      icon: 'clock-counter-clockwise',
+                      title() {
+                        return 'History'
+                      }
+                    }
                   }
                 ]
               },

diff --git a/src/views/Project/ProjectView/ProjectViewOverview/ProjectViewOverview.vue b/src/views/Project/ProjectView/ProjectViewOverview/ProjectViewOverview.vue
@@ -77,16 +77,16 @@ watch(
           <tab-group-navigation-entry icon="chart-bar" :to="{ name: 'project.view.overview.insights' }">
             {{ $t('projectViewOverview.nav.insights') }}
           </tab-group-navigation-entry>
-          <tab-group-navigation-entry icon="tree-structure" disabled>
+          <tab-group-navigation-entry icon="tree-structure" :to="{ name: 'project.view.overview.paths' }">
             {{ $t('projectViewOverview.nav.paths') }}
           </tab-group-navigation-entry>
-          <tab-group-navigation-entry icon="polygon" disabled>
+          <tab-group-navigation-entry icon="polygon" :to="{ name: 'project.view.overview.graph' }">
             {{ $t('projectViewOverview.nav.graph') }}
           </tab-group-navigation-entry>
           <tab-group-navigation-entry icon="circles-three-plus" :to="{ name: 'project.view.overview.details' }">
             {{ $t('projectViewOverview.nav.details') }}
           </tab-group-navigation-entry>
-          <tab-group-navigation-entry icon="clock-counter-clockwise" disabled>
+          <tab-group-navigation-entry icon="clock-counter-clockwise" :to="{ name: 'project.view.overview.history' }">
             {{ $t('projectViewOverview.nav.history') }}
           </tab-group-navigation-entry>
         </tab-group-navigation>

diff --git a/src/views/Project/ProjectView/ProjectViewOverview/ProjectViewOverviewGraph.vue b/src/views/Project/ProjectView/ProjectViewOverview/ProjectViewOverviewGraph.vue
@@ -0,0 +1,17 @@
+<script setup>
+import EmptyState from '@/components/EmptyState/EmptyState'
+import appBuilding from '@/assets/images/illustrations/app-building.svg'
+import appBuildingDark from '@/assets/images/illustrations/app-building-dark.svg'
+
+defineProps({
+  name: {
+    type: String
+  }
+})
+</script>
+
+<template>
+  <div class="project-view-overview-graph">
+    <empty-state :label="$t('global.building')" :image="appBuilding" :image-dark="appBuildingDark" />
+  </div>
+</template>
diff --git a/src/views/Project/ProjectView/ProjectViewOverview/ProjectViewOverviewHistory.vue b/src/views/Project/ProjectView/ProjectViewOverview/ProjectViewOverviewHistory.vue
@@ -0,0 +1,17 @@
+<script setup>
+import EmptyState from '@/components/EmptyState/EmptyState'
+import appBuilding from '@/assets/images/illustrations/app-building.svg'
+import appBuildingDark from '@/assets/images/illustrations/app-building-dark.svg'
+
+defineProps({
+  name: {
+    type: String
+  }
+})
+</script>
+
+<template>
+  <div class="project-view-overview-history">
+    <empty-state :label="$t('global.building')" :image="appBuilding" :image-dark="appBuildingDark" />
+  </div>
+</template>
diff --git a/src/views/Project/ProjectView/ProjectViewOverview/ProjectViewOverviewPaths.vue b/src/views/Project/ProjectView/ProjectViewOverview/ProjectViewOverviewPaths.vue
@@ -0,0 +1,17 @@
+<script setup>
+import EmptyState from '@/components/EmptyState/EmptyState'
+import appBuilding from '@/assets/images/illustrations/app-building.svg'
+import appBuildingDark from '@/assets/images/illustrations/app-building-dark.svg'
+
+defineProps({
+  name: {
+    type: String
+  }
+})
+</script>
+
+<template>
+  <div class="project-view-overview-paths">
+    <empty-state :label="$t('global.building')" :image="appBuilding" :image-dark="appBuildingDark" />
+  </div>
+</template>