datastake-daf 0.6.754 → 0.6.755

package/package.json

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

package/src/@daf/core/components/Screens/Users/columns.js

@@ -0,0 +1,216 @@
+import React from 'react';
+import { Modal, Tag, Typography, message ,Tooltip} from "antd";
+
+import { renderDateFormatted } from '../../../../../helpers/Forms.js';
+import MoreMenu from '../../../../core/components/Table/MoreMenu/index.jsx';
+const getLinkValue = (value, linkingObject) => {
+  if(linkingObject && linkingObject?.[value]) {
+    return linkingObject?.[value]?.name;
+  }
+  return null;
+}
+
+export const getColumns = ({t, goTo, user, 	removeUser = () => {},
+resendInvite = () => {},
+setUserToEdit = () => {},
+userRoles = [],
+company = {},
+canCreate = false,
+app}) => [
+    // {
+    //     dataIndex: 'datastakeId',
+    //     title: t('ID'),
+    //     ellipsis: true,
+    //     show: true,
+    //     render: (v, all) => {
+    //       if (all.empty) {
+    //         return <div className="daf-default-cell" />
+    //       }
+    
+    //       return <Tooltip title={v}>{v}</Tooltip>;
+    //     },
+    // },
+    {
+        dataIndex: 'firstName',
+        title: t('Name'),
+        ellipsis: true,
+        show: true,
+        render: (v, all) => {
+          if (all.empty) {
+            return <div className="daf-default-cell" />
+          }
+    
+          return <Tooltip title={v}>{v}</Tooltip>;
+        },
+    },     
+    {
+        dataIndex: 'lastName',
+        title: t('Last Name'),
+        ellipsis: true,
+        show: true,
+        render: (v, all) => {
+            if (all.empty) {
+              return <div className="daf-default-cell" />
+            }
+      
+            return <Tooltip title={v}>{v}</Tooltip>;
+          },
+      },     
+    {
+        dataIndex: 'email',
+        title: t('Email'),
+        ellipsis: true,
+        show: true,
+        render: (v, all) => {
+            if (all.empty) {
+              return <div className="daf-default-cell" />
+            }
+      
+            return <Tooltip title={v}>{v}</Tooltip>;
+          },
+   
+        },
+        {
+          title: t("Status"),
+          dataIndex: "status",
+          key: "status",
+          width: 150,
+          ellipsis: false,
+          show: true,
+          render: (status, users) => {
+            if (users.empty) {
+              return null;
+            }
+    
+            if (status === "inactive") {
+              return (
+                <Tag color="red" style={{ width: 100, textAlign: "center" }}>
+                  {t("Blocked")}
+                </Tag>
+              );
+            }
+    
+            if (status === "active") {
+              return (
+                <Tag color="green" style={{ width: 100, textAlign: "center" }}>
+                  {t("Active")}
+                </Tag>
+              );
+            }
+    
+            return (
+              <Tag color="orange" style={{ width: 100, textAlign: "center" }}>
+                {t("Pending")}
+              </Tag>
+            );
+          },
+        },
+    {
+        title: t("Last Login"),
+        dataIndex: "lastLogin",
+        key: "lastLogin",
+        width: 125,
+        render: (date, all) => {
+            if (all.empty) {
+                return <div className="daf-default-cell" />;
+            }
+
+            const _date = date ? renderDateFormatted(date, "DD MMM YYYY", user?.language || 'en') : "-";
+            return <Tooltip title={_date}>{_date}</Tooltip>;
+        },
+        ellipsis: true,
+    },
+   {
+    title: t("User Role"),
+    dataIndex: "roleName",
+    key: "role",
+    show: true,
+    render: (val, all) => {
+        if (all.empty) {
+          return <div className="daf-default-cell" />;
+        }
+
+        // Display role name if available, fallback to role ID
+        const displayValue = val || all.role;
+        return <Tooltip title={displayValue}>{displayValue}</Tooltip>;
+      },
+    },
+    {
+			title: t(""),
+			key: "actions",
+			width: 60,
+			show: removeUser || setUserToEdit,
+			render: (row, all) => {
+				if (all.empty) {
+					return <div className="daf-default-cell" />;
+				}
+
+				const _v = userRoles?.find((r) => r.value === all.role);
+
+				const items = [
+					removeUser
+						? {
+								key: "removeUser",
+								onClick: () => {
+									Modal.confirm({
+										title: t(
+											"Are you sure you want to remove this user from your organisation?",
+										),
+										onOk: () => removeUser(all.id),
+										cancelText: t("No"),
+										okText: "Yes",
+										closable: true,
+									});
+								},
+								label: t("Remove User"),
+						  }
+						: null,
+            setUserToEdit						? {
+								key: "editPermission",
+								onClick: () => setUserToEdit(all),
+								disabled: all.isAdmin || _v?.isForAppAdmin,
+								label: t("Edit Permissions"),
+						  }
+						: null,
+					all.invitationToken && canCreate
+						? {
+								key: "copyLink",
+								onClick: () => {
+									if (location.pathname.includes(`/${APP}`)) {
+										navigator.clipboard.writeText(
+											`${window.location.host}/${app}/r/${company.inviteToken}/${all.invitationToken}`,
+										);
+									} else {
+										navigator.clipboard.writeText(
+											`${window.location.host}/r/${company.inviteToken}/${all.invitationToken}`,
+										);
+									}
+									message.info({ content: t("Invitation link copied") });
+								},
+								label: t("Copy Invitation Link"),
+						  }
+						: null,
+					all.invitationToken && canCreate
+						? {
+								key: "resendInvite",
+								onClick: () => {
+									Modal.confirm({
+										title: t(
+											"Are you sure you want to invite this user again? This user will receive a new notification",
+										),
+										onOk: () => resendInvite(all.id),
+										cancelText: t("No"),
+										okText: "Yes",
+										closable: true,
+									});
+								},
+								label: t("Resend Invite"),
+						  }
+						: null,
+				];
+
+				return <MoreMenu items={items} />;
+			},
+			client: false,
+		},
+].filter((column) => column.show !== false);

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

