feat(FE-43): create NonstocksTable component

2026-05-20 13:32:00 +00:00 · 2025-10-08 15:00:30 +07:00
parent 96fea80f62
commit c53f91ec3f
1 changed files with 208 additions and 122 deletions
@@ -1,20 +1,31 @@
 'use client';

-import { ChangeEventHandler, useState } from 'react';
+import { ChangeEventHandler, useCallback, useEffect, useState } from 'react';
 import useSWR from 'swr';
-import { CellContext, ColumnDef } from '@tanstack/react-table';
+import {
+  CellContext,
+  ColumnDef,
+  ColumnSort,
+  SortingState,
+} from '@tanstack/react-table';
+import toast from 'react-hot-toast';

 import { Icon } from '@iconify/react';
 import Table from '@/components/Table';
-import TextInput from '@/components/input/TextInput';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Button from '@/components/Button';
-import Collapse from '@/components/Collapse';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';

-import { httpClientFetcher } from '@/services/http/client';
-import { Nonstock, NonstocksResponse } from '@/types/api/master-data/nonstock';
+import { Nonstock } from '@/types/api/master-data/nonstock';
+import { NonstockApi } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
-import { deleteNonstock } from '@/services/api/master-data/nonstock';
 import { isResponseSuccess } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { ROWS_OPTIONS } from '@/config/constant';

 const RowOptionsMenu = ({
  type = 'dropdown',
@@ -23,7 +34,7 @@ const RowOptionsMenu = ({
 }: {
  type: 'dropdown' | 'collapse';
  props: CellContext<Nonstock, unknown>;
-  deleteClickHandler: () => Promise<void>;
+  deleteClickHandler: () => void;
 }) => {
  return (
    <div
@@ -74,78 +85,74 @@ const RowOptionsMenu = ({
  );
 };

-const RowDropdownOptions = ({
-  props,
-  isLast2Rows,
-  deleteClickHandler,
-}: {
-  props: CellContext<Nonstock, unknown>;
-  isLast2Rows: boolean;
-  deleteClickHandler: () => Promise<void>;
-}) => {
-  return (
-    <div
-      className={cn('dropdown dropdown-left', {
-        'dropdown-start': !isLast2Rows,
-        'dropdown-end': isLast2Rows,
-      })}
-    >
-      <Button tabIndex={0}>
-        <Icon icon='material-symbols:more-vert' width={16} height={16} />
-      </Button>
-
-      <RowOptionsMenu
-        type='dropdown'
-        props={props}
-        deleteClickHandler={deleteClickHandler}
-      />
-    </div>
-  );
-};
-
-const RowCollapseOptions = ({
-  props,
-  deleteClickHandler,
-}: {
-  props: CellContext<Nonstock, unknown>;
-  deleteClickHandler: () => Promise<void>;
-}) => {
-  return (
-    <Collapse
-      title={
-        <Button>
-          <Icon icon='material-symbols:more-vert' width={16} height={16} />
-        </Button>
-      }
-      className='w-fit'
-      titleClassName='p-0! justify-self-end'
-    >
-      <RowOptionsMenu
-        type='collapse'
-        props={props}
-        deleteClickHandler={deleteClickHandler}
-      />
-    </Collapse>
-  );
-};
-
 const NonstocksTable = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: { search: '', nameSort: '', locationSort: '', picSort: '' },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      nameSort: 'sort_name',
+      locationSort: 'sort_location',
+      picSort: ' sort_pic',
+    },
+  });
+
  const {
    data: nonstocks,
    isLoading,
    mutate: refreshNonstocks,
-  } = useSWR<NonstocksResponse>('/master-data/nonstocks', httpClientFetcher);
+  } = useSWR(
+    `${NonstockApi.basePath}${getTableFilterQueryString()}`,
+    NonstockApi.getAllFetcher
+  );

