Feature/users - close #635 #636 #637 (#720)

* Adding breacdrumbs to go back to list

* CRUD for users

frontend-project/config/config.ts

@@ -58,7 +58,7 @@ const casesRoutes = {
     {
       name: 'list',
       icon: 'FileTextOutlined',
-      path: '/cases/list',
+      path: '/cases',
       component: './cases/CasesListView',
     },
     {
@@ -76,6 +76,32 @@ const casesRoutes = {
   ],
 };
 
+const usersRoutes = {
+  name: 'users',
+  icon: 'FileTextOutlined',
+  path: '/users',
+  routes: [
+    {
+      name: 'list',
+      icon: 'FileTextOutlined',
+      path: '/users',
+      component: './users/UsersListView',
+    },
+    {
+      name: 'new',
+      icon: 'FileAddOutlined',
+      path: '/users/new',
+      component: './users/UsersDetailView',
+    },
+    {
+      name: 'edit',
+      path: '/users/edit/:id',
+      component: './users/UsersDetailView',
+      hideInMenu: true,
+    },
+  ],
+};
+
 export default {
   plugins,
   hash: true,
@@ -203,12 +229,7 @@ export default {
                 },
               ],
             },
-            {
-              name: 'users',
-              icon: 'FileTextOutlined',
-              path: '/users',
-              component: './users/list',
-            },
+            usersRoutes,
             {
               path: '/',
               redirect: '/cases/new',

frontend-project/src/layouts/BasicLayout.tsx

@@ -120,10 +120,10 @@ const BasicLayout: FC<BasicLayoutProps> = props => {
           },
           ...routers,
         ]}