@@ -0,0 +1,174 @@
+export const checkboxConfig = {
+	name: 'Name',
+	datastakeId: 'ID'
+}
+
+export const getFiltersConfig = ({t}) => {
+    return {
+		email: {
+		  type: 'text',
+		  label: 'Email',
+		  placeholder: (t) => `${t('Filter by')} ${t('Email').toLowerCase()}`,
+		  style: { flex: 1 },
+		  labelStyle: { flex: 1 },
+		  getLabel: (option) => option.label,
+		  getValue: (option) => option.value,
+		},
+
+
+		status: {
+		  type: "select",
+		  label: "Status",
+		  placeholder: (t) => `${t("Filter by")} ${t("Status").toLowerCase()}`,
+		  style: { flex: 1 },
+		  labelStyle: { fley: 1 },
+		  getLabel: (option) => option.label,
+		  getValue: (option) => option.value,
+		},
+		timeframe: {
+		  type: "timeframe",
+		  label: "Timeframe",
+		  placeholder: (t) => `${t("Filter by")} ${t("Timeframe").toLowerCase()}`,
+		  style: { flex: 1 },
+		  labelStyle: { flex: 1 },
+		},
+		userRole: {
+		  type: "select",
+		  label: "User Role",
+		  placeholder: (t) => `${t("Filter by")} ${t("User Role").toLowerCase()}`,
+		  style: { flex: 1 },
+		  labelStyle: { flex: 1 },
+		},
+	}
+}
+
+export const filtersConfig = {
+	name: '',
+	datastakeId: '',
+};
+
+export const getFilterOptions = (options, t) => {
+	const {
+		emailOptions = [],
+		statusOptions = [],
+		timeframeOptions = [],
+		userRoleOptions = [],
+	  } = options || {};
+	console.log({options})
+
+	const _default  = {
+  timeframe: timeframeOptions,
+  email: emailOptions,
+  status: statusOptions,
+  userRole: userRoleOptions,
+		status: [
+			{
+				value: "active",
+				label: "Active",
+			},
+			{
+				value: "pending",
+				label: "Pending",
+			},
+		],
+	}
+
+	return _default;
+}
+
+export const getUserForm = ({ t, userRoles = [], APP }) => {
+	return {
+		user: {
+			position: 0,
+			firstName: {
+				group: "user",
+				section: "user",
+				moduleScope: {
+					cadd: ["scoping", "new", "linking-extra"],
+					pme: ["scoping", "new", "linking-extra"],
+				},
+				label: t("First Name"),
+				comment: false,
+				type: "text",
+				rules: [
+					{
+						required: true,
+						message: "This field is required",
+					},
+				],
+				mergeStrategy: "simple",
+				position: 1,
+			},
+			lastName: {
+				group: "user",
+				section: "user",
+				moduleScope: {
+					cadd: ["scoping", "new", "linking-extra"],
+					pme: ["scoping", "new", "linking-extra"],
+				},
+				label: t("Last Name"),
+				comment: false,
+				type: "text",
+				rules: [
+					{
+						required: true,
+						message: "This field is required",
+					},
+				],
+				mergeStrategy: "simple",
+				position: 2,
+			},
+			email: {
+				group: "user",
+				section: "user",
+				moduleScope: {
+					cadd: ["scoping", "new", "linking-extra"],
+					pme: ["scoping", "new", "linking-extra"],
+				},
+				label: t("Email"),
+				comment: false,
+				type: "text",
+				rules: [
+					{
+						required: true,
+						message: "This field is required",
+					},
+					{
+						type: "email",
+						message: "errors::field must be email",
+					},
+				],
+				mergeStrategy: "simple",
+				position: 3,
+			},
+			role: {
+				group: "user",
+				section: "user",
+				moduleScope: {
+					cadd: ["scoping", "new", "linking", "linking-extra", "admin"],
+					pme: ["scoping", "new", "linking", "linking-extra", "admin"],
+				},
+				label: t("User Role"),
+				placeholder: t("User Role"),
+				comment: false,
+				type: "select",
+				options: userRoles
+					.filter((r) => r.canBeAssignedToSubUsers && r.app === APP)
+					.map((v) => ({
+						label: t(v.label),
+						value: v.value,
+					})),
+				optionsName: "userRoles",
+				// tooltip: <UserRolePopover t={t} />,
+				sortOptions: true,
+				rules: [
+					{
+						required: true,
+						message: "This field is required",
+					},
+				],
+				position: 4,
+			},
+		},
+	};
+};

