added archive

ilb · Jun 4, 2024 · 97be09c · 97be09c
1 parent 3cd7d13
commit 97be09c
Show file tree

Hide file tree

Showing 6 changed files with 173 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ilb/antd-tables",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "",
   "main": "index.js",
   "type": "module",
@@ -10,11 +10,11 @@
   "author": "ssortia",
   "license": "MIT",
   "dependencies": {
-    "@ant-design/icons": "^4.7.0",
+    "@ant-design/icons": "^4.8.3",
     "@ilb/ajvinstance": "^3.0.0",
     "@ilb/antd-toasts": "^1.0.0",
     "@ilb/uniformscomponentsantd": "^1.2.24",
-    "react": "18.2.0",
+    "react": "18.3.1",
     "antd": "^4.21.5",
     "moment": "^2.29.4",
     "uniforms": "^3.10.0-rc.1",

diff --git a/src/components/icons/ArchiveIcon.js b/src/components/icons/ArchiveIcon.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import Icon from '@ant-design/icons';
+
+const ArchiveSvg = () => (
+  <svg color="white" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="16">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path
+      fill="white"
+      d="M20.54 5.23l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27zM12 17.5L6.5 12H10v-2h4v2h3.5L12 17.5zM5.12 5l.81-1h12l.94 1H5.12z"
+    />
+  </svg>
+);
+const ArchiveIcon = (props) => <Icon component={ArchiveSvg} {...props} />;
+
+export default ArchiveIcon;
diff --git a/src/components/icons/RestoreIcon.js b/src/components/icons/RestoreIcon.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import Icon from '@ant-design/icons';
+
+const RestoreSvg = () => (
+  <svg color="white" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="16">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path
+      fill="white"
+      d="M19 13C16.83 13 14.93 14.16 13.88 15.89C13.28 15.96 12.65 16 12 16C7.58 16 4 14.21 4 12V9C4 11.21 7.58 13 12 13S20 11.21 20 9V12C20 12.36 19.9 12.71 19.72 13.05C19.5 13 19.24 13 19 13M12 11C16.42 11 20 9.21 20 7S16.42 3 12 3 4 4.79 4 7 7.58 11 12 11M13.1 17.96C12.74 18 12.37 18 12 18C7.58 18 4 16.21 4 14V17C4 19.21 7.58 21 12 21C12.46 21 12.9 21 13.33 20.94C13.12 20.33 13 19.68 13 19C13 18.64 13.04 18.3 13.1 17.96M19 15L16 18H18V22H20V18H22L19 15Z"
+    />
+  </svg>
+);
+const RestoreIcon = (props) => <Icon component={RestoreSvg} {...props} />;
+
+export default RestoreIcon;
diff --git a/src/components/other/IsArchiveToggle.mjs b/src/components/other/IsArchiveToggle.mjs
@@ -0,0 +1,41 @@
+import { Button } from "antd";
+import RestoreIcon from "../icons/RestoreIcon.js";
+import ArchiveIcon from "../icons/ArchiveIcon.js";
+
+/**
+ * @param record
+ * @param onRestore
+ * @param onArchive
+ * @param props
+ * @constructor
+ */
+export default function IsArchiveToggle({ isArchive, onRestore, onArchive, ...props }) {
+  const IconComponent = ({ type, handler }) => {
+    let icon = "Тут могла быть ваша реклама.";
+
+    if (type === "restore") {
+      icon = <RestoreIcon />;
+    }
+
+    if (type === "archive") {
+      icon = <ArchiveIcon />;
+    }
+
+    return (
+      <Button
+        className={`archive-button archive-${type}-button`}
+        size="small"
+        onClick={handler}
+        type="primary"
+        shape="circle"
+        icon={icon}
+      />
+    );
+  };
+
+  return (
+    <span {...props}>
+      <IconComponent type={isArchive ? "restore" : "archive"} handler={isArchive ? onRestore : onArchive} />
+    </span>
+  );
+}
diff --git a/src/components/tables/SimpleEditableTable.js b/src/components/tables/SimpleEditableTable.js
@@ -6,12 +6,14 @@ import schemaAdapter from "../../schemaAdapter.js";
 import DefaultModal from "../modals/DefaultModal.js";
 import SimpleTitle from "../titles/SimpleTitle.js";
 import Access from "../Access.js";
+import IsArchiveToggle from "../other/IsArchiveToggle.mjs";
 
 /**
  * @param {object} - Объект с опциями.
  * @param {object} schema - Схема формы.
  * @param {boolean} config.withId - Флаг включения идентификатора в таблицу
  * @param {boolean} config.title - Текст заголовка таблицы.
+ * @param {boolean} config.archivable - Флаг, указывающий, что записи могут быть архивными.
  * @param {*} resource - Ресурс.
  * @param {*} [modalComponent=null] - Компонент модального окна
  */
@@ -67,29 +69,55 @@ const SimpleEditableTable = ({
     }
   };
 
+  const successCallback = () => {
+    Toast.success();
+    refresh();
+    return true;
+  }
+
+  const errorCallback = (err) => {
+    Toast.error(err.message);
+    return false;
+  }
+
+  const hideModal = () => {
+    setOpen(false);
+  }
+
   /**
    * Создание/Редактирование записи
    *
    * @param data
-   * @returns {boolean} - корректно ли отработало сохранение
    */
   const store = (data) => {
-    const successCallback = () => {
-      Toast.success();
-      setOpen(false);
-      refresh();
-      return true;
+    if (editingRecord.id) {
+      return resource.update(editingRecord.id, data).then(successCallback).catch(errorCallback).finally(hideModal)
+    } else {
+      return resource.create(data).then(successCallback).catch(errorCallback).finally(hideModal)
     }
+  };
 
-    const errorCallback = (err) => {
-      Toast.error(err.message);
-      return false;
+  /**
+   *
+   * @param {object} record
+   * @param {int} record.id
+   * @returns {Promise<void>}
+   */
+  const archive = async (record) => {
+    if (confirm(`Отправить "${record.title || record.name}" в архив?`)) {
+      return resource.archive(record.id).then(successCallback).catch(errorCallback);
     }
+  };
 
-    if (editingRecord.id) {
-      return resource.update(editingRecord.id, data).then(successCallback).catch(errorCallback)
-    } else {
-      return resource.create(data).then(successCallback).catch(errorCallback)
+  /**
+   *
+   * @param {object} record
+   * @param {int} record.id
+   * @returns {Promise<*>}
+   */
+  const restore = async (record) => {
+    if (confirm(`Восстановить "${record.title || record.name}" из архива?`)) {
+      return resource.restore(record.id).then(successCallback).catch(errorCallback);
     }
   };
 
@@ -127,7 +155,7 @@ const SimpleEditableTable = ({
       const actionsColumn = {
         title: "Действия",
         width: 100,
-        render: (record) => {
+        render: (_, record) => {
           return (
             <Row justify="end" gutter={[8, 8]}>
               <Access availables={access} needed="update">
@@ -141,6 +169,17 @@ const SimpleEditableTable = ({
                   />
                 </Col>
               </Access>
+              <Access availables={access} needed="delete">
+                <Col>
+                  {config.archivable && (
+                    <IsArchiveToggle
+                      isArchive={record.isArchive}
+                      onRestore={() => restore(record)}
+                      onArchive={() => archive(record)}
+                    />
+                  )}
+                </Col>
+              </Access>
               <Access availables={access} needed="delete">
                 <Col>
                   <Button

diff --git a/src/styles/style.less b/src/styles/style.less
@@ -0,0 +1,46 @@
+.archive-button {
+  vertical-align: bottom;
+}
+
+.archive-archive-button:not(.outlined) {
+  background: #ffba24 !important;
+  border-color: #f4af17 !important;
+}
+
+.archive-archive-button:not(.outlined):hover {
+  background: #f8d383 !important;
+  border-color: #f8c148 !important;
+}
+
+.archive-archive-button.outlined {
+  color: #e9b105;
+  border-color: #e9b105 !important;
+}
+
+.archive-archive-button.outlined:hover, .archive-archive-button.outlined:focus {
+  color: white;
+  background: #e9b105 !important;
+  border-color: #e9b105 !important;
+}
+
+.archive-restore-button {
+  background: #2cb332 !important;
+  border-color: #1baa21 !important;
+}
+
+.archive-restore-button:hover {
+  background: #3bc641 !important;
+  border-color: #3bc641 !important;
+}
+
+.archive-restore-button.outlined {
+  color: #2cb332;
+  border-color: #2cb332 !important;
+  background: white !important;
+}
+
+.archive-restore-button.outlined:hover, .archive-restore-button.outlined:focus {
+  color: white;
+  background: #2cb332 !important;
+  border-color: #2cb332 !important;
+}