datastake-daf 0.6.762 → 0.6.764

package/src/@daf/pages/Partners/config.js

@@ -0,0 +1,32 @@
+export const filtersConfig = {
+	name: "",
+	datastakeId: "",
+};
+
+export const selectFiltersConfig = {
+	category: {
+		type: "select",
+		label: "Category",
+		placeholder: (t) => `${t("Filter by")} ${t("Category").toLowerCase()}`,
+		style: { flex: 1 },
+		labelStyle: { flex: 1 },
+		getLabel: (option) => option.label,
+		getValue: (option) => option.value,
+	},
+};
+
+export const checkboxConfig = {
+	name: "Name",
+	datastakeId: "ID",
+};
+
+export const partnerTypes = [
+	{ label: "Individual", value: "individual" },
+	{ label: "Organisation", value: "organisation" },
+];
+
+export const partnershipTypes = [
+	{ label: "Source", value: "source" },
+	{ label: "Client", value: "client" },
+	{ label: "Exchange", value: "exchange" },
+];

package/src/@daf/pages/Partners/create.jsx

@@ -0,0 +1,145 @@
+import React, { useMemo } from 'react'
+import { message } from 'antd';
+import PartnerService from '../../services/PartnerService.js';
+import DynamicForm from '../../core/components/DynamicForm/index.jsx';
+import { partnershipTypes, partnerTypes } from './config.js';
+
+const data = {};
+
+const Create = ({
+    query,
+    goTo = () => {},
+    user,
+    t = () => {},
+    ajaxForms,
+    changeAjaxForms = () => {},
+    ajaxOptions,
+    changeAjaxOptions = () => {},
+    onClose = () => {},
+    fetchData = () => {},
+    APP,
+    getAppHeader = () => {},
+    getApiBaseUrl = () => {},
+}) => {
+
+    const form = useMemo(
+		() => ({
+			identification: {
+				partnershipType: {
+					label: t("Type of partnership"),
+					type: "select",
+					position: 1,
+					dataId: "partnershipType",
+					tooltip: (
+						<div style={{ maxWidth: 296 }}>
+							{t("Source: This partner will share information with you.")}
+							<br />
+							{t("Client: You will share information with this partner.")}
+							<br />
+							{t("Exchange: You will both share information with each other.")}
+						</div>
+					),
+					options: partnershipTypes.map((o) => ({ ...o, label: t(o.label) })),
+					rules: [{ required: true, message: "errors::field is required" }],
+				},
+				partnerType: {
+					label: t("Type of partner"),
+					type: "select",
+					position: 2,
+					dataId: "partnerType",
+					options: partnerTypes.map((o) => ({ ...o, label: t(o.label) })),
+					rules: [{ required: true, message: "errors::field is required" }],
+				},
+				nickName: {
+					label: {
+						"partnerType is individual": t("Person name"),
+						"partnerType is organisation": t("Organisation name"),
+					},
+					type: "text",
+					position: 3,
+					showIf: "partnerType notEmpty true",
+					dataId: "nickName",
+					rules: [{ required: true, message: "errors::field is required" }],
+				},
+				invitationType: {
+					label: t("Invitation type"),
+					type: "select",
+					position: 3,
+					dataId: "invitationType",
+					options: [
+						{ label: "Email", value: "email" },
+						{ label: "Application ID", value: "id" },
+					],
+					rules: [{ required: true, message: "errors::field is required" }],
+				},
+				email: {
+					label: t("Email"),
+					type: "text",
+					position: 4,
+					showIf: "invitationType is email",
+					dataId: "email",
+					rules: [
+						{ required: true, message: "errors::field is required" },
+						{ type: "email", message: "errors::field must be email" },
+					],
+				},
+				datastakeId: {
+					label: t("Application ID"),
+					type: "text",
+					position: 4,
+					showIf: "invitationType is id",
+					dataId: "datastakeId",
+					rules: [{ required: true, message: "errors::field is required" }],
+				},
+				partnerMessage: {
+					type: "message",
+					position: 4,
+					label: t(
+						"If the user you are inviting is part of an existing organisation, the invitation will be shared with the account administrator of that organisation.",
+					),
+					showIf: "partnerType is individual",
+					dataId: "partnerMessage",
+				},
+			},
+		}),
+		[t],
+	);
+
+    const submit = async (data) => {
+		try {
+			const { form, ...rest } = data;
+			await PartnerService.create(rest);
+			fetchData();
+			onClose();
+		} catch (err) {
+			onClose();
+			message.error(t(err?.response?.data?.message || "Error occured"));
+			console.log(err);
+		}
+	};
+
+    return (
+        <DynamicForm
+            form={form}
+            data={data}
+            showSaveAndNext={false}
+            module={APP}
+            t={t}
+            isCreate
+            user={user}
+            ajaxForms={ajaxForms}
+            ajaxOptions={ajaxOptions}
+            getAppHeader={getAppHeader}
+            getApiBaseUrl={getApiBaseUrl}
+            changeAjaxOptions={changeAjaxOptions}
+            app={APP}
+            query={query}
+            goTo={() => {}}
+            changeAjaxForms={changeAjaxForms}
+            onCancel={onClose}
+            submit={submit}
+        />
+    )
+}
+
+export default Create

