procode-vs-template 1.0.0

package/src/Widgets/Block/Styles/index.scss

@@ -0,0 +1,41 @@
+
+$header-border-color: #bfbfbf;
+$header-color: gray;
+$value-color: #464646;
+$font-family: "IBM Plex Sans";
+$header-font-size: 11px;
+$value-font-size: 14px;
+$header-line-height: 14px;
+$value-line-height: 18px;
+
+.tmpl-block-container {
+  padding: 10px;
+  background-color: $background-light;
+
+  .tmpl-block__item {
+    &.tmpl-border {
+      border-right: $border-width-sm solid $border-light;
+    }
+    .tmpl-block__header {
+      color: $header-color;
+      font-family: $font-family;
+      font-size: $header-font-size;
+      font-weight: 400;
+      line-height: $header-line-height;
+      &.tmpl-border-header {
+        border-bottom: $border-width-sm solid $border-light;
+        padding-bottom: 10px;
+        margin-bottom: 10px;
+      }
+    }
+
+    .tmpl-block__value {
+      color: $value-color;
+      font-family: $font-family;
+      font-size: $value-font-size;
+      font-weight: 500;
+      line-height: $value-line-height;
+      opacity: 0.8;
+    }
+  }
+}

package/src/Widgets/Block/index.tsx

@@ -0,0 +1,8 @@
+import BlockView from "./BlockView";
+import { BlockProps } from "./types";
+
+const Block = (props: BlockProps) => {
+  return <BlockView {...props} />;
+};
+
+export default Block;

package/src/Widgets/Block/types.ts

@@ -0,0 +1,11 @@
+export interface BlockProps {
+  title?: string;
+  value?: string;
+  enableBorder?: boolean;
+  enableHeaderBorder?: boolean;
+  widgetStyle?: {
+    id?: string;
+    className?: string;
+    inline?: React.CSSProperties;
+  };
+}

package/src/Widgets/ConfirmationAlert/ConfirmationAlertView.tsx

@@ -0,0 +1,90 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { BaseProps } from "../../Factory/BaseType";
+import { Dialog } from "@progress/kendo-react-dialogs";
+//import DeleteLogo from "../assets/delete.png";
+//import DeleteLogo from "qorder-tvtemplate/dist/assets/delete.png";
+import FactoryRenderer from "../../Renderer";
+type ConfirmationAlertViewProps = BaseProps & {
+  value: any;
+  title: string;
+  messageHeader?: string;
+  messageBody?: string;
+  handleHeader?: (header: string, viewModel?: Record<string, any>) => string;
+  handleBody?: (body: string, value?: any) => string;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+  onModelUpdate?: (
+    callBack: ((args: any) => void) | null,
+    fieldName: string,
+    value: any
+  ) => void;
+};
+const ConfirmationAlertView = (props: ConfirmationAlertViewProps) => {
+  const onCancel = () => {
+    try {
+      if (props.onCancel) {
+        props.onCancel();
+      } else if (props?.value?.onCancel) {
+        props.value.onCancel();
+      }
+    } finally {
+      props.onModelUpdate?.(null, props.screenDataField ?? "", null);
+    }
+  };
+  const onConfirm = async () => {
+    try {
+      if (props.onConfirm) {
+        await props.onConfirm();
+      } else if (props?.value?.onConfirm) {
+        await props.value.onConfirm();
+      }
+    } finally {
+      props.onModelUpdate?.(null, props.screenDataField ?? "", null);
+    }
+  };
+  return (
+    <Dialog
+      id={props.widgetStyle?.id || ""}
+      className={props.widgetStyle?.className || ""}
+      style={props.widgetStyle?.inline || {}}
+      onClose={onCancel}
+    >
+      <div className="tmpl-dialog-box-container">
+        <div className="tmpl-dialog-box__header">{props.title}</div>
+        <div className="tmpl-dialog-box__logo">
+          {/*  <img src={DeleteLogo} alt="delete icon" height="112" width="150" /> */}
+        </div>
+        <div className="tmpl-dialog-box__body">
+          <h4>
+            {props?.handleHeader
+              ? props?.handleHeader(props.messageHeader ?? "", props.viewModel)
+              : props.messageHeader}
+          </h4>
+
+          <p>
+            {props?.handleBody
+              ? props?.handleBody(props.messageBody ?? "", props.value)
+              : props.messageBody}
+          </p>
+        </div>
+        <div className="tmpl-dialog-box__footer">
+          <FactoryRenderer
+            themeColor="primary"
+            onClick={onConfirm}
+            title="Yes"
+            uiElementType="WIDGET"
+            widgetType="BUTTON"
+          />
+          <FactoryRenderer
+            themeColor="primary"
+            onClick={onCancel}
+            title="No"
+            uiElementType="WIDGET"
+            widgetType="BUTTON"
+          />
+        </div>
+      </div>
+    </Dialog>
+  );
+};
+export default ConfirmationAlertView;