package/src/@daf/core/components/Screens/Users/create.jsx

@@ -0,0 +1,63 @@
+import React, { useMemo } from 'react'
+import { getUserForm } from './config.js';
+import DynamicForm from '../../../../core/components/DynamicForm/index.jsx';
+
+const UsersCreate = ({
+    onSubmitted = () => {}, 
+    onCancel = () => {}, 
+    user = {}, 
+    APP, 
+    query, 
+    goTo = () => {}, 
+    t = () => {}, 
+    ajaxForms = {}, 
+    changeAjaxForms = () => {}, 
+    ajaxOptions = {}, 
+    changeAjaxOptions = () => {}, 
+    getAppHeader = () => {},
+    getApiBaseUrl = () => {}, 
+    userToEdit = null,
+    userRoles = [],
+}) => {
+    const disabledInputs = useMemo(() => !userToEdit ? [] : ['firstName', 'lastName', 'email'], [userToEdit]);
+    const data = useMemo(() => ({ ...(userToEdit || {}), userRole: userToEdit?.role }), [userToEdit]);
+    const form = useMemo(() => getUserForm({ t, userRoles, APP }), [t, userRoles, APP]);
+
+    return (
+        <div className="daf-create-form">
+            <DynamicForm 
+                form={form}
+                data={data}
+                showSaveAndNext={false}
+                module={APP}
+                onCancel={onCancel}
+                isCreate
+                t={t}
+                user={user}
+                ajaxForms={ajaxForms}
+                ajaxOptions={ajaxOptions}
+                getAppHeader={getAppHeader}
+                getApiBaseUrl={getApiBaseUrl}
+                changeAjaxOptions={changeAjaxOptions}
+                app={APP}
+                query={query}
+                goTo={goTo}
+                changeAjaxForms={changeAjaxForms}
+                disabledInputs={disabledInputs}
+                submit={(payload) => {
+                    onSubmitted({
+                        ...payload,
+                        apps: {
+                            [APP]: {
+                                ...((userToEdit?.apps || {})[APP] || {}),
+                                role: payload.role,
+                            },
+                        },
+                    });
+                }}
+            />
+        </div>
+    )
+}
+
+export default UsersCreate

