datastake-daf 0.6.747 → 0.6.749

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

@@ -0,0 +1,142 @@
+// import { Avatar, Switch, Image } from "antd";
+// import { INPUT_TYPES, PLACEHOLDER } from "../../../config";
+// import { getImageUploadViewValue } from "../../../../../ViewForm/helper";
+
+
+
+// export const renderInputView = ({ input, data, t }) => {
+//   const value = data?.[input.key];
+
+//   switch (input.type) {
+//     case INPUT_TYPES.TEXT:
+//     case INPUT_TYPES.SELECT:
+//     case INPUT_TYPES.PHONE:
+//       if (input.type === INPUT_TYPES.IMAGE_UPLOAD) {
+//         const fileList = getImageUploadViewValue(value);
+//         return (
+//           <div className="value">
+//             {fileList.length ? fileList.map(f => f.url).join(', ') : PLACEHOLDER}
+//           </div>
+//         );
+//       }
+//       return (
+//         <div className="value">
+//           {value || PLACEHOLDER}
+//         </div>
+//       );
+
+//     case INPUT_TYPES.SWITCH:
+//       return (
+//         <div className="value">
+//           <Switch checked={value} disabled />
+//         </div>
+//       );
+
+//     case INPUT_TYPES.IMAGE_UPLOAD:
+//       return (
+//         <div className="value">
+//           {value ? (
+//             <Image
+//               src={value}
+//               width={100}
+//               height={100}
+//               style={{ objectFit: 'cover' }}
+//             />
+//           ) : (
+//             <Avatar size={100} icon="UserOutlined" />
+//           )}
+//         </div>
+//       );
+
+//     case INPUT_TYPES.RESET_PASSWORD:
+//       return (
+//         <div className="value">
+//           {t('Click edit to reset password')}
+//         </div>
+//       );
+
+//     default:
+//       return <div className="value">{PLACEHOLDER}</div>;
+//   }
+// };
+
+
+/* eslint-disable no-case-declarations */
+
+
+
+
+
+import React from "react";
+import { Image } from "antd";
+import { getImageUploadViewValue } from "../../../../../ViewForm/helper";
+import { INPUT_TYPES, PLACEHOLDER } from "../../../config";
+import { renderDateFormatted } from "../../../../../../../../utils";
+export const renderInputView = ({ input, data, t }) => {
+  switch (input.type) {
+    case INPUT_TYPES.IMAGE_UPLOAD:
+      const value = data[input.key];
+      console.log('IMAGE_UPLOAD - Key:', input.key, 'Value from backend:', value, 'Full data:', data);
+      let fileList = getImageUploadViewValue(value);
+
+      return fileList.length ? (
+        <div className="image-container">
+          {fileList.filter(f => f.url).map((v, i) => (
+            <Image
+              key={i}
+              width={200}
+              src={v.url}
+            />
+          ))}
+        </div>
+      ) : typeof value !== 'object' ? (
+        <div className="value">
+          {value || PLACEHOLDER}
+        </div>
+      ) : (
+        <div className="value">
+          {PLACEHOLDER}
+        </div>
+      );
+    case INPUT_TYPES.SELECT:
+      const _v = (input.options || []).find((v) => v.value === data[input.key]);
+
+      if (_v) {
+        return (
+          <div className="value">
+            {_v.label || PLACEHOLDER}
+          </div>
+        )
+      }
+
+      return (
+        <div className="value">
+          {PLACEHOLDER}
+        </div>
+      );
+    case INPUT_TYPES.SWITCH:
+      return (
+        <div className="value">
+          {t(!(data[input.key] || input.defaultChecked) ? 'Off' : 'On')}
+        </div>
+      );
+    case INPUT_TYPES.RESET_PASSWORD:
+      return (
+        <div className="value">
+          {data.passwordChangedAt ? renderDateFormatted(data.passwordChangedAt, "DD MMM YYYY"): '--'}
+        </div>
+      );
+    case INPUT_TYPES.TRANSFER_RIGHTS:
+      return (
+        <div className="value">
+          {data.companyEmail || PLACEHOLDER}
+        </div>
+      )
+    default:
+      return (
+        <div className="value">
+          {typeof data[input.key] === 'string' ? data[input.key] || PLACEHOLDER : PLACEHOLDER}
+        </div>
+      )
+  }
+}

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