package/src/Widgets/ConfirmationAlert/index.tsx

@@ -0,0 +1,16 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { BaseProps } from "../../Factory/BaseType";
+import ConfirmationAlertView from "./ConfirmationAlertView";
+
+export type ConfirmationAlertProps = BaseProps & {
+  value: any;
+  title: string;
+  messageHeader?: string;
+  messageBody?: string;
+  handleHeader?: (header: string) => string;
+  handleBody?: (body: string) => string;
+};
+const ConfirmationAlert = (props: ConfirmationAlertProps) => {
+  return <ConfirmationAlertView {...props} />;
+};
+export default ConfirmationAlert;

package/src/Widgets/ConfirmationAlert/scss/index.scss

@@ -0,0 +1,66 @@
+.tmpl-dialog-box-container {
+    max-width: 500px;
+
+    .tmpl-dialog-box__logo {
+        img {
+            margin-left: auto;
+            margin-right: auto;
+        }
+    }
+
+    .tmpl-dialog-box__body {
+        h4 {
+            color: #464646;
+            font-size: 18px;
+            font-weight: 400;
+            line-height: 26px;
+            padding: 20px 0 10px 0;
+            text-align: center;
+        }
+
+        p {
+            color: #464646;
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 16px;
+            text-align: center;
+            padding: 0 0 20px 0;
+        }
+    }
+
+    .tmpl-dialog-box__footer {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+
+        .k-button-solid-primary {
+            color: #fff;
+            font-family: IBM Plex Sans;
+            font-size: 11px;
+            font-weight: 500;
+            line-height: 14px;
+            padding: 5px 30px;
+        }
+
+        .k-button-solid-base {
+            color: #333;
+            font-family: IBM Plex Sans;
+            font-size: 11px;
+            font-weight: 500;
+            line-height: 14px;
+            padding: 5px 30px;
+        }
+    }
+
+    .tmpl-dialog-box__header {
+        text-align: center;
+        padding: 10px 0;
+        font-size: 20px;
+        font-weight: 600;
+    }
+}
+
+.k-dialog {
+    border-radius: 20px !important;
+}

package/src/Widgets/GridToolBar/Components/AdvancedSearch/AdvancedSearch.tsx

