MusareFork/frontend/src/pages/Admin/Artists.vue

<script setup lang="ts">
import { defineAsyncComponent, ref } from "vue";
import Toast from "toasters";
import { GenericResponse } from "@musare_types/actions/GenericActions";
import { useWebsocketsStore } from "@/stores/websockets";
import { useModalsStore } from "@/stores/modals";
import { useUserAuthStore } from "@/stores/userAuth";
import { TableColumn, TableFilter, TableEvents } from "@/types/advancedTable";
import utils from "@/utils";

const AdvancedTable = defineAsyncComponent(
	() => import("@/components/AdvancedTable.vue")
);
const QuickConfirm = defineAsyncComponent(
	() => import("@/components/QuickConfirm.vue")
);
const UserLink = defineAsyncComponent(
	() => import("@/components/UserLink.vue")
);

const { socket } = useWebsocketsStore();

const columnDefault = ref<TableColumn>({
	sortable: true,
	hidable: true,
	defaultVisibility: "shown",
	draggable: true,
	resizable: true,
	minWidth: 150,
	maxWidth: 600
});
const columns = ref<TableColumn[]>([
	{
		name: "options",
		displayName: "Options",
		properties: ["_id"],
		sortable: false,
		hidable: false,
		resizable: false,
		minWidth: 85,
		defaultWidth: 85
	},
	{
		name: "name",
		displayName: "Name",
		properties: ["name"],
		sortProperty: "name"
	},
	{
		name: "musicbrainzIdentifier",
		displayName: "MusicBrainz identifier",
		properties: ["musicbrainzIdentifier"],
		sortProperty: "musicbrainzIdentifier"
	},
	{
		name: "createdBy",
		displayName: "Created By",
		properties: ["createdBy"],
		sortProperty: "createdBy",
		defaultWidth: 150
	},
	{
		name: "createdAt",
		displayName: "Created At",
		properties: ["createdAt"],
		sortProperty: "createdAt",
		defaultWidth: 150
	}
]);
const filters = ref<TableFilter[]>([
	{
		name: "name",
		displayName: "Name",
		property: "name",
		filterTypes: ["contains", "exact", "regex"],
		defaultFilterType: "contains"
	},
	{
		name: "musicbrainzIdentifier",
		displayName: "MusicBrainz identifier",
		property: "musicbrainzIdentifier",
		filterTypes: ["contains", "exact", "regex"],
		defaultFilterType: "contains"
	},
	{
		name: "createdBy",
		displayName: "Created By",
		property: "createdBy",
		filterTypes: ["contains", "exact", "regex"],
		defaultFilterType: "contains"
	},
	{
		name: "createdAt",
		displayName: "Created At",
		property: "createdAt",
		filterTypes: ["datetimeBefore", "datetimeAfter"],
		defaultFilterType: "datetimeBefore"
	}
]);
const events = ref<TableEvents>({
	adminRoom: "artists",
	updated: {
		event: "admin.artists.updated",
		id: "artist._id",
		item: "artist"
	},
	removed: {
		event: "admin.artists.deleted",
		id: "artistId"
	}
});

const { openModal } = useModalsStore();

const { hasPermission } = useUserAuthStore();

const remove = (id: string) => {
	socket.dispatch(
		"artist.remove",
		id,
		(res: GenericResponse) => new Toast(res.message)
	);
};
</script>

<template>
	<div class="admin-tab container">
		<page-metadata title="Admin | Artists" />
		<div class="card tab-info">
			<div class="info-row">
				<h1>Artists</h1>
				<p>Create and update artists</p>
			</div>
			<div class="button-row">
				<button
					v-if="hasPermission('artists.create')"
					class="is-primary button"
					@click="
						openModal({
							modal: 'editArtist',
							props: { createArtist: true }
						})
					"
				>
					Create Artist
				</button>
			</div>
		</div>
		<advanced-table
			:column-default="columnDefault"
			:columns="columns"
			:filters="filters"
			data-action="artists.getData"
			name="admin-artists"
			:max-width="1200"
			:events="events"
		>
			<template #column-options="slotProps">
				<div class="row-options">
					<button
						v-if="hasPermission('artists.update')"
						class="button is-primary icon-with-button material-icons"
						@click="
							openModal({
								modal: 'editArtist',
								props: { artistId: slotProps.item._id }
							})
						"
						content="Edit Artist"
						v-tippy
					>
						edit
					</button>
					<quick-confirm
						v-if="hasPermission('artist.remove')"
						@confirm="remove(slotProps.item._id)"
						:disabled="slotProps.item.removed"
					>
						<button
							class="button is-danger icon-with-button material-icons"
							content="Remove Artist"
							v-tippy
						>
							delete_forever
						</button>
					</quick-confirm>
				</div>
			</template>
			<template #column-name="slotProps">
				<span :title="slotProps.item.name">{{
					slotProps.item.name
				}}</span>
			</template>
			<template #column-musicbrainzIdentifier="slotProps">
				<span :title="slotProps.item.musicbrainzIdentifier">{{
					slotProps.item.musicbrainzIdentifier
				}}</span>
			</template>
			<template #column-createdBy="slotProps">
				<user-link
					:user-id="slotProps.item.createdBy"
					:alt="slotProps.item.createdBy"
				/>
			</template>
			<template #column-createdAt="slotProps">
				<span :title="new Date(slotProps.item.createdAt).toString()">{{
					utils.getDateFormatted(slotProps.item.createdAt)
				}}</span>
			</template>
		</advanced-table>
	</div>
</template>