From 9341ac24d43915e26405262d366af98f9487379e Mon Sep 17 00:00:00 2001
From: ingalls <nick@ingalls.ca>
Date: Fri, 25 Oct 2024 11:55:41 -0600
Subject: [PATCH] Add White Bread Crumb

---
 api/web/src/App.vue                           |  2 +-
 api/web/src/components/Admin.vue              | 14 -----
 api/web/src/components/Admin/AdminUser.vue    | 54 ++++++++++++++-----
 api/web/src/components/Connection.vue         |  2 +-
 api/web/src/components/ConnectionEdit.vue     |  2 +-
 api/web/src/components/ConnectionSink.vue     |  2 +-
 api/web/src/components/ConnectionSinkEdit.vue |  2 +-
 api/web/src/components/ConnectionSinks.vue    |  2 +-
 api/web/src/components/Connections.vue        |  2 +-
 api/web/src/components/Data.vue               |  2 +-
 api/web/src/components/DataEdit.vue           |  2 +-
 api/web/src/components/DataJob.vue            |  2 +-
 api/web/src/components/Layer.vue              |  2 +-
 api/web/src/components/LayerAlerts.vue        |  2 +-
 api/web/src/components/LayerEdit.vue          |  2 +-
 api/web/src/components/LayerQuery.vue         |  2 +-
 api/web/src/components/LayerQueryFeature.vue  |  2 +-
 17 files changed, 57 insertions(+), 41 deletions(-)

diff --git a/api/web/src/App.vue b/api/web/src/App.vue
index 5579fe6a4..6fa84bb6a 100644
--- 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
index 1c8da66ad..1762e475b 100644
--- 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
index b200fc097..e2cb3a9ec 100644
--- a/api/web/src/components/Admin/AdminUser.vue
+++ b/api/web/src/components/Admin/AdminUser.vue
@@ -1,12 +1,10 @@
 <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'
@@ -14,19 +12,35 @@
             />
 
             <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
index a3bc0f2df..9772108a0 100644
--- 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
index 2c8bd7377..54b93a261 100644
--- 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
index 3564034f1..0abdd4122 100644
--- 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
index 950847277..bf755c56d 100644
--- 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
index 4c758a982..5542b974c 100644
--- 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
index b6bec4613..0ec5b3825 100644
--- 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
index 59c754e9b..3b02d5016 100644
--- 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
index 224b83cc4..a9e1660cc 100644
--- 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
index a4ca457eb..1a0f0cf3f 100644
--- 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
index 8482d7112..493051091 100644
--- 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
index 12e0a15a5..0960abbd4 100644
--- 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
index 3cfc51d1d..fbc4f61f2 100644
--- 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
index 13fbdd804..9210d1979 100644
--- 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
index c76859869..80038e514 100644
--- 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>