@shko.online/lookupobjects-mock
Version:
Mocking Dataverse Lookup Objects to simplify writing soties for PCF components
193 lines (192 loc) • 9.55 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
require("./LookupCss.css");
var _SingleEntityFilter = _interopRequireDefault(require("./SingleEntityFilter"));
var _MultiEntityFilter = _interopRequireDefault(require("./MultiEntityFilter"));
var _Header = _interopRequireDefault(require("./Header"));
var _Footer = _interopRequireDefault(require("./Footer"));
var _SelectedRecord = _interopRequireDefault(require("./SelectedRecord"));
var _SearchLookup = _interopRequireDefault(require("./SearchLookup"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function LookupComponent({
unmount,
resolve,
lookupOptions,
db
}) {
const {
allowMultiSelect,
entityTypes
} = lookupOptions;
const [results, setResults] = (0, _react.useState)(null);
const [selected, setSelected] = (0, _react.useState)(null);
const selectedIds = (0, _react.useMemo)(() => selected?.map(i => i.id) || [], [selected]);
const inpuRef = (0, _react.useRef)();
const onCloseClick = (0, _react.useCallback)(() => {
console.log('unmount?');
unmount();
resolve([]);
}, [resolve, unmount]);
const searchRecords = (0, _react.useCallback)(search => {
const result = [];
entityTypes.forEach(value => {
const metadata = db.getTableMetadata(value);
const select = `SELECT ${metadata.PrimaryIdAttribute}, ${metadata.PrimaryNameAttribute}
FROM ${metadata.LogicalName}
${search ? `WHERE ${metadata.PrimaryNameAttribute || 'name'} LIKE '%${search}%'` : ''}`;
const res = db.db.exec(select).map(v => ({
entityType: value,
id: v[metadata.PrimaryIdAttribute],
name: v[metadata.PrimaryNameAttribute]
}));
result.push(...res);
});
console.log('Result', result);
setResults(result.filter(i => !selectedIds.includes(i.id)));
}, [db, entityTypes, selectedIds]);
const searchByEntityRecords = (0, _react.useCallback)(entity => {
const search = inpuRef?.current?.value;
const result = [];
console.log(entity);
lookupOptions.entityTypes.forEach(value => {
if (entity && value !== entity) {
return;
}
const metadata = db.getTableMetadata(value);
const select = `SELECT ${metadata.PrimaryIdAttribute}, ${metadata.PrimaryNameAttribute}
FROM ${metadata.LogicalName}
${search ? `WHERE ${metadata.PrimaryNameAttribute || 'name'} LIKE '%${search}%'` : ''}`;
const res = db.db.exec(select).map(v => ({
entityType: value,
id: v[metadata.PrimaryIdAttribute],
name: v[metadata.PrimaryNameAttribute]
}));
result.push(...res);
});
console.log('Result', result);
setResults(result.filter(i => !selectedIds?.includes(i.id)));
}, [db, lookupOptions.entityTypes, selectedIds]);
const OnSearchClick = (0, _react.useCallback)(() => {
const search = inpuRef.current.value;
searchRecords(search);
}, [searchRecords]);
const onSelect = (0, _react.useCallback)(lookup => {
if (allowMultiSelect) {
setSelected(prev => {
return prev ? [...prev, lookup] : [lookup];
});
setResults(prev => {
return prev.filter(i => i.id !== lookup.id);
});
} else {
setSelected([lookup]);
setResults(null);
}
}, [allowMultiSelect]);
const onUnSelect = (0, _react.useCallback)(lookup => {
setSelected(prev => {
const state = prev.filter(item => item.id !== lookup.id);
return state.length === 0 ? null : state;
});
if (allowMultiSelect) setResults(prev => [...prev, lookup]);
if (inpuRef?.current?.value) inpuRef.current.value = '';
}, [allowMultiSelect]);
const onAddClick = (0, _react.useCallback)(() => {
resolve(selected);
setSelected(null);
unmount();
}, [resolve, selected, unmount]);
const lookForRecords = (0, _react.useMemo)(() => {
if (lookupOptions.entityTypes.length > 1) {
return 'Look for records';
}
const metadata = db.getTableMetadata(lookupOptions.entityTypes[0]);
return 'Look for ' + (metadata?.DisplayCollectionName || metadata?.DisplayName || metadata?.LogicalName);
}, [db, lookupOptions.entityTypes]);
const entityTypesFilter = (0, _react.useMemo)(() => {
const metadata = db.getTableMetadata(lookupOptions.entityTypes[0]);
// return 'Look for ' + (metadata.DisplayCollectionName || metadata.DisplayName || metadata.LogicalName);
return lookupOptions.entityTypes.length === 1 ? /*#__PURE__*/_react.default.createElement(_SingleEntityFilter.default, {
entity: metadata?.DisplayName || metadata?.LogicalName
}) : /*#__PURE__*/_react.default.createElement(_MultiEntityFilter.default, {
db: db,
entityTypes: lookupOptions.entityTypes,
results: results,
searchByEntityRecords: searchByEntityRecords
});
}, [db, lookupOptions.entityTypes, results, searchByEntityRecords]);
return /*#__PURE__*/_react.default.createElement("div", {
className: "so.fixed so.top-0 so.bottom-0 so.right-0 so.left-0 so.z-50 so.w-full so.bg-opacity-30 so.bg-black so.flex so.justify-end"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "so.flex so.flex-col so.h-full so.box-border so.bg-white so.border-solid so.border-2 so.border-transparent so.overflow-auto so.flex-nowrap so.w-[400px] so.content-start so.outline-none so.text-neutral-800 so.font-sans so.font-normal so.antialiased so.visible"
}, /*#__PURE__*/_react.default.createElement("section", {
className: "so.flex so.flex-col so.flex-1"
}, /*#__PURE__*/_react.default.createElement(_Header.default, {
onCloseClick: onCloseClick
}), /*#__PURE__*/_react.default.createElement("div", {
className: "so.flex so.overflow-visible so.mb-6 so.mx-2 so.mt-4 so.justify-between so.h-full so.flex-col",
role: "presentation"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "so.flex so.w-full",
role: "presentation"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "so.max-w-full so.flex-1 so.flex",
role: "presentation"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "so.flex so.flex-col so.w-full so.border so.border-zinc-100 so.border-solid",
role: "presentation"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "so.flex so.w-full",
role: "presentation"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "so.rounded so.w-full so.bg-gray-100",
role: "presentation"
}, /*#__PURE__*/_react.default.createElement("div", {
"aria-atomic": "true",
role: "status"
}), selected === null && /*#__PURE__*/_react.default.createElement(_SearchLookup.default, {
inputRef: inpuRef,
lookForRecords: lookForRecords,
onSearchClick: OnSearchClick,
searchRecords: searchRecords
}), selected != null && /*#__PURE__*/_react.default.createElement(_SelectedRecord.default, {
allowMultiSelect: allowMultiSelect,
inputRef: inpuRef,
onSearchClick: OnSearchClick,
onUnSelect: onUnSelect,
searchRecords: searchRecords,
selected: selected
}))), /*#__PURE__*/_react.default.createElement("div", {
className: "so.w-full so.flex so.flex-1 so.flex-col",
role: "presentation"
}, results === null && /*#__PURE__*/_react.default.createElement("span", {
className: "so.p-2 so.text-sm so.leading-8 so.cursor-default so.text-neutral-800"
}, "Type to search or press Enter to browse"), results?.length === 0 && /*#__PURE__*/_react.default.createElement("span", {
className: "so.p-2 so.text-sm so.leading-8 so.cursor-default so.text-neutral-800"
}, "No records found. Create a new record."), results?.length > 0 && entityTypesFilter, results?.length > 0 && /*#__PURE__*/_react.default.createElement("ul", {
className: "so.flex-1 so.flex-col so.scroll-auto"
}, results.map(r => /*#__PURE__*/_react.default.createElement("li", {
className: "so.flex",
key: r.id
}, /*#__PURE__*/_react.default.createElement("button", {
className: "so.flex so.flex-1 so.gap-x-1 so.min-h-12 so.items-center so.overflow-hidden so.rounded hover:so.bg-gray-200",
key: r.id,
onClick: () => onSelect(r)
}, /*#__PURE__*/_react.default.createElement("div", {
className: "so.justify-start so.flex so.text-sm so.items-center so.px-1"
}, /*#__PURE__*/_react.default.createElement("img", {
className: "so.h-6 so.w-6",
src: "./favicon.ico"
})), /*#__PURE__*/_react.default.createElement("div", {
className: "so.flex-1 so.truncate so.text-start"
}, r.name)))))))))), /*#__PURE__*/_react.default.createElement(_Footer.default, {
onAddClick: onAddClick,
onCloseClick: onCloseClick
}))));
}
var _default = exports.default = LookupComponent;