@zauru-sdk/components 1.0.13 → 1.0.14

package/src/Form/DynamicBaculoForm/index.tsx

@@ -0,0 +1,359 @@
+import { TextField, TextFieldWithoutValidation } from "../TextField";
+import { TripleFieldContainer } from "../FieldContainer/TripleFieldContainer";
+import { DoubleFieldContainer } from "../FieldContainer/DoubleFieldContainer";
+import YesNo from "../YesNo";
+import { TextArea } from "../TextArea";
+import { SelectField } from "../SelectField";
+import { FileUploadField } from "../FileUpload";
+import { FormDatePicker } from "../DatePicker";
+import { FormTimePicker } from "../TimePicker";
+import {
+  FormFieldGraphQL,
+  FormGraphQL,
+  FormSubmissionValueGraphQL,
+  GenericDynamicTableColumn,
+  SelectFieldOption,
+} from "@zauru-sdk/types";
+import { LineSeparator, StaticAlert, SubContainer } from "src";
+import { GenericDynamicTable } from "src/DynamicTable/GenericDynamicTable";
+import { getDepSelectOptions, getMunSelectOptions } from "@zauru-sdk/common";
+
+type Props = {
+  formName?: string;
+  form?: FormGraphQL;
+  options?: { showTitle: boolean; showDescription: boolean };
+  defaultValues?: FormSubmissionValueGraphQL[];
+  namesStr?: string;
+  showingRules?: { name: string; show: boolean }[];
+  readOnly?: boolean;
+};
+
+export function DynamicBaculoForm(props: Props) {
+  const {
+    form,
+    options = { showDescription: false, showTitle: false },
+    formName = "",
+    namesStr = "",
+    defaultValues = [],
+    showingRules = [],
+    readOnly = false,
+  } = props;
+
+  if (!form) {
+    return (
+      <StaticAlert
+        title="No se encontró el formulario dinámico"
+        description={`Ocurrió un error encontrando el formulario para ${formName}, contacte al administrador con este mensaje de error.`}
+        type="info"
+      />
+    );
+  }
+
+  const renderFieldComponent = (field: Partial<FormFieldGraphQL>) => {
+    const defaultValue = defaultValues?.find(
+      (x) => x.settings_form_field.print_var_name === field.print_var_name
+    );
+    switch (field.field_type) {
+      case "fixed_rows_table":
+      case "fixed_columns_table": {
+        const columns: GenericDynamicTableColumn[] =
+          field.settings_form_field_table_headers?.map((x) => {
+            return {
+              label: x.name,
+              name: `${namesStr}${x.id}_${field.id}`,
+              type: x.cell_type === "yes_no" ? "checkbox" : "textField",
+            } as GenericDynamicTableColumn;
+          }) ?? [];
+        return (
+          <SubContainer key={field.id} title={field.name}>
+            <GenericDynamicTable name="fixed_columns_table" columns={columns} />
+          </SubContainer>
+        );
+      }
+      case "zauru_data":
+        return (
+          <TextFieldWithoutValidation
+            key={field.id}
+            title={`${field.required ? "*" : ""}${field.name}`}
+            hint={field.hint}
+            defaultValue={defaultValue?.value ?? field.default_value}
+            disabled={true}
+          />
+        );
+      case "hour":
+        return (
+          <FormTimePicker
+            key={field.id}
+            title={`${field.required ? "*" : ""}${field.name}`}
+            name={`${namesStr}${field.form_id}_${field.id}`}
+            hint={field.hint}
+            disabled={readOnly}
+            defaultValue={defaultValue?.value}
+          />
+        );
+      case "date":
+        return (
+          <FormDatePicker
+            key={field.id}
+            title={`${field.required ? "*" : ""}${field.name}`}
+            name={`${namesStr}${field.form_id}_${field.id}`}
+            hint={field.hint}
+            disabled={readOnly}
+            defaultValue={defaultValue?.value}
+          />
+        );
+      case "file":
+        return (
+          <FileUploadField
+            key={field.id}
+            title={`${field.required ? "*" : ""}${field.name}`}
+            name={`${namesStr}${field.form_id}_${field.id}`}
+            hint={field.hint}
+            disabled={readOnly}
+            defaultValue={defaultValue?.value}
+            download={true}
+          />
+        );
+      case "image":
+        return (
+          <FileUploadField
+            key={field.id}
+            title={`${field.required ? "*" : ""}${field.name}`}
+            name={`${namesStr}${field.form_id}_${field.id}`}
+            hint={field.hint}
+            showAvailableTypes
+            fileTypes={["png", "jpg", "jpeg"]}
+            disabled={readOnly}
+            defaultValue={defaultValue?.value}
+          />
+        );
+      case "pdf":
+        return (
+          <FileUploadField
+            key={field.id}
+            title={`${field.required ? "*" : ""}${field.name}`}
+            name={`${namesStr}${field.form_id}_${field.id}`}
+            hint={field.hint}
+            showAvailableTypes
+            fileTypes={["pdf"]}
+            disabled={readOnly}
+            defaultValue={defaultValue?.value}
+            download={true}
+          />
+        );
+      case "email":
+      case "url":
+      case "text":
+      case "currency":
+      case "country":
+        return (
+          <TextField
+            key={field.id}
+            title={`${field.required ? "*" : ""}${field.name}`}
+            name={`${namesStr}${field.form_id}_${field.id}`}
+            hint={field.hint}
+            defaultValue={defaultValue?.value ?? field.default_value}
+            disabled={readOnly}
+          />
+        );
+      case "percentage":
+      case "number":
+        return (
+          <TextField
+            key={field.id}
+            title={`${field.required ? "*" : ""}${field.name}`}
+            name={`${namesStr}${field.form_id}_${field.id}`}
+            hint={field.hint}
+            defaultValue={defaultValue?.value ?? field.default_value}
+            type="number"
+            disabled={readOnly}
+          />
+        );
+      case "yes_no":
+        return (
+          <YesNo
+            key={field.id}
+            title={`${field.required ? "*" : ""}${field.name}`}
+            name={`${namesStr}${field.form_id}_${field.id}`}
+            disabled={readOnly}
+            defaultValue={
+              defaultValue?.value === "true" ?? field.default_value === "true"
+            }
+          />
+        );
+      case "section":
+        return (
+          <div key={field.id}>
+            <LineSeparator />
+            <h3 className="mb-10 text-3xl font-bold leading-8 text-gray-900">
+              {field.name}
+            </h3>
+          </div>
+        );
+      case "multi_line_text":
+        return (
+          <TextArea
+            key={field.id}
+            title={`${field.required ? "*" : ""}${field.name}`}
+            name={`${namesStr}${field.form_id}_${field.id}`}
+            defaultValue={defaultValue?.value ?? field.default_value}
+            hint={field.hint}
+            disabled={readOnly}
+          />
+        );
+      case "gt_departamentos": {
+        const optionsDep = getDepSelectOptions();
+        return (
+          <SelectField
+            key={field.id}
+            title={`${field.required ? "*" : ""}${field.name}`}
+            name={`${namesStr}${field.form_id}_${field.id}`}
+            hint={field.hint}
+            isClearable={!field.required}
+            options={optionsDep}
+            disabled={readOnly}
+            defaultValue={optionsDep.find(
+              (x) => x.value === defaultValue?.value
+            )}
+          />
+        );
+      }
+      case "gt_municipios": {
+        const options = getMunSelectOptions();
+
+        return (
+          <SelectField
+            key={field.id}
+            title={`${field.required ? "*" : ""}${field.name}`}
+            name={`${namesStr}${field.form_id}_${field.id}`}
+            hint={field.hint}
+            isClearable={!field.required}
+            options={options}
+            disabled={readOnly}
+            defaultValue={options.find((x) => x.value === defaultValue?.value)}
+          />
+        );
+      }
+      case "single_select_options": {
+        const formFieldOptions =
+          field.settings_form_field_options?.map((x) => {
+            return { label: x.label, value: x.value } as SelectFieldOption;
+          }) ?? [];
+
+        return (
+          <SelectField
+            key={field.id}
+            title={`${field.required ? "*" : ""}${field.name}`}
+            name={`${namesStr}${field.form_id}_${field.id}`}
+            hint={field.hint}
+            isClearable={!field.required}
+            options={formFieldOptions}
+            disabled={readOnly}
+            defaultValue={formFieldOptions.find(
+              (x) => x.value === defaultValue?.value
+            )}
+          />
+        );
+      }
+      case "multi_select_options": {
+        const formFieldOptions2 =
+          field.settings_form_field_options?.map((x) => {
+            return { label: x.label, value: x.value } as SelectFieldOption;
+          }) ?? [];
+
+        const defaultValuesMulti = (() => {
+          const values =
+            defaultValue?.value?.split(",").map((str) => str.trim()) ?? [];
+          return formFieldOptions2.filter((x) => values.includes(x.value));
+        })();
+
+        return (
+          <SelectField
+            key={field.id}
+            title={`${field.required ? "*" : ""}${field.name}`}
+            name={`${namesStr}${field.form_id}_${field.id}`}
+            hint={field.hint}
+            isClearable={!field.required}
+            isMulti
+            options={formFieldOptions2}
+            defaultValueMulti={defaultValuesMulti}
+            disabled={readOnly}
+          />
+        );
+      }
+      default:
+        return (
+          <div key={field.id}>
+            Componente no encontrado para: {field.field_type}
+          </div>
+        ); // o algún componente por defecto si lo prefieres
+    }
+  };
+
+  const renderFields = () => {
+    const fields = form.settings_form_fields;
+    const fieldGroups: JSX.Element[] = [];
+    let tempGroup: JSX.Element[] = [];
+
+    fields.forEach((field, i) => {
+      const rule = showingRules.find((x) => x.name === field.name);
+      if (!(rule && !rule.show)) {
+        const renderedField = renderFieldComponent(field);
+        if (renderedField === null) {
+          return;
+        }
+        tempGroup.push(renderedField);
+
+        const isLastField = i === fields.length - 1;
+        const isSectionField = field.field_type === "section";
+
+        if (isSectionField) {
+          tempGroup.pop();
+          if (tempGroup.length === 1) {
+            fieldGroups.push(tempGroup[0]);
+          } else if (tempGroup.length === 2) {
+            fieldGroups.push(
+              <DoubleFieldContainer key={i}>{tempGroup}</DoubleFieldContainer>
+            );
+          } else if (tempGroup.length === 3) {
+            fieldGroups.push(
+              <TripleFieldContainer key={i}>{tempGroup}</TripleFieldContainer>
+            );
+          }
+          fieldGroups.push(renderedField);
+          tempGroup = [];
+        } else if (isLastField) {
+          if (tempGroup.length === 1) {
+            fieldGroups.push(tempGroup[0]);
+          } else if (tempGroup.length === 2) {
+            fieldGroups.push(
+              <DoubleFieldContainer key={i}>{tempGroup}</DoubleFieldContainer>
+            );
+          } else if (tempGroup.length === 3) {
+            fieldGroups.push(
+              <TripleFieldContainer key={i}>{tempGroup}</TripleFieldContainer>
+            );
+          }
+          tempGroup = [];
+        } else if (tempGroup.length === 3) {
+          // Si hay 3 elementos en el grupo temporal y el siguiente campo no es 'section', se agrega a fieldGroups
+          fieldGroups.push(
+            <TripleFieldContainer key={i}>{tempGroup}</TripleFieldContainer>
+          );
+          tempGroup = [];
+        }
+      }
+    });
+
+    return fieldGroups;
+  };
+
+  return (
+    <SubContainer
+      title={options?.showTitle ? form.name : undefined}
+      description={options?.showDescription ? form.description : undefined}
+    >
+      {renderFields()}
+    </SubContainer>
+  );
+}

