datastake-daf 0.6.748 → 0.6.749

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.748",
+	"version": "0.6.749",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/src/@daf/core/components/Screens/Settings/Edit/components/Form/index.js

@@ -0,0 +1,115 @@
+/* eslint-disable react/prop-types */
+import { Form } from "antd";
+import Style from "./style";
+import { INPUT_TYPES } from "../../../config";
+import Text from "../Inputs/Text";
+import Phone from "../Inputs/Phone";
+import Select from "../Inputs/Select";
+import Switch from "../Inputs/Switch";
+import ResetPassword from "../Inputs/ResetPassword";
+import ImageUpload from "../Inputs/ImageUpload.js";  
+
+export default function EditForm({
+  activeForm = {},
+  onChange = () => {},
+  data = {},
+  setInputLoading = () => { },
+  inputLoading,
+  t = (key) => key,
+  apiURL,
+  getAppHeader,
+  getToken
+}) {
+
+  const config = {
+    setLoading: setInputLoading,
+    loading: inputLoading,
+  };
+
+  const renderInput = (input = {}) => {
+    if (input.type === INPUT_TYPES.RESET_PASSWORD) {
+      if (input.disabled) {
+        return null;
+      }
+
+      return <ResetPassword config={config} key={input.key} t={t} />;
+    }
+
+    if (input.type === INPUT_TYPES.SWITCH) {
+      return (
+        <Form.Item key={input.key}>
+          <Switch data={data} input={input} onChange={onChange} t={t} />
+        </Form.Item>
+      )
+    }
+
+    if (input.type === INPUT_TYPES.INPUT_GROUP) {
+      return (
+        <div className="input-group" key={input.key}>
+          {(input.inputs).map(renderInput)}
+        </div>
+      )
+    }
+
+    const _renderInput = () => {
+      switch (input.type) {
+        case INPUT_TYPES.IMAGE_UPLOAD:
+          return <ImageUpload 
+          data={data} 
+          input={input} 
+          onChange={onChange} 
+          getToken={getToken} 
+          config={config} 
+          t={t} 
+          apiURL={apiURL}
+          getAppHeader={  getAppHeader }
+
+
+          />;
+        case INPUT_TYPES.TEXT:
+          return <Text data={data} input={input} onChange={onChange} t={t} />;
+        case INPUT_TYPES.SELECT:
+          return <Select data={data} input={input} onChange={onChange} t={t} />;
+        case INPUT_TYPES.PHONE:
+          return <Phone data={data} input={input} onChange={onChange} t={t} />;
+        default:
+          return null;
+      }
+    }
+
+    return (
+      <Form.Item label={input.label} key={input.key}>{_renderInput()}</Form.Item>
+    )
+  }
+
+  return (
+    <Form
+      autoComplete="new-password"
+      layout="vertical"
+      className="main-form"
+    >
+      <Style>
+        {(activeForm?.inputGroups || []).map((gr, i) => (
+          <div key={`form-gr-${i}`} className="form-gr">
+            <div className="group-header">
+              {gr.title ? (
+                <h3>{t(gr.title)}</h3>
+              ) : null}
+              <p>{t(gr.subTitle)}</p>
+            </div>
+            {(gr.inputs || [])
+              .filter((i) => {
+                if (typeof i.showIf === 'function') {
+                  return i.showIf(data);
+                }
+
+                return true;
+              })
+              .map(renderInput)}
+          </div>
+        ))}
+      </Style>
+    </Form>
+  )
+}
+

package/src/@daf/core/components/Screens/Settings/Edit/components/Form/style.js

