datastake-daf 0.6.573 → 0.6.574

package/src/@daf/core/components/AuthForm/index.jsx

@@ -0,0 +1,200 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { Form, Input, Select } from "antd";
+import BorderedButton from "../Button/BorderedButton/index.jsx";
+
+function AuthForm ({
+  steps,
+  fields,
+  onSubmit,
+  initialValues = {},
+  submitText = "Submit",
+  form,
+  errors,
+  t = (key) => key,
+  executeRecaptcha = () => {},
+}){
+  const [formInstance] = Form.useForm(form);
+  const [currentStep, setCurrentStep] = useState(0);
+  const [allFormValues, setAllFormValues] = useState(initialValues);
+  const [formErrors, setFormErrors] = useState(null);
+
+  console.log({errors})
+
+  const isMultiStep = !!steps;
+  const currentFields = isMultiStep ? steps?.[currentStep]?.fields : fields || [];
+
+  useEffect(() => {
+    if (isMultiStep && Object.keys(allFormValues).length > 0) {
+      formInstance.setFieldsValue(allFormValues);
+    }
+  }, [currentStep, allFormValues, formInstance, isMultiStep]);
+
+  const handleReCaptchaVerify = useCallback(async () => {
+    if (!executeRecaptcha) {
+      console.log('Execute recaptcha not yet available');
+      return;
+    }
+
+    const token = await executeRecaptcha('submit');
+    return token;
+  }, [executeRecaptcha]);
+
+  const next = async () => {
+    try {
+      await formInstance.validateFields(
+        currentFields.map((f) => f.name)
+      );
+      // Save current step values before moving to next step
+      const currentValues = formInstance.getFieldsValue();
+      setAllFormValues((prev) => ({ ...prev, ...currentValues }));
+      setCurrentStep((prev) => prev + 1);
+    } catch (err) {
+      console.error("Please fix the validation errors before continuing.");
+    }
+  };
+
+  const prev = () => setCurrentStep((prev) => prev - 1);
+
+  const handleSubmit = async (values) => {
+    try {
+      await formInstance.validateFields();
+
+      const token = await handleReCaptchaVerify();
+      if (!token) {
+        console.error('reCAPTCHA verification failed');
+        return;
+      }
+      
+      setFormErrors(null);
+      
+      if (!isMultiStep) return onSubmit?.(values);
+
+      if (currentStep < steps?.length - 1) return next();
+      
+      const finalValues = { ...allFormValues, ...values };
+      onSubmit?.(finalValues);
+    } catch (err) {
+      console.error("Validation failed:", err);
+    }
+  };
+
+  const checkRequiredFieldsFilled = (changedValues, allValues) => {
+    const requiredFields = currentFields.filter(f => f.required).map(f => f.name);
+    return requiredFields.every(fieldName => {
+      const value = allValues[fieldName];
+      return value !== undefined && value !== null && value !== '';
+    });
+  };
+
+  useEffect(() => {
+    setFormErrors(errors);
+  }, [errors]);
+
+  const renderErrors = (err, t) => {
+    document.querySelectorAll('.ant-form-item')
+      .forEach(input => input.classList.add('ant-form-item-has-error'))
+    return Object.keys(err).map(key => {
+      return err[key].map(error =>
+        <div
+          key={error}
+          className="ant-form-item-explain errors-cont"
+          style={{ color: '#ff4d4f' }}>
+          {t(error)}
+        </div>
+      )
+    });
+  }
+
+  const renderField = (field) => {
+    let inputNode = null;
+    switch (field.type) {
+      case "input":
+      case "email":
+      case "number":
+        inputNode = <Input type={field.type} placeholder={field.placeholder} {...field.props} />;
+        break;
+      case "password":
+        inputNode = <Input.Password placeholder={field.placeholder} {...field.props} />;
+        break;
+      case "textarea":
+        inputNode = <Input.TextArea placeholder={field.placeholder} {...field.props} />;
+        break;
+      case "select":
+        inputNode = (
+          <Select placeholder={field.placeholder} {...field.props}>
+            {field.options?.map((opt) => (
+              <Select.Option key={opt.value} value={opt.value}>
+                {opt.label}
+              </Select.Option>
+            ))}
+          </Select>
+        );
+        break;
+      case "custom":
+        inputNode = field.component;
+        break;
+      default:
+        inputNode = <Input placeholder={field.placeholder} {...field.props} />;
+    }
+
+    return (
+      <Form.Item key={field.name} name={field.name} label={field.label} rules={field.rules} style={{ marginBottom: 0 }}>
+        {inputNode}
+      </Form.Item>
+    );
+  };
+
+  return (
+      <>
+        <Form
+            form={formInstance}
+            layout="vertical"
+            initialValues={initialValues}
+            onFinish={handleSubmit}
+        >
+            {currentFields.map(renderField)}
+
+
+        {formErrors ? (
+            renderErrors(formErrors, t)
+        ) : null}
+
+        {isMultiStep && currentStep > 0 ? (
+            <div className="flex flex-column gap-2" style={{ width: '100%' }}>
+                <Form.Item noStyle shouldUpdate>
+                {(form) => {
+                    const isLastStep = currentStep === steps?.length - 1;
+                    const allFieldsFilled = checkRequiredFieldsFilled({}, form.getFieldsValue());
+                    
+                    return (
+                        <div className="buttons" style={{ marginTop: 0}}>                   
+                            <BorderedButton 
+                                type="primary" 
+                                htmlType="submit"
+                                disabled={isLastStep && !allFieldsFilled}
+                                block className="normal-br"
+                            >
+                                {isLastStep ? submitText : t("Next")}
+                            </BorderedButton>
+                        </div>
+                    );
+                }}
+                </Form.Item>
+                <div className="buttons" style={{ marginTop: 0}}>
+                    <BorderedButton onClick={prev} block className="normal-br">
+                        {t("Back")}
+                    </BorderedButton>
+                </div>
+            </div>
+        ) : (
+            <div className="buttons" style={{ marginTop: 0}}>
+                <BorderedButton type="primary" htmlType="submit" block className="normal-br">
+                    {isMultiStep ? t("Next") : submitText}
+                </BorderedButton>
+            </div>
+        )}
+        </Form>
+      </>
+  );
+}
+export default AuthForm;

