From a7d4b29eef006b39886664e5d4f2309ed49df7f7 Mon Sep 17 00:00:00 2001
From: Moaz Dawalibi <moaazaldwalibi@gmail.com>
Date: Sat, 3 Aug 2024 15:17:06 +0300
Subject: [PATCH] fix add product modal

---
 .vscode/settings.json                         |   5 +
 .../ValidationField/ValidationField.tsx       |   5 +-
 .../ValidationField/View/Default.tsx          |   1 +
 .../ValidationField/View/MaltyFile.tsx        |   9 +-
 src/Pages/product/AddProductModal.tsx         |   1 -
 src/Pages/product/EditProductModal.tsx        |   2 +-
 src/Pages/product/FormProduct.tsx             | 221 +++++++++---------
 src/Pages/product/ProductPage.tsx             |   1 -
 src/Pages/product/formUtil.ts                 |  62 +++--
 src/Pages/product/useTableColumns.tsx         |   2 +-
 src/Styles/AppStyle/App.scss                  |  21 ++
 src/api/config.ts                             |   2 +-
 src/utils/ConvertObjToArr.ts                  |  25 +-
 13 files changed, 210 insertions(+), 147 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..650e829
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "formik"
+    ]
+}
\ No newline at end of file
diff --git a/src/Components/ValidationField/ValidationField.tsx b/src/Components/ValidationField/ValidationField.tsx
index 6e6b8ef..0cedfc5 100644
--- a/src/Components/ValidationField/ValidationField.tsx
+++ b/src/Components/ValidationField/ValidationField.tsx
@@ -1,10 +1,11 @@
 import React from "react";
 import "./ValidationField.scss";
 import { Date, Time, File, DataRange, SelectField, Default, CheckboxField } from './View';
