From 375368e497590adf9279d10586a1deca4a05fb16 Mon Sep 17 00:00:00 2001
From: Tino Hager <tino.hager@nager.at>
Date: Fri, 20 Dec 2024 09:11:53 +0100
Subject: [PATCH] Optimize User Management

---
 .../js/components/forms/users/ListUser.vue    |   8 +-
 resources/js/views/Users.vue                  | 115 ++++++++++--------
 2 files changed, 71 insertions(+), 52 deletions(-)

diff --git a/resources/js/components/forms/users/ListUser.vue b/resources/js/components/forms/users/ListUser.vue
index 29c11fce88a..951be57f844 100644
--- a/resources/js/components/forms/users/ListUser.vue
+++ b/resources/js/components/forms/users/ListUser.vue
@@ -1,6 +1,6 @@
 <template>
-	<div class="w-full flex flex-wrap md:flex-nowrap gap-2 justify-center items-center">
-		<div class="w-3/6 flex flex-wrap">
+	<div class="w-full flex flex-wrap md:flex-nowrap items-center">
+		<div class="w-9/12 lg:w-8/12 flex flex-wrap">
 			<div class="w-2/3">
 				{{ props.user.username }}
 				<i class="pi pi-crown text-orange-400" v-if="props.user.may_administrate" v-tooltip.top="'admin user'"></i>
@@ -29,12 +29,12 @@
 				/>
 			</template>
 		</div>
-		<Button @click="editUser" severity="contrast" class="border-none w-1/6" :disabled="props.user.may_administrate">
+		<Button @click="editUser" severity="contrast" class="border-none w-2/12 lg:w-2/12" :disabled="props.user.may_administrate">
 			<i class="pi pi-user-edit" /><span class="hidden md:inline">{{ $t("Edit") }}</span>
 		</Button>
 		<Button
 			@click="deleteUser"
-			class="border-none bg-surface text-danger-600 hover:bg-danger-700 hover:text-white w-1/6"
+			class="border-none bg-surface text-danger-600 hover:bg-danger-700 hover:text-white w-1/12 lg:w-2/12"
 			:disabled="props.user.may_administrate"
 		>
 			<i class="pi pi-user-minus" /><span class="hidden md:inline">{{ $t("lychee.DELETE") }}</span></Button
diff --git a/resources/js/views/Users.vue b/resources/js/views/Users.vue
index 406a26962cc..fd8b0cd4002 100644
--- a/resources/js/views/Users.vue
+++ b/resources/js/views/Users.vue
@@ -9,71 +9,90 @@
 			{{ $t("lychee.USERS") }}
 		</template>
 
-		<template #end> </template>
+		<template #end></template>
 	</Toolbar>
-	<Panel class="border-0 max-w-3xl mx-auto">
-		<div class="w-full mb-10 text-muted-color-emphasis flex items-center gap-4">
-			<div>
-				<p>This page allows you to manage users.</p>
-				<ul class="mt-1">
-					<li class="ml-4 pt-2"><i class="pi pi-upload" /> : When selected, the user can upload content.</li>
-					<li class="ml-4 pt-2"><i class="pi pi-lock-open" /> : When selected, the user can modify their profile (username, password).</li>
-					<li class="ml-4 pt-2" v-if="is_se_enabled">
-						<i class="pi pi-chart-pie" /> : When set, the user has a space quota for pictures (in kB).
-					</li>
-				</ul>
-			</div>
-			<Button @click="createUser" severity="primary" class="border-none p-3">Create a new user</Button>
+	<Panel class="border-0 max-w-6xl mx-auto">
+		<div>
+			<p>This page allows you to manage users.</p>
 		</div>