package/src/@daf/core/components/Screens/Users/index.jsx

@@ -0,0 +1,173 @@
+import React, { useMemo, useState, useEffect } from 'react'
+import { Drawer } from 'antd'
+import { getColumns } from './columns.js';
+import { checkboxConfig, getFiltersConfig, filtersConfig, getFilterOptions } from './config.js';
+import { useGetQueryParams } from '../../../../hooks/useGetQueryParams.js';
+import UsersCreate from './create.jsx';
+import Header from '../../../../core/components/Header/index.jsx';
+import BaseScreen from '../BaseScreen/index.jsx';
+import { CREATE_DRAWER_WIDTH } from '../../../../../helpers/Forms.js';
+import DrawerHeader from '../../../../core/components/Header/DrawerHeader/index.jsx';
+
+const UsersTable = ({
+  t = () => {},
+  goTo = () => {},
+  user = {},
+  options = {},
+  getRedirectLink = () => {},
+  theme = {},
+  loading = false,
+  data = {},
+  isMobile,
+  APP,
+  location,
+  getData = () => {},
+  getApiBaseUrl = () => {},
+  getAppHeader = () => {},
+  onInviteUser = () => {},
+  onEditUser = () => {},
+  query = {},
+  ajaxForms = {},
+  changeAjaxForms = () => {},
+  ajaxOptions = {},
+  changeAjaxOptions = () => {},
+  extendingFilters = {},
+  userRoles = [],
+}) => {
+  const [selectOptions, setSelectOptions] = useState();
+  const params = new URLSearchParams(location?.search);
+  const [openCreateModal, setOpenCreateModal] = useState(params.has("create"));
+  const [userToEdit, setUserToEdit] = useState(null);
+
+  const columns = useMemo(() => getColumns({
+    t,
+    goTo,
+    user,
+    options,
+    getRedirectLink,
+    theme,
+    subject: 'user',
+    data,
+    setUserToEdit,
+  }), [t, goTo, user, options, getRedirectLink, theme, data]);
+
+  const breadCrumbs = [];
+
+  const { paginationQuery, searchParams, otherParams, sortBy, sortDir } = useGetQueryParams({ location });
+
+  const filters = useMemo(() => ({
+    ...otherParams,
+    ...extendingFilters,
+  }), [otherParams, extendingFilters]);
+
+  useEffect(() => {
+    getData({
+      pagination: paginationQuery,
+      ...(Object.keys(searchParams).length > 0 && { search: searchParams }),
+      ...otherParams,
+      sortBy: {
+        [sortBy || 'updatedAt']: sortDir ? (sortDir === 'ascend' ? 1 : -1) : -1,
+      },
+      ...extendingFilters,
+    }, 'users');
+  }, [location.search, JSON.stringify(extendingFilters)]);
+
+  const selectFiltersConfig = useMemo(() => getFiltersConfig({ t }), [t]);
+
+  useEffect(() => {
+    setSelectOptions((prev) => ({
+      ...prev,
+      ...getFilterOptions(options, t),
+    }));
+  }, [options, t]);
+
+  return (
+    <div className="semibold form-input-output daf-create-view">
+      <Header 
+        title={t("users")}
+        breadcrumbs={breadCrumbs}
+        actionButtons={[
+          {
+            type: "primary",
+            onClick: () => setOpenCreateModal(true),
+            tooltip: t("New"),
+            icon: "Add",
+          },
+        ]}
+        // onDownload={() => {
+        //   console.log("download");
+        // }}
+        // downloadDisabled={false}
+      />
+      <BaseScreen 
+        t={t}
+        checkboxConfig={checkboxConfig}
+        defaultTableFilters={{}}
+        columns={columns}
+        data={data}
+        loading={loading}
+        location={location}
+        goTo={goTo}
+        APP={APP}
+        getApiBaseUrl={getApiBaseUrl}
+        selectOptions={selectOptions}
+        selectFilters={selectFiltersConfig}
+        view="users"
+        getRedirectLink={getRedirectLink}
+        defaultUrlParams={{}}
+        module={APP}
+        filtersConfig={filtersConfig}
+        isMobile={isMobile}
+      />
+      {(openCreateModal || !!userToEdit) && (
+        <Drawer
+          destroyOnClose
+          title={
+            <DrawerHeader 
+              title={t(userToEdit ? "Edit User" : "New User")}
+            />
+          }
+          open={openCreateModal || !!userToEdit}
+          onClose={() => {
+            setOpenCreateModal(false);
+            setUserToEdit(null);
+          }}
+          width={CREATE_DRAWER_WIDTH}
+          bodyStyle={{ padding: 0 }}
+          maskClosable={false}
+        >
+          <UsersCreate
+            t={t}
+            goTo={goTo}
+            user={user}
+            APP={APP}
+            getApiBaseUrl={getApiBaseUrl}
+            getAppHeader={getAppHeader}
+            onSubmitted={(payload) => {
+              if (userToEdit) {
+                onEditUser(payload);
+              } else {
+                onInviteUser(payload);
+              }
+              setOpenCreateModal(false);
+              setUserToEdit(null);
+            }}
+            onCancel={() => {
+              setOpenCreateModal(false);
+              setUserToEdit(null);
+            }}
+            query={query}
+            ajaxForms={ajaxForms}
+            changeAjaxForms={changeAjaxForms}
+            ajaxOptions={ajaxOptions}
+            changeAjaxOptions={changeAjaxOptions}
+            userRoles={userRoles}
+            userToEdit={userToEdit}
+          />
+        </Drawer>
+      )}
+    </div>
+  );
+};
+
+export default UsersTable;