@@ -0,0 +1,35 @@
+import styled from "styled-components";
+
+export default styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 34px;
+  padding-bottom: 34px;
+
+  .group-header {
+    border-bottom: 1px solid #E5E7EB;
+    margin-bottom: var(--size-lg);
+
+    h3 {
+      font-size: 20px;
+      font-weight: 600;
+      margin-bottom: 4px;
+    }
+
+    p {
+      color: #667085;
+      margin-bottom: var(--size-lg);
+      font-weight: 500;
+    }
+  }
+
+  .input-group {
+    display: flex;
+    gap: 8px;
+
+    .ant-form-item {
+      flex: 1;
+    }
+  }
+`;
+

package/src/@daf/core/components/Screens/Settings/Edit/components/Inputs/ImageUpload.js

@@ -0,0 +1,67 @@
+/* eslint-disable react/prop-types */
+import React from "react";
+import { Upload } from "antd";
+import styled from "styled-components";
+import { InboxOutlined } from "@ant-design/icons";
+import { getImageUploadViewValue } from "../../../../../../components/ViewForm/helper.js";
+
+const Style = styled.div`
+  flex: 1;
+`;
+
+export default function ImageUpload({ 
+  data = {}, 
+  input = {}, 
+  onChange = () => { }, 
+  config,
+  t = (key) => key,
+  apiURL,
+  getToken,
+  getAppHeader
+}) {
+  const value = data[input.key];
+  console.log('ImageUpload EDIT - Key:', input.key, 'Value:', value, 'Full data:', data);
+  const values = getImageUploadViewValue(value)
+
+  // Build headers with defensive checks
+  const headers = {
+    Authorization: `Bearer ${typeof getToken === 'function' ? getToken() : ''}`,
+    ...(typeof getAppHeader === 'function' ? getAppHeader() : {}),
+  };
+
+  return (
+    <Style>
+      <Upload.Dragger
+        accept="image/*"
+        disabled={input.disabled}
+        classList={!values || !values.length ? 'empty' : ''}
+        action={`${apiURL}/upload`}
+        maxCount={1}
+        headers={headers}
+        defaultFileList={values}
+        style={{ width: '100%' }}
+        onChange={(e) => {
+          onChange({ [input.key]: e });
+          if (e.file && e.file.status && typeof config?.setLoading === 'function') {
+            if (e.file.status === 'uploading') {
+              config.setLoading(true);
+            } else {
+              config.setLoading(false);
+            }
+          }
+        }}
+      >
+        <div style={{ width: '100%' }}>
+          <p className="ant-upload-drag-icon">
+            <InboxOutlined />
+          </p>
+          <p className="ant-upload-text">{t('Click or drag file to this area to upload')}</p>
+          <p className="ant-upload-hint">
+            {t('Support for a single or bulk upload.')}
+          </p>
+        </div>
+      </Upload.Dragger>
+    </Style>
+  );
+}
+

package/src/@daf/core/components/Screens/Settings/Edit/components/Inputs/Phone.js

@@ -0,0 +1,24 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import PhoneInput from "../../../../../../components/Inputs/PhoneInput/index";
+
+export default function Phone({ data = {}, input = {}, onChange = () => { }, t = (key) => key }) {
+  return (
+    <PhoneInput
+      disabled={input.disabled}
+      defaultDialCode={data[input.key]}
+      initialValue={data[input.key]}
+      onChange={(v) => {
+        if (!data[v] && !v) {
+          return;
+        }
+        onChange({ [input.key]: v });
+      }}
+      allowClear
+      country={null}
+      size="large"
+      t={t}
+    />
+  );
+}
+

package/src/@daf/core/components/Screens/Settings/Edit/components/Inputs/ResetPassword.js

@@ -0,0 +1,122 @@
+/* eslint-disable react/prop-types */
+import React from "react";
+import styled from "styled-components";
+import { Button, Form, Input, message } from "antd";
+
+const Style = styled.div`
+  .form-footer {
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+    margin-top: 28px;
+  }
+`;
+
+export default function ResetPassword({ 
+  config = {}, 
+  onPasswordChange,
+  t = (key) => key
+}) {
+  const [MainForm] = Form.useForm();
+
+  const _resetForm = () =>
+    MainForm.resetFields(['confirmPassword', 'password', 'currentPassword']);
+
+  const _submit = () => {
+    MainForm.validateFields()
+      .then(async (v) => {
+        try {
+          config?.setLoading(true);
+          
+          if (onPasswordChange) {
+            await onPasswordChange({
+              oldPassword: v.currentPassword,
+              newPassword: v.password,
+              plainPassword: v.confirmPassword,
+            });
+          }
+          
+          config?.setLoading(false);
+          message.success(t('Password successfully updated.'));
+          MainForm.resetFields();
+        } catch (err) {
+          console.log(err);
+          config?.setLoading(false);
+          message.error((err.message || 'Error changing password'));
+        }
+      })
+      .catch((err) => console.log(err));
+  };
+
+  return (
+    <Style>
+      <Form form={MainForm} layout="vertical">
+        <Form.Item
+          label={("Current password")}
+          name="currentPassword"
+          rules={[
+            {
+              required: true,
+              message: ("errors::password should not be empty"),
+            },
+          ]}
+        >
+          <Input.Password
+            size="large"
+            placeholder={t("••••••••")}
+            type="password"
+            className="email" />
+        </Form.Item>
+        <Form.Item
+          label={t("New password")}
+          name="password"
+          rules={[
+            {
+              required: true,
+              message: ("errors::password should not be empty"),
+            },
+          ]}
+        >
+          <Input.Password
+            size="large"
+            placeholder={t("••••••••")}
+            type="password"
+            className="email" />
+        </Form.Item>
+        <Form.Item
+          label={t("Confirm new password")}
+          name="confirmPassword"
+          dependencies={['password']}
+          rules={[
+            {
+              required: true,
+              message: ("errors::password should not be empty"),
+            },
+            ({ getFieldValue }) => ({
+              validator(rule, value) {
+                if (!value || getFieldValue('password') === value) {
+                  return Promise.resolve();
+                }
+                return Promise.reject(t('errors::passwordNotMatch'));
+              },
+            }),
+          ]}>
+          <Input.Password
+            size="large"
+            placeholder={("••••••••")}
+            type="password"
+            className="email" />
+        </Form.Item>
+        <div className="form-footer">
+          <Button onClick={_resetForm}>
+            {t('Cancel')}
+          </Button>
+          <Button type="primary" onClick={_submit} disabled={config?.loading} loading={config?.loading}>
+            {t('Update')}
+          </Button>
+        </div>
+      </Form>
+    </Style>
+  )
+}
+

package/src/@daf/core/components/Screens/Settings/Edit/components/Inputs/Select.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { Select } from "antd";
+import { renderInputBody } from "../helper";
+
+export default function SelectInput({ data = {}, input = {}, onChange = () => { }, t = (key) => key }) {
+  const disabled = input.disabled;
+
+  const body = (
+    <Select
+      value={data[input.key]}
+      onChange={(e) => onChange({ [input.key]: e })}
+      size="large"
+      disabled={disabled}
+      placeholder={t(input.placeholder || input.label)}
+    >
+      {(input.options || []).map((o) => (
+        <Select.Option key={`${input.key}:${o.value}`} value={o.value}>
+          {t(o.label)}
+        </Select.Option>
+      ))}
+    </Select>
+  );
+
+  return renderInputBody({ t, disabled, body });
+}
+

package/src/@daf/core/components/Screens/Settings/Edit/components/Inputs/Switch.js

@@ -0,0 +1,56 @@
+/* eslint-disable react/prop-types */
+import React from "react";
+import { Switch } from "antd";
+import styled from "styled-components";
+import { renderInputBody } from "../helper";
+
+const Style = styled.div`
+  width: 100%;
+  display: flex;
+  gap: 32px;
+
+  .label-cont {
+    flex: 1;
+  
+    h3 {
+      font-size: var(--font-size-lg);
+      font-weight: 500;
+      margin-bottom: 4px;
+    }
+
+    p {
+      color: #6C737F;
+      font-size: 14px;
+      font-weight: 500;
+    }
+  }
+`;
+
+export default function FormSwitch({ data = {}, input = {}, onChange = () => { }, t = (key) => key }) {
+  const disabled = input.disabled;
+
+  const body = (
+    <div className="flex flex-1 flex-column justify-content-center">
+      <Switch
+        disabled={input.disabled}
+        size="large"
+        checked={data[input.key]}
+        defaultChecked={input.defaultChecked}
+        placeholder={t(input.placeholder || input.label)}
+        onChange={(e) => onChange({ [input.key]: e })} />
+    </div>
+  )
+
+  return (
+    <Style>
+      <div className="label-cont">
+        <h3>{t(input.label)}</h3>
+        <p>{t(input.subLabel)}</p>
+      </div>
+      <div className="flex flex-column justify-content-center">
+        {renderInputBody({ t, disabled, body })}
+      </div>
+    </Style>
+  );
+}
+

package/src/@daf/core/components/Screens/Settings/Edit/components/Inputs/Text.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { Input } from "antd";
+import { renderInputBody } from "../helper";
+
+export default function Text({ data = {}, input = {}, onChange = () => { }, t = (key) => key }) {
+  const disabled = input.disabled;
+
+  const body = (
+    <Input
+      disabled={input.disabled}
+      size="large"
+      value={data[input.key]}
+      placeholder={t(input.placeholder || input.label)}
+      onChange={(e) => onChange({ [input.key]: e.target.value })} />
+  );
+
+  return renderInputBody({ t, disabled, body });
+}
+

package/src/@daf/core/components/Screens/Settings/Edit/components/Inputs/TransferRights.js

@@ -0,0 +1,30 @@
+/* eslint-disable react/prop-types */
+import React from "react";
+import { Form, Select, Tooltip } from "antd";
+
+export default function TransferRights({ input = {}, t = (key) => key }) {
+  return (
+    <Form.Item
+      label={t("Transfer administrative rights")}
+      name={input.key}
+      rules={[
+        {
+          required: true,
+          message: t("errors::password should not be empty"),
+        },
+      ]}
+    >
+      <Tooltip title={t('Feature Unavailable')}>
+        <div className="flex-1 flex flex-column">
+          <Select
+            disabled
+            placeholder={t('Select User')}
+            size="large"
+            type="password"
+            className="email" />
+        </div>
+      </Tooltip>
+    </Form.Item>
+  )
+}
+

package/src/@daf/core/components/Screens/Settings/Edit/components/helper.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { Tooltip } from "antd";
+
+export const renderInputBody = ({ t = (key) => key, disabled, body }) => {
+  return disabled ? (
+    <Tooltip title={t("You can't edit this")}>
+      <div className="flex flex-1 flex-column">
+        {body}
+      </div>
+    </Tooltip>
+  ) : body;
+}
+

package/src/@daf/core/components/Screens/Settings/Edit/components/style.js

@@ -0,0 +1,56 @@
+import styled from 'styled-components';
+
+export default styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  .ant-menu {
+    min-width: 200px;
+    height: 100%;
+
+    .ant-menu-item {
+      padding-left: var(--size) !important;
+    }
+  }
+
+  .view-content {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    position: relative;
+    width: 100%;
+    flex: 1;
+    overflow: auto;
+
+    .form-edit {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      padding-top: var(--size-lg);
+      overflow: auto;
+      flex-direction: column;
+      padding: 20px 100px 0 100px;
+
+      .main-form {
+        min-width: 400px;
+        width: 100%;
+        max-width: 700px;
+        min-height: 100%;
+        margin: auto;
+
+        @media screen and (max-width: 1200px) {
+          min-width: 600px;
+        }
+
+        @media screen and (max-width: 768px) {
+          min-width: 100%;
+        }
+      }
+    }
+  }
+`;
+