package/src/@daf/core/components/Sidenav/Menu.jsx

@@ -117,7 +117,9 @@ export default function SidenavMenu({
   }, [filteredItems]);
   const [openKeys, setOpenKeys] = useState([]);
 
-  const renderSubMenu = (item, i) => ({
+  console.log({filteredItems})
+
+  const renderSubMenu = (item, i) => (console.log({item}),{
     key: i,
     disabled: item.isDisabled,
     onTitleClick: () => {
@@ -233,6 +235,7 @@ export default function SidenavMenu({
   }, [selectedKeys]);
 
   const renderMenu = (items) => (
+    console.log({items}),
     <Menu
       theme="dark"
       mode={menuMode}

package/src/@daf/services/ChannelsService.js

@@ -16,9 +16,8 @@ class ChannelsService extends BaseService {
     }
 
     return this.apiGet({
-      url: `/api/channels`,
+      url: `/store/channels`,
       params,
-      isStore: true,
       headers: token ? {
         Authorization: `Bearer ${token}`,
       } : undefined,

package/src/index.js

@@ -87,6 +87,7 @@ export { Sections as EditFormSections } from "./@daf/core/components/EditForm/se
 export { default as ViewFormNavigation } from "./@daf/core/components/ViewForm/navigation.jsx";
 export { default as PhoneInput } from "./@daf/core/components/Inputs/PhoneInput/index.js";
 export { AjaxSelectMain as AjaxSelect } from "./@daf/core/components/EditForm/components/ajaxSelect.js";
+export { default as AuthForm } from "./@daf/core/components/AuthForm/index.jsx";
 
 // Progress Bar
 export { default as ProgressBar } from "./@daf/core/components/ProgressBar/index.jsx";

package/src/layouts.js

@@ -1,3 +1 @@
-export { default as AppLayout } from './@daf/layouts/AppLayout/index.jsx';
-export { default as AuthLayout } from './@daf/layouts/AuthLayout/index.jsx';
-export { default as AuthNavbar } from './@daf/layouts/AuthLayout/components/NavbarComponent.jsx';
+export { default as AppLayout } from './@daf/layouts/AppLayout/index.jsx';