package/src/@daf/core/components/TableScreen/TablePageWithTabs/index.jsx

@@ -1,9 +1,9 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { Tabs, Drawer } from 'antd'
-import Header from '../../../Header/index.jsx'
-import BaseScreen from '../../BaseScreen/index.jsx'
-import { CREATE_DRAWER_WIDTH } from '../../../../helpers/Forms.js'
-import DrawerHeader from '../../../Header/DrawerHeader/index.jsx'
+import Header from '../../../../core/components/Header/index.jsx'
+import BaseScreen from '../../../components/Screens/BaseScreen/index.jsx'
+import { CREATE_DRAWER_WIDTH } from '../../../../../helpers/Forms.js'
+import DrawerHeader from '../../../../core/components/Header/DrawerHeader/index.jsx'
 
 const TablePageWithTabs = ({
     t= () => {},

package/src/pages.js

@@ -11,7 +11,7 @@ export { default as ActivitiesTable } from './@daf/pages/Events/Activities/index
 
 export { default as IncidentsTable } from './@daf/pages/Events/Incidents/index.jsx';
 export { default as ProductionSitesTable } from './@daf/pages/Locations/MineSite/index.jsx';
-
+export { default as UsersTable } from './@daf/core/components/Screens/Users/index.jsx';
 
 // Summary
 export { default as OperatorSummary } from './@daf/pages/Summary/Operator/index.jsx';

package/build/manifest.json

@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

package/build/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow: