refactor(FE): Refactor PurchaseTable to use Popover for row options menu

src/components/pages/purchase/PurchaseTable.tsx

@@ -12,10 +12,9 @@ import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Button from '@/components/Button';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import PopoverButton from '@/components/popover/PopoverButton';
+import PopoverContent from '@/components/popover/PopoverContent';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
-import RowDropdownOptions from '@/components/table/RowDropdownOptions';
-import RowCollapseOptions from '@/components/table/RowCollapseOptions';
-import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import RequirePermission from '@/components/helper/RequirePermission';
 import StatusBadge from '@/components/helper/StatusBadge';
 
@@ -69,59 +68,72 @@ const getStatusBadgeColor = (status: string): Color => {
   return statusBadgeColorMap[status] || 'neutral';
 };
 
-// ===== INTERFACES =====
+// ===== ROW OPTIONS MENU =====
-interface RowOptionsMenuProps {
-  type: 'dropdown' | 'collapse';
-  props: CellContext<Purchase, unknown>;
-  deleteClickHandler: () => void;
-}
-
 const RowOptionsMenu = ({
-  type = 'dropdown',
+  popoverPosition = 'bottom',
   props,
   deleteClickHandler,
-}: RowOptionsMenuProps) => {
+}: {
+  popoverPosition: 'bottom' | 'top';
+  props: CellContext<Purchase, unknown>;
+  deleteClickHandler: () => void;
+}) => {
+  const popoverId = `purchase#${props.row.original.id}`;
+  const popoverAnchorName = `--anchor-purchase#${props.row.original.id}`;
+
+  const closePopover = () => {
+    document.getElementById(popoverId)?.hidePopover();
+  };
+
   return (
-    <RowOptionsMenuWrapper type={type}>
+    <div className='relative'>
-      <RequirePermission permissions='lti.purchase.detail'>
+      <PopoverButton
-        <Button
+        tabIndex={0}
-          href={`/purchase/detail/?purchaseId=${props.row.original.id}`}
+        variant='ghost'
-          variant='ghost'
+        color='none'
-          color='primary'
+        popoverTarget={popoverId}
-          className='justify-start text-sm'
+        anchorName={popoverAnchorName}
-        >
+      >
-          <Icon icon='mdi:eye-outline' width={16} height={16} />
+        <Icon icon='material-symbols:more-vert' width={16} height={16} />
-          Detail
+      </PopoverButton>
-        </Button>
-      </RequirePermission>
 
-      {/*<Button*/}
+      <PopoverContent
-      {/*  href={`/purchase/detail/edit/?purchaseId=${props.row.original.id}`}*/}
+        id={popoverId}
-      {/*  variant='ghost'*/}
+        anchorName={popoverAnchorName}
-      {/*  color='warning'*/}
+        position={popoverPosition === 'bottom' ? 'bottom-start' : 'left'}
-      {/*  className='justify-start text-sm'*/}
+        className='w-full max-w-40 rounded-xl border border-base-content/5 shadow-sm'
-      {/*>*/}
+      >
-      {/*  <Icon icon='material-symbols:edit-outline' width={16} height={16} />*/}
+        <div className='flex flex-col bg-base-100 rounded-xl'>
-      {/*  Edit*/}
+          <RequirePermission permissions='lti.purchase.detail'>
-      {/*</Button>*/}
+            <Button
+              href={`/purchase/detail/?purchaseId=${props.row.original.id}`}
+              variant='ghost'
+              color='none'
+              className='p-3 justify-start text-sm font-semibold w-full'
+              onClick={closePopover}
+            >
+              <Icon icon='heroicons:eye' width={20} height={20} />
+              Detail
+            </Button>
+          </RequirePermission>
 
-      <RequirePermission permissions='lti.purchase.delete'>
+          <RequirePermission permissions='lti.purchase.delete'>
-        <Button
+            <Button
-          onClick={deleteClickHandler}
+              onClick={() => {
-          variant='ghost'
+                deleteClickHandler();
-          color='error'
+                closePopover();
-          className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
+              }}
-        >
+              variant='ghost'
-          <Icon
+              color='error'
-            icon='material-symbols:delete-outline-rounded'
+              className='p-3 justify-start text-sm font-semibold w-full focus-visible:text-error-content hover:text-error-content'
-            width={16}
+            >
-            height={16}
+              <Icon icon='mdi:delete-outline' width={20} height={20} />
-            className='justify-start text-sm'
+              Delete
-          />
+            </Button>
-          Delete
+          </RequirePermission>
-        </Button>
+        </div>
-      </RequirePermission>
+      </PopoverContent>
-    </RowOptionsMenuWrapper>
+    </div>
   );
 };
 
