add clients schedule form

client/src/__locales/en.json

@@ -677,7 +677,7 @@
     "log_and_stats_section_label": "Query log and statistics",
     "ignore_query_log": "Ignore this client in query log",
     "ignore_statistics": "Ignore this client in statistics",
-    "schedule_title": "Schedule off time",
+    "schedule": "Schedule off time",
     "schedule_desc": "Set inactivity periods for blocked services",
     "schedule_invalid_select": "The start time must be before the end time",
     "schedule_select_days": "Select days",

client/src/components/Filters/Services/ScheduleForm/Modal.js

@@ -3,10 +3,11 @@ import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import ReactModal from 'react-modal';
 
-import { Timezone, LOCAL_TIMEZONE_VALUE } from './Timezone';
+import { Timezone } from './Timezone';
 import { TimeSelect } from './TimeSelect';
 import { TimePeriod } from './TimePeriod';
 import { getFullDayName, getShortDayName } from './helpers';
+import { LOCAL_TIMEZONE_VALUE } from '../../../../helpers/constants';
 
 export const DAYS_OF_WEEK = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
 
@@ -195,9 +196,10 @@ export const Modal = ({
                     <div className="modal-footer">
                         <div className="btn-list">
                             <button
-                                type="submit"
+                                type="button"
                                 className="btn btn-success btn-standard"
                                 disabled={days.size === 0 || wrongPeriod}
+                                onClick={onFormSubmit}
                             >
                                 {currentDay ? t('schedule_save') : t('schedule_add')}
                             </button>

client/src/components/Filters/Services/ScheduleForm/TimeSelect.js

@@ -3,8 +3,6 @@ import PropTypes from 'prop-types';
 
 import { getTimeFromMs } from './helpers';
 
-export const LOCAL_TIMEZONE_VALUE = 'Local';
-
 const convertHoursToMs = (value) => value * 60 * 60 * 1000;
 const convertMinutesToMs = (value) => value * 60 * 1000;
 

client/src/components/Filters/Services/ScheduleForm/Timezone.js

@@ -3,7 +3,7 @@ import timezones from 'timezones-list';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 
-export const LOCAL_TIMEZONE_VALUE = 'Local';
+import { LOCAL_TIMEZONE_VALUE } from '../../../../helpers/constants';
 
 export const Timezone = ({
     timezone,

client/src/components/Filters/Services/ScheduleForm/index.js

@@ -1,15 +1,18 @@
 import React, { useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
+import cn from 'classnames';
 
 import { Modal } from './Modal';
 import { getFullDayName, getShortDayName } from './helpers';
+import { LOCAL_TIMEZONE_VALUE } from '../../../../helpers/constants';
 import { TimePeriod } from './TimePeriod';
 import './styles.css';
 
 export const ScheduleForm = ({
     schedule,
     onScheduleSubmit,
+    clientForm,
 }) => {
     const [t] = useTranslation();
     const [modalOpen, setModalOpen] = useState(false);
@@ -19,7 +22,7 @@ export const ScheduleForm = ({
     const onModalClose = () => setModalOpen(false);
 
     const filteredScheduleKeys = useMemo(() => (
-        Object.keys(schedule).filter((v) => v !== 'time_zone')
+        schedule ? Object.keys(schedule).filter((v) => v !== 'time_zone') : []
     ), [schedule]);
 
     const scheduleMap = new Map();
@@ -54,7 +57,7 @@ export const ScheduleForm = ({
     return (
         <div>
             <div className="schedule__current-timezone">
-                {t('schedule_current_timezone', { value: schedule.time_zone })}
+                {t('schedule_current_timezone', { value: schedule?.time_zone || LOCAL_TIMEZONE_VALUE })}
             </div>
 
             <div className="schedule__rows">
@@ -107,7 +110,11 @@ export const ScheduleForm = ({
 
             <button
                 type="button"
-                className="btn btn-success btn-standard"
+                className={cn(
+                    'btn',
+                    { 'btn-outline-success btn-sm': clientForm },
+                    { 'btn-success btn-standard': !clientForm },
+                )}
                 onClick={onAdd}
             >
                 {t('schedule_new')}
@@ -127,6 +134,7 @@ export const ScheduleForm = ({
 };
 
 ScheduleForm.propTypes = {
-    schedule: PropTypes.object.isRequired,
+    schedule: PropTypes.object,
     onScheduleSubmit: PropTypes.func.isRequired,
+    clientForm: PropTypes.bool,
 };

client/src/components/Filters/Services/index.js

@@ -75,7 +75,7 @@ const Services = () => {
             </Card>
 
             <Card
-                title={t('schedule_title')}
+                title={t('schedule')}
                 subtitle={t('schedule_desc')}
                 bodyType="card-body box-body--settings"
             >

client/src/components/Settings/Clients/ClientsTable/ClientsTable.js

@@ -6,15 +6,15 @@ import { Trans, useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import ReactTable from 'react-table';
 
-import { getAllBlockedServices } from '../../../../actions/services';
+import { getAllBlockedServices, getBlockedServices } from '../../../../actions/services';
 import { initSettings } from '../../../../actions';
 import {
     splitByNewLine,
     countClientsStatistics,
     sortIp,
     getService,
 } from '../../../../helpers/helpers';
-import { MODAL_TYPE } from '../../../../helpers/constants';
+import { MODAL_TYPE, LOCAL_TIMEZONE_VALUE } from '../../../../helpers/constants';
 import Card from '../../../ui/Card';
 import CellWrap from '../../../ui/CellWrap';
 import LogsSearchLink from '../../../ui/LogsSearchLink';
@@ -45,6 +45,7 @@ const ClientsTable = ({
 
     useEffect(() => {
         dispatch(getAllBlockedServices());
+        dispatch(getBlockedServices());
         dispatch(initSettings());
     }, []);
 
@@ -112,6 +113,9 @@ const ClientsTable = ({
             tags: [],
             use_global_settings: true,
             use_global_blocked_services: true,
+            blocked_services_schedule: {
+                time_zone: LOCAL_TIMEZONE_VALUE,
+            },
             safe_search: { ...(safesearch || {}) },
         };
     };

client/src/components/Settings/Clients/Form.js

@@ -11,6 +11,7 @@ import Select from 'react-select';
 import i18n from '../../../i18n';
 import Tabs from '../../ui/Tabs';
 import Examples from '../Dns/Upstream/Examples';
+import { ScheduleForm } from '../../Filters/Services/ScheduleForm';
 import { toggleAllServices, trimLinesAndRemoveEmpty, captitalizeWords } from '../../../helpers/helpers';
 import {
     renderInputField,
@@ -137,10 +138,10 @@ let Form = (props) => {
         handleSubmit,
         reset,
         change,
-        pristine,
         submitting,
         useGlobalSettings,
         useGlobalServices,
+        blockedServicesSchedule,
         toggleClientModal,
         processingAdding,
         processingUpdating,
@@ -155,6 +156,10 @@ let Form = (props) => {
 
     const [activeTabLabel, setActiveTabLabel] = useState('settings');
 
+    const handleScheduleSubmit = (values) => {
+        change('blocked_services_schedule', values);
+    };
+
     const tabs = {
         settings: {
             title: 'settings',
@@ -289,6 +294,18 @@ let Form = (props) => {
                 <Examples />
             </div>,
         },
+        schedule: {
+            title: 'schedule',
+            component: (
+                <div className="mb-3">
+                    <ScheduleForm
+                        schedule={blockedServicesSchedule}
+                        onScheduleSubmit={handleScheduleSubmit}
+                        clientForm
+                    />
+                </div>
+            ),
+        },
     };
 
     const activeTab = tabs[activeTabLabel].component;
@@ -355,8 +372,12 @@ let Form = (props) => {
                     </div>
                 </div>
 
-                <Tabs controlClass="form" tabs={tabs} activeTabLabel={activeTabLabel}
-                      setActiveTabLabel={setActiveTabLabel}>
+                <Tabs
+                    controlClass="form"
+                    tabs={tabs}
+                    activeTabLabel={activeTabLabel}
+                    setActiveTabLabel={setActiveTabLabel}
+                >
                     {activeTab}
                 </Tabs>
             </div>
@@ -380,7 +401,6 @@ let Form = (props) => {
                         disabled={
                             submitting
                             || invalid
-                            || pristine
                             || processingAdding
                             || processingUpdating
                         }
@@ -402,6 +422,7 @@ Form.propTypes = {
     toggleClientModal: PropTypes.func.isRequired,
     useGlobalSettings: PropTypes.bool,
     useGlobalServices: PropTypes.bool,
+    blockedServicesSchedule: PropTypes.object,
     t: PropTypes.func.isRequired,
     processingAdding: PropTypes.bool.isRequired,
     processingUpdating: PropTypes.bool.isRequired,
@@ -415,9 +436,11 @@ const selector = formValueSelector(FORM_NAME.CLIENT);
 Form = connect((state) => {
     const useGlobalSettings = selector(state, 'use_global_settings');
     const useGlobalServices = selector(state, 'use_global_blocked_services');
+    const blockedServicesSchedule = selector(state, 'blocked_services_schedule');
     return {
         useGlobalSettings,
         useGlobalServices,
+        blockedServicesSchedule,
     };
 })(Form);
 

client/src/helpers/constants.js

@@ -552,3 +552,5 @@ export const DISABLE_PROTECTION_TIMINGS = {
 };
 
 export const LOCAL_STORAGE_THEME_KEY = 'account_theme';
+
+export const LOCAL_TIMEZONE_VALUE = 'Local';