diff --git a/frontend-project/src/models/global.ts b/frontend-project/src/models/global.ts index 0fd12ce94..299c43b0e 100644 --- a/frontend-project/src/models/global.ts +++ b/frontend-project/src/models/global.ts @@ -1,17 +1,17 @@ import { notification } from 'antd'; +import { ReactNode } from 'react'; import { IconType } from 'antd/lib/notification'; export interface GlobalModelState { collapsed: boolean; } -export const openNotificationWithIcon = (message: IconType, title: string, description: string) => { - notification[message]({ message: title, description }); +export const openNotificationWithIcon = (message: IconType, description: ReactNode) => { + notification[message]({ message, description }); }; const GlobalModel = { namespace: 'global', - state: { collapsed: false, }, diff --git a/frontend-project/src/models/tag.ts b/frontend-project/src/models/tag.ts new file mode 100644 index 000000000..792fff859 --- /dev/null +++ b/frontend-project/src/models/tag.ts @@ -0,0 +1,59 @@ +import { create } from '@/services/tags'; +import { Effect } from 'dva'; +import { Reducer } from 'redux'; +import { router } from 'umi'; +import { openNotificationWithIcon } from '@/models/global'; +import { formatMessage } from 'umi-plugin-react/locale'; +import { Tag } from '@/services/definitions'; + +export interface TagModelState { + status?: number; + tag?: Tag; +} + +export interface TagModelType { + namespace: string; + state: TagModelState; + effects: { + create: Effect; + }; + reducers: { + changeTagStatus: Reducer; + }; +} +const TagState: TagModelState = { status: 1, tag: { name: '', id: 0 } }; +const TagModel: TagModelType = { + namespace: 'tag', + state: TagState, + effects: { + *create({ payload }, { call, put }) { + try { + const response = yield call(create, payload); + yield put({ + type: 'changeTagStatus', + payload: response, + }); + openNotificationWithIcon( + 'success', + formatMessage({ id: 'tags-new.page-create-notiffy-success' }) + response.data.id, + ); + router.replace(`/tags/list`); + } catch (err) { + yield put({ + type: 'changeTagStatus', + payload: err, + }); + } + }, + }, + reducers: { + changeTagStatus(state, { payload }) { + return { + ...state, + status: payload.response.status, + tag: payload.response.body, + }; + }, + }, +}; +export default TagModel; diff --git a/frontend-project/src/models/tags.ts b/frontend-project/src/models/tags.ts index 8eb0b54f8..5708768a4 100644 --- a/frontend-project/src/models/tags.ts +++ b/frontend-project/src/models/tags.ts @@ -1,7 +1,10 @@ -import { fetchAll, fetchPage } from '@/services/tags'; +import { fetchAll, fetchPage, create } from '@/services/tags'; import { Effect } from 'dva'; import { Reducer } from 'redux'; +import { router } from 'umi'; import { Tag } from '@/services/definitions'; +import { openNotificationWithIcon } from '@/models/global'; +import { formatMessage } from 'umi-plugin-react/locale'; export type TagDefaultState = Tag[]; @@ -9,6 +12,7 @@ export interface TagModelType { namespace: string; state: Tag[]; effects: { + create: Effect; fetchAll: Effect; fetchPage: Effect; }; @@ -23,6 +27,30 @@ const TagsModel: TagModelType = { namespace: 'tags', state: defaultTagsState, effects: { + *create({ payload }, { call }) { + try { + const response = yield call(create, payload); + openNotificationWithIcon( + 'success', + formatMessage({ id: 'tags-new.page-create-notiffy-success' }) + response.data.id, + ); + router.replace(`/tags/list`); + } catch (err) { + if (err.response.status === 400 && err.response.body.name) { + err.response.body.name.forEach(message => + openNotificationWithIcon( + 'error', + formatMessage({ id: 'tags-new.page-create-notiffy-error' }) + message, + ), + ); + } else { + openNotificationWithIcon( + 'error', + formatMessage({ id: 'tags-new.page-create-notiffy-error' }) + err.response.body.detail, + ); + } + } + }, *fetchAll(_, { call, put }) { const response = yield call(fetchAll); yield put({ diff --git a/frontend-project/src/pages/tags/new/index.tsx b/frontend-project/src/pages/tags/new/index.tsx index 8691ecb70..eaabe2381 100644 --- a/frontend-project/src/pages/tags/new/index.tsx +++ b/frontend-project/src/pages/tags/new/index.tsx @@ -1,14 +1,17 @@ import { PageHeaderWrapper } from '@ant-design/pro-layout'; import { Button, Col, Card, Form, Input, Row } from 'antd'; import { connect } from 'dva'; +import { AnyAction, Dispatch } from 'redux'; import React, { useEffect, FC } from 'react'; import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale'; +import { Tag } from '@/services/definitions'; +import { TagModelState } from '@/models/tag'; -interface TagNewFormProps { - name: String; - dispatch: Function; +export interface TagNewFormProps { + dispatch: Dispatch; + submitting: boolean; + tagState: TagModelState; } - const layout = { labelCol: { span: 8 }, wrapperCol: { span: 16 }, @@ -17,17 +20,22 @@ const layout = { const tailLayout = { wrapperCol: { offset: 8, span: 16 }, }; - -const TagNewForm: FC = () => { +const TagNewForm: FC = (props: TagNewFormProps) => { const [form] = Form.useForm(); - const onSubmit = () => { - form.submit(); + const handleSubmit = (value: Tag) => { + const { dispatch } = props; + dispatch({ + type: 'tag/create', + payload: { ...value }, + }); }; + + form.setFields(Object.entries(props?.tagState.tag).map(([name, errors]) => ({ name, errors }))); useEffect(() => {}, []); return ( -
+ @@ -49,7 +57,7 @@ const TagNewForm: FC = () => { - @@ -61,4 +69,4 @@ const TagNewForm: FC = () => { ); }; -export default connect(() => ({}))(TagNewForm); +export default connect(state => ({ tagState: (state as any).tag }))(TagNewForm); diff --git a/frontend-project/src/pages/tags/new/locales/en-US.ts b/frontend-project/src/pages/tags/new/locales/en-US.ts index 4cfac3914..c8aaf081e 100644 --- a/frontend-project/src/pages/tags/new/locales/en-US.ts +++ b/frontend-project/src/pages/tags/new/locales/en-US.ts @@ -1,7 +1,9 @@ export default { 'tags-new.form.save.label': 'Save', 'tags-new.form.name.label': 'Name', - 'tags-new.form.name.placeholder': "Case's name", + 'tags-new.form.name.placeholder': "Tag's name", 'tags-new.form.name.required-error': 'Name is required', - 'tags-new.page-header-content': 'You can add new channel here.', + 'tags-new.page-header-content': 'You can add new tag here.', + 'tags-new.page-create-notiffy-error': 'Save error:', + 'tags-new.page-create-notiffy-success': 'Tag saved corectly ID:', }; diff --git a/frontend-project/src/pages/tags/new/locales/pl-PL.ts b/frontend-project/src/pages/tags/new/locales/pl-PL.ts index 0591b9385..b7503db6c 100644 --- a/frontend-project/src/pages/tags/new/locales/pl-PL.ts +++ b/frontend-project/src/pages/tags/new/locales/pl-PL.ts @@ -3,5 +3,7 @@ export default { 'tags-new.form.name.label': 'Nazwa', 'tags-new.form.name.placeholder': 'Nazwa tagu', 'tags-new.form.name.required-error': 'Nazwa jest wymagana', - 'tags-new.page-header-content': 'Możesz dodać tutaj nowy kanał.', + 'tags-new.page-header-content': 'Możesz dodać tutaj nowy tag.', + 'tags-new.page-create-notiffy-error': 'Zapis nieudany:', + 'tags-new.page-create-notiffy-success': 'Zapis prawidłowy ID:', }; diff --git a/frontend-project/src/services/tags.ts b/frontend-project/src/services/tags.ts index fda0c1fdf..a84d4bae3 100644 --- a/frontend-project/src/services/tags.ts +++ b/frontend-project/src/services/tags.ts @@ -25,7 +25,6 @@ function fetchAllPages(page: Page) { } return page; } - export async function fetchPage({ current, pageSize, @@ -45,3 +44,6 @@ export async function fetchAll() { smallEodSDK.TagsApi(); return smallEodSDK.tagsList().then(page => fetchAllPages(page)); } +export async function create(value: Tag): Promise { + return new smallEodSDK.TagsApi().tagsCreateWithHttpInfo(value); +}