package/src/Form/FieldContainer/DoubleFieldContainer.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+  alignCenter?: boolean;
+};
+
+export const DoubleFieldContainer = (props: Props) => {
+  const { children, className, alignCenter = true } = props;
+
+  const getChildren = (index: number) => {
+    if (children && Array.isArray(children) && children[index]) {
+      return children[index];
+    }
+
+    if (children && index === 0) {
+      return children;
+    }
+
+    return <></>;
+  };
+
+  return (
+    <>
+      <div
+        className={`grid md:grid-cols-2 sm:grid-cols-1 gap-4 ${className}`}
+        style={alignCenter ? { alignItems: "center" } : {}}
+      >
+        <div className="col-span-1">{getChildren(0)}</div>
+        <div className="col-span-1">{getChildren(1)}</div>
+      </div>
+    </>
+  );
+};

package/src/Form/FieldContainer/QuadrupleFieldContainer.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export const QuadrupleFieldContainer = (props: Props) => {
+  const { children, className } = props;
+
+  const getChildren = (index: number) => {
+    if (children && Array.isArray(children) && children[index]) {
+      return children[index];
+    }
+
+    if (children && index === 0) {
+      return children;
+    }
+
+    return <></>;
+  };
+
+  return (
+    <>
+      <div
+        className={`grid lg:grid-cols-4 sm:grid-cols-2 xs:grid-cols-1 gap-4 ${className}`}
+        style={{ alignItems: "center" }}
+      >
+        <div className="col-span-1">{getChildren(0)}</div>
+        <div className="col-span-1">{getChildren(1)}</div>
+        <div className="col-span-1">{getChildren(2)}</div>
+        <div className="col-span-1">{getChildren(3)}</div>
+      </div>
+    </>
+  );
+};

