@pisell/private-materials 3.4.156 → 3.4.158

package/es/plus/inventory/components.js

@@ -0,0 +1,172 @@
+import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
+import { useInventory } from "./context.js";
+import { useInventoryOptions } from "./hooks.js";
+import React, { useMemo, useState } from "react";
+import { Alert, Button, Empty, Input, Pagination, Select, Space, Spin, Tag } from "antd";
+import { PisellDataSourceContainer } from "@pisell/materials";
+import { useDebounce } from "ahooks";
+import { LoadingOutlined } from "@ant-design/icons";
+//#region src/plus/inventory/components.tsx
+function RequestError({ error, retry }) {
+	const { errorText, t } = useInventory();
+	return error ? /* @__PURE__ */ React.createElement(Alert, {
+		type: "error",
+		showIcon: true,
+		message: errorText(error),
+		action: /* @__PURE__ */ React.createElement(Button, { onClick: retry }, t("retry"))
+	}) : null;
+}
+function StatusTag({ status }) {
+	const { t } = useInventory();
+	return status ? /* @__PURE__ */ React.createElement(Tag, { color: status === "active" ? "green" : "default" }, t(status)) : null;
+}
+function StatusSelect({ value, onChange }) {
+	const { t } = useInventory();
+	return /* @__PURE__ */ React.createElement(Select, {
+		className: "inventory-filter",
+		allowClear: true,
+		placeholder: t("allStatuses"),
+		value,
+		onChange,
+		options: ["active", "inactive"].map((status) => ({
+			value: status,
+			label: t(status)
+		}))
+	});
+}
+function SearchInput({ value, onChange, items = false }) {
+	const { t } = useInventory();
+	return /* @__PURE__ */ React.createElement(Input.Search, {
+		className: "inventory-search",
+		allowClear: true,
+		placeholder: t(items ? "searchItems" : "search"),
+		"aria-label": t(items ? "searchItems" : "search"),
+		value,
+		onChange: (event) => onChange(event.target.value)
+	});
+}
+function InventoryHeader({ title, description, children }) {
+	return /* @__PURE__ */ React.createElement("header", { className: "inventory-header" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("h2", null, title), description && /* @__PURE__ */ React.createElement("p", null, description)), /* @__PURE__ */ React.createElement(Space, { wrap: true }, children));
+}
+function InventoryNavLoading() {
+	const { t } = useInventory();
+	return /* @__PURE__ */ React.createElement("div", {
+		className: "inventory-nav-loading",
+		role: "status"
+	}, /* @__PURE__ */ React.createElement(Spin, {
+		size: "small",
+		indicator: /* @__PURE__ */ React.createElement(LoadingOutlined, {
+			spin: true,
+			style: { fontSize: 16 }
+		})
+	}), /* @__PURE__ */ React.createElement("span", null, t("loading")));
+}
+function TableContent({ columns, loading, tableKey }) {
+	const context = PisellDataSourceContainer.useContainerContext();
+	const { t, scopeId } = useInventory();
+	return /* @__PURE__ */ React.createElement(Spin, {
+		spinning: loading,
+		delay: 150,
+		indicator: /* @__PURE__ */ React.createElement(LoadingOutlined, {
+			spin: true,
+			style: { fontSize: 24 }
+		}),
+		tip: t("loading"),
+		wrapperClassName: "inventory-table-loading"
+	}, /* @__PURE__ */ React.createElement(PisellDataSourceContainer.Table, _objectSpread2(_objectSpread2({}, context), {}, {
+		serverActions: _objectSpread2(_objectSpread2({}, context.serverActions), {}, { list: _objectSpread2(_objectSpread2({}, context.serverActions.list), {}, { loading: false }) }),
+		columns,
+		rowKey: "id",
+		scroll: { x: "max-content" },
+		__id: `${scopeId}-${tableKey}`,
+		scopeId: tableKey,
+		locale: { emptyText: loading ? /* @__PURE__ */ React.createElement("div", {
+			className: "inventory-table-loading-placeholder",
+			"aria-hidden": true
+		}) : /* @__PURE__ */ React.createElement(Empty, {
+			image: Empty.PRESENTED_IMAGE_SIMPLE,
+			description: t("empty")
+		}) }
+	})));
+}
+function InventoryTable(props) {
+	const { t, scopeId } = useInventory();
+	const overrideData = useMemo(() => ({ list: {
+		list: props.rows,
+		count: props.count
+	} }), [props.rows, props.count]);
+	const dataSource = useMemo(() => ({ key: `${scopeId}-${props.tableKey}` }), [scopeId, props.tableKey]);
+	return /* @__PURE__ */ React.createElement("div", { className: "inventory-table" }, /* @__PURE__ */ React.createElement(PisellDataSourceContainer, {
+		dataSource,
+		autoRun: { list: false },
+		pagination: false,
+		overrideData
+	}, /* @__PURE__ */ React.createElement(TableContent, {
+		columns: props.columns,
+		loading: props.loading,
+		tableKey: props.tableKey
+	})), /* @__PURE__ */ React.createElement(Pagination, {
+		className: "inventory-pagination",
+		current: props.page,
+		pageSize: props.size,
+		total: props.count,
+		showSizeChanger: true,
+		pageSizeOptions: [
+			20,
+			50,
+			100
+		],
+		onChange: props.onPageChange,
+		showTotal: (count) => `${t("count")} ${count}`,
+		disabled: props.loading
+	}));
+}
+function PagedInventorySelect({ resource, value, onChange, filters = {}, disabled = false, selected, placeholder, id }) {
+	const { name, t } = useInventory();
+	const [search, setSearch] = useState("");
+	const keyword = useDebounce(search, { wait: 250 });
+	const [revision, setRevision] = useState(0);
+	const [chosenRecord, setChosenRecord] = useState();
+	const options = useInventoryOptions(resource, _objectSpread2(_objectSpread2({}, filters), {}, { search: keyword || void 0 }), !disabled, revision);
+	const fallback = (chosenRecord === null || chosenRecord === void 0 ? void 0 : chosenRecord.id) === value ? chosenRecord : (selected === null || selected === void 0 ? void 0 : selected.id) === value ? selected : void 0;
+	const rows = fallback && !options.rows.some((record) => record.id === value) ? [fallback, ...options.rows] : options.rows;
+	return /* @__PURE__ */ React.createElement(Select, {
+		id,
+		style: { width: "100%" },
+		showSearch: true,
+		allowClear: true,
+		filterOption: false,
+		value,
+		placeholder,
+		disabled,
+		loading: options.loading,
+		onSearch: setSearch,
+		onChange: (nextValue) => {
+			setChosenRecord(rows.find((record) => record.id === nextValue));
+			onChange === null || onChange === void 0 || onChange(nextValue);
+		},
+		onDropdownVisibleChange: (open) => {
+			if (open) {
+				setSearch("");
+				setRevision((n) => n + 1);
+			}
+		},
+		options: rows.map((record) => ({
+			value: record.id,
+			label: `${name(record)}${record.status === "inactive" ? ` (${t("inactive")})` : ""}`
+		})),
+		notFoundContent: options.loading ? t("loading") : t("empty"),
+		dropdownRender: (menu) => /* @__PURE__ */ React.createElement(React.Fragment, null, menu, /* @__PURE__ */ React.createElement(RequestError, {
+			error: options.error,
+			retry: () => void options.reload()
+		}), options.hasMore && /* @__PURE__ */ React.createElement(Button, {
+			block: true,
+			type: "text",
+			loading: options.loading,
+			onMouseDown: (event) => event.preventDefault(),
+			onClick: () => void options.loadMore()
+		}, t("loadMore")))
+	});
+}
+//#endregion
+export { InventoryHeader, InventoryNavLoading, InventoryTable, PagedInventorySelect, RequestError, SearchInput, StatusSelect, StatusTag };

