From a9f618891b2072fe78453c75c6ddb6615fce3f2c Mon Sep 17 00:00:00 2001
From: Donald Zou <donaldzou@live.hk>
Date: Sun, 27 Jul 2025 02:55:13 +0800
Subject: [PATCH] Fixed mobile css, sort by local accounts

---
 .../clientComponents/clientGroup.vue          | 14 +++-
 .../clientComponents/clientViewer.vue         | 14 +++-
 src/static/app/src/css/dashboard.css          |  2 +-
 src/static/app/src/main.js                    |  2 +-
 src/static/app/src/views/clients.vue          | 78 ++++++++++++++-----
 5 files changed, 81 insertions(+), 29 deletions(-)

diff --git a/src/static/app/src/components/clientComponents/clientGroup.vue b/src/static/app/src/components/clientComponents/clientGroup.vue
index b4fb6ed..13d1101 100644
--- a/src/static/app/src/components/clientComponents/clientGroup.vue
+++ b/src/static/app/src/components/clientComponents/clientGroup.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import {computed} from "vue";
+import {computed, onMounted} from "vue";
 import LocaleText from "@/components/text/localeText.vue";
+import {useRoute} from "vue-router";
 
 const props = defineProps(['groupName', 'clients', 'searchString'])
 
@@ -16,6 +17,10 @@ const getClients = computed(() => {
 				(x.Name && x.Name.toLowerCase().includes(s)))
 	)
 })
+const route = useRoute()
+onMounted(() => {
+	document.querySelector(".clientList .active")?.scrollIntoView()
+})
 </script>
 
 <template>