-  const [searchValue, setSearchValue] = useState('');
+  const deleteModal = useModal();
+
+  const [selectedNonstock, setSelectedNonstock] = useState<
+    Nonstock | undefined
+  >(undefined);
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const [sorting, setSorting] = useState<SortingState>([]);

  const nonstocksColumns: ColumnDef<Nonstock>[] = [
    {
      header: '#',
-      cell: (props) => props.row.index + 1,
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
    },
    {
-      header: 'Nama',
      accessorKey: 'name',
+      header: 'Nama',
+    },
+    {
+      accessorKey: 'uom',
+      header: 'UOM',
+      cell: (props) => props.row.original.uom.name,
+    },
+    {
+      accessorKey: 'suppliers',
+      header: 'Supplier',
+      cell: (props) => {
+        const supplierNames = props.row.original.suppliers.map(
+          (supplier) => supplier.name
+        );
+
+        return supplierNames.join(', ') || '-';
+      },
+    },
+    {
+      accessorKey: 'flags',
+      header: 'Flag',
+      cell: (props) => props.row.original.flags?.join(', ') || '-',
    },
    {
      header: 'Aksi',
@@ -157,33 +164,31 @@ const NonstocksTable = () => {

        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;

-        const deleteClickHandler = async () => {
-          const confirmation = confirm(
-            'Apakah anda yakin untuk menghapus non stock ini?'
-          );
-
-          if (confirmation) {
-            await deleteNonstock(props.row.original.id);
-            refreshNonstocks();
-            alert('Nonstock berhasil dihapus!');
-          }
+        const deleteClickHandler = () => {
+          setSelectedNonstock(props.row.original);
+          deleteModal.openModal();
        };

        return (
          <>
            {currentPageSize > 2 && (
-              <RowDropdownOptions
-                props={props}
-                isLast2Rows={isLast2Rows}
-                deleteClickHandler={deleteClickHandler}
-              />
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
            )}

            {currentPageSize <= 2 && (
-              <RowCollapseOptions
-                props={props}
-                deleteClickHandler={deleteClickHandler}
-              />
+              <RowCollapseOptions>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
            )}
          </>
        );
@@ -191,52 +196,133 @@ const NonstocksTable = () => {
    },
  ];

-  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
-    setSearchValue(e.target.value);
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await NonstockApi.delete(selectedNonstock?.id as number);
+    refreshNonstocks();
+
+    deleteModal.closeModal();
+    toast.success('Successfully delete Nonstock!');
+    setIsDeleteLoading(false);
  };

+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+
+    setPageSize(newVal.value as number);
+  };
+
+  const updateSortingFilter = useCallback(
+    (
+      sortName: Exclude<keyof typeof tableFilterState, 'page' | 'pageSize'>,
+      sortFilter: ColumnSort | undefined
+    ) => {
+      if (!sortFilter) {
+        updateFilter(sortName, '');
+      } else {
+        updateFilter(sortName, sortFilter.desc ? 'desc' : 'asc');
+      }
+    },
+    [updateFilter]
+  );
+
+  // track sorting
+  useEffect(() => {
+    const nameSortFilter = sorting.find((sortItem) => sortItem.id === 'name');
+    const locationSortFilter = sorting.find(
+      (sortItem) => sortItem.id === 'location'
+    );
+    const picSortFilter = sorting.find((sortItem) => sortItem.id === 'pic');
+
+    updateSortingFilter('nameSort', nameSortFilter);
+    updateSortingFilter('locationSort', locationSortFilter);
+    updateSortingFilter('picSort', picSortFilter);
+  }, [sorting]);
+
  return (
-    <div className='w-full p-4'>
-      <div className='w-full mb-4 flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-        <div className='flex flex-row'>
-          <Button href='/master-data/nonstock/add' color='primary'>
-            <Icon icon='ic:round-plus' width={24} height={24} />
-            Tambah Nonstock
-          </Button>
+    <>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+            <div className='flex flex-row'>
+              <Button href='/master-data/nonstock/add' color='primary'>
+                <Icon icon='ic:round-plus' width={24} height={24} />
+                Tambah Nonstock
+              </Button>
+            </div>
+
+            <DebouncedTextInput
+              name='search'
+              placeholder='Cari Nonstock'
+              value={tableFilterState.search}
+              onChange={searchChangeHandler}
+              className={{ wrapper: 'sm:max-w-3xs' }}
+            />
+          </div>
+
+          <div className='flex flex-row justify-end'>
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
+              }}
+              onChange={pageSizeChangeHandler}
+              className={{ wrapper: 'max-w-28' }}
+            />
+          </div>
        </div>

-        <TextInput
-          name='search'
-          placeholder='Cari Non Stock'
-          value={searchValue}
-          onChange={searchChangeHandler}
-          className={{ wrapper: 'sm:max-w-3xs' }}
+        <Table<Nonstock>
+          data={isResponseSuccess(nonstocks) ? nonstocks?.data : []}
+          columns={nonstocksColumns}
+          pageSize={tableFilterState.pageSize}
+          page={isResponseSuccess(nonstocks) ? nonstocks?.meta?.page : 0}
+          totalItems={
+            isResponseSuccess(nonstocks) ? nonstocks?.meta?.total_results : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          sorting={sorting}
+          setSorting={setSorting}
+          className={{
+            containerClassName: cn({
+              'mb-20':
+                isResponseSuccess(nonstocks) && nonstocks?.data?.length === 0,
+            }),
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
+          }}
        />
      </div>

-      <Table<Nonstock>
-        data={isResponseSuccess(nonstocks) ? nonstocks?.data : []}
-        columns={nonstocksColumns}
-        pageSize={10}
-        fuzzySearchValue={searchValue}
-        onFuzzySearchValueChange={setSearchValue}
-        isLoading={isLoading}
-        className={{
-          containerClassName: cn({
-            'mb-20':
-              isResponseSuccess(nonstocks) && nonstocks?.data?.length === 0,
-          }),
-          tableWrapperClassName: 'overflow-x-auto min-h-full!',
-          tableClassName: 'font-inter w-full table-auto min-h-full!',
-          headerRowClassName: 'border-b border-b-gray-200',
-          headerColumnClassName:
-            'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
-          bodyRowClassName: 'border-b border-b-gray-200',
-          bodyColumnClassName:
-            'px-6 py-3 last:flex last:flex-row last:justify-end',
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data Nonstock ini (${selectedNonstock?.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
        }}
      />
-    </div>
+    </>
  );
 };