#493

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

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<Record<string, string>>(
+            (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<Record<string, string>>((acc, cur) => {
+            return { ...acc, [cur[0]]: cur[1] };
+        }, {});
+
+    return { [t('Core companies')]: coreOptions, [t('Other companies')]: otherOptions };
+}

src/components/modal/submit-modal.tsx

@@ -24,9 +24,9 @@ export default function SubmitModal(props: SubmitModalProps) {
     const [majorUpdateJustifications, setMajorUpdateJustifications] = useState<Record<string, string>>({});
     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);
 

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<Record<string, string>>(
-            (acc, cur) => {
-                return { ...acc, [cur[0]]: cur[1] };
-            },
-            { '': t('Please select...') }
-        );
+    const { selectedCompany } = useRootSelector(state => state.app);
+
+    const companyOptions = useCompanyOptions();
 
     const fields: RmgFieldsField[] = [
         {

src/components/templates-view/templates-grid.tsx

@@ -25,13 +25,13 @@ export default function TemplatesGrid() {
     if (!templates.length) {
         return (
             <Flex h="100%" w="100%" alignItems="center" justifyContent="center">
-                <Text as="i">No templates available in selected company.</Text>
+                <Text as="i">{t('No templates available in selected company.')}</Text>
             </Flex>
         );
     }
 
     return (
-        <SimpleGrid minChildWidth={220} spacing={2} maxH="100%" overflowY="scroll">
+        <SimpleGrid minChildWidth={220} spacing={2} px={2} maxH="100%" overflowY="scroll">
             {templates.map(template => (
                 <RmgCard key={template.filename} sx={cardStyles}>
                     <Heading as="h2" size="md">

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<Record<string, string>>(
-                (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)),
         },

src/i18n/translations/zh-Hans.json

@@ -11,13 +11,17 @@
     "Close": "关闭",
     "Company": "公司",
     "Company code": "公司代码",
+    "Core companies": "主要公司",
     "Follow the instructions below to open an Issue": "按下方的指引打开 Issue",
     "Import from": "导入自",
     "Justification for major update of": "重大更新的理由：",
     "Line": "线路",
     "Line code": "线路代码",
     "Local": "本地",
     "Major update": "重大更新",
+    "New": "添加",
+    "No templates available in selected company.": "所选公司没有可用的模版。",
+    "Other companies": "其他公司",
     "Please provide suitable source and justification.": "请您提供适当的来源和理由。",
     "Railway company": "铁路公司",
     "Remove this line": "删除此线路",

src/i18n/translations/zh-Hant.json

@@ -11,13 +11,17 @@
     "Close": "關閉",
     "Company": "公司",
     "Company code": "公司代碼",
+    "Core companies": "主要公司",
     "Follow the instructions below to open an Issue": "按下方的指引開啟 Issue",
     "Import from": "讀入自",
     "Justification for major update of": "重大更新的理由：",
     "Line": "路線",
     "Line code": "路線代碼",
     "Local": "本機",
     "Major update": "重大更新",
+    "New": "新增",
+    "No templates available in selected company.": "所選公司沒有可用的範本。",
+    "Other companies": "其他公司",
     "Please provide suitable source and justification.": "請你提供適當的來源及理由。",
     "Railway company": "鐵路公司",
     "Remove this line": "移除此路線",

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<string, TemplateEntry[]>;
     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<CompanyEntry[]>) => {
-            state.companyConfig = state.companyConfig.concat(action.payload);
+        setOtherCompanyConfig: (state, action: PayloadAction<CompanyEntry[]>) => {
+            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;

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<CompanyEntry[]> => {
 
 const initCompanyConfig = async (store: RootStore) => {
     const companyConfig = await fetchOtherCompanyConfig();
-    store.dispatch(appendCompanies(companyConfig));
+    store.dispatch(setOtherCompanyConfig(companyConfig));
 };
 
 export default async function initStore(store: RootStore) {