feat: replace create button with reusable component

usnistgov · Jan 7, 2025 · f3a3ba7 · f3a3ba7
1 parent 1c9c2cb
commit f3a3ba7
Show file tree

Hide file tree

Showing 17 changed files with 167 additions and 174 deletions.
diff --git a/src/frontend/src/App.vue b/src/frontend/src/App.vue
@@ -2,6 +2,7 @@
   <NavBar class="fixed-top" style="z-index: 999;" />
   <main :class="isMobile ? 'q-ma-md' : 'q-ma-xl'" style="margin-top: 75px;">
     <RouterView />
+    <CreateButton v-if="addCreateButton" />
   </main>
   <!-- <AccessibilityTest /> -->
 </template>
@@ -12,6 +13,7 @@
   import AccessibilityTest from '@/components/AccessibilityTest.vue'
   import { useQuasar } from 'quasar'
   import { computed, provide } from 'vue'
+  import CreateButton from './components/CreateButton.vue'
   
   const route = useRoute()
 
@@ -28,4 +30,24 @@
   provide('isMobile', isMobile)
   provide('isMedium', isMedium)
 
+  const includeCreateButton = [
+    'home',
+    'experiments',
+    'experimentJobs',
+    'entrypoints',
+    'plugins',
+    'pluginFiles',
+    'queues',
+    'jobs',
+    'pluginParams',
+    'tags',
+    'models',
+    'artifacts'
+  ]
+
+  const addCreateButton = computed(() => {
+    return typeof route.name === 'string' && includeCreateButton.includes(route.name)
+  })
+
+
 </script>
diff --git a/src/frontend/src/components/CreateButton.vue b/src/frontend/src/components/CreateButton.vue
@@ -15,8 +15,8 @@
         <q-item
           v-for="resource in resources"
           clickable 
-          :to="resource.url"
-          @click="store.triggerPopup = true"
+          :active="false"
+          @click="handleClick(resource)"
         >
           <q-item-section class="text-capitalize">
             Create {{ resource.name }}
@@ -29,23 +29,74 @@
 
 <script setup>
 import { useLoginStore } from '@/stores/LoginStore.ts'
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const route = useRoute()
+const router = useRouter()
 
 const store = useLoginStore()
 
-const resources = [
-  {
-    name: 'experiment',
-    url: '/experiments/new'
-  },
-  {
-    name: 'entrypoint',
-    url: '/entrypoints/new'
-  },
-  {
-    name: 'plugin',
-    url: '/plugins',
-    popup: true
-  },
-]
+const defaultResources = [
+    {
+      name: 'experiment',
+      url: '/experiments/new'
+    },
+    {
+      name: 'entrypoint',
+      url: '/entrypoints/new'
+    },
+    {
+      name: 'plugin',
+      url: '/plugins',
+      popup: true
+    },
+    {
+      name: 'queue',
+      url: '/queues',
+      popup: true
+    },
+    {
+      name: 'job',
+      url: '/jobs/new'
+    },
+    {
+      name: 'plugin param',
+      url: '/pluginParams',
+      popup: true
+    },
+    {
+      name: 'tag',
+      url: '/tags',
+      popup: true
+    },
+    {
+      name: 'model',
+      url: '/models',
+      popup: true
+    },
+  ]
+
+const resources = computed(() => {
+  if(route.name === 'pluginFiles') {
+    const modifiedResources = [...defaultResources]
+    modifiedResources.splice(3, 0, {
+      name: 'plugin file',
+      url: `/plugins/${route.params.id}/files/new`,
+    })
+    return modifiedResources
+  }
+  return defaultResources
+})
+
+function handleClick(resource) {
+  if(resource.url) {
+    router.push(resource.url).then(() => {
+      if(resource.popup) {
+        store.triggerPopup = true
+      }
+    })
+  }
+}
 
 </script>
