Фронтенд для сервиса (#5)

Co-authored-by: gorbenko.pavel <gorbenko.pavel@tansu.kz>
Reviewed-on: http://git.tnsu.kz/gorbenko.pavel/tnsu-approval-route/pulls/5

frontend/src/webparts/approvalAdmin/components/ui/FormModal.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Alert } from './Alert';
+import { Button } from './Button';
+import { Modal } from './Modal';
+import { texts } from '../../texts';
+
+export interface IFormModalProps {
+  title: string;
+  /** Текст ошибки: и валидации формы, и ответа бэкенда. */
+  error?: string;
+  isSaving: boolean;
+  onSubmit: () => void;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+/**
+ * Модальное окно формы: одинаковая обвязка «ошибка сверху, Отмена/Сохранить снизу»
+ * для всех справочников, чтобы экраны описывали только поля.
+ */
+export const FormModal: React.FC<IFormModalProps> = ({ title, error, isSaving, onSubmit, onClose, children }) => (
+  <Modal
+    title={title}
+    onClose={onClose}
+    footer={
+      <>
+        <Button variant="secondary" onClick={onClose} disabled={isSaving}>{texts.common.cancel}</Button>
+        <Button variant="accent" icon="check" onClick={onSubmit} disabled={isSaving}>
+          {isSaving ? texts.common.saving : texts.common.save}
+        </Button>
+      </>
+    }
+  >
+    {error && <Alert kind="err">{error}</Alert>}
+    {children}
+  </Modal>
+);