Tworzenie, edytowanie i usuwanie spraw #653 #654 (#712)

* Changing locales

* Changes to Redux models and services

* Rebuild of cases components, allowing for CRUD

* Fixing found type errors

frontend-project/config/config.ts

@@ -50,6 +50,32 @@ const plugins = [
   ],
 ];
 
+const casesRoutes = {
+  name: 'cases',
+  icon: 'FileTextOutlined',
+  path: '/cases',
+  routes: [
+    {
+      name: 'list',
+      icon: 'FileTextOutlined',
+      path: '/cases/list',
+      component: './cases/CasesListView',
+    },
+    {
+      name: 'new',
+      icon: 'FileAddOutlined',
+      path: '/cases/new',
+      component: './cases/CasesDetailView',
+    },
+    {
+      name: 'edit',
+      path: '/cases/edit/:id',
+      component: './cases/CasesDetailView',
+      hideInMenu: true,
+    },
+  ],
+};
+
 export default {
   plugins,
   hash: true,
@@ -87,25 +113,7 @@ export default {
           Routes: ['src/pages/Authorized'],
           authority: ['admin', 'user'],
           routes: [
-            {
-              name: 'cases',
-              icon: 'FileTextOutlined',
-              path: '/cases',
-              routes: [
-                {
-                  name: 'new',
-                  icon: 'FileAddOutlined',
-                  path: '/cases/new',
-                  component: './cases/new',
-                },
-                {
-                  name: 'list',
-                  icon: 'FileTextOutlined',
-                  path: '/cases/list',
-                  component: './cases/list',
-                },
-              ],
-            },
+            casesRoutes,
             {
               name: 'tags',
               icon: 'FileTextOutlined',

frontend-project/src/components/Table/CaseName.tsx

@@ -1,22 +1,24 @@
 import React, { FC, useEffect } from 'react';
 import { Spin } from 'antd';
-import { connect } from 'dva';
+import { connect, useDispatch } from 'dva';
 
 import { Case } from '@/services/definitions';
+import { ReduxResourceState } from '@/utils/reduxModel';
 
 export interface CaseNameProps {
   id: number;
-  cases: Case[];
-  dispatch: Function;
+  cases: ReduxResourceState<Case>;
 }
 
-const CaseName: FC<CaseNameProps> = ({ id, cases, dispatch }) => {
+const CaseName: FC<CaseNameProps> = ({ id, cases }) => {
+  const dispatch = useDispatch();
   useEffect(() => {
-    dispatch({ type: 'cases/fetchOne', payload: id });
+    dispatch({ type: 'cases/fetchOne', payload: { id } });
   }, []);
-  const oneCase = cases.find(value => value.id === id);
+  const oneCase = cases.data.find(value => value.id === id);
+  if (!oneCase) return <Spin />;
 
-  return <div>{oneCase ? oneCase.name : <Spin />}</div>;
+  return <>{oneCase.name}</>;
 };
 
 export default connect(({ cases }: CaseNameProps) => ({ cases }))(CaseName);

frontend-project/src/components/Table/index.tsx

@@ -1,25 +1,29 @@
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
-import React, { FC, useRef } from 'react';
+import React, { MutableRefObject } from 'react';
 import { formatMessage } from 'umi-plugin-react/locale';
 import { PaginationParams, PaginationResponse } from '@/services/common.d';
+import { localeKeys } from '../../locales/pl-PL';
 
-interface TableProps {
+interface TableProps<T> {
   type: string;
-  columns: ProColumns<{}>[];
-  fetchData: (parameter: PaginationParams) => Promise<PaginationResponse<{}>>;
+  columns: ProColumns<T>[];
+  fetchData: (parameter: PaginationParams) => Promise<PaginationResponse<T>>;
+  pageHeader?: string;
+  tableHeader?: string;
+  actionRef?: MutableRefObject<ActionType>;
 }
 
-const Table: FC<TableProps> = ({ type, columns, fetchData }) => {
-  const actionRef = useRef<ActionType>();
-
+function Table<T>({ type, columns, fetchData, pageHeader, tableHeader, actionRef }: TableProps<T>) {
   const showTotal = (total: number, range: number[]) =>
-    `${range[0]}-${range[1]} / ${formatMessage({ id: `${type}-list.table.total` })} ${total}`;
+    `${range[0]}-${range[1]} / ${formatMessage({ id: localeKeys.lists.total })} ${total}`;
 
   return (
-    <PageHeaderWrapper content={formatMessage({ id: `${type}-list.page-header-content` })}>
+    <PageHeaderWrapper
+      content={formatMessage({ id: pageHeader || `${type}-list.page-header-content` })}
+    >
       <ProTable
-        headerTitle={formatMessage({ id: `${type}-list.table-header-title` })}
+        headerTitle={formatMessage({ id: tableHeader || `${type}-list.table-header-title` })}
         actionRef={actionRef}
         rowKey="id"
         request={fetchData}
@@ -36,6 +40,6 @@ const Table: FC<TableProps> = ({ type, columns, fetchData }) => {
       />
     </PageHeaderWrapper>
   );
-};
+}
 
 export default Table;

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

@@ -1,22 +1,44 @@
 import component from './en-US/component';
 import globalHeader from './en-US/globalHeader';
-import menu from './en-US/menu';
+import { menuLocale } from './en-US/menu';
 import pwa from './en-US/pwa';
 import settingDrawer from './en-US/settingDrawer';
 import settings from './en-US/settings';
+import BaseLocales from './pl-PL';
+import { structuredLocale } from '../utils/structedLocale';
+import { casesLocale } from '../pages/cases/locales/en-US';
+import { globalsLocale } from './en-US/globals';
 
-export default {
+const [labels] = structuredLocale({
+  ...menuLocale,
+  ...globalsLocale,
+  ...casesLocale,
+});
+
+const Locale = {
   'navBar.lang': 'Languages',
   'layout.user.link.help': 'Help',
   'layout.user.link.privacy': 'Privacy',
   'layout.user.link.terms': 'Terms',
-  'app.preview.down.block': 'Download this page to your local project',
-  'app.welcome.link.fetch-blocks': 'Get all block',
-  'app.welcome.link.block-list': 'Quickly build standard, pages based on `block` development',
   ...globalHeader,
-  ...menu,
   ...settingDrawer,
   ...settings,
   ...pwa,
   ...component,
+  ...labels,
 };
+
+// Checking if all keys are in both locale
+if (new Set(Object.keys(BaseLocales)) !== new Set(Object.keys(Locale))) {
+  const baseLocaleSet = new Set(Object.keys(BaseLocales));
+  const localeSet = new Set(Object.keys(Locale));
+  const missingLocaleKeys = Array.from(baseLocaleSet).filter(blKey => !localeSet.has(blKey));
+  const missingBaseLocaleKeys = Array.from(localeSet).filter(lKey => !baseLocaleSet.has(lKey));
+
+  if (missingLocaleKeys.length > 0)
+    console.error(`Missing locale keys: ${missingLocaleKeys.join(', ')}`);
+  if (missingBaseLocaleKeys.length > 0)
+    console.error(`Missing base locale keys: ${missingBaseLocaleKeys.join(', ')}`);
+}
+
+export default Locale;

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

@@ -1,8 +1,5 @@
 export default {
   'component.globalHeader.search': 'Search',
-  'component.globalHeader.search.example1': 'Search example 1',
-  'component.globalHeader.search.example2': 'Search example 2',
-  'component.globalHeader.search.example3': 'Search example 3',
   'component.globalHeader.help': 'Help',
   'component.globalHeader.notification': 'Notification',
   'component.globalHeader.notification.empty': 'You have viewed all notifications.',

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

@@ -0,0 +1,15 @@
+export const globalsLocale = {
+  error: 'Błąd',
+  lists: {
+    edit: 'Edit',
+    delete: 'Delete',
+    create: 'Create',
+    total: 'Total',
+    actions: 'Actions',
+    failedDownload: 'Downloading elements failed',
+  },
+  form: {
+    save: 'Save',
+    reset: 'Reset',
+  },
+};

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

@@ -1,32 +1,42 @@
-export default {
-  'menu.account': 'Account',
-  'menu.account.center': 'Account Center',
-  'menu.account.logout': 'Logout',
-  'menu.account.settings': 'Account Settings',
-  'menu.account.trigger': 'Trigger Error',
-  'menu.admin': 'admin',
-  'menu.cases': 'Cases',
-  'menu.cases.new': 'New',
-  'menu.cases.list': 'List',
-  'menu.tags': 'Tags',
-  'menu.exception': 'Exception',
-  'menu.exception.not-find': '404',
-  'menu.exception.not-permission': '403',
-  'menu.exception.server-error': '500',
-  'menu.exception.trigger': 'Trigger',
-  'menu.home': 'Home',
-  'menu.institutions': 'Institutions',
-  'menu.institutions.new': 'New',
-  'menu.institutions.list': 'List',
-  'menu.features': 'Features',
-  'menu.features.list': 'List',
-  'menu.letters': 'Letters',
-  'menu.letters.list': 'List',
-  'menu.letters.channels': 'Channels',
-  'menu.users': 'Users',
-  'menu.login': 'Login',
-  'menu.more-blocks': 'More Blocks',
-  'menu.register': 'Register',
-  'menu.register.result': 'Register Result',
-  'menu.welcome': 'Welcome',
+export const menuLocale = {
+  menu: {
+    home: 'Homepage',
+    cases: {
+      self: 'Cases',
+      new: 'New',
+      edit: 'Edit',
+      list: 'List',
+    },
+    tags: {
+      self: 'Tags',
+      new: 'New',
+      edit: 'Edit',
+      list: 'List',
+    },
+    institutions: {
+      self: 'Institutions',
+      new: 'New',
+      edit: 'Edit',
+      list: 'List',
+    },
+    letters: {
+      self: 'Letters',
+      new: 'New',
+      edit: 'Edit',
+      list: 'List',
+    },
+    features: {
+      self: 'Features',
+      new: 'New',
+      edit: 'Edit',
+      list: 'List',
+    },
+    channels: {
+      self: 'Channels',
+      new: 'New',
+      edit: 'Edit',
+      list: 'List',
+    },
+    users: 'Users',
+  },
 };

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

@@ -1,5 +1,29 @@
-import menu from './pl-PL/menu';
+import component from './pl-PL/component';
+import globalHeader from './pl-PL/globalHeader';
+import pwa from './pl-PL/pwa';
+import settingDrawer from './pl-PL/settingDrawer';
+import settings from './pl-PL/settings';
+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';
+
+const [labels, keys] = structuredLocale({
+  ...menuLocale,
+  ...globalsLocale,
+  ...casesLocale,
+});
+export const localeKeys = keys;
 
 export default {
-  ...menu,
+  'navBar.lang': 'Języki',
+  'layout.user.link.help': 'Pomoc',
+  'layout.user.link.privacy': 'Prywatność',
+  'layout.user.link.terms': 'Regulamin',
+  ...globalHeader,
+  ...settingDrawer,
+  ...settings,
+  ...pwa,
+  ...component,
+  ...labels,
 };

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

@@ -0,0 +1,5 @@
+export default {
+  'component.tagSelect.expand': 'Rozwiń',
+  'component.tagSelect.collapse': 'Zwiń',
+  'component.tagSelect.all': 'Wszystkie',
+};

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

@@ -0,0 +1,14 @@
+export default {
+  'component.globalHeader.search': 'Szukaj',
+  'component.globalHeader.help': 'Pomoc',
+  'component.globalHeader.notification': 'Powiadomienie',
+  'component.globalHeader.notification.empty': 'Przeczytałeś wszystkie powiadomienia.',
+  'component.globalHeader.message': 'Widomość',
+  'component.globalHeader.message.empty': 'Przeczytałeś wszystkie wiadomości.',
+  'component.globalHeader.event': 'Zdarzenia',
+  'component.globalHeader.event.empty': 'Przeczytałeś wszystkie zdarzenia.',
+  'component.noticeIcon.clear': 'Wyczyść',
+  'component.noticeIcon.cleared': 'Wyczyszczono',
+  'component.noticeIcon.empty': 'Brak powiadomień',
+  'component.noticeIcon.view-more': 'Zobacz więcej',
+};

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

@@ -0,0 +1,15 @@
+export const globalsLocale = {
+  error: 'Błąd',
+  lists: {
+    edit: 'Edycja',
+    delete: 'Usuń',
+    create: 'Utwórz',
+    total: 'Łącznie',
+    actions: 'Akcje',
+    failedDownload: 'Nie udało się pobrać elementów',
+  },
+  form: {
+    save: 'Zapisz',
+    reset: 'Wyczyść',
+  },
+};