132 lines
2.3 KiB
Vue
132 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import type { Field } from "~/components/Admin/ModalForm.vue"
|
|
import type { Row } from "~/ui/Table.vue"
|
|
|
|
const { data, refresh } = useApiFetch<Track[]>("/all/artists")
|
|
const toast = useToast()
|
|
|
|
const tableRows: Row[] = [
|
|
{
|
|
name: "_id",
|
|
displayName: "ID",
|
|
},
|
|
{
|
|
name: "file",
|
|
displayName: "Cover",
|
|
type: "image",
|
|
prefix: `${BACKEND_SERVE}/static/`,
|
|
},
|
|
{
|
|
name: "name",
|
|
displayName: "Name",
|
|
},
|
|
{
|
|
name: "action",
|
|
},
|
|
]
|
|
|
|
const modalFields: Field[] = [
|
|
{ key: "name", label: "Name" },
|
|
{ key: "file", label: "Cover file", type: "file" },
|
|
]
|
|
|
|
const showModal = ref<boolean>(false)
|
|
const item = ref<Track | undefined>(undefined)
|
|
|
|
const save = async (value: any) => {
|
|
if (value._id) {
|
|
try {
|
|
await cfetch("/admin/artist", {
|
|
method: "PATCH",
|
|
data: value,
|
|
params: { id: value._id },
|
|
forceFormData: true,
|
|
})
|
|
|
|
toast.show("Artist updated successfully", "success")
|
|
} catch {
|
|
toast.show("Failed to update artist", "error")
|
|
|
|
return false
|
|
}
|
|
} else {
|
|
try {
|
|
await cfetch("/admin/artist", {
|
|
method: "POST",
|
|
data: value,
|
|
})
|
|
|
|
toast.show("Artist added successfully", "success")
|
|
} catch {
|
|
toast.show("Failed to add artist", "error")
|
|
|
|
return false
|
|
}
|
|
}
|
|
|
|
refresh()
|
|
|
|
return true
|
|
}
|
|
|
|
/**
|
|
* @param id Set it to a value to make it edit instead of creating a new one
|
|
*/
|
|
const show = (id?: string) => {
|
|
if (!id) {
|
|
item.value = undefined
|
|
showModal.value = true
|
|
|
|
return
|
|
}
|
|
|
|
const curItem: any = data.value.filter((i) => i._id == id)[0]
|
|
|
|
if (!curItem) return
|
|
|
|
item.value = curItem
|
|
|
|
showModal.value = true
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<h1 class="title">Manage artists</h1>
|
|
|
|
<Table :rows="tableRows" :data="data" class="table">
|
|
<template #action="{ item, index }">
|
|
<div class="action">
|
|
<Button @click="show(item._id)">Edit</Button>
|
|
<Button @click="">Delete</Button>
|
|
</div>
|
|
</template>
|
|
</Table>
|
|
<Button @click="show()">Add a new artist</Button>
|
|
|
|
<AdminModalForm
|
|
v-model:open="showModal"
|
|
@save="save"
|
|
:fields="modalFields"
|
|
:item="item"
|
|
:title="item ? 'Edit artist' : 'Add new artist'"
|
|
/>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@use "@/styles/util" as *;
|
|
|
|
.title {
|
|
@include fontSize(24px);
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
.action {
|
|
display: flex;
|
|
gap: 0.2rem;
|
|
}
|
|
|
|
.table {
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
</style>
|