mirror of
https://github.com/Drop-OSS/drop.git
synced 2026-08-24 15:22:05 +10:00
Adding groups logic and restrictions (#454)
* Adding groups logic and restrictions * Cleaning up some redundant code * hastily made translations * Linter issues * More linting * PR comments * Covering other APIs with age filters per comment --------- Co-authored-by: Robert Clabough <robert@clabough.tech>
This commit is contained in:
AgentScrubbles
co-authored by
Robert Clabough
Robert Clabough
parent
cc3f645580
commit
13891f6ab2
@@ -22,6 +22,8 @@
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Users Table -->
|
||||
<div class="mt-8 flow-root">
|
||||
<div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
||||
<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
|
||||
@@ -122,14 +124,6 @@
|
||||
>
|
||||
{{ $t("users.admin.delete") }}
|
||||
</button>
|
||||
|
||||
<!--
|
||||
<NuxtLink to="#" class="text-blue-600 hover:text-blue-500"
|
||||
>Edit<span class="sr-only"
|
||||
>, {{ user.displayName }}</span
|
||||
></NuxtLink
|
||||
>
|
||||
-->
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -139,6 +133,204 @@
|
||||
</div>
|
||||
</div>
|
||||
<ModalDeleteUser v-model="userToDelete" />
|
||||
|
||||
<!-- Groups Section -->
|
||||
<div class="mt-12">
|
||||
<div class="sm:flex sm:items-center">
|
||||
<div class="sm:flex-auto">
|
||||
<h2 class="text-base font-semibold text-zinc-100">
|
||||
{{ $t("users.admin.groups.title") }}
|
||||
</h2>
|
||||
<p class="mt-2 text-sm text-zinc-400">
|
||||
{{ $t("users.admin.groups.description") }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
|
||||
<button
|
||||
class="block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:bg-blue-500 hover:scale-105 hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
||||
@click="showCreateGroup = true"
|
||||
>
|
||||
{{ $t("users.admin.groups.createGroup") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 flow-root">
|
||||
<div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
||||
<div
|
||||
class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"
|
||||
>
|
||||
<div
|
||||
class="overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow"
|
||||
>
|
||||
<table class="min-w-full divide-y divide-zinc-700">
|
||||
<thead>
|
||||
<tr class="bg-zinc-800/50">
|
||||
<th
|
||||
scope="col"
|
||||
class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-zinc-100 sm:pl-6"
|
||||
>
|
||||
{{ $t("users.admin.groups.name") }}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
|
||||
>
|
||||
{{ $t("users.admin.groups.descriptionField") }}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
|
||||
>
|
||||
{{ $t("users.admin.groups.members") }}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
|
||||
>
|
||||
{{ $t("users.admin.groups.bannedRatings") }}
|
||||
</th>
|
||||
<th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
|
||||
<span class="sr-only">
|
||||
{{ $t("users.admin.srEditLabel") }}
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-zinc-700">
|
||||
<tr
|
||||
v-for="group in groups"
|
||||
:key="group.id"
|
||||
class="hover:bg-zinc-800/50 transition-colors duration-150"
|
||||
>
|
||||
<td
|
||||
class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-6"
|
||||
>
|
||||
{{ group.name }}
|
||||
</td>
|
||||
<td
|
||||
class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400"
|
||||
>
|
||||
{{ group.description || "-" }}
|
||||
</td>
|
||||
<td
|
||||
class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400"
|
||||
>
|
||||
{{ group._count.users }}
|
||||
</td>
|
||||
<td
|
||||
class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400"
|
||||
>
|
||||
{{ group._count.bannedAgeRatings }}
|
||||
</td>
|
||||
<td
|
||||
class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 space-x-2"
|
||||
>
|
||||
<NuxtLink
|
||||
:to="`/admin/users/groups/${group.id}`"
|
||||
class="text-blue-400 hover:text-blue-300"
|
||||
>
|
||||
{{ $t("common.edit") }}
|
||||
</NuxtLink>
|
||||
<button
|
||||
class="text-red-400 hover:text-red-300"
|
||||
@click="groupToDelete = group"
|
||||
>
|
||||
{{ $t("users.admin.groups.deleteGroup") }}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Create Group Modal -->
|
||||
<div
|
||||
v-if="showCreateGroup"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-zinc-950/70"
|
||||
@click.self="showCreateGroup = false"
|
||||
>
|
||||
<div
|
||||
class="rounded-lg border border-zinc-700 bg-zinc-900 p-6 shadow-xl w-full max-w-md"
|
||||
>
|
||||
<h2 class="text-lg font-semibold text-zinc-100 mb-4">
|
||||
{{ $t("users.admin.groups.createGroup") }}
|
||||
</h2>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="text-sm/6 font-medium text-zinc-100">
|
||||
{{ $t("users.admin.groups.name") }}
|
||||
</label>
|
||||
<input
|
||||
v-model="newGroupName"
|
||||
type="text"
|
||||
class="mt-1 block w-full rounded-md bg-zinc-800 px-3 py-1.5 text-sm text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 focus:outline-blue-600"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-sm/6 font-medium text-zinc-100">
|
||||
{{ $t("users.admin.groups.descriptionField") }}
|
||||
</label>
|
||||
<input
|
||||
v-model="newGroupDescription"
|
||||
type="text"
|
||||
class="mt-1 block w-full rounded-md bg-zinc-800 px-3 py-1.5 text-sm text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 focus:outline-blue-600"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex justify-end gap-2">
|
||||
<button
|
||||
class="rounded-md px-3 py-2 text-sm font-semibold text-zinc-400 hover:text-zinc-300"
|
||||
@click="showCreateGroup = false"
|
||||
>
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button
|
||||
class="rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white hover:bg-blue-500"
|
||||
:disabled="newGroupName.length < 2"
|
||||
@click="createGroup"
|
||||
>
|
||||
{{ $t("users.admin.groups.createGroup") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Group Confirm Modal -->
|
||||
<div
|
||||
v-if="groupToDelete"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-zinc-950/70"
|
||||
@click.self="groupToDelete = undefined"
|
||||
>
|
||||
<div
|
||||
class="rounded-lg border border-zinc-700 bg-zinc-900 p-6 shadow-xl w-full max-w-md"
|
||||
>
|
||||
<h2 class="text-lg font-semibold text-zinc-100 mb-4">
|
||||
{{ $t("users.admin.groups.deleteGroup") }}
|
||||
</h2>
|
||||
<p class="text-sm text-zinc-400 mb-4">
|
||||
{{ $t("users.admin.groups.deleteConfirm") }}
|
||||
</p>
|
||||
<div class="flex justify-end gap-2">
|
||||
<button
|
||||
class="rounded-md px-3 py-2 text-sm font-semibold text-zinc-400 hover:text-zinc-300"
|
||||
@click="groupToDelete = undefined"
|
||||
>
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button
|
||||
class="rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white hover:bg-red-500"
|
||||
@click="deleteGroup"
|
||||
>
|
||||
{{ $t("users.admin.groups.deleteGroup") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -162,6 +354,45 @@ if (!users.value) {
|
||||
}
|
||||
|
||||
const userToDelete = ref();
|
||||
|
||||
const setUserToDelete = (user: UserModel) => (userToDelete.value = user);
|
||||
|
||||
// Groups
|
||||
interface GroupListItem {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
_count: { users: number; bannedAgeRatings: number };
|
||||
}
|
||||
|
||||
const groups = ref<GroupListItem[]>([]);
|
||||
const showCreateGroup = ref(false);
|
||||
const newGroupName = ref("");
|
||||
const newGroupDescription = ref("");
|
||||
const groupToDelete = ref<GroupListItem | undefined>();
|
||||
|
||||
const fetchGroups = async () => {
|
||||
groups.value = await $dropFetch<GroupListItem[]>("/api/v1/admin/groups");
|
||||
};
|
||||
|
||||
await fetchGroups();
|
||||
|
||||
const createGroup = async () => {
|
||||
await $dropFetch("/api/v1/admin/groups", {
|
||||
method: "POST",
|
||||
body: { name: newGroupName.value, description: newGroupDescription.value },
|
||||
});
|
||||
showCreateGroup.value = false;
|
||||
newGroupName.value = "";
|
||||
newGroupDescription.value = "";
|
||||
await fetchGroups();
|
||||
};
|
||||
|
||||
const deleteGroup = async () => {
|
||||
if (!groupToDelete.value) return;
|
||||
await $dropFetch(`/api/v1/admin/groups/${groupToDelete.value.id}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
groupToDelete.value = undefined;
|
||||
await fetchGroups();
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user