Merge pull request #4817 from FlowFuse/4712-fix-devicegroup-layout

fix device groups layout
FlowFuse · Nov 22, 2024 · ffa0555 · ffa0555
2 parents 43277d8 + 2d74e7a
commit ffa0555
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 20 deletions.
diff --git a/frontend/src/pages/application/DeviceGroup/Settings/index.vue b/frontend/src/pages/application/DeviceGroup/Settings/index.vue
@@ -1,4 +1,7 @@
 <template>
+    <div class="mb-3">
+        <SectionTopMenu hero="Device Group Settings" info="" />
+    </div>
     <div class="flex flex-col sm:flex-row">
         <SectionSideMenu :options="sideNavigation" />
         <div class="flex-grow">
@@ -12,13 +15,14 @@ import { useRouter } from 'vue-router'
 import { mapState } from 'vuex'
 
 import SectionSideMenu from '../../../../components/SectionSideMenu.vue'
+import SectionTopMenu from '../../../../components/SectionTopMenu.vue'
 
 import permissionsMixin from '../../../../mixins/Permissions.js'
 
 export default {
     name: 'DeviceGroupSettings',
     components: {
-        SectionSideMenu
+        SectionSideMenu, SectionTopMenu
     },
     mixins: [permissionsMixin],
     props: {
@@ -55,8 +59,8 @@ export default {
                 return false
             }
             this.sideNavigation = [
-                { name: 'General', path: './general' },
-                { name: 'Environment', path: './environment' }
+                { name: 'General', path: { name: 'ApplicationDeviceGroupSettingsGeneral' } },
+                { name: 'Environment', path: { name: 'ApplicationDeviceGroupSettingsEnvironment' } }
             ]
             return true
         },

diff --git a/frontend/src/pages/application/DeviceGroup/devices.vue b/frontend/src/pages/application/DeviceGroup/devices.vue
@@ -3,18 +3,19 @@
         <ff-loading message="Loading Device Group..." />
     </main>
     <div v-else class="w-full">
-        <FormHeading class="mb-3">
-            <div class="flex justify-between items-center">
-                <div class="min-w-0 truncate mr-2">Device Group Membership</div>
-                <div v-if="!editMode && !hasChanges" class="flex flex-wrap justify-end items-end gap-x-2 gap-y-2 mt-0 mb-1">
-                    <ff-button kind="primary" size="small" class="w-24 whitespace-nowrap" @click="editMode = true">Edit</ff-button>
-                </div>
-                <div v-else class="flex flex-wrap justify-end items-end gap-x-2 gap-y-2 mt-0 mb-1">
-                    <ff-button kind="secondary" size="small" class="w-24 whitespace-nowrap" @click="cancelChanges">Cancel</ff-button>
-                    <ff-button kind="primary" size="small" :disabled="!hasChanges" class="w-24 whitespace-nowrap" @click="saveChanges">Save Changes</ff-button>
-                </div>
-            </div>
-        </FormHeading>
+        <div class="mb-3">
+            <SectionTopMenu hero="Device Group Membership" info="">
+                <template #tools>
+                    <div v-if="!editMode && !hasChanges" class="flex flex-wrap justify-end items-end gap-x-2 gap-y-2 mt-0 mb-1">
+                        <ff-button kind="primary" size="small" class="w-24 whitespace-nowrap" @click="editMode = true">Edit</ff-button>
+                    </div>
+                    <div v-else class="flex flex-wrap justify-end items-end gap-x-2 gap-y-2 mt-0 mb-1">
+                        <ff-button kind="secondary" size="small" class="w-24 whitespace-nowrap" @click="cancelChanges">Cancel</ff-button>
+                        <ff-button kind="primary" size="small" :disabled="!hasChanges" class="w-24 whitespace-nowrap" @click="saveChanges">Save Changes</ff-button>
+                    </div>
+                </template>
+            </SectionTopMenu>
+        </div>
 
         <div class="flex flex-col sm:flex-row">
             <div v-if="editMode" class="w-full sm:w-1/2 order-3 sm:order-1">
@@ -81,7 +82,8 @@
 import { mapState } from 'vuex'
 
 import ApplicationApi from '../../../api/application.js'
-import FormHeading from '../../../components/FormHeading.vue'
+import SectionTopMenu from '../../../components/SectionTopMenu.vue'
+
 import Alerts from '../../../services/alerts.js'
 import Dialog from '../../../services/dialog.js'
 
@@ -93,7 +95,7 @@ export default {
     name: 'DeviceGroupDevices',
     components: {
         ActiveSnapshotCell,
-        FormHeading
+        SectionTopMenu
     },
     inheritAttrs: false,
     props: {

diff --git a/frontend/src/pages/application/DeviceGroup/index.vue b/frontend/src/pages/application/DeviceGroup/index.vue
@@ -110,7 +110,7 @@ export default {
                 {
                     label: 'Settings',
                     to: {
-                        name: 'ApplicationDeviceGroupSettingsGeneral',
+                        name: 'ApplicationDeviceGroupSettings',
                         params: {
                             applicationId: this.application?.id,
                             deviceGroupId: this.deviceGroup?.id

diff --git a/frontend/src/pages/application/routes.js b/frontend/src/pages/application/routes.js
@@ -186,8 +186,8 @@ export default [
                 meta: {
                     title: 'Application - Device Group - Settings'
                 },
-                redirect: to => {
-                    return `/application/${to.params.applicationId}/device-group/${to.params.deviceGroupId}/settings/general`
+                redirect: {
+                    name: 'ApplicationDeviceGroupSettingsGeneral'
                 },
                 children: [
                     {