@solidstarters/solid-core-ui 1.1.61 → 1.1.63

package/src/components/core/common/SolidSaveCustomFilterForm.tsx

@@ -0,0 +1,74 @@
+import { Button } from "primereact/button";
+import { Checkbox } from "primereact/checkbox";
+import { useState } from "react";
+
+interface SolidSaveCustomFilterFormProps {
+    currentSavedFilterData: any,
+    handleSaveFilter: ({ }) => void;
+    closeDialog: any
+}
+
+export const SolidSaveCustomFilterForm: React.FC<SolidSaveCustomFilterFormProps> = ({ currentSavedFilterData, handleSaveFilter, closeDialog }) => {
+    const [formValues, setFormValues] = useState({ name: currentSavedFilterData ? currentSavedFilterData.name : "", isPrivate: currentSavedFilterData ? currentSavedFilterData.isPrivate : false });
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, value, type, checked } = e.target;
+        setFormValues((prev) => ({
+            ...prev,
+            [name]: type === "checkbox" ? checked : value,
+        }));
+    };
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        const formData = {
+            id: currentSavedFilterData ? currentSavedFilterData.id : null,
+            name: formValues.name,
+            isPrivate: formValues.isPrivate === true ? true : "",
+        }
+        handleSaveFilter(formData);
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="flex flex-column gap-2">
+                <label htmlFor="name">Name:</label>
+                <input
+                    type="text"
+                    id="name"
+                    name="name"
+                    placeholder="Filter Title"
+                    className="p-inputtext p-inputtext-sm p-component"
+                    value={formValues.name}
+                    onChange={handleChange}
+                    readOnly={currentSavedFilterData}
+                />
+            </div>
+            <div className="mt-3 flex align-items-center ">
+                <Checkbox
+                    inputId="isPrivate"
+                    name="isPrivate"
+                    checked={formValues.isPrivate}
+                    onChange={(e: any) => handleChange(e)}
+                >
+                </Checkbox>
+                <label htmlFor="isPrivate" className="ml-2">Is Private</label>
+            </div>
+            <div className="mt-3 flex align-items-center gap-2">
+                <Button
+                    type="submit"
+                    label="Save"
+                    size="small"
+                />
+                <Button
+                    type="button"
+                    label="Cancel"
+                    size="small"
+                    outlined
+                    onClick={() => closeDialog()}
+                />
+            </div>
+        </form>
+    );
+};
+

package/src/components/core/filter/fields/SolidBooleanField.tsx

@@ -12,7 +12,7 @@ const SolidBooleanField = ({ fieldMetadata, onChange, index, rule }: SolidFilter
         { label: 'false', value: false },
     ];
     const filterMatchModeOptions = [
-        { label: 'Equals', value: "$eqi" },
+        { label: 'Equals', value: "$eq" },
     ];
 
 

package/src/components/core/kanban/SolidKanbanView.tsx

@@ -29,7 +29,15 @@ import "yet-another-react-lightbox/plugins/counter.css";
 import { useRouter, useSearchParams } from "next/navigation";
 import { SolidKanbanViewConfigure } from "./SolidKanbanViewConfigure";
 import { KanbanUserViewLayout } from "./KanbanUserViewLayout";
+import { useSelector } from "react-redux";
+import { queryObjectToQueryString, queryStringToQueryObject } from "../list/SolidListView";
+
+
 import { Toast } from "primereact/toast";
+import { useSelector } from "react-redux";
+import { queryObjectToQueryString, queryStringToQueryObject } from "../list/SolidListView";
+
+
 
 type SolidKanbanViewParams = {
   moduleName: string;
@@ -39,6 +47,8 @@ type SolidKanbanViewParams = {
 
 
 export const SolidKanbanView = (params: SolidKanbanViewParams) => {
+  const { user } = useSelector((state: any) => state.auth);
+
   const solidGlobalSearchElementRef = useRef();
   const searchParams = useSearchParams().toString(); // Converts the query params to a string
   const router = useRouter();
@@ -187,10 +197,13 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
       }
     }
     // setFilters(initialFilters);
-    const rows = solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.recordsInSwimlane ? solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.recordsInSwimlane : 25;
+    const recordsInSwimlane = solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.recordsInSwimlane ? solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.recordsInSwimlane : 25;
     // setToPopulate(toPopulate);
     // setToPopulateMedia(toPopulateMedia);
-    return { rows, toPopulate, toPopulateMedia }
+    setRecordsInSwimlane(recordsInSwimlane);
+    setToPopulate(toPopulate);
+    setToPopulateMedia(toPopulateMedia);
+    return { recordsInSwimlane, toPopulate, toPopulateMedia }
   }
 
 
