788 lines
29 KiB
Plaintext
788 lines
29 KiB
Plaintext
---
|
|
import { Icon } from 'astro-icon/components'
|
|
import { actions, isInputError } from 'astro:actions'
|
|
import { z } from 'astro:schema'
|
|
|
|
import { adminAnnouncementActions } from '../../../actions/admin/announcement'
|
|
import Button from '../../../components/Button.astro'
|
|
import InputCardGroup from '../../../components/InputCardGroup.astro'
|
|
import InputSubmitButton from '../../../components/InputSubmitButton.astro'
|
|
import InputText from '../../../components/InputText.astro'
|
|
import InputTextArea from '../../../components/InputTextArea.astro'
|
|
import SortArrowIcon from '../../../components/SortArrowIcon.astro'
|
|
import TimeFormatted from '../../../components/TimeFormatted.astro'
|
|
import Tooltip from '../../../components/Tooltip.astro'
|
|
import {
|
|
announcementTypes,
|
|
getAnnouncementTypeInfo,
|
|
zodAnnouncementTypesById,
|
|
} from '../../../constants/announcementTypes'
|
|
import BaseLayout from '../../../layouts/BaseLayout.astro'
|
|
import { zodParseQueryParamsStoringErrors } from '../../../lib/parseUrlFilters'
|
|
import { prisma } from '../../../lib/prisma'
|
|
|
|
import type { AnnouncementType, Prisma } from '@prisma/client'
|
|
|
|
const { data: filters } = zodParseQueryParamsStoringErrors(
|
|
{
|
|
'sort-by': z
|
|
.enum(['title', 'type', 'startDate', 'endDate', 'isActive', 'createdAt'])
|
|
.default('createdAt'),
|
|
'sort-order': z.enum(['asc', 'desc']).default('desc'),
|
|
search: z.string().optional(),
|
|
type: zodAnnouncementTypesById.optional(),
|
|
status: z.enum(['active', 'inactive']).optional(),
|
|
},
|
|
Astro
|
|
)
|
|
|
|
// Set up Prisma orderBy with correct typing
|
|
const prismaOrderBy = {
|
|
[filters['sort-by']]: filters['sort-order'] === 'asc' ? 'asc' : 'desc',
|
|
} as const satisfies Prisma.AnnouncementOrderByWithRelationInput
|
|
|
|
// Build where clause based on filters
|
|
const whereClause: Prisma.AnnouncementWhereInput = {}
|
|
|
|
if (filters.search) {
|
|
whereClause.OR = [{ content: { contains: filters.search, mode: 'insensitive' } }]
|
|
}
|
|
|
|
if (filters.type) {
|
|
whereClause.type = filters.type as AnnouncementType
|
|
}
|
|
|
|
if (filters.status) {
|
|
whereClause.isActive = filters.status === 'active'
|
|
}
|
|
|
|
// Retrieve announcements from the database
|
|
const announcements = await prisma.announcement.findMany({
|
|
where: whereClause,
|
|
orderBy: prismaOrderBy,
|
|
})
|
|
|
|
// Helper for generating sort URLs
|
|
const makeSortUrl = (slug: NonNullable<(typeof filters)['sort-by']>) => {
|
|
const currentSortBy = filters['sort-by']
|
|
const currentSortOrder = filters['sort-order']
|
|
const newSortOrder = currentSortBy === slug && currentSortOrder === 'asc' ? 'desc' : 'asc'
|
|
const searchParams = new URLSearchParams(Astro.url.search)
|
|
searchParams.set('sort-by', slug)
|
|
searchParams.set('sort-order', newSortOrder)
|
|
return `/admin/announcements?${searchParams.toString()}`
|
|
}
|
|
|
|
// Current date for form min values
|
|
const currentDate = new Date().toISOString().slice(0, 16) // Format: YYYY-MM-DDThh:mm
|
|
|
|
// Default new announcement
|
|
const newAnnouncement = {
|
|
content: '',
|
|
type: 'INFO' as const,
|
|
link: null,
|
|
linkText: null,
|
|
startDate: currentDate,
|
|
endDate: '',
|
|
isActive: true as boolean,
|
|
} satisfies Prisma.AnnouncementCreateInput
|
|
|
|
// Get action results
|
|
const createResult = Astro.getActionResult(adminAnnouncementActions.create)
|
|
const updateResult = Astro.getActionResult(adminAnnouncementActions.update)
|
|
const deleteResult = Astro.getActionResult(adminAnnouncementActions.delete)
|
|
const toggleResult = Astro.getActionResult(adminAnnouncementActions.toggleActive)
|
|
|
|
const createInputErrors = isInputError(createResult?.error) ? createResult.error.fields : {}
|
|
|
|
// Add success messages to banners
|
|
Astro.locals.banners.addIfSuccess(createResult, 'Announcement created successfully!')
|
|
Astro.locals.banners.addIfSuccess(updateResult, 'Announcement updated successfully!')
|
|
Astro.locals.banners.addIfSuccess(deleteResult, 'Announcement deleted successfully!')
|
|
Astro.locals.banners.addIfSuccess(
|
|
toggleResult,
|
|
(data) => `Announcement ${data.updatedAnnouncement.isActive ? 'activated' : 'deactivated'} successfully!`
|
|
)
|
|
|
|
// Add error messages to banners
|
|
if (createResult?.error) {
|
|
const err = createResult.error
|
|
Astro.locals.banners.add({
|
|
uiMessage: err.message,
|
|
type: 'error',
|
|
origin: 'action',
|
|
error: err,
|
|
})
|
|
}
|
|
if (updateResult?.error) {
|
|
const err = updateResult.error
|
|
Astro.locals.banners.add({
|
|
uiMessage: err.message,
|
|
type: 'error',
|
|
origin: 'action',
|
|
error: err,
|
|
})
|
|
}
|
|
if (deleteResult?.error) {
|
|
const err = deleteResult.error
|
|
Astro.locals.banners.add({
|
|
uiMessage: err.message,
|
|
type: 'error',
|
|
origin: 'action',
|
|
error: err,
|
|
})
|
|
}
|
|
if (toggleResult?.error) {
|
|
const err = toggleResult.error
|
|
Astro.locals.banners.add({
|
|
uiMessage: err.message,
|
|
type: 'error',
|
|
origin: 'action',
|
|
error: err,
|
|
})
|
|
}
|
|
---
|
|
|
|
<BaseLayout pageTitle="Announcements" widthClassName="max-w-screen-xl">
|
|
<div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between">
|
|
<h1 class="font-title text-2xl font-bold text-white">Announcements</h1>
|
|
<div class="mt-2 flex items-center gap-4 sm:mt-0">
|
|
<span class="text-sm text-zinc-400">{announcements.length} announcements</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-6 rounded-lg border border-zinc-700 bg-zinc-800/50 p-4 shadow-lg">
|
|
<form method="GET" class="grid gap-3 md:grid-cols-3" autocomplete="off">
|
|
<div>
|
|
<label for="search" class="block text-xs font-medium text-zinc-400">Search</label>
|
|
<input
|
|
type="text"
|
|
name="search"
|
|
id="search"
|
|
value={filters.search}
|
|
placeholder="Search by title or content..."
|
|
class="mt-1 w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-200 placeholder-zinc-500 focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label for="type-filter" class="block text-xs font-medium text-zinc-400">Type</label>
|
|
<select
|
|
name="type"
|
|
id="type-filter"
|
|
class="mt-1 w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-200 focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
|
|
>
|
|
<option value="" selected={!filters.type}>All Types</option>
|
|
{
|
|
announcementTypes.map((type) => (
|
|
<option value={type.value} selected={filters.type === type.value}>
|
|
{type.label}
|
|
</option>
|
|
))
|
|
}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="status-filter" class="block text-xs font-medium text-zinc-400">Status</label>
|
|
<div class="mt-1 flex">
|
|
<select
|
|
name="status"
|
|
id="status-filter"
|
|
class="w-full rounded-l-md border border-r-0 border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-200 focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
|
|
>
|
|
<option value="" selected={!filters.status}>All Statuses</option>
|
|
<option value="active" selected={filters.status === 'active'}>Active</option>
|
|
<option value="inactive" selected={filters.status === 'inactive'}>Inactive</option>
|
|
</select>
|
|
<Button
|
|
as="button"
|
|
type="submit"
|
|
color="info"
|
|
variant="solid"
|
|
size="md"
|
|
iconOnly
|
|
icon="ri:search-2-line"
|
|
label="Search"
|
|
class="rounded-l-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Create New Announcement Form -->
|
|
<div class="mb-6">
|
|
<Button
|
|
as="button"
|
|
id="toggle-new-announcement-form"
|
|
color="success"
|
|
variant="solid"
|
|
size="md"
|
|
icon="ri:add-line"
|
|
label="Create"
|
|
class="mb-4"
|
|
/>
|
|
|
|
<div
|
|
id="new-announcement-form"
|
|
class="hidden rounded-lg border border-zinc-700 bg-zinc-800/50 p-4 shadow-lg"
|
|
>
|
|
<h2 class="font-title mb-4 text-lg font-semibold text-blue-400">Create New Announcement</h2>
|
|
<form method="POST" action={actions.admin.announcement.create} class="grid gap-4 md:grid-cols-2">
|
|
<div class="space-y-3 md:col-span-2">
|
|
<InputTextArea
|
|
label="Content"
|
|
name="content"
|
|
error={createInputErrors.content}
|
|
value={newAnnouncement.content}
|
|
inputProps={{
|
|
required: true,
|
|
maxlength: 1000,
|
|
rows: 3,
|
|
placeholder: 'Announcement Content',
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
<InputText
|
|
label="Link"
|
|
name="link"
|
|
error={createInputErrors.link}
|
|
inputProps={{
|
|
type: 'url',
|
|
placeholder: 'https://example.com',
|
|
}}
|
|
/>
|
|
<InputText
|
|
label="Link Text "
|
|
name="linkText"
|
|
error={createInputErrors.linkText}
|
|
inputProps={{
|
|
placeholder: 'Link Text',
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
<InputCardGroup
|
|
label="Type"
|
|
name="type"
|
|
options={announcementTypes.map((type) => ({
|
|
label: type.label,
|
|
value: type.value,
|
|
icon: type.icon,
|
|
}))}
|
|
cardSize="sm"
|
|
required
|
|
selectedValue={newAnnouncement.type}
|
|
/>
|
|
|
|
<InputText
|
|
label="Start Date & Time"
|
|
name="startDate"
|
|
error={createInputErrors.startDate}
|
|
inputProps={{
|
|
type: 'datetime-local',
|
|
required: true,
|
|
value: newAnnouncement.startDate,
|
|
}}
|
|
/>
|
|
|
|
<InputText
|
|
label="End Date & Time"
|
|
name="endDate"
|
|
error={createInputErrors.endDate}
|
|
inputProps={{
|
|
type: 'datetime-local',
|
|
value: newAnnouncement.endDate,
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
<InputCardGroup
|
|
name="isActive"
|
|
label="Status"
|
|
error={createInputErrors.isActive}
|
|
options={[
|
|
{ label: 'Active', value: 'true' },
|
|
{ label: 'Inactive', value: 'false' },
|
|
]}
|
|
selectedValue={newAnnouncement.isActive ? 'true' : 'false'}
|
|
cardSize="sm"
|
|
/>
|
|
|
|
<div class="pt-4">
|
|
<InputSubmitButton label="Create Announcement" icon="ri:save-line" hideCancel />
|
|
<Button
|
|
as="button"
|
|
type="button"
|
|
id="cancel-create"
|
|
color="gray"
|
|
variant="faded"
|
|
size="md"
|
|
label="Cancel"
|
|
class="ml-2"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Delete Confirmation Modal -->
|
|
<dialog
|
|
id="delete-confirmation-modal"
|
|
class="m-auto max-w-md rounded-lg border border-zinc-700 bg-zinc-800 p-0 backdrop:bg-black/70"
|
|
>
|
|
<div class="p-4">
|
|
<div class="mb-4 flex items-center justify-between border-b border-zinc-700 pb-3">
|
|
<h3 class="font-title text-lg font-semibold text-red-400">Confirm Deletion</h3>
|
|
<button type="button" class="close-modal text-zinc-400 hover:text-zinc-200">
|
|
<Icon name="ri:close-line" class="h-6 w-6" />
|
|
</button>
|
|
</div>
|
|
|
|
<p class="mb-4 text-sm text-zinc-300">
|
|
Are you sure you want to delete this announcement? This action cannot be undone.
|
|
</p>
|
|
|
|
<form method="POST" action={actions.admin.announcement.delete} id="delete-form">
|
|
<input type="hidden" name="id" id="delete-id" />
|
|
<div class="flex justify-end gap-2">
|
|
<Button
|
|
as="button"
|
|
type="button"
|
|
class="close-modal"
|
|
color="gray"
|
|
variant="faded"
|
|
size="md"
|
|
label="Cancel"
|
|
/>
|
|
<Button
|
|
as="button"
|
|
type="submit"
|
|
color="danger"
|
|
variant="solid"
|
|
size="md"
|
|
icon="ri:delete-bin-line"
|
|
label="Delete"
|
|
/>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</dialog>
|
|
|
|
<!-- Announcements Table -->
|
|
<div class="rounded-lg border border-zinc-700 bg-zinc-800/50 shadow-lg">
|
|
<div class="sticky top-0 z-10 border-b border-zinc-700 bg-zinc-800/90 px-4 py-3 backdrop-blur-sm">
|
|
<h2 class="font-title font-semibold text-blue-400">Announcements List</h2>
|
|
<div class="mt-1 text-xs text-zinc-400 md:hidden">
|
|
<span>Scroll horizontally to see more →</span>
|
|
</div>
|
|
</div>
|
|
<div class="scrollbar-thin max-w-full overflow-x-auto">
|
|
<div class="min-w-[1200px]">
|
|
<table class="w-full divide-y divide-zinc-700">
|
|
<thead class="bg-zinc-900/30">
|
|
<tr>
|
|
<th
|
|
class="w-[20%] px-4 py-3 text-left text-xs font-medium tracking-wider text-zinc-400 uppercase"
|
|
>
|
|
<a href={makeSortUrl('title')} class="flex items-center hover:text-zinc-200">
|
|
Title
|
|
<SortArrowIcon active={filters['sort-by'] === 'title'} sortOrder={filters['sort-order']} />
|
|
</a>
|
|
</th>
|
|
<th
|
|
class="w-[10%] px-4 py-3 text-left text-xs font-medium tracking-wider text-zinc-400 uppercase"
|
|
>
|
|
<a href={makeSortUrl('type')} class="flex items-center hover:text-zinc-200">
|
|
Type
|
|
<SortArrowIcon active={filters['sort-by'] === 'type'} sortOrder={filters['sort-order']} />
|
|
</a>
|
|
</th>
|
|
<th
|
|
class="w-[15%] px-4 py-3 text-left text-xs font-medium tracking-wider text-zinc-400 uppercase"
|
|
>
|
|
<a href={makeSortUrl('startDate')} class="flex items-center hover:text-zinc-200">
|
|
Start Date
|
|
<SortArrowIcon
|
|
active={filters['sort-by'] === 'startDate'}
|
|
sortOrder={filters['sort-order']}
|
|
/>
|
|
</a>
|
|
</th>
|
|
<th
|
|
class="w-[15%] px-4 py-3 text-left text-xs font-medium tracking-wider text-zinc-400 uppercase"
|
|
>
|
|
<a href={makeSortUrl('endDate')} class="flex items-center hover:text-zinc-200">
|
|
End Date
|
|
<SortArrowIcon
|
|
active={filters['sort-by'] === 'endDate'}
|
|
sortOrder={filters['sort-order']}
|
|
/>
|
|
</a>
|
|
</th>
|
|
<th
|
|
class="w-[10%] px-4 py-3 text-center text-xs font-medium tracking-wider text-zinc-400 uppercase"
|
|
>
|
|
<a
|
|
href={makeSortUrl('isActive')}
|
|
class="flex items-center justify-center hover:text-zinc-200"
|
|
>
|
|
Status
|
|
<SortArrowIcon
|
|
active={filters['sort-by'] === 'isActive'}
|
|
sortOrder={filters['sort-order']}
|
|
/>
|
|
</a>
|
|
</th>
|
|
<th
|
|
class="w-[15%] px-4 py-3 text-left text-xs font-medium tracking-wider text-zinc-400 uppercase"
|
|
>
|
|
<a href={makeSortUrl('createdAt')} class="flex items-center hover:text-zinc-200">
|
|
Created At
|
|
<SortArrowIcon
|
|
active={filters['sort-by'] === 'createdAt'}
|
|
sortOrder={filters['sort-order']}
|
|
/>
|
|
</a>
|
|
</th>
|
|
<th
|
|
class="w-[15%] px-4 py-3 text-center text-xs font-medium tracking-wider text-zinc-400 uppercase"
|
|
>
|
|
Actions
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-zinc-700 bg-zinc-800/10">
|
|
{
|
|
announcements.length === 0 && (
|
|
<tr>
|
|
<td colspan="7" class="px-4 py-8 text-center text-zinc-400">
|
|
<Icon name="ri:information-line" class="mb-2 inline-block size-8" />
|
|
<p class="text-lg">No announcements found matching your criteria.</p>
|
|
<p class="text-sm">Try adjusting your search or filters, or create a new announcement.</p>
|
|
</td>
|
|
</tr>
|
|
)
|
|
}
|
|
{
|
|
announcements.map((announcement) => {
|
|
const announcementTypeInfo = getAnnouncementTypeInfo(announcement.type)
|
|
|
|
return (
|
|
<>
|
|
<tr class="group hover:bg-zinc-700/30">
|
|
<td class="px-4 py-3 text-sm">
|
|
<div class="line-clamp-2 text-zinc-400">{announcement.content}</div>
|
|
</td>
|
|
<td class="px-4 py-3 text-left text-sm">
|
|
<span
|
|
class={`inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-medium ${announcementTypeInfo.classNames.badge}`}
|
|
>
|
|
<Icon name={announcementTypeInfo.icon} class="me-1 size-3" />
|
|
{announcementTypeInfo.label}
|
|
</span>
|
|
</td>
|
|
<td class="px-4 py-3 text-left text-sm text-zinc-300">
|
|
<TimeFormatted date={announcement.startDate} hourPrecision={false} prefix={false} />
|
|
</td>
|
|
<td class="px-4 py-3 text-left text-sm text-zinc-300">
|
|
{announcement.endDate ? (
|
|
<TimeFormatted date={announcement.endDate} hourPrecision={false} prefix={false} />
|
|
) : (
|
|
<span class="text-zinc-500">—</span>
|
|
)}
|
|
</td>
|
|
<td class="px-4 py-3 text-center text-sm">
|
|
<span
|
|
class={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${announcement.isActive ? 'bg-green-900/30 text-green-400' : 'bg-zinc-700/50 text-zinc-400'}`}
|
|
>
|
|
{announcement.isActive ? 'Active' : 'Inactive'}
|
|
</span>
|
|
</td>
|
|
<td class="px-4 py-3 text-left text-sm text-zinc-400">
|
|
<TimeFormatted
|
|
date={announcement.createdAt}
|
|
hourPrecision
|
|
hoursShort
|
|
prefix={false}
|
|
/>
|
|
</td>
|
|
<td class="px-4 py-3">
|
|
<div class="flex justify-center gap-2">
|
|
<Tooltip text="Edit">
|
|
<Button
|
|
as="button"
|
|
type="button"
|
|
data-id={announcement.id}
|
|
class="edit-button"
|
|
color="info"
|
|
variant="faded"
|
|
size="sm"
|
|
iconOnly
|
|
icon="ri:edit-line"
|
|
label="Edit"
|
|
onclick={`document.getElementById('edit-announcement-form-${announcement.id}').classList.toggle('hidden')`}
|
|
/>
|
|
</Tooltip>
|
|
|
|
<Tooltip text={announcement.isActive ? 'Deactivate' : 'Activate'}>
|
|
<form
|
|
method="POST"
|
|
action={actions.admin.announcement.toggleActive}
|
|
class="inline-block"
|
|
data-confirm={`Are you sure you want to ${announcement.isActive ? 'deactivate' : 'activate'} this announcement?`}
|
|
>
|
|
<input type="hidden" name="id" value={announcement.id} />
|
|
<input type="hidden" name="isActive" value={String(!announcement.isActive)} />
|
|
<Button
|
|
as="button"
|
|
type="submit"
|
|
color={announcement.isActive ? 'warning' : 'success'}
|
|
variant="faded"
|
|
size="sm"
|
|
iconOnly
|
|
icon={announcement.isActive ? 'ri:pause-circle-line' : 'ri:play-circle-line'}
|
|
label={announcement.isActive ? 'Deactivate' : 'Activate'}
|
|
/>
|
|
</form>
|
|
</Tooltip>
|
|
|
|
<Tooltip text="Delete">
|
|
<form
|
|
method="POST"
|
|
action={actions.admin.announcement.delete}
|
|
class="inline-block"
|
|
data-confirm="Are you sure you want to delete this announcement?"
|
|
>
|
|
<input type="hidden" name="id" value={announcement.id} />
|
|
<Button
|
|
as="button"
|
|
type="submit"
|
|
color="danger"
|
|
variant="faded"
|
|
size="sm"
|
|
iconOnly
|
|
icon="ri:delete-bin-line"
|
|
label="Delete"
|
|
/>
|
|
</form>
|
|
</Tooltip>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr id={`edit-announcement-form-${announcement.id}`} class="hidden bg-zinc-700/20">
|
|
<td colspan="7" class="p-4">
|
|
<h3 class="font-title text-md mb-3 font-semibold text-blue-300">
|
|
Edit: {announcement.content}
|
|
</h3>
|
|
<form
|
|
method="POST"
|
|
action={actions.admin.announcement.update}
|
|
class="grid gap-4 md:grid-cols-2"
|
|
>
|
|
<input type="hidden" name="id" value={announcement.id} />
|
|
|
|
<div class="space-y-3 md:col-span-2">
|
|
<InputTextArea
|
|
label="Content"
|
|
name="content"
|
|
value={announcement.content}
|
|
inputProps={{
|
|
required: true,
|
|
maxlength: 1000,
|
|
rows: 3,
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
<InputText
|
|
label="Link"
|
|
name="link"
|
|
inputProps={{
|
|
type: 'url',
|
|
placeholder: 'https://example.com',
|
|
value: announcement.link,
|
|
}}
|
|
/>
|
|
<InputText
|
|
label="Link Text"
|
|
name="linkText"
|
|
inputProps={{
|
|
placeholder: 'Link Text',
|
|
value: announcement.linkText,
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
<InputCardGroup
|
|
label="Type"
|
|
name="type"
|
|
options={announcementTypes.map((type) => ({
|
|
label: type.label,
|
|
value: type.value,
|
|
icon: type.icon,
|
|
}))}
|
|
cardSize="sm"
|
|
required
|
|
selectedValue={announcement.type}
|
|
/>
|
|
|
|
<InputText
|
|
label="Start Date & Time"
|
|
name="startDate"
|
|
inputProps={{
|
|
type: 'datetime-local',
|
|
required: true,
|
|
value: new Date(announcement.startDate).toISOString().slice(0, 16),
|
|
}}
|
|
/>
|
|
<InputText
|
|
label="End Date & Time"
|
|
name="endDate"
|
|
inputProps={{
|
|
type: 'datetime-local',
|
|
value: announcement.endDate
|
|
? new Date(announcement.endDate).toISOString().slice(0, 16)
|
|
: '',
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
<InputCardGroup
|
|
name="isActive"
|
|
label="Status"
|
|
options={[
|
|
{ label: 'Active', value: 'true' },
|
|
{ label: 'Inactive', value: 'false' },
|
|
]}
|
|
selectedValue={announcement.isActive ? 'true' : 'false'}
|
|
cardSize="sm"
|
|
/>
|
|
<div class="pt-4">
|
|
<InputSubmitButton label="Save Changes" icon="ri:save-line" hideCancel />
|
|
<Button
|
|
as="button"
|
|
type="button"
|
|
label="Cancel"
|
|
color="gray"
|
|
variant="faded"
|
|
size="md"
|
|
onclick={`document.getElementById('edit-announcement-form-${announcement.id}').classList.toggle('hidden')`}
|
|
class="ml-2"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
</>
|
|
)
|
|
})
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</BaseLayout>
|
|
|
|
<style>
|
|
.text-2xs {
|
|
font-size: 0.6875rem;
|
|
line-height: 1rem;
|
|
}
|
|
.scrollbar-thin::-webkit-scrollbar {
|
|
height: 6px;
|
|
width: 6px;
|
|
}
|
|
.scrollbar-thin::-webkit-scrollbar-track {
|
|
background: rgba(30, 41, 59, 0.2);
|
|
border-radius: 3px;
|
|
}
|
|
.scrollbar-thin::-webkit-scrollbar-thumb {
|
|
background: rgba(75, 85, 99, 0.5);
|
|
border-radius: 3px;
|
|
}
|
|
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(100, 116, 139, 0.6);
|
|
}
|
|
@media (max-width: 768px) {
|
|
.scrollbar-thin {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(75, 85, 99, 0.5) rgba(30, 41, 59, 0.2);
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
}
|
|
|
|
/* Fix for date input appearance in dark mode */
|
|
input[type='date'] {
|
|
color-scheme: dark;
|
|
}
|
|
input[type='datetime-local'] {
|
|
color-scheme: dark;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Toggle Create Form
|
|
const toggleFormBtn = document.getElementById('toggle-new-announcement-form')
|
|
const newAnnouncementForm = document.getElementById('new-announcement-form')
|
|
const cancelCreateBtn = document.getElementById('cancel-create')
|
|
|
|
toggleFormBtn?.addEventListener('click', () => {
|
|
newAnnouncementForm?.classList.toggle('hidden')
|
|
})
|
|
|
|
cancelCreateBtn?.addEventListener('click', () => {
|
|
newAnnouncementForm?.classList.add('hidden')
|
|
})
|
|
|
|
// Delete Modal functionality
|
|
const deleteModal = document.getElementById('delete-confirmation-modal') as HTMLDialogElement
|
|
const deleteButtons = document.querySelectorAll('.delete-button')
|
|
// const deleteForm = document.getElementById('delete-form') as HTMLFormElement // Not strictly needed if not manipulating it
|
|
|
|
deleteButtons.forEach((button) => {
|
|
button.addEventListener('click', () => {
|
|
const id = button.getAttribute('data-id')
|
|
const deleteIdInput = document.getElementById('delete-id') as HTMLInputElement
|
|
if (deleteIdInput) {
|
|
deleteIdInput.value = id || ''
|
|
}
|
|
deleteModal?.showModal()
|
|
})
|
|
})
|
|
|
|
// Close Modal buttons
|
|
const closeModalButtons = document.querySelectorAll('.close-modal')
|
|
closeModalButtons.forEach((button) => {
|
|
button.addEventListener('click', () => {
|
|
const modal = button.closest('dialog')
|
|
modal?.close()
|
|
})
|
|
})
|
|
|
|
// Close modals when clicking outside
|
|
const dialogs = document.querySelectorAll('dialog')
|
|
dialogs.forEach((dialog) => {
|
|
dialog.addEventListener('click', (e) => {
|
|
const rect = dialog.getBoundingClientRect()
|
|
const isInDialog =
|
|
rect.top <= e.clientY &&
|
|
e.clientY <= rect.top + rect.height &&
|
|
rect.left <= e.clientX &&
|
|
e.clientX <= rect.left + rect.width
|
|
if (!isInDialog) {
|
|
dialog.close()
|
|
}
|
|
})
|
|
})
|
|
</script>
|