From 2fd5beba0a4fa169fe552e7e5f27ceaf7ecaa981 Mon Sep 17 00:00:00 2001
From: "MSI\\derek" <abc@gmail.com>
Date: Tue, 30 Apr 2024 17:03:52 +0800
Subject: [PATCH] staff multiple skills

---
 src/components/CreateStaff/CreateStaff.tsx    |  2 +-
 .../CustomInputForm/CustomInputForm.tsx       | 68 ++++++++++++++++++-
 src/components/EditStaff/EditStaff.tsx        | 29 ++++++--
 3 files changed, 88 insertions(+), 11 deletions(-)

diff --git a/src/components/CreateStaff/CreateStaff.tsx b/src/components/CreateStaff/CreateStaff.tsx
index 312f18e..94e7f71 100644
--- a/src/components/CreateStaff/CreateStaff.tsx
+++ b/src/components/CreateStaff/CreateStaff.tsx
@@ -190,7 +190,7 @@ const CreateStaff: React.FC<formProps> = ({ Title }) => {
       {
         id: "skillSetId",
         label: t("Skillset"),
-        type: "combo-Obj",
+        type: "multiSelect-Obj",
         options: skillCombo || [],
         required: false,
       },
diff --git a/src/components/CustomInputForm/CustomInputForm.tsx b/src/components/CustomInputForm/CustomInputForm.tsx
index 9497208..417c6f1 100644
--- a/src/components/CustomInputForm/CustomInputForm.tsx
+++ b/src/components/CustomInputForm/CustomInputForm.tsx
@@ -15,6 +15,7 @@ import {
   Checkbox,
   FormControlLabel,
   Button,
+  Chip,
 } from "@mui/material";
 import { DataGrid, GridColDef, GridRowSelectionModel } from "@mui/x-data-grid";
 import { darken, lighten, styled } from "@mui/material/styles";
@@ -31,6 +32,7 @@ import { useCallback, useEffect, useState } from "react";
 import { Check, Close, RestartAlt } from "@mui/icons-material";
 import { NumericFormat, NumericFormatProps } from "react-number-format";
 import * as React from "react";
+import CancelIcon from "@mui/icons-material/Cancel";
 
 interface Options {
   id: any;
@@ -286,7 +288,7 @@ const CustomInputForm: React.FC<CustomInputFormProps> = ({
                         </Grid>
                       );
                     } else if (field.type === "multiDate") {
-                      console.log(dayjs(field.value))
+                      // console.log(dayjs(field.value))
                       return (
                         <Grid item xs={field.size ?? 6} key={field.id}>
                           <LocalizationProvider dateAdapter={AdapterDayjs}>
@@ -343,8 +345,6 @@ const CustomInputForm: React.FC<CustomInputFormProps> = ({
                                   id={field.id}
                                   value={value}
                                   onChange={(event) => {
-                                    console.log(event);
-                                    console.log(event.target);
                                     onChange(event.target.value);
                                     const newValue = event.target.value;
                                     const selectedOption = field.options?.find(
@@ -379,6 +379,68 @@ const CustomInputForm: React.FC<CustomInputFormProps> = ({
                           </FormControl>
                         </Grid>
                       );
+                    } else if (field.type === "multiSelect-Obj") {
+                      return (
+                        <Grid item xs={field.size ?? 6} key={field.id}>
+                          <FormControl fullWidth>
+                            <InputLabel id={`${field.id}-label`}>{field.label}</InputLabel>
+                            <Controller
+                              name={field.id}
+                              control={control}
+                              defaultValue={
+                                field.value !== undefined ? field.value : []
+                              }
+                              render={({ field: { onChange, value } }) => (
+                                <Select
+                                  labelId={`${field.id}-label`}
+                                  id={field.id}
+                                  value={value}
+                                  multiple
+                                  onChange={(event) => {
+                                    onChange(event.target.value);
+                                    const newValue = event.target.value;
+                                    const selectedOption = field.options?.find(
+                                      (option) => option.id === newValue
+                                    );
+                                    handleAutocompleteChange(
+                                      field.id,
+                                      selectedOption
+                                    );
+                                  }}
+                                  renderValue={(selected) => {
+                                    const selectedOption = field.options?.filter((option) => selected.includes(option.id));
+                                    return (
+                                    <Stack gap={1} direction="row" flexWrap="wrap">
+                                      {selectedOption ? selectedOption.map(({id, label}) => {
+                                        return (
+                                        <Chip key={id} label={label} />
+                                      )}) : null}
+                                    </Stack>
+                                  )}}
+                                  required={field.required}
+                                >
+                                  {field.options?.map((option) => (
+                                    <MenuItem
+                                      value={
+                                        option.id !== undefined
+                                          ? option.id
+                                          : option
+                                      }
+                                      key={
+                                        option.id !== undefined
+                                          ? option.id
+                                          : option
+                                      }
+                                    >
+                                      {option.id ? option.label : ""}
+                                    </MenuItem>
+                                  ))}
+                                </Select>
+                              )}
+                            />
+                          </FormControl>
+                        </Grid>
+                      );
                     } else if (field.type === "numeric") {
                       return (
                         <Grid item xs={field.size ?? 6} key={field.id}>
diff --git a/src/components/EditStaff/EditStaff.tsx b/src/components/EditStaff/EditStaff.tsx
index bcc7346..0d62e28 100644
--- a/src/components/EditStaff/EditStaff.tsx
+++ b/src/components/EditStaff/EditStaff.tsx
@@ -15,8 +15,15 @@ import { fetchSkillCombo } from "@/app/api/skill/actions";
 import { fetchSalaryCombo } from "@/app/api/salarys/actions";
 // import { Field } from "react-hook-form";
 
-interface dataType {
-  [key: string]: any;
+
+interface skill {
+  id: number;
+  name: string;
+  code: string;
+}
+interface skillObj {
+  id: number;
+  skill: skill;
 }
 
 interface Options {
@@ -113,7 +120,9 @@ const EditStaff: React.FC = async () => {
       if (data) setGradeCombo(data.records);
     });
     fetchSkillCombo().then((data) => {
-      if (data) setSkillCombo(data.records);
+      if (data) {
+      }setSkillCombo(data.records);
+       console.log(data.records) 
     });
     fetchSalaryCombo().then((data) => {
       if (data) setSalaryCombo(data.records);
@@ -127,6 +136,10 @@ const EditStaff: React.FC = async () => {
       console.log(id)
       fetchStaffEdit(id).then((staff) => {
         console.log(staff.data);
+        const skillset = staff.data.skillset 
+        console.log(skillset);
+        const skillIds = skillset.map((item: skillObj) => item.skill.id);
+        console.log(skillIds)
         const data = staff.data;
         ///////////////////// list 1 /////////////////////
         const list1 = keyOrder1
@@ -181,15 +194,17 @@ const EditStaff: React.FC = async () => {
                   label: t(`Grade`),
                   type: "combo-Obj",
                   options: gradeCombo,
-                  value: data[key] !== null ? data[key].id ?? "" : "",
+                  value: data[key]?.id ?? "",
                 };
               case "skill":
+                console.log(skillIds)
                 return {
                   id: `${key}SetId`,
                   label: t(`Skillset`),
-                  type: "combo-Obj",
+                  type: "multiSelect-Obj",
                   options: skillCombo,
-                  value: data[key] !== null ? data[key].id ?? "" : "",
+                  value: skillIds ?? [],
+                  //array problem
                 };
               case "currentPosition":
                 return {
@@ -206,7 +221,7 @@ const EditStaff: React.FC = async () => {
                   label: t(`Salary Point`),
                   type: "combo-Obj",
                   options: salaryCombo,
-                  value: data[key] !== null ? data[key].id ?? "" : "",
+                  value: data[key]?.id ?? "",
                   required: true,
                 };
               // case "hourlyRate":