datastake-daf 0.6.350 → 0.6.352

package/dist/utils/index.js

@@ -7416,6 +7416,7 @@ const en = {
   FB00006: "Account successfully activated",
   FB00007: "Make sure that this has been properly communicated, as the account admin holds critical user management privileges.",
   admin: {
+    "merge-subjects": "Merge Subjects",
     "events": "Events",
     "documents": "Documents",
     "stakeholders": "Stakeholders",

package/package.json

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

package/src/@daf/core/components/Screens/Admin/AdminModals/CombineLocation/helper.js

@@ -1,6 +1,6 @@
 import { findOptions } from "../../../../../../../helpers/StringHelper.js";
 import { Tooltip } from "antd";
-import { getNameByLevel } from "../../AdminTables/LocationTable/helper.js";
+import { getNameByLevel } from "../../AdminTables/SubjectsTable/helper.js";
 
 export const getColumns = ({ t, selectOptions, module, entity }) => {
 	return [

package/src/@daf/core/components/Screens/Admin/AdminModals/CombineLocation/index.jsx

@@ -5,7 +5,7 @@ import { findOptions } from "../../../../../../../helpers/StringHelper.js";
 import DAFTable from "../../../../Table/index.jsx";
 import { useMemo, useState } from "react";
 import { getColumns } from "./helper.js";
-import { getNameByLevel } from "../../AdminTables/LocationTable/helper.js";
+import { getNameByLevel } from "../../AdminTables/SubjectsTable/helper.js";
 
 const { useToken } = theme;
 

package/src/@daf/core/components/Screens/Admin/AdminModals/CombineSubjects/columns.js

@@ -0,0 +1,79 @@
+import { findOptions } from "../../../../../../../helpers/StringHelper.js";
+import { Tooltip } from "antd";
+import { getNameByLevel } from "../../AdminTables/SubjectsTable/helper.js";
+
+export const getColumns = ({ t, selectOptions, module, entity }) => {
+	return [
+		{
+			title: t("admin::organisation_id"),
+			dataIndex: "datastakeId",
+			key: "datastakeId",
+			show: true,
+			render: (value, all) => {
+				return <Tooltip title={value}>{value}</Tooltip>;
+			},
+		},
+		{
+			title: t("Name"),
+			dataIndex: "name",
+			key: "name",
+			show: true,
+			render: (value, all) => {
+				return <Tooltip title={value}>{value}</Tooltip>;
+			},
+		},
+		{
+			title: t("Category"),
+			dataIndex: "category",
+			key: "category",
+			show: true,
+			render: (value, all) => {
+				const label = findOptions(value, selectOptions?.category);
+				return <Tooltip title={label}>{label}</Tooltip>;
+			},
+		},
+		{
+			title: t("Country"),
+			dataIndex: "country",
+			key: "country",
+			show: true,
+			render: (value, all) => {
+				const label = findOptions(value, selectOptions?.country);
+				return <Tooltip title={label}>{label}</Tooltip>;
+			},
+		},
+		{
+			title: t("Province"),
+			dataIndex: "administrativeLevel1",
+			key: "administrativeLevel1",
+			ellipsis: true,
+			show: entity.includes("locations"),
+			render: (value, all) => {
+				let label;
+				if(all?.administrativeLevel1 && value === all?.administrativeLevel1) {
+					label = all?.linking?.SCL?.[value]?.name
+				} else {
+					label = getNameByLevel(all?.linking?.SCL, "level_1")?.name
+				}
+
+				return <Tooltip title={label || '-'}>{label || '-'}</Tooltip>;
+			},
+		},
+		{
+			title: t("Territory"),
+			dataIndex: "administrativeLevel2",
+			key: "administrativeLevel2",
+			show: entity.includes("locations"),
+			render: (value, all) => {
+				let label;
+				if(all?.administrativeLevel2 && value === all?.administrativeLevel2) {
+					label = all?.linking?.SCL?.[value]?.name
+				} else {
+					label = getNameByLevel(all?.linking?.SCL, "level_2")?.name
+				}
+
+				return <Tooltip title={label || '-'}>{label || '-'}</Tooltip>;
+			},
+		},
+	].filter((c) => c?.show);
+};

package/src/@daf/core/components/Screens/Admin/AdminModals/CombineSubjects/helper.js

@@ -0,0 +1,21 @@
+export const mapToSelectOptions = (items, valueKey, selectOptions, optionKey, customMapper = null) => {
+	return items
+		.map((item) => {
+			if (customMapper) {
+				return customMapper(item);
+			}
+			
+			const value = item?.[valueKey] || "-";
+			const optionsList = selectOptions?.[optionKey] || [];
+			const foundOption = optionsList.find((option) => option.value === value);
+			
+			return {
+				label: foundOption?.label || value,
+				value: value,
+			};
+		})
+		.filter(
+			(option, index, self) =>
+				index === self.findIndex((o) => o.value === option.value),
+		);
+};

package/src/@daf/core/components/Screens/Admin/AdminModals/CombineSubjects/index.jsx

@@ -0,0 +1,172 @@
+import Modal from "../../../../Modal/index.jsx";
+import { Form, Input, Select, theme } from "antd";
+import { Container } from "../CombineModalStyle.js";
+import { findOptions } from "../../../../../../../helpers/StringHelper.js";
+import DAFTable from "../../../../Table/index.jsx";
+import { useMemo, useState } from "react";
+import { mapToSelectOptions } from "./helper.js";
+import { getColumns } from "./columns.js";
+import { getNameByLevel } from "../../AdminTables/SubjectsTable/helper.js";
+
+const { useToken } = theme;
+
+export default function CombineSubjectsModal({
+	isOpen,
+	t,
+	onClose,
+	onSuccess,
+	selectedSubjects,
+	selectOptions,
+	module,
+	entity,
+}) {
+	const { token } = useToken();
+	const [MainForm] = Form.useForm();
+	const [isDisabled, setIsDisabled] = useState(true);
+
+	const columns = useMemo(() => {
+		return getColumns({
+			t,
+			selectOptions,
+			module,
+			selectedSubjects,
+			entity,
+		});
+	}, [selectedSubjects, t, selectOptions, module, entity]);
+
+	const onSubmit = () => {
+		MainForm.validateFields().then((data) => {
+			const ids = selectedSubjects.map((subject) => subject._id);
+			onSuccess({
+				ids,
+				data,
+			});
+		});
+	};
+
+	return (
+		<Modal
+			open={isOpen}
+			title={t("admin::merge")}
+			onClose={onClose}
+			onSuccess={onSubmit}
+			withModalFormWrapper={false}
+			width={1100}
+			disabled={isDisabled}
+			destroyOnClose={true}
+			onValuesChange={() => {
+				setIsDisabled(() => {
+				  const values = MainForm.getFieldsValue();
+			  
+				  const requiredFields =
+					entity === "location"
+					  ? ["id", "name", "category", "country", "administrativeLevel1", "administrativeLevel2"]
+					  : ["id", "name", "category", "country"];
+			  
+				  return requiredFields.some((field) => values[field] === undefined);
+				});
+			  }}
+		>
+			<Container>
+				<div className="daf-table-wrapper no-pagination">
+					<span
+						className="merge-modal-section-text"
+						style={{
+							color: token.baseGray90,
+						}}
+					>
+						{t("admin::current_subjects")}
+					</span>
+					<DAFTable
+						columns={columns}
+						data={selectedSubjects}
+						pagination={false}
+						loading={false}
+						rowKey="userId"
+					/>
+				</div>
+
+				<span
+					className="merge-modal-section-text"
+					style={{
+						color: token.baseGray90,
+						marginTop: 14,
+					}}
+				>
+					{t("admin::merged_output")}
+				</span>
+
+				<Form
+					form={MainForm}
+					clearOnDestroy={true}
+					className="select-container"
+					onValuesChange={() => {
+						setIsDisabled((prev) => {
+							const values = MainForm.getFieldsValue();
+							return Object.keys(values).some((key) => values[key] === undefined);
+						});
+					}}
+					style={{
+						borderColor: token.baseGray50,
+					}}
+				>
+					<Form.Item className="flex-1" name="id">
+						<Select
+							options={mapToSelectOptions(selectedSubjects, "datastakeId", selectOptions, null)}
+							placeholder={t("ID")}
+						></Select>
+					</Form.Item>
+
+					<Form.Item className="flex-1" name="name">
+						<Input placeholder={t("Name")}></Input>
+					</Form.Item>
+
+					<Form.Item className="flex-1" name="category">
+						<Select
+							options={mapToSelectOptions(selectedSubjects, "category", selectOptions, "category")}
+							placeholder={t("Category")}
+						></Select>
+					</Form.Item>
+
+					<Form.Item className="flex-1" name="country">
+						<Select
+							options={mapToSelectOptions(selectedSubjects, "country", selectOptions, "country")}
+							placeholder={t("admin::country")}
+						></Select>
+					</Form.Item>
+
+					{entity.includes("locations") && (
+						<>
+						<Form.Item className="flex-1" name="administrativeLevel1">
+							<Select
+							placeholder={t("Province")}
+							options={mapToSelectOptions(selectedSubjects, null, selectOptions, null, (subject) => {
+								const _data = getNameByLevel(subject?.linking?.SCL, "level_1");
+								return {
+									label: _data?.name || "-",
+									value: _data?.id || "-",
+								};
+							})}
+							/>
+						</Form.Item>
+
+						<Form.Item className="flex-1" name="administrativeLevel2">
+							<Select
+							placeholder={t("Territory")}
+							options={mapToSelectOptions(selectedSubjects, null, selectOptions, null, (subject) => {
+								const _data = getNameByLevel(subject?.linking?.SCL, "level_2");
+								return {
+									label: _data?.name || "-",
+									value: _data?.id || "-",
+								};
+							})}
+							/>
+						</Form.Item>
+						</>
+					)}
+				</Form>
+			</Container>
+			<div style={{ height: 57 }} />
+		</Modal>
+	);
+}

package/src/@daf/core/components/Screens/Admin/AdminTables/LocationTable/index.jsx

@@ -10,8 +10,8 @@ import {
 	filtersConfig,
 	defaultUrlParams,
 	checkboxConfig,
-	getColumns,
-} from "./helper.js";
+} from "../SubjectsTable/helper.js";
+import { getColumns } from "../SubjectsTable/columns.js";
 import CombineLocationModal from "../../AdminModals/CombineLocation/index.jsx";
 const { useToken } = theme;
 

package/src/@daf/core/components/Screens/Admin/AdminTables/{LocationTable/LocationTable.stories.js → SubjectsTable/SubjectsTable.stories.js}

@@ -1,9 +1,9 @@
-import LocationTable from ".";
+import SubjectsTable from "./index.jsx";
 import ThemeLayout from "../../../../ThemeLayout";
 
 export default {
-	title: "Screen/Admin/LocationTable",
-	component: LocationTable,
+	title: "Screen/Admin/SubjectsTable",
+	component: SubjectsTable,
 	tags: ["autodocs"],
 	decorators: [
 		(Story) => (
@@ -17,7 +17,7 @@ export default {
 };
 
 export const Primary = {
-	name: "Location Table",
+	name: "Subjects Table",
 	args: {
 		goTo: (goToPath) => console.log("Go to", goToPath),
 		t: (text) => text,

package/src/@daf/core/components/Screens/Admin/AdminTables/{LocationTable/helper.js → SubjectsTable/columns.js}

@@ -1,72 +1,7 @@
 import { Checkbox, Tooltip, Avatar } from "antd";
 import CustomIcon from "../../../../Icon/CustomIcon.jsx";
 import { findOptions } from "../../../../../../../helpers/StringHelper.js";
-
-export const view = "locations";
-
-export const getTabs = ({ t }) => {
-	return [
-		{
-			key: "active",
-			label: t("Active"),
-		},
-		{
-			key: "pending",
-			label: t("Pending"),
-		},
-		{
-			key: 'suspended',
-			label: t("Suspended"),
-		}
-	];
-};
-
-export const selectFiltersConfig = {
-	category: {
-		type: "select",
-		label: "Category",
-		placeholder: (t) => t("Category"),
-		style: { flex: 1 },
-		labelStyle: { flex: 1 },
-		getLabel: (option) => option.label,
-		getValue: (option) => option.value,
-	},
-	country: {
-		type: "select",
-		label: "Country",
-		placeholder: (t) => t("Country"),
-		style: { flex: 1 },
-		labelStyle: { flex: 1 },
-		getLabel: (option) => option.label,
-		getValue: (option) => option.value,
-	},
-	sources: {
-		type: "select",
-		label: "Sources",
-		placeholder: (t) => t("Sources"),
-		style: { flex: 1 },
-		labelStyle: { flex: 1 },
-		getLabel: (option) => option.label,
-		getValue: (option) => option.value,
-	},
-};
-
-export const filtersConfig = {
-	name: "",
-	datastakeId: "",
-};
-
-export const defaultUrlParams = { activeTab: "active" };
-
-export const checkboxConfig = {
-	name: "Name",
-	datastakeId: "ID",
-};
-
-export const getNameByLevel = (data, level) => {
-	const entry = Object.values(data || {}).find(item => item.level === level);
-	return entry;
-  }
+import { getNameByLevel } from "./helper.js";
 
 export const getColumns = ({
 	t,
@@ -74,8 +9,8 @@ export const getColumns = ({
 	show = "show",
 	getRedirectLink = () => {},
 	token,
-	selectedLocations,
-	setSelectedLocations,
+	selectedSubjects,
+	setSelectedSubjects,
 	selectOptions,
 	entity,
 }) => {
@@ -93,7 +28,7 @@ export const getColumns = ({
 				return (
 					<Checkbox
 						onChange={() =>
-							setSelectedLocations((prev) => {
+							setSelectedSubjects((prev) => {
 								const isSelected = prev.some((p) => p.id === all.id);
 								if (isSelected) {
 									return prev.filter((p) => p.id !== all.id);
@@ -101,10 +36,10 @@ export const getColumns = ({
 								return [...prev, all];
 							})
 						}
-						checked={selectedLocations.some((p) => p.id === all.id)}
+						checked={selectedSubjects.some((p) => p.id === all.id)}
 						disabled={
-							selectedLocations?.length >= 3 &&
-							!selectedLocations.some((p) => p.id === all.id)
+							selectedSubjects?.length >= 3 &&
+							!selectedSubjects.some((p) => p.id === all.id)
 						}
 					/>
 				);
@@ -286,4 +221,4 @@ export const getColumns = ({
 	];
 
 	return cols.filter((c) => c[show]);
-};
+};

package/src/@daf/core/components/Screens/Admin/AdminTables/SubjectsTable/helper.js

@@ -0,0 +1,65 @@
+export const getTabs = ({ t }) => {
+	return [
+		{
+			key: "active",
+			label: t("Active"),
+		},
+		{
+			key: "pending",
+			label: t("Pending"),
+		},
+		{
+			key: 'suspended',
+			label: t("Suspended"),
+		}
+	];
+};
+
+export const selectFiltersConfig = {
+	category: {
+		type: "select",
+		label: "Category",
+		placeholder: (t) => t("Category"),
+		style: { flex: 1 },
+		labelStyle: { flex: 1 },
+		getLabel: (option) => option.label,
+		getValue: (option) => option.value,
+	},
+	country: {
+		type: "select",
+		label: "Country",
+		placeholder: (t) => t("Country"),
+		style: { flex: 1 },
+		labelStyle: { flex: 1 },
+		getLabel: (option) => option.label,
+		getValue: (option) => option.value,
+	},
+	sources: {
+		type: "select",
+		label: "Sources",
+		placeholder: (t) => t("Sources"),
+		style: { flex: 1 },
+		labelStyle: { flex: 1 },
+		getLabel: (option) => option.label,
+		getValue: (option) => option.value,
+	},
+};
+
+export const filtersConfig = {
+	name: "",
+	datastakeId: "",
+};
+
+export const defaultUrlParams = { activeTab: "active" };
+
+export const checkboxConfig = {
+	name: "Name",
+	datastakeId: "ID",
+};
+
+export const getNameByLevel = (data, level) => {
+	const entry = Object.values(data || {}).find(item => item.level === level);
+	return entry;
+  }
+
+

package/src/@daf/core/components/Screens/Admin/AdminTables/SubjectsTable/index.jsx

@@ -0,0 +1,181 @@
+import { useState, useMemo } from "react";
+import { useAdminTable } from "../hook";
+import AdminTable from "../components/index.jsx";
+import DAFTable from "../../../../Table/index.jsx";
+import { theme, Tag } from "antd";
+import CustomIcon from "../../../../Icon/CustomIcon.jsx";
+import {
+	getTabs,
+	selectFiltersConfig,
+	filtersConfig,
+	defaultUrlParams,
+	checkboxConfig,
+} from "./helper.js";
+import { getColumns } from "./columns.js";
+import CombineSubjectsModal from "../../AdminModals/CombineSubjects/index.jsx";
+
+const { useToken } = theme;
+
+export default function SubjectsTable({
+	t = (text) => text,
+	isMobile,
+	goTo,
+	getRedirectLink,
+	location,
+	getData,
+	module,
+	config,
+	defaultPageSize = 20,
+	view,
+	headerTitle,
+	breadcrumbs,
+	mergeSubjectsFunction,
+	refetchTrigger,
+}) {
+	const [showFilters, setShowFilters] = useState(false);
+	const [hasError, setHasError] = useState(false);
+	const [selectedSubjects, setSelectedSubjects] = useState([]);
+	const { token } = useToken();
+	const [isCombineModalOpen, setIsModalOpen] = useState(false);
+
+	const {
+		filter,
+		activeTab,
+		canClearSearch,
+		totalPending,
+		data,
+		loading,
+		initFetchDone,
+		fetchData,
+		fetchPendingAccounts,
+		setLoading,
+	} = useAdminTable({
+		goTo,
+		location,
+		selectFiltersConfig,
+		view,
+		defaultUrlParams,
+		module,
+		defaultPageSize,
+		filtersConfig,
+		getRedirectLink,
+		getData,
+		refetchTrigger,
+	});
+
+	const selectOptions = useMemo(() => {
+		return {
+			category: config.options?.category,
+			country: config.options?.countries,
+			sources: [], //TODO: add sources logic and make sure you only show unique sources only once
+		};
+	}, [config.options]);
+
+	const columns = useMemo(() => {
+		return getColumns({
+			t,
+			goTo,
+			token,
+			module,
+			selectedSubjects,
+			setSelectedSubjects,
+			getRedirectLink,
+			selectOptions,
+			entity: headerTitle
+		});
+	}, [t, goTo, module, token, selectedSubjects, getRedirectLink, selectOptions, headerTitle]);
+
+	return (
+		<>
+			<AdminTable
+				filters={filter}
+				t={t}
+				headerTitle={headerTitle}
+				actionButton={[
+					{
+						icon: "Merge",
+						onClick: () => setIsModalOpen(true),
+						tooltip: t("admin::merge-subjects"),
+						disabled: selectedSubjects.length < 2,
+					},
+				]}
+				tabs={getTabs({ t })}
+				isMobile={isMobile}
+				activeTab={activeTab}
+				showFilters={showFilters}
+				setShowFilters={setShowFilters}
+				hasError={hasError}
+				setHasError={setHasError}
+				canClearSearch={canClearSearch}
+				selectOptions={selectOptions}
+				checkboxConfig={checkboxConfig}
+				defaultTableFilters={{}}
+				breadcrumbs={breadcrumbs}
+			>
+				{selectedSubjects.length > 0 && (
+					<div
+						className="flex flex-row  ml-6 mt-5"
+						style={{
+							flexWrap: "wrap",
+							gap: "8px",
+						}}
+					>
+						{selectedSubjects.map((account) => (
+							<Tag
+								key={account.userId}
+								className="flex flex-row gap-2 items-center"
+								onClick={() =>
+									setSelectedSubjects((prev) =>
+										prev.filter((a) => a.datastakeId !== account.datastakeId),
+									)
+								}
+								style={{
+									cursor: "pointer",
+								}}
+							>
+								<span>{account.datastakeId}</span>
+								<CustomIcon name="Close" size={10} />
+							</Tag>
+						))}
+					</div>
+				)}
+				<DAFTable
+					columns={columns}
+					data={data}
+					loading={loading}
+					hideOnLoading={false}
+					pagination={filter.pagination}
+					rowKey="id"
+					selectOptions={selectOptions}
+					doEmptyRows
+					setShowFilters={setShowFilters}
+					filtersConfig={selectFiltersConfig}
+					onFilterChange={filter.onFiltersChange}
+					showFilters={showFilters}
+					defaultFilters={filter.defaultFilters}
+					onChange={filter.onTableChange}
+				/>
+			</AdminTable>
+
+			<CombineSubjectsModal
+				isOpen={isCombineModalOpen}
+				t={t}
+				onClose={() => {
+					setIsModalOpen(false);
+				}}
+				onSuccess={(data) => {
+					setIsModalOpen(false);
+					setLoading(true);
+					if (typeof mergeSubjectsFunction === 'function') {
+						mergeSubjectsFunction(data);
+						setSelectedSubjects([])
+					}
+				}}
+				selectedSubjects={selectedSubjects}
+				selectOptions={selectOptions || {}}
+				module={module}
+				entity={headerTitle}
+			/>
+		</>
+	);
+}