Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Optimize User Management #2827

Merged
merged 2 commits into from
Dec 21, 2024
Merged

Optimize User Management #2827

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
375368e
Optimize User Management
tinohager Dec 20, 2024
8aaaa38
minor fixes
ildyria Dec 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions resources/js/components/forms/users/ListUser.vue
View file
Open in desktop
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-1/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
116 changes: 67 additions & 49 deletions resources/js/views/Users.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,71 +9,89 @@
{{ $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>
</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>
<Panel class="border-0 max-w-6xl mx-auto">
<div class="flex flex-wrap justify-center">
<div class="w-full lg:w-2/3 xl:w-3/6">
<p class="text-muted-color-emphasis">This page allows you to manage users.</p>
<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"
/>
<Card class="text-muted-color w-full lg:w-2/3 xl:w-2/6 xl:pl-12" :pt:body:class="'px-0 lg:pt-0'">
<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>
</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
Loading