mirror of
https://github.com/donaldzou/WGDashboard.git
synced 2025-07-28 09:22:22 +00:00
Fixed mobile css, sort by local accounts
This commit is contained in:
parent
6315112b3b
commit
a9f618891b
@ -1,6 +1,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {computed} from "vue";
|
import {computed, onMounted} from "vue";
|
||||||
import LocaleText from "@/components/text/localeText.vue";
|
import LocaleText from "@/components/text/localeText.vue";
|
||||||
|
import {useRoute} from "vue-router";
|
||||||
|
|
||||||
const props = defineProps(['groupName', 'clients', 'searchString'])
|
const props = defineProps(['groupName', 'clients', 'searchString'])
|
||||||
|
|
||||||
@ -16,6 +17,10 @@ const getClients = computed(() => {
|
|||||||
(x.Name && x.Name.toLowerCase().includes(s)))
|
(x.Name && x.Name.toLowerCase().includes(s)))
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
const route = useRoute()
|
||||||
|
onMounted(() => {
|
||||||
|
document.querySelector(".clientList .active")?.scrollIntoView()
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -27,10 +32,13 @@ const getClients = computed(() => {
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body p-0">
|
<div class="card-body p-0">
|
||||||
<div class="list-group list-group-flush" >
|
<div class="list-group list-group-flush clientList">
|
||||||
<RouterLink
|
<RouterLink
|
||||||
|
:key="client.ClientID"
|
||||||
|
:id="'client_' + client.ClientID"
|
||||||
|
active-class="active"
|
||||||
:to="{ name: 'Client Viewer', params: { id: client.ClientID } }"
|
: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" >
|
v-for="client in getClients" >
|
||||||
<small class="text-body">
|
<small class="text-body">
|
||||||
{{ client.Email }}
|
{{ client.Email }}
|
||||||
|
@ -34,7 +34,12 @@ if (client.value){
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="text-body d-flex flex-column overflow-y-scroll h-100" v-if="client" :key="client.ClientID">
|
<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">
|
<small class="text-muted">
|
||||||
<LocaleText t="Email"></LocaleText>
|
<LocaleText t="Email"></LocaleText>
|
||||||
</small>
|
</small>
|
||||||
@ -52,7 +57,6 @@ if (client.value){
|
|||||||
</div>
|
</div>
|
||||||
<div style="flex: 1 0 0; overflow-y: scroll;">
|
<div style="flex: 1 0 0; overflow-y: scroll;">
|
||||||
<ClientAssignedPeers
|
<ClientAssignedPeers
|
||||||
|
|
||||||
@refresh="getAssignedPeers()"
|
@refresh="getAssignedPeers()"
|
||||||
:clientAssignedPeers="clientAssignedPeers"
|
:clientAssignedPeers="clientAssignedPeers"
|
||||||
:client="client"></ClientAssignedPeers>
|
:client="client"></ClientAssignedPeers>
|
||||||
@ -73,5 +77,9 @@ if (client.value){
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
@media screen and (min-width: 576px) {
|
||||||
|
.backLink{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
@ -909,7 +909,7 @@ pre.index-alert {
|
|||||||
}
|
}
|
||||||
|
|
||||||
main{
|
main{
|
||||||
padding-bottom: calc( 3rem + 40px + env(safe-area-inset-bottom, 5px));
|
padding-bottom: calc(1rem + env(safe-area-inset-bottom));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -2,7 +2,7 @@ import './css/dashboard.css'
|
|||||||
import 'bootstrap/dist/css/bootstrap.css'
|
import 'bootstrap/dist/css/bootstrap.css'
|
||||||
import 'bootstrap/dist/js/bootstrap.js'
|
import 'bootstrap/dist/js/bootstrap.js'
|
||||||
import 'bootstrap-icons/font/bootstrap-icons.css'
|
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 '@vuepic/vue-datepicker/dist/main.css'
|
||||||
import {createApp, markRaw} from 'vue'
|
import {createApp, markRaw} from 'vue'
|
||||||
import { createPinia } from 'pinia'
|
import { createPinia } from 'pinia'
|
||||||
|
@ -1,54 +1,90 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {DashboardClientAssignmentStore} from "@/stores/DashboardClientAssignmentStore.js";
|
import {DashboardClientAssignmentStore} from "@/stores/DashboardClientAssignmentStore.js";
|
||||||
import LocaleText from "@/components/text/localeText.vue";
|
import LocaleText from "@/components/text/localeText.vue";
|
||||||
import {ref} from "vue";
|
import {computed, ref} from "vue";
|
||||||
const assignmentStore = DashboardClientAssignmentStore()
|
const assignmentStore = DashboardClientAssignmentStore()
|
||||||
import {GetLocale} from "@/utilities/locale.js";
|
import {GetLocale} from "@/utilities/locale.js";
|
||||||
import ClientGroup from "@/components/clientComponents/clientGroup.vue";
|
import ClientGroup from "@/components/clientComponents/clientGroup.vue";
|
||||||
import { fetchGet } from "@/utilities/fetch.js"
|
import { fetchGet } from "@/utilities/fetch.js"
|
||||||
|
import {useRoute} from "vue-router";
|
||||||
|
|
||||||
await assignmentStore.getClients();
|
await assignmentStore.getClients();
|
||||||
assignmentStore.getAllConfigurationsPeers();
|
assignmentStore.getAllConfigurationsPeers();
|
||||||
|
|
||||||
const searchString = ref("")
|
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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="text-body w-100 h-100 pb-2">
|
<div class="text-body w-100 h-100 pb-2">
|
||||||
<div class="w-100 h-100 card rounded-3">
|
<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="row h-100 g-0">
|
||||||
<div class="col-sm-4 border-end d-flex flex-column">
|
<div
|
||||||
<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;">
|
:class="{'hide': route.params.id}"
|
||||||
<label for="searchClient"><i class="bi bi-search me-2"></i></label>
|
class="col-sm-4 border-end d-flex flex-column clientListContainer">
|
||||||
<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="d-flex flex-column overflow-y-scroll" style="flex: 1 0 0">
|
<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"
|
:searchString="searchString"
|
||||||
:clients="clients" :groupName="groupName"></ClientGroup>
|
:clients="clients" :groupName="groupName"></ClientGroup>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-8">
|
<div
|
||||||
|
:class="{'hide': !route.params.id}"
|
||||||
|
class="col-sm-8 clientViewerContainer">
|
||||||
<RouterView></RouterView>
|
<RouterView></RouterView>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<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>
|
</style>
|
Loading…
x
Reference in New Issue
Block a user