fix: SMS message templates.

This commit is contained in:
elforjani13
2021-11-06 00:08:25 +02:00
parent 2c71d07512
commit 2bd4c5f724
12 changed files with 118 additions and 241 deletions

View File

@@ -1,28 +0,0 @@
import React from 'react';
import { useFormikContext } from 'formik';
import { Intent, Button, Classes } from '@blueprintjs/core';
import { FormattedMessage as T } from 'components';
import { useHistory } from 'react-router-dom';
function SMSMessageTemplateFloatingAction() {
const history = useHistory();
const { isSubmitting } = useFormikContext();
const handleCloseClick = () => {
history.go(-1);
};
return (
<div className={'card__footer'}>
<Button intent={Intent.PRIMARY} loading={isSubmitting} type="submit">
<T id={'save'} />
</Button>
<Button onClick={handleCloseClick} disabled={isSubmitting}>
<T id={'close'} />
</Button>
</div>
);
}
export default SMSMessageTemplateFloatingAction;

View File

@@ -1,57 +0,0 @@
import React from 'react';
import { Formik, Form } from 'formik';
import { Intent } from '@blueprintjs/core';
import intl from 'react-intl-universal';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import { CreateSMSMessageTemplateSchema } from './SMSMessageTemplateForm.schema';
import SMSMessageTemplateFormContent from './SMSMessageTemplateFormContent';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import { compose } from 'utils';
export const defaultInitialValues = {
entries: [
{
notification: '',
service: '',
message: '',
auto: true,
switch: true,
},
],
};
function SMSMessageTemplateForm({
// #withDashboardActions
changePreferencesPageTitle,
}) {
// Form initial values.
const initialValues = {
...defaultInitialValues,
};
React.useEffect(() => {
changePreferencesPageTitle(
intl.get('sms_message_template.label.sms_messages_template'),
);
}, [changePreferencesPageTitle]);
// Handles form submit.
const handleSubmit = (values, { setSubmitting, setErrors, resetForm }) => {};
return (
<div
className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_STRIP_STYLE)}
>
<Formik
validationSchema={CreateSMSMessageTemplateSchema}
initialValues={initialValues}
onSubmit={handleSubmit}
component={SMSMessageTemplateFormContent}
/>
</div>
);
}
export default compose(withDashboardActions)(SMSMessageTemplateForm);

View File

@@ -1,19 +0,0 @@
import * as Yup from 'yup';
import intl from 'react-intl-universal';
import { DATATYPES_LENGTH } from 'common/dataTypes';
import { isBlank } from 'utils';
const Schema = Yup.object().shape({
entries: Yup.array().of(
Yup.object().shape({
notification: Yup.string().nullable(),
service: Yup.number().nullable(),
message: Yup.string().max(DATATYPES_LENGTH.TEXT).nullable(),
auto:Yup.boolean(),
switch:Yup.boolean(),
}),
),
})
export const CreateSMSMessageTemplateSchema = Schema;

View File

@@ -1,23 +0,0 @@
import React from 'react';
import { FastField } from 'formik';
import SMSMessageTemplatesEntriesTable from './SMSMessageTemplatesEntriesTable';
export default function SMSMessageTemplateFormBody() {
return (
<FastField name={'entries'}>
{({
form: { values, setFieldValue },
field: { value },
meta: { error, touched },
}) => (
<SMSMessageTemplatesEntriesTable
entries={value}
onUpdateData={(newEntries) => {
setFieldValue('entries', newEntries);
}}
/>
)}
</FastField>
);
}

View File

@@ -1,16 +0,0 @@
import React from 'react';
import { Form } from 'formik';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import SMSMessageTemplateFormBody from './SMSMessageTemplateFormBody';
import SMSMessageTemplateFloatingAction from './SMSMessageTemplateFloatingAction';
export default function SMSMessageTemplateFormContent() {
return (
<Form>
<SMSMessageTemplateFormBody />
<SMSMessageTemplateFloatingAction />
</Form>
);
}

View File

@@ -1,68 +0,0 @@
import React from 'react';
import intl from 'react-intl-universal';
import {
InputGroupCell,
TextAreaCell,
SwitchFieldCell,
} from 'components/DataTableCells';
import { DataTableEditable } from 'components';
import { compose, updateTableCell } from 'utils';
export default function SMSMessageTemplatesEntriesTable({
onUpdateData,
entries,
}) {
const columns = React.useMemo(() => [
{
Header: intl.get('sms_message_template.label_Notification'),
accessor: 'notification',
Cell: InputGroupCell,
disableSortBy: true,
width: '150',
},
{
Header: intl.get('service'),
accessor: 'service',
Cell: InputGroupCell,
disableSortBy: true,
width: '150',
},
{
Header: intl.get('sms_message_template.label_mesage'),
accessor: 'message',
// Cell: TextAreaCell,
Cell: InputGroupCell,
disableSortBy: true,
width: '150',
},
{
Header: intl.get('sms_message_template.label_auto'),
accessor: 'auto',
Cell: SwitchFieldCell,
disableSortBy: true,
disableResizing: true,
width: '120',
},
]);
const handleUpdateData = React.useCallback(
(rowIndex, columnId, value) => {
const newRows = compose(updateTableCell(rowIndex, columnId, value))(
entries,
);
onUpdateData(newRows);
},
[onUpdateData, entries],
);
return (
<DataTableEditable
columns={columns}
data={entries}
payload={{
errors: [],
updateData: handleUpdateData,
}}
/>
);
}

