Merge pull request #1010 from ita-social-projects/#991-admin-manage-a…

…uto-approval-timing-for-content-moderation #991 [admin] manage auto-approval timing for content moderation
ita-social-projects · Dec 16, 2024 · 15f24eb · 15f24eb
2 parents 52ba739 + fbdddb8
commit 15f24eb
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 22 deletions.
diff --git a/FrontEnd/src/pages/AdminPage/AutoApproveDelay/AutoApproveDelay.jsx b/FrontEnd/src/pages/AdminPage/AutoApproveDelay/AutoApproveDelay.jsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { toast } from 'react-toastify';
 import { Tooltip } from 'antd';
 import useSWR from 'swr';
@@ -12,15 +12,10 @@ const AutoApproveDelay = () => {
         }
     });
     const url = `${process.env.REACT_APP_BASE_API_URL}/api/admin/automoderation/`;
-    const { data, mutate } = useSWR(url, fetcher);
     const [delay, setDelay] = useState('');
     const [error, setError] = useState(null);
-
-    useEffect(() => {
-        if (data && data.auto_moderation_hours) {
-            setDelay(data.auto_moderation_hours);
-        }
-    }, [data]);
+    const { data, mutate } = useSWR(url, fetcher,
+        { onSuccess: (data) => setDelay(data.auto_moderation_hours) });
 
     const handleInputChange = (e) => {
         const value = Number(e.target.value);
@@ -31,22 +26,33 @@ const AutoApproveDelay = () => {
         }
     };
 
+    const handleCancel = () => {
+        setDelay(data?.auto_moderation_hours);
+        setError(null);
+    };
+
     const handleSubmit = () => {
         !error && axios.put(`${process.env.REACT_APP_BASE_API_URL}/api/admin/automoderation/`, { 'auto_moderation_hours': delay })
             .then(() => { toast.success('Зміни успішно застосовано.'); mutate({ ...data, auto_moderation_hours: delay }); })
             .catch(() => toast.error('Не вдалося зберегти зміни, сталася помилка'));
     };
     return (
         <div className={css['autoapprove-section']}>
+            <h3 className={css['autoapprove-section__head']}>Налаштуйте час, після якого зміни будуть автоматично затверджені у разі відсутності дій з боку модератора.</h3>
+            <label htmlFor="autoapprove" className={css['autoapprove_label']}>Час до автоматичного затвердження <br />
+            (години)</label>
             <Tooltip
                 title={'Введіть значення 1-48'}
                 placement="top"
                 pointAtCenter={true}>
-                <input className={css['autoapprove-input']} type="number" step={1} onChange={handleInputChange} value={delay} />
+                <input id="autoapprove" className={css['autoapprove-input']} type="number" step={1} onChange={handleInputChange} value={delay} />
             </Tooltip>
             {error &&
                 <p className={css['error-message']}>{error}</p>}
-            <button className={css['save-button']} onClick={handleSubmit}>Змінити</button>
+            <div className={css['buttons-group']}>
+                <button className={css['button']} onClick={handleSubmit}>Змінити</button>
+                <button className={`${css['button']} ${css['cancel-button']}`} onClick={handleCancel}>Скасувати</button>
+            </div>
         </div>
     );
 

diff --git a/FrontEnd/src/pages/AdminPage/AutoApproveDelay/AutoApproveDelay.module.css b/FrontEnd/src/pages/AdminPage/AutoApproveDelay/AutoApproveDelay.module.css
@@ -5,26 +5,55 @@
     gap: 10px;
 }
 
+.autoapprove-section__head {
+    font-size: 14px;
+    font-weight: normal;
+    margin: 20px 0;
+}
+
+.autoapprove_label {
+    font-size: 14px;
+    margin:  20px 0;
+}
+
+.autoapprove_label::before {
+    content: "*";
+    color: #FA1B1F;
+    padding: 0 2px;
+}
+
 .autoapprove-input {
-    width: 150px;
-    height: 20px;
+    width: 269px;
+    height: 32px;
+    box-sizing: border-box;
+    padding-left: 4px;
+    font-size: 16px;
+    border: 1px solid var(--border-input__admin-panel);
+    border-radius: 2px;
 }
-.save-button {
+
+.autoapprove-input:focus {
+    outline: none;
+}
+
+.buttons-group {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 269px;
+    margin-top: 24px;
+}
+
+.button {
     display: flex;
     padding: 5px 15px;
     justify-content: center;
     align-items: center;
     gap: 10px;
-    width: 150px;
-
+    width: 124px;
     border-radius: 4px;
-    border: 1px solid #1F9A7C;
-    background: #1F9A7C;
-
-    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.04);
-
-    /* Button Text */
-    color: #FFF;
+    background: #B4D27A;
+    color: black;
     text-align: center;
     font-feature-settings: 'calt' off;
     text-decoration: none;
@@ -37,8 +66,14 @@
     cursor: pointer;
 }
 
+.cancel-button {
+   background-color: white;
+   border: 1px solid #B4D27A;
+}
+
 .error-message {
     color: rgb(212, 21, 21);
     font-family: var(--font-main);
     font-size: 14px;
+    max-width: 267px;
 }
diff --git a/FrontEnd/src/pages/CustomThemes/customAdminTheme.js b/FrontEnd/src/pages/CustomThemes/customAdminTheme.js
@@ -23,6 +23,9 @@ const customAdminTheme = {
         colorPrimary: '#1f9a7c'
       }
     },
+    token: {
+      fontFamily: 'Geologica',
+    }
   };
 
 export default customAdminTheme;