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

2025-03-08 04:34:08 +07:00
parent 3a81e7b3db 87156e93ee
commit b7f51ea46f
22 changed files with 308 additions and 137 deletions
@@ -2,6 +2,7 @@ import DT from 'datatables.net-dt'
 import DataTable from 'datatables.net-react'
 import { Link, useRouteLoaderData } from 'react-router'

+import type { TCategoryResponse } from '~/apis/common/get-categories'
 import { Button } from '~/components/ui/button'
 import { UiTable } from '~/components/ui/table'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
@@ -13,26 +14,33 @@ export const CategoriesPage = () => {
  const categoriesData = loaderData?.dataCategories

  DataTable.use(DT)
-  const dataTable = categoriesData
+  const dataTable = categoriesData?.sort((a, b) => {
+    if (a.sequence === null) return 1
+    if (b.sequence === null) return -1
+    return a.sequence - b.sequence
+  })
  const dataColumns = [
    {
      title: 'No',
      render: (
        data: unknown,
        type: unknown,
-        row: unknown,
+        row: TCategoryResponse,
        meta: { row: number },
      ) => {
-        return meta.row + 1
+        return `<div>${meta.row + 1}</div> ${
+          row.sequence === null
+            ? ''
+            : `<pre class="text-sm text-[#7C7C7C] inline">Urutan: ${row.sequence}</pre>`
+        }`
      },
    },
    {
-      title: 'Nama',
-      data: 'name',
+      title: 'Kategori',
    },
    {
-      title: 'Kode',
-      data: 'code',
+      title: 'Deskripsi',
+      data: 'description',
    },
    {
      title: 'Action',
@@ -40,6 +48,12 @@ export const CategoriesPage = () => {
    },
  ]
  const dataSlot = {
+    1: (_value: unknown, _type: unknown, data: TCategoryResponse) => (
+      <div>
+        <div>{data.name}</div>
+        <pre className="text-sm text-[#7C7C7C]">Kode: {data.code}</pre>
+      </div>
+    ),
    3: (value: string) => (
      <Button
        as="a"
@@ -1,89 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useEffect, useState } from 'react'
-import { useFetcher, useNavigate } from 'react-router'
-import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
-import { z } from 'zod'
-
-import { Button } from '~/components/ui/button'
-import { Input } from '~/components/ui/input'
-import { TitleDashboard } from '~/components/ui/title-dashboard'
-
-export const createCategorySchema = z.object({
-  code: z.string().min(3, 'Kode minimal 3 karakter'),
-  name: z.string().min(3, 'Nama minimal 3 karakter'),
-})
-export type TCategorySchema = z.infer<typeof createCategorySchema>
-
-export const CreateCategoryPage = () => {
-  const fetcher = useFetcher()
-  const navigate = useNavigate()
-  const formMethods = useRemixForm<TCategorySchema>({
-    mode: 'onSubmit',
-    fetcher,
-    resolver: zodResolver(createCategorySchema),
-  })
-  const [error, setError] = useState<string>()
-  const [disabled, setDisabled] = useState(false)
-
-  const { handleSubmit } = formMethods
-
-  useEffect(() => {
-    if (!fetcher.data?.success) {
-      setError(fetcher.data?.message)
-      setDisabled(false)
-      return
-    }
-    navigate('/lg-admin/categories')
-    setDisabled(true)
-    setError(undefined)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetcher])
-
-  return (
-    <div className="relative">
-      <TitleDashboard title="Buat Kategori" />
-      <div>
-        <RemixFormProvider {...formMethods}>
-          <fetcher.Form
-            method="post"
-            onSubmit={handleSubmit}
-            action="/actions/admin/categories/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="name"
-                label="Nama Kategori"
-                placeholder="Masukkan Nama Kategori"
-                name="name"
-                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="code"
-                label="Kode Kategori"
-                placeholder="Masukkan Kode Kategori"
-                name="code"
-                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>
-          </fetcher.Form>
-        </RemixFormProvider>
-      </div>
-    </div>
-  )
-}
@@ -1,5 +0,0 @@
-import React from 'react'
-
-export const UpdateCategoryPage = () => {
-  return <div>UpdateCategoryPage</div>
-}
@@ -0,0 +1,133 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useEffect, useState } from 'react'
+import { useFetcher, useNavigate } from 'react-router'
+import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
+import { z } from 'zod'
+
+import type { TCategoryResponse } from '~/apis/common/get-categories'
+import { Button } from '~/components/ui/button'
+import { Input } from '~/components/ui/input'
+import { TitleDashboard } from '~/components/ui/title-dashboard'
+import { urlFriendlyCode } from '~/utils/formatter'
+
+export const createCategorySchema = z.object({
+  id: z.string().optional(),
+  name: z.string().min(3, 'Nama minimal 3 karakter'),
+  code: z.string(),
+  sequence: z.preprocess(Number, z.number().optional()),
+  description: z.string(),
+})
+export type TCategorySchema = z.infer<typeof createCategorySchema>
+type TProperties = {
+  categoryData?: TCategoryResponse
+}
+
+export const FormCategoryPage = (properties: TProperties) => {
+  const { categoryData } = properties || {}
+  const fetcher = useFetcher()
+  const navigate = useNavigate()
+  const formMethods = useRemixForm<TCategorySchema>({
+    mode: 'onSubmit',
+    fetcher,
+    resolver: zodResolver(createCategorySchema),
+    values: {
+      id: categoryData?.id || undefined,
+      code: categoryData?.code || '',
+      name: categoryData?.name || '',
+      sequence: categoryData?.sequence || undefined,
+      description: categoryData?.description || '',
+    },
+  })
+  const [error, setError] = useState<string>()
+  const [disabled, setDisabled] = useState(false)
+
+  const { handleSubmit, watch, setValue } = formMethods
+  const watchName = watch('name')
+
+  useEffect(() => {
+    if (!fetcher.data?.success) {
+      setError(fetcher.data?.message)
+      setDisabled(false)
+      return
+    }
+    navigate('/lg-admin/categories')
+    setDisabled(true)
+    setError(undefined)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetcher])
+
+  useEffect(() => {
+    setValue('code', urlFriendlyCode(watchName))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [watchName])
+
+  return (
+    <div className="relative">
+      <TitleDashboard title={`${categoryData ? 'Update' : 'Buat'} Kategori`} />
+      <div>
+        <RemixFormProvider {...formMethods}>
+          <fetcher.Form
+            method="post"
+            onSubmit={handleSubmit}
+            action={`/actions/admin/categories/${categoryData ? 'update' : '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="name"
+                label="Kategori"
+                placeholder="Masukkan Nama Kategori"
+                name="name"
+                className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
+                labelClassName="text-sm font-medium text-[#363636]"
+                containerClassName="flex-1"
+              />
+              <Input
+                id="code"
+                label="Kode"
+                placeholder="Masukkan Kode Kategori"
+                readOnly
+                name="code"
+                className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
+                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">
+              <Input
+                id="sequence"
+                label="Urutan"
+                placeholder="Urutan Kategori"
+                name="sequence"
+                type="number"
+                className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
+                labelClassName="text-sm font-medium text-[#363636]"
+                containerClassName="w-44"
+              />
+              <Input
+                id="description"
+                label="Deskripsi"
+                placeholder="Masukkan Deskripsi Kategori"
+                name="description"
+                className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
+                labelClassName="text-sm font-medium text-[#363636]"
+                containerClassName="flex-1"
+              />
+            </div>
+          </fetcher.Form>
+        </RemixFormProvider>
+      </div>
+    </div>
+  )
+}
@@ -60,7 +60,7 @@ type TProperties = {
  newsData?: z.infer<typeof newsResponseSchema>
 }

-export const ContentsFormPage = (properties: TProperties) => {
+export const FormContentsPage = (properties: TProperties) => {
  const { newsData } = properties || {}
  const fetcher = useFetcher()
  const navigate = useNavigate()
@@ -75,7 +75,7 @@ export const ContentsFormPage = (properties: TProperties) => {
    fetcher,
    resolver: zodResolver(contentSchema),
    values: {
-      id: newsData?.id || '',
+      id: newsData?.id || undefined,
      categories: newsData?.categories || [],
      tags: newsData?.tags || [],
      title: newsData?.title || '',
@@ -124,16 +124,17 @@ export const ContentsFormPage = (properties: TProperties) => {
              label="Judul"
              placeholder="Masukkan Judul"
              name="title"
-              className="border-0 bg-white shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
+              className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
              labelClassName="text-sm font-medium text-[#363636]"
              containerClassName="flex-1"
+              disabled={!!newsData}
            />
            <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"
+              className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
              labelClassName="text-sm font-medium text-[#363636]"
              containerClassName="flex-1"
            />
@@ -1,18 +1,17 @@
-import { useLocation, useRouteLoaderData } from 'react-router'
+import { useParams, useRouteLoaderData } from 'react-router'

 import { Card } from '~/components/ui/card'
 import { CategorySection } from '~/components/ui/category-section'
-import { DUMMY_DESCRIPTION } from '~/data/contents'
 import type { loader } from '~/routes/_news'

 import { BERITA } from './data'

 export const NewsCategoriesPage = () => {
-  const { pathname } = useLocation()
-  const code = pathname.split('/')[2]
+  const parameters = useParams()
  const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
-  const { name } =
-    loaderData?.categoriesData.find((item) => item.code === code) || {}
+  const { name, description } =
+    loaderData?.categoriesData.find((item) => item.code === parameters.code) ||
+    {}
  const { items } = BERITA

  return (
@@ -20,7 +19,7 @@ export const NewsCategoriesPage = () => {
      <Card>
        <CategorySection
          title={name || ''}
-          description={DUMMY_DESCRIPTION}
+          description={description || ''}
          items={items}
        />
      </Card>