From 34052d41abaa4ee45c93c0d1bacb84e807529d97 Mon Sep 17 00:00:00 2001
From: Ainun Nadhifah Syamsiyah <58164571+ainunns@users.noreply.github.com>
Date: Sun, 10 Mar 2024 16:35:22 +0700
Subject: [PATCH] feat: add new ticket modal (#29)

* feat: slicing form add new ticket

* feat: integrate add ticket modal
---
 src/app/board/components/StatusBoard.tsx      |  35 ++-
 .../board/container/modal/AddTicketModal.tsx  | 135 +++++++++
 src/app/board/hooks/mutation.ts               |  35 +++
 src/components/forms/Input.tsx                |   2 +-
 src/components/forms/SelectInput.tsx          | 268 ++++++++++++++----
 src/components/forms/TextArea.tsx             |  89 ++++++
 src/constant/select-options.ts                |   9 +
 7 files changed, 501 insertions(+), 72 deletions(-)
 create mode 100644 src/app/board/container/modal/AddTicketModal.tsx
 create mode 100644 src/components/forms/TextArea.tsx
 create mode 100644 src/constant/select-options.ts

diff --git a/src/app/board/components/StatusBoard.tsx b/src/app/board/components/StatusBoard.tsx
index 3d19d7a..374640c 100644
--- a/src/app/board/components/StatusBoard.tsx
+++ b/src/app/board/components/StatusBoard.tsx
@@ -7,6 +7,8 @@ import Typography from '@/components/Typography';
 import clsxm from '@/lib/clsxm';
 import { taskType } from '@/types/entities/task';
 
+import AddTicketModal from '../container/modal/AddTicketModal';
+
 type StatusBoardProps = {
   title: string;
   data: taskType[] | null;
@@ -52,21 +54,26 @@ export default function StatusBoard({
             {ticketCount}
           </Typography>
         </div>
-        <IconButton
-          icon={FaPlus}
-          variant='outline'
-          className={clsxm(
-            'size-4 border-none font-normal',
-            title === 'Backlog' &&
-              'bg-primary-300 hover:bg-primary-400 active:bg-primary-400',
-            title === 'Ready' &&
-              'bg-success-300 hover:bg-success-400 active:bg-success-400',
-            title === 'In Progress' &&
-              'bg-warning-300 hover:bg-warning-400 active:bg-warning-400',
-            title === 'Done' &&
-              'bg-danger-300 hover:bg-danger-400 active:bg-danger-400',
+        <AddTicketModal refetch={refetch} status={title}>
+          {({ openModal }) => (
+            <IconButton
+              icon={FaPlus}
+              variant='outline'
+              className={clsxm(
+                'size-4 border-none font-normal',
+                title === 'Backlog' &&
+                  'bg-primary-300 hover:bg-primary-400 active:bg-primary-400',
+                title === 'Ready' &&
+                  'bg-success-300 hover:bg-success-400 active:bg-success-400',
+                title === 'In Progress' &&
+                  'bg-warning-300 hover:bg-warning-400 active:bg-warning-400',
+                title === 'Done' &&
+                  'bg-danger-300 hover:bg-danger-400 active:bg-danger-400',
+              )}
+              onClick={openModal}
+            />
           )}
-        />
+        </AddTicketModal>
       </div>
       <div className='flex w-full flex-col gap-y-3 overflow-y-auto px-4 pb-4'>
         {data?.map((task) => (
diff --git a/src/app/board/container/modal/AddTicketModal.tsx b/src/app/board/container/modal/AddTicketModal.tsx
new file mode 100644
index 0000000..a04b230
--- /dev/null
+++ b/src/app/board/container/modal/AddTicketModal.tsx
@@ -0,0 +1,135 @@
+import * as React from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+
+import {
+  AddTicketFormType,
+  useAddTicketMutation,
+} from '@/app/board/hooks/mutation';
+import Button from '@/components/buttons/Button';
+import DatePicker from '@/components/forms/DatePicker';
+import Input from '@/components/forms/Input';
+import SelectInput from '@/components/forms/SelectInput';
+import TextArea from '@/components/forms/TextArea';
+import Modal from '@/components/Modal';
+import { SELECT_OPTIONS } from '@/constant/select-options';
+
+type ModalReturnType = {
+  openModal: () => void;
+};
+
+export default function AddTicketModal({
+  refetch,
+  status,
+  children,
+}: {
+  refetch: () => void;
+  status: string;
+  children: (props: ModalReturnType) => JSX.Element;
+}) {
+  const [open, setOpen] = React.useState(false);
+  const modalReturn: ModalReturnType = {
+    openModal: () => setOpen(true),
+  };
+
+  const methods = useForm<AddTicketFormType>({
+    mode: 'onTouched',
+    defaultValues: {
+      title: '',
+      description: '',
+      dueDate: new Date(),
+      tags: [],
+      status,
+    },
+  });
+
+  const { handleSubmit } = methods;
+
+  const { handleAdd, isPending } = useAddTicketMutation({
+    refetch,
+    setOpen,
+  });
+
+  const onSubmit = (data: AddTicketFormType) => {
+    handleAdd({
+      ...data,
+      status: status.toLowerCase(),
+    });
+  };
+
+  return (
+    <>
+      {children(modalReturn)}
+      <Modal
+        open={open}
+        setOpen={setOpen}
+        title='Tambah Ticket Baru'
+        titleClassName='font-semibold'
+      >
+        <Modal.Section className='flex flex-col gap-4'>
+          <FormProvider {...methods}>
+            <form
+              onSubmit={handleSubmit(onSubmit)}
+              className='flex flex-col gap-3'
+            >
+              <Input
+                id='title'
+                label='Judul'
+                placeholder='Masukkan judul ticket'
+                validation={{
+                  required: 'Judul tidak boleh kosong',
+                }}
+              />
+              <TextArea
+                id='description'
+                label='Deskripsi'
+                placeholder='Masukkan deskripsi ticket'
+                validation={{
+                  required: 'Deskripsi tidak boleh kosong',
+                  maxLength: {
+                    value: 255,
+                    message: 'Deskripsi tidak boleh lebih dari 255 karakter',
+                  },
+                }}
+              />
+              <DatePicker
+                id='dueDate'
+                label='Batas Waktu'
+                placeholder='Pilih batas waktu'
+                validation={{
+                  required: 'Batas waktu tidak boleh kosong',
+                }}
+              />
+              <SelectInput
+                id='tags'
+                label='Tags'
+                options={SELECT_OPTIONS.tags}
+                isMulti={true}
+                placeholder='Tambah tag'
+                validation={{
+                  required: 'Tag tidak boleh kosong',
+                }}
+              />
+              <div className='mt-5 flex justify-end gap-3'>
+                <Button
+                  variant='outline'
+                  className='text-success-500'
+                  onClick={() => setOpen(false)}
+                >
+                  Batal
+                </Button>
+                <Button
+                  type='submit'
+                  variant='success'
+                  className='border-none text-typo-primary'
+                  isLoading={isPending}
+                >
+                  Simpan
+                </Button>
+              </div>
+            </form>
+          </FormProvider>
+        </Modal.Section>
+      </Modal>
+    </>
+  );
+}
diff --git a/src/app/board/hooks/mutation.ts b/src/app/board/hooks/mutation.ts
index 9f24962..97b3214 100644
--- a/src/app/board/hooks/mutation.ts
+++ b/src/app/board/hooks/mutation.ts
@@ -30,3 +30,38 @@ export const useDeleteTicketMutation = ({
   );
   return { handleDelete, isPending };
 };
+
+export type AddTicketFormType = {
+  title: string;
+  description: string;
+  dueDate: Date;
+  tags: string[];
+  status: string;
+};
+
+type AddTicketMutationType = {
+  refetch: () => void;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export const useAddTicketMutation = ({
+  refetch,
+  setOpen,
+}: AddTicketMutationType) => {
+  const { mutateAsync: handleAdd, isPending } = useMutationToast<
+    void,
+    AddTicketFormType
+  >(
+    useMutation({
+      mutationFn: async (data) => {
+        await api.post('/task', data);
+      },
+      onSuccess: () => {
+        showToast('Ticket berhasil ditambahkan', SUCCESS_TOAST);
+        refetch();
+        setOpen(false);
+      },
+    }),
+  );
+  return { handleAdd, isPending };
+};
diff --git a/src/components/forms/Input.tsx b/src/components/forms/Input.tsx
index e0613af..c4654a1 100644
--- a/src/components/forms/Input.tsx
+++ b/src/components/forms/Input.tsx
@@ -107,7 +107,7 @@ export default function Input({
               readOnly && 'cursor-not-allowed',
               error
                 ? 'border-none ring-1 ring-inset ring-danger-500 focus:ring-danger-500 '
-                : 'focus:ring-typo-primary',
+                : 'focus:ring-primary-500',
               prefix && 'rounded-l-none rounded-r-md',
               suffix && 'rounded-l-md rounded-r-none',
               prefix && suffix && 'rounded-none',
diff --git a/src/components/forms/SelectInput.tsx b/src/components/forms/SelectInput.tsx
index e9502e2..e6fe7ec 100644
--- a/src/components/forms/SelectInput.tsx
+++ b/src/components/forms/SelectInput.tsx
@@ -1,88 +1,242 @@
-import * as React from 'react';
-import { get, RegisterOptions, useFormContext } from 'react-hook-form';
-import { FiChevronDown } from 'react-icons/fi';
+'use client';
+import clsx from 'clsx';
+import get from 'lodash.get';
+import { Controller, RegisterOptions, useFormContext } from 'react-hook-form';
+import { BiChevronDown, BiX } from 'react-icons/bi';
+import Select, { components, MultiValue, StylesConfig } from 'react-select';
 
 import ErrorMessage from '@/components/forms/ErrorMessage';
 import HelperText from '@/components/forms/HelperText';
 import LabelText from '@/components/forms/LabelText';
-import clsxm from '@/lib/clsxm';
+import { ExtractProps } from '@/types/helper';
 
-export type SelectInputProps = {
+export type SearchableSelectInputProps = {
+  label: string | null;
   id: string;
-  label?: string;
+  placeholder?: React.ReactNode;
   helperText?: string;
+  type?: string;
+  isMulti?: boolean;
+  readOnly?: boolean;
   hideError?: boolean;
   validation?: RegisterOptions;
-  readOnly?: boolean;
-  placeholder?: string;
-} & React.ComponentPropsWithoutRef<'select'>;
+  options: { value: string; label: string }[];
+  containerClassName?: string;
+} & React.ComponentPropsWithoutRef<'select'> &
+  ExtractProps<Select>;
 
 export default function SelectInput({
-  id,
+  disabled,
+  readOnly,
   label,
   helperText,
-  hideError = false,
+  id,
+  isMulti = false,
+  placeholder,
   validation,
-  className,
-  readOnly = false,
-  defaultValue = '',
-  placeholder = '',
-  children,
+  options,
+  hideError = false,
+  containerClassName,
   ...rest
-}: SelectInputProps) {
+}: SearchableSelectInputProps) {
   const {
-    register,
+    control,
     formState: { errors },
-    watch,
   } = useFormContext();
-
   const error = get(errors, id);
-  const value = watch(id);
+
+  const withLabel = label !== null;
+
+  //#region  //*=========== Styles ===========
+  const customStyles: StylesConfig = {
+    control: (styles) => ({
+      ...styles,
+      // red-500 and gray-300
+      border: `1px solid ${error ? '#EF4444' : '#D1D5DB'}`,
+      '&:hover': {
+        border: `1px solid ${error ? '#EF4444' : '#D1D5DB'}`,
+      },
+      boxShadow: 'none',
+      transition: 'none',
+      '&:focus-within': {
+        border: `1px solid ${error ? '#EF4444' : 'var(--color-primary-500)'}`,
+        boxShadow: `0 0 0 1px ${
+          error ? '#EF4444' : 'var(--color-primary-500)'
+        }`,
+      },
+      '*': {
+        boxShadow: 'none !important',
+      },
+      borderRadius: '0.5rem',
+      padding: '0 0.75rem',
+      background: disabled || readOnly ? '#F3F4F6' : undefined,
+      cursor: 'pointer',
+    }),
+    valueContainer: (styles) => ({
+      ...styles,
+      padding: 0,
+      gap: '0.5rem',
+    }),
+    input: (styles) => ({
+      ...styles,
+      padding: 0,
+      margin: 0,
+      caretColor: 'var(--color-primary-500)',
+      color: '#1F201d',
+      '::placeholder': {
+        color: '#5a5d56',
+      },
+    }),
+    indicatorsContainer: (styles) => ({
+      ...styles,
+      '&>div': {
+        padding: 0,
+      },
+    }),
+    dropdownIndicator: (styles) => ({
+      ...styles,
+      color: '#878787',
+      '&:hover': {
+        color: '#878787',
+      },
+    }),
+    option: (styles, state) => ({
+      ...styles,
+      color: 'black',
+      background: state.isFocused
+        ? 'var(--color-primary-50)'
+        : state.isSelected
+          ? 'var(--color-primary-100)'
+          : 'white',
+      ':hover': {
+        background: '#E5E7EB',
+      },
+      cursor: 'pointer',
+    }),
+    multiValue: (styles) => ({
+      ...styles,
+      display: 'flex',
+      alignItems: 'center',
+      gap: '0.25rem',
+      background: 'var(--color-primary-100)',
+      borderRadius: '0.375rem',
+      padding: '0.25rem 0.75rem',
+      margin: 0,
+    }),
+    multiValueLabel: (styles) => ({
+      ...styles,
+      color: 'var(--color-primary-700)',
+      padding: 0,
+      paddingLeft: 0,
+    }),
+    multiValueRemove: (styles) => ({
+      ...styles,
+      color: 'var(--color-primary-700)',
+      padding: 0,
+      paddingLeft: '0.5rem',
+      '&:hover': {
+        color: 'var(--color-primary-700)',
+        backgroundColor: 'transparent',
+      },
+    }),
+    menu: (styles) => ({
+      ...styles,
+      borderRadius: '0.5rem',
+      overflow: 'hidden',
+    }),
+  };
+
+  //#endregion  //*======== Styles ===========
 
   return (
-    <div className='w-full space-y-1.5 rounded-md'>
+    <div className={containerClassName}>
       {label && (
         <LabelText required={validation?.required ? true : false}>
           {label}
         </LabelText>
       )}
-
-      <div className='relative'>
-        <select
-          {...register(id, validation)}
-          id={id}
+      <div
+        className={clsx(
+          'relative',
+          withLabel && 'mt-1',
+          (disabled || readOnly) && 'cursor-not-allowed',
+        )}
+      >
+        <Controller
           name={id}
-          defaultValue={defaultValue}
-          disabled={readOnly}
-          className={clsxm(
-            'w-full appearance-none truncate rounded-md border-none py-2.5 pl-3 pr-8',
-            'ring-1 ring-typo-outline focus:ring-typo-outline',
-            'bg-typo-white font-poppins text-sm text-typo-secondary',
-            'hover:ring-2 hover:ring-typo-primary',
-            readOnly && 'cursor-not-allowed',
-            error
-              ? 'ring-1 ring-inset ring-danger-500 focus:ring-danger-500'
-              : 'focus:ring-typo-outline',
-            value && 'ring-primary-500 focus:ring-primary-500',
-            className,
-          )}
-          aria-describedby={id}
-          {...rest}
-        >
-          {placeholder && (
-            <option value='' disabled hidden>
-              {placeholder}
-            </option>
-          )}
-          {children}
-        </select>
-        <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3'>
-          <FiChevronDown className='text-xl text-typo-outline' />
-        </div>
+          control={control}
+          rules={validation}
+          render={({ field }) => {
+            return (
+              <Select
+                {...field}
+                value={
+                  //? null is needed so if the selected value is not found in the options, it will clear the value
+                  isMulti
+                    ? field.value?.map(
+                        (value: unknown) =>
+                          options.find((option) => option.value === value) ??
+                          null,
+                      )
+                    : options.find((opt) => opt.value === field.value) ?? null
+                }
+                onChange={(selectedOptions) => {
+                  isMulti
+                    ? field.onChange(
+                        (
+                          selectedOptions as MultiValue<
+                            (typeof options)[number]
+                          >
+                        ).map((option) => option?.value ?? ''),
+                      )
+                    : field.onChange(
+                        (selectedOptions as (typeof options)[number])?.value ??
+                          '',
+                      );
+                }}
+                isDisabled={disabled}
+                isClearable
+                isMulti={isMulti}
+                closeMenuOnSelect={!isMulti}
+                placeholder={placeholder}
+                options={options}
+                classNames={{
+                  control: () => '!min-h-[2.25rem] md:!min-h-[2.5rem]',
+                }}
+                styles={customStyles}
+                components={{
+                  IndicatorSeparator: () => null,
+                  DropdownIndicator: (props) => (
+                    <components.DropdownIndicator {...props}>
+                      <BiChevronDown size={18} />
+                    </components.DropdownIndicator>
+                  ),
+                  ClearIndicator: (props) => (
+                    <components.ClearIndicator {...props}>
+                      <BiX
+                        size={18}
+                        className='text-typo-icons mr-0.5 hover:text-typo-secondary'
+                      />
+                    </components.ClearIndicator>
+                  ),
+                  MultiValueRemove: (props) => (
+                    <components.MultiValueRemove {...props}>
+                      <BiX size={18} />
+                    </components.MultiValueRemove>
+                  ),
+                }}
+                {...rest}
+              />
+            );
+          }}
+        />
+        {helperText && (
+          <HelperText helperTextClassName='mt-1'>{helperText}</HelperText>
+        )}
+        {!hideError && error && (
+          <ErrorMessage>{error?.message?.toString() ?? ''}</ErrorMessage>
+        )}
       </div>
-
-      {!hideError && error && <ErrorMessage>{error.message}</ErrorMessage>}
-      {!error && helperText && <HelperText>{helperText}</HelperText>}
     </div>
   );
 }
diff --git a/src/components/forms/TextArea.tsx b/src/components/forms/TextArea.tsx
new file mode 100644
index 0000000..a54f3f3
--- /dev/null
+++ b/src/components/forms/TextArea.tsx
@@ -0,0 +1,89 @@
+'use client';
+import * as React from 'react';
+import { get, RegisterOptions, useFormContext } from 'react-hook-form';
+
+import ErrorMessage from '@/components/forms/ErrorMessage';
+import HelperText from '@/components/forms/HelperText';
+import LabelText from '@/components/forms/LabelText';
+import Typography from '@/components/Typography';
+import clsxm from '@/lib/clsxm';
+
+export type TextAreaProps = {
+  id: string;
+  label?: string;
+  helperText?: string;
+  hideError?: boolean;
+  validation?: RegisterOptions;
+} & React.ComponentPropsWithoutRef<'textarea'>;
+
+export default function TextArea({
+  id,
+  label,
+  helperText,
+  hideError = false,
+  validation,
+  className,
+  maxLength = 255,
+  readOnly = false,
+  ...rest
+}: TextAreaProps) {
+  const [value, setValue] = React.useState('');
+
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext();
+
+  const error = get(errors, id);
+  const textArea = register(id, validation);
+
+  const handleChange = (e: React.FormEvent<HTMLTextAreaElement>) => {
+    textArea.onChange(e);
+    setValue(e.currentTarget.value);
+  };
+
+  return (
+    <div className='w-full space-y-1.5'>
+      {label && (
+        <LabelText required={validation?.required ? true : false}>
+          {label}
+        </LabelText>
+      )}
+
+      <div className='relative'>
+        <textarea
+          {...textArea}
+          id={id}
+          name={id}
+          readOnly={readOnly}
+          disabled={readOnly}
+          maxLength={maxLength}
+          onChange={handleChange}
+          className={clsxm(
+            'w-full rounded-md px-3 py-2.5',
+            'border-none ring-1 focus:ring-2',
+            'bg-transparent font-poppins text-typo-primary',
+            'placeholder:font-poppins placeholder:text-typo-icon',
+            readOnly && 'cursor-not-allowed',
+            error
+              ? 'border-none ring-1 ring-inset ring-danger-500 focus:ring-danger-500'
+              : 'focus:ring-primary-500',
+            className,
+          )}
+          aria-describedby={id}
+          {...rest}
+        />
+
+        <Typography
+          variant='c1'
+          className='absolute bottom-2.5 right-3 text-typo-primary'
+        >
+          {value.length}/{maxLength}
+        </Typography>
+      </div>
+
+      {!hideError && error && <ErrorMessage>{error.message}</ErrorMessage>}
+      {!error && helperText && <HelperText>{helperText}</HelperText>}
+    </div>
+  );
+}
diff --git a/src/constant/select-options.ts b/src/constant/select-options.ts
new file mode 100644
index 0000000..7ed4389
--- /dev/null
+++ b/src/constant/select-options.ts
@@ -0,0 +1,9 @@
+export const SELECT_OPTIONS = {
+  tags: [
+    { value: 'bug', label: 'Bug' },
+    { value: 'feature', label: 'Feature' },
+    { value: 'enhancement', label: 'Enhancement' },
+    { value: 'documentation', label: 'Documentation' },
+    { value: 'work in progress', label: 'Work in Progress' },
+  ],
+};