-		<div class="flex flex-col">
-			<div class="flex flex-wrap md:flex-nowrap gap-2 justify-center border-b border-solid border-b-surface-700 mb-4 pb-4">
-				<div class="w-3/6 flex">
-					<span class="w-2/3 font-bold">{{ $t("lychee.USERNAME") }}</span>
-					<div class="w-1/3 flex justify-evenly">
-						<span class="w-full text-center" v-tooltip.top="'When selected, the user can upload content.'"
-							><i class="pi pi-upload"
-						/></span>
-						<span class="w-full text-center" v-tooltip.top="'When selected, the user can modify their profile (username, password).'">
-							<i class="pi pi-lock-open" />
-						</span>
-						<span
-							v-if="isQuotaEnabled"
-							class="w-full text-center"
-							v-tooltip.top="'When selected, the user is limited in the quatity of picture they can upload (in kB).'"
-						>
-							<i class="pi pi-chart-pie" />
-						</span>
+		<div class="flex flex-wrap justify-between">
+			<div class="w-full lg:w-2/3 xl:w-3/6">
+				<div class="flex justify-end mt-8 mb-8">
+					<Button @click="createUser" severity="primary" class="border-none p-3">Create a new user</Button>
+				</div>
+				<div class="flex flex-col">
+					<div class="flex flex-wrap md:flex-nowrap border-b border-solid border-b-surface-700 mb-4 pb-4">
+						<div class="w-9/12 lg:w-8/12 flex">
+							<span class="w-2/3 font-bold">{{ $t("lychee.USERNAME") }}</span>
+							<div class="w-1/3 flex justify-evenly">
+								<span class="w-full text-center" v-tooltip.top="'When selected, the user can upload content.'"
+									><i class="pi pi-upload"
+								/></span>
+								<span class="w-full text-center" v-tooltip.top="'When selected, the user can modify their profile (username, password).'">
+									<i class="pi pi-lock-open" />
+								</span>
+								<span
+									v-if="isQuotaEnabled"
+									class="w-full text-center"
+									v-tooltip.top="'When selected, the user is limited in the quatity of picture they can upload (in kB).'"
+								>
+									<i class="pi pi-chart-pie" />
+								</span>
+							</div>
+						</div>
+						<span class="w-1/12 lg:w-2/12"></span>
+						<span class="w-1/12 lg:w-2/12"></span>
 					</div>
+
+					<ListUser
+						v-for="user in users"
+						:key="user.id"
+						:user="user"
+						@delete-user="deleteUser"
+						@edit-user="editUser"
+						:total-used-space="totalUsedSpace"
+						:is-quota-enabled="isQuotaEnabled"
+					/>
 				</div>
-				<span class="w-1/6"></span>
-				<span class="w-1/6"></span>
 			</div>
-
-			<ListUser
-				v-for="user in users"
-				:key="user.id"
-				:user="user"
-				@delete-user="deleteUser"
-				@edit-user="editUser"
-				:total-used-space="totalUsedSpace"
-				:is-quota-enabled="isQuotaEnabled"
-			/>
+			<div class="w-full lg:w-2/3 xl:w-2/6 pl-0 xl:pl-12">
+				<Card class="text-gray-500">
+					<template #title>Legend</template>
+					<template #content>
+						<ul class="text-sm">
+							<li class="ml-2 pt-2 flex items-start gap-x-4">
+								<i class="pi pi-upload"></i>
+								<span>When selected, the user can upload content.</span>
+							</li>
+							<li class="ml-2 pt-2 flex items-start gap-x-4">
+								<i class="pi pi-lock-open"></i>
+								<span>When selected, the user can modify their profile (username, password).</span>
+							</li>
+							<li class="ml-2 pt-2 flex items-start gap-x-4" v-if="is_se_enabled">
+								<i class="pi pi-chart-pie"></i>
+								<span>When set, the user has a space quota for pictures (in kB).</span>
+							</li>
+						</ul>
+					</template>
+				</Card>
+			</div>
 		</div>
 	</Panel>
 </template>
 <script setup lang="ts">
 import { computed, ref } from "vue";
+import { storeToRefs } from "pinia";
 import Button from "primevue/button";
 import Panel from "primevue/panel";
 import Toolbar from "primevue/toolbar";
+import Card from 'primevue/card';
+import { useToast } from "primevue/usetoast";
 import CreateEditUser from "@/components/forms/users/CreateEditUser.vue";
-import UserManagementService from "@/services/user-management-service";
 import ListUser from "@/components/forms/users/ListUser.vue";
-import { useToast } from "primevue/usetoast";
-import { storeToRefs } from "pinia";
-import { useLycheeStateStore } from "@/stores/LycheeState";
 import OpenLeftMenu from "@/components/headers/OpenLeftMenu.vue";
+import UserManagementService from "@/services/user-management-service";
 import UsersService from "@/services/users-service";
+import { useLycheeStateStore } from "@/stores/LycheeState";
 
 const lycheeStore = useLycheeStateStore();
 lycheeStore.init();