phx-react
Version:
PHX REACT
136 lines • 13.2 kB
JavaScript
import { __awaiter, __generator } from "tslib";
import React, { Fragment, useEffect, useState } from 'react';
import { Combobox, Dialog, Transition } from '@headlessui/react';
import { PHXSpinner } from '../../Loading';
import PHXFuncGetLoggedInfo from '../../Func/getLoginInfo';
import { KEY_PROFILE_STUDENT, KEY_PARENT_STUDENT, ROLE_SV, ROLE_TEACHER, KEY_PROFILE_TEACHER, } from '../../../utils/constants';
import { PHXBadge } from '../../Badge';
import PHXUseDebounce from '../../Func/useDebounce';
import PHXClientQueryV3 from '../../Func/clientQueryV3';
import { querySearchGlobalV3 } from '../../../query';
export default function SearchDetail(_a) {
var _this = this;
var open = _a.open, onClose = _a.onClose;
var schoolInfo = PHXFuncGetLoggedInfo();
var schoolId = schoolInfo === null || schoolInfo === void 0 ? void 0 : schoolInfo.school_id;
var _b = useState(''), query = _b[0], setQuery = _b[1];
var handleChange = function (event) {
setQuery(event.target.value);
};
var _c = useState(false), isLoading = _c[0], setIsLoading = _c[1];
var _d = useState(), resultGlobal = _d[0], setResultGlobal = _d[1];
var handleClickResult = function (id, module) {
var _a;
var urlMap = (_a = {},
_a[KEY_PROFILE_STUDENT] = "/user/students/edit/".concat(id),
_a[KEY_PARENT_STUDENT] = "/user/parent/edit/".concat(id),
_a[KEY_PROFILE_TEACHER] = "/user/teacher/edit/".concat(id),
_a);
var url = urlMap[module];
if (url) {
window.location.replace(url);
}
};
var searchDebout = PHXUseDebounce(query, 300);
var handleSearchGlobale = function () { return __awaiter(_this, void 0, void 0, function () {
var response, error_1;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
setIsLoading(true);
_a.label = 1;
case 1:
_a.trys.push([1, 3, , 4]);
return [4 /*yield*/, PHXClientQueryV3({
query: querySearchGlobalV3,
variables: {
school_id: schoolId,
searchValue: query && "".concat(searchDebout)
}
})];
case 2:
response = _a.sent();
if (response.data) {
setResultGlobal(response.data);
setIsLoading(false);
}
return [3 /*break*/, 4];
case 3:
error_1 = _a.sent();
console.log(error_1);
setIsLoading(false);
return [3 /*break*/, 4];
case 4: return [2 /*return*/];
}
});
}); };
useEffect(function () {
if (searchDebout) {
handleSearchGlobale();
}
}, [searchDebout]);
var hasData = resultGlobal && Object.values(resultGlobal).flat().length > 0;
var allArraysEmpty = resultGlobal && Object.values(resultGlobal).every(function (arr) { return arr.length === 0; });
var noDataMessage = query !== '' && (resultGlobal === undefined || allArraysEmpty);
return (React.createElement(Transition.Root, { show: open, as: Fragment, appear: true },
React.createElement(Dialog, { as: 'div', className: 'relative z-50', onClose: onClose },
React.createElement(Transition.Child, { as: Fragment, enter: 'ease-out duration-300', enterFrom: 'opacity-0', enterTo: 'opacity-100', leave: 'ease-in duration-200', leaveFrom: 'opacity-100', leaveTo: 'opacity-0' },
React.createElement("div", { className: 'fixed inset-0 transition-opacity' })),
React.createElement("div", { className: 'fixed inset-0 z-50 pt-1.5 overflow-y-auto sm:block hidden' },
React.createElement(Transition.Child, { as: 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.createElement(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.createElement(Combobox, null,
React.createElement("div", { className: 'flex items-center' },
React.createElement(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: function (event) { return handleChange(event); } }),
isLoading ? (React.createElement("div", { className: 'flex justify-center ml-[-2rem]' },
React.createElement(PHXSpinner, null))) : (React.createElement(React.Fragment, null))),
React.createElement(React.Fragment, null,
query === '' && !hasData && (React.createElement("div", { className: 'px-6 py-14 text-center text-sm sm:px-14' },
React.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.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.createElement("p", { className: 'mt-3' }, "T\u00ECm ki\u1EBFm t\u00EAn ho\u1EB7c m\u00E3 h\u1ECDc sinh"))),
React.createElement(React.Fragment, null,
noDataMessage && (React.createElement("div", { className: 'border-t border-gray-100 px-6 py-14 text-center text-sm sm:px-14' },
React.createElement("p", { className: 'mt-2' }, "Kh\u00F4ng t\u00ECm th\u1EA5y k\u1EBFt qu\u1EA3 n\u00E0o."))),
React.createElement("div", { className: "overflow-y-auto min-h-[10rem] ".concat(hasData ? '' : 'hidden') }, resultGlobal &&
Object.entries(resultGlobal).map(function (_a) {
var key = _a[0], value = _a[1];
return (React.createElement(React.Fragment, null, value.map(function (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;
var keyModule = key;
var 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.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: function () { return handleClickResult(userId, keyModule); } },
React.createElement("div", { className: 'flex flex-col p-2' },
React.createElement("div", { className: 'flex flex-row space-x-2' },
React.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(function (role, index) { return (React.createElement(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) === ROLE_SV ? (React.createElement("p", { className: 'text-xs text-gray-600 mt-1' },
item.user.classroom_students.length > 0
? "L\u1EDBp ".concat((_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) === ROLE_TEACHER ? (React.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(function (student, index) {
var _a, _b, _c, _d;
return (React.createElement(React.Fragment, { key: (_a = student === null || student === void 0 ? void 0 : student.userByStudentId) === null || _a === void 0 ? void 0 : _a.id },
React.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.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(function (student, index) {
var _a, _b, _c, _d;
return (React.createElement(React.Fragment, { key: (_a = student === null || student === void 0 ? void 0 : student.userByStudentId) === null || _a === void 0 ? void 0 : _a.id },
React.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