create new tag

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,
   },

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<TagModelState>;
+  };
+}
+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;

frontend-project/src/models/tags.ts

@@ -1,14 +1,18 @@
-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[];
 
 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({

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<AnyAction>;
+  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<TagNewFormProps> = () => {
+const TagNewForm: FC<TagNewFormProps> = (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 (
-    <Form {...layout} form={form}>
+    <Form {...layout} form={form} onFinish={handleSubmit}>
       <PageHeaderWrapper content={formatMessage({ id: 'tags-new.page-header-content' })}>
         <Card bordered={false}>
           <Row>
@@ -49,7 +57,7 @@ const TagNewForm: FC<TagNewFormProps> = () => {
           <Row>
             <Col span={16}>
               <Form.Item {...tailLayout}>
-                <Button type="primary" onClick={onSubmit}>
+                <Button type="primary" htmlType="submit">
                   <FormattedMessage id="tags-new.form.save.label" />
                 </Button>
               </Form.Item>
@@ -61,4 +69,4 @@ const TagNewForm: FC<TagNewFormProps> = () => {
   );
 };
 
-export default connect(() => ({}))(TagNewForm);
+export default connect(state => ({ tagState: (state as any).tag }))(TagNewForm);

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:',
 };

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:',
 };

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<Tag> {
+  return new smallEodSDK.TagsApi().tagsCreateWithHttpInfo(value);
+}