package/src/@daf/core/components/Screens/Settings/Edit/index.js

@@ -0,0 +1,63 @@
+// src/components/Settings/Edit/index.js
+import Style from "./components/style";
+import EditForm from "./components/Form";
+import { getMainApiUrl, getAppHeader } from "../../../../../services/BaseService.js";
+import { getToken } from "../../../../../../helpers/Token.js";
+
+export default function SettingsEdit({
+  sections,
+  activeForm,
+  activeFormKey,
+  data,
+  isChanged,
+  onChange,
+  onSave,
+  onCancel,
+  setInputLoading,
+  inputLoading,
+  permissions,
+  changeSection,
+  goToView,
+  customComponents,
+  renderHeader,
+  renderMenu,
+  children,
+  t,
+}) {
+  return (
+    <Style>
+      {renderHeader ? renderHeader({
+        type: "edit",
+        changed: isChanged,
+        permissions,
+        onSave,
+        onCancel,
+        goToView,
+        t,
+      }) : null}
+      <div className="view-content">
+        {renderMenu ? renderMenu({
+          view: "edit",
+          form: sections,
+          activeFormKey,
+          changeSection,
+        }) : null}
+        <div className="form-edit">
+          <EditForm
+            t={t}
+            activeForm={activeForm}
+            onChange={onChange}
+            setInputLoading={setInputLoading}
+            inputLoading={inputLoading}
+            data={data}
+            customComponents={customComponents}
+            apiURL={getMainApiUrl()}
+            getAppHeader={getAppHeader}
+            getToken={getToken}
+          />
+        </div>
+      </div>
+      {children}
+    </Style>
+  );
+}