@solidstarters/solid-core-ui 1.1.11 → 1.1.13

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

@@ -7,8 +7,7 @@ import { Button } from "primereact/button";
 import { InputText } from "primereact/inputtext";
 import { OverlayPanel } from "primereact/overlaypanel";
 import { Divider } from "primereact/divider";
-
-
+import { Chips } from "primereact/chips";
 
 const getRandomInt = (min: number, max: number) => {
     return Math.floor(Math.random() * (max - min + 1)) + min;
@@ -101,8 +100,7 @@ const transformRulesToFilters = (input: any) => {
 
 }
 
-export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCustomFilter, setShowArchived, showArchived }: any, ref) => {
-
+export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCustomFilter, filters, clearFilter }: any, ref) => {
     const initialState: FilterRule[] = [
         {
             id: 1,
@@ -131,8 +129,88 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
             ]
         }
     ];
+
+    const op = useRef<OverlayPanel>(null);
+    const chipsRef = useRef<HTMLDivElement | null>(null);
+
     const [filterRules, setFilterRules] = useState<FilterRule[]>(initialState);
+    const [fields, setFields] = useState<any[]>([]);
     const [showGlobalSearchElement, setShowGlobalSearchElement] = useState<boolean>(false);
+    const [customChip, setCustomChip] = useState("");
+    const [searchChips, setSearchChips] = useState<{ columnName?: string; value: string }[]>([]);
+    const [inputValue, setInputValue] = useState<string | null>("");
+
+    useImperativeHandle(ref, () => ({
+        clearFilter: () => {
+            setFilterRules(initialState);
+        }
+    }));
+
+    useEffect(() => {
+        if (viewData?.data?.solidFieldsMetadata) {
+            const fieldsData = viewData?.data?.solidFieldsMetadata
+            const fieldsList = Object.entries(fieldsData).map(([key, value]: any) => ({ name: key, value: key }));
+            setFields(fieldsList)
+        }
+    }, [])
+
+    useEffect(() => {
+        if (chipsRef.current) {
+            const inputElement = chipsRef.current.querySelector("input");
+            if (inputElement) {
+                inputElement.addEventListener("input", (e) => {
+                    setInputValue((e.target as HTMLInputElement).value);
+                });
+            }
+        }
+    }, []);
+
+    useEffect(() => {
+        // Get the last valid filter
+        const validFilters = filters?.$or?.filter((filter: any) => filter !== undefined) || [];
+        if (validFilters.length > 0) {
+            setCustomChip(validFilters.length.toString()); // Store only the number
+        } else {
+            setCustomChip(""); // Reset when no filters are present
+        }
+    }, [filters]);
+
+    const handleChipChange = (e: any) => {
+        setInputValue(e.target.value);
+        if (op.current && e.target) {
+            op.current.show;
+        }
+        if (e.value && e.value.length > 0) {
+            const newChip = e.value[e.value.length - 1];
+            if (!searchChips.some(chip => chip.value === newChip.value)) {
+                setSearchChips([...searchChips, newChip]);
+            }
+        }
+    };
+
+    const firstFilterableFieldName = viewData?.data?.solidView?.layout?.children?.find(
+        (value: any) => value?.attrs?.filterable
+    )?.attrs?.name;
+
+    const handleAddChip = (columnName?: string) => {
+        if (inputValue?.trim()) {
+            const newChip = { columnName: columnName || firstFilterableFieldName, value: inputValue.trim() };
+
+            setSearchChips((prevChips) => {
+                const updatedChips = [...prevChips, newChip];
+                return updatedChips
+            });
+        }
+    }
+
+    const handleKeyDown = (e: any) => {
+        if (e.key === "Enter" && inputValue?.trim()) {
+            handleAddChip();
+            setInputValue(null);
+            e.preventDefault(); // Prevent form submission or unexpected behavior
+        }
+    };
+
     const transformFilterRules = (filterRules: any) => {
         const transformedFilter = transformRulesToFilters(filterRules[0]);
         if (transformedFilter) {
@@ -141,79 +219,144 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
         setShowGlobalSearchElement(false)
     }
 
-    useImperativeHandle(ref, () => ({
-        clearFilter: () => {
-            setFilterRules(initialState);
+    useEffect(() => {
+        const formattedChips = {
+            id: 1,
+            matchOperator: "and",
+            parentRule: null,
+            type: "rule_group",
+            children: searchChips.map((chip) => ({
+                children: [],
+                fieldName: chip.columnName,
+                id: null,
+                matchMode: "$containsi",
+                parentRule: 1,
+                type: "rule",
+                value: [chip.value]
+            }))
+        };
+        if (formattedChips.children.length > 0) {
+            const transformedFilter = transformRulesToFilters(formattedChips);
+            handleApplyCustomFilter(transformedFilter);
         }
-    }));
+    }, [searchChips]);
 
+    const groupedSearchChips = searchChips.reduce((acc, chip) => {
+        const key = chip.columnName || firstFilterableFieldName;
+        if (!acc[key]) {
+            acc[key] = [];
+        }
+        acc[key].push(chip.value);
+        return acc;
+    }, {} as Record<string, string[]>);
 
+    const chipsToDisplay = [
+        ...(customChip ? [customChip] : []),
+        ...Object.entries(groupedSearchChips).map(([columnName, values]) => `<div class="custom-chip-column">${columnName}</div> <div class="custom-chip-value">${values.join("<span class='custom-chip-or'> or</span> ")}</div>`)
+    ];
 
-    const [fields, setFields] = useState<any[]>([]);
 
     useEffect(() => {
-        if (viewData?.data?.solidFieldsMetadata) {
-            const fieldsData = viewData?.data?.solidFieldsMetadata
-            const fieldsList = Object.entries(fieldsData).map(([key, value]: any) => ({ name: key, value: key }));
+        console.log("Input Value", customChip, "Input Value", searchChips, "Input Value", inputValue);
+    }, [chipsToDisplay])
 
-            setFields(fieldsList)
+    const customChipTemplate = (item: any) => {
+        if (item === customChip) {
+            return (
+                <div className="flex align-items-center gap-2 text-base">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" onClick={() => setShowGlobalSearchElement(true)} >
+                        <rect width="20" height="20" rx="4" fill="#722ED1" />
+                        <path d="M8.66667 15V13.3333H11.3333V15H8.66667ZM6 10.8333V9.16667H14V10.8333H6ZM4 6.66667V5H16V6.66667H4Z" fill="white" />
+                    </svg>
+                    <span><strong>{customChip}</strong> rule{customChip === "1" ? '' : 's'} applied</span>
+                </div>
+            );
         }
-    }, [])
-
-    const op = useRef<OverlayPanel>(null);
+        return <div className="flex align-items-center gap-2 text-base" dangerouslySetInnerHTML={{ __html: item }}></div>;
+    };
 
     return (
         <div className="flex justify-content-center solid-custom-filter-wrapper">
             <div className="p-inputgroup flex-1"
-                onClick={(e) =>
-                    // @ts-ignore
-                    op.current.toggle(e)}
+                ref={chipsRef}
+                onClick={(e) => {
+                    e.preventDefault();
+                    if (op.current && e.target) {
+                        op.current.toggle(e);
+                    }
+                }}
             >
-                <InputText placeholder="Search Here" className="p-inputtext-sm" />
+                <Chips
+                    value={chipsToDisplay}
+                    onChange={handleChipChange}
+                    onRemove={(e) => {
+                        setCustomChip("");
+                        setSearchChips([]);
+                        clearFilter();
+                    }}
+                    itemTemplate={customChipTemplate}
+                    onKeyDown={handleKeyDown}
+                    className="custom-filter-chip"
+                    placeholder="Search..."
+                    removeIcon='pi pi-times'
+                    removable
+                />
                 <Button
                     icon="pi pi-search"
                     severity="secondary"
                     outlined size="small"
+                    onClick={(e) => {
+                        if (op.current && e.target) {
+                            op.current.toggle(e);
+                        }
+                    }}
                 />
             </div>
             <OverlayPanel ref={op} className="solid-custom-overlay" style={{ minWidth: 378 }}>
-                <div className="px-4 py-3">
-                    <p className="m-0">Searching...</p>
-                </div>
-                <Divider className="m-0" />
+                {inputValue ? (
+                    <>
+                        <div className="custom-filter-search-options px-2 py-2 flex flex-column">
+                            {viewData?.data?.solidView?.layout?.children
+                                .filter((value: any) => value?.attrs?.filterable) // Only keep filterable fields
+                                .map((value: any, index: any) => (
+                                    <Button
+                                        key={index}
+                                        className="p-2 flex gap-1 text-color"
+                                        onClick={() => handleAddChip(value?.attrs?.name)}
+                                        text
+                                        severity="secondary"
+                                    >
+                                        Search <strong>{value?.attrs?.name}</strong> for :
+                                        <span className="font-bold" style={{ color: '#000' }}>{inputValue}</span>
+                                    </Button>
+                                ))
+                            }
+                        </div>
+                        <Divider className="m-0" />
+                    </>
+                ) :
+                    <>
+                        <div className="p-3">Search Here...</div>
+                        <Divider className="m-0" />
+                    </>
+                }
                 <div className="px-2 py-1">
                     <Button text size="small" label="Custom Filter" iconPos="left" icon='pi pi-plus' onClick={() => setShowGlobalSearchElement(true)} />
                 </div>
                 <Divider className="m-0" />
-                {viewData?.data?.solidView?.model?.enableSoftDelete && <div className="px-2 py-1">
-                    <Button text size="small" label={showArchived ? "Hide Archived Records" : "Show Archived Records"} iconPos="left" onClick={() => {setShowArchived(!showArchived); op.current?.hide()}} />
-                </div>}
             </OverlayPanel>
-            <Dialog header={false} className="search-filter-popup" showHeader={false} visible={showGlobalSearchElement} style={{ width: '50vw' }} onHide={() => { if (!showGlobalSearchElement) return; setShowGlobalSearchElement(false); }}>
-                <div className="flex field-popup-navigation gap-3 justify-content-between ">
-                    <div className="flex text-2xl font-bold align-items-center ml-4" style={{ color: '#000' }}>
-                        <i className="pi pi-search" style={{ marginRight: '5px', color: "#06b6d4" }}></i>
-                        <p className="popup-heading m-0">Search and Filter</p>
-                    </div>
-                    <div className="flex align-items-center gap-3 close-popup">
-                        <Button icon="pi pi-times" rounded text aria-label="Cancel" type="reset" size="small" onClick={() => setShowGlobalSearchElement(false)} />
-                    </div>
+            <Dialog header={false} className="solid-global-search-filter" showHeader={false} visible={showGlobalSearchElement} style={{ width: '50vw' }} onHide={() => { if (!showGlobalSearchElement) return; setShowGlobalSearchElement(false); }}>
+                <div className="flex align-items-center justify-content-between px-3">
+                    <h5 className="solid-custom-title m-0">Add Custom Filter</h5>
+                    <Button icon="pi pi-times" rounded text aria-label="Cancel" type="reset" size="small" onClick={() => setShowGlobalSearchElement(false)} />
+                </div>
+                <Divider className="m-0" />
+                <div className="p-4">
+                    {fields.length > 0 &&
+                        <FilterComponent viewData={viewData} fields={fields} filterRules={filterRules} setFilterRules={setFilterRules} transformFilterRules={transformFilterRules} closeDialog={() => setShowGlobalSearchElement(false)}></FilterComponent>
+                    }
                 </div>
-                <div className="card relative">
-                    <TabView >
-                        <TabPanel header="Search">
-                            <SolidSearchBox viewData={viewData}></SolidSearchBox>
-                        </TabPanel>
-                        <TabPanel header="Filter" >
-                            {fields.length > 0 &&
-                                <FilterComponent viewData={viewData} fields={fields} filterRules={filterRules} setFilterRules={setFilterRules} transformFilterRules={transformFilterRules} ></FilterComponent>
-                            }
-                            {/* <SolidKanbanFilter solidKanbanViewMetaData={solidKanbanViewMetaData} handleApplyFilter={handleApplyFilter} filterValues={filterValues} setFilterValues={setFilterValues}></SolidKanbanFilter> */}
-                        </TabPanel>
-                    </TabView>
-                </div >
             </Dialog>
         </div>
     )
-
 });