diff --git a/src/frontend/src/router/index.ts b/src/frontend/src/router/index.ts
@@ -6,43 +6,51 @@ const router = createRouter({
   routes: [
     {
       path: '/',
-      component: HomeView
+      component: HomeView,
+      name: 'home'
     },
     {
       path: '/entrypoints',
-      component: () => import('../views/EntryPointsView.vue')
+      component: () => import('../views/EntryPointsView.vue'),
+      name: 'entrypoints'
     },
     {
       path: '/entrypoints/:id',
-      component: () => import('../views/CreateEntryPoint.vue')
+      component: () => import('../views/CreateEntryPoint.vue'),
     },
     {
       path: '/plugins',
-      component: () => import('../views/PluginsView.vue')
+      component: () => import('../views/PluginsView.vue'),
+      name: 'plugins'
     },
     {
       path: '/plugins/:id/files',
-      component: () => import('../views/PluginFiles.vue')
+      component: () => import('../views/PluginFiles.vue'),
+      name: 'pluginFiles'
     },
     {
       path: '/plugins/:id/files/:fileId',
       component: () => import('../views/CreatePluginFile.vue')
     },
     {
       path: '/queues',
-      component: () => import('../views/QueuesView.vue')
+      component: () => import('../views/QueuesView.vue'),
+      name: 'queues'
     },
     {
       path: '/experiments',
-      component: () => import('../views/ExperimentsView.vue')
+      component: () => import('../views/ExperimentsView.vue'),
+      name: 'experiments'
     },
     {
       path: '/jobs',
-      component: () => import('../views/AllJobsView.vue')
+      component: () => import('../views/AllJobsView.vue'),
+      name: 'jobs'
     },
     {
       path: '/experiments/:id/jobs',
-      component: () => import('../views/JobsView.vue')
+      component: () => import('../views/JobsView.vue'),
+      name: 'experimentJobs'
     },
     {
       path: '/experiments/:id/jobs/:jobId',
@@ -66,19 +74,23 @@ const router = createRouter({
     },
     {
       path: '/tags',
-      component: () => import('../views/TagsView.vue')
+      component: () => import('../views/TagsView.vue'),
+      name: 'tags'
     },
     {
       path: '/pluginParams',
-      component: () => import('../views/PluginParamsView.vue')
+      component: () => import('../views/PluginParamsView.vue'),
+      name: 'pluginParams'
     },
     {
       path: '/models',
-      component: () => import('../views/ModelsView.vue')
+      component: () => import('../views/ModelsView.vue'),
+      name: 'models'
     },
     {
       path: '/artifacts',
-      component: () => import('../views/ArtifactsView.vue')
+      component: () => import('../views/ArtifactsView.vue'),
+      name: 'artifacts'
     },
     {
       path: '/login',

diff --git a/src/frontend/src/views/ArtifactsView.vue b/src/frontend/src/views/ArtifactsView.vue
@@ -26,19 +26,7 @@
       /> -->
     </template>
   </TableComponent>
-  <!-- <q-btn 
-    class="fixedButton"
-    round
-    color="primary"
-    icon="add"
-    size="lg"
-    @click="showAddEditDialog = true"
-  >
-    <span class="sr-only">Register a new Artifact</span>
-    <q-tooltip>
-      Register a new Artifact
-    </q-tooltip>
-  </q-btn> -->
+
   <ArtifactsDialog 
     v-model="showAddEditDialog"
     @addArtifact="addArtifact"

diff --git a/src/frontend/src/views/CreateExperiment.vue b/src/frontend/src/views/CreateExperiment.vue
@@ -87,11 +87,10 @@
 
   <div :class="`${isMobile ? '' : 'q-mx-xl'} float-right q-mb-lg`">
       <q-btn  
-        to="/experiments"
         color="negative" 
         label="Cancel"
         class="q-mr-lg"
-        @click="confirmLeave = true"
+        @click="confirmLeave = true; router.back()"
       />
       <q-btn  
         @click="submit()" 

diff --git a/src/frontend/src/views/CreateJob.vue b/src/frontend/src/views/CreateJob.vue
@@ -195,11 +195,10 @@
 
   <div :class="`${isMobile ? '' : 'q-mx-xl'} float-right q-mb-lg`">
       <q-btn  
-        :to="expJobOrAllJobs === 'allJobs' ? `/jobs` : `/experiments/${route.params.id}/jobs`"
         color="negative" 
         label="Cancel"
         class="q-mr-lg"
-        @click="confirmLeave = true"
+        @click="confirmLeave = true; router.back()"
       />
       <q-btn  
         @click="submit()" 

diff --git a/src/frontend/src/views/CreatePluginFile.vue b/src/frontend/src/views/CreatePluginFile.vue
@@ -305,11 +305,10 @@
 
   <div :class="`${isMobile ? '' : ''} float-right q-mb-lg`">
     <q-btn  
-      :to="`/plugins/${route.params.id}/files`"
       color="negative" 
       label="Cancel"
       class="q-mr-lg"
-      @click="confirmLeave = true"
+      @click="confirmLeave = true; router.back()"
     />
     <q-btn  
       @click="submit()" 

diff --git a/src/frontend/src/views/EntryPointsView.vue b/src/frontend/src/views/EntryPointsView.vue
@@ -65,20 +65,6 @@
     </template>
   </TableComponent>
 
-  <q-btn 
-    class="fixedButton"
-    round
-    color="primary"
-    icon="add"
-    size="lg"
-    to="/entrypoints/new"
-  >
-    <span class="sr-only">Register new Entrypoint</span>
-    <q-tooltip>
-      Register new Entrypoint
-    </q-tooltip>
-  </q-btn>
-
   <InfoPopupDialog
     v-model="showTaskGraphDialog"
   >

diff --git a/src/frontend/src/views/ExperimentsView.vue b/src/frontend/src/views/ExperimentsView.vue
@@ -32,8 +32,6 @@
     </template>
   </TableComponent>
 
-  <CreateButton />
-
   <DeleteDialog 
     v-model="showDeleteDialog"
     @submit="deleteExperiment"
@@ -58,7 +56,6 @@
   import DeleteDialog from '@/dialogs/DeleteDialog.vue'
   import PageTitle from '@/components/PageTitle.vue'
   import AssignTagsDialog from '@/dialogs/AssignTagsDialog.vue'
-  import CreateButton from '@/components/CreateButton.vue'
   
   const router = useRouter()
 

diff --git a/src/frontend/src/views/GroupsView.vue b/src/frontend/src/views/GroupsView.vue
@@ -19,19 +19,6 @@
       </q-td>
     </template>
   </TableComponent>
-  <!-- <q-btn 
-    class="fixedButton"
-    round
-    color="primary"
-    icon="add"
-    size="lg"
-    to="/groups/admin"
-  >
-    <span class="sr-only">Create a new Group</span>
-    <q-tooltip>
-      Create a new Group
-    </q-tooltip>
-  </q-btn> -->
 </template>
 
 <script setup>

diff --git a/src/frontend/src/views/JobsView.vue b/src/frontend/src/views/JobsView.vue
@@ -36,19 +36,6 @@
       />
     </template>
   </TableComponent>
-  <q-btn 
-    class="fixedButton"
-    round
-    color="primary"
-    icon="add"
-    size="lg"
-    :to="`/experiments/${route.params.id}/jobs/new`"
-  >
-    <span class="sr-only">Create a new Job</span>
-    <q-tooltip>
-      Create a new Job
-    </q-tooltip>
-  </q-btn>
 
   <DeleteDialog 
     v-model="showDeleteDialog"