Add White Bread Crumb

dfpc-coe · Oct 25, 2024 · 9341ac2 · 9341ac2
1 parent 967e636
commit 9341ac2
Show file tree

Hide file tree

Showing 17 changed files with 57 additions and 41 deletions.
diff --git a/api/web/src/App.vue b/api/web/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class='page h-100'>
+    <div class='page h-100 cloudtak-gradient'>
         <header
             v-if='navShown'
             class='navbar navbar-expand-md d-print-none'

diff --git a/api/web/src/components/Admin.vue b/api/web/src/components/Admin.vue
@@ -1,17 +1,5 @@
 <template>
     <div style='overflow: auto;'>
-        <div class='page-wrapper'>
-            <div class='page-header d-print-none'>
-                <div class='container-xl'>
-                    <div class='row g-2 align-items-center'>
-                        <div class='col d-flex'>
-                            <TablerBreadCrumb />
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
         <div class='page-body'>
             <div class='container-xl'>
                 <div class='row row-deck row-cards'>
@@ -200,7 +188,6 @@ import PageFooter from './PageFooter.vue';
 import {
     TablerAlert,
     TablerLoading,
-    TablerBreadCrumb,
 } from '@tak-ps/vue-tabler'
 import {
     IconNetwork,
@@ -241,7 +228,6 @@ export default {
         IconNetwork,
         PageFooter,
         TablerLoading,
-        TablerBreadCrumb,
     }
 }
 </script>
diff --git a/api/web/src/components/Admin/AdminUser.vue b/api/web/src/components/Admin/AdminUser.vue
@@ -1,32 +1,46 @@
 <template>
     <div>
         <div class='card-header'>
-            <IconCircleArrowLeft
-                class='cursor-pointer'
-                :size='32'
-                stroke='1'
+            <TablerIconButton
+                title='Back'
                 @click='$router.push("/admin/user")'
-            />
+            ><IconCircleArrowLeft :size='32' stroke='1'/></TablerIconButton>
 
             <h1
                 class='card-title mx-2'
                 v-text='`User: ${$route.params.user}`'
             />
 
             <div class='ms-auto btn-list'>
+                <TablerIconButton
+                    v-if='!edit'
+                    title='Edit User'
+                    @click='edit = true'
+                ><IconSettings :size='32' stroke='1' /></TablerIconButton>
                 <TablerIconButton
                     title='Refresh'
                     @click='fetchUserLoading'
-                >
-                    <IconRefresh
-                        :size='32'
-                        stroke='1'
-                    />
-                </TablerIconButton>
+                ><IconRefresh :size='32' stroke='1' /></TablerIconButton>
             </div>
         </div>
         <div class='card-body'>
             <TablerLoading v-if='loading' />
+            <template v-else-if='edit'>
+                <div class='col-12'>
+                    <TablerToggle
+                        label='System Administrator'
+                        v-model='user.system_admin'
+                    />
+                </div>
+
+                <div class='col-12 d-flex align-items-center'>
+                    <button @click='fetchUserLoading' class='btn btn-secondary'>Cancel</button>
+
+                    <div class='ms-auto'>
+                        <button @click='saveUser' class='btn btn-primary'>Save</button>
+                    </div>
+                </div>
+            </template>
             <template v-else>
                 <div class='datagrid'>
                     <template v-for='ele in getKeys(user)'>
@@ -70,10 +84,12 @@ import { std, stdurl } from '../../std.ts';
 import type { User } from '../../types.ts';
 import {
     TablerLoading,
+    TablerToggle,
     TablerIconButton
 } from '@tak-ps/vue-tabler';
 import {
     IconRefresh,
+    IconSettings,
     IconCircleArrowLeft,
 } from '@tabler/icons-vue'
 
@@ -88,11 +104,25 @@ async function fetchUser(): Promise<User> {
 }
 
 const loading = ref(false);
+const edit = ref(false);
 const user = ref<User>(await fetchUser());
-
 const getKeys = <T extends object>(obj: T) => Object.keys(obj) as Array<keyof T>
 
