Merge branch 'fix/FE/US-160/marketing-delivery-order' into 'development'

[FIX/FE][US#160] Fixing Missing Component UI DebounceTextArea

See merge request mbugroup/lti-web-client!64

src/components/input/DebouncedTextArea.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { ChangeEvent, ChangeEventHandler, useEffect, useState } from 'react';
+import { useDebounce } from 'use-debounce';
+
+import TextArea, { TextAreaProps } from '@/components/input/TextArea';
+
+interface DebouncedTextAreaProps extends TextAreaProps {
+  delay?: number;
+}
+
+const DebouncedTextArea = (props: DebouncedTextAreaProps) => {
+  const { delay, onChange } = props;
+
+  const [internalChangeEvent, setInternalChangeEvent] =
+    useState<ChangeEvent<HTMLTextAreaElement>>();
+  const [internalValue, setInternalValue] = useState(props.value);
+
+  const [debouncedChangeEvent] = useDebounce(internalChangeEvent, delay ?? 300);
+  const [debouncedValue] = useDebounce(internalValue, delay ?? 300);
+
+  const internalChangeHandler: ChangeEventHandler<HTMLTextAreaElement> = (
+    e
+  ) => {
+    setInternalValue(e.target.value);
+    setInternalChangeEvent(e);
+  };
+
+  useEffect(() => {
+    if (debouncedChangeEvent) {
+      onChange?.(debouncedChangeEvent);
+    }
+  }, [debouncedValue]);
+
+  return (
+    <TextArea
+      {...props}
+      value={internalValue}
+      onChange={internalChangeHandler}
+    />
+  );
+};
+
+export default DebouncedTextArea;

src/components/pages/production/project-flock/form/ProjectFlockForm.tsx

@@ -42,6 +42,7 @@ import ApprovalSteps, {
 } from '@/components/pages/ApprovalSteps';
 import { PROJECT_FLOCK_APPROVAL_LINE } from '@/config/approval-line';
 import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
+import NumberInput from '@/components/input/NumberInput';
 
 interface ProjectFlockFormProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -548,10 +549,18 @@ const ProjectFlockForm = ({
     setIsApproveLoading(false);
   };
 
+  const selectedPeriod = isResponseSuccess(periodFlocks)
+    ? periodFlocks.data.find((kandang) =>
+        formik.values.kandang_ids?.includes(kandang.id)
+      )?.period
+    : undefined;
+  const inputPeriod =
+    (initialValues?.period ?? selectedPeriod == 0) ? 1 : selectedPeriod;
+
   return (
     <>
       <section className='w-full'>
-        <header className='flex flex-col gap-4'>
+        <header className='flex flex-col gap-4 mb-6'>
           <Button
             href='/production/project-flock'
             variant='link'
@@ -563,6 +572,7 @@ const ProjectFlockForm = ({
 
           <h1 className='text-2xl font-bold text-center'>
             {formType === 'add' && 'Tambah Project Flock'}
+            {formType === 'edit' && 'Edit Project Flock'}
             {formType === 'detail' && 'Detail Project Flock'}
           </h1>
         </header>
@@ -740,6 +750,14 @@ const ProjectFlockForm = ({
                   isClearable
                   isDisabled={formType === 'detail'}
                 />
+                <NumberInput
+                  name='period'
+                  label='Periode'
+                  disabled
+                  readOnly
+                  placeholder='Period'
+                  value={selectedLocation ? inputPeriod : ''}
+                />
               </div>
             </div>
           </div>
@@ -781,7 +799,7 @@ const ProjectFlockForm = ({
                     setRowSelection={setRowSelection}
                     selectedIds={formik.values.kandang_ids}
                     formType={formType}
-                    initialValues={initialValues?.kandangs ?? []}
+                    initialValues={initialValues}
                   />
                 </div>
               </Collapse>

src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx

@@ -5,7 +5,10 @@ import PillBadge from '@/components/PillBadge';
 import Table from '@/components/Table';
 import { cn } from '@/lib/helper';
 import { Kandang } from '@/types/api/master-data/kandang';
-import { ProjectFlockPeriods } from '@/types/api/production/project-flock';
+import {
+  ProjectFlock,
+  ProjectFlockPeriods,
+} from '@/types/api/production/project-flock';
 import { OnChangeFn, Row } from '@tanstack/react-table';
 import { useMemo } from 'react';
 
@@ -23,11 +26,11 @@ const ProjectFlockKandangTable = ({
   rowSelection: Record<string, boolean>;
   setRowSelection: OnChangeFn<Record<string, boolean>>;
   selectedIds: (number | undefined)[];
-  initialValues?: Kandang[];
+  initialValues?: ProjectFlock;
   formType: 'add' | 'edit' | 'detail';
 }) => {
   const initialKandangIdSet = useMemo(() => {
-    return initialValues?.map((k) => k.id) ?? [];
+    return initialValues?.kandangs.map((k) => k.id) ?? [];
   }, [initialValues]);
   const isRowEnabled = (row: Row<Kandang>) => {
     const isDisabled =
@@ -147,7 +150,18 @@ const ProjectFlockKandangTable = ({
                 listPeriods.length > 0
                   ? listPeriods.find((p) => p.id == props.row.original.id)
                   : undefined;
-              return period?.period ?? '-';
+              const calcPeriod = period?.period == 0 ? 1 : period?.period;
+              const selected = props.row.getIsSelected();
+              const initPeriod = initialValues?.period;
+              return formType == 'detail'
+                ? selected
+                  ? initPeriod
+                  : '-'
+                : formType == 'add'
+                  ? (calcPeriod ?? '-')
+                  : selected
+                    ? (initPeriod ?? '-')
+                    : (calcPeriod ?? '-');
             },
           },
           {