feat: implement getTags API and integrate with content creation form
This commit is contained in:
Ardeman
@@ -1,45 +1,156 @@
|
||||
import { Field, Input, Label, Select } from '@headlessui/react'
|
||||
import { DevTool } from '@hookform/devtools'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useFetcher, useRouteLoaderData } from 'react-router'
|
||||
import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
|
||||
import { z } from 'zod'
|
||||
|
||||
import { SearchIcon } from '~/components/icons/search'
|
||||
import { Button } from '~/components/ui/button'
|
||||
import { Combobox } from '~/components/ui/combobox'
|
||||
import { Input } from '~/components/ui/input'
|
||||
import DefaultTextEditor from '~/components/ui/text-editor'
|
||||
import { TitleDashboard } from '~/components/ui/title-dashboard'
|
||||
import type { loader } from '~/routes/_admin.lg-admin'
|
||||
|
||||
export const contentSchema = z.object({
|
||||
categories: z
|
||||
.array(
|
||||
z
|
||||
.object({
|
||||
id: z.string(),
|
||||
code: z.string(),
|
||||
name: z.string(),
|
||||
})
|
||||
.optional()
|
||||
.nullable(),
|
||||
)
|
||||
.refine((data) => !!data, {
|
||||
message: 'Please select a category',
|
||||
}),
|
||||
tags: z.array(
|
||||
z
|
||||
.object({
|
||||
id: z.string(),
|
||||
code: z.string(),
|
||||
name: z.string(),
|
||||
})
|
||||
.optional()
|
||||
.nullable(),
|
||||
),
|
||||
title: z.string().min(1, {
|
||||
message: 'Title is required',
|
||||
}),
|
||||
content: z.string().min(1, {
|
||||
message: 'Content is required',
|
||||
}),
|
||||
featured_image: z.string().optional(),
|
||||
is_premium: z.boolean().optional(),
|
||||
live_at: z.string().min(1, {
|
||||
message: 'Tanggal live is required',
|
||||
}),
|
||||
})
|
||||
|
||||
export type TContentSchema = z.infer<typeof contentSchema>
|
||||
|
||||
export const CreateContentsPage = () => {
|
||||
const fetcher = useFetcher()
|
||||
const loaderData = useRouteLoaderData<typeof loader>('routes/_admin.lg-admin')
|
||||
const categories = loaderData?.categoriesData
|
||||
const tags = loaderData?.tagsData
|
||||
const [error, setError] = useState<string>()
|
||||
const [disabled, setDisabled] = useState(false)
|
||||
|
||||
const formMethods = useRemixForm<TContentSchema>({
|
||||
mode: 'onSubmit',
|
||||
fetcher,
|
||||
resolver: zodResolver(contentSchema),
|
||||
})
|
||||
|
||||
const { handleSubmit, control, watch } = formMethods
|
||||
const watchCategories = watch('categories')
|
||||
const watchTags = watch('tags')
|
||||
|
||||
useEffect(() => {
|
||||
if (!fetcher.data?.success) {
|
||||
setError(fetcher.data?.message)
|
||||
setDisabled(false)
|
||||
return
|
||||
}
|
||||
|
||||
setDisabled(true)
|
||||
setError(undefined)
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [fetcher])
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<TitleDashboard title="Buat Artikel" />
|
||||
<div className="mb-8 flex items-center gap-5 rounded-lg bg-gray-50 text-[#363636]">
|
||||
<div className="w-[400px]">
|
||||
<Field>
|
||||
<Label className="mb-2 block text-sm font-medium">Pilih Tags</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Cari Tags"
|
||||
className="w-full rounded-lg bg-white p-2 pr-10 pl-4 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
|
||||
/>
|
||||
<div className="absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<SearchIcon className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</Field>
|
||||
</div>
|
||||
<RemixFormProvider {...formMethods}>
|
||||
<fetcher.Form
|
||||
method="post"
|
||||
onSubmit={handleSubmit}
|
||||
action="/actions/admin/contents/create"
|
||||
className="space-y-4"
|
||||
>
|
||||
{error && (
|
||||
<div className="text-sm text-red-500 capitalize">{error}</div>
|
||||
)}
|
||||
<div className="flex items-end justify-between gap-4">
|
||||
<Combobox
|
||||
multiple
|
||||
id="categories"
|
||||
name="categories"
|
||||
label="Kategori"
|
||||
placeholder={
|
||||
watchCategories
|
||||
? watchCategories.map((category) => category?.name).join(', ')
|
||||
: 'Pilih Kategori'
|
||||
}
|
||||
options={categories}
|
||||
className="border-0 bg-white shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
|
||||
labelClassName="text-sm font-medium text-[#363636]"
|
||||
containerClassName="flex-1"
|
||||
/>
|
||||
<Combobox
|
||||
multiple
|
||||
id="tags"
|
||||
name="tags"
|
||||
label="Tags"
|
||||
placeholder={
|
||||
watchTags
|
||||
? watchTags.map((tag) => tag?.name).join(', ')
|
||||
: 'Pilih Tags'
|
||||
}
|
||||
options={tags}
|
||||
className="border-0 bg-white shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
|
||||
labelClassName="text-sm font-medium text-[#363636]"
|
||||
containerClassName="flex-1"
|
||||
/>
|
||||
<Input
|
||||
id="live_at"
|
||||
label="Tanggal Live"
|
||||
placeholder="Pilih Tanggal"
|
||||
name="live_at"
|
||||
type="date"
|
||||
className="border-0 bg-white shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
|
||||
/>
|
||||
<Button
|
||||
disabled={disabled}
|
||||
type="submit"
|
||||
size="lg"
|
||||
className="text-md h-[42px] rounded-md"
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="w-[235px]">
|
||||
<Field>
|
||||
<Label className="mb-2 block text-sm font-medium">Status</Label>
|
||||
<Select className="w-full rounded-lg bg-white p-2 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none">
|
||||
<option>Pilih Status</option>
|
||||
<option>Aktif</option>
|
||||
<option>Nonaktif</option>
|
||||
</Select>
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
<section>
|
||||
<DefaultTextEditor />
|
||||
</section>
|
||||
</fetcher.Form>
|
||||
</RemixFormProvider>
|
||||
|
||||
<section>
|
||||
<DefaultTextEditor />
|
||||
</section>
|
||||
<DevTool control={control} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -91,7 +91,7 @@ export const ContentsPage = () => {
|
||||
<Button
|
||||
as={Link}
|
||||
to="/lg-admin/contents/create"
|
||||
className="text-md rounded-md"
|
||||
className="text-md h-[42px] rounded-md"
|
||||
size="lg"
|
||||
>
|
||||
Create New
|
||||
|
||||
Reference in New Issue
Block a user