User management on new Admin UI.

riclolsen · Sep 21, 2024 · f545f6d · f545f6d
1 parent cbf022c
commit f545f6d
Show file tree

Hide file tree

Showing 4 changed files with 219 additions and 248 deletions.
diff --git a/src/AdminUI/src/components/AdminPage.vue b/src/AdminUI/src/components/AdminPage.vue
@@ -1,47 +1,43 @@
 <template>
-    <v-container fluid class="admin-page">
-      <v-card class="fill-height d-flex flex-column">
-        <v-tabs
-          v-model="activeTab"
-          color="primary"
-          align-tabs="center"
-        >
-          <v-tab :value="1">{{ $t('admin.tabs.userManagement') }}</v-tab>
-          <v-tab :value="2">{{ $t('admin.tabs.systemSettings') }}</v-tab>
-          <v-tab :value="3">{{ $t('admin.tabs.logs') }}</v-tab>
-        </v-tabs>
-
-        <v-card-text>
-          <v-window v-model="activeTab">
-            <v-window-item :value="1">
-              <user-management-tab />
-            </v-window-item>
-
-            <v-window-item :value="2">
-              <system-settings-tab />
-            </v-window-item>
-
-            <v-window-item :value="3">
-              <logs-tab />
-            </v-window-item>
-          </v-window>
-        </v-card-text>
-      </v-card>
-    </v-container>
-  </template>
-
-  <script setup>
-  import { ref } from 'vue';
-  import UserManagementTab from './UserManagementTab.vue';
-  import SystemSettingsTab from './SystemSettingsTab.vue';
-  import LogsTab from './LogsTab.vue';
-  
-  const activeTab = ref(1);
-  </script>
-
-  <style scoped>
-  .admin-page {
-    padding-top: 2rem;
-    padding-bottom: 2rem;
-  }
-  </style>
+  <v-container fluid class="admin-page">
+    <v-card class="fill-height d-flex flex-column">
+      <v-tabs v-model="activeTab" color="primary" align-tabs="center">
+        <v-tab :value="1">{{ $t('admin.tabs.userManagement') }}</v-tab>
+        <v-tab :value="2">{{ $t('admin.tabs.systemSettings') }}</v-tab>
+        <v-tab :value="3">{{ $t('admin.tabs.logs') }}</v-tab>
+      </v-tabs>
+
+      <v-card-text>
+        <v-window v-model="activeTab">
+          <v-window-item :value="1">
+            <user-management-tab />
+          </v-window-item>
+
+          <v-window-item :value="2">
+            <system-settings-tab />
+          </v-window-item>
+
+          <v-window-item :value="3">
+            <logs-tab />
+          </v-window-item>
+        </v-window>
+      </v-card-text>
+    </v-card>
+  </v-container>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import UserManagementTab from './UserManagementTab.vue';
+import SystemSettingsTab from './SystemSettingsTab.vue';
+import LogsTab from './LogsTab.vue';
+
+const activeTab = ref(1);
+</script>
+
+<style scoped>
+.admin-page {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+</style>
diff --git a/src/AdminUI/src/components/DashboardPage.vue b/src/AdminUI/src/components/DashboardPage.vue
@@ -1,10 +1,5 @@
 <template>
   <v-container fluid>
-    <v-row>
-      <v-col cols="12">
-        <h1 class="text-h4 mb-6">{{ $t('dashboard.title') }}</h1>
-      </v-col>
-    </v-row>
     <v-row>
       <v-col v-for="shortcut in shortcuts" :key="shortcut.title" cols="12" sm="6" md="4">
         <v-card dense :color="shortcut.color" hover @click="navigateTo(shortcut.route)">
@@ -28,18 +23,18 @@
 <script setup>
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
-import { Monitor, Bell, Table, Calendar, FileText, UserCog, HelpCircle,BarChart, Database } from 'lucide-vue-next';
+import { Monitor, Bell, Table, Calendar, FileText, UserCog, HelpCircle, BarChart, Database } from 'lucide-vue-next';
 
 const router = useRouter();
 
 const shortcuts = ref([
-  { titleKey: 'dashboard.displayViewer', icon: Monitor, color: 'primary', route: '/display-viewer', page: '/display.html', target:"_blank" },
-  { titleKey: 'dashboard.alarmsViewer', icon: Bell, color: 'error', route: '/alarms-viewer', page: '/tabular.html?SELMODULO=ALARMS_VIEWER', target:"_blank" },
-  { titleKey: 'dashboard.tabularViewer', icon: Table, color: 'success', route: '/tabular-viewer', page: '/tabular.html', target:"_blank" },
-  { titleKey: 'dashboard.eventsViewer', icon: Calendar, color: 'info', route: '/events-viewer', page: '/events.html', target:"_blank" },
-  { titleKey: 'dashboard.logViewer', icon: FileText, color: 'warning', route: '/log-viewer', page: '/log-io', target:"_blank" },
-  { titleKey: 'dashboard.grafana', icon: BarChart, color: 'secondary', route: '/grafana', page: '/grafana', target:"_blank" },
-  { titleKey: 'dashboard.metabase', icon: Database, color: 'primary', route: '/metabase', page: '/metabase', target:"_blank" },
+  { titleKey: 'dashboard.displayViewer', icon: Monitor, color: 'primary', route: '/display-viewer', page: '/display.html', target: "_blank" },
+  { titleKey: 'dashboard.alarmsViewer', icon: Bell, color: 'error', route: '/alarms-viewer', page: '/tabular.html?SELMODULO=ALARMS_VIEWER', target: "_blank" },
+  { titleKey: 'dashboard.tabularViewer', icon: Table, color: 'success', route: '/tabular-viewer', page: '/tabular.html', target: "_blank" },
+  { titleKey: 'dashboard.eventsViewer', icon: Calendar, color: 'info', route: '/events-viewer', page: '/events.html', target: "_blank" },
+  { titleKey: 'dashboard.logViewer', icon: FileText, color: 'warning', route: '/log-viewer', page: '/log-io', target: "_blank" },
+  { titleKey: 'dashboard.grafana', icon: BarChart, color: 'secondary', route: '/grafana', page: '/grafana', target: "_blank" },
+  { titleKey: 'dashboard.metabase', icon: Database, color: 'primary', route: '/metabase', page: '/metabase', target: "_blank" },
   { titleKey: 'dashboard.admin', icon: UserCog, color: 'primary', route: '/admin' },
   { titleKey: 'dashboard.about', icon: HelpCircle, color: 'secondary', route: '/about' },
 ]);