Skip to content

Commit

Permalink
Optimize User Management
Browse files Browse the repository at this point in the history
  • Loading branch information
@tinohager
tinohager committed Dec 20, 2024
1 parent 842aec9 commit 375368e
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 52 deletions.
8 changes: 4 additions & 4 deletions resources/js/components/forms/users/ListUser.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -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
Expand Down
115 changes: 67 additions & 48 deletions resources/js/views/Users.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down

0 comments on commit 375368e

Please sign in to comment.