@solidstarters/solid-core-ui 1.1.211 → 1.1.212

package/dist/components/core/filter/fields/SolidTimeField.tsx

@@ -0,0 +1,48 @@
+"use client";
+import { Dropdown } from 'primereact/dropdown';
+import { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';
+import { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';
+import { dateFilterMatchModeOptions } from './SolidDateField';
+
+const SolidTimeField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
+    // const filterable = column.attrs.filterable;
+    const showFilterOperator = false;
+    const columnDataType = 'date';
+
+    // TODO: the body template to be controlled based on the format that one is expecting the date to be displayed in.
+    // const header = column.attrs.label ?? fieldMetadata.displayName;
+    const numberOfInputs = getNumberOfInputs(rule.matchMode);
+    return (
+        <div className='flex flex-column md:flex-row align-items-start gap-2 md:gap-0'>
+            <div className="col-12 md:col-6 px-0 md:pr-2 md:pl-0">
+                <Dropdown
+                    value={rule.matchMode}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'matchMode', e.value)
+                    }}
+                    options={dateFilterMatchModeOptions}
+                    optionLabel='label'
+                    optionValue='value'
+                    placeholder="Select Operator"
+                    className="p-inputtext-sm w-full"
+                />
+            </div>
+
+            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-2 md:pr-0'>
+                <SolidVarInputsFilterElement
+                    values={rule.value}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'value', e)
+                    }}
+                    numberOfInputs={numberOfInputs}
+                    inputType={InputTypes.Time}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
+    );
+
+};
+
+export default SolidTimeField;

package/dist/components/core/filter/fields/SolidUuidField.tsx

@@ -0,0 +1,51 @@
+"use client";
+import { Dropdown } from 'primereact/dropdown';
+import { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';
+import { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';
+
+const SolidUuidField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
+    const showFilterOperator = false;
+    const columnDataType = 'text';
+    const filterMatchModeOptions = [
+        { label: 'In', value: "$in" },
+        { label: 'Not In', value: "$notIn" },
+        { label: 'Is null', value: "$null" },
+        { label: 'Is Not null', value: "$notNull" }
+
+    ];
+    const numberOfInputs = getNumberOfInputs(rule.matchMode);
+
+    return (
+        <div className='flex flex-column md:flex-row align-items-start gap-2 md:gap-0'>
+            <div className="col-12 md:col-6 px-0 md:pr-2 md:pl-0">
+                <Dropdown
+                    value={rule.matchMode}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'matchMode', e.value)
+                    }}
+                    options={filterMatchModeOptions}
+                    optionLabel='label'
+                    optionValue='value'
+                    placeholder="Select Operator"
+                    className="w-full p-inputtext-sm col-12 md:col-6"
+                />
+            </div>
+
+            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-2 md:pr-0'>
+                <SolidVarInputsFilterElement
+                    values={rule.value}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'value', e)
+                    }}
+                    numberOfInputs={numberOfInputs}
+                    inputType={InputTypes.Text}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
+    );
+
+};
+
+export default SolidUuidField;