@@ -27,10 +32,13 @@ const getClients = computed(() => {
 			</span>
 		</div>
 		<div class="card-body p-0">
-			<div class="list-group list-group-flush" >
+			<div class="list-group list-group-flush clientList">
 				<RouterLink
+					:key="client.ClientID"
+					:id="'client_' + client.ClientID"
+					active-class="active"
 					:to="{ name: 'Client Viewer', params: { id: client.ClientID } }"
-					class="list-group-item d-flex flex-column border-bottom list-group-item-action"
+					class="list-group-item d-flex flex-column border-bottom list-group-item-action client"
 				    v-for="client in getClients" >
 					<small class="text-body">
 						{{ client.Email }}
diff --git a/src/static/app/src/components/clientComponents/clientViewer.vue b/src/static/app/src/components/clientComponents/clientViewer.vue
index c913832..08ee4b6 100644
--- a/src/static/app/src/components/clientComponents/clientViewer.vue
+++ b/src/static/app/src/components/clientComponents/clientViewer.vue
@@ -34,7 +34,12 @@ if (client.value){
 
 <template>
 	<div class="text-body d-flex flex-column overflow-y-scroll h-100" v-if="client" :key="client.ClientID">
-		<div class="p-4 border-bottom bg-body-tertiary">
+		<div class="p-4 border-bottom bg-body-tertiary z-0">
+			<div class="mb-3 backLink">
+				<RouterLink to="/clients" class="text-body text-decoration-none">
+					<i class="bi bi-arrow-left me-2"></i>
+					Back</RouterLink>
+			</div>
 			<small class="text-muted">
 				<LocaleText t="Email"></LocaleText>
 			</small>
@@ -52,7 +57,6 @@ if (client.value){
 		</div>
 		<div style="flex: 1 0 0; overflow-y: scroll;">
 			<ClientAssignedPeers
-
 				@refresh="getAssignedPeers()"
 				:clientAssignedPeers="clientAssignedPeers"
 				:client="client"></ClientAssignedPeers>
@@ -73,5 +77,9 @@ if (client.value){
 </template>
 
 <style scoped>
-
+@media screen and (min-width: 576px) {
+	.backLink{
+		display: none;
+	}
+}
 </style>
\ No newline at end of file
diff --git a/src/static/app/src/css/dashboard.css b/src/static/app/src/css/dashboard.css
index 44112c6..2cf5870 100644
--- a/src/static/app/src/css/dashboard.css
+++ b/src/static/app/src/css/dashboard.css
@@ -909,7 +909,7 @@ pre.index-alert {
     }
 
     main{
-        padding-bottom: calc( 3rem + 40px + env(safe-area-inset-bottom, 5px));
+        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
     }
 }
 
diff --git a/src/static/app/src/main.js b/src/static/app/src/main.js
index 37db22e..8864a2a 100644
--- a/src/static/app/src/main.js
+++ b/src/static/app/src/main.js
@@ -2,7 +2,7 @@ import './css/dashboard.css'
 import 'bootstrap/dist/css/bootstrap.css'
 import 'bootstrap/dist/js/bootstrap.js'
 import 'bootstrap-icons/font/bootstrap-icons.css'
-import 'animate.css/animate.compat.css'
+import 'animate.css/animate.css'
 import '@vuepic/vue-datepicker/dist/main.css'
 import {createApp, markRaw} from 'vue'
 import { createPinia } from 'pinia'
diff --git a/src/static/app/src/views/clients.vue b/src/static/app/src/views/clients.vue
index fa47937..ae3eed1 100644
--- a/src/static/app/src/views/clients.vue
+++ b/src/static/app/src/views/clients.vue
@@ -1,54 +1,90 @@
 <script setup lang="ts">
 import {DashboardClientAssignmentStore} from "@/stores/DashboardClientAssignmentStore.js";
 import LocaleText from "@/components/text/localeText.vue";
-import {ref} from "vue";
+import {computed, ref} from "vue";
 const assignmentStore = DashboardClientAssignmentStore()
 import {GetLocale} from "@/utilities/locale.js";
 import ClientGroup from "@/components/clientComponents/clientGroup.vue";
 import { fetchGet } from "@/utilities/fetch.js"
+import {useRoute} from "vue-router";
 
 await assignmentStore.getClients();
 assignmentStore.getAllConfigurationsPeers();
 
 const searchString = ref("")
+const route = useRoute()
+
+const oidc = computed(() => {
+	return Object.fromEntries(
+		Object.entries(assignmentStore.clients).filter(
+			([key, _])=>Object.keys(assignmentStore.clients).filter(x => x !== 'Local').includes(key)
+		)
+	)
+})
 </script>
 
 <template>
 	<div class="text-body w-100 h-100 pb-2">
 		<div class="w-100 h-100 card rounded-3">
+			<div class="border-bottom z-0">
+				<div class="d-flex text-body align-items-center sticky-top p-3 bg-body-tertiary rounded-top-3" style="border-top-right-radius: 0 !important;">
+					<label for="searchClient"><i class="bi bi-search me-2"></i></label>
+					<input
+						v-model="searchString"
+						id="searchClient"
+						class="form-control rounded-3 form-control-sm"
+						:placeholder="GetLocale('Search Clients...')"
+						type="email" style="width: auto;">
+					<button class="btn btn-body ms-auto bg-body-secondary rounded-3 btn-sm">
+						<i class="bi bi-gear-fill me-2"></i>
+						<LocaleText t="Settings"></LocaleText>
+					</button>
+				</div>
+			</div>
 			<div class="row h-100 g-0">
-				<div class="col-sm-4 border-end d-flex flex-column">
-					<div class="d-flex text-body align-items-center sticky-top p-3 bg-body-tertiary rounded-top-3" style="border-top-right-radius: 0 !important;">
-						<label for="searchClient"><i class="bi bi-search me-2"></i></label>
-						<input
-							v-model="searchString"
-							id="searchClient"
-							class="form-control rounded-3 form-control-sm"
-							:placeholder="GetLocale('Search Clients...')"
-							type="email" style="width: auto;">
-						<button class="btn btn-body ms-auto bg-body-secondary rounded-3 btn-sm">
-							<i class="bi bi-gear-fill me-2"></i>
-							<LocaleText t="Settings"></LocaleText>
-						</button>
-					</div>
+				<div
+					:class="{'hide': route.params.id}"
+					class="col-sm-4 border-end d-flex flex-column clientListContainer">
 					<div class="d-flex flex-column overflow-y-scroll" style="flex: 1 0 0">
-						<ClientGroup v-for="(clients, groupName) in assignmentStore.clients"
+						<ClientGroup :searchString="searchString"
+									 :clients="assignmentStore.clients.Local" groupName="Local"></ClientGroup>
+						<ClientGroup v-for="(clients, groupName) in oidc"
 						             :searchString="searchString"
 						             :clients="clients" :groupName="groupName"></ClientGroup>
 					</div>
 				</div>
-				<div class="col-sm-8">
+				<div
+					:class="{'hide': !route.params.id}"
+					class="col-sm-8 clientViewerContainer">
 					<RouterView></RouterView>
 				</div>
 			</div>
-			
-
-
-
 		</div>
 	</div>
 </template>
 
 <style scoped>
+@media screen and (max-width: 576px){
+	.clientListContainer.hide, .clientViewerContainer.hide{
+		display: none !important;
+	}
 
+	.clientListContainer{
+		border-right: none !important;
+		animation: blurIn 0.2s ease-in-out forwards;
+	}
+
+	.clientViewerContainer{
+		animation: blurIn 0.2s ease-in-out forwards;
+	}
+}
+
+@keyframes blurIn {
+	from{
+		filter: blur(8px);
+	}
+	to{
+		filter: blur(0px);
+	}
+}
 </style>
\ No newline at end of file