package/src/components/core/filter/SolidManyToOneFilterElement.tsx

@@ -52,6 +52,8 @@ export const SolidManyToOneFilterElement = ({ value, updateInputs, index, fieldM
             value={value}
             suggestions={autoCompleteItems}
             completeMethod={autoCompleteSearch}
-            onChange={(e) => updateInputs(index, e.value)} />
+            onChange={(e) => updateInputs(index, e.value)}
+            className="w-full"
+        />
     )
 }

package/src/components/core/filter/SolidSelectionDynamicFilterElement.tsx

@@ -41,7 +41,7 @@ export const SolidSelectionDynamicFilterElement = ({ value, updateInputs, index,
             field="label"
             value={value}
             dropdown
-            className="w-full small-input"
+            className="w-full"
             suggestions={selectionDynamicItems}
             completeMethod={selectionDynamicSearch}
             onChange={(e) => updateInputs(index, e.value)} />

package/src/components/core/filter/SolidSelectionStaticFilterElement.tsx

@@ -23,7 +23,7 @@ export const SolidSelectionStaticFilterElement = ({ value, updateInputs, index,
             field="label"
             value={value}
             dropdown
-            className="w-full small-input"
+            className="w-full"
             suggestions={selectionStaticItems}
             completeMethod={selectionStaticSearch}
             onChange={(e) => updateInputs(index, e.value)} />

package/src/components/core/filter/SolidVarInputsFilterElement.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from "react";
 import { SolidManyToOneFilterElement } from "./SolidManyToOneFilterElement";
 import { SolidSelectionDynamicFilterElement } from "./SolidSelectionDynamicFilterElement";
 import { SolidSelectionStaticFilterElement } from "./SolidSelectionStaticFilterElement";
+import { Button } from "primereact/button";
 
 export enum InputTypes {
     Date = 'Date',
@@ -68,140 +69,107 @@ export const SolidVarInputsFilterElement = ({ values, onChange, inputType = Inpu
 
 
     return (
-        <div className="grid formgrid">
-            <div className="col-12">
-                <div className="flex flex-column gap-2">
-                    {inputs && inputs.map((value: any, index: number) => (
-
-                        <div key={index} className="flex align-items-center gap-2">
-
-                            {inputType === InputTypes.Text &&
-                                <InputText
-                                    value={value}
-                                    onChange={(e) => updateInputs(index, e.target.value)}
-                                    placeholder=""
-                                    className="p-inputtext-sm small-input w-full"
-                                />
-                            }
-                            {inputType === InputTypes.Numeric &&
-                                <InputNumber
-                                    value={value}
-                                    onChange={(e) => updateInputs(index, e.value)}
-                                    placeholder=""
-                                    className="p-inputtext-sm small-input w-full"
-                                />
-                            }
-                            {inputType === InputTypes.Date &&
-                                <Calendar
-                                    value={value}
-                                    onChange={(e) => updateInputs(index, e.target.value)}
-                                    dateFormat="mm/dd/yy"
-                                    placeholder="mm/dd/yyyy"
-                                    mask="99/99/9999"
-                                />
-                            }
-                            {inputType === InputTypes.DateTime &&
-                                <Calendar
-                                    value={value}
-                                    onChange={(e) => updateInputs(index, e.target.value)}
-                                    dateFormat="mm/dd/yy"
-                                    placeholder="mm/dd/yyyy hh:mm"
-                                    mask="99/99/9999 99:99"
-                                    showTime
-                                    hourFormat="24"
-                                />
-                            }
-                            {inputType === InputTypes.Time &&
-                                <Calendar
-                                    value={value}
-                                    onChange={(e) => updateInputs(index, e.target.value)}
-                                    placeholder="hh:mm"
-                                    mask="99:99"
-                                    timeOnly
-                                    hourFormat="24"
-                                />
-                            }
-                            {inputType === InputTypes.RelationManyToOne &&
-                                <SolidManyToOneFilterElement
-                                    value={value}
-                                    index={index}
-                                    updateInputs={updateInputs}
-                                    fieldMetadata={fieldMetadata}
-                                ></SolidManyToOneFilterElement>
-                            }
-                            {inputType === InputTypes.SelectionDynamic &&
-                                <SolidSelectionDynamicFilterElement
-                                    value={value}
-                                    index={index}
-                                    updateInputs={updateInputs}
-                                    fieldMetadata={fieldMetadata}
-                                ></SolidSelectionDynamicFilterElement>
-                            }
-                            {inputType === InputTypes.SelectionStatic &&
-
-                                <SolidSelectionStaticFilterElement
-                                    value={value}
-                                    index={index}
-                                    updateInputs={updateInputs}
-                                    fieldMetadata={fieldMetadata}
-                                ></SolidSelectionStaticFilterElement>
-                            }
-
-                            {numberOfInputs === null &&
-                                <>
-                                    {/* Plus Button to add a new row */}
-                                    {/* < Button
-                                        icon="pi pi-plus"
-                                        size="small"
-                                        className="small-button"
-                                        onClick={addInput}
-                                        type="button"
-                                    /> */}
-
-                                    {/* Trash Button to delete the row */}
-                                    {/* <Button
-                                        icon="pi pi-trash"
-                                        size="small"
-                                        className="small-button"
-                                        onClick={() => deleteInput(index)}
-                                        severity="danger"
-                                        type="button"
-                                    /> */}
-                                    <button onClick={() => addInput()}>
-                                        <div className="card flex justify-content-center">
-
-                                            <i className="custom-target-icon pi pi-plus-circle p-text-secondary p-overlay-badge"
-                                                data-pr-tooltip="Add Group"
-                                                data-pr-position="right"
-                                                data-pr-at="right+5 top"
-                                                data-pr-my="left center-2"
-                                                style={{ fontSize: '1.2rem', cursor: 'pointer' }}>
-                                            </i>
-                                        </div>
-
-                                    </button>
-
-                                    <button onClick={() => deleteInput(index)}>
-                                        <div className="card flex justify-content-center">
-
-                                            <i className="custom-target-icon pi pi-trash p-text-secondary p-overlay-badge"
-                                                data-pr-tooltip="Delete Rule"
-                                                data-pr-position="right"
-                                                data-pr-at="right+5 top"
-                                                data-pr-my="left center-2"
-                                                style={{ fontSize: '1.2rem', cursor: 'pointer' }}>
-                                            </i>
-                                        </div>
-                                    </button>
-                                </>
-                            }
-                        </div>
-
-                    ))}
-
-                </div>
-
-            </div>
-        </div>
+        <>
+            {inputs && inputs.map((value: any, index: number) => (
+                <>
+                    {inputType === InputTypes.Text &&
+                        <InputText
+                            value={value}
+                            onChange={(e) => updateInputs(index, e.target.value)}
+                            placeholder=""
+                            className='w-full'
+                        />
+                    }
+                    {inputType === InputTypes.Numeric &&
+                        <InputNumber
+                            value={value}
+                            onChange={(e) => updateInputs(index, e.value)}
+                            placeholder=""
+                            className='w-full'
+                        />
+                    }
+                    {inputType === InputTypes.Date &&
+                        <Calendar
+                            value={value}
+                            onChange={(e) => updateInputs(index, e.target.value)}
+                            dateFormat="mm/dd/yy"
+                            placeholder="mm/dd/yyyy"
+                            mask="99/99/9999"
+                        />
+                    }
+                    {inputType === InputTypes.DateTime &&
+                        <Calendar
+                            value={value}
+                            onChange={(e) => updateInputs(index, e.target.value)}
+                            dateFormat="mm/dd/yy"
+                            placeholder="mm/dd/yyyy hh:mm"
+                            mask="99/99/9999 99:99"
+                            showTime
+                            hourFormat="24"
+                        />
+                    }
+                    {inputType === InputTypes.Time &&
+                        <Calendar
+                            value={value}
+                            onChange={(e) => updateInputs(index, e.target.value)}
+                            placeholder="hh:mm"
+                            mask="99:99"
+                            timeOnly
+                            hourFormat="24"
+                        />
+                    }
+                    {inputType === InputTypes.RelationManyToOne &&
+                        <SolidManyToOneFilterElement
+                            value={value}
+                            index={index}
+                            updateInputs={updateInputs}
+                            fieldMetadata={fieldMetadata}
+                        ></SolidManyToOneFilterElement>
+                    }
+                    {inputType === InputTypes.SelectionDynamic &&
+                        <SolidSelectionDynamicFilterElement
+                            value={value}
+                            index={index}
+                            updateInputs={updateInputs}
+                            fieldMetadata={fieldMetadata}
+                        ></SolidSelectionDynamicFilterElement>
+                    }
+                    {inputType === InputTypes.SelectionStatic &&
+
+                        <SolidSelectionStaticFilterElement
+                            value={value}
+                            index={index}
+                            updateInputs={updateInputs}
+                            fieldMetadata={fieldMetadata}
+                        ></SolidSelectionStaticFilterElement>
+                    }
+                    {numberOfInputs === null &&
+                        <>
+                            {/* Plus Button to add a new row */}
+                            {/* < Button
+                                    icon="pi pi-plus"
+                                    size="small"
+                                    className="small-button"
+                                    onClick={addInput}
+                                    type="button"
+                                /> */}
+
+                            {/* Trash Button to delete the row */}
+                            {/* <Button
+                                    icon="pi pi-trash"
+                                    size="small"
+                                    className="small-button"
+                                    onClick={() => deleteInput(index)}
+                                    severity="danger"
+                                    type="button"
+                                /> */}
+                            <Button text icon="pi pi-plus-circle" size="small" onClick={() => addInput()} />
+                            <Button text icon="pi pi-trash" size="small" onClick={() => deleteInput(index)} />
+                        </>
+                    }
+                </>
+
+            ))}
+        </>
     )
 }