package/src/@daf/pages/Partners/edit.jsx

@@ -0,0 +1,98 @@
+import React, { useState, useEffect } from 'react'
+import { Form, Input, Select } from "antd";
+import PartnerService from '../../services/PartnerService.js';
+import Loading from '../../core/components/Loading/index.jsx';
+import ProjectVisualisationFooter from '../../core/components/ProjectVisualisation/Footer.js';
+import { partnershipTypes } from './config.js';
+import { licensingOptions } from '../../core/components/DataStore/components/Settings/config.js';
+
+const Edit = ({
+    partner,
+    onClose = () => { },
+    fetchData = () => { },
+    t = () => { },
+}) => {
+    const [MainForm] = Form.useForm();
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+        MainForm.setFieldsValue({ ...partner, licensing: 'no_citation' });
+    }, [partner]);
+
+    const onSubmit = async () => {
+        setLoading(true);
+    
+        try {
+          const val = await MainForm.validateFields();
+          await PartnerService.update(partner.id, val);
+          onClose();
+          fetchData();
+        } catch (err) {
+          console.log(err);
+        }
+    
+        setLoading(false);
+      };
+
+    return (
+        <div>
+          {loading ? <Loading /> : null}
+          <Form form={MainForm} layout="vertical">
+            <Form.Item
+              required
+              name="nickName"
+              rules={[{ required: true }]}
+              label={t('Name')}
+            >
+              <Input name="name" />
+            </Form.Item>
+    
+            <Form.Item
+              required
+              name="partnershipType"
+              label={t('Partner Type')}
+            >
+              <Select>
+                {partnershipTypes.map((type) => (
+                  <Select.Option key={type.value} value={type.value}>
+                    {type.label}
+                  </Select.Option>
+                ))}
+              </Select>
+            </Form.Item>
+    
+            <Form.Item
+              required
+              name="email"
+              label={t('Email address')}
+              rules={[{ type: 'email', required: true }]}
+            >
+              <Input disabled />
+            </Form.Item>
+    
+            <Form.Item
+              required
+              name="licensing"
+              label={t('Licensing')}
+            >
+              <Select disabled>
+                {licensingOptions.map((option) => (
+                  <Select.Option key={option.value} value={option.value}>
+                    {t(option.label)}
+                  </Select.Option>
+                ))}
+              </Select>
+            </Form.Item>
+          </Form>
+    
+          <ProjectVisualisationFooter
+            t={t}
+            loading={loading}
+            onClose={onClose}
+            onSubmit={onSubmit}
+          />
+        </div>
+    )
+}
+
+export default Edit

package/src/@daf/pages/Partners/hook.js