View File

@@ -1,14 +0,0 @@
import React from 'react';
import { SMSMessageTemplateProvider } from './SMSMessageTemplateProvider';
import SMSMessageTemplateForm from './SMSMessageTemplateForm';
/**
* SMS message template.
*/
export default function SMSMessageTemplates() {
return (
<SMSMessageTemplateProvider>
<SMSMessageTemplateForm />
</SMSMessageTemplateProvider>
);
}

View File

@@ -0,0 +1,54 @@
import React from 'react';
import intl from 'react-intl-universal';
import {
DataTableEditable,
DataTable,
DashboardContentTable,
} from 'components';
import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import { useSMSMessagesTemplatesTableColumns } from './components';
import { compose } from 'utils';
function SMSMessagesTemplatesDataTable({
// #withDashboardActions
changePreferencesPageTitle,
}) {
// Table columns.
const columns = useSMSMessagesTemplatesTableColumns();
React.useEffect(() => {
changePreferencesPageTitle(
intl.get('sms_message_template.label.sms_messages_template'),
);
}, [changePreferencesPageTitle]);
const DATA = [
{
notification: 'notification',
service: 'service',
message: 'message',
auto: true,
},
{
notification: 'notification',
service: 'service',
message: 'message',
auto: false,
},
];
return (
<DataTableEditable
columns={columns}
data={[]}
// loading={}
// progressBarLoading={}
TableLoadingRenderer={TableSkeletonRows}
noInitialFetch={true}
/>
);
}
export default compose(withDashboardActions)(SMSMessagesTemplatesDataTable);

View File

@@ -1,17 +1,14 @@
import React from 'react';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import { useSettings, useSaveSettings } from 'hooks/query';
import { useSettings } from 'hooks/query';
import PreferencesPageLoader from '../PreferencesPageLoader';
const SMSMessageTemplateContext = React.createContext();
const SMSMessagesTemplatesContext = React.createContext();
/**
* SMS message template provider.
* SMS message templates provider.
*/
function SMSMessageTemplateProvider({ ...props }) {
function SMSMessagesTemplatesProvider({ ...props }) {
//Fetches Organization Settings.
const { isLoading: isSettingsLoading } = useSettings();
@@ -26,17 +23,13 @@ function SMSMessageTemplateProvider({ ...props }) {
)}
>
<div className={classNames(CLASSES.CARD)}>
{isSettingsLoading ? (
<PreferencesPageLoader />
) : (
<SMSMessageTemplateContext.Provider value={provider} {...props} />
)}
<SMSMessagesTemplatesContext.Provider value={provider} {...props} />
</div>
</div>
);
}
const useSMSMessageTemplateContext = () =>
React.useContext(SMSMessageTemplateContext);
React.useContext(SMSMessagesTemplatesContext);
export { SMSMessageTemplateProvider, useSMSMessageTemplateContext };
export { SMSMessagesTemplatesProvider, useSMSMessageTemplateContext };

View File

@@ -0,0 +1,40 @@
import React from 'react';
import intl from 'react-intl-universal';
import {
InputGroupCell,
TextAreaCell,
SwitchFieldCell,
} from 'components/DataTableCells';
export function useSMSMessagesTemplatesTableColumns() {
return React.useMemo(() => [
{
Header: intl.get('sms_message_template.label_Notification'),
accessor: 'notification',
className: 'notification',
width: '150',
},
{
Header: intl.get('service'),
accessor: 'service',
className: 'service',
width: '100',
},
{
Header: intl.get('sms_message_template.label_mesage'),
accessor: 'message',
className: 'message',
width: '180',
},
{
Header: intl.get('sms_message_template.label_auto'),
accessor: 'auto',
Cell: SwitchFieldCell,
className: 'auto',
disableSortBy: true,
disableResizing: true,
width: '80',
},
]);
}

View File

@@ -0,0 +1,15 @@
import React from 'react';
import { SMSMessagesTemplatesProvider } from './SMSMessagesTemplatesProvider';
import SMSMessagesTemplatesDataTable from './SMSMessagesTemplatesDataTable';
/**
* SMS messages templates.
*/
export default function SMSMessagesTemplates() {
return (
<SMSMessagesTemplatesProvider>
<SMSMessagesTemplatesDataTable />
</SMSMessagesTemplatesProvider>
);
}

View File

@@ -4,7 +4,7 @@ import Accountant from 'containers/Preferences/Accountant/Accountant';
// import Accounts from 'containers/Preferences/Accounts/Accounts';
import Currencies from 'containers/Preferences/Currencies/Currencies';
import Item from 'containers/Preferences/Item';
import SMSMessageTemplates from '../containers/Preferences/SMSMessageTemplates';
import SMSMessagesTemplates from '../containers/Preferences/SMSMessagesTemplates';
import DefaultRoute from '../containers/Preferences/DefaultRoute';
const BASE_URL = '/preferences';
@@ -37,7 +37,7 @@ export default [
},
{
path: `${BASE_URL}/sms-message`,
component: SMSMessageTemplates,
component: SMSMessagesTemplates,
exact: true,
},
{