Merge remote-tracking branch 'origin/master' into feature/slicing

app/pages/contents-create/index.tsx

@@ -1,45 +1,205 @@
-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, useNavigate, useRouteLoaderData } from 'react-router'
+import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
+import { z } from 'zod'
 
-import { SearchIcon } from '~/components/icons/search'
-import DefaultTextEditor from '~/components/ui/text-editor'
+import { TextEditor } from '~/components/text-editor'
+import { Button } from '~/components/ui/button'
+import { Combobox } from '~/components/ui/combobox'
+import { Input } from '~/components/ui/input'
+import { Switch } from '~/components/ui/switch'
 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.length, {
+      message: 'Please select a category',
+    }),
+  tags: z
+    .array(
+      z
+        .object({
+          id: z.string(),
+          code: z.string(),
+          name: z.string(),
+        })
+        .optional()
+        .nullable(),
+    )
+    .optional(),
+  title: z.string().min(1, {
+    message: 'Judul is required',
+  }),
+  content: z.string().min(1, {
+    message: 'Konten 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 navigate = useNavigate()
+  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),
+    defaultValues: {
+      categories: [],
+      tags: [],
+      title: '',
+      content: '',
+      featured_image: '',
+      is_premium: false,
+      live_at: '',
+    },
+  })
+
+  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
+    }
+
+    navigate('/lg-admin/contents')
+    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">
+            <Input
+              id="title"
+              label="Judul"
+              placeholder="Masukkan Judul"
+              name="title"
+              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="featured_image"
+              label="Gambar Unggulan"
+              placeholder="Masukkan Gambar Unggulan"
+              name="featured_image"
+              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"
+            />
+            <Button
+              disabled={disabled}
+              type="submit"
+              size="lg"
+              className="text-md h-[42px] rounded-md"
+            >
+              Save
+            </Button>
+          </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"
+              labelClassName="text-sm font-medium text-[#363636]"
+            />
+            <Switch
+              id="is_premium"
+              name="is_premium"
+              label="Premium"
+              labelClassName="text-sm font-medium text-[#363636]"
+              className="h-[42px]"
+            />
+          </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>
+          <TextEditor
+            id="content"
+            name="content"
+            label="Konten"
+            placeholder="Masukkan Konten"
+            className="shadow"
+            inputClassName="bg-white focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none border-0"
+            labelClassName="text-sm font-medium text-[#363636]"
+            category="content"
+          />
+        </fetcher.Form>
+      </RemixFormProvider>
 
-      <section>
-        <DefaultTextEditor />
-      </section>
+      <DevTool control={control} />
     </div>
   )
 }

app/pages/dashboard-contents/data.ts

@@ -1,4 +1,4 @@
-type TContens = {
+type TContents = {
   id: number
   createdAt: string
   author: string
@@ -8,7 +8,7 @@ type TContens = {
   status: string
 }
 
-export const CONTENTS: TContens[] = [
+export const CONTENTS: TContents[] = [
   {
     id: 1,
     createdAt: '24/10/2024',

app/pages/dashboard-contents/index.tsx

@@ -1,37 +1,39 @@
-import { Field, Input, Label, Select } from '@headlessui/react'
 import DT from 'datatables.net-dt'
 import DataTable from 'datatables.net-react'
-import { Link } from 'react-router'
+import { Link, useRouteLoaderData } from 'react-router'
 
-import { SearchIcon } from '~/components/icons/search'
 import { Button } from '~/components/ui/button'
 import { UiTable } from '~/components/ui/table'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
-
-import { CONTENTS } from './data'
+import type { loader } from '~/routes/_admin.lg-admin._dashboard.contents'
 
 export const ContentsPage = () => {
+  const loaderData = useRouteLoaderData<typeof loader>(
+    'routes/_admin.lg-admin._dashboard.contents',
+  )
+  const newsData = loaderData?.newsData
+
   DataTable.use(DT)
-  const dataTable = CONTENTS
+  const dataTable = newsData
   const dataColumns = [
     { title: 'No', data: 'id' },
-    { title: 'Tanggal Kontent', data: 'createdAt' },
-    { title: 'Nama Penulis', data: 'author' },
+    { title: 'Tanggal Konten', data: 'created_at' },
+    { title: 'Nama Penulis', data: 'author_id' },
     { title: 'Judul', data: 'title' },
-    { title: 'Kategori', data: 'category' },
+    // { title: 'Kategori', data: 'category' },
     {
       title: 'Tags',
-      data: 'tags',
+      data: 'is_premium',
       render: (value: string) => {
-        return value === 'Normal'
-          ? `<span class="bg-[#F5F5F5] text-[#4C5CA0] px-2 py-1 rounded-md">${value}</span>`
-          : `<span class="bg-[#FFFCAF] px-2 py-1 rounded-md">${value}</span>`
+        return value
+          ? `<span class="bg-[#FFFCAF] text-[#DBCA6E] px-4 py-2 rounded-full">Premium</span>`
+          : `<span class="bg-[#F5F5F5] text-[#4C5CA0] px-4 py-2 rounded-full">Normal</span>`
       },
     },
-    {
-      title: 'Action',
-      data: 'id',
-    },
+    // {
+    //   title: 'Action',
+    //   data: 'id',
+    // },
   ]
   const dataSlot = {
     6: (value: string | number) => {
@@ -57,41 +59,12 @@ export const ContentsPage = () => {
   return (
     <div className="relative">
       <TitleDashboard title="Konten" />
-      <div className="mb-8 flex items-end justify-between">
-        <div className="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">
-                Cari User
-              </Label>
-              <div className="relative">
-                <Input
-                  type="text"
-                  placeholder="Cari Nama"
-                  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>
-
-          <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>
+      <div className="mb-8 flex items-end justify-between gap-5">
+        <div className="flex-1">{/* TODO: Filter */}</div>
         <Button
           as={Link}
           to="/lg-admin/contents/create"
-          className="text-md rounded-md"
+          className="text-md h-[42px] rounded-md"
           size="lg"
         >
           Create New