@@ -0,0 +1,153 @@
+import { useCallback, useState } from "react";
+import PartnerService from "../../services/PartnerService.js";
+import { message } from "antd";
+
+export const usePartnersActions = ({
+    activeTab,
+    filters,
+    setTotalRequests,
+    t = () => {},
+}) => {
+    const [loading, setLoading] = useState(false);
+    const [data, setData] = useState([]);
+    const [requestDataFetch, setRequestDataFetch] = useState(false);
+    const [initFetchDone, setInitFetchDone] = useState(false);
+
+	const fetchData = useCallback(async () => {
+		setLoading(true);
+		setData([]);
+	
+		try {
+			const { data } = await PartnerService.get(activeTab, {
+				...filters,
+				type: activeTab,
+			});
+			setData(data);
+			setTotalRequests(data?.meta?.total || 0);
+		} catch (err) {
+			console.log(err);
+		}
+	
+		setLoading(false);
+	
+		if (!initFetchDone) {
+			setInitFetchDone(true);
+		}
+	}, [activeTab, filters, initFetchDone, setLoading, setTotalRequests, setData, setInitFetchDone]);
+
+	const accept = useCallback(
+		async (id) => {
+			setLoading(true);
+
+			try {
+				await PartnerService.accept(id);
+				setRequestDataFetch(true);
+			} catch (err) {
+				console.log(err);
+			}
+
+			setLoading(false);
+		},
+		[setLoading],
+	);
+
+	const decline = useCallback(
+		async (id) => {
+			setLoading(true);
+
+			try {
+				await PartnerService.decline(id);
+				setRequestDataFetch(true);
+			} catch (err) {
+				console.log(err);
+			}
+
+			setLoading(false);
+		},
+		[setLoading],
+	);
+
+	const activate = useCallback(
+		async (id) => {
+			setLoading(true);
+
+			try {
+				await PartnerService.activate(id);
+				setRequestDataFetch(true);
+			} catch (err) {
+				console.log(err);
+			}
+
+			setLoading(false);
+		},
+		[setLoading],
+	);
+
+	const suspend = useCallback(
+		async (id) => {
+			setLoading(true);
+
+			try {
+				await PartnerService.suspend(id);
+				message.success(t("Partner suspended successfully"));
+				setRequestDataFetch(true);
+			} catch (err) {
+				console.log(err);
+			}
+
+			setLoading(false);
+		},
+		[setLoading],
+	);
+
+	const resendInvite = useCallback(
+		async (id) => {
+			setLoading(true);
+
+			try {
+				await PartnerService.resendInvite(id);
+				await fetchData();
+			} catch (err) {
+				console.log(err);
+			}
+
+			setLoading(false);
+		},
+		[fetchData, setLoading],
+	);
+
+	const block = useCallback(
+		async (id) => {
+			setLoading(true);
+
+			try {
+				await PartnerService.block(id);
+				await fetchData();
+			} catch (err) {
+				console.log(err);
+			}
+
+			setLoading(false);
+		},
+		[fetchData, setLoading],
+	);
+
+    return {
+        loading,
+        setLoading,
+        data,
+        setData,
+        requestDataFetch,
+        setRequestDataFetch,
+        fetchData,
+        accept,
+        decline,
+        activate,
+        suspend,
+        resendInvite,
+        block,
+        setTotalRequests,
+        initFetchDone,
+        setInitFetchDone,
+    }
+}

package/src/@daf/pages/Partners/index.jsx

@@ -1,11 +1,236 @@
-import React from 'react';
+import React, { useState, useMemo, useEffect, useCallback } from 'react'
+import { Modal } from 'antd';
+import { usePartnersActions } from './hook.js';
+import { getColumns } from './columns.js';
+import TablePageWithTabs from '../../core/components/Screens/TableScreen/TablePageWithTabs/index.jsx';
+import { checkboxConfig, selectFiltersConfig, filtersConfig } from './config.js';
+import Create from './create.jsx';
+import { useGetQueryParams } from '../../hooks/useGetQueryParams.js';
+import ModalHeader from '../../core/components/Header/ModalHeader/index.jsx';
+import Edit from './edit.jsx';
 
