diff --git a/rsconcept/frontend/src/components/Common/Button.tsx b/rsconcept/frontend/src/components/Common/Button.tsx index ba37c3fa..0308a4a6 100644 --- a/rsconcept/frontend/src/components/Common/Button.tsx +++ b/rsconcept/frontend/src/components/Common/Button.tsx @@ -8,13 +8,15 @@ interface ButtonProps { disabled?: boolean dense?: boolean loading?: boolean + widthClass?: string borderClass?: string + colorClass?: string onClick?: MouseEventHandler | undefined } function Button({id, text, icon, tooltip, dense, disabled, - borderClass='border rounded', + borderClass='border rounded', colorClass='clr-btn-default', widthClass='w-fit h-fit', loading, onClick, ...props }: ButtonProps) { @@ -26,9 +28,7 @@ function Button({id, text, icon, tooltip, disabled={disabled} onClick={onClick} title={tooltip} - className={padding + ' ' + borderClass + ' ' + - 'inline-flex items-center gap-2 align-middle justify-center w-fit h-fit clr-btn-default ' + cursor - } + className={`inline-flex items-center gap-2 align-middle justify-center ${padding} ${borderClass} ${colorClass} ${widthClass} ${cursor}`} {...props} > {icon && {icon}} diff --git a/rsconcept/frontend/src/components/Common/Card.tsx b/rsconcept/frontend/src/components/Common/Card.tsx index 85b96201..33a89608 100644 --- a/rsconcept/frontend/src/components/Common/Card.tsx +++ b/rsconcept/frontend/src/components/Common/Card.tsx @@ -6,7 +6,7 @@ interface CardProps { function Card({title, widthClass='min-w-fit', children}: CardProps) { return ( -
+
{ title &&

{title}

} {children}
diff --git a/rsconcept/frontend/src/components/Common/Modal.tsx b/rsconcept/frontend/src/components/Common/Modal.tsx new file mode 100644 index 00000000..d07b7d8e --- /dev/null +++ b/rsconcept/frontend/src/components/Common/Modal.tsx @@ -0,0 +1,56 @@ +import { useRef } from 'react' +import Button from './Button' +import useClickedOutside from '../../hooks/useClickedOutside' + +interface ModalProps { + title?: string + submitText?: string + show: boolean + canSubmit: boolean + toggle: () => void + onSubmit: () => void + onCancel?: () => void + children: React.ReactNode +} + +function Modal({title, show, toggle, onSubmit, onCancel, canSubmit, children, submitText='Продолжить'}: ModalProps) { + const ref = useRef(null); + useClickedOutside({ref: ref, callback: toggle}) + + if (!show) { + return null; + } + + const handleCancel = () => { + toggle(); + if(onCancel) onCancel(); + }; + + return ( + <> +
+
+
+ { title &&

{title}

} +
+ {children} +
+
+
+
+ + ); +} + +export default Modal; \ No newline at end of file diff --git a/rsconcept/frontend/src/index.css b/rsconcept/frontend/src/index.css index cc7a9f39..4cc42148 100644 --- a/rsconcept/frontend/src/index.css +++ b/rsconcept/frontend/src/index.css @@ -35,6 +35,10 @@ @apply bg-gray-100 dark:bg-gray-600 } + .clr-modal { + @apply bg-gray-300 dark:bg-gray-800 + } + .clr-nav { @apply border-gray-400 dark:border-gray-300 bg-white dark:bg-gray-700 } @@ -43,6 +47,10 @@ @apply text-gray-600 bg-white border-gray-400 dark:bg-gray-700 dark:border-gray-300 dark:text-gray-300 } + .clr-card { + @apply bg-gray-50 dark:bg-gray-600 + } + .clr-tab { @apply text-gray-600 dark:text-zinc-200 hover:bg-gray-300 dark:hover:bg-gray-400 } diff --git a/rsconcept/frontend/src/pages/RSFormPage/ConstituentsSideList.tsx b/rsconcept/frontend/src/pages/RSFormPage/ConstituentsSideList.tsx index 9d01953c..fd5d0f83 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/ConstituentsSideList.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/ConstituentsSideList.tsx @@ -129,6 +129,10 @@ function ConstituentsSideList({expression}: ConstituentsSideListProps) { columns={columns} keyField='id' noContextMenu + noDataComponent={ +

Список конституент пуст

+

Измените параметры фильтра

+
} striped highlightOnHover diff --git a/rsconcept/frontend/src/pages/RSFormPage/ConstituentsTable.tsx b/rsconcept/frontend/src/pages/RSFormPage/ConstituentsTable.tsx index dcc486f5..cecbb4fd 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/ConstituentsTable.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/ConstituentsTable.tsx @@ -7,6 +7,7 @@ import { ArrowDownIcon, ArrowUpIcon, ArrowsRotateIcon, DumpBinIcon, SmallPlusIco import { toast } from 'react-toastify'; import Divider from '../../components/Common/Divider'; import { getCstTypeLabel, getCstTypePrefix, getStatusInfo, getTypeLabel } from '../../utils/staticUI'; +import CreateCstModal from './CreateCstModal'; interface ConstituentsTableProps { onOpenEdit: (cst: IConstituenta) => void @@ -17,6 +18,8 @@ function ConstituentsTable({onOpenEdit}: ConstituentsTableProps) { const [selectedRows, setSelectedRows] = useState([]); const nothingSelected = useMemo(() => selectedRows.length === 0, [selectedRows]); + const [showCstModal, setShowCstModal] = useState(true); + const handleRowSelected = useCallback( ({selectedRows} : SelectionInfo) => { setSelectedRows(selectedRows); @@ -46,7 +49,11 @@ function ConstituentsTable({onOpenEdit}: ConstituentsTableProps) { }, []); const handleAddNew = useCallback((cstType?: CstType) => { - toast.info(`Новая конституента ${cstType || 'NEW'}`); + if (!cstType) { + setShowCstModal(true); + } else { + toast.info(`Новая конституента ${cstType || 'NEW'}`); + } }, []); const columns = useMemo(() => @@ -161,9 +168,14 @@ function ConstituentsTable({onOpenEdit}: ConstituentsTableProps) { ], [] ); - return ( + return (<> + setShowCstModal(!showCstModal)} + onCreate={handleAddNew} + />
-
+
Выбраны {selectedRows.length} из {schema?.stats?.count_all || 0}
{isEditable &&
-); + ); } export default ConstituentsTable; diff --git a/rsconcept/frontend/src/pages/RSFormPage/CreateCstModal.tsx b/rsconcept/frontend/src/pages/RSFormPage/CreateCstModal.tsx new file mode 100644 index 00000000..05c1ebc7 --- /dev/null +++ b/rsconcept/frontend/src/pages/RSFormPage/CreateCstModal.tsx @@ -0,0 +1,33 @@ +import { toast } from 'react-toastify'; +import Modal from '../../components/Common/Modal'; +import { CstType } from '../../utils/models'; +import { useState } from 'react'; + +interface CreateCstModalProps { + show: boolean + toggle: () => void + onCreate: (type: CstType) => void +} + +function CreateCstModal({show, toggle, onCreate}: CreateCstModalProps) { + const [validated, setValidated] = useState(false); + + const handleSubmit = () => { + toast.info('Создание конституент'); + }; + + return ( + +

Выбор типа конституенты

+

Добавить после выбранной или в конец

+
+ ) +} + +export default CreateCstModal; \ No newline at end of file diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSFormCard.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSFormCard.tsx index 2e2c40f4..7be7c617 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/RSFormCard.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/RSFormCard.tsx @@ -10,8 +10,6 @@ import { CrownIcon, DownloadIcon, DumpBinIcon, SaveIcon, ShareIcon } from '../.. import { useUsers } from '../../context/UsersContext'; import { useNavigate } from 'react-router-dom'; import { toast } from 'react-toastify'; -import fileDownload from 'js-file-download'; -import { AxiosResponse } from 'axios'; import { useAuth } from '../../context/AuthContext'; import { claimOwnershipProc, deleteRSFormProc, downloadRSFormProc, shareCurrentURLProc } from '../../utils/procedures'; diff --git a/rsconcept/frontend/src/pages/RSFormsPage/RSFormsTable.tsx b/rsconcept/frontend/src/pages/RSFormsPage/RSFormsTable.tsx index c685a73a..41979c3a 100644 --- a/rsconcept/frontend/src/pages/RSFormsPage/RSFormsTable.tsx +++ b/rsconcept/frontend/src/pages/RSFormsPage/RSFormsTable.tsx @@ -67,6 +67,12 @@ function RSFormsTable({schemas}: RSFormsTableProps) { striped highlightOnHover pointerOnHover + + noDataComponent={ +

Список схем пуст

+

Измените фильтр

+
} + pagination paginationPerPage={50} paginationRowsPerPageOptions={[10, 20, 30, 50, 100]}