Merged PR 410: 画面実装（ActiveWorktypeID設定セレクトボックス）

## 概要
[Task2623: 画面実装（ActiveWorktypeID設定セレクトボックス）](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/2623)

- WorktypeID設定画面でのActiveWorktypeID選択処理を実装しました。

## レビューポイント
- WorkTypeIDの変更時の処理に問題はないか
- 画面の表示に問題はないか

## UIの変更
- [Task2623](https://ndstokyo.sharepoint.com/:f:/r/sites/Piranha/Shared%20Documents/General/OMDS/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88/Task2623?csf=1&web=1&e=sUPTbC)

## 動作確認状況
- ローカルで確認

dictation_client/src/api/api.ts

@@ -824,7 +824,7 @@ export interface GetRelationsResponse {
      * @type {string}
      * @memberof GetRelationsResponse
      */
-    'encryptionPassword': string | null;
+    'encryptionPassword'?: string;
     /**
      * アカウントがデフォルトで利用するWorkTypeID（アカウントに紐づくWorkTypeIDから一つ指定。activeWorktypeがなければ空文字を返却する）
      * @type {string}
@@ -969,7 +969,7 @@ export interface GetWorktypesResponse {
      * @type {number}
      * @memberof GetWorktypesResponse
      */
-    'acrive'?: number;
+    'active'?: number;
 }
 /**
  * 
@@ -1307,12 +1307,6 @@ export interface PostUpdateUserRequest {
  * @interface PostWorktypeOptionItem
  */
 export interface PostWorktypeOptionItem {
-    /**
-     * 
-     * @type {number}
-     * @memberof PostWorktypeOptionItem
-     */
-    'id': number;
     /**
      * 
      * @type {string}
@@ -1682,7 +1676,7 @@ export interface UpdateAccountInfoRequest {
      * @type {number}
      * @memberof UpdateAccountInfoRequest
      */
-    'parentAccountId': number;
+    'parentAccountId'?: number;
     /**
      * 代行操作許可
      * @type {boolean}
@@ -1694,13 +1688,13 @@ export interface UpdateAccountInfoRequest {
      * @type {number}
      * @memberof UpdateAccountInfoRequest
      */
-    'primaryAdminUserId': number;
+    'primaryAdminUserId'?: number;
     /**
      * セカンダリ管理者ID
      * @type {number}
      * @memberof UpdateAccountInfoRequest
      */
-    'secondryAdminUserId': number;
+    'secondryAdminUserId'?: number;
 }
 /**
  * 

dictation_client/src/features/workflow/worktype/operations.ts

@@ -284,3 +284,55 @@ export const editOptionItemsAsync = createAsyncThunk<
     return thunkApi.rejectWithValue({ error });
   }
 });
+
+export const updateActiveWorktypeAsync = createAsyncThunk<
+  {
+    // return empty
+  },
+  { id?: number | undefined },
+  {
+    // rejectした時の返却値の型
+    rejectValue: {
+      error: ErrorObject;
+    };
+  }
+>("workflow/updateActiveWorktypeAsync", async (args, thunkApi) => {
+  // apiのConfigurationを取得する
+  const { getState } = thunkApi;
+  const state = getState() as RootState;
+  const { configuration, accessToken } = state.auth;
+  const config = new Configuration(configuration);
+  const accountsApi = new AccountsApi(config);
+  const { id } = args;
+
+  try {
+    await accountsApi.activeWorktype(
+      { id },
+      {
+        headers: { authorization: `Bearer ${accessToken}` },
+      }
+    );
+
+    return {};
+  } catch (e) {
+    // e ⇒ errorObjectに変換"
+    const error = createErrorObject(e);
+
+    let errorMessage = getTranslationID("common.message.internalServerError");
+
+    // ActiveWorktypeの保存に失敗した場合
+    if (error.code === "E011003") {
+      errorMessage = getTranslationID(
+        "worktypeIdSetting.message.updateActiveWorktypeFailedError"
+      );
+    }
+
+    thunkApi.dispatch(
+      openSnackbar({
+        level: "error",
+        message: errorMessage,
+      })
+    );
+    return thunkApi.rejectWithValue({ error });
+  }
+});

dictation_client/src/features/workflow/worktype/selectors.ts

@@ -70,3 +70,6 @@ export const selectHasErrorOptionItems = (state: RootState) => {
 // isOptionItemsLoadingを取得する
 export const selectIsOptionItemsLoading = (state: RootState) =>
   state.worktype.apps.isOptionItemsLoading;
+
+export const selectActiveWorktypeId = (state: RootState) =>
+  state.worktype.apps.activeWorktypeId;

dictation_client/src/features/workflow/worktype/state.ts

@@ -15,6 +15,7 @@ export interface Apps {
   worktypeId: string;
   description?: string;
   optionItems?: OptionItem[];
+  activeWorktypeId?: number | undefined;
 }
 
 export interface Domain {

dictation_client/src/features/workflow/worktype/worktypeSlice.ts

@@ -6,6 +6,7 @@ import {
   editWorktypeAsync,
   getOptionItemsAsync,
   listWorktypesAsync,
+  updateActiveWorktypeAsync,
 } from "./operations";
 import { OptionItem, isOptionItemDefaultValueType } from "./types";
 import { OPTION_ITEMS_DEFAULT_VALUE_TYPE } from "./constants";
@@ -20,6 +21,7 @@ const initialState: WorktypeState = {
     worktypeId: "",
     description: undefined,
     optionItems: undefined,
+    activeWorktypeId: undefined,
   },
   domain: {},
 };
@@ -82,9 +84,10 @@ export const worktypeSlice = createSlice({
       state.apps.isLoading = true;
     });
     builder.addCase(listWorktypesAsync.fulfilled, (state, action) => {
-      // TODO:Active WorktypeIDも取得する
+      const { worktypes, active } = action.payload;
-      const { worktypes } = action.payload;
+
       state.domain.worktypes = worktypes;
+      state.apps.activeWorktypeId = active;
       state.apps.isLoading = false;
     });
     builder.addCase(listWorktypesAsync.rejected, (state) => {
@@ -137,6 +140,15 @@ export const worktypeSlice = createSlice({
     builder.addCase(editOptionItemsAsync.rejected, (state) => {
       state.apps.isOptionItemsLoading = false;
     });
+    builder.addCase(updateActiveWorktypeAsync.pending, (state) => {
+      state.apps.isLoading = true;
+    });
+    builder.addCase(updateActiveWorktypeAsync.fulfilled, (state) => {
+      state.apps.isLoading = false;
+    });
+    builder.addCase(updateActiveWorktypeAsync.rejected, (state) => {
+      state.apps.isLoading = false;
+    });
   },
 });
 export const {

dictation_client/src/pages/PartnerPage/index.tsx

@@ -24,7 +24,6 @@ import personAdd from "../../assets/images/person_add.svg";
 import { TIERS } from "../../components/auth/constants";
 import { AddPartnerAccountPopup } from "./addPartnerAccountPopup";
 import checkFill from "../../assets/images/check_fill.svg";
-import checkOutline from "../../assets/images/check_outline.svg";
 
 const PartnerPage: React.FC = (): JSX.Element => {
   const dispatch: AppDispatch = useDispatch();

dictation_client/src/pages/WorkTypeIdSettingPage/index.tsx

@@ -1,7 +1,7 @@
 import { UpdateTokenTimer } from "components/auth/updateTokenTimer";
 import Footer from "components/footer";
 import Header from "components/header";
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { getTranslationID } from "translation";
 import styles from "styles/app.module.scss";
 import undo from "assets/images/undo.svg";
@@ -14,8 +14,10 @@ import {
   changeWorktypeId,
   changeDescription,
   listWorktypesAsync,
+  updateActiveWorktypeAsync,
   selectIsLoading,
   selectWorktypes,
+  selectActiveWorktypeId,
 } from "features/workflow/worktype";
 import { AppDispatch } from "app/store";
 import { AddWorktypeIdPopup } from "./addWorktypeIdPopup";
@@ -27,6 +29,8 @@ const WorktypeIdSettingPage: React.FC = (): JSX.Element => {
   const [t] = useTranslation();
   const isLoading = useSelector(selectIsLoading);
   const worktypes = useSelector(selectWorktypes);
+  const activeWorktypeId = useSelector(selectActiveWorktypeId);
+
   const [selectedRow, setSelectedRow] = useState<number>(NaN);
   // 追加Popupの表示制御
   const [isShowAddPopup, setIsShowAddPopup] = useState<boolean>(false);
@@ -34,10 +38,34 @@ const WorktypeIdSettingPage: React.FC = (): JSX.Element => {
   const [isShowEditPopup, setIsShowEditPopup] = useState<boolean>(false);
   const [isShowEditOptionItemPopup, setIsShowEditOptionItemPopup] =
     useState<boolean>(false);
+
   useEffect(() => {
     dispatch(listWorktypesAsync());
   }, [dispatch]);
 
+  const onChangeActiveWorktype = useCallback(
+    async (e: React.ChangeEvent<HTMLSelectElement>) => {
+      // ダイアログ確認
+      if (
+        // eslint-disable-next-line no-alert
+        !window.confirm(t(getTranslationID("common.message.dialogConfirm")))
+      ) {
+        return;
+      }
+      const { value } = e.target;
+      const active = value === "" ? undefined : Number(value);
+
+      const { meta } = await dispatch(
+        updateActiveWorktypeAsync({ id: active })
+      );
+
+      if (meta.requestStatus === "fulfilled") {
+        dispatch(listWorktypesAsync());
+      }
+    },
+    [dispatch, t]
+  );
+
   return (
     <>
       <AddWorktypeIdPopup
@@ -109,7 +137,14 @@ const WorktypeIdSettingPage: React.FC = (): JSX.Element => {
                         "worktypeIdSetting.label.activeWorktypeId"
                       )
                     )}:`}
-                    <select name="Active Worktype" className={styles.formInput}>
+                    <select
+                      name="Active Worktype"
+                      className={styles.formInput}
+                      value={activeWorktypeId}
+                      onChange={onChangeActiveWorktype}
+                    >
+                      {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
+                      <option value="" />
                       {worktypes?.map((worktype) => (
                         <option key={worktype.id} value={worktype.id}>
                           {worktype.worktypeId}

dictation_client/src/translation/de.json

@@ -409,7 +409,8 @@
       "worktypeIDLimitError": "(de)Worktype IDが登録件数の上限に達しているため追加できません。",
       "optionItemInvalidError": "(de)Default valueがDefaultに設定されている場合、Initial valueは入力が必須です。",
       "optionItemSaveFailedError": "(de)オプションアイテムの保存に失敗しました。画面を更新し、再度実行してください",
-      "optionItemIncorrectError": "(de)入力されたItem labelまたはInitial valueがルールを満たしていません。下記のルールを満たす値を入力してください"
+      "optionItemIncorrectError": "(de)入力されたItem labelまたはInitial valueがルールを満たしていません。下記のルールを満たす値を入力してください",
+      "updateActiveWorktypeFailedError": "(de)Active WorktypeIDの保存に失敗しました。画面を更新し、再度実行してください"
     }
   },
   "partnerPage": {
@@ -426,5 +427,29 @@
       "partners": "(de)partners",
       "deleteAccount": "(de)Delete Account"
     }
+  },
+  "accountPage": {
+    "label": {
+      "title": "(de)Account",
+      "fileDeleteSetting": "(de)File Delete Setting",
+      "accountInformation": "(de)Account Information",
+      "companyName": "(de)Company Name",
+      "accountID": "(de)Account ID",
+      "yourCategory": "(de)Your Category",
+      "yourCountry": "(de)Your Country",
+      "yourDealer": "(de)Your Dealer（Upper layer）",
+      "selectDealer": "(de)Select Dealer",
+      "dealerManagement": "(de)Dealer Management",
+      "administratorInformation": "(de)Administrator Information",
+      "primaryAdministrator": "(de)Primary Administrator",
+      "secondaryAdministrator": "(de)Secondary Administrator",
+      "emailAddress": "(de)E-mail address",
+      "selectSecondaryAdministrator": "(de)Select Secondary Administrator",
+      "saveChanges": "(de)Save Changes",
+      "deleteAccount": "(de)Delete Account"
+    },
+    "message": {
+      "updateAccountFailedError": "(de)アカウント情報の保存に失敗しました。画面を更新し、再度実行してください"
+    }
   }
 }

dictation_client/src/translation/en.json

@@ -409,7 +409,8 @@
       "worktypeIDLimitError": "Worktype IDが登録件数の上限に達しているため追加できません。",
       "optionItemInvalidError": "Default valueがDefaultに設定されている場合、Initial valueは入力が必須です。",
       "optionItemSaveFailedError": "オプションアイテムの保存に失敗しました。画面を更新し、再度実行してください",
-      "optionItemIncorrectError": "入力されたItem labelまたはInitial valueがルールを満たしていません。下記のルールを満たす値を入力してください"
+      "optionItemIncorrectError": "入力されたItem labelまたはInitial valueがルールを満たしていません。下記のルールを満たす値を入力してください",
+      "updateActiveWorktypeFailedError": "Active WorktypeIDの保存に失敗しました。画面を更新し、再度実行してください"
     }
   },
   "partnerPage": {
@@ -426,5 +427,29 @@
       "partners": "partners",
       "deleteAccount": "Delete Account"
     }
+  },
+  "accountPage": {
+    "label": {
+      "title": "Account",
+      "fileDeleteSetting": "File Delete Setting",
+      "accountInformation": "Account Information",
+      "companyName": "Company Name",
+      "accountID": "Account ID",
+      "yourCategory": "Your Category",
+      "yourCountry": "Your Country",
+      "yourDealer": "Your Dealer（Upper layer）",
+      "selectDealer": "Select Dealer",
+      "dealerManagement": "Dealer Management",
+      "administratorInformation": "Administrator Information",
+      "primaryAdministrator": "Primary Administrator",
+      "secondaryAdministrator": "Secondary Administrator",
+      "emailAddress": "E-mail address",
+      "selectSecondaryAdministrator": "Select Secondary Administrator",
+      "saveChanges": "Save Changes",
+      "deleteAccount": "Delete Account"
+    },
+    "message": {
+      "updateAccountFailedError": "アカウント情報の保存に失敗しました。画面を更新し、再度実行してください"
+    }
   }
 }

dictation_client/src/translation/es.json

@@ -409,7 +409,8 @@
       "worktypeIDLimitError": "(es)Worktype IDが登録件数の上限に達しているため追加できません。",
       "optionItemInvalidError": "(es)Default valueがDefaultに設定されている場合、Initial valueは入力が必須です。",
       "optionItemSaveFailedError": "(es)オプションアイテムの保存に失敗しました。画面を更新し、再度実行してください",
-      "optionItemIncorrectError": "(es)入力されたItem labelまたはInitial valueがルールを満たしていません。下記のルールを満たす値を入力してください"
+      "optionItemIncorrectError": "(es)入力されたItem labelまたはInitial valueがルールを満たしていません。下記のルールを満たす値を入力してください",
+      "updateActiveWorktypeFailedError": "(es)Active WorktypeIDの保存に失敗しました。画面を更新し、再度実行してください"
     }
   },
   "partnerPage": {
@@ -426,5 +427,29 @@
       "partners": "(es)partners",
       "deleteAccount": "(es)Delete Account"
     }
+  },
+  "accountPage": {
+    "label": {
+      "title": "(es)Account",
+      "fileDeleteSetting": "(es)File Delete Setting",
+      "accountInformation": "(es)Account Information",
+      "companyName": "(es)Company Name",
+      "accountID": "(es)Account ID",
+      "yourCategory": "(es)Your Category",
+      "yourCountry": "(es)Your Country",
+      "yourDealer": "(es)Your Dealer（Upper layer）",
+      "selectDealer": "(es)Select Dealer",
+      "dealerManagement": "(es)Dealer Management",
+      "administratorInformation": "(es)Administrator Information",
+      "primaryAdministrator": "(es)Primary Administrator",
+      "secondaryAdministrator": "(es)Secondary Administrator",
+      "emailAddress": "(es)E-mail address",
+      "selectSecondaryAdministrator": "(es)Select Secondary Administrator",
+      "saveChanges": "(es)Save Changes",
+      "deleteAccount": "(es)Delete Account"
+    },
+    "message": {
+      "updateAccountFailedError": "(es)アカウント情報の保存に失敗しました。画面を更新し、再度実行してください"
+    }
   }
 }

dictation_client/src/translation/fr.json

@@ -409,7 +409,8 @@
       "worktypeIDLimitError": "(fr)Worktype IDが登録件数の上限に達しているため追加できません。",
       "optionItemInvalidError": "(fr)Default valueがDefaultに設定されている場合、Initial valueは入力が必須です。",
       "optionItemSaveFailedError": "(fr)オプションアイテムの保存に失敗しました。画面を更新し、再度実行してください",
-      "optionItemIncorrectError": "(fr)入力されたItem labelまたはInitial valueがルールを満たしていません。下記のルールを満たす値を入力してください"
+      "optionItemIncorrectError": "(fr)入力されたItem labelまたはInitial valueがルールを満たしていません。下記のルールを満たす値を入力してください",
+      "updateActiveWorktypeFailedError": "(fr)Active WorktypeIDの保存に失敗しました。画面を更新し、再度実行してください"
     }
   },
   "partnerPage": {
@@ -426,5 +427,29 @@
       "partners": "(fr)partners",
       "deleteAccount": "(fr)Delete Account"
     }
+  },
+  "accountPage": {
+    "label": {
+      "title": "(fr)Account",
+      "fileDeleteSetting": "(fr)File Delete Setting",
+      "accountInformation": "(fr)Account Information",
+      "companyName": "(fr)Company Name",
+      "accountID": "(fr)Account ID",
+      "yourCategory": "(fr)Your Category",
+      "yourCountry": "(fr)Your Country",
+      "yourDealer": "(fr)Your Dealer（Upper layer）",
+      "selectDealer": "(fr)Select Dealer",
+      "dealerManagement": "(fr)Dealer Management",
+      "administratorInformation": "(fr)Administrator Information",
+      "primaryAdministrator": "(fr)Primary Administrator",
+      "secondaryAdministrator": "(fr)Secondary Administrator",
+      "emailAddress": "(fr)E-mail address",
+      "selectSecondaryAdministrator": "(fr)Select Secondary Administrator",
+      "saveChanges": "(fr)Save Changes",
+      "deleteAccount": "(fr)Delete Account"
+    },
+    "message": {
+      "updateAccountFailedError": "(fr)アカウント情報の保存に失敗しました。画面を更新し、再度実行してください"
+    }
   }
 }