package/dist/components/core/filter/fields/relations/SolidRelationManyToManyField.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { SolidFilterFieldsParams, getNumberOfInputs } from '../../../../../components/core/filter/SolidFilterFields';
+import { SolidVarInputsFilterElement, InputTypes } from '../../../../../components/core/filter/SolidVarInputsFilterElement';
+import { Dropdown } from 'primereact/dropdown';
+
+const SolidRelationManyToManyField = ({
+    fieldMetadata,
+    onChange,
+    index,
+    rule,
+}: SolidFilterFieldsParams) => {
+
+    const filterMatchModeOptions = [
+        { label: 'In', value: '$in' },
+        { label: 'Not In', value: '$notIn' }
+        // { label: 'Is Empty', value: '$null' },
+        // { label: 'Is Not Empty', value: '$notNull' },
+    ];
+
+    const noInputOperators = ['$null', '$notNull'];
+    const needsInput = !noInputOperators.includes(rule.matchMode);
+    const numberOfInputs = needsInput ? getNumberOfInputs(rule.matchMode) : 0;
+
+    return (
+        <div className="flex flex-column md:flex-row align-items-start gap-2 md:gap-0">
+            {/* Operator */}
+            <div className="col-12 md:col-6 px-0 md:pr-2 md:pl-0">
+                <Dropdown
+                    value={rule.matchMode}
+                    onChange={(e) => {
+                        onChange(rule.id, 'matchMode', e.value);
+                        // Clear value if switching to no-input operator
+                        if (noInputOperators.includes(e.value)) {
+                            onChange(rule.id, 'value', []);
+                        }
+                    }}
+                    options={filterMatchModeOptions}
+                    optionLabel="label"
+                    optionValue="value"
+                    placeholder="Select Operator"
+                    className="p-inputtext-sm w-full"
+                />
+            </div>
+
+            {/* MultiSelect input */}
+            <div className="flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-2 md:pr-0">
+                <SolidVarInputsFilterElement
+                    values={rule.value}
+                    onChange={(value: any) => {
+                        onChange(index, 'value', value);
+                    }}
+                    numberOfInputs={numberOfInputs}
+                    inputType={InputTypes.RelationManyToMany}
+                    fieldMetadata={fieldMetadata}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default SolidRelationManyToManyField;

package/dist/components/core/filter/fields/relations/SolidRelationManyToOneField.tsx

@@ -0,0 +1,84 @@
+"use client";
+import { InputTypes, SolidVarInputsFilterElement } from '../../../../../components/core/filter/SolidVarInputsFilterElement';
+import { Dropdown } from 'primereact/dropdown';
+import { getNumberOfInputs, SolidFilterFieldsParams } from '../../../../../components/core/filter/SolidFilterFields';
+
+const SolidRelationManyToOneField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
+    // const filterable = column.attrs.filterable;
+    const showFilterOperator = false;
+    const filterMatchModeOptions = [
+        { label: 'In', value: "$in" },
+        { label: 'Not In', value: "$notIn" },
+    ];
+    const columnDataType = undefined;
+    const numberOfInputs = getNumberOfInputs(rule.matchMode);
+
+    // const filterTemplate = (options: ColumnFilterElementTemplateOptions) => {
+
+    //     return (
+    //         <SolidVarInputsFilterElement
+    //             values={options.value}
+    //             onChange={(e: FormEvent<HTMLInputElement>) => options.filterCallback(e, options.index)}
+    //             inputType={InputTypes.RelationManyToOne}
+    //             solidListViewMetaData={solidListViewMetaData}
+    //             fieldMetadata={fieldMetadata}
+    //             column={column}
+    //         >
+    //         </SolidVarInputsFilterElement>
+    //     )
+    // };
+
+    // const bodyTemplate = (rowData: any) => {
+    //     const manyToOneFieldData = rowData[column.attrs.name];
+
+    //     // This is the userkey that will be present within the rowData.
+    //     if (manyToOneFieldData) {
+    //         // Since this is a many-to-one field, we fetch the user key field of the associated model.
+    //         const userKeyField = fieldMetadata.relationModel.userKeyField.name;
+
+    //         const manyToOneColVal = manyToOneFieldData[userKeyField];
+
+    //         // TODO: change this to use an anchor tag so that on click we open that entity form view. 
+    //         return <span>{manyToOneColVal}</span>;
+    //     }
+    //     else {
+    //         return <span></span>
+    //     }
+    // };
+    // const header = column.attrs.label ?? fieldMetadata.displayName;
+
+    return (
+        <div className='flex flex-column md:flex-row align-items-start gap-2 md:gap-0'>
+            <div className="col-12 md:col-6 px-0 md:pr-2 md:pl-0">
+
+            <Dropdown
+                value={rule.matchMode}
+                onChange={(e: any) => {
+                    onChange(rule.id, 'matchMode', e.value)
+                }}
+                options={filterMatchModeOptions}
+                optionLabel='label'
+                optionValue='value'
+                placeholder="Select Operator"
+                className="p-inputtext-sm w-full"
+            />
+            </div>
+
+            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-2 md:pr-0'>
+                <SolidVarInputsFilterElement
+                    values={rule.value}
+                    onChange={(e: any) => {
+                        onChange(index, 'value', e)
+                    }}
+                    numberOfInputs={numberOfInputs}
+                    inputType={InputTypes.RelationManyToOne}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
+    );
+
+};
+
+export default SolidRelationManyToOneField;