+async function saveUser(): Promise<void> {
+    edit.value = false;
+    loading.value = true;
+    const url = stdurl(`/api/user/${route.params.user}`);
+    user.value = await std(url, {
+        method: 'PATCH',
+        body: {
+            system_admin: user.value.system_admin
+        }
+    }) as User;
+    loading.value = false;
+}
+
 async function fetchUserLoading(): Promise<void> {
+    edit.value = false;
     loading.value = true;
     const url = stdurl(`/api/user/${route.params.user}`);
     user.value = await std(url) as User;

diff --git a/api/web/src/components/Connection.vue b/api/web/src/components/Connection.vue
@@ -4,7 +4,7 @@
             <div class='page-header d-print-none'>
                 <div class='container-xl'>
                     <div class='row g-2 align-items-center'>
-                        <div class='col d-flex'>
+                        <div class='col d-flex text-white'>
                             <TablerBreadCrumb />
                         </div>
                     </div>

diff --git a/api/web/src/components/ConnectionEdit.vue b/api/web/src/components/ConnectionEdit.vue
@@ -4,7 +4,7 @@
             <div class='page-header d-print-none'>
                 <div class='container-xl'>
                     <div class='row g-2 align-items-center'>
-                        <div class='col d-flex'>
+                        <div class='col d-flex text-white'>
                             <TablerBreadCrumb />
                         </div>
                     </div>

diff --git a/api/web/src/components/ConnectionSink.vue b/api/web/src/components/ConnectionSink.vue
@@ -4,7 +4,7 @@
             <div class='page-header d-print-none'>
                 <div class='container-xl'>
                     <div class='row g-2 align-items-center'>
-                        <div class='col d-flex'>
+                        <div class='col d-flex text-white'>
                             <TablerBreadCrumb />
                         </div>
                     </div>

diff --git a/api/web/src/components/ConnectionSinkEdit.vue b/api/web/src/components/ConnectionSinkEdit.vue
@@ -4,7 +4,7 @@
             <div class='page-header d-print-none'>
                 <div class='container-xl'>
                     <div class='row g-2 align-items-center'>
-                        <div class='col d-flex'>
+                        <div class='col d-flex text-white'>
                             <TablerBreadCrumb />
                         </div>
                     </div>

diff --git a/api/web/src/components/ConnectionSinks.vue b/api/web/src/components/ConnectionSinks.vue
@@ -4,7 +4,7 @@
             <div class='page-header d-print-none'>
                 <div class='container-xl'>
                     <div class='row g-2 align-items-center'>
-                        <div class='col d-flex'>
+                        <div class='col d-flex text-white'>
                             <TablerBreadCrumb />
                         </div>
                     </div>

diff --git a/api/web/src/components/Connections.vue b/api/web/src/components/Connections.vue
@@ -4,7 +4,7 @@
             <div class='page-header d-print-none'>
                 <div class='container-xl'>
                     <div class='row g-2 align-items-center'>
-                        <div class='col d-flex'>
+                        <div class='col d-flex text-white'>
                             <TablerBreadCrumb />
 
                             <div class='ms-auto'>

diff --git a/api/web/src/components/Data.vue b/api/web/src/components/Data.vue
@@ -4,7 +4,7 @@
             <div class='page-header d-print-none'>
                 <div class='container-xl'>
                     <div class='row g-2 align-items-center'>
-                        <div class='col d-flex'>
+                        <div class='col d-flex text-white'>
                             <TablerBreadCrumb />
                         </div>
                     </div>

diff --git a/api/web/src/components/DataEdit.vue b/api/web/src/components/DataEdit.vue
@@ -4,7 +4,7 @@
             <div class='page-header d-print-none'>
                 <div class='container-xl'>
                     <div class='row g-2 align-items-center'>
-                        <div class='col d-flex'>
+                        <div class='col d-flex text-white'>
                             <TablerBreadCrumb />
                         </div>
                     </div>

diff --git a/api/web/src/components/DataJob.vue b/api/web/src/components/DataJob.vue
@@ -4,7 +4,7 @@
             <div class='page-header d-print-none'>
                 <div class='container-xl'>
                     <div class='row g-2 align-items-center'>
-                        <div class='col d-flex'>
+                        <div class='col d-flex text-white'>
                             <TablerBreadCrumb />
                         </div>
                     </div>

diff --git a/api/web/src/components/Layer.vue b/api/web/src/components/Layer.vue
@@ -4,7 +4,7 @@
             <div class='page-header d-print-none'>
                 <div class='container-xl'>
                     <div class='row g-2 align-items-center'>
-                        <div class='col d-flex'>
+                        <div class='col d-flex text-white'>
                             <TablerBreadCrumb />
                         </div>
                     </div>

diff --git a/api/web/src/components/LayerAlerts.vue b/api/web/src/components/LayerAlerts.vue
@@ -4,7 +4,7 @@
             <div class='page-header d-print-none'>
                 <div class='container-xl'>
                     <div class='row g-2 align-items-center'>
-                        <div class='col d-flex'>
+                        <div class='col d-flex text-white'>
                             <TablerBreadCrumb />
                         </div>
                     </div>

diff --git a/api/web/src/components/LayerEdit.vue b/api/web/src/components/LayerEdit.vue
@@ -4,7 +4,7 @@
             <div class='page-header d-print-none'>
                 <div class='container-xl'>
                     <div class='row g-2 align-items-center'>
-                        <div class='col d-flex'>
+                        <div class='col d-flex text-white'>
                             <TablerBreadCrumb />
                         </div>
                     </div>

diff --git a/api/web/src/components/LayerQuery.vue b/api/web/src/components/LayerQuery.vue
@@ -4,7 +4,7 @@
             <div class='page-header d-print-none'>
                 <div class='container-xl'>
                     <div class='row g-2 align-items-center'>
-                        <div class='col d-flex'>
+                        <div class='col d-flex text-white'>
                             <TablerBreadCrumb />
                         </div>
                     </div>

diff --git a/api/web/src/components/LayerQueryFeature.vue b/api/web/src/components/LayerQueryFeature.vue
@@ -4,7 +4,7 @@
             <div class='page-header d-print-none'>
                 <div class='container-xl'>
                     <div class='row g-2 align-items-center'>
-                        <div class='col d-flex'>
+                        <div class='col d-flex text-white'>
                             <TablerBreadCrumb />
                         </div>
                     </div>