soc_site-astro/src/pages/admin/album/[id].astro
2025-03-31 17:40:03 -06:00

92 lines
3.8 KiB
Text

---
import { AlbumStatus } from '@prisma/client'
import AsyncMultiSelect from 'components/form/AsyncMultiSelect'
import { Input, InputArea, InputLabel, InputSelect } from 'components/form/Input'
import Base from 'layouts/base.astro'
import prismaClient from 'utils/prisma-client'
const { user, permissions } = Astro.locals
if (!user || !permissions.includes('UPDATE')) return Astro.redirect('/404')
const albumId = parseInt(Astro.params.id as string)
const album = await prismaClient.albums.findUnique({ where: { id: albumId } })
if (!album) {
return Astro.redirect('/404')
}
---
<!--
discs: { createMany: { data: body.discs } },
relatedAlbums: { create: body.related.map((id) => ({ relatedAlbum: { connect: { id } } })) } -->
<Base>
<div class='flex flex-col w-full'>
<div class='w-full min-h-100vh mx-auto max-w-[1140px]'>
<div class='mt-4 p-4 bg-dark rounded-md mx-2'>
<div class='grid grid-cols-4 gap-4'>
<Input dark defaultValue={album.title} name='title' label='Title' />
<Input dark defaultValue={album.subTitle} name='subTitle' label='Subtitle' />
<Input
dark
defaultValue={album.releaseDate?.toISOString().slice(0, 10)}
name='releaseDate'
type='date'
label='Release Date'
/>
<Input dark defaultValue={album.label} name='label' label='Label' />
<Input dark defaultValue={album.vgmdb} name='vgmdb' label='VGMDB' />
<Input dark defaultValue={album.description} name='description' label='Description' />
<InputSelect dark name='status' label='Status'>
<option value={AlbumStatus.HIDDEN} selected={album.status === AlbumStatus.HIDDEN}>Hidden</option>
<option value={AlbumStatus.SHOW} selected={album.status === AlbumStatus.SHOW}>Show</option>
</InputSelect>
<div class='flex flex-col'>
<InputLabel dark name='animations'>Animations</InputLabel>
<AsyncMultiSelect
client:only='react'
name='animations'
url='/api/anim/find'
nameColumn='title'
className='rounded-md py-2 h-full'
/>
</div>
<InputArea dark defaultValue={album.description} name='artists' label='Artists' />
<InputSelect dark name='categories' label='Categories'>
<option value='Game' selected={album.status === AlbumStatus.HIDDEN}>Game</option>
<option value='Animation' selected={album.status === AlbumStatus.SHOW}>Animation</option>
</InputSelect>
<InputSelect dark name='classifications' label='Classifications'>
<option value='Arrangement'>Arrangement</option>
<option value='Drama'>Drama</option>
<option value='GameRip'>GameRip</option>
<option value='Live Event'>Live Event</option>
<option value='Original Soundtrack'>Original Soundtrack</option>
<option value='Vocal'>Vocal</option>
</InputSelect>
<div class='flex flex-col'>
<InputLabel dark name='games'>Games</InputLabel>
<AsyncMultiSelect
client:only='react'
name='games'
url='/api/game/find'
valueColumn='slug'
nameColumn='title'
className='rounded-md py-2 h-full'
/>
</div>
<div class='flex flex-col'>
<InputLabel dark name='platforms'>Platforms</InputLabel>
<AsyncMultiSelect
client:only='react'
name='platforms'
url='/api/platform/find'
nameColumn='name'
className='rounded-md py-2 h-full'
/>
</div>
</div>
</div>
</div>
</div>
</Base>