-        itemRender={(route, params, routes, paths) => {
-          const first = routes.indexOf(route) === 0;
-          return first ? (
-            <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
+        itemRender={(route, _, routes) => {
+          const lastBreadcrumbItem = routes.indexOf(route) === routes.length - 1;
+          return !lastBreadcrumbItem ? (
+            <Link to={route.path}>{route.breadcrumbName}</Link>
           ) : (
             <span>{route.breadcrumbName}</span>
           );

frontend-project/src/locales/en-US.ts

@@ -9,12 +9,15 @@ import BaseLocales from './pl-PL';
 import { structuredLocale } from '../utils/structedLocale';
 import { casesLocale } from '../pages/cases/locales/en-US';
 import { globalsLocale } from './en-US/globals';
+import { tagsLocale } from '@/pages/tags/locales/en-US';
+import { usersLocale } from '../pages/users/locales/en-US';
 
 const [labels] = structuredLocale({
   ...menuLocale,
   ...globalsLocale,
   ...casesLocale,
   ...tagsLocale,
+  ...usersLocale,
 });
 
 const Locale = {

frontend-project/src/locales/en-US/menu.ts

@@ -37,6 +37,11 @@ export const menuLocale = {
       edit: 'Edit',
       list: 'List',
     },
-    users: 'Users',
+    users: {
+      self: 'Users',
+      new: 'New',
+      edit: 'Edit',
+      list: 'List',
+    },
   },
 };

frontend-project/src/locales/pl-PL.ts

@@ -8,12 +8,15 @@ import { menuLocale } from './pl-PL/menu';
 import { structuredLocale } from '../utils/structedLocale';
 import { casesLocale } from '../pages/cases/locales/pl-PL';
 import { globalsLocale } from './pl-PL/globals';
+import { tagsLocale } from '@/pages/tags/locales/pl-PL';
+import { usersLocale } from '../pages/users/locales/pl-PL';
 
 const [labels, keys] = structuredLocale({
   ...menuLocale,
   ...globalsLocale,
   ...casesLocale,
   ...tagsLocale,
+  ...usersLocale,
 });
 export const localeKeys = keys;
 

frontend-project/src/locales/pl-PL/menu.ts

@@ -37,6 +37,11 @@ export const menuLocale = {
       edit: 'Edycja',
       list: 'Lista',
     },
-    users: 'Użytkownicy',
+    users: {
+      self: 'Użytkownicy',
+      new: 'Nowy',
+      edit: 'Edycja',
+      list: 'Lista',
+    },
   },
 };

frontend-project/src/models/users.ts

@@ -1,43 +1,8 @@
-import { fetchAll } from '@/services/users';
-import { Effect } from 'dva';
-import { Reducer } from 'react';
+import { UsersService } from '@/services/users';
 import { User } from '@/services/definitions';
+import { ReadWriteReduxResource } from '@/utils/reduxModel';
 
-export type UsersModelState = User[];
-
-export interface SaveAllUsersPayload {
-  payload: { results: User[] };
-}
-
-export interface UsersModelType {
-  namespace: string;
-  state: UsersModelState;
-  effects: {
-    fetchAll: Effect;
-  };
-  reducers: {
-    saveAll: Reducer<UsersModelState, SaveAllUsersPayload>;
-  };
-}
-
-const defaultUsersState: User[] = [];
-
-const UsersModel: UsersModelType = {
+export default ReadWriteReduxResource<User>({
   namespace: 'users',
-  state: defaultUsersState,
-  effects: {
-    *fetchAll(_, { call, put }) {
-      const response = yield call(fetchAll);
-      yield put({
-        type: 'saveAll',
-        payload: response,
-      });
-    },
-  },
-  reducers: {
-    saveAll(_, { payload }) {
-      return payload.results;
-    },
-  },
-};
-export default UsersModel;
+  service: UsersService,
+});

frontend-project/src/pages/cases/CasesDetailView.tsx

@@ -8,14 +8,13 @@ import { ReduxResourceState } from '@/utils/reduxModel';
 import router from 'umi/router';
 import { RouterTypes } from 'umi';
 import { ServiceResponse } from '@/services/service';
-import smallEodSDK from '@/utils/sdk';
 import { openNotificationWithIcon } from '@/models/global';
 import { localeKeys } from '../../locales/pl-PL';
 
 interface CasesDetailViewProps {
   cases: ReduxResourceState<Case>;
   tags: ReduxResourceState<Tag>;
-  users: User[];
+  users: ReduxResourceState<User>;
   institutions: Institution[];
   features: ReduxResourceState<Feature>;
   match: RouterTypes['match'] & { params: { id: string | undefined } };
@@ -46,11 +45,11 @@ function CasesDetailView({
   const [isSubmitting, setIsSubmitting] = useState(false);
   const editedCase = cases.data.find(value => value.id === Number(match.params.id));
   const [form] = Form.useForm();
-  (window as any).se = smallEodSDK;
+
   function onRequestDone(response: ServiceResponse<Case>) {
     setIsSubmitting(false);
     if (response.status === 'success') {
-      router.push('/cases/list');
+      router.push('/cases');
     } else if (response.statusCode === 400) {
       form.setFields(
         Array.from(
@@ -103,6 +102,7 @@ function CasesDetailView({
   if (
     cases.isLoading ||
     tags.isLoading ||
+    users.isLoading ||
     features.isLoading ||
     (isEdit && !editedCase) ||
     isSubmitting
@@ -205,7 +205,6 @@ function CasesDetailView({
               >
                 <Select
                   mode="multiple"
-                  disabled={features.isLoading}
                   placeholder={formatMessage({
                     id: localeKeys.cases.detailView.placeholders.features,
                   })}
@@ -253,7 +252,7 @@ function CasesDetailView({
                     id: localeKeys.cases.detailView.placeholders.notifiedUsers,
                   })}
                 >
-                  {users.map(user => (
+                  {users.data.map(user => (
                     <Option key={user.id} value={user.id}>
                       {user.username}
                     </Option>
@@ -274,7 +273,7 @@ function CasesDetailView({
                     id: localeKeys.cases.detailView.placeholders.responsibleUsers,
                   })}
                 >
-                  {users.map(user => (
+                  {users.data.map(user => (
                     <Option key={user.id} value={user.id}>
                       {user.username}
                     </Option>

frontend-project/src/pages/cases/CasesListView.tsx

@@ -2,7 +2,6 @@ import { ActionType, ProColumns } from '@ant-design/pro-table';
 import { Button, Space, Tag, Tooltip } from 'antd';
 import React, { useRef } from 'react';
 import { formatMessage } from 'umi-plugin-react/locale';
-
 import { Case } from '@/services/definitions';
 import { CasesService } from '@/services/cases';
 import Table from '@/components/Table';
@@ -37,7 +36,7 @@ function CasesListView() {
               `${formatMessage({ id: localeKeys.cases.list.failedRemove })} ${id}`,
             );
           }
-          tableActionRef.current.reload();
+          tableActionRef.current?.reload();
         },
       },
     });