-const Partners = () => {
+const PartnersTable = ({
+    t = () => {},
+    goTo = () => {},
+    user = {},
+    options = {},
+    getRedirectLink = () => {},
+    theme = {},
+    isMobile,
+    APP,
+    location,
+    breadcrumbs = [],
+    getApiBaseUrl = () => {},
+    getAppHeader = () => {},
+    query = {},
+    ajaxForms = {},
+    changeAjaxForms = () => {},
+    ajaxOptions = {},
+    changeAjaxOptions = () => {},
+    applications = [],
+    extendingFilters = {},
+    searchLocationParams,
+}) => {
+    const [totalRequests, setTotalRequests] = useState(0);
+    const [selectOptions, setSelectOptions] = useState();
+    const [activeTab, setActiveTab] = useState();
+    const [pendingEditId, setPendingEditId] = useState(null);
+    const [openModal, setOpenModal] = useState(false);
+
+    const tabs = useMemo(() => [
+            { label: t("List"), key: "partners" },
+            { label: (
+                <div className="tab-cont">
+                <div className="flex flex-column justify-content-center">
+                    {t('Requests')}
+                </div>
+                {typeof totalRequests === 'number' ? (
+                    <div className="flex flex-column justify-content-center">
+                    <div className="bubble">
+                        <div className="flex flex-column justify-content-center">
+                        {totalRequests}
+                        </div>
+                    </div>
+                    </div>
+                ) : null}
+                </div>
+            ), 
+            key: "requests" 
+        },
+    ], [t, totalRequests]);
+
+    const { paginationQuery, searchParams, otherParams, sortBy, sortDir, } = useGetQueryParams({location});
+
+    const filters = useMemo(() => {
+        const cleanSearchParams = Object.fromEntries(
+            Object.entries(searchParams).filter(([_, value]) => value != null && value !== '')
+        );
+
+        return {
+            pagination: paginationQuery,
+            ...(Object.keys(otherParams).length > 0 && otherParams ),
+            ...(Object.keys(cleanSearchParams).length > 0 && { search: cleanSearchParams }),
+            tab: activeTab,
+            sortBy: {
+                [sortBy || "updatedAt"]: sortDir ? (sortDir === "ascend" ? 1 : -1) : -1,
+            },
+            ...extendingFilters,
+        }
+    }, [location.search, activeTab, JSON.stringify(extendingFilters)]);
+
+    const { 
+        loading, 
+        data, 
+        requestDataFetch, 
+        fetchData, 
+        accept, 
+        decline, 
+        activate, 
+        suspend, 
+        resendInvite, 
+        block,
+        setRequestDataFetch,
+        initFetchDone,
+        setInitFetchDone,
+    } = usePartnersActions({
+        activeTab,
+        filters,
+        setTotalRequests,
+        t,
+    });
+
+    const columns = useMemo(() => getColumns({
+        t,
+        accept,
+        decline,
+        suspend,
+        resendInvite,
+        activate,
+        activeTab,
+        selectOptions,
+        block,
+        setOpen: setOpenModal,
+    }), [t, accept, decline, suspend, resendInvite, activate, activeTab, selectOptions, block, setOpenModal]);
+
+    const handleActiveTabChange = useCallback((value) => {
+        setActiveTab(value);
+    }, []);
+
+    useEffect(() => {
+		if (requestDataFetch) {
+			fetchData();
+			setRequestDataFetch(false);
+		}
+	}, [requestDataFetch, fetchData, setRequestDataFetch]);
+
+    useEffect(() => {
+		if (searchLocationParams.has("datastakeId") && !pendingEditId) {
+			setPendingEditId(searchLocationParams.get("datastakeId"));
+		}
+	}, [searchLocationParams, pendingEditId]);
+
+	useEffect(() => {
+		if (pendingEditId) {
+			const partner = data.find((partner) => partner.datastakeId === pendingEditId);
+			if (partner) {
+				setOpenModal(partner);
+				setPendingEditId(null);
+			}
+		}
+	}, [data, pendingEditId]);
+
+    useEffect(() => {
+	    fetchData();
+	}, [filters]);
+
+    const headerTooltip = useMemo(() => ({
+        title: t("Partners"),
+        content: (
+            <div className="max-w-250">
+                {t(
+                    "Partners are organisations sharing their information with you, or receiving your information.",
+                )}
+                <br />
+                {t("Only authorised users can create partnerships.")}
+            </div>
+        ),
+    }), [t]);
+    
+    const drawerTooltip = useMemo(() => ({
+        content: (
+            <div className="max-w-250">
+                {t("Source: This partner will share information with you.")},
+                <br />
+                {t("Client: You will share information with this partner.")},
+                <br />
+                {t("Exchange: You will both share information with each other.")}
+            </div>
+        ),
+    }), [t]);
+    
     return (
-        <div>
-            <h1>Partners</h1>
-        </div>
-    );
-};
+        <>
+            <TablePageWithTabs 
+                t={t}
+                tabs={tabs}
+                title={t("Partners")}
+                breadCrumbs={breadcrumbs}
+                location={location}
+                loading={loading}
+                goTo={goTo}
+                defaultActiveTab={"partners"}
+                columns={columns}
+                data={data}
+                checkboxConfig={checkboxConfig}
+                APP={APP}
+                getApiBaseUrl={getApiBaseUrl}
+                selectOptions={selectOptions}
+                selectFiltersConfig={selectFiltersConfig}
+                getRedirectLink={getRedirectLink}
+                filtersConfig={filtersConfig}
+                isMobile={isMobile}
+                view="partners"
+                getActiveTab={handleActiveTabChange}
+                headerTooltip={headerTooltip}
+                drawerTitle={t("Create Partner")}
+                drawerTooltip={drawerTooltip}
+            >
+                {({onDrawerClose}) => (
+                    <Create
+                        query={query}
+                        goTo={goTo}
+                        user={user}
+                        t={t}
+                        ajaxForms={ajaxForms}
+                        changeAjaxForms={changeAjaxForms}
+                        ajaxOptions={ajaxOptions}
+                        changeAjaxOptions={changeAjaxOptions}
+                        onClose={onDrawerClose}
+                        fetchData={() => setRequestDataFetch(true)}
+                        APP={APP}
+                        getAppHeader={getAppHeader}
+                        getApiBaseUrl={getApiBaseUrl}
+                    />
+                )}
+            </TablePageWithTabs>
+            <Modal
+				open={!!openModal}
+				onCancel={() => setOpenModal(false)}
+				footer={null}
+				title={<ModalHeader title={t("Edit Settings")} />}
+			>
+				{openModal ? (
+					<Edit
+						partner={openModal}
+						fetchData={() => setRequestDataFetch(true)}
+						onClose={() => setOpenModal(false)}
+                        t={t}
+					/>
+				) : null}
+			</Modal>
+            <input id="myInput" hidden />
+        </>
+    )
+}
 
-export default Partners
+export default PartnersTable