package/src/Form/FieldContainer/TripleFieldContainer.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export const TripleFieldContainer = (props: Props) => {
+  const { children, className } = props;
+
+  const getChildren = (index: number) => {
+    if (children && Array.isArray(children) && children[index]) {
+      return children[index];
+    }
+
+    if (children && index === 0) {
+      return children;
+    }
+
+    return <></>;
+  };
+
+  return (
+    <>
+      <div
+        className={`grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 ${className}`}
+        style={{ alignItems: "center" }}
+      >
+        <div className="col-span-1">{getChildren(0)}</div>
+        <div className="col-span-1">{getChildren(1)}</div>
+        <div className="col-span-1">{getChildren(2)}</div>
+      </div>
+    </>
+  );
+};

package/src/Form/FieldContainer/index.ts

@@ -0,0 +1,3 @@
+export * from "./DoubleFieldContainer";
+export * from "./QuadrupleFieldContainer";
+export * from "./TripleFieldContainer";

package/src/Form/FileUpload/index.tsx

@@ -0,0 +1,184 @@
+import { DownloadIconSVG, IdeaIconSVG } from "@zauru-sdk/icons";
+import { useAppSelector } from "@zauru-sdk/redux";
+import React, { useState } from "react";
+
+type Props = {
+  id?: string;
+  name: string;
+  formName?: string;
+  title?: string;
+  helpText?: string;
+  hint?: string;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+  error?: string | undefined;
+  fileTypes?: string[];
+  showAvailableTypes?: boolean;
+  className?: string;
+  defaultValue?: string | File;
+  download?: boolean;
+};
+
+export const FileUploadFieldWithoutValidation = (props: Props) => {
+  const {
+    id,
+    name,
+    title,
+    helpText,
+    hint,
+    onChange,
+    disabled = false,
+    readOnly = false,
+    error,
+    fileTypes = [],
+    showAvailableTypes = false,
+    className,
+    defaultValue = undefined,
+    download = false,
+  } = props;
+
+  const [showTooltip, setShowTooltip] = useState<boolean>(false);
+
+  if (typeof defaultValue == "string") {
+    if (download) {
+      return (
+        <div
+          role="button"
+          tabIndex={0}
+          onClick={() => {
+            window.open(defaultValue, "_blank");
+          }}
+          onKeyDown={(event) => {
+            // Permite que el evento se active con la tecla Enter
+            if (event.key === "Enter") {
+              window.open(defaultValue, "_blank");
+            }
+          }}
+        >
+          {title && (
+            <label
+              htmlFor={name}
+              className="block mb-1 text-sm font-medium text-gray-700"
+            >
+              {title}
+            </label>
+          )}{" "}
+          <DownloadIconSVG />
+        </div>
+      );
+    }
+    return (
+      <div className={`col-span-6 sm:col-span-3 ${className}`}>
+        {title && (
+          <label
+            htmlFor={name}
+            className={`block mb-1 text-sm font-medium text-gray-700`}
+          >
+            {title}
+          </label>
+        )}{" "}
+        <div
+          role="button"
+          tabIndex={0}
+          onClick={() => {
+            window.open(defaultValue, "_blank");
+          }}
+          onKeyDown={(event) => {
+            // Permite que el evento se active con la tecla Enter
+            if (event.key === "Enter") {
+              window.open(defaultValue, "_blank");
+            }
+          }}
+        >
+          <img
+            src={defaultValue}
+            alt={name}
+            className={`h-48 w-48 inline mr-1 pb-1`}
+            style={{
+              stroke: "currentColor",
+              strokeWidth: 2,
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              fill: "none",
+              backgroundColor: "transparent",
+            }}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange && onChange(event);
+  };
+
+  let hintMessage = hint;
+  if (showAvailableTypes && fileTypes.length > 0) {
+    hintMessage = `${hint} Archivos permitidos: ${fileTypes.join(", ")}`;
+  }
+
+  const color = error ? "red" : "gray";
+  const isReadOnly = disabled || readOnly;
+  const bgColor = isReadOnly ? "bg-gray-200" : `bg-${color}-50`;
+  const textColor = isReadOnly ? "text-gray-500" : `text-${color}-900`;
+  const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-500`;
+
+  return (
+    <div className={`col-span-6 sm:col-span-3 ${className}`}>
+      {title && (
+        <label
+          htmlFor={name}
+          className={`block mb-1 text-sm font-medium text-${color}-700`}
+        >
+          {title}
+        </label>
+      )}
+      <div className="flex relative items-center">
+        <input
+          type="file"
+          name={name}
+          id={id ?? name}
+          disabled={disabled}
+          readOnly={readOnly}
+          accept={fileTypes.map((ft) => `.${ft}`).join(", ")}
+          onChange={handleInputChange}
+          className={`block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`}
+        />
+        {helpText && (
+          <div className="flex items-center relative ml-3">
+            <div
+              className="relative cursor-pointer"
+              onMouseEnter={() => setShowTooltip(true)}
+              onMouseLeave={() => setShowTooltip(false)}
+            >
+              <IdeaIconSVG />
+              {showTooltip && (
+                <div className="absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black z-50">
+                  {helpText}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+      {error && (
+        <p className={`mt-2 text-sm text-${color}-600`}>
+          <span className="font-medium">Oops!</span> {error}
+        </p>
+      )}
+      {!error && hintMessage && (
+        <p className={`mt-2 italic text-sm text-${color}-500`}>{hintMessage}</p>
+      )}
+    </div>
+  );
+};
+
+export const FileUploadField = (props: Props) => {
+  const { formValidations } = useAppSelector((state) => state.formValidation);
+  const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+
+  props = { ...props, error };
+
+  return <FileUploadFieldWithoutValidation {...props} />;
+};