@@ -0,0 +1,83 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useState, useEffect, useRef } from "react";
+import AdvancedSearchView from "./AdvancedSearchView";
+import FilterPopup from "./FilterPopup";
+import { FilterTarget } from "../../data/advancedSearch";
+
+type AdvancedSearchProps = {
+  visible: boolean;
+  disabled: boolean;
+  filterableFields: FilterTarget[];
+  uiElementGroupData: Record<string, any>;
+  config: { uiElementGroupId: string };
+  onModelUpdate: (
+    callBack: ((args: any) => void) | null,
+    fieldName: string,
+    value: any
+  ) => void;
+  loadTemplateSupportiveData?: (
+    callBack: (args: any) => void,
+    supportiveKeys: any
+  ) => Promise<any>;
+};
+
+const AdvancedSearch: React.FC<AdvancedSearchProps> = (props) => {
+  const [togglePopup, setTogglePopup] = useState(false);
+  const popupRef = useRef<HTMLDivElement>(null);
+
+  const handlePopupShow = () => {
+    setTogglePopup(!togglePopup);
+  };
+
+  const handleClickOutside = (event: MouseEvent) => {
+    const target = event.target as HTMLElement;
+    const isInsideMyPopup = target.closest(`.tmpl-prvent-outside-click-close`);
+
+    if (
+      popupRef.current &&
+      !popupRef.current.contains(event.target as Node) &&
+      !isInsideMyPopup
+    ) {
+      setTogglePopup(false);
+    }
+  };
+
+  useEffect(() => {
+    if (togglePopup) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [togglePopup]);
+
+  return props.visible ? (
+    <div className="tmpl-advanced-search-container" ref={popupRef}>
+      <AdvancedSearchView
+        handlePopupShow={handlePopupShow}
+        disabled={props.disabled}
+      />
+      {togglePopup && !props.disabled && (
+        <div
+          className="tmpl-advanced-popup"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <FilterPopup
+            uiElementGroupData={props.uiElementGroupData}
+            filterableFields={props.filterableFields}
+            config={props.config}
+            onModelUpdate={props.onModelUpdate}
+            loadTemplateSupportiveData={props.loadTemplateSupportiveData}
+            handlePopupShow={handlePopupShow}
+          />
+        </div>
+      )}
+    </div>
+  ) : (
+    <></>
+  );
+};
+
+export default AdvancedSearch;

package/src/Widgets/GridToolBar/Components/AdvancedSearch/AdvancedSearchView.tsx

@@ -0,0 +1,25 @@
+import FactoryRenderer from "../../../../Renderer";
+
+type AdvancedSearchViewProps = {
+  handlePopupShow: () => void;
+  disabled: boolean;
+};
+
+const AdvancedSearchView = ({
+  handlePopupShow,
+  disabled,
+}: AdvancedSearchViewProps) => {
+  return (
+    <FactoryRenderer
+      onClick={handlePopupShow}
+      title="Advanced Search"
+      rootStyle={{ className: "tmpl-advanced-search" }}
+      widgetStyle={{ className: "tmpl-button" }}
+      uiElementType="WIDGET"
+      widgetType="BUTTON"
+      disabled={disabled}
+    />
+  );
+};
+
+export default AdvancedSearchView;

package/src/Widgets/GridToolBar/Components/AdvancedSearch/Filter.tsx

@@ -0,0 +1,162 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import TypeBasedWidgetFactory from "./TypeBasedWidgetFactory";
+import FactoryRenderer from "../../../../Renderer";
+import { FilterTargetType, Operator } from "../../enum";
+import { useEffect, useMemo } from "react";
+import { getTypeBasedOperators } from "./helper/AdvancedSearchFunctions";
+import { ValueLoadType } from "../../type";
+import {
+  FilterExpressionViewModel,
+  FilterTarget,
+  FilterValue,
+} from "../../data/advancedSearch";
+
+interface FilterProps {
+  uiElementGroupId: string;
+  filterRow: FilterExpressionViewModel;
+  appliedfilterCount: number;
+  loadTemplateSupportiveData?: (
+    callBack: (args: any) => void,
+    supportiveKeys: string[]
+  ) => Promise<any>;
+
+  onFilterTargetChange: (value: FilterTarget, id: string) => void;
+  onOperatorChange: (
+    value: { label: string; value: Operator | null },
+    id: string
+  ) => void;
+  onFilterValueChange: (value: FilterValue[] | FilterValue, id: string) => void;
+  onCriteriaToggle: (id: string) => void;
+  onAddFilter: (id: string) => void;
+  onDeleteFilter: (id: string) => void;
+  handleFilterAllValues: (result: any, id: string) => void;
+}
+
+const Filter = (props: FilterProps) => {
+  const callBack = (result: Record<string, any[]>) => {
+    props.handleFilterAllValues(
+      result[
+        props.filterRow.selectedFilter.propertyToFilter.dataProvider?.key ?? ""
+      ],
+      props.filterRow.id
+    );
+  };
+
+  useEffect(() => {
+    if (
+      props.filterRow?.selectedFilter?.propertyToFilter?.type ===
+      FilterTargetType.LIST
+    ) {
+      if (
+        props.filterRow.selectedFilter.propertyToFilter.dataProvider
+          ?.valueLoadType === ValueLoadType.API
+      ) {
+        props.loadTemplateSupportiveData?.(callBack, [
+          props.filterRow.selectedFilter.propertyToFilter.dataProvider?.key ??
+            "",
+        ]);
+      } else if (
+        props.filterRow.selectedFilter.propertyToFilter.dataProvider
+          ?.valueLoadType === ValueLoadType.SELF
+      ) {
+        props.handleFilterAllValues(
+          props.filterRow.selectedFilter.propertyToFilter.dataProvider
+            ?.value as FilterValue[],
+          props.filterRow.id
+        );
+      }
+    }
+  }, [props.filterRow?.selectedFilter?.propertyToFilter?.value]);
+
+  const operators = useMemo(
+    () =>
+      getTypeBasedOperators(
+        props.filterRow?.selectedFilter?.propertyToFilter?.type
+      ),
+    [props.filterRow?.selectedFilter?.propertyToFilter?.type]
+  );
+
+  return (
+    <>
+      <div className="tmpl-filter tmpl-filter-border">
+        <span className="tmpl-filter-id">{props.filterRow.idLabel}</span>
+        <FactoryRenderer
+          value={props.filterRow.selectedFilter.propertyToFilter}
+          textField="label"
+          listData={props.filterRow.allPropertieseToFilter}
+          title="Filter"
+          defaultItem={{
+            label: "Select Filter...",
+            apiPropertyName: "",
+            type: FilterTargetType.TEXT,
+            value: null,
+          }}
+          widgetStyle={{ className: "tmpl-dropdown" }}
+          rootStyle={{ className: "tmpl-dropdown-container" }}
+          popupSettings={{ className: `tmpl-prvent-outside-click-close` }}
+          onChange={(callBack: any, fieldName: string, e: any) => {
+            props.onFilterTargetChange(e, props.filterRow.id);
+          }}
+          uiElementType="WIDGET"
+          widgetType="DROPDOWN"
+        />
+
+        <FactoryRenderer
+          value={props.filterRow.selectedFilter.operator}
+          textField="label"
+          listData={operators}
+          title="Operator"
+          defaultItem={{ label: "Select Operator...", value: null }}
+          widgetStyle={{ className: "tmpl-dropdown" }}
+          rootStyle={{ className: "tmpl-dropdown-container" }}
+          popupSettings={{ className: `tmpl-prvent-outside-click-close` }}
+          disabled={!props.filterRow?.selectedFilter?.propertyToFilter?.value}
+          onChange={(callBack: any, fieldName: string, e: any) =>
+            props.onOperatorChange(e, props.filterRow.id)
+          }
+          uiElementType="WIDGET"
+          widgetType="DROPDOWN"
+        />
+
+        <TypeBasedWidgetFactory
+          filterRow={props.filterRow}
+          onFilterValueChange={props.onFilterValueChange}
+        />
+
+        <FactoryRenderer
+          widgetStyle={{
+            className: "tmpl-button-sm",
+          }}
+          name="plus"
+          fillMode="clear"
+          onClick={() => props.onAddFilter(props.filterRow.id)}
+          uiElementType="WIDGET"
+          widgetType="ICON"
+          title="Add"
+        />
+
+        <FactoryRenderer
+          name="delete"
+          onClick={() => props.onDeleteFilter(props.filterRow.id)}
+          uiElementType="WIDGET"
+          widgetType="ICON"
+          fillMode="clear"
+          title="Remove"
+          widgetStyle={{
+            className: "tmpl-button-sm",
+            inline: {
+              visibility: props.appliedfilterCount === 1 ? "hidden" : "visible",
+            },
+          }}
+        />
+      </div>
+      <span
+        onClick={() => props.onCriteriaToggle(props.filterRow.id)}
+        className="tmpl-criteria"
+      >
+        {props.filterRow.selectedFilter.selectedCriteria?.toString()}
+      </span>
+    </>
+  );
+};
+export default Filter;