+import MaltyFile from "./View/MaltyFile";
 
 export interface ValidationFieldProps {
   name: string;
-  type?: "text" | "Select" | "DataRange" | "Date" | "Time" | "File" | "number" | "Checkbox" | "password";
+  type?: "text" | "Select" | "DataRange" | "Date" | "Time" | "File" | "number" | "Checkbox" | "password" |"MaltyFile";
   placeholder?: string;
   label?: string;
   className?: string;
@@ -31,6 +32,8 @@ const ValidationField = (props: ValidationFieldProps) => {
       return <Time {...props} />;
     case "File":
       return <File {...props} />;
+      case "MaltyFile":
+        return <MaltyFile {...props} />;
     case "Checkbox":
       return <CheckboxField {...props} />;
     default:
diff --git a/src/Components/ValidationField/View/Default.tsx b/src/Components/ValidationField/View/Default.tsx
index edc031d..8f4eb24 100644
--- a/src/Components/ValidationField/View/Default.tsx
+++ b/src/Components/ValidationField/View/Default.tsx
@@ -22,6 +22,7 @@ const Default = ({ name, label, placeholder, isDisabled, onChange, props }: any)
           placeholder={t(`${placeholder ? placeholder : name}`)}
           name={name}
           disabled={isDisabled}
+          
         //  onChange={onChange ? onChange : handleChange}
         />
       </Form.Item>
diff --git a/src/Components/ValidationField/View/MaltyFile.tsx b/src/Components/ValidationField/View/MaltyFile.tsx
index ab2ab7a..11d4435 100644
--- a/src/Components/ValidationField/View/MaltyFile.tsx
+++ b/src/Components/ValidationField/View/MaltyFile.tsx
@@ -14,11 +14,12 @@ const MaltyFile = ({
 }: any) => {
   const { formik, t, isError } = useFormField(name, props);
   let imageUrl = formik?.values?.[name] ?? null;
-
+  
   // Memoizing the fileList to prevent unnecessary recalculations
   const fileList = useMemo(() => {
     return imageUrl
       ? imageUrl.map((file: any, index: number) => {
+        
           return file instanceof File
             ? {
                 uid: index,
@@ -34,7 +35,7 @@ const MaltyFile = ({
                 url: file?.url || "",
                 thumbUrl: file?.url || "",
               };
-        })
+            })
       : [];
   }, [imageUrl]); // Dependency array ensures it recalculates only when imageUrl changes
 
@@ -58,7 +59,7 @@ const MaltyFile = ({
   return (
     <div className="ValidationField upload_image_button">
       <label htmlFor={name} className="text">
-        {t(`input.${label || name}`)}
+        {t(`${label || name}`)}
       </label>
 
       <Upload
@@ -75,7 +76,7 @@ const MaltyFile = ({
           className={isError ? "isError w-100" : "w-100"}
           icon={<FaUpload />}
         >
-          {t(`input.` + placeholder) ?? t("input.upload_image")}
+          {t(placeholder) ?? t("upload_image")}
         </Button>
         <div className="Error_color">{isError ? "required" : ""}</div>
       </Upload>
diff --git a/src/Pages/product/AddProductModal.tsx b/src/Pages/product/AddProductModal.tsx
index ea5f4b9..1dd40f6 100644
--- a/src/Pages/product/AddProductModal.tsx
+++ b/src/Pages/product/AddProductModal.tsx
@@ -17,7 +17,6 @@
       console.log(values);
       
       const dataToSend = getDataToSend(values)
-
       mutate(dataToSend)
       // Submit Value
     }   
diff --git a/src/Pages/product/EditProductModal.tsx b/src/Pages/product/EditProductModal.tsx
index 1c49e60..1d582fb 100644
--- a/src/Pages/product/EditProductModal.tsx
+++ b/src/Pages/product/EditProductModal.tsx
@@ -12,8 +12,8 @@ function EditProductModal() {
   const {status, mutate} = useUpdateProduct();
 
   const handleSubmit = (value:InitialValues)=>{
-    const dataToSend = getDataToSend({...value})
     console.log(value);
+    const dataToSend = getDataToSend({...value})
     
     mutate(dataToSend)
 }
diff --git a/src/Pages/product/FormProduct.tsx b/src/Pages/product/FormProduct.tsx
index a3e9c36..061f5ab 100644
--- a/src/Pages/product/FormProduct.tsx
+++ b/src/Pages/product/FormProduct.tsx
@@ -5,11 +5,8 @@ import ValidationField from '../../Components/ValidationField/ValidationField';
 import { useTranslation } from 'react-i18next';
 import { useGetCategory } from '../../api/category';
 import { objectToKeyValueArray } from '../../utils/ConvertObjToArr';
+import { Collection, Param } from './formUtil';
 
-interface Param {
-  key: string;
-  value: string;
-}
 
 interface FormValues {
   attachments: any;
@@ -18,6 +15,7 @@ interface FormValues {
   model: string;
   image: string;
   params: Param[];
+  collections: Collection[]
 }
 
 function FormProduct() {
@@ -29,112 +27,127 @@ function FormProduct() {
     value: e.id,
     label: e?.name,
   }));
-  // console.log(formik.values.params);
-  const paramsArray  = objectToKeyValueArray(formik.values.params)
-  // console.log(formik.values.params);
-  
+
   return (
     <>
-    <Row xs={1} sm={1} md={1} lg={2} xl={2}>
-      <Col>
-        <ValidationField name="name" type="text" label="Name" placeholder="placeholder" />
-        <ValidationField name="description" type="text" label="description" placeholder="placeholder" />
-        <ValidationField name="model" type="text" label="Model" placeholder="placeholder" />
-        <ValidationField name="file" type="File" label="Image" placeholder="placeholder" />
-        <ValidationField name="category_id" type="Select" label="Category" option={CategoryOption} placeholder="placeholder" />
-      </Col>
-      <Col>
-        <FieldArray name="params">
-          {({ push, remove }) => (
-            <div>
-              {Array.isArray(formik.values.params) && formik.values.params.map((param, index) => (
-                <div key={index}>
-                  <ValidationField 
-                    name={`params.${index}.key`}
-                    type="text" 
-                    label={`Param Key ${index + 1}`} 
-                    placeholder="Key"
-                  />
-                  <ValidationField 
-                    name={`params.${index}.value`}
-                    type="text" 
-                    label={`Param Value ${index + 1}`} 
-                    placeholder="Value"
-                  />
-                  <Button type="button" className='remove_button' color='danger' onClick={() => remove(index)}>{t("Remove")}</Button>
-                </div>
-              ))}
-              <Button 
-                type="button" 
-                className="add_button" 
-                color='primary' 
-                onClick={() => push({ key: '', value: '' })}
-              >
-                {t("Add Param")}
-              </Button>
-            </div>
-          )}
-        </FieldArray>
-      </Col>
-    </Row>
-    <Row>
-      {/* collection */}
-    <Col className='border'>
-      {/* <FieldArray name="">
-        {({ push, remove }) => (
-          <div>
-            {formik.values.params.map((param, index) => (
-              <div key={index}>
-                <ValidationField 
-                  name={`params.${index}.key`} 
-                  type="text" 
-                  label={`Param Key ${index + 1}`} 
-                  placeholder="Key"
-                />
-                <ValidationField 
-                  name={`params.${index}.value`} 
-                  type="text" 
-                  label={`Param Value ${index + 1}`} 
-                  placeholder="Value"
-                />
-                <Button type="button" className='remove_button' color='danger' onClick={() => remove(index)}>{t("Remove")}</Button>
+      <Row xs={1} sm={1} md={1} lg={3} xl={3}>
+        <Col>
+          <ValidationField name="name" type="text" label="Name" placeholder="placeholder" />
+          <ValidationField name="description" type="text" label="description" placeholder="placeholder" />
+          <ValidationField name="model" type="text" label="Model" placeholder="placeholder" />
+          <ValidationField name="file" type="File" label="Image" placeholder="placeholder" />
+          <ValidationField name="category_id" type="Select" label="Category" option={CategoryOption} placeholder="placeholder" />
+          <ValidationField name="attachments" type="MaltyFile" label="Attachments inputs" placeholder="Attachments" />
+        </Col>
+
+        <Col>
+          <FieldArray name="params">
+            {({ push, remove }) => (
+              <div>
+                {Array.isArray(formik.values.params) && formik.values.params.map((param, index) => (
+                  <div key={index}>
+                    <ValidationField
+                      name={`params.${index}.key`}
+                      type="text"
+                      label={`Param Key ${index + 1}`}
+                      placeholder="Key"
+                    />
+                    <ValidationField
+                      name={`params.${index}.value`}
+                      type="text"
+                      label={`Param Value ${index + 1}`}
+                      placeholder="Value"
+                    />
+                    <div className='flex_between'>
+                      <Button type="button" className='remove_button' color='danger' onClick={() => remove(index)}>{t("Remove")}</Button>
+                      <Button
+                        type="button"
+                        className="add_button"
+                        color='primary'
+                        onClick={() => push({ key: '', value: '' })}
+                      >
+                        {t("Add Param")}
+                      </Button>
+                    </div>
+                  </div>
+                ))}
               </div>
-            ))}
-            <Button type="button" className="add_button" color='primary' onClick={() => push({ key: '', value: '' })}>{t("Add Param")}</Button>
-          </div>
-        )}
-      </FieldArray> */}
+            )}
+          </FieldArray>
+        </Col>
 
-
-      {/*  attachements array */}
-      <FieldArray name="attachments">
-  {({ push, remove }) => (
-    <div>
-      {formik.values.attachments.map((attachment: any, index: number) => (
-        <div key={index}>
-          {/* <ValidationField
-            name={`attachments[${index}].id`}
-            type="text"
-            label={`Attachment ID ${index + 1}`}
-            placeholder="Attachment ID"
-          /> */}
-          <ValidationField
-            name={`attachments[${index}].attachment`}
-            type="File"
-            label={`Attachment URL ${index + 1}`}
-            placeholder="Attachment URL"
-          />
-          <Button type="button" className='remove_button' color='danger' onClick={() => remove(index)}>{t("Remove")}</Button>
-        </div>
-      ))}
-      <Button type="button" className="add_button" color='primary' onClick={() => push({ id: null, attachment: '' })}>{t("Add Attachment")}</Button>
-    </div>
-  )}
-</FieldArray>
+        {/* collection */}
+        <Col>
+          <FieldArray name="collections">
+            {({ push, remove }) => (
+              <div>
+                {Array.isArray(formik.values.collections) && formik.values.collections?.map((collection, index) => (
+                  <div key={index}>
+                    <ValidationField
+                      name={`collections.${index}.name`}
+                      type="text"
+                      label={`Collection Name ${index + 1}`}
+                      placeholder="Collection Name"
+                    />
+                    <FieldArray name={`collections.${index}.collectionParams`}>
+                      {({ push: pushParam, remove: removeParam }) => (
+                        <div>
+                          {Array.isArray(collection?.collectionParams) && collection?.collectionParams?.map((param, paramIndex) => (
+                            <div key={paramIndex}>
+                              <ValidationField
+                                name={`collections.${index}.collectionParams.${paramIndex}.key`}
+                                type="text"
+                                label={`Param Key ${paramIndex + 1}`}
+                                placeholder="Key"
+                              />
+                              <ValidationField
+                                name={`collections.${index}.collectionParams.${paramIndex}.value`}
+                                type="text"
+                                label={`Param Value ${paramIndex + 1}`}
+                                placeholder="Value"
+                              />
+                              <div className='flex_evenly'>
+                                <Button type="button" className='remove_button remove_sub_color' color='danger' onClick={() => removeParam(paramIndex)}>
+                                  {t("Remove Param")}
+                                </Button>
+                                <Button
+                                  type="button"
+                                  className="add_button add_sub_color"
+                                  color='primary'
+                                  onClick={() => pushParam({ key: '', value: '' })}
+                                >
+                                  {t("Add Param")}
+                                </Button>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                    </FieldArray>
+                      <div className='flex_between'>
+                        <Button type="button" className='remove_button' color='danger' onClick={() => remove(index)}>
+                          {t("Remove Collection")}
+                        </Button>
+                        <Button
+                          type="button"
+                          className="add_button"
+                          color='primary'
+                          onClick={() => push({ name: '', collectionParams: [{ key: '', value: '' }] })}
+                        >
+                          {t("Add Collection")}
+                        </Button>
+                      </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </FieldArray>
         </Col>
       </Row>
     </>
-  );
+  )
 }
 
-export default FormProduct;
\ No newline at end of file
+
+
+export default FormProduct
\ No newline at end of file
diff --git a/src/Pages/product/ProductPage.tsx b/src/Pages/product/ProductPage.tsx
index 2d8aa30..d5000b7 100644
--- a/src/Pages/product/ProductPage.tsx
+++ b/src/Pages/product/ProductPage.tsx
@@ -1,5 +1,4 @@
 
-import React from 'react'
 import DashBody from '../../Layout/Dashboard/DashBody'
 import DashHeader from '../../Layout/Dashboard/DashHeader'
 import LyTable from '../../Layout/Dashboard/LyTable'
diff --git a/src/Pages/product/formUtil.ts b/src/Pages/product/formUtil.ts
index a1a97fc..78e7142 100644
--- a/src/Pages/product/formUtil.ts
+++ b/src/Pages/product/formUtil.ts
@@ -1,8 +1,8 @@
 import * as Yup from 'yup';
 import { buildFormData } from '../../api/helper/buildFormData';
-import { objectToKeyValueArray } from '../../utils/ConvertObjToArr';
+import { collectionObjectToArray, objectToKeyValueArray } from '../../utils/ConvertObjToArr';
 
-interface Param {
+export interface Param {
   key: string;
   value: string;
 }
@@ -11,16 +11,16 @@ interface Category {
   name: string | null;
 }
 
-interface Collection {
+export interface Collection {
   name: string;
-  collectionParam: {
+  collectionParams: {
     key: string;
+    value: string;
   };
 }
 
 interface Attachment {
   id: number | null;
-  // type: string;
   attachment: string;
 }
 
@@ -33,23 +33,30 @@ interface FormUtilCommon {
   category?: Category;
   params?: Param[];
   collections?: Collection[];
-  attachments?: Attachment[]; // Add attachments here
+  attachment?: Attachment[]; // Add attachments here
 }
 interface ObjectToEdit extends FormUtilCommon {
   id?: number | null;
+
 }
 
 export interface InitialValues extends ObjectToEdit {
 
 }
 
-interface ValidateSchema extends FormUtilCommon {}
+interface ValidateSchema extends FormUtilCommon { }
 
 export const getInitialValues = (objectToEdit: ObjectToEdit | null = null): any => {
-  
+
   const params = objectToEdit?.params ? objectToKeyValueArray(objectToEdit.params) : [{ key: '', value: '' }];
-  const collections = objectToEdit?.collections || [];
-  const attachments = objectToEdit?.attachments ? objectToEdit.attachments.map(attachment  =>  attachment.attachment  ?? []):[]
+  const collection = objectToEdit?.collections ? objectToKeyValueArray(objectToEdit.collections) : [{ name: '', collectionParams: [{ key: '', value: '' }]} ];
+  // { name: '', collectionParams: [{ key: '', value: '' }] };
+
+  const attachments = objectToEdit?.attachment ? objectToEdit.attachment.map(attachment => {
+    return {
+      url: attachment.attachment ?? ""
+    }
+  }) : []
 
   return {
     id: objectToEdit?.id ?? null,
@@ -59,12 +66,12 @@ export const getInitialValues = (objectToEdit: ObjectToEdit | null = null): any
     model: objectToEdit?.model ?? '',
     file: objectToEdit?.file ?? '',
     params: params,
-    collections: collections,
+    collections: collection,
     attachments: attachments, // Set the attachments here
   };
 }
 
-export const getValidationSchema = (editMode: boolean = false): Yup.Schema<ValidateSchema> => {
+export const getValidationSchema = (editMode: boolean = false): any => {
   return Yup.object().shape({
     name: Yup.string().required('required'),
     category_id: Yup.number().nullable().required('required'),
@@ -77,28 +84,39 @@ export const getValidationSchema = (editMode: boolean = false): Yup.Schema<Valid
         value: Yup.string().required('Value is required'),
       })
     ).default([]),
+    collections: Yup.array().of(
+      Yup.object().shape({
+        name: Yup.string().required('Collection Name is required'),
+        collectionParams: Yup.array().of(
+          Yup.object().shape({
+            key: Yup.string().required('Key is required'),
+            value: Yup.string().required('Value is required'),
+          })
+        ).required('At least one parameter is required').min(1, 'At least one parameter is required'), // Ensure at least one parameter
+      })
+    ).optional(), // Allow collections to be optional
   });
 };
 
 export const getDataToSend = (values: any): any => {
   const data = { ...values };
-  if(data?.id){
+  console.log(values);
+  
+  if (data?.id) {
     data["_method"] = "PUT"
   }
-  
+
   // Ensure params is an array
   if (!Array.isArray(data.params)) {
     data.params = [];
   }
-  
-  // if (data.attachments && Array.isArray(data.attachments)) {
-  //   data.attachments = data.attachments.map(({att}:any  ) => att.attachment);
-  // }
 
-  // const formData = new FormData();
-  // buildFormData(formData, data);
-  // return formData;
-  if(typeof data['file'] == 'string') delete data['file']
+  if (typeof data['file'] == 'string') delete data['file']
   // Return the data object directly
+
+  if (!Array.isArray(data.collections)) {
+    data.collections = [];
+  }
+
   return data;
 };
\ No newline at end of file
diff --git a/src/Pages/product/useTableColumns.tsx b/src/Pages/product/useTableColumns.tsx
index 6e51edf..a6b124a 100644
--- a/src/Pages/product/useTableColumns.tsx
+++ b/src/Pages/product/useTableColumns.tsx
@@ -61,7 +61,7 @@ const useTableColumns :any = () => {
             <Actions
 
             // importnat to return the row in on Edit Function to store in objectToEdit That Upper in Edit Modal 
-              onEdit={() => row}
+              // onEdit={() => navigate('/')}
               objectToEdit={row}
               showEdit={true}
               showView={false}
diff --git a/src/Styles/AppStyle/App.scss b/src/Styles/AppStyle/App.scss
index 1707308..3145bac 100644
--- a/src/Styles/AppStyle/App.scss
+++ b/src/Styles/AppStyle/App.scss
@@ -97,4 +97,25 @@ svg {
     margin-top: 50px;
     margin-right: 10px;
     border-top: 2px solid gray;
+}
+.param_field{
+    display: none !important; 
+    width: 40% !important;
+}
+
+.flex_between{
+    display: flex;align-items: center;justify-content: space-around;
+}
+.flex_evenly{
+    display: flex;align-items: center;justify-content: space-evenly;
+    margin-bottom: 5px;
+}
+
+.add_sub_color{
+    background: rgba(3, 79, 210, 0.699) !important;
+    border-color: rgba(3, 79, 210, 0.699) !important;
+}
+.remove_sub_color{
+    background: rgba(255, 0, 0, 0.704) !important;
+    border-color: rgba(255, 0, 0, 0.704) !important;
 }
\ No newline at end of file
diff --git a/src/api/config.ts b/src/api/config.ts
index b6c8cfe..3e4dccf 100644
--- a/src/api/config.ts
+++ b/src/api/config.ts
@@ -1,5 +1,5 @@
     
-export const BaseURL = `http://192.168.1.102:8000/`;
+export const BaseURL = `http://127.0.0.1:8000/`;
 
 
 export const BaseURL_IMAGE = '';
diff --git a/src/utils/ConvertObjToArr.ts b/src/utils/ConvertObjToArr.ts
index a9811f9..5f61182 100644
--- a/src/utils/ConvertObjToArr.ts
+++ b/src/utils/ConvertObjToArr.ts
@@ -1,6 +1,6 @@
 export function objectToKeyValueArray(obj: { [key: string]: any } | null | undefined): Array<{ key: string; value: any }> {
-  if(!obj){
-    return [{key:'',value:''}]
+  if (!obj) {
+    return [{ key: '', value: '' }]
   }
   return Object.entries(obj).map(([key, value]) => ({
     key,
@@ -8,13 +8,16 @@ export function objectToKeyValueArray(obj: { [key: string]: any } | null | undef
   }));
 }
 
-// // Example usage:
-// const inputObject = {
-//     "wesam": "alabdeh",
-//     "ahmad": "alabdeh"
-//   };
-  
-//   const resultArray = objectToKeyValueArray(inputObject);
-//   console.log(resultArray);
-  // Output: [ { wesam: 'alabdeh' }, { ahmad: 'alabdeh' } ]
+export function collectionObjectToArray(collection: { name: string; collectionParams: { key: string; value: string } } | null | undefined): Array<{ name: string; collectionParams: { key: string; value: string } }> {
+  if (!collection) {
+    return [{ name: '', collectionParams: { key: '', value: '' } }];
+  }
 
+  return [{
+    name: collection.name,
+    collectionParams: {
+      key: collection.collectionParams.key,
+      value: collection.collectionParams.value,
+    },
+  }];
+}
\ No newline at end of file