feat: add PlusIcon to category creation button and set readOnly for specific fields in form

This commit is contained in:
Ardeman 2025-03-14 13:28:15 +08:00
parent bfa46cdca4
commit 5c20cc48ab
2 changed files with 9 additions and 3 deletions

View File

@ -1,4 +1,8 @@
import { PencilSquareIcon, TrashIcon } from '@heroicons/react/20/solid' import {
PencilSquareIcon,
PlusIcon,
TrashIcon,
} from '@heroicons/react/20/solid'
import DT, { type Config, type ConfigColumns } from 'datatables.net-dt' import DT, { type Config, type ConfigColumns } from 'datatables.net-dt'
import DataTable, { type DataTableSlots } from 'datatables.net-react' import DataTable, { type DataTableSlots } from 'datatables.net-react'
import { useState } from 'react' import { useState } from 'react'
@ -102,7 +106,7 @@ export const CategoriesPage = () => {
size="lg" size="lg"
className="text-md h-[42px] px-4" className="text-md h-[42px] px-4"
> >
Buat Kategori <PlusIcon className="h-8 w-8" /> Buat Kategori
</Button> </Button>
</div> </div>

View File

@ -35,7 +35,7 @@ export const FormCategoryPage = (properties: TProperties) => {
id: categoryData?.id || undefined, id: categoryData?.id || undefined,
code: categoryData?.code || '', code: categoryData?.code || '',
name: categoryData?.name || '', name: categoryData?.name || '',
sequence: categoryData?.sequence || undefined, sequence: categoryData?.sequence ?? undefined,
description: categoryData?.description || '', description: categoryData?.description || '',
}, },
}) })
@ -84,6 +84,7 @@ export const FormCategoryPage = (properties: TProperties) => {
className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100" 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]" labelClassName="text-sm font-medium text-[#363636]"
containerClassName="flex-1" containerClassName="flex-1"
readOnly={categoryData?.code === 'spotlight'}
/> />
<Input <Input
id="code" id="code"
@ -115,6 +116,7 @@ export const FormCategoryPage = (properties: TProperties) => {
className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100" 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]" labelClassName="text-sm font-medium text-[#363636]"
containerClassName="w-44" containerClassName="w-44"
readOnly={categoryData?.code === 'spotlight'}
/> />
<Input <Input
id="description" id="description"