@@ -346,27 +358,11 @@ const PurchaseTable = () => {
         };
 
         return (
-          <>
+          <RowOptionsMenu
-            {currentPageSize > 2 && (
+            popoverPosition={isLast2Rows ? 'top' : 'bottom'}
-              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+            props={props}
-                <RowOptionsMenu
+            deleteClickHandler={deleteClickHandler}
-                  type='dropdown'
+          />
-                  props={props}
-                  deleteClickHandler={deleteClickHandler}
-                />
-              </RowDropdownOptions>
-            )}
-
-            {currentPageSize <= 2 && (
-              <RowCollapseOptions>
-                <RowOptionsMenu
-                  type='collapse'
-                  props={props}
-                  deleteClickHandler={deleteClickHandler}
-                />
-              </RowCollapseOptions>
-            )}
-          </>
         );
       },
     },
@@ -405,22 +401,22 @@ const PurchaseTable = () => {
 
   return (
     <>
-      <div className='w-full p-0 sm:p-4'>
+      <div className='w-full'>
-        <div className='flex flex-col gap-2 mb-4'>
+        <div className='w-full p-3 flex flex-row justify-between gap-3 flex-wrap border-b border-base-content/10'>
-          <div className='w-full flex flex-col xl:flex-row justify-between items-end xl:items-center gap-2'>
+          <div className='w-fit flex flex-row gap-3 flex-wrap'>
-            <div className='w-full flex flex-row gap-2'>
+            <RequirePermission permissions='lti.purchase.create'>
-              <RequirePermission permissions='lti.purchase.create'>
+              <Button
-                <Button
+                href='/purchase/add'
-                  href='/purchase/add'
+                color='primary'
-                  color='primary'
+                className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-xl shadow-button-soft'
-                  className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
+              >
-                >
+                <Icon icon='heroicons:plus' width={20} height={20} />
-                  <Icon icon='heroicons:plus' width={20} height={20} />
+                Add Purchase
-                  Add Purchase
+              </Button>
-                </Button>
+            </RequirePermission>
-              </RequirePermission>
+          </div>
-            </div>
 
+          <div className='flex flex-1 flex-row justify-start sm:justify-end items-center gap-3 flex-wrap'>
             <DebouncedTextInput
               name='search'
               placeholder='Search'
@@ -441,59 +437,41 @@ const PurchaseTable = () => {
               }}
             />
           </div>
-
-          <div className='flex flex-wrap justify-end gap-4'>
-            <SelectInput
-              label='Baris'
-              options={ROWS_OPTIONS}
-              value={{
-                label: String(tableFilterState.pageSize),
-                value: tableFilterState.pageSize,
-              }}
-              onChange={pageSizeChangeHandler}
-              className={{
-                wrapper: 'w-full sm:w-24',
-              }}
-            />
-          </div>
         </div>
 
-        <Table<Purchase>
+        {/* Table Section */}
-          data={
+        <div className='flex flex-col mb-4'>
-            isResponseSuccess(purchaseRequests) ? purchaseRequests?.data : []
+          <Table<Purchase>
-          }
+            data={
-          columns={purchaseColumns}
+              isResponseSuccess(purchaseRequests) ? purchaseRequests?.data : []
-          pageSize={tableFilterState.pageSize}
+            }
-          page={
+            columns={purchaseColumns}
-            isResponseSuccess(purchaseRequests)
+            pageSize={tableFilterState.pageSize}
-              ? purchaseRequests?.meta?.page
+            page={
-              : 0
+              isResponseSuccess(purchaseRequests)
-          }
+                ? purchaseRequests?.meta?.page
-          totalItems={
+                : 0
-            isResponseSuccess(purchaseRequests)
+            }
-              ? purchaseRequests?.meta?.total_results
+            totalItems={
-              : 0
+              isResponseSuccess(purchaseRequests)
-          }
+                ? purchaseRequests?.meta?.total_results
-          onPageChange={setPage}
+                : 0
-          isLoading={isLoading}
+            }
-          sorting={sorting}
+            onPageChange={setPage}
-          setSorting={setSorting}
+            onPageSizeChange={setPageSize}
-          className={{
+            isLoading={isLoading}
-            containerClassName: cn({
+            sorting={sorting}
-              'mb-20':
+            setSorting={setSorting}
-                isResponseSuccess(purchaseRequests) &&
+            className={{
-                purchaseRequests?.data?.length === 0,
+              containerClassName: cn('p-3', {
-            }),
+                'w-full mb-20':
-            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+                  isResponseSuccess(purchaseRequests) &&
-            tableClassName: 'font-inter w-full table-auto min-h-full!',
+                  purchaseRequests?.data?.length === 0,
-            headerRowClassName: 'border-b border-b-gray-200',
+              }),
-            headerColumnClassName:
+              headerColumnClassName: 'text-nowrap',
-              '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:
+        </div>
-              'px-6 py-3 last:flex last:flex-row last:justify-end',
-          }}
-        />
       </div>
 
       {/* ===== MODAL COMPONENTS ===== */}