@@ -0,0 +1,61 @@
+/* eslint-disable react/prop-types */
+import React from "react";
+import { renderInputView } from "./helper";
+import { INPUT_TYPES } from "../../../config";
+
+const INPUT_STYLE = { width: 'calc(50% - 10px)' };
+
+export default function Content({
+  activeForm = {},
+  data = {},
+  t = (key) => key,
+}) {
+
+  const renderInput = (input) => {
+    if (input.type === INPUT_TYPES.INPUT_GROUP) {
+      return (
+        <React.Fragment key={input.key}>
+          {(input.inputs || []).map(renderInput)}
+        </React.Fragment>
+      )
+    }
+
+    return (
+      <div className="input" style={INPUT_STYLE}>
+        <div className="label">
+          {t(input.label)}
+        </div>
+        {renderInputView({ input, data, t })}
+      </div>
+    )
+  }
+
+  return (
+    <div className="content">
+      <div className="wrapper">
+        {(activeForm?.inputGroups || []).map((gr, i) => (
+          <div key={`gr-${i}`} className="group">
+            {gr.title ? (
+              <div className="title with-subtitle">
+                <h1>{t(gr.title)}</h1>
+                {gr.subTitle ? (
+                  <p>{t(gr.subTitle)}</p>
+                ) : null}
+              </div>
+            ) : null}
+            {(gr.inputs || [])
+              .filter((i) => {
+                if (typeof i.showIf === 'function') {
+                  return i.showIf(data);
+                }
+
+                return true;
+              })
+              .map(renderInput)}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+

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

@@ -0,0 +1,338 @@
+import styled from 'styled-components';
+
+export default styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  width: 100%;
+  height: 100%;
+
+  .ant-menu {
+    min-width: 200px;
+    height: 100%;
+    
+    .ant-menu-item{
+      padding-left: var(--size)!important;
+    }
+    
+    .ant-menu-submenu {
+      .ant-menu-submenu-title {
+        padding-left: var(--size) !important;
+      }
+      .ant-menu.ant-menu-sub {
+        .ant-menu-item {
+          padding-left: 32px !important;
+        }
+      }
+    }
+  }
+
+  .view-content {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    position: relative;
+    width: 100%;
+    flex: 1;
+    overflow: auto;
+
+    .content {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      overflow-y: auto;
+      padding: 20px 20px 0 20px;
+      
+      .title {
+        margin-bottom: 20px;
+        font-size: var(--size-lg);
+
+        &.with-subtitle {
+          margin-bottom: var(--size-lg) !important;
+          display: flex;
+          align-items: baseline !important;
+          flex-direction: column;
+
+          h1 {
+            margin-bottom: 4px !important;
+          }
+
+          p {
+            margin-bottom: 0px;
+            color: #667085;
+            font-size: 15px;
+            font-weight: 500;
+          }
+        }
+      }
+      
+      .wrapper {
+        padding: 0;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+
+        .group, .group-extra {
+          width: 100%;
+          background: #fbfbfb;
+          border: 1px solid #f2f2f2;
+          padding: var(--size);
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+          margin-bottom: 20px;
+          justify-content: space-between;
+          
+          .title {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            margin-bottom: var(--size);
+            
+            h1 {
+              font-size: 20px;
+              color: #001529;
+              margin-bottom: 0;
+            }
+          }
+          
+          .input {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            width: calc(50% - 10px);
+            border-bottom: 1px solid #e4e8ed;
+            margin-bottom: var(--size);
+            margin-top: auto !important;
+            
+            .label {
+              display: flex;
+              align-items: center;
+            }
+            
+            .label, .value {
+              font-size: 14px;
+              color: #828282;
+              line-height: 22px;
+              margin: 0;
+            }
+            
+            .value {
+              color: #001529;
+              font-weight: 400;
+              margin-bottom: var(--size);
+              margin-top: 8px;
+            }
+          }
+          
+          .input.checkboxGroup {
+            margin-top: 12px !important;
+            .opt {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              padding: 6px 0;
+              color: rgba(0, 0, 0, 0.78);
+              &:not(:last-of-type) {
+                border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+              }
+            }
+          }
+          
+          .input.last {
+            margin: 0;
+            border: none;
+            .value {
+              margin: 0;
+              margin-top: 8px;
+            }
+          }
+        }
+        
+        .group {
+          &.display, &.repeatable {
+            padding-bottom: var(--size);
+          }
+        }
+        
+        .group.repeatable, .group-extra.repeatable {
+          justify-content: flex-start;
+          .repeatable-row {
+            width: 100%;
+            display: flex;
+            background: white;
+            button {
+              border-radius: 8px;
+              span[role="img"] {
+                font-size: 12px;
+                svg {
+                  margin-top: -5px;
+                }
+              }
+            }
+            &.open {
+              color: var(--mmt-primary-70) !important;
+              background: #e6f7ff !important;
+              border-color: #91d5ff !important;
+              .input {
+                color: var(--mmt-primary-70) !important;
+                background: #e6f7ff !important;
+                border-color: #91d5ff !important;
+                .value {
+                  color: var(--mmt-primary-70) !important;
+                  background: #e6f7ff !important;
+                  border: none;
+                }
+              }
+            }
+          }
+          .input {
+            margin-right: 0 !important;
+            margin: 0;
+            border-bottom: none;
+            .label {
+              display: flex;
+              align-items: center;
+              padding: 0px 8px 12px;
+              border-bottom: 1px solid #e4e8ed;
+              min-height: 35px;
+            }
+            .value {
+              padding: 12px 8px;
+              background: white;
+              border-bottom: 1px solid #e4e8ed;
+              min-height: 48px;
+              margin-bottom: 0;
+              margin-top: 0;
+            }
+            &.first-col{
+              .value {
+                padding-left: 14px;
+              }
+            }
+          }
+          .input.action {
+            .value {
+              text-align: center;
+            }
+          }
+          .no-data {
+            padding: 12px;
+            background: white;
+            width: 100%;
+            text-align: center;
+            margin-bottom: 0 !important;
+          }
+        }
+        
+        .group.repeatable {
+          .input {
+            .label {
+              display: flex;
+              align-items: center;
+              height: 100%;
+            }
+          }
+          .repetable-row-extra {
+            width: 100%;
+            display: flex;
+            flex-wrap: wrap;
+            padding: var(--size) 0;
+            background: #fbfbfb;
+            overflow: hidden;
+            transition: all 300ms ease;
+            .input {
+              display: flex !important;
+              flex-direction: column;
+              justify-content: space-between;
+              border-bottom: 1px solid #e4e8ed;
+              margin-bottom: var(--size);
+            }
+            .label, .value {
+              font-size: 14px;
+              color: #828282;
+              line-height: 22px;
+              margin: 0;
+              border-bottom: none;
+              padding-right: var(--size);
+              padding-bottom: 0px;
+            }
+            .value {
+              color: #001529;
+              font-weight: 400;
+              margin-bottom: var(--size);
+              background: none;
+              border-bottom: none;
+              padding: 0 8px;
+              min-height: unset;
+            }
+            .input.last {
+              margin: 0;
+              border: none;
+              .value {
+                margin: 0;
+              }
+            }
+          }
+        }
+      }
+      
+      .group.display {
+        flex-wrap: wrap;
+        .title {
+          margin-bottom: 0;
+        }
+        .group {
+          width: calc(100% / 2 - 8px);
+          background: white;
+          margin-bottom: 0;
+          margin-top: var(--size);
+          .title {
+            margin-bottom: var(--size);
+            h1 {
+              font-size: var(--font-size-lg);
+            }
+          }
+        }
+      }
+    }
+    
+    .section-tabs {
+      .ant-tabs-bar.ant-tabs-top-bar {
+        display: flex;
+        justify-content: center;
+        border-bottom: none;
+      }
+    }
+  }
+  
+  .anticon {
+    vertical-align: 0;
+    margin-right: 0px;
+    margin-top: 4px;
+  }
+  
+  .image-container{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    vertical-align: middle;
+    .ant-image{
+      border: 1px solid rgb(204, 204, 204);
+      margin-right: 10px;
+    }
+  }
+
+  @media (min-width: 768px){
+    .group.col-md-6.col-sm-12.ml-2,
+    .group.col-md-6.col-sm-12.mr-2 {
+      flex: 0 0 calc(50% - 0.75rem);
+      max-width: calc(50% - 0.75rem);
+    }
+  }
+  
+  b {
+    color: #001529;
+  }
+`;
+

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

@@ -0,0 +1,46 @@
+// src/components/Settings/View/index.js
+import Style from "./components/Content/style";
+import Content from "./components/Content";
+
+export default function SettingsView({
+  sections,
+  activeForm,
+  activeFormKey,
+  data,
+  permissions,
+  goToEdit,
+  goToView,
+  changeSection,
+  customComponents,
+  renderHeader,
+  renderMenu,
+  children,
+  t,
+}) {
+  return (
+    <Style>
+      {renderHeader ? renderHeader({
+        type: "view",
+        permissions,
+        goToEdit,
+        goToView,
+        t,
+      }) : null}
+      <div className="view-content">
+        {renderMenu ? renderMenu({
+          view: "view",
+          form: sections,
+          activeFormKey,
+          changeSection,
+        }) : null}
+        <Content
+          t={t}
+          activeForm={activeForm}
+          data={data}
+          customComponents={customComponents}
+        />
+      </div>
+      {children}
+    </Style>
+  );
+}

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

@@ -0,0 +1,64 @@
+/* eslint-disable react/prop-types */
+import DAFHeader from "../../../../Header/index.jsx";
+import { useForms } from "../../../../../context/Forms";
+import React, { useMemo } from "react";
+
+
+export default function SettingsHeader({
+  type = "edit",
+  changed = false,
+  onSave = () => {},
+  goToEdit = () => {},
+  goToView = () => {},
+  t = (key) => key,
+}) {
+  const { changeNotificationState } = useForms();
+
+  const breadCrumbs = useMemo(
+    () => [
+      {
+        name: t("Settings"),
+        onClick: () => goToView(),
+      },
+    ],
+    [ goToView],
+  );
+
+  const extra = () => {
+    if (type === "edit") {
+      return [
+        {
+          disabled: !changed,
+          onClick: () => onSave(true),
+          tooltip: t("Save"),
+          icon: "Save",
+          type: "primary",
+        },
+        {
+          onClick: () => {
+            changeNotificationState({ onYes: () => goToView() });
+          },
+          icon: "Close",
+          tooltip: t("Cancel"),
+        },
+      ];
+    }
+
+    return [
+      {
+        onClick: () => goToEdit(),
+        icon: t("Edit"),
+        type: "primary",
+      },
+    ];
+  };
+
+  return (
+    <DAFHeader
+      breadcrumbs={breadCrumbs}
+      title={t("Settings")}
+      actionButtons={extra()}
+    />
+  );
+}
+

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

@@ -0,0 +1,36 @@
+/* eslint-disable react/prop-types */
+import { Menu } from "antd";
+import React, { useMemo } from "react";
+
+export default function FormMenu({ view = "view", form = {}, activeFormKey, changeSection, t }) {
+
+	const values = useMemo(
+		() =>
+			Object.keys(form)
+				.sort((a, b) => form[a].position - form[b].position)
+				.map((key) => ({
+					value: key,
+					label: form[key].label,
+				})),
+		[form],
+	);
+
+	return (
+		<Menu
+			mode="inline"
+			defaultSelectedKeys={[activeFormKey]}
+			selectedKeys={[activeFormKey]}
+			style={{ overflowY: "auto", overflowX: "hidden" }}
+			onSelect={(group) => {
+				if (changeSection) {
+					changeSection(group.key);
+				}
+			}}
+		>
+			{values.map((v) => (
+				<Menu.Item key={v.value}>{(v.label)}</Menu.Item>
+			))}
+		</Menu>
+	);
+}
+

package/src/@daf/core/components/Screens/Settings/config.js

@@ -0,0 +1,30 @@
+// Settings Configuration Constants and Helpers
+export const ACTIVE_FORM_KEY = 'activeForm';
+export const PLACEHOLDER = '--';
+
+export const INPUT_TYPES = {
+  TEXT: 'text',
+  SWITCH: 'switch',
+  SELECT: 'select',
+  PHONE: 'phone',
+  INPUT_GROUP: 'inputGroup',
+  RESET_PASSWORD: 'resetPassword',
+  IMAGE_UPLOAD: 'imageUpload',
+  TRANSFER_RIGHTS: 'transferRights',
+};
+
+export const getDefaultActiveForm = (query, sections, defaultSection = 'user') => {
+  if (query && query.get(ACTIVE_FORM_KEY)) {
+    const v = query.get(ACTIVE_FORM_KEY);
+    return Object.keys(sections).includes(v) ? v : defaultSection;
+  }
+  return defaultSection;
+};
+
+export default {
+  ACTIVE_FORM_KEY,
+  PLACEHOLDER,
+  INPUT_TYPES,
+  getDefaultActiveForm,
+};
+