From a78fce7efbf1ec0a2c902a8deb32a80f37c58567 Mon Sep 17 00:00:00 2001 From: Chito Wong Date: Fri, 21 Jul 2023 18:48:31 +0800 Subject: [PATCH 1/2] #493 Split company dropdown options in groups --- package-lock.json | 14 +++++----- package.json | 2 +- src/components/hooks/use-company-options.tsx | 27 +++++++++++++++++++ src/components/modal/submit-modal.tsx | 4 +-- src/components/templates-view/page-header.tsx | 19 ++++--------- .../ticket-view/company-section.tsx | 19 +++---------- src/i18n/translations/zh-Hans.json | 3 +++ src/i18n/translations/zh-Hant.json | 3 +++ src/redux/app/app-slice.ts | 12 +++++---- src/redux/init.ts | 4 +-- 10 files changed, 61 insertions(+), 46 deletions(-) create mode 100644 src/components/hooks/use-company-options.tsx diff --git a/package-lock.json b/package-lock.json index b68b7b41..1a12c746 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@chakra-ui/react": "^2.7.1", "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", - "@railmapgen/rmg-components": "^7.1.6", + "@railmapgen/rmg-components": "^7.1.7", "@railmapgen/rmg-runtime": "^7.0.1", "@railmapgen/rmg-templates-resources": "file:package/dist", "@railmapgen/rmg-translate": "^3.0.1", @@ -3695,9 +3695,9 @@ } }, "node_modules/@railmapgen/rmg-components": { - "version": "7.1.6", - "resolved": "https://registry.npmjs.org/@railmapgen/rmg-components/-/rmg-components-7.1.6.tgz", - "integrity": "sha512-4Ni0p8wYHVHoWpPBDnOwvF25VoDYA1X+NuXcy4RoS481Eh64Mps1cmM2a/MMIQ9Y4dW9DTW5LSSg9QnJwV40aw==", + "version": "7.1.7", + "resolved": "https://registry.npmjs.org/@railmapgen/rmg-components/-/rmg-components-7.1.7.tgz", + "integrity": "sha512-vJQzBRSgup7AQCA9LIRqAnJB5d3jH/ENuvnWhqGy4Qq/+1Ja34A96Va+3x0Dy5z4hLI62EDt1UqpUFw/VmLmSg==", "dependencies": { "resize-observer-polyfill": "^1.5.1" }, @@ -14040,9 +14040,9 @@ "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==" }, "@railmapgen/rmg-components": { - "version": "7.1.6", - "resolved": "https://registry.npmjs.org/@railmapgen/rmg-components/-/rmg-components-7.1.6.tgz", - "integrity": "sha512-4Ni0p8wYHVHoWpPBDnOwvF25VoDYA1X+NuXcy4RoS481Eh64Mps1cmM2a/MMIQ9Y4dW9DTW5LSSg9QnJwV40aw==", + "version": "7.1.7", + "resolved": "https://registry.npmjs.org/@railmapgen/rmg-components/-/rmg-components-7.1.7.tgz", + "integrity": "sha512-vJQzBRSgup7AQCA9LIRqAnJB5d3jH/ENuvnWhqGy4Qq/+1Ja34A96Va+3x0Dy5z4hLI62EDt1UqpUFw/VmLmSg==", "requires": { "resize-observer-polyfill": "^1.5.1" } diff --git a/package.json b/package.json index 5c312289..2fb1ba44 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "@chakra-ui/react": "^2.7.1", "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", - "@railmapgen/rmg-components": "^7.1.6", + "@railmapgen/rmg-components": "^7.1.7", "@railmapgen/rmg-runtime": "^7.0.1", "@railmapgen/rmg-templates-resources": "file:package/dist", "@railmapgen/rmg-translate": "^3.0.1", diff --git a/src/components/hooks/use-company-options.tsx b/src/components/hooks/use-company-options.tsx new file mode 100644 index 00000000..92ab18ab --- /dev/null +++ b/src/components/hooks/use-company-options.tsx @@ -0,0 +1,27 @@ +import { useRootSelector } from '../../redux'; +import { useTranslation } from 'react-i18next'; +import useTranslatedName from './use-translated-name'; + +export default function useCompanyOptions() { + const { t, i18n } = useTranslation(); + const translateName = useTranslatedName(); + + const { coreCompanyConfig, otherCompanyConfig } = useRootSelector(state => state.app); + + const coreOptions = coreCompanyConfig + .map(company => [company.id, translateName(company.name)]) // translate country name + .reduce>( + (acc, cur) => { + return { ...acc, [cur[0]]: cur[1] }; + }, + { '': t('Please select...') } + ); + const otherOptions = otherCompanyConfig + .map(company => [company.id, translateName(company.name)]) // translate country name + .sort((a, b) => a[1].localeCompare(b[1], i18n.languages[0])) // sort + .reduce>((acc, cur) => { + return { ...acc, [cur[0]]: cur[1] }; + }, {}); + + return { [t('Core companies')]: coreOptions, [t('Other companies')]: otherOptions }; +} diff --git a/src/components/modal/submit-modal.tsx b/src/components/modal/submit-modal.tsx index 76a1a4dc..30d03d9d 100644 --- a/src/components/modal/submit-modal.tsx +++ b/src/components/modal/submit-modal.tsx @@ -24,9 +24,9 @@ export default function SubmitModal(props: SubmitModalProps) { const [majorUpdateJustifications, setMajorUpdateJustifications] = useState>({}); const [isFinishJustification, setIsFinishJustification] = useState(false); - const { companyConfig, templateList } = useRootSelector(state => state.app); + const { coreCompanyConfig, otherCompanyConfig, templateList } = useRootSelector(state => state.app); const ticket = useRootSelector(state => state.ticket); - const companyName = ticketSelectors.getCompanyEnglishName(ticket, companyConfig); + const companyName = ticketSelectors.getCompanyEnglishName(ticket, [...coreCompanyConfig, ...otherCompanyConfig]); const companyBlock = ticketSelectors.getCompanyBlock(ticket); const templateBlocks = ticketSelectors.getTemplateBlocks(ticket); diff --git a/src/components/templates-view/page-header.tsx b/src/components/templates-view/page-header.tsx index d7fc4bdc..bf351931 100644 --- a/src/components/templates-view/page-header.tsx +++ b/src/components/templates-view/page-header.tsx @@ -3,30 +3,21 @@ import { setSelectedCompany } from '../../redux/app/app-slice'; import { RmgFields, RmgFieldsField, RmgPageHeader } from '@railmapgen/rmg-components'; import { useRootSelector } from '../../redux'; import { useTranslation } from 'react-i18next'; -import useTranslatedName from '../hooks/use-translated-name'; import { Button, HStack } from '@chakra-ui/react'; import rmgRuntime from '@railmapgen/rmg-runtime'; import { useNavigate } from 'react-router-dom'; import { Events } from '../../util/constant'; +import useCompanyOptions from '../hooks/use-company-options'; export default function PageHeader() { - const { t, i18n } = useTranslation(); - const translateName = useTranslatedName(); + const { t } = useTranslation(); const dispatch = useDispatch(); const navigate = useNavigate(); - const { companyConfig, selectedCompany } = useRootSelector(state => state.app); - - const companyOptions = companyConfig - .map(company => [company.id, translateName(company.name)]) // translate country name - .sort((a, b) => a[1].localeCompare(b[1], i18n.languages[0])) // sort - .reduce>( - (acc, cur) => { - return { ...acc, [cur[0]]: cur[1] }; - }, - { '': t('Please select...') } - ); + const { selectedCompany } = useRootSelector(state => state.app); + + const companyOptions = useCompanyOptions(); const fields: RmgFieldsField[] = [ { diff --git a/src/components/ticket-view/company-section.tsx b/src/components/ticket-view/company-section.tsx index fd7d9938..6aa84ec2 100644 --- a/src/components/ticket-view/company-section.tsx +++ b/src/components/ticket-view/company-section.tsx @@ -11,34 +11,23 @@ import { } from '../../redux/ticket/ticket-slice'; import { LANGUAGE_NAMES, SUPPORTED_LANGUAGES } from '@railmapgen/rmg-translate'; import OptionalLanguageEntries from './optional-language-entries'; +import useCompanyOptions from '../hooks/use-company-options'; export default function CompanySection() { - const { t, i18n } = useTranslation(); + const { t } = useTranslation(); const translateName = useTranslatedName(); const dispatch = useRootDispatch(); - const { companyConfig } = useRootSelector(state => state.app); const { company, newCompany, companyName, companyOptionalName } = useRootSelector(state => state.ticket); - const companyOptions = { - ...companyConfig - .map(company => [company.id, translateName(company.name)]) // translate country name - .sort((a, b) => a[1].localeCompare(b[1], i18n.languages[0])) // sort - .reduce>( - (acc, cur) => { - return { ...acc, [cur[0]]: cur[1] }; - }, - { '': t('Please select...') } - ), - new: t('Add a company...'), - }; + const companyOptions = useCompanyOptions(); const fields: RmgFieldsField[] = [ { type: 'select', label: t('Company'), value: company, - options: companyOptions, + options: { ...companyOptions, [t('New')]: { new: t('Add a company...') } }, disabledOptions: [''], onChange: value => dispatch(setCompany(value as string)), }, diff --git a/src/i18n/translations/zh-Hans.json b/src/i18n/translations/zh-Hans.json index dee0ed73..6164a2e2 100644 --- a/src/i18n/translations/zh-Hans.json +++ b/src/i18n/translations/zh-Hans.json @@ -11,6 +11,7 @@ "Close": "关闭", "Company": "公司", "Company code": "公司代码", + "Core companies": "主要公司", "Follow the instructions below to open an Issue": "按下方的指引打开 Issue", "Import from": "导入自", "Justification for major update of": "重大更新的理由：", @@ -18,6 +19,8 @@ "Line code": "线路代码", "Local": "本地", "Major update": "重大更新", + "New": "添加", + "Other companies": "其他公司", "Please provide suitable source and justification.": "请您提供适当的来源和理由。", "Railway company": "铁路公司", "Remove this line": "删除此线路", diff --git a/src/i18n/translations/zh-Hant.json b/src/i18n/translations/zh-Hant.json index 7a0f51d4..7613854e 100644 --- a/src/i18n/translations/zh-Hant.json +++ b/src/i18n/translations/zh-Hant.json @@ -11,6 +11,7 @@ "Close": "關閉", "Company": "公司", "Company code": "公司代碼", + "Core companies": "主要公司", "Follow the instructions below to open an Issue": "按下方的指引開啟 Issue", "Import from": "讀入自", "Justification for major update of": "重大更新的理由：", @@ -18,6 +19,8 @@ "Line code": "路線代碼", "Local": "本機", "Major update": "重大更新", + "New": "新增", + "Other companies": "其他公司", "Please provide suitable source and justification.": "請你提供適當的來源及理由。", "Railway company": "鐵路公司", "Remove this line": "移除此路線", diff --git a/src/redux/app/app-slice.ts b/src/redux/app/app-slice.ts index baa95fdb..7e107b41 100644 --- a/src/redux/app/app-slice.ts +++ b/src/redux/app/app-slice.ts @@ -2,13 +2,15 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'; import { CompanyEntry, coreCompanyConfig, coreTemplateList, TemplateEntry } from '@railmapgen/rmg-templates-resources'; interface AppState { - companyConfig: CompanyEntry[]; + coreCompanyConfig: CompanyEntry[]; + otherCompanyConfig: CompanyEntry[]; templateList: Record; selectedCompany: string; } const initialState: AppState = { - companyConfig: coreCompanyConfig, + coreCompanyConfig: coreCompanyConfig, + otherCompanyConfig: [], templateList: coreTemplateList, selectedCompany: '', }; @@ -17,8 +19,8 @@ const appSlice = createSlice({ name: 'app', initialState, reducers: { - appendCompanies: (state, action: PayloadAction) => { - state.companyConfig = state.companyConfig.concat(action.payload); + setOtherCompanyConfig: (state, action: PayloadAction) => { + state.otherCompanyConfig = action.payload; }, setTemplateListByCompany: (state, action: PayloadAction<{ company: string; templates: TemplateEntry[] }>) => { @@ -32,5 +34,5 @@ const appSlice = createSlice({ }, }); -export const { appendCompanies, setTemplateListByCompany, setSelectedCompany } = appSlice.actions; +export const { setOtherCompanyConfig, setTemplateListByCompany, setSelectedCompany } = appSlice.actions; export default appSlice.reducer; diff --git a/src/redux/init.ts b/src/redux/init.ts index 3455e516..da93b7f7 100644 --- a/src/redux/init.ts +++ b/src/redux/init.ts @@ -1,6 +1,6 @@ import { RootStore } from './index'; import { CompanyEntry } from '@railmapgen/rmg-templates-resources'; -import { appendCompanies } from './app/app-slice'; +import { setOtherCompanyConfig } from './app/app-slice'; const $ = document.querySelector.bind(document); @@ -22,7 +22,7 @@ const fetchOtherCompanyConfig = async (): Promise => { const initCompanyConfig = async (store: RootStore) => { const companyConfig = await fetchOtherCompanyConfig(); - store.dispatch(appendCompanies(companyConfig)); + store.dispatch(setOtherCompanyConfig(companyConfig)); }; export default async function initStore(store: RootStore) { From 7c7f550b85d91074c627ec3fdb0f0aabeddb7a6e Mon Sep 17 00:00:00 2001 From: Chito Wong Date: Fri, 21 Jul 2023 18:50:53 +0800 Subject: [PATCH 2/2] #491 Tune templates grid style and add translation --- src/components/templates-view/templates-grid.tsx | 4 ++-- src/i18n/translations/zh-Hans.json | 1 + src/i18n/translations/zh-Hant.json | 1 + 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/templates-view/templates-grid.tsx b/src/components/templates-view/templates-grid.tsx index ff3acdc2..481e65f3 100644 --- a/src/components/templates-view/templates-grid.tsx +++ b/src/components/templates-view/templates-grid.tsx @@ -25,13 +25,13 @@ export default function TemplatesGrid() { if (!templates.length) { return ( - No templates available in selected company. + {t('No templates available in selected company.')} ); } return ( - + {templates.map(template => ( diff --git a/src/i18n/translations/zh-Hans.json b/src/i18n/translations/zh-Hans.json index 6164a2e2..159c7607 100644 --- a/src/i18n/translations/zh-Hans.json +++ b/src/i18n/translations/zh-Hans.json @@ -20,6 +20,7 @@ "Local": "本地", "Major update": "重大更新", "New": "添加", + "No templates available in selected company.": "所选公司没有可用的模版。", "Other companies": "其他公司", "Please provide suitable source and justification.": "请您提供适当的来源和理由。", "Railway company": "铁路公司", diff --git a/src/i18n/translations/zh-Hant.json b/src/i18n/translations/zh-Hant.json index 7613854e..d6d2ba62 100644 --- a/src/i18n/translations/zh-Hant.json +++ b/src/i18n/translations/zh-Hant.json @@ -20,6 +20,7 @@ "Local": "本機", "Major update": "重大更新", "New": "新增", + "No templates available in selected company.": "所選公司沒有可用的範本。", "Other companies": "其他公司", "Please provide suitable source and justification.": "請你提供適當的來源及理由。", "Railway company": "鐵路公司",