scottk/wlan-cloud-owprov-ui
1
0
Fork 0
mirror of https://github.com/Telecominfraproject/wlan-cloud-owprov-ui.git synced 2025-10-28 17:22:20 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

2.6.57: prettierrrc now has printWidth of 120 instead of 100

Browse Source
This commit is contained in:
Charles
2022-03-16 20:37:50 +00:00
parent de26400390
commit 65ea1c0bab
207 changed files with 746 additions and 3033 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.prettierrc
View File

@@ -1,5 +1,5 @@
{
"printWidth": 100,
"printWidth": 120,
"trailingComma": "all",
"tabWidth": 2,
"semi": true,

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "wlan-cloud-owprov-ui",
"version": "2.6.56",
"version": "2.6.57",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "wlan-cloud-owprov-ui",
"version": "2.6.56",
"version": "2.6.57",
"license": "ISC",
"dependencies": {
"@chakra-ui/icons": "^1.1.1",

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "wlan-cloud-owprov-ui",
"version": "2.6.56",
"version": "2.6.57",
"description": "",
"main": "index.js",
"scripts": {

3
src/App.js
View File

@@ -16,8 +16,7 @@ const queryClient = new QueryClient({
});
const App = () => {
const storageToken =
localStorage.getItem('access_token') ?? sessionStorage.getItem('access_token');
const storageToken = localStorage.getItem('access_token') ?? sessionStorage.getItem('access_token');
return (
<QueryClientProvider client={queryClient}>

10
src/components/Buttons/FileInputButton/index.js
View File

@@ -18,15 +18,7 @@ const defaultProps = {
isStringFile: false,
};
const FileInputButton = ({
value,
setValue,
setFileName,
refreshId,
accept,
isHidden,
isStringFile,
}) => {
const FileInputButton = ({ value, setValue, setFileName, refreshId, accept, isHidden, isStringFile }) => {
const [fileKey, setFileKey] = useState(uuid());
let fileReader;

10
src/components/Buttons/SaveButton/index.js
View File

@@ -22,15 +22,7 @@ const defaultProps = {
dirtyCheck: false,
};
const SaveButton = ({
onClick,
isDisabled,
isLoading,
isCompact,
isDirty,
dirtyCheck,
...props
}) => {
const SaveButton = ({ onClick, isDisabled, isLoading, isCompact, isDirty, dirtyCheck, ...props }) => {
const { t } = useTranslation();
const breakpoint = useBreakpoint();

16
src/components/Buttons/ToggleEditButton/index.js
View File

@@ -21,15 +21,7 @@ const defaultProps = {
isDirty: false,
};
const ToggleEditButton = ({
toggleEdit,
isEditing,
isDirty,
isDisabled,
isLoading,
isCompact,
...props
}) => {
const ToggleEditButton = ({ toggleEdit, isEditing, isDirty, isDisabled, isLoading, isCompact, ...props }) => {
const { t } = useTranslation();
const breakpoint = useBreakpoint();
const { isOpen: showConfirm, onOpen: openConfirm, onClose: closeConfirm } = useDisclosure();
@@ -61,11 +53,7 @@ const ToggleEditButton = ({
>
{isEditing ? t('common.stop_editing') : t('common.edit')}
</Button>
<ConfirmCloseAlert
isOpen={showConfirm}
confirm={closeCancelAndForm}
cancel={closeConfirm}
/>
<ConfirmCloseAlert isOpen={showConfirm} confirm={closeCancelAndForm} cancel={closeConfirm} />
</>
);
}

26
src/components/ColumnPicker/index.js
View File

@@ -2,16 +2,7 @@ import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { v4 as uuid } from 'uuid';
import { useTranslation } from 'react-i18next';
import {
Button,
Checkbox,
IconButton,
Menu,
MenuButton,
MenuItem,
MenuList,
useBreakpoint,
} from '@chakra-ui/react';
import { Button, Checkbox, IconButton, Menu, MenuButton, MenuItem, MenuList, useBreakpoint } from '@chakra-ui/react';
import { useAuth } from 'contexts/AuthProvider';
import { FunnelSimple } from 'phosphor-react';
@@ -34,8 +25,7 @@ const ColumnPicker = ({ preference, columns, hiddenColumns, setHiddenColumns })
const handleColumnClick = (id) => {
let newHidden = [];
if (hiddenColumns.find((hidden) => hidden === id))
newHidden = [...hiddenColumns.filter((hidden) => hidden !== id)];
if (hiddenColumns.find((hidden) => hidden === id)) newHidden = [...hiddenColumns.filter((hidden) => hidden !== id)];
else newHidden = [...hiddenColumns, id];
setPref({ preference, value: newHidden.join(',') });
setHiddenColumns(newHidden);
@@ -52,11 +42,7 @@ const ColumnPicker = ({ preference, columns, hiddenColumns, setHiddenColumns })
<MenuButton as={IconButton} icon={<FunnelSimple />} />
<MenuList>
{columns.map((column) => (
<MenuItem
key={uuid()}
isDisabled={column.alwaysShow}
onClick={() => handleColumnClick(column.id)}
>
<MenuItem key={uuid()} isDisabled={column.alwaysShow} onClick={() => handleColumnClick(column.id)}>
<Checkbox
defaultChecked={!hiddenColumns.find((hidden) => hidden === column.id)}
isDisabled={column.alwaysShow}
@@ -77,11 +63,7 @@ const ColumnPicker = ({ preference, columns, hiddenColumns, setHiddenColumns })
</MenuButton>
<MenuList>
{columns.map((column) => (
<MenuItem
key={uuid()}
isDisabled={column.alwaysShow}
onClick={() => handleColumnClick(column.id)}
>
<MenuItem key={uuid()} isDisabled={column.alwaysShow} onClick={() => handleColumnClick(column.id)}>
<Checkbox
defaultChecked={!hiddenColumns.find((hidden) => hidden === column.id)}
isDisabled={column.alwaysShow}

31
src/components/CreateObjectsForms/LocationPickerCreator/Form.js
View File

@@ -33,39 +33,18 @@ const Form = ({ name }) => {
{ label: 'CORPORATE', value: 'CORPORATE' },
]}
/>
<CreatableSelectField
name={`${name}.phones`}
label={t('contacts.phones')}
placeholder="+1(202)555-0103"
/>
<CreatableSelectField
name={`${name}.mobiles`}
label={t('contacts.mobiles')}
placeholder="+1(202)555-0103"
/>
<CreatableSelectField name={`${name}.phones`} label={t('contacts.phones')} placeholder="+1(202)555-0103" />
<CreatableSelectField name={`${name}.mobiles`} label={t('contacts.mobiles')} placeholder="+1(202)555-0103" />
</SimpleGrid>
<AddressSearchField
placeholder={t('common.address_search_autofill')}
namePrefix={name}
maxWidth="600px"
mb={2}
/>
<AddressSearchField placeholder={t('common.address_search_autofill')} namePrefix={name} maxWidth="600px" mb={2} />
<SimpleGrid minChildWidth="300px" spacing="20px" mb={8}>
<StringField
name={`${name}.addressLineOne`}
label={t('locations.address_line_one')}
isRequired
/>
<StringField name={`${name}.addressLineOne`} label={t('locations.address_line_one')} isRequired />
<StringField name={`${name}.addressLineTwo`} label={t('locations.address_line_two')} />
<StringField name={`${name}.city`} label={t('locations.city')} isRequired />
<StringField name={`${name}.state`} label={t('locations.state')} isRequired />
<StringField name={`${name}.postal`} label={t('locations.postal')} isRequired />
<SelectField
name={`${name}.country`}
label={t('locations.country')}
options={COUNTRY_LIST}
/>
<SelectField name={`${name}.country`} label={t('locations.country')} options={COUNTRY_LIST} />
<StringField name={`${name}.buildingName`} label={t('locations.building_name')} />
<StringField name={`${name}.geoCode`} label={t('locations.geocode')} />
</SimpleGrid>

34
src/components/CreateObjectsForms/LocationPickerCreator/Modal.js
View File

@@ -1,14 +1,6 @@
import React, { useCallback, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import {
CloseButton,
Modal,
ModalBody,
ModalContent,
ModalOverlay,
SimpleGrid,
useDisclosure,
} from '@chakra-ui/react';
import { CloseButton, Modal, ModalBody, ModalContent, ModalOverlay, SimpleGrid, useDisclosure } from '@chakra-ui/react';
import ModalHeader from 'components/ModalHeader';
import SaveButton from 'components/Buttons/SaveButton';
import ConfirmCloseAlert from 'components/ConfirmCloseAlert';
@@ -154,29 +146,13 @@ const LocationPickerCreatorModal = ({ setLocation, reset }) => {
{ label: 'CORPORATE', value: 'CORPORATE' },
]}
/>
<CreatableSelectField
name="phones"
label={t('contacts.phones')}
placeholder="+1(202)555-0103"
/>
<CreatableSelectField
name="mobiles"
label={t('contacts.mobiles')}
placeholder="+1(202)555-0103"
/>
<CreatableSelectField name="phones" label={t('contacts.phones')} placeholder="+1(202)555-0103" />
<CreatableSelectField name="mobiles" label={t('contacts.mobiles')} placeholder="+1(202)555-0103" />
</SimpleGrid>
<AddressSearchField
placeholder={t('common.address_search_autofill')}
maxWidth="600px"
mb={2}
/>
<AddressSearchField placeholder={t('common.address_search_autofill')} maxWidth="600px" mb={2} />
<SimpleGrid minChildWidth="300px" spacing="20px" mb={8}>
<StringField
name="addressLineOne"
label={t('locations.address_line_one')}
isRequired
/>
<StringField name="addressLineOne" label={t('locations.address_line_one')} isRequired />
<StringField name="addressLineTwo" label={t('locations.address_line_two')} />
<StringField name="city" label={t('locations.city')} isRequired />
<StringField name="state" label={t('locations.state')} isRequired />

9
src/components/CreateObjectsForms/LocationPickerCreator/index.js
View File

@@ -24,14 +24,7 @@ const defaultProps = {
venueId: null,
};
const LocationPickerCreator = ({
locationName,
createLocationName,
editing,
isModal,
entityId,
venueId,
}) => {
const LocationPickerCreator = ({ locationName, createLocationName, editing, isModal, entityId, venueId }) => {
const { t } = useTranslation();
const toast = useToast();
const [{ value: location }, , { setValue: setLocation }] = useField(locationName);

12
src/components/CustomFields/CustomNumberAsStringField/FastNumberInput.js
View File

@@ -33,17 +33,7 @@ const defaultProps = {
isDisabled: false,
};
const FastNumberInput = ({
label,
value,
unit,
onChange,
onBlur,
error,
touched,
isRequired,
isDisabled,
}) => (
const FastNumberInput = ({ label, value, unit, onChange, onBlur, error, touched, isRequired, isDisabled }) => (
<FormControl isInvalid={error && touched} isRequired={isRequired} isDisabled={isDisabled}>
<FormLabel ms="4px" fontSize="md" fontWeight="normal">
{label}

27
src/components/CustomFields/DeviceConfigurationsModalField/Modal.js
View File

@@ -39,15 +39,7 @@ const defaultProps = {
isDisabled: false,
};
const DeviceConfigurationsModal = ({
name,
initialValue,
setValue,
errors,
isDisabled,
isRequired,
label,
}) => {
const DeviceConfigurationsModal = ({ name, initialValue, setValue, errors, isDisabled, isRequired, label }) => {
const { t } = useTranslation();
const toast = useToast();
const [localValue, setLocalValue] = useState([]);
@@ -86,10 +78,7 @@ const DeviceConfigurationsModal = ({
const { length } = initialValue;
if (length === 0) return t('entities.add_configurations');
if (length === 1 && configurations)
return (
configurations.find((conf) => conf.id === initialValue[0])?.name ??
`1 ${t('configurations.one')}`
);
return configurations.find((conf) => conf.id === initialValue[0])?.name ?? `1 ${t('configurations.one')}`;
return `${length} ${t('configurations.title')}`;
}, [initialValue, configurations]);
@@ -221,22 +210,14 @@ const DeviceConfigurationsModal = ({
<ModalBody overflowX="auto">
<DataTable
columns={columns(true)}
data={
configurations
? localValue.map((id) => configurations.find((config) => config.id === id))
: []
}
data={configurations ? localValue.map((id) => configurations.find((config) => config.id === id)) : []}
isLoading={isFetching}
obj={t('configurations.title')}
/>
<Box h="100px" />
<DataTable
columns={columns(false)}
data={
configurations?.filter(
(config) => !localValue.find((local) => local === config.id),
) ?? []
}
data={configurations?.filter((config) => !localValue.find((local) => local === config.id)) ?? []}
isLoading={isFetching}
obj={t('configurations.title')}
/>

9
src/components/CustomFields/DeviceConfigurationsModalField/index.js
View File

@@ -17,14 +17,7 @@ const defaultProps = {
isDisabled: false,
};
const DeviceConfigurationsModalField = ({
name,
label,
setFieldValue,
errors,
isDisabled,
isRequired,
}) => {
const DeviceConfigurationsModalField = ({ name, label, setFieldValue, errors, isDisabled, isRequired }) => {
const setValue = (value) => setFieldValue(name, value);
return (

5
src/components/CustomFields/MultiPhoneNumberField/MultiPhoneNumberFieldInput.js
View File

@@ -55,10 +55,7 @@ const MultiPhoneNumberFieldInput = ({
definitionKey,
}) => {
const { t } = useTranslation();
const NoOptionsMessage = useCallback(
() => <h6 className="text-center pt-2">{t('common.type_for_options')}</h6>,
[],
);
const NoOptionsMessage = useCallback(() => <h6 className="text-center pt-2">{t('common.type_for_options')}</h6>, []);
return (
<FormControl isInvalid={error && touched} isRequired={isRequired} hidden={isHidden}>

6
src/components/DataTable/SortIcon.js
View File

@@ -16,11 +16,7 @@ const defaultProps = {
const SortIcon = ({ isSorted, isSortedDesc, canSort }) => {
if (canSort) {
if (isSorted) {
return isSortedDesc ? (
<Icon pt={2} h={5} w={5} as={ArrowDown} />
) : (
<Icon pt={2} h={5} w={5} as={ArrowUp} />
);
return isSortedDesc ? <Icon pt={2} h={5} w={5} as={ArrowDown} /> : <Icon pt={2} h={5} w={5} as={ArrowUp} />;
}
return <Icon pt={2} h={5} w={5} as={Circle} />;
}

23
src/components/DataTable/index.js
View File

@@ -119,8 +119,7 @@ const DataTable = ({
);
useEffect(() => {
if (setPageInfo && pageIndex !== undefined)
setPageInfo({ index: pageIndex, limit: queryPageSize });
if (setPageInfo && pageIndex !== undefined) setPageInfo({ index: pageIndex, limit: queryPageSize });
}, [queryPageSize, pageIndex]);
useEffect(() => {
@@ -133,13 +132,7 @@ const DataTable = ({
// If this is a manual DataTable, with a page index that is higher than 0 and higher than the max possible page, we send to index 0
useEffect(() => {
if (
isManual &&
data &&
isManual &&
pageIndex > 0 &&
Math.ceil(count / queryPageSize) - 1 < pageIndex
) {
if (isManual && data && isManual && pageIndex > 0 && Math.ceil(count / queryPageSize) - 1 < pageIndex) {
gotoPage(0);
setPageInfo({ index: 0, limit: queryPageSize });
}
@@ -239,11 +232,7 @@ const DataTable = ({
/>
</Tooltip>
<Tooltip label={t('table.previous_page')}>
<IconButton
onClick={previousPage}
isDisabled={!canPreviousPage}
icon={<ChevronLeftIcon h={6} w={6} />}
/>
<IconButton onClick={previousPage} isDisabled={!canPreviousPage} icon={<ChevronLeftIcon h={6} w={6} />} />
</Tooltip>
</Flex>
@@ -298,11 +287,7 @@ const DataTable = ({
<Flex>
<Tooltip label={t('table.next_page')}>
<IconButton
onClick={nextPage}
isDisabled={!canNextPage}
icon={<ChevronRightIcon h={6} w={6} />}
/>
<IconButton onClick={nextPage} isDisabled={!canNextPage} icon={<ChevronRightIcon h={6} w={6} />} />
</Tooltip>
<Tooltip label={t('table.last_page')}>
<IconButton

17
src/components/DisplayFields/DisplayStringField.js
View File

@@ -1,14 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import {
Button,
FormControl,
FormLabel,
Input,
InputGroup,
InputRightElement,
useBoolean,
} from '@chakra-ui/react';
import { Button, FormControl, FormLabel, Input, InputGroup, InputRightElement, useBoolean } from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
const propTypes = {
@@ -44,12 +36,7 @@ const DisplayStringField = ({ label, value, isRequired, hideButton }) => {
/>
{hideButton && (
<InputRightElement width="4.5rem">
<Button
h="1.75rem"
size="sm"
onClick={setShow.toggle}
_disabled={{ opacity: 0.8, cursor: 'not-allowed' }}
>
<Button h="1.75rem" size="sm" onClick={setShow.toggle} _disabled={{ opacity: 0.8, cursor: 'not-allowed' }}>
{show ? t('common.hide') : t('common.show')}
</Button>
</InputRightElement>

10
src/components/EntityTable/index.js
View File

@@ -9,17 +9,11 @@ import { Plus, Trash } from 'phosphor-react';
const getEntitiesApi = async (pageInfo) => {
if (Array.isArray(pageInfo)) {
return axiosProv
.get(`entity?withExtendedInfo=true&select=${pageInfo}`)
.then(({ data }) => data);
return axiosProv.get(`entity?withExtendedInfo=true&select=${pageInfo}`).then(({ data }) => data);
}
return axiosProv
.get(
`entity?withExtendedInfo=true&limit=${pageInfo.limit}&offset=${
pageInfo.limit * pageInfo.index
}`,
)
.get(`entity?withExtendedInfo=true&limit=${pageInfo.limit}&offset=${pageInfo.limit * pageInfo.index}`)
.then(({ data }) => data);
};
const getCountApi = async () => axiosProv.get(`entity?countOnly=true`).then(({ data }) => data);

10
src/components/FileInput/index.js
View File

@@ -150,15 +150,7 @@ const FileInput = ({ setValue, refreshId, errors }) => {
{t('certificates.device_macs')}
</FormLabel>
<InputGroup>
<Input
borderRadius="15px"
pt={1}
fontSize="sm"
type="file"
onChange={changeFile}
key={fileKey}
accept=".csv"
/>
<Input borderRadius="15px" pt={1} fontSize="sm" type="file" onChange={changeFile} key={fileKey} accept=".csv" />
<InputRightElement hidden={!result}>
{' '}
<IconButton icon={<CloseIcon />} onClick={resetFile} />

9
src/components/FormFields/AddressSearchField/index.js
View File

@@ -22,19 +22,14 @@ const AddressSearchField = ({ namePrefix, isDisabled, placeholder, isHidden, ...
const onSelect = (v) => {
const city =
v.locality.long_name ??
v.administrative_area_level_3.long_name ??
v.administrative_area_level_2.long_name;
v.locality.long_name ?? v.administrative_area_level_3.long_name ?? v.administrative_area_level_2.long_name;
setFieldValue(
`${namePrefix ? `${namePrefix}.` : ''}addressLineOne`,
`${v.street_number.long_name} ${v.route.long_name}`,
);
setFieldValue(`${namePrefix ? `${namePrefix}.` : ''}city`, city);
setFieldValue(
`${namePrefix ? `${namePrefix}.` : ''}state`,
v.administrative_area_level_1.long_name,
);
setFieldValue(`${namePrefix ? `${namePrefix}.` : ''}state`, v.administrative_area_level_1.long_name);
setFieldValue(`${namePrefix ? `${namePrefix}.` : ''}postal`, v.postal_code.long_name);
setFieldValue(`${namePrefix ? `${namePrefix}.` : ''}country`, v.country.short_name);
setFieldValue(`${namePrefix ? `${namePrefix}.` : ''}geoCode`, JSON.stringify(v.geoCode));

5
src/components/FormFields/ConfigurationFieldExplanation/index.js
View File

@@ -11,10 +11,7 @@ const findDefinition = (definitionKey, CONFIGURATION_DESCRIPTIONS) => {
if (length < 2) return null;
const start = split.slice(0, length - 1);
const end = split[length - 1];
return (
CONFIGURATION_DESCRIPTIONS[start.slice(0, length - 1).join('.')]?.properties[end]
?.description ?? null
);
return CONFIGURATION_DESCRIPTIONS[start.slice(0, length - 1).join('.')]?.properties[end]?.description ?? null;
};
const propTypes = {

5
src/components/FormFields/CreatableSelectField/FastCreatableSelectInput.js
View File

@@ -44,10 +44,7 @@ const FastCreatableSelectInput = ({
placeholder,
}) => {
const { t } = useTranslation();
const NoOptionsMessage = useCallback(
() => <h6 className="text-center pt-2">{t('common.type_for_options')}</h6>,
[],
);
const NoOptionsMessage = useCallback(() => <h6 className="text-center pt-2">{t('common.type_for_options')}</h6>, []);
return (
<FormControl isInvalid={error && touched} isRequired={isRequired} hidden={isHidden}>

12
src/components/FormFields/FileInputFieldModal/FileInputModal.js
View File

@@ -95,12 +95,7 @@ const FileInputModal = ({
return (
<>
<FormControl
isInvalid={error && touched}
isRequired={isRequired}
isDisabled={isDisabled}
hidden={isHidden}
>
<FormControl isInvalid={error && touched} isRequired={isRequired} isDisabled={isDisabled} hidden={isHidden}>
<FormLabel ms="4px" fontSize="md" fontWeight="normal">
{label}
<ConfigurationFieldExplanation definitionKey={definitionKey} />
@@ -126,10 +121,7 @@ const FileInputModal = ({
title={label}
right={
<>
<SaveButton
onClick={saveValue}
isDisabled={tempValue.length === 0 || !test(tempValue)}
/>
<SaveButton onClick={saveValue} isDisabled={tempValue.length === 0 || !test(tempValue)} />
<CloseButton ml={2} onClick={onClose} />
</>
}

6
src/components/FormFields/ListInputModalField/index.js
View File

@@ -130,11 +130,7 @@ const ListInputModalField = ({
h="1.75rem"
size="sm"
onClick={addEntry}
isDisabled={
entry.length === 0 ||
!validation(entry) ||
localValue.find((val) => val === entry)
}
isDisabled={entry.length === 0 || !validation(entry) || localValue.find((val) => val === entry)}
>
{t('crud.add')}
</Button>

32
src/components/FormFields/ObjectArrayFieldModal/index.js
View File

@@ -43,17 +43,7 @@ const defaultProps = {
isHidden: false,
};
const ObjectArrayFieldModal = ({
name,
label,
fields,
schema,
columns,
editing,
isDisabled,
isRequired,
isHidden,
}) => {
const ObjectArrayFieldModal = ({ name, label, fields, schema, columns, editing, isDisabled, isRequired, isHidden }) => {
const { t } = useTranslation();
const [tempValue, setTempValue] = useState([]);
const { isOpen, onOpen, onClose } = useDisclosure();
@@ -96,12 +86,7 @@ const ObjectArrayFieldModal = ({
<Field name={name}>
{({ field, meta: { touched, error } }) => (
<>
<FormControl
isInvalid={error && touched}
isRequired={isRequired}
isDisabled={isDisabled}
hidden={isHidden}
>
<FormControl isInvalid={error && touched} isRequired={isRequired} isDisabled={isDisabled} hidden={isHidden}>
<FormLabel ms="4px" fontSize="md" fontWeight="normal">
{label}
</FormLabel>
@@ -119,11 +104,7 @@ const ObjectArrayFieldModal = ({
title={name}
right={
<>
<SaveButton
onClick={onChange}
hidden={!editing}
isDisabled={tempValue.length === 0}
/>
<SaveButton onClick={onChange} hidden={!editing} isDisabled={tempValue.length === 0} />
<CloseButton ml={2} onClick={onClose} />
</>
}
@@ -150,12 +131,7 @@ const ObjectArrayFieldModal = ({
<Button colorScheme="blue" isDisabled={!isValid} onClick={submitForm}>
{t('crud.add')}
</Button>
<Button
colorScheme="gray"
isDisabled={!isDirty}
ml={2}
onClick={resetForm}
>
<Button colorScheme="gray" isDisabled={!isDirty} ml={2} onClick={resetForm}>
{t('common.reset')}
</Button>
</Box>

7
src/components/FormFields/SelectField/FastSelectInput.js
View File

@@ -50,12 +50,7 @@ const FastSelectInput = ({
w,
definitionKey,
}) => (
<FormControl
isInvalid={error && touched}
isRequired={isRequired}
isDisabled={isDisabled}
hidden={isHidden}
>
<FormControl isInvalid={error && touched} isRequired={isRequired} isDisabled={isDisabled} hidden={isHidden}>
<FormLabel ms="4px" fontSize="md" fontWeight="normal" _disabled={{ opacity: 0.8 }}>
{label} <ConfigurationFieldExplanation definitionKey={definitionKey} />
</FormLabel>

10
src/components/FormFields/SelectWithSearchField/index.js
View File

@@ -23,15 +23,7 @@ const defaultProps = {
isHidden: false,
};
const SelectWithSearchField = ({
options,
name,
isDisabled,
label,
isRequired,
isHidden,
isPortal,
}) => {
const SelectWithSearchField = ({ options, name, isDisabled, label, isRequired, isHidden, isPortal }) => {
const { errors, touched, setFieldValue } = useFormikContext();
const onChange = (ent) => {
setFieldValue(name, ent.value);

10
src/components/FormFields/ToggleField/index.js
View File

@@ -21,15 +21,7 @@ const defaultProps = {
definitionKey: null,
};
const ToggleField = ({
name,
isDisabled,
label,
isRequired,
element,
falseIsUndefined,
definitionKey,
}) => {
const ToggleField = ({ name, isDisabled, label, isRequired, element, falseIsUndefined, definitionKey }) => {
const [{ value }, { touched, error }, { setValue, setTouched }] = useField(name);
const onChange = useCallback((e) => {

3
src/components/LoadingOverlay/index.js
View File

@@ -16,8 +16,7 @@ const LoadingOverlay = ({ isLoading, children }) => {
position: 'absolute',
width: '100%',
height: '100%',
backgroundColor:
colorMode === 'light' ? 'var(--chakra-colors-gray-200)' : 'var(--chakra-colors-gray-900)',
backgroundColor: colorMode === 'light' ? 'var(--chakra-colors-gray-200)' : 'var(--chakra-colors-gray-900)',
zIndex: '1100',
opacity: '0.4',
filter: 'alpha(opacity=40)',

5
src/components/NotesTable/index.js
View File

@@ -38,10 +38,7 @@ const NotesTable = ({ notes, setNotes, isDisabled }) => {
setNewNote('');
};
const memoizedDate = useCallback(
(cell) => <FormattedDate date={cell.row.values.created} key={uuid()} />,
[],
);
const memoizedDate = useCallback((cell) => <FormattedDate date={cell.row.values.created} key={uuid()} />, []);
const columns = useMemo(
() => [

4
src/components/PhoneInput/index.js
View File

@@ -7,9 +7,7 @@ const propTypes = {
field: PropTypes.instanceOf(Object).isRequired,
};
const PhoneInput = ({ editing, field }) => (
<Input borderRadius="15px" type="string" isDisabled={!editing} {...field} />
);
const PhoneInput = ({ editing, field }) => <Input borderRadius="15px" type="string" isDisabled={!editing} {...field} />;
PhoneInput.propTypes = propTypes;

32
src/components/Tables/ConfigurationTable/CreateConfigurationModal/Form.js
View File

@@ -50,15 +50,7 @@ const CreateConfigurationForm = ({
return `ven:${splitEntity[1]}`;
};
const createParameters = ({
name,
description,
note,
deviceTypes,
entity,
rrm,
__CREATE_CONFIG,
}) => ({
const createParameters = ({ name, description, note, deviceTypes, entity, rrm, __CREATE_CONFIG }) => ({
name,
rrm,
deviceTypes,
@@ -127,13 +119,7 @@ const CreateConfigurationForm = ({
{({ errors, touched, setFieldValue }) => (
<>
<SimpleGrid minChildWidth="300px" spacing="20px" mb={6}>
<StringField
name="name"
label={t('common.name')}
errors={errors}
touched={touched}
isRequired
/>
<StringField name="name" label={t('common.name')} errors={errors} touched={touched} isRequired />
<MultiSelectField
name="deviceTypes"
label={t('configurations.device_types')}
@@ -189,20 +175,10 @@ const CreateConfigurationForm = ({
isRequired
w={28}
/>
<StringField
name="description"
label={t('common.description')}
errors={errors}
touched={touched}
/>
<StringField name="description" label={t('common.description')} errors={errors} touched={touched} />
<StringField name="note" label={t('common.note')} errors={errors} touched={touched} />
</SimpleGrid>
<SpecialConfigurationManager
editing
isEnabledByDefault
isOnlySections
onChange={onConfigurationChange}
/>
<SpecialConfigurationManager editing isEnabledByDefault isOnlySections onChange={onConfigurationChange} />
</>
)}
</Formik>

33
src/components/Tables/ConfigurationTable/CreateConfigurationModal/index.js
View File

@@ -1,14 +1,6 @@
import React, { useCallback, useState } from 'react';
import PropTypes from 'prop-types';
import {
Button,
useDisclosure,
Modal,
ModalOverlay,
ModalContent,
ModalBody,
toast,
} from '@chakra-ui/react';
import { Button, useDisclosure, Modal, ModalOverlay, ModalContent, ModalBody, toast } from '@chakra-ui/react';
import { AddIcon } from '@chakra-ui/icons';
import { useTranslation } from 'react-i18next';
import { useMutation } from 'react-query';
@@ -64,8 +56,7 @@ const CreateConfigurationModal = ({ refresh, entityId }) => {
setConfiguration(null);
onOpen();
};
const closeModal = () =>
form.dirty || configuration?.__form?.isDirty ? openConfirm() : onClose();
const closeModal = () => (form.dirty || configuration?.__form?.isDirty ? openConfirm() : onClose());
const closeCancelAndForm = () => {
closeConfirm();
onClose();
@@ -73,13 +64,7 @@ const CreateConfigurationModal = ({ refresh, entityId }) => {
return (
<>
<Button
alignItems="center"
colorScheme="blue"
rightIcon={<AddIcon />}
onClick={openModal}
ml={2}
>
<Button alignItems="center" colorScheme="blue" rightIcon={<AddIcon />} onClick={openModal} ml={2}>
{t('crud.create')}
</Button>
<Modal onClose={closeModal} isOpen={isOpen} size="xl" scrollBehavior="inside">
@@ -92,11 +77,7 @@ const CreateConfigurationModal = ({ refresh, entityId }) => {
<SaveButton
onClick={form.submitForm}
isLoading={form.isSubmitting}
isDisabled={
!form.isValid ||
!form.dirty ||
(configuration !== null && !configuration.__form.isValid)
}
isDisabled={!form.isValid || !form.dirty || (configuration !== null && !configuration.__form.isValid)}
/>
<CloseButton ml={2} onClick={closeModal} />
</>
@@ -115,11 +96,7 @@ const CreateConfigurationModal = ({ refresh, entityId }) => {
/>
</ModalBody>
</ModalContent>
<ConfirmCloseAlert
isOpen={showConfirm}
confirm={closeCancelAndForm}
cancel={closeConfirm}
/>
<ConfirmCloseAlert isOpen={showConfirm} confirm={closeCancelAndForm} cancel={closeConfirm} />
</Modal>
</>
);

5
src/components/Tables/ConfigurationTable/index.js
View File

@@ -17,10 +17,7 @@ const ConfigurationsTable = ({ select, actions }) => {
const toast = useToast();
const { data: configurations, isFetching } = useGetSelectConfigurations({ t, toast, select });
const dateCell = useCallback(
(cell, key) => <FormattedDate date={cell.row.values[key]} key={uuid()} />,
[],
);
const dateCell = useCallback((cell, key) => <FormattedDate date={cell.row.values[key]} key={uuid()} />, []);
const typesCell = useCallback((cell) => cell.row.values.deviceTypes.join(', '), []);
// Columns array. This array contains your table headings and accessors which maps keys from data array

6
src/components/Tables/ContactTable/AssignContactModal/index.js
View File

@@ -210,11 +210,7 @@ const AssignContactModal = ({ entityId, venueId, alreadyClaimed }) => {
</Box>
</ModalBody>
</ModalContent>
<ConfirmCloseAlert
isOpen={showConfirm}
confirm={closeCancelAndForm}
cancel={closeConfirm}
/>
<ConfirmCloseAlert isOpen={showConfirm} confirm={closeCancelAndForm} cancel={closeConfirm} />
</Modal>
</>
);

49
src/components/Tables/ContactTable/CreateContactModal/Form.js
View File

@@ -94,10 +94,8 @@ const CreateContactForm = ({ isOpen, onClose, refresh, formRef, parent }) => {
phones,
description,
accessPIN,
entity:
entity === '' || entity.split(':')[0] !== 'ent' ? undefined : entity.split(':')[1],
venue:
entity === '' || entity.split(':')[0] !== 'ven' ? undefined : entity.split(':')[1],
entity: entity === '' || entity.split(':')[0] !== 'ent' ? undefined : entity.split(':')[1],
venue: entity === '' || entity.split(':')[0] !== 'ven' ? undefined : entity.split(':')[1],
notes: note.length > 0 ? [{ note }] : undefined,
},
{
@@ -142,13 +140,7 @@ const CreateContactForm = ({ isOpen, onClose, refresh, formRef, parent }) => {
{({ errors, touched, setFieldValue }) => (
<Form>
<SimpleGrid minChildWidth="300px" spacing="20px" mb={8}>
<StringField
name="name"
label={t('contacts.visual')}
errors={errors}
touched={touched}
isRequired
/>
<StringField name="name" label={t('contacts.visual')} errors={errors} touched={touched} isRequired />
<SelectField
name="type"
label={t('common.type')}
@@ -207,12 +199,7 @@ const CreateContactForm = ({ isOpen, onClose, refresh, formRef, parent }) => {
{ value: 'Dr.', label: 'Dr.' },
]}
/>
<StringField
name="title"
label={t('contacts.title')}
errors={errors}
touched={touched}
/>
<StringField name="title" label={t('contacts.title')} errors={errors} touched={touched} />
<StringField
name="firstname"
label={t('contacts.first_name')}
@@ -220,24 +207,9 @@ const CreateContactForm = ({ isOpen, onClose, refresh, formRef, parent }) => {
touched={touched}
isRequired
/>
<StringField
name="lastname"
label={t('contacts.last_name')}
errors={errors}
touched={touched}
/>
<StringField
name="initials"
label={t('contacts.initials')}
errors={errors}
touched={touched}
/>
<StringField
name="description"
label={t('common.description')}
errors={errors}
touched={touched}
/>
<StringField name="lastname" label={t('contacts.last_name')} errors={errors} touched={touched} />
<StringField name="initials" label={t('contacts.initials')} errors={errors} touched={touched} />
<StringField name="description" label={t('common.description')} errors={errors} touched={touched} />
<StringField
name="primaryEmail"
label={t('contacts.primary_email')}
@@ -267,12 +239,7 @@ const CreateContactForm = ({ isOpen, onClose, refresh, formRef, parent }) => {
placeholder="+1(202)555-0103"
setFieldValue={setFieldValue}
/>
<StringField
name="accessPIN"
label={t('contacts.access_pin')}
errors={errors}
touched={touched}
/>
<StringField name="accessPIN" label={t('contacts.access_pin')} errors={errors} touched={touched} />
<StringField name="note" label={t('common.note')} errors={errors} touched={touched} />
</SimpleGrid>
</Form>

15
src/components/Tables/ContactTable/CreateContactModal/index.js
View File

@@ -1,13 +1,6 @@
import React, { useCallback, useState } from 'react';
import PropTypes from 'prop-types';
import {
Button,
useDisclosure,
Modal,
ModalOverlay,
ModalContent,
ModalBody,
} from '@chakra-ui/react';
import { Button, useDisclosure, Modal, ModalOverlay, ModalContent, ModalBody } from '@chakra-ui/react';
import { AddIcon } from '@chakra-ui/icons';
import { useTranslation } from 'react-i18next';
import ConfirmCloseAlert from 'components/ConfirmCloseAlert';
@@ -101,11 +94,7 @@ const CreateContactModal = ({ refresh, entityId, isVenue }) => {
/>
</ModalBody>
</ModalContent>
<ConfirmCloseAlert
isOpen={showConfirm}
confirm={closeCancelAndForm}
cancel={closeConfirm}
/>
<ConfirmCloseAlert isOpen={showConfirm} confirm={closeCancelAndForm} cancel={closeConfirm} />
</Modal>
</>
);

4
src/components/Tables/ContactTable/EditContactModal/Form.js
View File

@@ -269,9 +269,7 @@ const EditContactForm = ({ editing, isOpen, onClose, refresh, contact, formRef }
</TabPanel>
<TabPanel>
<Field name="notes">
{({ field }) => (
<NotesTable notes={field.value} setNotes={setFieldValue} isDisabled={!editing} />
)}
{({ field }) => <NotesTable notes={field.value} setNotes={setFieldValue} isDisabled={!editing} />}
</Field>
</TabPanel>
</TabPanels>

5
src/components/Tables/ContactTable/index.js
View File

@@ -26,10 +26,7 @@ const ContactTable = ({ actions, select, ignoredColumns, refreshId, disabledIds
const toast = useToast();
const { data: venues, isFetching, refetch } = useGetSelectContacts({ t, toast, select });
const memoizedDate = useCallback(
(cell, key) => <FormattedDate date={cell.row.values[key]} key={uuid()} />,
[],
);
const memoizedDate = useCallback((cell, key) => <FormattedDate date={cell.row.values[key]} key={uuid()} />, []);
// Columns array. This array contains your table headings and accessors which maps keys from data array
const columns = React.useMemo(() => {

5
src/components/Tables/EntityTable/index.js
View File

@@ -17,10 +17,7 @@ const EntityTable = ({ actions, select }) => {
const toast = useToast();
const { data: entities, isFetching } = useGetSelectEntities({ t, toast, select });
const dateCell = useCallback(
(cell, key) => <FormattedDate date={cell.row.values[key]} key={uuid()} />,
[],
);
const dateCell = useCallback((cell, key) => <FormattedDate date={cell.row.values[key]} key={uuid()} />, []);
// Columns array. This array contains your table headings and accessors which maps keys from data array
const columns = useMemo(() => {

14
src/components/Tables/InventoryTable/AssignTagModal/index.js
View File

@@ -136,13 +136,7 @@ const AssignTagModal = ({ entityId, alreadyClaimedDevices }) => {
return (
<>
<Button
alignItems="center"
colorScheme="blue"
rightIcon={<Lock size={20} />}
onClick={openModal}
ml={2}
>
<Button alignItems="center" colorScheme="blue" rightIcon={<Lock size={20} />} onClick={openModal} ml={2}>
{t('common.claim')}
</Button>
<Modal onClose={closeModal} isOpen={isOpen} size="xl">
@@ -184,11 +178,7 @@ const AssignTagModal = ({ entityId, alreadyClaimedDevices }) => {
</Box>
</ModalBody>
</ModalContent>
<ConfirmCloseAlert
isOpen={showConfirm}
confirm={closeCancelAndForm}
cancel={closeConfirm}
/>
<ConfirmCloseAlert isOpen={showConfirm} confirm={closeCancelAndForm} cancel={closeConfirm} />
</Modal>
</>
);

11
src/components/Tables/InventoryTable/ConfigurationPushModal/index.js
View File

@@ -1,15 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import {
Modal,
ModalOverlay,
ModalContent,
ModalBody,
Alert,
AlertIcon,
Heading,
Box,
} from '@chakra-ui/react';
import { Modal, ModalOverlay, ModalContent, ModalBody, Alert, AlertIcon, Heading, Box } from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
import CloseButton from 'components/Buttons/CloseButton';
import ModalHeader from 'components/ModalHeader';

26
src/components/Tables/InventoryTable/CreateTagModal/Form.js
View File

@@ -54,16 +54,7 @@ const CreateTagForm = ({
return `ven:${splitEntity[1]}`;
};
const createParameters = ({
serialNumber,
name,
description,
note,
deviceType,
devClass,
rrm,
entity,
}) => ({
const createParameters = ({ serialNumber, name, description, note, deviceType, devClass, rrm, entity }) => ({
serialNumber,
name,
rrm,
@@ -152,13 +143,7 @@ const CreateTagForm = ({
touched={touched}
isRequired
/>
<StringField
name="name"
label={t('common.name')}
errors={errors}
touched={touched}
isRequired
/>
<StringField name="name" label={t('common.name')} errors={errors} touched={touched} isRequired />
<SelectField
name="deviceType"
label={t('inventory.device_type')}
@@ -223,12 +208,7 @@ const CreateTagForm = ({
]}
isRequired
/>
<StringField
name="description"
label={t('common.description')}
errors={errors}
touched={touched}
/>
<StringField name="description" label={t('common.description')} errors={errors} touched={touched} />
<StringField name="note" label={t('common.note')} errors={errors} touched={touched} />
</SimpleGrid>
<SpecialConfigurationManager editing onChange={onConfigurationChange} />

15
src/components/Tables/InventoryTable/CreateTagModal/index.js
View File

@@ -64,8 +64,7 @@ const CreateTagModal = ({ refresh, entityId, subId }) => {
setConfiguration(null);
onOpen();
};
const closeModal = () =>
form.dirty || configuration?.__form?.isDirty ? openConfirm() : onClose();
const closeModal = () => (form.dirty || configuration?.__form?.isDirty ? openConfirm() : onClose());
const closeCancelAndForm = () => {
closeConfirm();
onClose();
@@ -84,11 +83,7 @@ const CreateTagModal = ({ refresh, entityId, subId }) => {
<SaveButton
onClick={form.submitForm}
isLoading={form.isSubmitting}
isDisabled={
!form.isValid ||
!form.dirty ||
(configuration !== null && !configuration.__form.isValid)
}
isDisabled={!form.isValid || !form.dirty || (configuration !== null && !configuration.__form.isValid)}
/>
<CloseButton ml={2} onClick={closeModal} />
</>
@@ -109,11 +104,7 @@ const CreateTagModal = ({ refresh, entityId, subId }) => {
/>
</ModalBody>
</ModalContent>
<ConfirmCloseAlert
isOpen={showConfirm}
confirm={closeCancelAndForm}
cancel={closeConfirm}
/>
<ConfirmCloseAlert isOpen={showConfirm} confirm={closeCancelAndForm} cancel={closeConfirm} />
</Modal>
</>
);

11
src/components/Tables/InventoryTable/EditTagModal/ComputedConfigurationDisplay.js
View File

@@ -50,16 +50,9 @@ const ComputedConfigurationDisplay = ({ computedConfig }) => {
{computedConfig.explanation?.map((exp) => (
<AccordionItem key={uuid()}>
<AccordionButton
bg={
exp.action === 'added'
? 'var(--chakra-colors-green-500)'
: 'var(--chakra-colors-red-500)'
}
bg={exp.action === 'added' ? 'var(--chakra-colors-green-500)' : 'var(--chakra-colors-red-500)'}
_hover={{
bg:
exp.action === 'added'
? 'var(--chakra-colors-green-700)'
: 'var(--chakra-colors-red-700)',
bg: exp.action === 'added' ? 'var(--chakra-colors-green-700)' : 'var(--chakra-colors-red-700)',
}}
>
<Center>

4
src/components/Tables/InventoryTable/EditTagModal/ConfigurationPicker.js
View File

@@ -45,9 +45,7 @@ const ConfigurationPicker = ({ tagId, name, isDisabled }) => {
classNamePrefix="chakra-react-select"
menuPortalTarget={document.body}
options={[{ value: '', label: t('common.none') }, ...options]}
value={[{ value: '', label: t('common.none') }, ...options].find(
(opt) => opt.value === value,
)}
value={[{ value: '', label: t('common.none') }, ...options].find((opt) => opt.value === value)}
onChange={onChange}
onBlur={onBlur}
/>

39
src/components/Tables/InventoryTable/EditTagModal/Form.js
View File

@@ -2,16 +2,7 @@ import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import { v4 as uuid } from 'uuid';
import {
useToast,
Tabs,
TabList,
TabPanels,
TabPanel,
Tab,
SimpleGrid,
Textarea,
} from '@chakra-ui/react';
import { useToast, Tabs, TabList, TabPanels, TabPanel, Tab, SimpleGrid, Textarea } from '@chakra-ui/react';
import { Formik, Field, Form } from 'formik';
import NotesTable from 'components/NotesTable';
import StringField from 'components/FormFields/StringField';
@@ -199,23 +190,9 @@ const EditTagForm = ({
<TabPanel>
<Form>
<SimpleGrid minChildWidth="300px" spacing="20px">
<StringField
name="serialNumber"
label={t('inventory.serial_number')}
isDisabled
isRequired
/>
<StringField
name="name"
label={t('common.name')}
isDisabled={!editing}
isRequired
/>
<StringField
name="description"
label={t('common.description')}
isDisabled={!editing}
/>
<StringField name="serialNumber" label={t('inventory.serial_number')} isDisabled isRequired />
<StringField name="name" label={t('common.name')} isDisabled={!editing} isRequired />
<StringField name="description" label={t('common.description')} isDisabled={!editing} />
<SelectField
name="deviceType"
label={t('inventory.device_type')}
@@ -289,15 +266,11 @@ const EditTagForm = ({
</TabPanel>
<TabPanel>
<Field name="notes">
{({ field }) => (
<NotesTable notes={field.value} setNotes={setFieldValue} isDisabled={!editing} />
)}
{({ field }) => <NotesTable notes={field.value} setNotes={setFieldValue} isDisabled={!editing} />}
</Field>
</TabPanel>
<TabPanel>
<Field name="state">
{({ field }) => <Textarea {...field} isDisabled={!editing} />}
</Field>
<Field name="state">{({ field }) => <Textarea {...field} isDisabled={!editing} />}</Field>
</TabPanel>
</TabPanels>
</Tabs>

6
src/components/Tables/InventoryTable/EditTagModal/SpecialConfigurationManager/SpecialConfigurationForm.js
View File

@@ -71,11 +71,7 @@ const SpecialConfigurationForm = ({ editing, configuration, formRef }) => {
isDisabled={!editing}
w={36}
/>
<ToggleField
name="firmwareRCOnly"
label={t('configurations.rc_only')}
isDisabled={!editing}
/>
<ToggleField name="firmwareRCOnly" label={t('configurations.rc_only')} isDisabled={!editing} />
</SimpleGrid>
</Formik>
);

14
src/components/Tables/InventoryTable/EditTagModal/SpecialConfigurationManager/index.js
View File

@@ -45,13 +45,7 @@ const defaultProps = {
isOnlySections: false,
};
const SpecialConfigurationManager = ({
editing,
configId,
onChange,
isEnabledByDefault,
isOnlySections,
}) => {
const SpecialConfigurationManager = ({ editing, configId, onChange, isEnabledByDefault, isOnlySections }) => {
const { t } = useTranslation();
const toast = useToast();
const [sections, setSections] = useState(isEnabledByDefault ? BASE_SECTIONS : null);
@@ -120,11 +114,7 @@ const SpecialConfigurationManager = ({
<Spacer />
<DeleteButton onClick={handleDeleteClick} isDisabled={!editing} />
</Heading>
<SpecialConfigurationForm
editing={editing}
formRef={formRef}
configuration={configuration}
/>
<SpecialConfigurationForm editing={editing} formRef={formRef} configuration={configuration} />
</>
)}
<ConfigurationSectionsCard

9
src/components/Tables/InventoryTable/EditTagModal/index.js
View File

@@ -88,8 +88,7 @@ const EditTagModal = ({ isOpen, onClose, tag, refresh, pushConfig }) => {
const onConfigurationChange = useCallback((conf) => setConfiguration(conf), []);
const closeModal = () =>
form.dirty || configuration?.__form?.isDirty ? openConfirm() : onClose();
const closeModal = () => (form.dirty || configuration?.__form?.isDirty ? openConfirm() : onClose());
const closeCancelAndForm = () => {
closeConfirm();
onClose();
@@ -115,11 +114,7 @@ const EditTagModal = ({ isOpen, onClose, tag, refresh, pushConfig }) => {
<SaveButton
onClick={form.submitForm}
isLoading={form.isSubmitting}
isDisabled={
!editing ||
!form.isValid ||
(configuration !== null && !configuration.__form.isValid)
}
isDisabled={!editing || !form.isValid || (configuration !== null && !configuration.__form.isValid)}
/>
<Tooltip hasArrow label={t('configurations.push_configuration')} placement="top">
<IconButton

21
src/components/Tables/InventoryTable/ImportDeviceCsvModal/ImportDeviceTests/index.js
View File

@@ -52,11 +52,7 @@ const ImportDeviceTests = ({ devicesToTest, setPhase, setDevicesToImport }) => {
return axios
.get(`${axiosProv.defaults.baseURL}/inventory/${device.SerialNumber}`, options)
.then((response) => {
if (
response.data.venue !== '' ||
response.data.entity !== '' ||
response.data.subscriber !== ''
)
if (response.data.venue !== '' || response.data.entity !== '' || response.data.subscriber !== '')
deviceResult.alreadyAssigned = true;
else deviceResult.foundUnassigned = true;
return deviceResult;
@@ -68,14 +64,9 @@ const ImportDeviceTests = ({ devicesToTest, setPhase, setDevicesToImport }) => {
};
const testDevice = (device, alreadyTested) => {
if (
device.SerialNumber === '' ||
device.SerialNumber.length !== 12 ||
!device.SerialNumber.match('^[a-fA-F0-9]+$')
)
if (device.SerialNumber === '' || device.SerialNumber.length !== 12 || !device.SerialNumber.match('^[a-fA-F0-9]+$'))
return t('devices.invalid_serial_number');
if (!deviceTypes.find((devType) => devType === device.DeviceType))
return t('devices.device_type_not_found');
if (!deviceTypes.find((devType) => devType === device.DeviceType)) return t('devices.device_type_not_found');
if (alreadyTested.find((testedDevice) => device.SerialNumber === testedDevice))
return t('devices.duplicate_serial');
return null;
@@ -127,11 +118,7 @@ const ImportDeviceTests = ({ devicesToTest, setPhase, setDevicesToImport }) => {
const newLength = testResult?.newDevices?.length ?? -1;
const unassignedLength = testResult?.foundNotAssigned?.length ?? -1;
const assignedLength = testResult?.foundAssigned?.length ?? -1;
return (
newLength > 0 ||
(unassignedLength > 0 && assignUnassigned) ||
(assignedLength > 0 && reassign)
);
return newLength > 0 || (unassignedLength > 0 && assignUnassigned) || (assignedLength > 0 && reassign);
};
const startImport = () => {

25
src/components/Tables/InventoryTable/ImportDeviceCsvModal/index.js
View File

@@ -94,12 +94,7 @@ const ImportDeviceCsvModal = ({ refresh, deviceClass, parent }) => {
const getButton = () => {
if (breakpoint !== 'base' && breakpoint !== 'sm') {
return (
<Button
ml={2}
colorScheme="blue"
onClick={openModal}
rightIcon={<UploadSimple size={20} />}
>
<Button ml={2} colorScheme="blue" onClick={openModal} rightIcon={<UploadSimple size={20} />}>
{t('devices.import_batch_tags')}
</Button>
);
@@ -107,12 +102,7 @@ const ImportDeviceCsvModal = ({ refresh, deviceClass, parent }) => {
return (
<Tooltip label={t('devices.import_batch_tags')}>
<IconButton
ml={2}
colorScheme="blue"
onClick={openModal}
icon={<UploadSimple size={20} />}
/>
<IconButton ml={2} colorScheme="blue" onClick={openModal} icon={<UploadSimple size={20} />} />
</Tooltip>
);
};
@@ -130,17 +120,10 @@ const ImportDeviceCsvModal = ({ refresh, deviceClass, parent }) => {
<Modal onClose={closeModal} isOpen={isOpen} size="xl">
<ModalOverlay />
<ModalContent maxWidth={{ sm: '600px', md: '700px', lg: '800px', xl: '50%' }}>
<ModalHeader
title={t('devices.import_batch_tags')}
right={<CloseButton ml={2} onClick={closeModal} />}
/>
<ModalHeader title={t('devices.import_batch_tags')} right={<CloseButton ml={2} onClick={closeModal} />} />
<ModalBody>{getPhase()}</ModalBody>
</ModalContent>
<ConfirmCloseAlert
isOpen={showConfirm}
confirm={closeCancelAndForm}
cancel={closeConfirm}
/>
<ConfirmCloseAlert isOpen={showConfirm} confirm={closeCancelAndForm} cancel={closeConfirm} />
</Modal>
</>
);

12
src/components/Tables/InventoryTable/index.js
View File

@@ -57,10 +57,7 @@ const InventoryTable = ({
pageInfo,
tagSelect,
owner,
enabled:
(!isManual && pageInfo !== null) ||
(isManual && tagSelect?.length > 0) ||
(isManual && owner !== null),
enabled: (!isManual && pageInfo !== null) || (isManual && tagSelect?.length > 0) || (isManual && owner !== null),
});
const deviceActions = useCallback(
@@ -77,8 +74,7 @@ const InventoryTable = ({
icon={<Plus size={20} />}
size="sm"
isDisabled={serialsToDisable.find(
(serial) =>
serial === cell.row.values.serialNumber || serial === cell.row.original.id,
(serial) => serial === cell.row.values.serialNumber || serial === cell.row.original.id,
)}
onClick={() => addAction(cell.row.values.serialNumber)}
/>
@@ -91,9 +87,7 @@ const InventoryTable = ({
colorScheme="blue"
icon={<Trash size={20} />}
size="sm"
isDisabled={serialsToDisable.find(
(serial) => serial === cell.row.values.serialNumber,
)}
isDisabled={serialsToDisable.find((serial) => serial === cell.row.values.serialNumber)}
onClick={() => removeAction(cell.row.values.serialNumber)}
/>
</Tooltip>

6
src/components/Tables/LocationTable/AssignLocationModal/index.js
View File

@@ -208,11 +208,7 @@ const AssignLocationModal = ({ entityId, alreadyClaimed }) => {
</Box>
</ModalBody>
</ModalContent>
<ConfirmCloseAlert
isOpen={showConfirm}
confirm={closeCancelAndForm}
cancel={closeConfirm}
/>
<ConfirmCloseAlert isOpen={showConfirm} confirm={closeCancelAndForm} cancel={closeConfirm} />
</Modal>
</>
);

59
src/components/Tables/LocationTable/CreateLocationModal/Form.js
View File

@@ -143,19 +143,8 @@ const CreateLocationForm = ({ isOpen, onClose, refresh, formRef, entityId }) =>
{({ errors, touched, setFieldValue }) => (
<Form>
<SimpleGrid minChildWidth="300px" spacing="20px" mb={8}>
<StringField
name="name"
label={t('common.name')}
errors={errors}
touched={touched}
isRequired
/>
<StringField
name="description"
label={t('common.description')}
errors={errors}
touched={touched}
/>
<StringField name="name" label={t('common.name')} errors={errors} touched={touched} isRequired />
<StringField name="description" label={t('common.description')} errors={errors} touched={touched} />
<SelectWithSearchField
name="entity"
label={t('inventory.parent')}
@@ -204,11 +193,7 @@ const CreateLocationForm = ({ isOpen, onClose, refresh, formRef, entityId }) =>
/>
</SimpleGrid>
<AddressSearchField
placeholder={t('common.address_search_autofill')}
maxWidth="600px"
mb={2}
/>
<AddressSearchField placeholder={t('common.address_search_autofill')} maxWidth="600px" mb={2} />
<SimpleGrid minChildWidth="300px" spacing="20px" mb={8}>
<StringField
name="addressLineOne"
@@ -223,27 +208,9 @@ const CreateLocationForm = ({ isOpen, onClose, refresh, formRef, entityId }) =>
errors={errors}
touched={touched}
/>
<StringField
name="city"
label={t('locations.city')}
errors={errors}
touched={touched}
isRequired
/>
<StringField
name="state"
label={t('locations.state')}
errors={errors}
touched={touched}
isRequired
/>
<StringField
name="postal"
label={t('locations.postal')}
errors={errors}
touched={touched}
isRequired
/>
<StringField name="city" label={t('locations.city')} errors={errors} touched={touched} isRequired />
<StringField name="state" label={t('locations.state')} errors={errors} touched={touched} isRequired />
<StringField name="postal" label={t('locations.postal')} errors={errors} touched={touched} isRequired />
<SelectField
name="country"
label={t('locations.country')}
@@ -251,18 +218,8 @@ const CreateLocationForm = ({ isOpen, onClose, refresh, formRef, entityId }) =>
touched={touched}
options={COUNTRY_LIST}
/>
<StringField
name="buildingName"
label={t('locations.building_name')}
errors={errors}
touched={touched}
/>
<StringField
name="geoCode"
label={t('locations.geocode')}
errors={errors}
touched={touched}
/>
<StringField name="buildingName" label={t('locations.building_name')} errors={errors} touched={touched} />
<StringField name="geoCode" label={t('locations.geocode')} errors={errors} touched={touched} />
<StringField name="note" label={t('common.note')} errors={errors} touched={touched} />
</SimpleGrid>
</Form>

15
src/components/Tables/LocationTable/CreateLocationModal/index.js
View File

@@ -1,13 +1,6 @@
import React, { useCallback, useState } from 'react';
import PropTypes from 'prop-types';
import {
Button,
useDisclosure,
Modal,
ModalOverlay,
ModalContent,
ModalBody,
} from '@chakra-ui/react';
import { Button, useDisclosure, Modal, ModalOverlay, ModalContent, ModalBody } from '@chakra-ui/react';
import { AddIcon } from '@chakra-ui/icons';
import { useTranslation } from 'react-i18next';
import ConfirmCloseAlert from 'components/ConfirmCloseAlert';
@@ -92,11 +85,7 @@ const CreateLocationModal = ({ refresh, entityId }) => {
/>
</ModalBody>
</ModalContent>
<ConfirmCloseAlert
isOpen={showConfirm}
confirm={closeCancelAndForm}
cancel={closeConfirm}
/>
<ConfirmCloseAlert isOpen={showConfirm} confirm={closeCancelAndForm} cancel={closeConfirm} />
</Modal>
</>
);

56
src/components/Tables/LocationTable/EditLocationModal/Form.js
View File

@@ -132,17 +132,8 @@ const EditLocationForm = ({ editing, isOpen, onClose, refresh, location, formRef
<TabPanel>
<Form>
<SimpleGrid minChildWidth="300px" spacing="20px" mb={8}>
<StringField
name="name"
label={t('common.name')}
isRequired
isDisabled={!editing}
/>
<StringField
name="description"
label={t('common.description')}
isDisabled={!editing}
/>
<StringField name="name" label={t('common.name')} isRequired isDisabled={!editing} />
<StringField name="description" label={t('common.description')} isDisabled={!editing} />
<SelectWithSearchField
name="entity"
label={t('inventory.parent')}
@@ -196,53 +187,24 @@ const EditLocationForm = ({ editing, isOpen, onClose, refresh, location, formRef
isRequired
isDisabled={!editing}
/>
<StringField
name="addressLineTwo"
label={t('locations.address_line_two')}
isDisabled={!editing}
/>
<StringField
name="city"
label={t('locations.city')}
isRequired
isDisabled={!editing}
/>
<StringField
name="state"
label={t('locations.state')}
isRequired
isDisabled={!editing}
/>
<StringField
name="postal"
label={t('locations.postal')}
isRequired
isDisabled={!editing}
/>
<StringField name="addressLineTwo" label={t('locations.address_line_two')} isDisabled={!editing} />
<StringField name="city" label={t('locations.city')} isRequired isDisabled={!editing} />
<StringField name="state" label={t('locations.state')} isRequired isDisabled={!editing} />
<StringField name="postal" label={t('locations.postal')} isRequired isDisabled={!editing} />
<SelectField
name="country"
label={t('locations.country')}
options={COUNTRY_LIST}
isDisabled={!editing}
/>
<StringField
name="buildingName"
label={t('locations.building_name')}
isDisabled={!editing}
/>
<StringField
name="geoCode"
label={t('locations.geocode')}
isDisabled={!editing}
/>
<StringField name="buildingName" label={t('locations.building_name')} isDisabled={!editing} />
<StringField name="geoCode" label={t('locations.geocode')} isDisabled={!editing} />
</SimpleGrid>
</Form>
</TabPanel>
<TabPanel>
<Field name="notes">
{({ field }) => (
<NotesTable notes={field.value} setNotes={setFieldValue} isDisabled={!editing} />
)}
{({ field }) => <NotesTable notes={field.value} setNotes={setFieldValue} isDisabled={!editing} />}
</Field>
</TabPanel>
</TabPanels>

5
src/components/Tables/LocationTable/index.js
View File

@@ -25,10 +25,7 @@ const LocationTable = ({ actions, select, refreshId, ignoredColumns, disabledIds
const toast = useToast();
const { data: venues, isFetching, refetch } = useGetSelectLocations({ t, toast, select });
const memoizedDate = useCallback(
(cell, key) => <FormattedDate date={cell.row.values[key]} key={uuid()} />,
[],
);
const memoizedDate = useCallback((cell, key) => <FormattedDate date={cell.row.values[key]} key={uuid()} />, []);
// Columns array. This array contains your table headings and accessors which maps keys from data array
const columns = React.useMemo(() => {

6
src/components/Tables/VenueTable/CreateVenueModal/index.js
View File

@@ -77,11 +77,7 @@ const CreateVenueModal = ({ parentId, entityId, isDisabled }) => {
/>
</ModalBody>
</ModalContent>
<ConfirmCloseAlert
isOpen={showConfirm}
confirm={closeCancelAndForm}
cancel={closeConfirm}
/>
<ConfirmCloseAlert isOpen={showConfirm} confirm={closeCancelAndForm} cancel={closeConfirm} />
</Modal>
</>
);

5
src/components/Tables/VenueTable/index.js
View File

@@ -17,10 +17,7 @@ const VenueTable = ({ actions, select }) => {
const toast = useToast();
const { data: venues, isFetching } = useGetSelectVenues({ t, toast, select });
const memoizedDate = useCallback(
(cell, key) => <FormattedDate date={cell.row.values[key]} key={uuid()} />,
[],
);
const memoizedDate = useCallback((cell, key) => <FormattedDate date={cell.row.values[key]} key={uuid()} />, []);
// Columns array. This array contains your table headings and accessors which maps keys from data array
const columns = React.useMemo(() => {

6
src/components/VerifyNumberModal/index.js
View File

@@ -121,11 +121,7 @@ const VerifyNumberModal = ({ isOpen, cancel, phoneNumber }) => {
<Button ref={cancelRef} onClick={cancel} mr={4}>
{t('common.cancel')}
</Button>
<Button
colorScheme="blue"
isLoading={sendPhoneTest.isLoading}
onClick={handleSendClick}
>
<Button colorScheme="blue" isLoading={sendPhoneTest.isLoading} onClick={handleSendClick}>
{t('account.resend')}
</Button>
</AlertDialogFooter>

13
src/constants/formSchemas.js
View File

@@ -95,8 +95,7 @@ export const CreateCertificateSchema = (t) =>
const splitPort = v.split(':');
if ((splitPort.length === 2 && splitPort[1] < 1) || splitPort[1] > 65535)
return false;
if ((splitPort.length === 2 && splitPort[1] < 1) || splitPort[1] > 65535) return false;
}
return true;
}),
@@ -175,10 +174,7 @@ export const BatchSchema = (t) =>
redirector: Yup.string().required(t('form.required')),
manufacturer: Yup.string().required(t('form.required')),
model: Yup.string().required(t('form.required')),
commonNames: Yup.array()
.of(Yup.string())
.required(t('form.required'))
.min(1, t('batch.need_devices')),
commonNames: Yup.array().of(Yup.string()).required(t('form.required')).min(1, t('batch.need_devices')),
note: Yup.string(),
});
@@ -204,10 +200,7 @@ export const CreateConfigurationSchema = (t) =>
Yup.object().shape({
name: Yup.string().required(t('form.required')),
rrm: Yup.string().required(t('form.required')),
deviceTypes: Yup.array()
.of(Yup.string())
.required(t('form.required'))
.min(1, t('form.required')),
deviceTypes: Yup.array().of(Yup.string()).required(t('form.required')).min(1, t('form.required')),
description: Yup.string(),
entity: Yup.string().required(t('form.required')),
note: Yup.string(),

32
src/contexts/AuthProvider/index.js
View File

@@ -1,15 +1,7 @@
import React, { useState, useMemo, useEffect } from 'react';
import PropTypes from 'prop-types';
import { useMutation, useQuery, useQueryClient } from 'react-query';
import {
axiosAnalytics,
axiosFms,
axiosGw,
axiosOwls,
axiosProv,
axiosSec,
axiosSub,
} from 'utils/axiosInstances';
import { axiosAnalytics, axiosFms, axiosGw, axiosOwls, axiosProv, axiosSec, axiosSub } from 'utils/axiosInstances';
import { useToast } from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
import { useGetEndpoints } from 'hooks/Network/Endpoints';
@@ -23,13 +15,10 @@ const deleteToken = async (currentToken) =>
.then(() => true)
.catch(() => false);
const getAvatar = async (id, cache) =>
axiosSec.get(`avatar/${id}?cache=${cache}`, { responseType: 'arraybuffer' });
const getAvatar = async (id, cache) => axiosSec.get(`avatar/${id}?cache=${cache}`, { responseType: 'arraybuffer' });
const getConfigDescriptions = async (baseUrl) =>
axios
.get(`${baseUrl.split('/api')[0]}/wwwassets/ucentral.schema.pretty.json`)
.then(({ data }) => data.$defs);
axios.get(`${baseUrl.split('/api')[0]}/wwwassets/ucentral.schema.pretty.json`).then(({ data }) => data.$defs);
const getUser = async () => axiosSec.get('oauth2?me=true').then(({ data }) => data);
const getPreferences = async () => axiosSec.get('preferences').then(({ data }) => data);
@@ -105,13 +94,9 @@ export const AuthProvider = ({ token, children }) => {
enabled: !!userId,
},
);
const { data: avatar } = useQuery(
['get-user-avatar', userId, userAvatar],
() => getAvatar(userId, userAvatar),
{
enabled: userAvatar !== '' && userAvatar !== '0',
},
);
const { data: avatar } = useQuery(['get-user-avatar', userId, userAvatar], () => getAvatar(userId, userAvatar), {
enabled: userAvatar !== '' && userAvatar !== '0',
});
const updatePreferences = useMutation((newPrefs) => putPreferences(newPrefs), {
onSuccess: (data) => {
queryClient.setQueryData(['get-preferences', userId], data.data);
@@ -181,10 +166,7 @@ export const AuthProvider = ({ token, children }) => {
() => ({
avatar: avatar?.data
? `data:;base64,${btoa(
new Uint8Array(avatar.data).reduce(
(data, byte) => data + String.fromCharCode(byte),
'',
),
new Uint8Array(avatar.data).reduce((data, byte) => data + String.fromCharCode(byte), ''),
)}`
: '',
refetchUser,

12
src/hooks/Network/Configurations.js
View File

@@ -5,9 +5,7 @@ export const useGetConfigurations = ({ t, toast }) =>
useQuery(
['get-configurations'],
() =>
axiosProv
.get('configurations?withExtendedInfo=true&offset=0, limit=500')
.then(({ data }) => data.configurations),
axiosProv.get('configurations?withExtendedInfo=true&offset=0, limit=500').then(({ data }) => data.configurations),
{
staleTime: 200 * 1000,
onError: (e) => {
@@ -131,10 +129,7 @@ export const useGetConfigurationInUse = ({ t, toast, id, enabled }) =>
export const useGetConfigurationAffected = ({ t, toast, id, enabled }) =>
useQuery(
['get-config-affected', id],
() =>
axiosProv
.get(`/configurations/${id}?computedAffected=true`)
.then(({ data }) => data.affectedDevices),
() => axiosProv.get(`/configurations/${id}?computedAffected=true`).then(({ data }) => data.affectedDevices),
{
enabled,
onError: (e) => {
@@ -154,8 +149,7 @@ export const useGetConfigurationAffected = ({ t, toast, id, enabled }) =>
},
);
export const useDeleteConfiguration = () =>
useMutation((id) => axiosProv.delete(`configurations/${id}`));
export const useDeleteConfiguration = () => useMutation((id) => axiosProv.delete(`configurations/${id}`));
export const useUpdateConfiguration = ({ id }) =>
useMutation((newConf) => axiosProv.put(`configurations/${id}`, newConf));

61
src/hooks/Network/Contacts.js
View File

@@ -2,40 +2,32 @@ import { useMutation, useQuery } from 'react-query';
import { axiosProv } from 'utils/axiosInstances';
export const useGetContactCount = ({ t, toast, enabled }) =>
useQuery(
['get-contact-count'],
() => axiosProv.get('contact?countOnly=true').then(({ data }) => data.count),
{
enabled,
staleTime: 30000,
onError: (e) => {
if (!toast.isActive('contact-count-fetching-error'))
toast({
id: 'contact-count-fetching-error',
title: t('common.error'),
description: t('crud.error_fetching_obj', {
obj: t('contacts.other'),
e: e?.response?.data?.ErrorDescription,
}),
status: 'error',
duration: 5000,
isClosable: true,
position: 'top-right',
});
},
useQuery(['get-contact-count'], () => axiosProv.get('contact?countOnly=true').then(({ data }) => data.count), {
enabled,
staleTime: 30000,
onError: (e) => {
if (!toast.isActive('contact-count-fetching-error'))
toast({
id: 'contact-count-fetching-error',
title: t('common.error'),
description: t('crud.error_fetching_obj', {
obj: t('contacts.other'),
e: e?.response?.data?.ErrorDescription,
}),
status: 'error',
duration: 5000,
isClosable: true,
position: 'top-right',
});
},
);
});
export const useGetContacts = ({ t, toast, pageInfo, enabled, count }) =>
useQuery(
['get-contacts-with-pagination', pageInfo, count],
() =>
axiosProv
.get(
`contact?withExtendedInfo=true&limit=${pageInfo.limit}&offset=${
pageInfo.limit * pageInfo.index
}`,
)
.get(`contact?withExtendedInfo=true&limit=${pageInfo.limit}&offset=${pageInfo.limit * pageInfo.index}`)
.then(({ data }) => data.contacts),
{
keepPreviousData: true,
@@ -65,9 +57,7 @@ export const useGetSelectContacts = ({ t, toast, select }) =>
() =>
select.length === 0
? []
: axiosProv
.get(`contact?withExtendedInfo=true&select=${select}`)
.then(({ data }) => data.contacts),
: axiosProv.get(`contact?withExtendedInfo=true&select=${select}`).then(({ data }) => data.contacts),
{
staleTime: 100 * 1000,
onError: (e) => {
@@ -91,10 +81,7 @@ export const useGetSelectContacts = ({ t, toast, select }) =>
export const useGetAllContacts = ({ t, toast }) =>
useQuery(
['get-all-contacts'],
() =>
axiosProv
.get(`contact?withExtendedInfo=true&limit=500&offset=0`)
.then(({ data }) => data.contacts),
() => axiosProv.get(`contact?withExtendedInfo=true&limit=500&offset=0`).then(({ data }) => data.contacts),
{
staleTime: 1000 * 1000,
onError: (e) => {
@@ -135,11 +122,9 @@ export const useGetContact = ({ t, toast, enabled, id }) =>
},
});
export const useCreateContact = () =>
useMutation((newContact) => axiosProv.post('contact/0', newContact));
export const useCreateContact = () => useMutation((newContact) => axiosProv.post('contact/0', newContact));
export const useUpdateContact = ({ id }) =>
useMutation((newContact) => axiosProv.put(`contact/${id}`, newContact));
export const useUpdateContact = ({ id }) => useMutation((newContact) => axiosProv.put(`contact/${id}`, newContact));
const claimContacts = async (contactIds, entity, venue) => {
const addPromises = contactIds.map(async (id) =>

10
src/hooks/Network/DeviceTypes.js
View File

@@ -2,12 +2,8 @@ import { useQuery } from 'react-query';
import { axiosFms } from 'utils/axiosInstances';
const useGetDeviceTypes = () =>
useQuery(
['get-device-types'],
() => axiosFms.get('/firmwares?deviceSet=true').then(({ data }) => data.deviceTypes),
{
staleTime: Infinity,
},
);
useQuery(['get-device-types'], () => axiosFms.get('/firmwares?deviceSet=true').then(({ data }) => data.deviceTypes), {
staleTime: Infinity,
});
export default useGetDeviceTypes;

36
src/hooks/Network/Endpoints.js
View File

@@ -2,27 +2,23 @@ import { useQuery } from 'react-query';
import { axiosGw, axiosSec } from 'utils/axiosInstances';
export const useGetEndpoints = ({ t, toast, onSuccess }) =>
useQuery(
['get-endpoints'],
() => axiosSec.get('systemEndpoints').then(({ data }) => data.endpoints),
{
enabled: false,
staleTime: Infinity,
onSuccess,
onError: (e) => {
if (!toast.isActive('endpoints-fetching-error'))
toast({
id: 'user-fetching-error',
title: t('common.error'),
description: t('user.error_fetching', { e: e?.response?.data?.ErrorDescription }),
status: 'error',
duration: 5000,
isClosable: true,
position: 'top-right',
});
},
useQuery(['get-endpoints'], () => axiosSec.get('systemEndpoints').then(({ data }) => data.endpoints), {
enabled: false,
staleTime: Infinity,
onSuccess,
onError: (e) => {
if (!toast.isActive('endpoints-fetching-error'))
toast({
id: 'user-fetching-error',
title: t('common.error'),
description: t('user.error_fetching', { e: e?.response?.data?.ErrorDescription }),
status: 'error',
duration: 5000,
isClosable: true,
position: 'top-right',
});
},
);
});
export const useGetGatewayUi = () =>
useQuery(['get-gw-ui'], () => axiosGw.get('system?command=info').then(({ data }) => data.UI), {

50
src/hooks/Network/Entity.js
View File

@@ -4,10 +4,7 @@ import { axiosProv } from 'utils/axiosInstances';
export const useGetEntities = ({ t, toast }) =>
useQuery(
['get-entities'],
() =>
axiosProv
.get('entity?withExtendedInfo=true&offset=0&limit=500')
.then(({ data }) => data.entities),
() => axiosProv.get('entity?withExtendedInfo=true&offset=0&limit=500').then(({ data }) => data.entities),
{
staleTime: 30000,
onError: (e) => {
@@ -34,9 +31,7 @@ export const useGetSelectEntities = ({ t, toast, select }) =>
() =>
select.length === 0
? []
: axiosProv
.get(`entity?withExtendedInfo=true&select=${select}`)
.then(({ data }) => data.entities),
: axiosProv.get(`entity?withExtendedInfo=true&select=${select}`).then(({ data }) => data.entities),
{
staleTime: 100 * 1000,
onError: (e) => {
@@ -58,32 +53,27 @@ export const useGetSelectEntities = ({ t, toast, select }) =>
);
export const useGetEntity = ({ t, toast, id = null }) =>
useQuery(
['get-entity', id],
() => axiosProv.get(`entity/${id}?withExtendedInfo=true`).then(({ data }) => data),
{
enabled: id !== null,
onError: (e) => {
if (!toast.isActive('entity-fetching-error'))
toast({
id: 'subscribers-fetching-error',
title: t('common.error'),
description: t('crud.error_fetching_obj', {
obj: t('entities.one'),
e: e?.response?.data?.ErrorDescription,
}),
status: 'error',
duration: 5000,
isClosable: true,
position: 'top-right',
});
},
useQuery(['get-entity', id], () => axiosProv.get(`entity/${id}?withExtendedInfo=true`).then(({ data }) => data), {
enabled: id !== null,
onError: (e) => {
if (!toast.isActive('entity-fetching-error'))
toast({
id: 'subscribers-fetching-error',
title: t('common.error'),
description: t('crud.error_fetching_obj', {
obj: t('entities.one'),
e: e?.response?.data?.ErrorDescription,
}),
status: 'error',
duration: 5000,
isClosable: true,
position: 'top-right',
});
},
);
});
export const useCreateEntity = () => useMutation((newEnt) => axiosProv.post('entity/0', newEnt));
export const useUpdateEntity = ({ id }) =>
useMutation((newEnt) => axiosProv.put(`entity/${id}`, newEnt));
export const useUpdateEntity = ({ id }) => useMutation((newEnt) => axiosProv.put(`entity/${id}`, newEnt));
export const useDeleteEntity = () => useMutation((id) => axiosProv.delete(`entity/${id}`));

40
src/hooks/Network/EntityTree.js
View File

@@ -2,26 +2,22 @@ import { useQuery } from 'react-query';
import { axiosProv, axiosSec } from 'utils/axiosInstances';
export default ({ t, toast }) =>
useQuery(
['get-entity-tree'],
() => axiosProv.get('entity?getTree=true').then(({ data }) => data),
{
enabled: axiosProv.defaults.baseURL !== axiosSec.defaults.baseURL,
staleTime: 3600 * 1000,
onError: (e) => {
if (!toast.isActive('entity-tree-fetching-error'))
toast({
id: 'subscribers-fetching-error',
title: t('common.error'),
description: t('crud.error_fetching_obj', {
obj: t('entities.tree'),
e: e?.response?.data?.ErrorDescription,
}),
status: 'error',
duration: 5000,
isClosable: true,
position: 'top-right',
});
},
useQuery(['get-entity-tree'], () => axiosProv.get('entity?getTree=true').then(({ data }) => data), {
enabled: axiosProv.defaults.baseURL !== axiosSec.defaults.baseURL,
staleTime: 3600 * 1000,
onError: (e) => {
if (!toast.isActive('entity-tree-fetching-error'))
toast({
id: 'subscribers-fetching-error',
title: t('common.error'),
description: t('crud.error_fetching_obj', {
obj: t('entities.tree'),
e: e?.response?.data?.ErrorDescription,
}),
status: 'error',
duration: 5000,
isClosable: true,
position: 'top-right',
});
},
);
});

19
src/hooks/Network/Inventory.js
View File

@@ -44,9 +44,7 @@ export const useGetInventoryTags = ({
['get-inventory-with-select', tagSelect],
() =>
tagSelect.length > 0
? axiosProv
.get(`inventory?withExtendedInfo=true&select=${tagSelect}`)
.then(({ data }) => data.taglist)
? axiosProv.get(`inventory?withExtendedInfo=true&select=${tagSelect}`).then(({ data }) => data.taglist)
: [],
{
enabled,
@@ -73,10 +71,7 @@ export const useGetInventoryTags = ({
if (owner !== undefined && owner !== null) {
return useQuery(
['get-inventory-with-owner', owner],
() =>
axiosProv
.get(`inventory?serialOnly=true&subscriber=${owner}`)
.then(({ data }) => data.serialNumbers),
() => axiosProv.get(`inventory?serialOnly=true&subscriber=${owner}`).then(({ data }) => data.serialNumbers),
{
enabled,
onError: (e) => {
@@ -158,8 +153,7 @@ export const useGetTag = ({ t, toast, enabled, serialNumber }) =>
export const useGetComputedConfiguration = ({ t, toast, enabled, serialNumber }) =>
useQuery(
['get-tag-computed-configuration', serialNumber],
() =>
axiosProv.get(`inventory/${serialNumber}?config=true&explain=true`).then(({ data }) => data),
() => axiosProv.get(`inventory/${serialNumber}?config=true&explain=true`).then(({ data }) => data),
{
enabled,
onError: (e) => {
@@ -183,8 +177,7 @@ export const useGetComputedConfiguration = ({ t, toast, enabled, serialNumber })
export const usePushConfig = ({ t, toast, onSuccess }) =>
useMutation(
['apply-tag-configuration'],
(serialNumber) =>
axiosProv.get(`inventory/${serialNumber}?applyConfiguration=true`).then(({ data }) => data),
(serialNumber) => axiosProv.get(`inventory/${serialNumber}?applyConfiguration=true`).then(({ data }) => data),
{
onSuccess,
onError: (e) => {
@@ -227,9 +220,7 @@ const claimDevices = async (serialNumbers, entity, isVenue) => {
);
const unassignResults = await Promise.all(unassignPromises);
const unassignErrors = await unassignResults
.filter((res) => res.error)
.map((res) => res.serialNumber);
const unassignErrors = await unassignResults.filter((res) => res.error).map((res) => res.serialNumber);
const claimResults = await Promise.all(addPromises);
const claimErrors = claimResults.filter((res) => res.error).map((res) => res.serialNumber);

67
src/hooks/Network/Locations.js
View File

@@ -2,40 +2,32 @@ import { useMutation, useQuery } from 'react-query';
import { axiosProv } from 'utils/axiosInstances';
export const useGetLocationCount = ({ t, toast, enabled }) =>
useQuery(
['get-location-count'],
() => axiosProv.get('location?countOnly=true').then(({ data }) => data.count),
{
enabled,
staleTime: 30000,
onError: (e) => {
if (!toast.isActive('location-count-fetching-error'))
toast({
id: 'location-count-fetching-error',
title: t('common.error'),
description: t('crud.error_fetching_obj', {
obj: t('locations.other'),
e: e?.response?.data?.ErrorDescription,
}),
status: 'error',
duration: 5000,
isClosable: true,
position: 'top-right',
});
},
useQuery(['get-location-count'], () => axiosProv.get('location?countOnly=true').then(({ data }) => data.count), {
enabled,
staleTime: 30000,
onError: (e) => {
if (!toast.isActive('location-count-fetching-error'))
toast({
id: 'location-count-fetching-error',
title: t('common.error'),
description: t('crud.error_fetching_obj', {
obj: t('locations.other'),
e: e?.response?.data?.ErrorDescription,
}),
status: 'error',
duration: 5000,
isClosable: true,
position: 'top-right',
});
},
);
});
export const useGetLocations = ({ t, toast, pageInfo, enabled, count }) =>
useQuery(
['get-locations-with-pagination', pageInfo, count],
() =>
axiosProv
.get(
`location?withExtendedInfo=true&limit=${pageInfo.limit}&offset=${
pageInfo.limit * pageInfo.index
}`,
)
.get(`location?withExtendedInfo=true&limit=${pageInfo.limit}&offset=${pageInfo.limit * pageInfo.index}`)
.then(({ data }) => data.locations),
{
keepPreviousData: true,
@@ -65,9 +57,7 @@ export const useGetSelectLocations = ({ t, toast, select, enabled = true }) =>
() =>
select.length === 0
? []
: axiosProv
.get(`location?withExtendedInfo=true&select=${select}`)
.then(({ data }) => data.locations),
: axiosProv.get(`location?withExtendedInfo=true&select=${select}`).then(({ data }) => data.locations),
{
enabled,
staleTime: 100 * 1000,
@@ -94,13 +84,7 @@ export const useGetAllLocations = ({ t, toast, venueId }) =>
['get-all-locations', venueId],
() =>
axiosProv
.get(
`${
venueId
? `venue?locationsForVenue=${venueId}`
: 'location?withExtendedInfo=true&limit=500&offset=0'
}`,
)
.get(`${venueId ? `venue?locationsForVenue=${venueId}` : 'location?withExtendedInfo=true&limit=500&offset=0'}`)
.then(({ data }) => data.locations),
{
staleTime: 1000 * 1000,
@@ -142,11 +126,9 @@ export const useGetLocation = ({ t, toast, enabled, id }) =>
},
});
export const useCreateLocation = () =>
useMutation((newLocation) => axiosProv.post('location/0', newLocation));
export const useCreateLocation = () => useMutation((newLocation) => axiosProv.post('location/0', newLocation));
export const useUpdateLocation = ({ id }) =>
useMutation((newLocation) => axiosProv.put(`location/${id}`, newLocation));
export const useUpdateLocation = ({ id }) => useMutation((newLocation) => axiosProv.put(`location/${id}`, newLocation));
const claimLocations = async (locationIds, entity) => {
const addPromises = locationIds.map(async (id) =>
@@ -166,5 +148,4 @@ const claimLocations = async (locationIds, entity) => {
return { claimErrors };
};
export const useClaimLocations = ({ entityId }) =>
useMutation((locationIds) => claimLocations(locationIds, entityId));
export const useClaimLocations = ({ entityId }) => useMutation((locationIds) => claimLocations(locationIds, entityId));

10
src/hooks/Network/Requirements.js
View File

@@ -2,12 +2,8 @@ import { useQuery } from 'react-query';
import { axiosSec } from 'utils/axiosInstances';
const useGetRequirements = () =>
useQuery(
['get-requirements'],
() => axiosSec.post('oauth2?requirements=true', {}).then(({ data }) => data),
{
staleTime: Infinity,
},
);
useQuery(['get-requirements'], () => axiosSec.post('oauth2?requirements=true', {}).then(({ data }) => data), {
staleTime: Infinity,
});
export default useGetRequirements;

86
src/hooks/Network/Resources.js
View File

@@ -2,52 +2,44 @@ import { useMutation, useQuery } from 'react-query';
import { axiosProv } from 'utils/axiosInstances';
export const useGetResourcesCount = ({ t, toast }) =>
useQuery(
['get-resources-count'],
() => axiosProv.get(`variables?countOnly=true`).then(({ data }) => data.count),
{
staleTime: 30000,
onError: (e) => {
if (!toast.isActive('variables-fetching-error'))
toast({
id: 'variables-fetching-error',
title: t('common.error'),
description: t('crud.error_fetching_obj', {
obj: t('resources.title'),
e: e?.response?.data?.ErrorDescription,
}),
status: 'error',
duration: 5000,
isClosable: true,
position: 'top-right',
});
},
useQuery(['get-resources-count'], () => axiosProv.get(`variables?countOnly=true`).then(({ data }) => data.count), {
staleTime: 30000,
onError: (e) => {
if (!toast.isActive('variables-fetching-error'))
toast({
id: 'variables-fetching-error',
title: t('common.error'),
description: t('crud.error_fetching_obj', {
obj: t('resources.title'),
e: e?.response?.data?.ErrorDescription,
}),
status: 'error',
duration: 5000,
isClosable: true,
position: 'top-right',
});
},
);
});
export const useGetAllResources = ({ t, toast }) =>
useQuery(
['get-all-resources'],
() => axiosProv.get(`variables?limit=500`).then(({ data }) => data.variableBlocks),
{
staleTime: 1000 * 1000,
onError: (e) => {
if (!toast.isActive('resource-fetching-error'))
toast({
id: 'resource-fetching-error',
title: t('common.error'),
description: t('crud.error_fetching_obj', {
obj: t('resources.configuration_resource'),
e: e?.response?.data?.ErrorDescription,
}),
status: 'error',
duration: 5000,
isClosable: true,
position: 'top-right',
});
},
useQuery(['get-all-resources'], () => axiosProv.get(`variables?limit=500`).then(({ data }) => data.variableBlocks), {
staleTime: 1000 * 1000,
onError: (e) => {
if (!toast.isActive('resource-fetching-error'))
toast({
id: 'resource-fetching-error',
title: t('common.error'),
description: t('crud.error_fetching_obj', {
obj: t('resources.configuration_resource'),
e: e?.response?.data?.ErrorDescription,
}),
status: 'error',
duration: 5000,
isClosable: true,
position: 'top-right',
});
},
);
});
export const useGetResources = ({ t, toast, pageInfo, select, count }) => {
if (select !== undefined && select !== null) {
@@ -55,9 +47,7 @@ export const useGetResources = ({ t, toast, pageInfo, select, count }) => {
['get-resources-with-select', select],
() =>
select.length > 0
? axiosProv
.get(`variables?withExtendedInfo=true&select=${select}`)
.then(({ data }) => data.variableBlocks)
? axiosProv.get(`variables?withExtendedInfo=true&select=${select}`).then(({ data }) => data.variableBlocks)
: [],
{
keepPreviousData: true,
@@ -136,8 +126,6 @@ export const useGetResource = ({ t, toast, id, enabled }) =>
},
);
export const useCreateResource = () =>
useMutation((newResource) => axiosProv.post('variables/0', newResource));
export const useUpdateResource = (id) =>
useMutation((resource) => axiosProv.put(`variables/${id}`, resource));
export const useCreateResource = () => useMutation((newResource) => axiosProv.post('variables/0', newResource));
export const useUpdateResource = (id) => useMutation((resource) => axiosProv.put(`variables/${id}`, resource));
export const useDeleteResource = () => useMutation((id) => axiosProv.delete(`variables/${id}`, {}));

38
src/hooks/Network/Subscribers.js
View File

@@ -22,25 +22,21 @@ export const useGetSubscribers = ({ t, toast }) =>
});
export const useGetSubscriber = ({ t, toast, id, enabled }) =>
useQuery(
['get-subscriber', id],
() => axiosSec.get(`subuser/${id}?withExtendedInfo=true`).then(({ data }) => data),
{
enabled,
onError: (e) => {
if (!toast.isActive('subscriber-fetching-error'))
toast({
id: 'subscriber-fetching-error',
title: t('common.error'),
description: t('crud.error_fetching_obj', {
obj: t('subscribers.one'),
e: e?.response?.data?.ErrorDescription,
}),
status: 'error',
duration: 5000,
isClosable: true,
position: 'top-right',
});
},
useQuery(['get-subscriber', id], () => axiosSec.get(`subuser/${id}?withExtendedInfo=true`).then(({ data }) => data), {
enabled,
onError: (e) => {
if (!toast.isActive('subscriber-fetching-error'))
toast({
id: 'subscriber-fetching-error',
title: t('common.error'),
description: t('crud.error_fetching_obj', {
obj: t('subscribers.one'),
e: e?.response?.data?.ErrorDescription,
}),
status: 'error',
duration: 5000,
isClosable: true,
position: 'top-right',
});
},
);
});

38
src/hooks/Network/System.js
View File

@@ -1,28 +1,24 @@
import { useQuery } from 'react-query';
export const useGetSystemInfo = ({ t, toast, axiosInstance, name }) =>
useQuery(
['get-system-info', name],
() => axiosInstance.get('/system?command=info').then(({ data }) => data),
{
staleTime: 60000,
onError: (e) => {
if (!toast.isActive('system-fetching-error'))
toast({
id: 'system-fetching-error',
title: t('common.error'),
description: t('crud.error_fetching_obj', {
obj: t('system.title'),
e: e?.response?.data?.ErrorDescription,
}),
status: 'error',
duration: 5000,
isClosable: true,
position: 'top-right',
});
},
useQuery(['get-system-info', name], () => axiosInstance.get('/system?command=info').then(({ data }) => data), {
staleTime: 60000,
onError: (e) => {
if (!toast.isActive('system-fetching-error'))
toast({
id: 'system-fetching-error',
title: t('common.error'),
description: t('crud.error_fetching_obj', {
obj: t('system.title'),
e: e?.response?.data?.ErrorDescription,
}),
status: 'error',
duration: 5000,
isClosable: true,
position: 'top-right',
});
},
);
});
export const useGetSubsystems = ({ t, toast, enabled, axiosInstance, name }) =>
useQuery(

43
src/hooks/Network/Users.js
View File

@@ -21,10 +21,7 @@ export const useGetUsers = ({ t, toast, setUsersWithAvatars }) =>
results.map((response) => {
if (response.status === 'fulfilled' && response?.value !== '') {
const base64 = btoa(
new Uint8Array(response.value.data).reduce(
(respData, byte) => respData + String.fromCharCode(byte),
'',
),
new Uint8Array(response.value.data).reduce((respData, byte) => respData + String.fromCharCode(byte), ''),
);
return `data:;base64,${base64}`;
}
@@ -53,25 +50,21 @@ export const useGetUsers = ({ t, toast, setUsersWithAvatars }) =>
});
export const useGetUser = ({ t, toast, id, enabled }) =>
useQuery(
['get-user', id],
() => axiosSec.get(`user/${id}?withExtendedInfo=true`).then(({ data }) => data),
{
enabled,
onError: (e) => {
if (!toast.isActive('user-fetching-error'))
toast({
id: 'user-fetching-error',
title: t('common.error'),
description: t('crud.error_fetching_obj', {
obj: t('users.one'),
e: e?.response?.data?.ErrorDescription,
}),
status: 'error',
duration: 5000,
isClosable: true,
position: 'top-right',
});
},
useQuery(['get-user', id], () => axiosSec.get(`user/${id}?withExtendedInfo=true`).then(({ data }) => data), {
enabled,
onError: (e) => {
if (!toast.isActive('user-fetching-error'))
toast({
id: 'user-fetching-error',
title: t('common.error'),
description: t('crud.error_fetching_obj', {
obj: t('users.one'),
e: e?.response?.data?.ErrorDescription,
}),
status: 'error',
duration: 5000,
isClosable: true,
position: 'top-right',
});
},
);
});

55
src/hooks/Network/Venues.js
View File

@@ -4,10 +4,7 @@ import { axiosProv } from 'utils/axiosInstances';
export const useGetVenues = ({ t, toast }) =>
useQuery(
['get-venues'],
() =>
axiosProv
.get('venue?withExtendedInfo=true&offset=0&limit=500')
.then(({ data }) => data.venues),
() => axiosProv.get('venue?withExtendedInfo=true&offset=0&limit=500').then(({ data }) => data.venues),
{
staleTime: 30000,
onError: (e) => {
@@ -34,9 +31,7 @@ export const useGetSelectVenues = ({ t, toast, select }) =>
() =>
select.length === 0
? []
: axiosProv
.get(`venue?withExtendedInfo=true&select=${select}`)
.then(({ data }) => data.venues),
: axiosProv.get(`venue?withExtendedInfo=true&select=${select}`).then(({ data }) => data.venues),
{
staleTime: 100 * 1000,
onError: (e) => {
@@ -58,42 +53,32 @@ export const useGetSelectVenues = ({ t, toast, select }) =>
);
export const useGetVenue = ({ t, toast, id }) =>
useQuery(
['get-venue', id],
() => axiosProv.get(`venue/${id}?withExtendedInfo=true`).then(({ data }) => data),
{
onError: (e) => {
if (!toast.isActive('venue-fetching-error'))
toast({
id: 'subscribers-fetching-error',
title: t('common.error'),
description: t('crud.error_fetching_obj', {
obj: t('venues.one'),
e: e?.response?.data?.ErrorDescription,
}),
status: 'error',
duration: 5000,
isClosable: true,
position: 'top-right',
});
},
useQuery(['get-venue', id], () => axiosProv.get(`venue/${id}?withExtendedInfo=true`).then(({ data }) => data), {
onError: (e) => {
if (!toast.isActive('venue-fetching-error'))
toast({
id: 'subscribers-fetching-error',
title: t('common.error'),
description: t('crud.error_fetching_obj', {
obj: t('venues.one'),
e: e?.response?.data?.ErrorDescription,
}),
status: 'error',
duration: 5000,
isClosable: true,
position: 'top-right',
});
},
);
});
export const useCreateVenue = () =>
useMutation(({ params, createObjects }) =>
axiosProv.post(
`venue/0${createObjects ? `?createObjects=${JSON.stringify(createObjects)}` : ''}`,
params,
),
axiosProv.post(`venue/0${createObjects ? `?createObjects=${JSON.stringify(createObjects)}` : ''}`, params),
);
export const useUpdateVenue = ({ id }) =>
useMutation(({ params, createObjects }) =>
axiosProv.put(
`venue/${id}${createObjects ? `?createObjects=${JSON.stringify(createObjects)}` : ''}`,
params,
),
axiosProv.put(`venue/${id}${createObjects ? `?createObjects=${JSON.stringify(createObjects)}` : ''}`, params),
);
export const useDeleteVenue = () => useMutation((id) => axiosProv.delete(`venue/${id}`));

15
src/layout/Navbar/index.js
View File

@@ -39,8 +39,7 @@ const Navbar = ({ secondary, toggleSidebar, isSidebarOpen }) => {
const { logout, user, avatar } = useAuth();
const getActiveRoute = () => {
const route = routes.find(
(r) =>
r.path === location.pathname || location.pathname.split('/')[1] === r.path.split('/')[1],
(r) => r.path === location.pathname || location.pathname.split('/')[1] === r.path.split('/')[1],
);
if (route) return route.navName ?? route.name;
@@ -64,10 +63,7 @@ const Navbar = ({ secondary, toggleSidebar, isSidebarOpen }) => {
'linear-gradient(112.83deg, rgba(255, 255, 255, 0.21) 0%, rgba(255, 255, 255, 0) 110.84%)',
);
const scrolledNavbarBorder = useColorModeValue('#FFFFFF', 'rgba(255, 255, 255, 0.31)');
const scrolledNavbarFilter = useColorModeValue(
'none',
'drop-shadow(0px 7px 23px rgba(0, 0, 0, 0.05))',
);
const scrolledNavbarFilter = useColorModeValue('none', 'drop-shadow(0px 7px 23px rgba(0, 0, 0, 0.05))');
if (scrolled === true) {
navbarPosition = 'fixed';
@@ -148,12 +144,7 @@ const Navbar = ({ secondary, toggleSidebar, isSidebarOpen }) => {
<Menu>
<MenuButton py={2} transition="all 0.3s" _focus={{ boxShadow: 'none' }}>
<HStack>
<VStack
display={{ base: 'none', md: 'flex' }}
alignItems="flex-start"
spacing={0}
height={12}
>
<VStack display={{ base: 'none', md: 'flex' }} alignItems="flex-start" spacing={0} height={12}>
<Text fontWeight="bold">{user?.name}</Text>
<Text fontSize="sm">{`${uppercaseFirstLetter(user?.userRole)}`}</Text>
</VStack>

8
src/layout/Sidebar/CreateLinks.js
View File

@@ -6,13 +6,7 @@ import NavLinkButton from './NavLinkButton';
const createLinks = (routes, activeRoute, role, toggleSidebar = () => {}) =>
routes.map((route) =>
route.isEntity ? (
<EntityNavButton
key={uuid()}
activeRoute={activeRoute}
role={role}
route={route}
toggleSidebar={toggleSidebar}
/>
<EntityNavButton key={uuid()} activeRoute={activeRoute} role={role} route={route} toggleSidebar={toggleSidebar} />
) : (
<NavLinkButton key={uuid()} activeRoute={activeRoute} role={role} route={route} />
),

23
src/layout/Sidebar/EntityNavButton.js
View File

@@ -26,10 +26,7 @@ const EntityNavButton = ({ activeRoute, route, role, toggleSidebar }) => {
const { t } = useTranslation();
const { isOpen, onOpen, onClose } = useDisclosure();
const activeArrowColor = useColorModeValue('var(--chakra-colors-gray-700)', 'white');
const inactiveArrowColor = useColorModeValue(
'var(--chakra-colors-gray-600)',
'var(--chakra-colors-gray-200)',
);
const inactiveArrowColor = useColorModeValue('var(--chakra-colors-gray-600)', 'var(--chakra-colors-gray-200)');
const activeTextColor = useColorModeValue('gray.700', 'white');
const inactiveTextColor = useColorModeValue('gray.600', 'gray.200');
const inactiveIconColor = useColorModeValue('gray.100', 'gray.600');
@@ -63,14 +60,7 @@ const EntityNavButton = ({ activeRoute, route, role, toggleSidebar }) => {
rightIcon={<ArrowCircleRight size={24} color={activeArrowColor} />}
>
<Flex>
<IconBox
bg="blue.300"
color="white"
h="42px"
w="42px"
me="12px"
transition={variantChange}
>
<IconBox bg="blue.300" color="white" h="42px" w="42px" me="12px" transition={variantChange}>
{route.icon(true)}
</IconBox>
<Text color={activeTextColor} my="auto" fontSize="lg">
@@ -103,14 +93,7 @@ const EntityNavButton = ({ activeRoute, route, role, toggleSidebar }) => {
rightIcon={<ArrowCircleRight size={20} color={inactiveArrowColor} />}
>
<Flex>
<IconBox
bg={inactiveIconColor}
color="blue.300"
h="34px"
w="34px"
me="12px"
transition={variantChange}
>
<IconBox bg={inactiveIconColor} color="blue.300" h="34px" w="34px" me="12px" transition={variantChange}>
{route.icon(false)}
</IconBox>
<Text color={inactiveTextColor} my="auto" fontSize="sm">

28
src/layout/Sidebar/EntityPopover.js
View File

@@ -42,15 +42,11 @@ const renderList = (tree, depth, goTo) => {
colorScheme="blue"
variant="link"
onClick={() => goTo(tree.uuid, tree.type)}
leftIcon={
tree.type === 'entity' ? <TreeStructure size={16} /> : <Buildings size={16} />
}
leftIcon={tree.type === 'entity' ? <TreeStructure size={16} /> : <Buildings size={16} />}
>
{tree.name}
</Button>
<UnorderedList styleType="none">
{renderList(tree.children, depth + 2, goTo)}
</UnorderedList>
<UnorderedList styleType="none">{renderList(tree.children, depth + 2, goTo)}</UnorderedList>
</ListItem>
</UnorderedList>
);
@@ -73,9 +69,7 @@ const renderList = (tree, depth, goTo) => {
colorScheme="blue"
variant="link"
onClick={() => goTo(obj.uuid, obj.type)}
leftIcon={
obj.type === 'entity' ? <TreeStructure size={16} /> : <Buildings size={16} />
}
leftIcon={obj.type === 'entity' ? <TreeStructure size={16} /> : <Buildings size={16} />}
>
{obj.name}
</Button>
@@ -181,13 +175,7 @@ const EntityPopover = ({ isOpen, onClose, children, toggleSidebar }) => {
<PopoverHeader fontWeight="semibold" display="flex" alignItems="center">
<Heading size="md">{t('entities.title')}</Heading>
<Spacer />
<IconButton
ref={initRef}
colorScheme="gray"
onClick={onClose}
icon={<X size={20} />}
ms="auto"
/>
<IconButton ref={initRef} colorScheme="gray" onClick={onClose} icon={<X size={20} />} ms="auto" />
</PopoverHeader>
<PopoverArrow />
<PopoverBody overflowX="auto" overflowY="auto" maxH="80vh">
@@ -206,13 +194,7 @@ const EntityPopover = ({ isOpen, onClose, children, toggleSidebar }) => {
<PopoverHeader fontWeight="semibold" display="flex" alignItems="center">
<Heading size="md">{t('entities.title')}</Heading>
<Spacer />
<IconButton
ref={initRef}
colorScheme="gray"
onClick={onClose}
icon={<X size={20} />}
ms="auto"
/>
<IconButton ref={initRef} colorScheme="gray" onClick={onClose} icon={<X size={20} />} ms="auto" />
</PopoverHeader>
<PopoverArrow />
<PopoverBody overflowY="auto" maxH="80vh">

18
src/layout/Sidebar/NavLinkButton.js
View File

@@ -54,14 +54,7 @@ const NavLinkButton = ({ activeRoute, route, role }) => {
}}
>
<Flex>
<IconBox
bg="blue.300"
color="white"
h="42px"
w="42px"
me="12px"
transition={variantChange}
>
<IconBox bg="blue.300" color="white" h="42px" w="42px" me="12px" transition={variantChange}>
{route.icon(true)}
</IconBox>
<Text color={activeTextColor} my="auto" fontSize="lg">
@@ -92,14 +85,7 @@ const NavLinkButton = ({ activeRoute, route, role }) => {
}}
>
<Flex>
<IconBox
bg={inactiveIconColor}
color="blue.300"
h="34px"
w="34px"
me="12px"
transition={variantChange}
>
<IconBox bg={inactiveIconColor} color="blue.300" h="34px" w="34px" me="12px" transition={variantChange}>
{route.icon(false)}
</IconBox>
<Text color={inactiveTextColor} my="auto" fontSize="sm">

15
src/layout/Sidebar/index.js
View File

@@ -62,12 +62,7 @@ const Sidebar = ({ routes, isOpen, toggle }) => {
alignItems="center"
fontSize="11px"
>
<img
src={colorMode === 'light' ? lightLogo : darkLogo}
alt="OpenWifi"
width="180px"
height="100px"
/>
<img src={colorMode === 'light' ? lightLogo : darkLogo} alt="OpenWifi" width="180px" height="100px" />
</Link>
</Box>
);
@@ -92,9 +87,7 @@ const Sidebar = ({ routes, isOpen, toggle }) => {
<Box maxW="100%" h="90vh">
<Box>{brand}</Box>
<Flex direction="column" mb="40px" h="calc(100vh - 200px)" alignItems="center">
<Box overflowY="auto">
{createLinks(routes, activeRoute, user?.userRole ?? '', toggle)}
</Box>
<Box overflowY="auto">{createLinks(routes, activeRoute, user?.userRole ?? '', toggle)}</Box>
<Spacer />
<Box>
<Text color="gray.400">
@@ -132,9 +125,7 @@ const Sidebar = ({ routes, isOpen, toggle }) => {
>
<Box>{brand}</Box>
<Flex direction="column" mb="40px" h="calc(100vh - 200px)" alignItems="center">
<Box overflowY="auto">
{createLinks(routes, activeRoute, user?.userRole ?? '', toggle)}
</Box>
<Box overflowY="auto">{createLinks(routes, activeRoute, user?.userRole ?? '', toggle)}</Box>
<Spacer />
<Box>
<Text color="gray.400">

7
src/layout/index.js
View File

@@ -11,9 +11,7 @@ import Sidebar from './Sidebar';
const Layout = () => {
const breakpoint = useBreakpoint();
const [isSidebarOpen, { toggle: toggleSidebar }] = useBoolean(
breakpoint !== 'base' && breakpoint !== 'sm',
);
const [isSidebarOpen, { toggle: toggleSidebar }] = useBoolean(breakpoint !== 'base' && breakpoint !== 'sm');
document.documentElement.dir = 'ltr';
const getActiveRoute = (r) => {
@@ -52,8 +50,7 @@ const Layout = () => {
}
return activeNavbar;
};
const getRoutes = (r) =>
r.map((route) => <Route path={route.path} element={<route.component />} key={uuid()} />);
const getRoutes = (r) => r.map((route) => <Route path={route.path} element={<route.component />} key={uuid()} />);
return (
<>

37
src/pages/AccountPage/AccountCard/Form.js
View File

@@ -43,14 +43,7 @@ const propTypes = {
deleteAvatar: PropTypes.instanceOf(Object).isRequired,
};
const UpdateAccountForm = ({
updateUser,
deleteAvatar,
updateAvatar,
finishUpdate,
editing,
formRef,
}) => {
const UpdateAccountForm = ({ updateUser, deleteAvatar, updateAvatar, finishUpdate, editing, formRef }) => {
const { t } = useTranslation();
const [verifNumber, setVerifNumber] = useState('');
const { avatar: savedAvatar } = useAuth();
@@ -90,19 +83,14 @@ const UpdateAccountForm = ({
key={formKey}
initialValues={{
...user,
mfa: user.userTypeProprietaryInfo.mfa.enabled
? user.userTypeProprietaryInfo.mfa.method
: '',
mfa: user.userTypeProprietaryInfo.mfa.enabled ? user.userTypeProprietaryInfo.mfa.method : '',
phoneNumber:
user.userTypeProprietaryInfo.mobiles.length > 0
? user.userTypeProprietaryInfo.mobiles[0].number.replace('+', '')
: '',
}}
validationSchema={UpdateUserSchema(t)}
onSubmit={(
{ description, name, currentPassword, phoneNumber, mfa, notes },
{ setSubmitting },
) => {
onSubmit={({ description, name, currentPassword, phoneNumber, mfa, notes }, { setSubmitting }) => {
const onSuccess = () => {
finishUpdate();
setSubmitting(false);
@@ -147,10 +135,7 @@ const UpdateAccountForm = ({
updateUser.mutateAsync(params, {
onSuccess,
onError: (e) => {
if (
e?.response?.data?.ErrorDescription ===
'You must provide at least one validated phone number.'
) {
if (e?.response?.data?.ErrorDescription === 'You must provide at least one validated phone number.') {
toggleVerifyNumber(params, onSuccess);
} else {
toast({
@@ -216,11 +201,7 @@ const UpdateAccountForm = ({
</Field>
<Field name="userRole">
{({ field }) => (
<FormControl
isInvalid={errors.userRole && touched.userRole}
isRequired
isDisabled
>
<FormControl isInvalid={errors.userRole && touched.userRole} isRequired isDisabled>
<FormLabel ms="4px" fontSize="md" fontWeight="normal">
{t('user.role')}
</FormLabel>
@@ -309,13 +290,7 @@ const UpdateAccountForm = ({
</TabPanel>
<TabPanel>
<Field name="notes">
{({ field }) => (
<NotesTable
notes={field.value}
setNotes={setFieldValue}
isDisabled={!editing}
/>
)}
{({ field }) => <NotesTable notes={field.value} setNotes={setFieldValue} isDisabled={!editing} />}
</Field>
</TabPanel>
</TabPanels>

12
src/pages/AccountPage/AccountCard/GoogleAuthenticatorModal/GoogleAuthenticatorTests.js
View File

@@ -1,17 +1,7 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import {
Alert,
Button,
Center,
Heading,
HStack,
PinInput,
PinInputField,
Spinner,
Text,
} from '@chakra-ui/react';
import { Alert, Button, Center, Heading, HStack, PinInput, PinInputField, Spinner, Text } from '@chakra-ui/react';
import { useVerifyAuthenticator } from 'hooks/Network/GoogleAuthenticator';
import { ArrowRightIcon } from '@chakra-ui/icons';

17
src/pages/AccountPage/AccountCard/GoogleAuthenticatorModal/index.js
View File

@@ -1,14 +1,7 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import {
CloseButton,
Modal,
ModalBody,
ModalContent,
ModalOverlay,
useDisclosure,
} from '@chakra-ui/react';
import { CloseButton, Modal, ModalBody, ModalContent, ModalOverlay, useDisclosure } from '@chakra-ui/react';
import SaveButton from 'components/Buttons/SaveButton';
import ConfirmCloseAlert from 'components/ConfirmCloseAlert';
import ModalHeader from 'components/ModalHeader';
@@ -54,13 +47,9 @@ const GoogleAuthenticatorModal = ({ isOpen, onClose, onSuccess }) => {
/>
<ModalBody>
{currentStep === 'intro' && <GoogleAuthenticatorIntro setCurrentStep={setCurrentStep} />}
{currentStep === 'qr-code' && (
<GoogleAuthenticatorQrDisplay setCurrentStep={setCurrentStep} />
)}
{currentStep === 'qr-code' && <GoogleAuthenticatorQrDisplay setCurrentStep={setCurrentStep} />}
{currentStep === 'tests' && <GoogleAuthenticatorTests setCurrentStep={setCurrentStep} />}
{currentStep === 'activated' && (
<GoogleAuthenticatorActivationSuccess onSuccess={onActivated} />
)}
{currentStep === 'activated' && <GoogleAuthenticatorActivationSuccess onSuccess={onActivated} />}
</ModalBody>
</ModalContent>
<ConfirmCloseAlert isOpen={showConfirm} confirm={closeCancelAndForm} cancel={closeConfirm} />

11
src/pages/AccountPage/AccountCard/MfaSelectField/index.js
View File

@@ -23,16 +23,7 @@ const defaultProps = {
isHidden: false,
};
const MfaSelectField = ({
name,
errors,
touched,
isDisabled,
label,
isRequired,
isHidden,
setFieldValue,
}) => {
const MfaSelectField = ({ name, errors, touched, isDisabled, label, isRequired, isHidden, setFieldValue }) => {
const { t } = useTranslation();
const { isOpen, onOpen, onClose } = useDisclosure();

18
src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/AddSubsectionModal.js
View File

@@ -32,19 +32,11 @@ const AddSubsectionModal = ({ editing, activeSubs, addSub }) => {
return (
<>
<CreateButton
label={t('configurations.add_subsection')}
onClick={onOpen}
isDisabled={!editing}
ml={2}
/>
<CreateButton label={t('configurations.add_subsection')} onClick={onOpen} isDisabled={!editing} ml={2} />
<Modal onClose={onClose} isOpen={isOpen} size="sm" scrollBehavior="inside">
<ModalOverlay />
<ModalContent>
<ModalHeader
title={t('configurations.add_subsection')}
right={<CloseButton ml={2} onClick={onClose} />}
/>
<ModalHeader title={t('configurations.add_subsection')} right={<CloseButton ml={2} onClick={onClose} />} />
<ModalBody>
<SimpleGrid minChildWidth="200px" spacing={4}>
<Center>
@@ -57,11 +49,7 @@ const AddSubsectionModal = ({ editing, activeSubs, addSub }) => {
</Button>
</Center>
<Center>
<Button
colorScheme="blue"
isDisabled={activeSubs.includes('unit')}
onClick={() => addNewSub('unit')}
>
<Button colorScheme="blue" isDisabled={activeSubs.includes('unit')} onClick={() => addNewSub('unit')}>
{t('configurations.unit')}
</Button>
</Center>

19
src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/CreateInterfaceButton.js
View File

@@ -1,15 +1,7 @@
import React, { useCallback, useState } from 'react';
import PropTypes from 'prop-types';
import isEqual from 'react-fast-compare';
import {
Button,
useDisclosure,
Modal,
ModalBody,
ModalContent,
ModalOverlay,
Box,
} from '@chakra-ui/react';
import { Button, useDisclosure, Modal, ModalBody, ModalContent, ModalOverlay, Box } from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
import { Plus } from 'phosphor-react';
import ModalHeader from 'components/ModalHeader';
@@ -53,14 +45,7 @@ const CreateInterfaceButton = ({ editing, arrayHelpers: { push: pushInterface }
return (
<>
<Button
colorScheme="blue"
type="submit"
onClick={onOpen}
rightIcon={<Plus size={20} />}
hidden={!editing}
ml={2}
>
<Button colorScheme="blue" type="submit" onClick={onOpen} rightIcon={<Plus size={20} />} hidden={!editing} ml={2}>
{t('configurations.add_interface')}
</Button>
<Modal onClose={onClose} isOpen={isOpen} size="sm" scrollBehavior="inside">

9
src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/InterfaceExpertModal/index.js
View File

@@ -22,14 +22,7 @@ const InterfaceExpertModal = ({ editing }) => {
return (
<>
<EditButton mt={2} label={t('configurations.expert_name')} onClick={onOpen} />
{isOpen && (
<InterfaceExpertForm
config={value}
onClose={onClose}
setConfig={setConfig}
editing={editing}
/>
)}
{isOpen && <InterfaceExpertForm config={value} onClose={onClose} setConfig={setConfig} editing={editing} />}
</>
);
};

7
src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/Bridge/BridgeSection.js
View File

@@ -14,12 +14,7 @@ const IpV4 = ({ editing, index, isEnabled }) => {
return (
<>
<NumberField
name={`configuration[${index}].bridge.mtu`}
label="bridge.mtu"
isDisabled={!editing}
isRequired
/>
<NumberField name={`configuration[${index}].bridge.mtu`} label="bridge.mtu" isDisabled={!editing} isRequired />
<NumberField
name={`configuration[${index}].bridge.tx-queue-len`}
label="bridge.tx-queue-len"

13
src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/IpV4/DhcpIpV4.js
View File

@@ -20,10 +20,7 @@ const DhcpIpV4 = ({ editing, index }) => {
const onEnabledChange = (e) => {
if (e.target.checked) {
setFieldValue(
`configuration[${index}].ipv4.dhcp`,
INTERFACE_IPV4_DHCP_SCHEMA(t, true).cast(),
);
setFieldValue(`configuration[${index}].ipv4.dhcp`, INTERFACE_IPV4_DHCP_SCHEMA(t, true).cast());
} else {
setFieldValue(`configuration[${index}].ipv4.dhcp`, undefined);
setFieldValue(`configuration[${index}].ipv4.dhcp-lease`, undefined);
@@ -41,13 +38,7 @@ const DhcpIpV4 = ({ editing, index }) => {
<FormLabel ms="4px" fontSize="md" fontWeight="normal">
Enable DHCP
</FormLabel>
<Switch
onChange={onEnabledChange}
isChecked={isEnabled}
borderRadius="15px"
size="lg"
isDisabled={!editing}
/>
<Switch onChange={onEnabledChange} isChecked={isEnabled} borderRadius="15px" size="lg" isDisabled={!editing} />
</FormControl>
{isEnabled && (
<>

13
src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/IpV4/DhcpLeaseIpV4.js
View File

@@ -20,10 +20,7 @@ const DhcpLeaseIpV4 = ({ editing, index }) => {
const onEnabledChange = (e) => {
if (e.target.checked) {
setFieldValue(
`configuration[${index}].ipv4.dhcp-lease`,
INTERFACE_IPV4_DHCP_LEASE_SCHEMA(t, true).cast(),
);
setFieldValue(`configuration[${index}].ipv4.dhcp-lease`, INTERFACE_IPV4_DHCP_LEASE_SCHEMA(t, true).cast());
} else {
setFieldValue(`configuration[${index}].ipv4.dhcp-lease`, undefined);
}
@@ -40,13 +37,7 @@ const DhcpLeaseIpV4 = ({ editing, index }) => {
<FormLabel ms="4px" fontSize="md" fontWeight="normal">
Enable DHCP-LEASE
</FormLabel>
<Switch
onChange={onEnabledChange}
isChecked={isEnabled}
borderRadius="15px"
size="lg"
isDisabled={!editing}
/>
<Switch onChange={onEnabledChange} isChecked={isEnabled} borderRadius="15px" size="lg" isDisabled={!editing} />
</FormControl>
{isEnabled && (
<>

19
src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/IpV4/index.js
View File

@@ -24,8 +24,7 @@ const IpV4 = ({ editing, index }) => {
const onIpv4Change = (e) => {
if (e.target.value === '') {
setFieldValue(`configuration[${index}].ipv4`, undefined);
} else if (e.target.value === 'dynamic')
setFieldValue(`configuration[${index}].ipv4`, { addressing: 'dynamic' });
} else if (e.target.value === 'dynamic') setFieldValue(`configuration[${index}].ipv4`, { addressing: 'dynamic' });
else {
setFieldValue(`configuration[${index}].ipv4`, {
...INTERFACE_IPV4_SCHEMA(t, true).cast(),
@@ -56,25 +55,13 @@ const IpV4 = ({ editing, index }) => {
mx={2}
/>
<FormControl isDisabled={!editing} hidden={getIpv4Value() === ''}>
<Select
value={getIpv4Value()}
onChange={onIpv4Change}
borderRadius="15px"
fontSize="sm"
w="120px"
>
<Select value={getIpv4Value()} onChange={onIpv4Change} borderRadius="15px" fontSize="sm" w="120px">
<option value="dynamic">dynamic</option>
<option value="static">static</option>
</Select>
</FormControl>
</Heading>
<SimpleGrid
minChildWidth="300px"
spacing="20px"
mb={getIpv4Value() === 'static' ? 8 : undefined}
mt={2}
w="100%"
>
<SimpleGrid minChildWidth="300px" spacing="20px" mb={getIpv4Value() === 'static' ? 8 : undefined} mt={2} w="100%">
<StaticIpV4 index={index} isEnabled={getIpv4Value() === 'static'} editing={editing} />
</SimpleGrid>
</>

8
src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/IpV6/index.js
View File

@@ -43,13 +43,7 @@ const IpV6 = ({ editing, index }) => {
mx={2}
/>
<FormControl isDisabled hidden={getIpv6Value() === ''}>
<Select
value={getIpv6Value()}
onChange={onIpv6Change}
borderRadius="15px"
fontSize="sm"
w="120px"
>
<Select value={getIpv6Value()} onChange={onIpv6Change} borderRadius="15px" fontSize="sm" w="120px">
<option value="dynamic">dynamic</option>
</Select>
</FormControl>

9
src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/SsidList/Encryption.js
View File

@@ -26,15 +26,10 @@ const Encryption = ({ editing, namePrefix }) => {
}
};
const isEnabled = useMemo(
() => getIn(values, `${namePrefix}`) !== undefined,
[getIn(values, `${namePrefix}`)],
);
const isEnabled = useMemo(() => getIn(values, `${namePrefix}`) !== undefined, [getIn(values, `${namePrefix}`)]);
const isKeyNeeded = useMemo(
() =>
getIn(values, `${namePrefix}`) !== undefined &&
keyProtos.includes(getIn(values, `${namePrefix}`).proto),
() => getIn(values, `${namePrefix}`) !== undefined && keyProtos.includes(getIn(values, `${namePrefix}`).proto),
[getIn(values, `${namePrefix}`)],
);

18
src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/SsidList/Local.js
View File

@@ -6,10 +6,7 @@ import StringField from 'components/FormFields/StringField';
import { FormControl, FormLabel, SimpleGrid, Switch } from '@chakra-ui/react';
import ObjectArrayFieldModal from 'components/FormFields/ObjectArrayFieldModal';
import NumberField from 'components/FormFields/NumberField';
import {
INTERFACE_SSID_RADIUS_LOCAL_SCHEMA,
INTERFACE_SSID_RADIUS_LOCAL_USER_SCHEMA,
} from '../../interfacesConstants';
import { INTERFACE_SSID_RADIUS_LOCAL_SCHEMA, INTERFACE_SSID_RADIUS_LOCAL_USER_SCHEMA } from '../../interfacesConstants';
const propTypes = {
editing: PropTypes.bool.isRequired,
@@ -28,10 +25,7 @@ const Local = ({ editing, namePrefix }) => {
}
};
const isEnabled = useMemo(
() => getIn(values, `${namePrefix}`) !== undefined,
[getIn(values, `${namePrefix}`)],
);
const isEnabled = useMemo(() => getIn(values, `${namePrefix}`) !== undefined, [getIn(values, `${namePrefix}`)]);
return (
<>
@@ -67,13 +61,7 @@ const Local = ({ editing, namePrefix }) => {
<StringField name="mac" label="mac" isRequired />
<StringField name="user-name" label="user-name" isRequired />
<StringField name="password" label="password" isRequired hideButton />
<NumberField
name="vlan-id"
label="vlan-id"
isDisabled={!editing}
isRequired
w={24}
/>
<NumberField name="vlan-id" label="vlan-id" isDisabled={!editing} isRequired w={24} />
</>
}
columns={[

26
src/pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/SingleInterface/SsidList/Radius/LockedRadius.js
View File

@@ -34,22 +34,9 @@ const LockedRadius = ({ variableBlockId }) => {
return (
<>
<SimpleGrid minChildWidth="300px" spacing="20px">
<DisplayStringField
label="authentication.host"
value={data.authentication.host}
isRequired
/>
<DisplayNumberField
label="authentication.port"
value={data.authentication.port}
isRequired
/>
<DisplayStringField
label="authentication.secret"
value={data.authentication.secret}
isRequired
hideButton
/>
<DisplayStringField label="authentication.host" value={data.authentication.host} isRequired />
<DisplayNumberField label="authentication.port" value={data.authentication.port} isRequired />
<DisplayStringField label="authentication.secret" value={data.authentication.secret} isRequired hideButton />
</SimpleGrid>
<FormControl isDisabled>
<FormLabel ms="4px" fontSize="md" fontWeight="normal">
@@ -67,12 +54,7 @@ const LockedRadius = ({ variableBlockId }) => {
<SimpleGrid minChildWidth="300px" spacing="20px">
<DisplayStringField label="accounting.host" value={data.accounting?.host} isRequired />
<DisplayNumberField label="accounting.port" value={data.accounting?.port} isRequired />
<DisplayStringField
label="accounting.secret"
value={data.accounting?.secret}
isRequired
hideButton
/>
<DisplayStringField label="accounting.secret" value={data.accounting?.secret} isRequired hideButton />
</SimpleGrid>
)}
<FormControl isDisabled>

Some files were not shown because too many files have changed in this diff Show More