package/es/plus/inventory/context.js

@@ -0,0 +1,118 @@
+import useEngineContext from "../../hooks/useEngineContext.js";
+import useLocale from "../../hooks/useLocale.js";
+import { createInventoryApi } from "./api.js";
+import { getInventoryTexts } from "./locales.js";
+import { inventoryName } from "./utils.js";
+import React, { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { ConfigProvider } from "antd";
+import { PisellModal, PisellToast } from "@pisell/materials";
+import "./index.less";
+//#region src/plus/inventory/context.tsx
+const InventoryContext = createContext(null);
+function InventorySession({ children, client, locale, id }) {
+	const instanceId = useId();
+	const [confirmation, setConfirmation] = useState(null);
+	const resolveConfirmation = useRef(null);
+	const api = useMemo(() => createInventoryApi(client), [client]);
+	const texts = getInventoryTexts(locale);
+	const t = useCallback((key) => texts[key], [texts]);
+	const name = useCallback((record) => record ? inventoryName(record.name, locale) : t("missing"), [locale, t]);
+	const errorText = useCallback((error) => {
+		const messageValue = error && typeof error === "object" && "message" in error ? error.message : error;
+		const text = typeof messageValue === "string" ? messageValue : "";
+		return Object.prototype.hasOwnProperty.call(texts, text) ? t(text) : text || t("failed");
+	}, [texts, t]);
+	const report = useCallback((error) => {
+		PisellToast({ content: errorText(error) });
+	}, [errorText]);
+	const success = useCallback((key) => {
+		PisellToast({ content: t(key) });
+	}, [t]);
+	const finishConfirmation = useCallback((accepted) => {
+		const resolve = resolveConfirmation.current;
+		resolveConfirmation.current = null;
+		setConfirmation(null);
+		resolve === null || resolve === void 0 || resolve(accepted);
+	}, []);
+	useEffect(() => () => {
+		var _resolveConfirmation$;
+		(_resolveConfirmation$ = resolveConfirmation.current) === null || _resolveConfirmation$ === void 0 || _resolveConfirmation$.call(resolveConfirmation, false);
+		resolveConfirmation.current = null;
+	}, []);
+	const confirm = useCallback((title, content, discard = false) => {
+		if (resolveConfirmation.current) return Promise.resolve(false);
+		return new Promise((resolve) => {
+			resolveConfirmation.current = resolve;
+			setConfirmation({
+				title,
+				content,
+				discard
+			});
+		});
+	}, []);
+	const value = useMemo(() => ({
+		api,
+		locale,
+		t,
+		name,
+		errorText,
+		report,
+		success,
+		confirm,
+		scopeId: id || instanceId
+	}), [
+		api,
+		locale,
+		t,
+		name,
+		errorText,
+		report,
+		success,
+		confirm,
+		id,
+		instanceId
+	]);
+	return /* @__PURE__ */ React.createElement(InventoryContext.Provider, { value }, children, confirmation && /* @__PURE__ */ React.createElement(PisellModal, {
+		open: true,
+		size: "small",
+		title: t(confirmation.title),
+		okText: t(confirmation.discard ? "discard" : confirmation.title === "unbindTitle" ? "unbind" : "remove"),
+		cancelText: t("cancel"),
+		okButtonProps: { danger: true },
+		maskClosable: false,
+		onOk: () => finishConfirmation(true),
+		onCancel: () => finishConfirmation(false)
+	}, /* @__PURE__ */ React.createElement("div", { className: "inventory-modal-body" }, confirmation.content)));
+}
+function InventoryProvider({ children, id }) {
+	var _context$appHelper;
+	const context = useEngineContext();
+	const locale = useLocale();
+	const utils = context === null || context === void 0 || (_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.utils;
+	const store = utils === null || utils === void 0 ? void 0 : utils.store;
+	const subscribe = useCallback((listener) => {
+		var _store$subscribe;
+		return (store === null || store === void 0 || (_store$subscribe = store.subscribe) === null || _store$subscribe === void 0 ? void 0 : _store$subscribe.call(store, listener)) || (() => void 0);
+	}, [store]);
+	const getTenant = useCallback(() => {
+		var _store$getState$core$, _store$getState;
+		return String((_store$getState$core$ = store === null || store === void 0 || (_store$getState = store.getState) === null || _store$getState === void 0 || (_store$getState = _store$getState.call(store)) === null || _store$getState === void 0 || (_store$getState = _store$getState.core) === null || _store$getState === void 0 || (_store$getState = _store$getState.core) === null || _store$getState === void 0 || (_store$getState = _store$getState.tenant) === null || _store$getState === void 0 ? void 0 : _store$getState.tenant_id) !== null && _store$getState$core$ !== void 0 ? _store$getState$core$ : "");
+	}, [store]);
+	const tenant = useSyncExternalStore(subscribe, getTenant, getTenant);
+	return /* @__PURE__ */ React.createElement(ConfigProvider, {
+		prefixCls: "pisell-lowcode",
+		componentSize: "large"
+	}, /* @__PURE__ */ React.createElement(InventorySession, {
+		key: tenant,
+		client: utils === null || utils === void 0 ? void 0 : utils.request,
+		locale: locale || "en",
+		id
+	}, children));
+}
+function useInventory() {
+	const context = useContext(InventoryContext);
+	if (!context) throw new Error("InventoryProvider is required");
+	return context;
+}
+//#endregion
+export { InventoryProvider, useInventory };

package/es/plus/inventory/forms.js

@@ -0,0 +1,46 @@
+import { useInventory } from "./context.js";
+import React from "react";
+import { Form, InputNumber, Select } from "antd";
+import { BaseTranslation } from "@pisell/materials";
+//#region src/plus/inventory/forms.tsx
+function NameField({ disabled = false }) {
+	const { t } = useInventory();
+	return /* @__PURE__ */ React.createElement(Form.Item, {
+		name: "name",
+		label: t("name"),
+		rules: [{ validator: (_, value) => typeof (value === null || value === void 0 ? void 0 : value.original) === "string" && value.original.trim() ? Promise.resolve() : Promise.reject(new Error(t("originalRequired"))) }]
+	}, /* @__PURE__ */ React.createElement(BaseTranslation, {
+		renderMode: disabled ? "view" : "edit",
+		disabled,
+		placeholder: t("name")
+	}));
+}
+function StatusField() {
+	const { t } = useInventory();
+	return /* @__PURE__ */ React.createElement(Form.Item, {
+		name: "status",
+		label: t("status"),
+		rules: [{
+			required: true,
+			message: t("required")
+		}]
+	}, /* @__PURE__ */ React.createElement(Select, { options: ["active", "inactive"].map((value) => ({
+		value,
+		label: t(value)
+	})) }));
+}
+function SortField() {
+	const { t } = useInventory();
+	return /* @__PURE__ */ React.createElement(Form.Item, {
+		name: "sort",
+		label: t("sort"),
+		extra: t("sortHint"),
+		rules: [{ validator: (_, value) => Number.isInteger(value) && value >= 0 ? Promise.resolve() : Promise.reject(new Error(t("nonnegative"))) }]
+	}, /* @__PURE__ */ React.createElement(InputNumber, {
+		min: 0,
+		precision: 0,
+		style: { width: "100%" }
+	}));
+}
+//#endregion
+export { NameField, SortField, StatusField };

package/es/plus/inventory/hooks.js

@@ -0,0 +1,235 @@
+import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
+import { _asyncToGenerator } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/asyncToGenerator.js";
+import { mergeInventoryRecords } from "./utils.js";
+import { useInventory } from "./context.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/plus/inventory/hooks.ts
+function useInventoryQuery(load, queryKey, enabled = true) {
+	const { api } = useInventory();
+	const loadRef = useRef(load);
+	loadRef.current = load;
+	const [revision, setRevision] = useState(0);
+	const key = `${queryKey}:${revision}`;
+	const [result, setResult] = useState({
+		key: "",
+		loading: false
+	});
+	useEffect(() => {
+		if (!enabled) return;
+		let current = true;
+		setResult({
+			key,
+			api,
+			loading: true
+		});
+		Promise.resolve().then(() => loadRef.current()).then((data) => {
+			if (current) setResult({
+				key,
+				api,
+				data,
+				loading: false
+			});
+		}, (error) => {
+			if (current) setResult({
+				key,
+				api,
+				error,
+				loading: false
+			});
+		});
+		return () => {
+			current = false;
+		};
+	}, [
+		key,
+		enabled,
+		api
+	]);
+	const reload = useCallback(() => setRevision((value) => value + 1), []);
+	const valid = enabled && result.key === key && result.api === api;
+	return {
+		data: valid ? result.data : void 0,
+		error: valid ? result.error : void 0,
+		loading: enabled && (!valid || result.loading),
+		reload
+	};
+}
+function useInventoryList(resource, filters = {}, enabled = true) {
+	var _query$data$count, _query$data, _query$data$list, _query$data2;
+	const { api } = useInventory();
+	const filterKey = JSON.stringify([resource, filters]);
+	const [pager, setPager] = useState({
+		key: filterKey,
+		page: 1,
+		size: 20
+	});
+	const page = pager.key === filterKey ? pager.page : 1;
+	const { size } = pager;
+	const local = resource === "item-unit";
+	const query = useInventoryQuery(_asyncToGenerator(function* () {
+		if (local) {
+			const units = yield api.units(filters);
+			return {
+				list: units,
+				count: units.length,
+				page: 1,
+				size: units.length
+			};
+		}
+		return api.list(resource, _objectSpread2(_objectSpread2({}, filters), {}, {
+			page,
+			size
+		}));
+	}), JSON.stringify([
+		filterKey,
+		local ? null : page,
+		local ? null : size
+	]), enabled);
+	const count = (_query$data$count = (_query$data = query.data) === null || _query$data === void 0 ? void 0 : _query$data.count) !== null && _query$data$count !== void 0 ? _query$data$count : 0;
+	useEffect(() => {
+		if (!query.data) return;
+		const lastPage = Math.max(1, Math.ceil(query.data.count / size));
+		if (page > lastPage) setPager({
+			key: filterKey,
+			page: lastPage,
+			size
+		});
+	}, [
+		query.data,
+		page,
+		size,
+		filterKey
+	]);
+	const rows = (_query$data$list = (_query$data2 = query.data) === null || _query$data2 === void 0 ? void 0 : _query$data2.list) !== null && _query$data$list !== void 0 ? _query$data$list : [];
+	return _objectSpread2(_objectSpread2({}, query), {}, {
+		count,
+		page,
+		size,
+		rows: local ? rows.slice((page - 1) * size, page * size) : rows,
+		onPageChange: (nextPage, nextSize) => setPager({
+			key: filterKey,
+			page: nextSize === size ? nextPage : 1,
+			size: nextSize
+		})
+	});
+}
+function useInventoryOptions(resource, filters = {}, enabled = true, revision = 0) {
+	const { api } = useInventory();
+	const key = JSON.stringify([
+		resource,
+		filters,
+		revision
+	]);
+	const generation = useRef(0);
+	const busy = useRef(false);
+	const [result, setResult] = useState({
+		key: "",
+		rows: [],
+		count: 0,
+		page: 0,
+		loading: false
+	});
+	const valid = enabled && result.key === key;
+	const fetchPage = useCallback(function() {
+		var _ref = _asyncToGenerator(function* (page) {
+			if (!enabled || page > 1 && busy.current) return;
+			const requestId = ++generation.current;
+			busy.current = true;
+			setResult((previous) => ({
+				key,
+				rows: page === 1 ? [] : previous.rows,
+				count: page === 1 ? 0 : previous.count,
+				page: page === 1 ? 0 : previous.page,
+				loading: true
+			}));
+			try {
+				const data = yield api.list(resource, _objectSpread2(_objectSpread2({}, JSON.parse(key)[1]), {}, {
+					page,
+					size: 20
+				}));
+				if (generation.current !== requestId) return;
+				setResult((previous) => ({
+					key,
+					rows: page === 1 ? data.list : mergeInventoryRecords(previous.rows, data.list),
+					count: data.count,
+					page,
+					loading: false
+				}));
+			} catch (error) {
+				if (generation.current === requestId) setResult((previous) => _objectSpread2(_objectSpread2({}, previous), {}, {
+					loading: false,
+					error
+				}));
+			} finally {
+				if (generation.current === requestId) busy.current = false;
+			}
+		});
+		return function(_x) {
+			return _ref.apply(this, arguments);
+		};
+	}(), [
+		api,
+		resource,
+		key,
+		enabled
+	]);
+	useEffect(() => {
+		if (enabled) fetchPage(1);
+		return () => {
+			++generation.current;
+			busy.current = false;
+		};
+	}, [fetchPage, enabled]);
+	return {
+		rows: valid ? result.rows : [],
+		loading: enabled && (!valid || result.loading),
+		error: valid ? result.error : void 0,
+		hasMore: valid && result.page * 20 < result.count,
+		loadMore: () => fetchPage(result.page + 1),
+		reload: () => fetchPage(1)
+	};
+}
+function useInventoryMutation() {
+	const { report } = useInventory();
+	const locked = useRef(false);
+	const mounted = useRef(true);
+	const [busy, setBusy] = useState(false);
+	useEffect(() => {
+		mounted.current = true;
+		return () => {
+			mounted.current = false;
+		};
+	}, []);
+	return {
+		busy,
+		run: function() {
+			var _ref2 = _asyncToGenerator(function* (operation) {
+				if (locked.current || !mounted.current) return;
+				locked.current = true;
+				setBusy(true);
+				try {
+					yield operation();
+				} catch (error) {
+					if (mounted.current) report(error);
+				} finally {
+					locked.current = false;
+					if (mounted.current) setBusy(false);
+				}
+			});
+			return function run(_x2) {
+				return _ref2.apply(this, arguments);
+			};
+		}()
+	};
+}
+function useUnsavedChanges() {
+	const { confirm, t } = useInventory();
+	const [dirty, setDirty] = useState(false);
+	return {
+		dirty,
+		setDirty,
+		canLeave: () => dirty ? confirm("unsavedTitle", t("unsavedHint"), true) : Promise.resolve(true)
+	};
+}
+//#endregion
+export { useInventoryList, useInventoryMutation, useInventoryOptions, useInventoryQuery, useUnsavedChanges };