@solidstarters/solid-core-ui 1.1.210 → 1.1.211

package/src/components/core/dashboard/SolidDashboardVariable.tsx

@@ -0,0 +1,256 @@
+"use client";
+import { SqlExpression } from "../../../types/solid-core";
+import { AutoComplete, AutoCompleteChangeEvent, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+import { Calendar } from "primereact/calendar";
+import { Nullable } from "primereact/ts-helpers";
+import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
+import styles from './SolidDashboard.module.css';
+import { useGetDashboardVariableSelectionDynamicValuesQuery } from "../../../redux/api/dashboardApi";
+import { ProgressSpinner } from "primereact/progressspinner";
+import { DashboardVariableRecord } from "./SolidDashboard";
+import { Button } from "primereact/button";
+
+
+export interface DashboardVariableFilterProps {
+  setFilters: Dispatch<SetStateAction<SqlExpression[]>>;
+  clearSignal: number;
+  dashboardVariable: DashboardVariableRecord;
+}
+
+export const DateVariableFilterComponent: React.FC<DashboardVariableFilterProps> = ({ setFilters, clearSignal, dashboardVariable }) => {
+  // Initialize the default dates state
+  // If the dashboardVariable has a defaultOperator as Between and a defaultValue as two dates, we can set those as the initial values, otherwise null
+  const defaultDatesString = dashboardVariable.defaultOperator === '$between' && dashboardVariable.defaultValue
+  const defaultDatesArray = JSON.parse(defaultDatesString || '[]');
+  // Map the defaultDatesArray to Date objects
+  const defaultDates: Nullable<(Date | null)[]> = defaultDatesArray.length === 2 ? [
+    new Date(defaultDatesArray[0]),
+    new Date(defaultDatesArray[1])
+  ] : null;
+  const [dates, setDates] = useState<Nullable<(Date | null)[]>>(defaultDates);
+
+  useEffect(() => {
+    setDates(null);  // reset UI
+  }, [clearSignal]);
+  
+  return (
+    <div className={`flex align-items-center ${styles.SolidDashboardDateRangeFilterWrapper}`}>
+      <Calendar value={dates} onChange={(e) => {
+        console.log(`Calendar changed values are: `);
+        console.log(e.value);
+        const newDates = e.value as Date[] | null;
+        setDates(newDates);
+
+        if (newDates && newDates.length === 2 && newDates[0] && newDates[1]) {
+          const filter: SqlExpression = {
+            variableName: dashboardVariable.variableName,
+            // @ts-ignore
+            operator: '$between',
+            value: [
+              newDates[0].toISOString().split('T')[0],
+              newDates[1].toISOString().split('T')[0]
+            ]
+          };
+          setFilters(prev => {
+            // Remove any existing dashboardDate filter and replace with the new one
+            // const filtered = prev.filter(f => f.variableName !== 'dashboardDate');
+            return [filter];
+          });
+        }
+
+      }} selectionMode="range" readOnlyInput hideOnRangeSelection inputStyle={{ height: 36.38 }} className={styles.SolidDashboardDateRangeFilter} />
+      <div className="px-2">
+        <i className="pi pi-calendar opacity-50"></i>
+      </div>
+    </div>
+  )
+}
+
+export const SelectionDynamicVariableFilterComponent: React.FC<DashboardVariableFilterProps> = ({ setFilters, clearSignal, dashboardVariable }) => {
+  // Initialize the selection dynamic values state
+  // Pick the values from defaultValue if present, for default operator $in
+  const defaultDynamicValuesString = dashboardVariable.defaultOperator === '$in' && dashboardVariable.defaultValue;
+  const defaultDynamicValues = JSON.parse(defaultDynamicValuesString || '[]');
+
+  // Selection Dynamic Values
+  const [selectionDynamicValues, setSelectionDynamicValues] = useState<string[]>(defaultDynamicValues);
+  const [filteredItems, setFilteredItems] = useState<string[]>([]);
+
+  // Using rtk query to fetch dynamic values based on variableId
+  const variableId = dashboardVariable.id;
+  const queryString = `variableId=${variableId}`;
+  const { data: dynamicValues, isLoading, isError } = useGetDashboardVariableSelectionDynamicValuesQuery(queryString);
+
+  const allItems = dynamicValues ? dynamicValues : [];
+
+  // Dynamic search
+  const searchDynamic = (event: AutoCompleteCompleteEvent) => {
+    const query = event.query.toLowerCase();
+    const filtered = allItems.map(item => item.label).filter(item =>
+      item.toLowerCase().includes(query)
+    );
+    setFilteredItems(filtered);
+  };
+
+  // Set the filters whenever selectionDynamicValues change
+  useEffect(() => {
+    console.log(`Selection Dynamic Values changed:`, selectionDynamicValues);
+    if (selectionDynamicValues.length > 0) {
+      const filter: SqlExpression = {
+        variableName: dashboardVariable.variableName,
+        // @ts-ignore
+        operator: '$in',
+        value: selectionDynamicValues
+      };
+      setFilters(prev => {
+        // Remove any existing filter for this variable and replace with the new one
+        const filtered = prev.filter(f => f.variableName !== dashboardVariable.variableName);
+        return [...filtered, filter];
+      });
+    }
+    // else {
+    //   // If no values selected, remove the filter for this variable
+    //   setFilters(prev => prev.filter(f => f.variableName !== dashboardVariable.variableName));
+    // }
+  }, [selectionDynamicValues]);
+
+  useEffect(() => {
+    setSelectionDynamicValues([]);
+  }, [clearSignal]);
+
+  return (
+    <>
+      {isLoading && <ProgressSpinner></ProgressSpinner>}
+      {isError && <div>Error loading values</div>}
+      {!isLoading && !isError &&
+        <AutoComplete
+          value={selectionDynamicValues}
+          suggestions={filteredItems}
+          completeMethod={searchDynamic}
+          onChange={(e: AutoCompleteChangeEvent) => {
+            console.log('AutoComplete changed values are:');
+            console.log(e);
+            setSelectionDynamicValues(e.value)
+          }}
+          multiple
+          dropdown
+          placeholder={dashboardVariable.variableName}
+          className="solid-standard-autocomplete"
+          style={{ minHeight: 38 }}
+        />
+      }
+    </>
+  );
+}
+
+export const SelectionStaticVariableFilterComponent: React.FC<DashboardVariableFilterProps> = ({ setFilters, clearSignal, dashboardVariable }) => {
+  // Initialize the selection static values state
+  // Pick the values from defaultValue if present, for default operator $in
+  const defaultStaticValuesString = dashboardVariable.defaultOperator === '$in' && dashboardVariable.defaultValue;
+  const defaultStaticValues = JSON.parse(defaultStaticValuesString || '[]');
+
+  // Selection Static Values
+  const [selectionStaticValues, setSelectionStaticValues] = useState<string[]>(defaultStaticValues);
+  const [filteredStaticItems, setFilteredStaticItems] = useState<string[]>([]);
+  const staticValues = dashboardVariable.selectionStaticValues || [];
+
+  // The values are in the format val:label, we need to extract the labels
+  const staticValueItems = staticValues.map((val: any) => ({ value: val.split(':')[0], label: val.split(':')[1] }));
+
+  // Static search
+  const searchStatic = (event: AutoCompleteCompleteEvent) => {
+    const query = event.query.toLowerCase();
+    const filtered = staticValueItems.map(
+      (item: { label: any; }) => item.label
+    ).filter((item: string) =>
+      item.toLowerCase().includes(query)
+    );
+    setFilteredStaticItems(filtered);
+  };
+
+  // Set the filters whenever selectionStaticValues change
+  useEffect(() => {
+    // console.log(`Selection Static Values changed:`, selectionStaticValues);
+    if (selectionStaticValues.length > 0) {
+      const filter: SqlExpression = {
+        variableName: dashboardVariable.variableName,
+        // @ts-ignore
+        operator: '$in',
+        value: selectionStaticValues
+      };
+      setFilters(prev => {
+        // Remove any existing filter for this variable and replace with the new one
+        const filtered = prev.filter(f => f.variableName !== dashboardVariable.variableName);
+        return [...filtered, filter];
+      });
+    }
+    // else {
+    //   // If no values selected, remove the filter for this variable
+    //   setFilters(prev => prev.filter(f => f.variableName !== dashboardVariable.variableName));
+    // }
+  }, [selectionStaticValues]);
+
+  useEffect(() => {
+    setSelectionStaticValues([]);
+  }, [clearSignal]);
+
+  return (
+    <AutoComplete
+      value={selectionStaticValues}
+      suggestions={filteredStaticItems}
+      completeMethod={searchStatic}
+      onChange={(e: AutoCompleteChangeEvent) => setSelectionStaticValues(e.value)}
+      multiple
+      dropdown
+      placeholder={dashboardVariable.variableName}
+      className="solid-standard-autocomplete"
+      style={{ minHeight: 38 }}
+    />
+  );
+}
+
+export interface SolidDashboardVariableProps {
+  dashboardVariables: any;
+  filters: SqlExpression[];
+  setFilters: Dispatch<SetStateAction<SqlExpression[]>>;
+}
+
+const SolidDashboardVariable: React.FC<SolidDashboardVariableProps> = ({ dashboardVariables, filters, setFilters }) => {
+  const [clearSignal, setClearSignal] = useState(0);
+  const dashboardVariableComponents = dashboardVariables.map((dashboardVariable: any, index: number) => {
+    switch (dashboardVariable.variableType) {
+      case 'date':
+        return <DateVariableFilterComponent key={index} setFilters={setFilters} clearSignal={clearSignal} dashboardVariable={dashboardVariable} />;
+      case 'selectionStatic':
+        return <SelectionStaticVariableFilterComponent key={index} setFilters={setFilters} clearSignal={clearSignal} dashboardVariable={dashboardVariable} />;
+      case 'selectionDynamic':
+        return <SelectionDynamicVariableFilterComponent key={index} setFilters={setFilters} clearSignal={clearSignal} dashboardVariable={dashboardVariable} />;
+      default:
+        return null;
+    }
+  });
+
+  const clearAllFilters = () => {
+    setFilters([]);
+    setClearSignal(prev => prev + 1);  // triggers children to reset
+  };
+
+  // TODO [HP]: Currently this is static, we need this to be dynamic how we are invoking setFilters below has to be fully dynamic...
+  return (
+    <div className="flex align-items-center gap-3">
+      {dashboardVariableComponents}
+      {filters.length > 0 && (
+        <Button
+          onClick={clearAllFilters}
+          size="small"
+          outlined
+          // severity="info"
+          icon="pi pi-filter-slash"
+        />
+      )}
+    </div>
+  );
+}
+
+export default SolidDashboardVariable;
+

package/src/components/core/dashboard/SolidQuestionRenderer.tsx

@@ -0,0 +1,78 @@
+"use client"
+import { useGetDashboardQuestionDataByIdQuery } from '../../../redux/api/dashboardQuestionApi';
+import { SqlExpression } from '../../../types/solid-core';
+import { Message } from 'primereact/message';
+import { MeterGroup } from 'primereact/metergroup';
+import { ProgressSpinner } from 'primereact/progressspinner';
+import qs from 'qs';
+import { ChartJsRenderer } from './chart-renderers/ChartJsRenderer';
+import PrimeReactDatatableRenderer from './chart-renderers/PrimeReactDatatableRenderer';
+import styles from './SolidDashboard.module.css';
+
+type SolidQuestionRendererProps = {
+    question: any;
+    filters: SqlExpression[];
+    isPreview: boolean;
+};
+
+type DataItem= {
+    value: number;
+    label?: string | HTMLElement;
+    color?: string;
+}
+
+export const SolidQuestionRenderer = ({ question, filters = [], isPreview = false }: SolidQuestionRendererProps) => {
+    if (!question) {
+        return (
+            <div className={`${styles.SolidChartCardWrapper} p-4`}>
+                <Message text="Preview Unavailable" />
+            </div>
+        );
+    }
+
+    const textAlign = question?.textAlign ?? 'start'
+    if (!question) {
+        return (
+            <>
+                <Message text="Preview Unavailable" />
+            </>
+        )
+    }
+    // console.log(`Rendering BarChartRenderer using question id: ${question.id}`);
+
+    // load the question data.
+    const queryParams = qs.stringify(
+        {
+            isPreview,
+            filters,
+        },
+        // ensures proper handling of arrays
+        // { arrayFormat: 'indices' }
+    );
+    const { data: questionData, isLoading: questionDataIsLoading, error: questionDataError } = useGetDashboardQuestionDataByIdQuery({ id: question.id, qs: queryParams });
+
+
+    // console.log(`Question data: `); console.log(questionData);
+    // console.log(`Question data is loading: `); console.log(questionDataIsLoading);
+    // console.log(`Question data error: `); console.log(questionDataError);
+    const options = JSON.parse(question?.chartOptions);
+    // const kpi = questionData.data.kpi;
+    // const visualizationData = questionData.data.visualizationData;
+    // const visualizedAs = question.data.visualisedAs;
+    return (
+        <>
+            {questionDataIsLoading && <ProgressSpinner />}
+            {!questionDataIsLoading &&
+            <div className={`${styles.SolidChartCardWrapper} p-4 h-full`}>
+                <div className={`font-medium text-${textAlign} ${styles.SolidChartTitle}`}>{question.name}</div>
+                <div className={`mt-2 font-bold text-3xl text-${textAlign} ${styles.SolidChartTitle}`}>{questionData.data.kpi}</div>
+                <div className='mt-3'>
+                    {['bar', 'line', 'pie'].includes(question.visualisedAs) && <ChartJsRenderer options={options} visualizationData={questionData.data.visualizationData} visualizedAs={question.visualisedAs}  />}
+                    {question.visualisedAs === 'prime-meter-group' && <MeterGroup values={questionData.data.visualizationData.dataset}  max={questionData?.data?.visualizationData?.dataset?.reduce((total: number, item: DataItem) => total + item.value, 0)}/>}
+                    {question.visualisedAs === 'prime-datatable' && <PrimeReactDatatableRenderer options={options} visualizationData={questionData.data.visualizationData} />}
+                </div>
+            </div>
+    }
+        </>
+    )
+}

package/src/components/core/dashboard/chart-renderers/ChartJsRenderer.tsx

@@ -0,0 +1,18 @@
+"use client"
+import "../../../../components/core/dashboard/chart-renderers/init-chartjs";
+import { Bar, Line, Pie } from "react-chartjs-2";
+
+type ChartJsRendererProps = {
+    options: any;
+    visualizationData: any;
+    visualizedAs: 'bar' | 'line' | 'pie';
+};
+export const ChartJsRenderer = ({ options, visualizationData, visualizedAs }: ChartJsRendererProps) => {
+    return (
+        <>
+            {visualizedAs === 'bar' && <Bar options={options} data={visualizationData} />}
+            {visualizedAs === 'line' && <Line options={options} data={visualizationData} />}
+            {visualizedAs === 'pie' && <Pie data={visualizationData} />}
+        </>
+    );
+}

package/src/components/core/dashboard/chart-renderers/PrimeReactDatatableRenderer.tsx

@@ -0,0 +1,54 @@
+"use client";
+// import "../../../../components/core/dashboard/chart-renderers/init-chartjs";
+import { Column } from "primereact/column";
+import { DataTable } from "primereact/datatable";
+import { ProgressSpinner } from "primereact/progressspinner";
+
+type PrimeReactDatatableRendererProps = {
+    options: any;
+    visualizationData: any;
+}
+
+const PrimeReactDatatableRenderer = ({ options, visualizationData }: PrimeReactDatatableRendererProps) => {
+    // {
+    //   "size": "small",
+    //   "showGridlines": true,
+    //   "stripedRows": true,
+    //   "pagination": {
+    //     "rows": 10,
+    //     "rowsPerPageOptions": [5, 10, 25, 50]
+    //   }
+    // }    
+
+    const size = options?.size || 'small';
+    const showGridlines = options?.showGridLines || false;
+    const stripedRows = options?.stripedRows || false;
+    const paginator = options?.pagination || false;
+    const rows = options?.pagination?.rows || 10;
+    const rowsPerPageOptions = options?.pagination?.rowsPerPageOptions || [5, 10, 25, 50];
+
+    if (!visualizationData) {
+        return (
+            <>
+                <ProgressSpinner />
+            </>
+        );
+    }
+
+    const columns = visualizationData.columns;
+    const data = visualizationData.rows;
+
+    return (
+        <>
+            <DataTable value={data} tableStyle={{ minWidth: '50rem' }} size={size} showGridlines={showGridlines} stripedRows={stripedRows} paginator={paginator} rows={rows} rowsPerPageOptions={rowsPerPageOptions} >
+                {
+                    columns.map((col: any, i: number) => (
+                        <Column key={col.field} field={col.field} header={col.header} />
+                    ))
+                }
+            </DataTable>
+        </>
+    )
+};
+
+export default PrimeReactDatatableRenderer;

package/src/components/core/dashboard/chart-renderers/init-chartjs.ts

@@ -0,0 +1,25 @@
+import {
+    Chart as ChartJS,
+    CategoryScale,
+    LinearScale,
+    BarElement,
+    LineElement,
+    PointElement,
+    Title,
+    Tooltip,
+    Legend,
+    ArcElement,
+} from 'chart.js';
+
+// Only register once globally
+ChartJS.register(
+    CategoryScale,
+    LinearScale,
+    BarElement,
+    LineElement,
+    PointElement,
+    Title,
+    Tooltip,
+    Legend,
+    ArcElement
+);

package/src/components/core/dashboard/dashboard-utils.ts

@@ -0,0 +1,39 @@
+// export enum RuleMatchMode {
+//     EQUALS = '$equals',
+//     NOT_EQUALS = '$notEquals',
+//     CONTAINS = '$contains',
+//     NOT_CONTAINS = '$notContains',
+//     STARTS_WITH = '$startsWith',
+//     ENDS_WITH = '$endsWith',
+//     IN = '$in',
+//     NOT_IN = '$notIn',
+//     BETWEEN = '$between',
+//     LT = '$lt',
+//     LTE = '$lte',
+//     GT = '$gt',
+//     GTE = '$gte'
+// }
+
+export const getNumberOfInputs = (matchMode: any): number | null => {
+
+    switch (matchMode) {
+        case '$between':
+            return 2;
+        case '$in':
+        case '$notIn':
+            return null;
+        case '$startsWith':
+        case '$contains':
+        case '$notContains':
+        case '$endsWith':
+        case '$equals':
+        case '$notEquals':
+        case '$lt':
+        case '$lte':
+        case '$gt':
+        case '$gte':
+            return 1;
+        default:
+            return 1; // Default to single input if no specific match is found
+    }
+}

package/src/components/core/extension/solid-core/CustomIcon/StatusIcon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import 'primeicons/primeicons.css';
+
+interface StatusIconProps {
+  isPublished: boolean;
+}
+
+export const StatusIcon: React.FC<StatusIconProps> = ({ isPublished }) => {
+  return (
+    <span
+      className={`status-icon ${isPublished ? 'success' : 'danger'}`}
+      title={isPublished ? 'Published' : 'Not Published'}
+    >
+      <i className={`pi ${isPublished ? 'pi-check' : 'pi-times'}`} />
+    </span>
+  );
+};

package/src/components/core/extension/solid-core/dashboardQuestion/ChartFormPreviewWidget.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { SolidFormWidgetProps } from "../../../../../types";
+import { Message } from 'primereact/message';
+import { SolidQuestionRenderer } from "../../../../../components/core/dashboard/SolidQuestionRenderer";
+
+const ChartFormPreviewWidget = ({ formData, field, fieldsMetadata, viewMetadata, formViewData }: SolidFormWidgetProps) => {
+    console.log(`formData: `);
+    console.log(formData);
+    console.log(`field: `);
+    console.log(field);
+    console.log(`fieldsMetadata: `);
+    console.log(fieldsMetadata);
+    console.log(`viewMetadata: `);
+    console.log(viewMetadata);
+    console.log(`formViewData: `);
+    console.log(formViewData);
+
+    if (!formData || !formData.visualisedAs) {
+        return (
+            <>
+                <Message text="Preview Unavailable" />
+            </>
+        )
+    }
+
+    const visualisedAs = formData.visualisedAs.value;
+
+    return (
+            <div className="mt-3 p-2">
+                <SolidQuestionRenderer question={formViewData?.data} isPreview={true} filters={[]} />
+            </div>
+    );
+};
+
+export default ChartFormPreviewWidget;

package/src/components/core/extension/solid-core/emailTemplate/emailFormTypeChangeHandler.ts

@@ -0,0 +1,18 @@
+import { SolidViewLayoutManager } from "../../../../../components/core/common/SolidViewLayoutManager";
+
+const hanldeEmailFormTypeChange = (event: any) => {
+
+    const { modifiedField, modifiedFieldValue, viewMetadata, } = event;
+    const layout = viewMetadata.layout;
+    if (modifiedField === 'type') {
+        const layoutManager = new SolidViewLayoutManager(layout);
+        const renderMode = modifiedFieldValue.value === 'text' ? 'DefaultLongTextFormEditWidget' : 'DefaultRichTextFormEditWidget';
+        layoutManager.updateNodeAttributes('body', { "editWidget": renderMode});
+        return {
+            layoutChanged: true,
+            dataChanged: false,
+            newLayout: layoutManager.getLayout(), 
+        }
+    }
+}
+export default hanldeEmailFormTypeChange;

package/src/components/core/extension/solid-core/emailTemplate/emailFormTypeLoad.ts

@@ -0,0 +1,18 @@
+import { SolidViewLayoutManager } from "../../../../../components/core/common/SolidViewLayoutManager";
+
+const hanldeEmailFormTypeLoad = (event: any) => {
+
+    const { formData, type, viewMetadata } = event;
+    const layout = viewMetadata.layout;
+    if (formData?.type && type === 'onFormLayoutLoad') {
+        const layoutManager = new SolidViewLayoutManager(layout);
+        const renderMode = formData.type === 'text' ? 'DefaultLongTextFormEditWidget' : 'DefaultRichTextFormEditWidget';
+        layoutManager.updateNodeAttributes('body', { "editWidget": renderMode});
+        return {
+            layoutChanged: true,
+            dataChanged: false,
+            newLayout: layoutManager.getLayout(), 
+        }
+    }
+}
+export default hanldeEmailFormTypeLoad;