phx-react
Version:
PHX REACT
123 lines • 12.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = SearchDetail;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const react_2 = require("@headlessui/react");
const Loading_1 = require("../../Loading");
const getLoginInfo_1 = tslib_1.__importDefault(require("../../Func/getLoginInfo"));
const constants_1 = require("../../../utils/constants");
const Badge_1 = require("../../Badge");
const useDebounce_1 = tslib_1.__importDefault(require("../../Func/useDebounce"));
const PHXGrpcClientV3_1 = require("../../Func/GRPC/PHXGrpcClientV3");
const query_1 = require("../../../query");
function SearchDetail({ open, onClose }) {
const schoolInfo = (0, getLoginInfo_1.default)();
const schoolId = schoolInfo === null || schoolInfo === void 0 ? void 0 : schoolInfo.school_id;
const [query, setQuery] = (0, react_1.useState)('');
const handleChange = (event) => {
setQuery(event.target.value);
};
const [isLoading, setIsLoading] = (0, react_1.useState)(false);
const [resultGlobal, setResultGlobal] = (0, react_1.useState)();
const handleClickResult = (id, module) => {
const urlMap = {
[constants_1.KEY_PROFILE_STUDENT]: `/user/students/edit/${id}`,
[constants_1.KEY_PARENT_STUDENT]: `/user/parent/edit/${id}`,
[constants_1.KEY_PROFILE_TEACHER]: `/user/teacher/edit/${id}`,
};
const url = urlMap[module];
if (url) {
window.location.replace(url);
}
};
const searchDebout = (0, useDebounce_1.default)(query, 300);
const handleSearchGlobale = async () => {
setIsLoading(true);
try {
const response = await (0, PHXGrpcClientV3_1.PHXClientQueryV3)({
query: query_1.querySearchGlobalV3,
variables: {
school_id: schoolId,
searchValue: query && `${searchDebout}`,
},
});
if (response.data) {
setResultGlobal(response.data);
setIsLoading(false);
}
}
catch (error) {
console.log(error);
setIsLoading(false);
}
};
(0, react_1.useEffect)(() => {
if (searchDebout) {
handleSearchGlobale();
}
}, [searchDebout]);
const hasData = resultGlobal && Object.values(resultGlobal).flat().length > 0;
const allArraysEmpty = resultGlobal && Object.values(resultGlobal).every((arr) => arr.length === 0);
const noDataMessage = query !== '' && (resultGlobal === undefined || allArraysEmpty);
return (react_1.default.createElement(react_2.Transition.Root, { show: open, as: react_1.Fragment, appear: true },
react_1.default.createElement(react_2.Dialog, { as: 'div', className: 'relative z-50', onClose: onClose },
react_1.default.createElement(react_2.Transition.Child, { as: react_1.Fragment, enter: 'ease-out duration-300', enterFrom: 'opacity-0', enterTo: 'opacity-100', leave: 'ease-in duration-200', leaveFrom: 'opacity-100', leaveTo: 'opacity-0' },
react_1.default.createElement("div", { className: 'fixed inset-0 transition-opacity' })),
react_1.default.createElement("div", { className: 'fixed inset-0 z-50 pt-1.5 overflow-y-auto sm:block hidden' },
react_1.default.createElement(react_2.Transition.Child, { as: react_1.Fragment, enter: 'ease-out duration-200', enterFrom: 'opacity-0 scale-95', enterTo: 'opacity-100 scale-100', leave: 'ease-in duration-100', leaveFrom: 'opacity-100 scale-100', leaveTo: 'opacity-0 scale-95' },
react_1.default.createElement(react_2.Dialog.Panel, { className: 'mx-auto p-2 max-w-2xl transform overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all' },
react_1.default.createElement(react_2.Combobox, null,
react_1.default.createElement("div", { className: 'flex items-center' },
react_1.default.createElement(react_2.Combobox.Input, { className: 'relative block w-full rounded-lg border border-gray-500 px-3 py-1.5 text-xs font-normal shadow-sm hover:bg-gray-50 focus:border-gray-500 focus:bg-gray-50 focus:outline-none focus:outline-offset-1 focus:outline-indigo-500 focus:ring-transparent', placeholder: 'T\u00ECm ki\u1EBFm', onChange: (event) => handleChange(event) }),
isLoading ? (react_1.default.createElement("div", { className: 'flex justify-center ml-[-2rem]' },
react_1.default.createElement(Loading_1.PHXSpinner, null))) : (react_1.default.createElement(react_1.default.Fragment, null))),
react_1.default.createElement(react_1.default.Fragment, null,
query === '' && !hasData && (react_1.default.createElement("div", { className: 'px-6 py-14 text-center text-sm sm:px-14' },
react_1.default.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', fill: 'none', viewBox: '0 0 24 24', strokeWidth: '1.5', stroke: 'currentColor', className: 'w-4 h-4 mx-auto' },
react_1.default.createElement("path", { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z' })),
react_1.default.createElement("p", { className: 'mt-3' }, "T\u00ECm ki\u1EBFm t\u00EAn ho\u1EB7c m\u00E3 h\u1ECDc sinh"))),
react_1.default.createElement(react_1.default.Fragment, null,
noDataMessage && (react_1.default.createElement("div", { className: 'border-t border-gray-100 px-6 py-14 text-center text-sm sm:px-14' },
react_1.default.createElement("p", { className: 'mt-2' }, "Kh\u00F4ng t\u00ECm th\u1EA5y k\u1EBFt qu\u1EA3 n\u00E0o."))),
react_1.default.createElement("div", { className: `overflow-y-auto min-h-[10rem] ${hasData ? '' : 'hidden'}` }, resultGlobal &&
Object.entries(resultGlobal).map(([key, value]) => {
return (react_1.default.createElement(react_1.default.Fragment, null, value.map((item) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
const keyModule = key;
const userId = item.id || item.user.id || ((_c = (_b = (_a = item.user) === null || _a === void 0 ? void 0 : _a.relationshipUsersByStudentId) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.user.id);
return (react_1.default.createElement("div", { "aria-hidden": true, key: item.id, className: 'flex items-center gap-x-4 mt-2 hover:bg-gray-100 px-2 cursor-pointer rounded-md', onClick: () => handleClickResult(userId, keyModule) },
react_1.default.createElement("div", { className: 'flex flex-col p-2' },
react_1.default.createElement("div", { className: 'flex flex-row space-x-2' },
react_1.default.createElement("p", { className: 'text-xs' }, item.user.full_name),
((_e = (_d = item === null || item === void 0 ? void 0 : item.user) === null || _d === void 0 ? void 0 : _d.user_roles) === null || _e === void 0 ? void 0 : _e.length) > 0 &&
((_g = (_f = item === null || item === void 0 ? void 0 : item.user) === null || _f === void 0 ? void 0 : _f.user_roles) === null || _g === void 0 ? void 0 : _g.map((role, index) => (react_1.default.createElement(Badge_1.PHXBadge, { key: index, type: 'informational', text: role.role.name }))))),
((_j = (_h = item === null || item === void 0 ? void 0 : item.user) === null || _h === void 0 ? void 0 : _h.user_roles) === null || _j === void 0 ? void 0 : _j[0].role.role_code) === constants_1.ROLE_SV ? (react_1.default.createElement("p", { className: 'text-xs text-gray-600 mt-1' },
item.user.classroom_students.length > 0
? `Lớp ${(_o = (_m = (_l = (_k = item.user.classroom_students) === null || _k === void 0 ? void 0 : _k[0]) === null || _l === void 0 ? void 0 : _l.classroom) === null || _m === void 0 ? void 0 : _m.name) !== null && _o !== void 0 ? _o : ''} -`
: '',
' ', item === null || item === void 0 ? void 0 :
item.user_code)) : ((_q = (_p = item === null || item === void 0 ? void 0 : item.user) === null || _p === void 0 ? void 0 : _p.user_roles) === null || _q === void 0 ? void 0 : _q[0].role.role_code) === constants_1.ROLE_TEACHER ? (react_1.default.createElement("p", { className: 'text-xs text-gray-600 mt-1' }, (_r = item === null || item === void 0 ? void 0 : item.user) === null || _r === void 0 ? void 0 :
_r.email,
" - ", (_s = item === null || item === void 0 ? void 0 : item.user) === null || _s === void 0 ? void 0 :
_s.phone_number,
((_t = item.user) === null || _t === void 0 ? void 0 : _t.relationship_users.length) > 0 ? 'PH học sinh' : '',
' ', (_v = (_u = item.user) === null || _u === void 0 ? void 0 : _u.relationship_users) === null || _v === void 0 ? void 0 :
_v.map((student, index) => {
var _a, _b, _c, _d;
return (react_1.default.createElement(react_1.default.Fragment, { key: (_a = student === null || student === void 0 ? void 0 : student.userByStudentId) === null || _a === void 0 ? void 0 : _a.id },
react_1.default.createElement("span", null, (_b = student === null || student === void 0 ? void 0 : student.userByStudentId) === null || _b === void 0 ? void 0 : _b.full_name),
index < ((_d = (_c = item === null || item === void 0 ? void 0 : item.user) === null || _c === void 0 ? void 0 : _c.relationship_users) === null || _d === void 0 ? void 0 : _d.length) - 1 && ', '));
}))) : (react_1.default.createElement("p", { className: 'text-xs text-gray-600 mt-1' },
((_w = item.user) === null || _w === void 0 ? void 0 : _w.relationship_users.length) > 0 ? 'PH học sinh' : '',
' ', (_y = (_x = item.user) === null || _x === void 0 ? void 0 : _x.relationship_users) === null || _y === void 0 ? void 0 :
_y.map((student, index) => {
var _a, _b, _c, _d;
return (react_1.default.createElement(react_1.default.Fragment, { key: (_a = student === null || student === void 0 ? void 0 : student.userByStudentId) === null || _a === void 0 ? void 0 : _a.id },
react_1.default.createElement("span", null, (_b = student === null || student === void 0 ? void 0 : student.userByStudentId) === null || _b === void 0 ? void 0 : _b.full_name),
index < ((_d = (_c = item === null || item === void 0 ? void 0 : item.user) === null || _c === void 0 ? void 0 : _c.relationship_users) === null || _d === void 0 ? void 0 : _d.length) - 1 && ', '));
}))))));
})));
})))))))))));
}
//# sourceMappingURL=search-bar.js.map