@@ -199,10 +212,7 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
 
     if (solidKanbanViewMetaData) {
       setKanbanViewMetaData(solidKanbanViewMetaData);
-      const { rows, toPopulate, toPopulateMedia } = initialFilterMethod()
-      setRows(rows);
-      setToPopulate(toPopulate);
-      setToPopulateMedia(toPopulateMedia);
+      // initialFilterMethod();
       const viewModes = solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.allowedViews && solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.allowedViews.length > 0 && solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.allowedViews.map((view: any) => { return { label: capitalize(view), value: view } });
       setViewModes(viewModes);
       if (solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.grouped !== false) {
@@ -217,7 +227,7 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
   // All kanban view state.
   const [kanbanViewData, setKanbanViewData] = useState<any>([]);
   const [kanbanLoadMoreData, setKanbanLoadMoreData] = useState<any>({});
-  const [rows, setRows] = useState(25);
+  const [recordsInSwimlane, setRecordsInSwimlane] = useState(25);
   const [selectedRecords, setSelectedRecords] = useState<any[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
   const [isDialogVisible, setDialogVisible] = useState(false);
@@ -225,6 +235,9 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
   const [editButtonUrl, setEditButtonUrl] = useState<string>();
   const [columnsCount, setColumnsCount] = useState(5);
   const [swimLaneCurrentPageNumber, setSwimLaneCurrentPageNumber] = useState(1);
+  const [queryDataLoaded, setQueryDataLoaded] = useState(false);
+
+
 
   const showToast = (severity: "success" | "error", summary: string, detail: string) => {
     toast.current?.show({
@@ -276,109 +289,112 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
 
 
 
-
-  // Fetch data after toPopulate has been populated...
   useEffect(() => {
-
     if (solidKanbanViewMetaData) {
       const createActionUrl = solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.createAction && solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.createAction?.type === "custom" ? solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.createAction?.customComponent : "form/new";
       const editActionUrl = solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.editAction && solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.editAction?.type === "custom" ? solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.editAction?.customComponent : "form";
-      if (solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.swimlanesCount) {
-        setColumnsCount(solidKanbanViewMetaData?.data.solidView?.layout?.attrs?.swimlanesCount)
-      }
       if (createActionUrl) {
         setCreateButtonUrl(createActionUrl)
       }
       if (editActionUrl) {
         setEditButtonUrl(editActionUrl)
       }
-
-
-      const columnsToLoadCount = solidKanbanViewMetaData?.data.solidView?.layout?.attrs?.swimlanesCount || 5;
-      if (groupByFieldName && (toPopulate || toPopulateMedia)) {
-
-        const queryData = {
-          offset: 0,
-          limit: columnsToLoadCount,
-          fields: [`${groupByFieldName}`, `count(${groupByFieldName})`],
-          groupBy: groupByFieldName,
-          populateMedia: toPopulateMedia,
-          populateGroup: true,
-          groupFilter: {
-            limit: kanbanViewMetaData?.data?.solidView?.layout?.attrs?.recordsInSwimlane || 10,
-            offset: 0,
-            filters: filters,
-            populate: toPopulate,
-            populateMedia: toPopulateMedia
-          }
-          // sort: [`id:desc`],
-        };
-        // fields=status&groupBy=status&fields=count(status)&populateGroup=true
-        let queryString = qs.stringify(queryData, {
-          encodeValuesOnly: true
-        });
-        if (searchParams) {
-          queryString = searchParams;
-          setFilterQueryString(searchParams)
-        } else {
-          setFilterQueryString(queryString)
-        }
-        triggerGetSolidEntities(queryString);
-        setSelectedRecords([]);
-      }
     }
-  }, [isDeleteSolidEntitiesSucess, toPopulate, groupByFieldName, solidKanbanViewMetaData]);
+  }, [solidKanbanViewMetaData])
 
+  // Fetch data after toPopulate has been populated...
+  useEffect(() => {
 
+    if (solidKanbanViewMetaData) {
 
+      const swimlanesCount = solidKanbanViewMetaData?.data.solidView?.layout?.attrs?.swimlanesCount || 5;
+      if (groupByFieldName && (toPopulate || toPopulateMedia)) {
 
-  // clear Filter
+        const queryObject = queryStringToQueryObject();
+        let queryString = "";
+        if (searchParams) {
 
-  // const clearFilter = async () => {
-  //   if (solidKanbanViewMetaData) {
-  //     // initialFilterMethod()
-  //   }
-  //   setFilters(null);
-  //   if (solidKanbanViewMetaData) {
-  //     
-  //     const columnsToLoadCount = solidKanbanViewMetaData?.data.solidView?.layout?.attrs?.swimlanesCount || 5;
+          // Get Object from Url
+          const queryObject = qs.parse(searchParams,
+            {
+              decoder: str => decodeURIComponent(str),
+              allowDots: true,
+            }
+          );
 
-  //     if (toPopulate || toPopulateMedia) {
+          const filters = {
+            $and: []
+          }
+          if (queryObject.s_filter) {
+            filters.$and.push(queryObject.s_filter);
+          }
+          if (queryObject.c_filter) {
+            filters.$and.push(queryObject.c_filter);
+          }
 
-  //       const queryData = {
-  //         offset: 0,
-  //         limit: columnsToLoadCount,
-  //         fields: [`${groupByFieldName}`, `count(${groupByFieldName})`],
-  //         groupBy: groupByFieldName,
-  //         populate: toPopulate,
-  //         populateMedia: toPopulateMedia,
-  //         populateGroup: true,
-  //         groupFilter: {
-  //           limit: rows,
-  //           offset: 0,
+          const queryData = {
+            offset: 0,
+            limit: Number(queryObject.limit) + Number(queryObject.offset),
+            fields: queryObject.fields || [`${groupByFieldName}`, `count(${groupByFieldName})`],
+            groupBy: queryObject.groupBy || groupByFieldName,
+            populateMedia: queryObject.populateMedia || toPopulateMedia,
+            populateGroup: queryObject.populateGroup || true,
+            groupFilter: {
+              limit: Number(queryObject.groupFilter.limit) + Number(queryObject.groupFilter.offset) || kanbanViewMetaData?.data?.solidView?.layout?.attrs?.recordsInSwimlane,
+              offset: 0,
+              filters: filters,
+              populate: queryObject.groupFilter.populate || toPopulate,
+              populateMedia: queryObject.groupFilter.populateMedia || toPopulateMedia
+            }
+            // sort: [`id:desc`],
+          };
 
-  //         }
-  //         // sort: [`id:desc`],
-  //       };
-  //       // fields=status&groupBy=status&fields=count(status)&populateGroup=true
-  //       const queryString = qs.stringify(queryData, {
-  //         encodeValuesOnly: true
-  //       });
+          setRecordsInSwimlane(queryData.limit);
+          setToPopulate(queryData.populate);
+          setToPopulateMedia(queryData.populateMedia);
+          setFilters(filters);
+          setQueryDataLoaded(true);
 
-  //       const data: any = await triggerGetSolidEntities(queryString);
-  //       if (data && data?.data?.groupRecords.length > 0) {
-  //         const updatedData = [...data.data.groupRecords];
-  //         setKanbanViewData(updatedData);
-  //       }
-  //       setSelectedRecords([]);
-  //     }
-  //   }
+          queryString = qs.stringify(queryData, {
+            encodeValuesOnly: true
+          });
 
-  //   // @ts-ignore
-  //   solidGlobalSearchElementRef.current.clearFilter()
-  // };
 
+        } else {
+          const { recordsInSwimlane, toPopulate, toPopulateMedia } = initialFilterMethod();
+          const queryData = {
+            offset: 0,
+            limit: swimlanesCount,
+            fields: [`${groupByFieldName}`, `count(${groupByFieldName})`],
+            groupBy: groupByFieldName,
+            populateMedia: toPopulateMedia,
+            populateGroup: true,
+            groupFilter: {
+              limit: kanbanViewMetaData?.data?.solidView?.layout?.attrs?.recordsInSwimlane || 10,
+              offset: 0,
+              filters: filters,
+              populate: toPopulate,
+              populateMedia: toPopulateMedia
+            }
+            // sort: [`id:desc`],
+          };
+          setRecordsInSwimlane(recordsInSwimlane);
+          setToPopulate(toPopulate);
+          setToPopulateMedia(toPopulateMedia);
+
+          // fields=status&groupBy=status&fields=count(status)&populateGroup=true
+          queryString = qs.stringify(queryData, {
+            encodeValuesOnly: true
+          });
+
+          setQueryDataLoaded(true)
+        }
 
+        triggerGetSolidEntities(queryString);
+        setSelectedRecords([]);
+      }
+    }
+  }, [isDeleteSolidEntitiesSucess, groupByFieldName, solidKanbanViewMetaData]);
 
 
   // clickable link allowing one to open the detail / form view.
@@ -411,18 +427,7 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
     const { offset, limit, records } = kanbanLoadMoreData[groupByField];
     const newLoadMoreData = kanbanLoadMoreData;
     kanbanLoadMoreData[groupByField].offset = offset + limit;
-
     try {
-      // const queryData = {
-      //   offset: 0,
-      //   limit: 1,
-      //   fields: [`${groupByFieldName}`, `count(${groupByFieldName})`],
-      //   groupBy: groupByFieldName,
-      //   populate: toPopulate,
-      //   populateGroup: true,
-      //   sort: [`id:desc`],
-      // };
-
       const queryData = {
         offset: offset + limit,
         limit: limit,
@@ -441,7 +446,7 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
       const queryString = qs.stringify(queryData, {
         encodeValuesOnly: true
       });
-      setFilterQueryString(queryString);
+      // router.push(`?${queryString}`);
       const data: any = await triggerGetSolidEntities(queryString);
       const newRecords = data.data.records;
       const currentData = kanbanViewData;
@@ -471,8 +476,6 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
             groupData.meta.nextPage = groupData.meta.currentPage + 1
           }
         }
-
-
         return originalData;
       };
 
@@ -496,7 +499,7 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
 
 
   // Handle drag-and-drop functionality
-  const onDragEnd = (result: DropResult): void => {
+  const onDragEnd = async (result: DropResult): void => {
     const { source, destination } = result;
     if (!destination) return;
 
@@ -584,20 +587,21 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
   };
 
 
-
-  const handleSwimLinPagination = async () => {
+  // Handle SwimLane Pagination
+  const handleSwimLanePagination = async () => {
 
     if (solidKanbanViewMetaData) {
 
-      const columnsToLoadCount = solidKanbanViewMetaData?.data.solidView?.layout?.attrs?.swimlanesCount || 5;
+      const swimlanesCount = solidKanbanViewMetaData?.data.solidView?.layout?.attrs?.swimlanesCount || 5;
       const queryData = {
-        offset: swimLaneCurrentPageNumber * columnsToLoadCount,
-        limit: columnsToLoadCount,
+        offset: swimLaneCurrentPageNumber * swimlanesCount,
+        limit: swimlanesCount,
         fields: [`${groupByFieldName}`, `count(${groupByFieldName})`],
         groupBy: groupByFieldName,
+        populateMedia: toPopulateMedia,
         populateGroup: true,
         groupFilter: {
-          limit: rows,
+          limit: recordsInSwimlane,
           offset: 0,
           filters: filters,
           populate: toPopulate,
@@ -610,7 +614,11 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
       const queryString = qs.stringify(queryData, {
         encodeValuesOnly: true
       });
-      setFilterQueryString(queryString);
+
+      //Push  to Router
+      router.push(`?${queryString}`);
+
+
       const data: any = await triggerGetSolidEntities(queryString);
       if (data && data?.data?.groupRecords.length > 0) {
         const updatedData = [...kanbanViewData, ...data.data.groupRecords];
@@ -620,64 +628,74 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
     }
   }
 
-  const handleApplyCustomFilter = async (filters: any) => {
 
+  // Handle the custom filter and Search Filter
+  const handleApplyCustomFilter = async (transformedFilter: any) => {
 
-    const columnsToLoadCount = solidKanbanViewMetaData?.data.solidView?.layout?.attrs?.swimlanesCount || 5;
-    setFilters(filters)
+    if (solidKanbanViewMetaData) {
 
-    if (toPopulate) {
-      const queryData = {
-        offset: 0,
-        limit: columnsToLoadCount,
-        fields: [`${groupByFieldName}`, `count(${groupByFieldName})`],
-        groupBy: groupByFieldName,
-        populateGroup: true,
-        groupFilter: {
-          limit: rows,
+
+      const queryfilter = {
+        $and: [
+        ]
+      }
+      if (transformedFilter.s_filter) {
+        queryfilter.$and.push(transformedFilter.s_filter)
+      }
+      if (transformedFilter.c_filter) {
+        queryfilter.$and.push(transformedFilter.c_filter)
+      }
+
+      const customFilter = transformedFilter;
+      const updatedFilter = { ...(filters || {}), ...(queryfilter || {}) };
+      setFilters((prevFilters) => ({ ...(prevFilters || {}), ...(queryfilter || {}) }));
+
+      const swimlanesCount = solidKanbanViewMetaData?.data.solidView?.layout?.attrs?.swimlanesCount || 5;
+
+      if (toPopulate) {
+        const queryData = {
           offset: 0,
-          filters: filters,
-          populate: toPopulate,
-          populateMedia: toPopulateMedia
+          limit: swimlanesCount,
+          fields: [`${groupByFieldName}`, `count(${groupByFieldName})`],
+          groupBy: groupByFieldName,
+          populateGroup: true,
+          groupFilter: {
+            limit: recordsInSwimlane,
+            offset: 0,
+            filters: updatedFilter,
+            populate: toPopulate,
+            populateMedia: toPopulateMedia
+          }
+        };
+        const queryString = qs.stringify(queryData, {
+          encodeValuesOnly: true
+        });
 
+        // s_filter and c_filter format that needs to be passed to the router
+        // only present if handleCustomFilter is applied
+        if (customFilter) {
+          let url
+          const urlData = queryData;
+          delete urlData.filters;
+          urlData.s_filter = customFilter.s_filter || {};
+          urlData.c_filter = customFilter.c_filter || {};
+          queryObjectToQueryString(urlData);
         }
-        // sort: [`id:desc`],
-      };
-      // fields=status&groupBy=status&fields=count(status)&populateGroup=true
-      const queryString = qs.stringify(queryData, {
-        encodeValuesOnly: true
-      });
 
-      // triggerGetSolidEntities(queryString);
-      setFilterQueryString(queryString);
-      const data: any = await triggerGetSolidEntities(queryString);
-      if (data && data?.data?.groupRecords.length > 0) {
-        const updatedData = [...data.data.groupRecords];
-        setKanbanViewData(updatedData);
+
+        const data: any = await triggerGetSolidEntities(queryString);
+
+        // Update the kanban view data with the new data based on filter
+        if (data && data?.data?.groupRecords.length > 0) {
+          const updatedData = [...data.data.groupRecords];
+          setKanbanViewData(updatedData);
+        }
+        setSelectedRecords([]);
+
       }
-      setSelectedRecords([]);
     }
-    // if (toPopulate) {
-    //   const queryData = {
-    //     offset: 0,
-    //     limit: 25,
-    //     populate: toPopulate,
-    //     sort: [`id:desc`],
-    //     filters: { ...transformedFilter.filters }
-    //   };
-    //   if (params.embeded) {
-
-    //   }
-    //   const queryString = qs.stringify(queryData, {
-    //     encodeValuesOnly: true
-    //   });
-
-    //   triggerGetSolidEntities(queryString);
-    //   // setShowGlobalSearchElement(false)
-    //   setSelectedRecords([]);
-    // }
-  }
 
+  }
 
   useEffect(() => {
     if (solidKanbanViewMetaData) {
@@ -742,7 +760,7 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
       </div>
       <style>{`.p-datatable .p-datatable-loading-overlay {background-color: rgba(0, 0, 0, 0.0);}`}</style>
       {solidKanbanViewMetaData && kanbanViewData &&
-        <KanbanBoard groupedView={groupedView} kanbanViewData={kanbanViewData} solidKanbanViewMetaData={solidKanbanViewMetaData?.data} setKanbanViewData={setKanbanViewData} handleLoadMore={handleLoadMore} onDragEnd={onDragEnd} handleSwimLinPagination={handleSwimLinPagination} setLightboxUrls={setLightboxUrls} setOpenLightbox={setOpenLightbox} editButtonUrl={editButtonUrl}></KanbanBoard>
+        <KanbanBoard groupedView={groupedView} kanbanViewData={kanbanViewData} solidKanbanViewMetaData={solidKanbanViewMetaData?.data} setKanbanViewData={setKanbanViewData} handleLoadMore={handleLoadMore} onDragEnd={onDragEnd} handleSwimLanePagination={handleSwimLanePagination} setLightboxUrls={setLightboxUrls} setOpenLightbox={setOpenLightbox} editButtonUrl={editButtonUrl}></KanbanBoard>
       }
 
       <Dialog

package/src/components/core/kanban/kanban-fields/SolidMediaSingleKanbanField.tsx

@@ -11,7 +11,8 @@ import { PDFSvg } from '@/components/Svg/PDFSvg';
 import Image from 'next/image';
 import FileImage from '../../../../resources/images/fileTypes/File.png'
 import { ExcelSvg } from '@/components/Svg/ExcelSvg';
-
+import MP3Image from '../../../../resources/images/fileTypes/Mp3.png'
+import MP4Image from '../../../../resources/images/fileTypes/Mp4.png'
 
 pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
 
@@ -83,11 +84,53 @@ const SolidMediaSingleKanbanField = ({ solidKanbanViewMetaData, fieldMetadata, f
                     </a>
                 </div>
             )}
+
+            {mimeType && mimeType.includes("audio") && (
+                <div className='flex align-items-end gap-2 my-2' onClick={(e) => e.stopPropagation()}>
+                    <a href={url} download target="_blank" rel="noopener noreferrer">
+                        <Image
+                            src={MP3Image}
+                            alt={fileName}
+                            className="relative"
+                            height={50}
+                            width={50}
+                        />
+                    </a>
+                    <a href={url} download target="_blank" rel="noopener noreferrer" className='text-color flex align-items-start gap-2' style={{ textDecoration: 'none' }}>
+                        <p className="text-sm mb-1" style={{ wordWrap: 'break-word', overflowWrap: 'break-word' }}>
+                            {fileName}
+                        </p>
+                        <span className='pi pi-cloud-download'></span>
+                    </a>
+                </div>
+            )}
+            {mimeType && mimeType.includes("video") && (
+                <div className='flex align-items-end gap-2 my-2' onClick={(e) => e.stopPropagation()}>
+                    <a href={url} download target="_blank" rel="noopener noreferrer">
+                        <Image
+                            src={MP4Image}
+                            alt={fileName}
+                            className="relative"
+                            height={50}
+                            width={50}
+                        />
+                    </a>
+                    <a href={url} download target="_blank" rel="noopener noreferrer" className='text-color flex align-items-start gap-2' style={{ textDecoration: 'none' }}>
+                        <p className="text-sm mb-1" style={{ wordWrap: 'break-word', overflowWrap: 'break-word' }}>
+                            {fileName}
+                        </p>
+                        <span className='pi pi-cloud-download'></span>
+                    </a>
+                </div>
+            )}
+
             {mimeType &&
                 !mimeType.includes("image/") &&
                 !mimeType.includes("pdf") &&
                 !mimeType.includes("excel") &&
-                !mimeType.includes("spreadsheet") && (
+                !mimeType.includes("spreadsheet") &&
+                !mimeType.includes("audio") &&
+                !mimeType.includes("video") && (
                     <div className='flex align-items-end gap-2 my-2' onClick={(e) => e.stopPropagation()}>
                         <a href={url} download target="_blank" rel="noopener noreferrer">
                             <Image

package/src/components/core/model/CreateModel.tsx

@@ -178,7 +178,7 @@ const CreateModel = ({ data, params }: any) => {
         }
         return rest
       });
-      const { module, createdAt, updatedAt, id, deletedAt, ...modelData } = modelMetaData;
+      const { module, parentModel,createdAt, updatedAt, id, deletedAt, ...modelData } = modelMetaData;
       const updateData = { ...modelData, displayName: modelData.displayName.trim(), fields: fieldData };
       updateModel({ id: data.id, data: updateData });
     }
@@ -190,7 +190,7 @@ const CreateModel = ({ data, params }: any) => {
           }
           return rest
         });
-        const { module, ...modelData } = modelMetaData;
+        const { module, parentModel,...modelData } = modelMetaData;
         const data = { ...modelData, displayName: modelData.displayName.trim(), fields: fieldData };
         createModel(data);
         if (isCreateModelSuccess) {

package/src/components/core/model/FieldMetaDataForm.tsx

@@ -173,8 +173,6 @@ const fieldBasedPayloadFormating = (values: any, currentFields: string[], fieldM
   if (transformedPayload.relationType == "many-to-many") {
     transformedPayload.isRelationManyToManyOwner = true;
   }
-  
-
   return transformedPayload
 
 }