phx-react
Version:
PHX REACT
64 lines • 3.76 kB
JavaScript
import { useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import { PHXCombobox, PHXFuncGetLoggedInfo, PHXModal, PHXSearchResultListV3 } from '../../../../..';
import React from 'react';
import { searchBookForModalBorrowQuery } from '../query';
export default function ModalAddBookBorrow({ onChange, setShow, show, warehouseId, }) {
const [selectedValues, setSelectedValues] = useState([]);
const [disableSelectBook, setDisableSelectBook] = useState(true);
const userInfo = PHXFuncGetLoggedInfo();
const { register, setValue, watch } = useForm();
const keySearchBook = 'book_name';
const [inputText, setInputText] = useState('');
const [options, setOptions] = useState([]);
const handleSubmit = () => {
onChange(selectedValues);
onHide();
};
function onHide() {
setShow(false);
setDisableSelectBook(true);
setOptions([]);
setInputText('');
setSelectedValues([]);
}
const handleClickSearchItem = (searchItem) => {
var _a, _b;
setInputText((_a = searchItem === null || searchItem === void 0 ? void 0 : searchItem.library_book) === null || _a === void 0 ? void 0 : _a.title);
if (disableSelectBook) {
setDisableSelectBook(false);
}
const { library_book, library_book_images, library_dang_ki_ca_biets } = searchItem;
const image = (_b = library_book_images === null || library_book_images === void 0 ? void 0 : library_book_images[0]) === null || _b === void 0 ? void 0 : _b.url;
const title = library_book === null || library_book === void 0 ? void 0 : library_book.title;
const newOptions = (library_dang_ki_ca_biets || []).map((book) => ({
id: book.id,
title,
image,
code: book.code,
stateId: book.state_id,
}));
setOptions(newOptions);
setSelectedValues([]);
};
useEffect(() => {
if (!watch(keySearchBook)) {
setSelectedValues([]);
}
}, [watch(keySearchBook)]);
return (React.createElement(PHXModal, { disableSubmit: selectedValues.length === 0, inCard: false, onHide: onHide, onSubmit: handleSubmit, primaryActionText: 'Th\u00EAm m\u1EDBi', show: show, title: 'Th\u00EAm s\u00E1ch m\u01B0\u1EE3n' },
React.createElement("div", { className: 'space-y-5' },
React.createElement(PHXSearchResultListV3, { defaultInputText: inputText, filterArray: [{ keyParent: 'library_book', keyChild: 'title' }], getSearchResult: handleClickSearchItem, handleCustomRender: (item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.library_book) === null || _a === void 0 ? void 0 : _a.title; }, isFillInput: true, isUnaccentSearchValue: true, label: 'T\u00EAn s\u00E1ch', name: keySearchBook, placeholder: 'Nh\u1EADp t\u00EAn s\u00E1ch', register: register(keySearchBook), search: searchBookForModalBorrowQuery(userInfo === null || userInfo === void 0 ? void 0 : userInfo.school_id, warehouseId), setValue: setValue }),
React.createElement(PHXCombobox, { defaultValue: selectedValues.map((item) => ({
id: item.id,
name: item.code,
...item,
})), disabled: !watch(keySearchBook) || disableSelectBook, id: 'book_code', label: 'M\u00E3 s\u00E1ch', listOptions: options.map((item) => ({
id: item.id,
name: item.code,
...item,
})), onChange: (values) => {
setSelectedValues(values);
}, optionHeight: 200, placeholder: 'Ch\u1ECDn m\u00E3 s\u00E1ch' }))));
}
//# sourceMappingURL=modal-add-book.js.map