Merged PR 386: ワークタイプ編集ポップアップ実装

## 概要
[Task2570: ワークタイプ編集ポップアップ実装](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/2570)

- ワークタイプ編集ポップアップを実装しました。
  - ローディング中処理をタスク追加にも追加しています。

## レビューポイント
- 画面の表示は想定通りか
- ローディング中処理の追加に問題はないか

## UIの変更
- [Task2570](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/Task2570?csf=1&web=1&e=bcRjsJ)

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

dictation_client/src/api/api.ts

@@ -757,6 +757,25 @@ export interface GetPartnerLicensesResponse {
      */
     'childrenPartnerLicenses': Array<PartnerLicenseInfo>;
 }
+/**
+ * 
+ * @export
+ * @interface GetPartnersResponse
+ */
+export interface GetPartnersResponse {
+    /**
+     * 合計件数
+     * @type {number}
+     * @memberof GetPartnersResponse
+     */
+    'total': number;
+    /**
+     * 
+     * @type {Array<Partner>}
+     * @memberof GetPartnersResponse
+     */
+    'partners': Array<Partner>;
+}
 /**
  * 
  * @export
@@ -1028,6 +1047,55 @@ export interface OptionItemList {
      */
     'optionItemList': Array<OptionItem>;
 }
+/**
+ * 
+ * @export
+ * @interface Partner
+ */
+export interface Partner {
+    /**
+     * 会社名
+     * @type {string}
+     * @memberof Partner
+     */
+    'name': string;
+    /**
+     * 階層
+     * @type {number}
+     * @memberof Partner
+     */
+    'tier': number;
+    /**
+     * アカウントID
+     * @type {number}
+     * @memberof Partner
+     */
+    'accountId': number;
+    /**
+     * 国
+     * @type {string}
+     * @memberof Partner
+     */
+    'country': string;
+    /**
+     * プライマリ管理者
+     * @type {string}
+     * @memberof Partner
+     */
+    'primaryAdmin': string;
+    /**
+     * プライマリ管理者メールアドレス
+     * @type {string}
+     * @memberof Partner
+     */
+    'email': string;
+    /**
+     * 代行操作許可
+     * @type {boolean}
+     * @memberof Partner
+     */
+    'dealerManagement': boolean;
+}
 /**
  * 
  * @export
@@ -1528,6 +1596,25 @@ export interface UpdateTypistGroupRequest {
      */
     'typistIds': Array<number>;
 }
+/**
+ * 
+ * @export
+ * @interface UpdateWorktypesRequest
+ */
+export interface UpdateWorktypesRequest {
+    /**
+     * WorktypeID
+     * @type {string}
+     * @memberof UpdateWorktypesRequest
+     */
+    'worktypeId': string;
+    /**
+     * Worktypeの説明
+     * @type {string}
+     * @memberof UpdateWorktypesRequest
+     */
+    'description'?: string;
+}
 /**
  * 
  * @export
@@ -2037,6 +2124,54 @@ export const AccountsApiAxiosParamCreator = function (configuration?: Configurat
                 options: localVarRequestOptions,
             };
         },
+        /**
+         * 
+         * @summary 
+         * @param {number} limit 取得件数
+         * @param {number} offset 開始位置
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getPartners: async (limit: number, offset: number, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'limit' is not null or undefined
+            assertParamExists('getPartners', 'limit', limit)
+            // verify required parameter 'offset' is not null or undefined
+            assertParamExists('getPartners', 'offset', offset)
+            const localVarPath = `/accounts/partners`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+            if (limit !== undefined) {
+                localVarQueryParameter['limit'] = limit;
+            }
+
+            if (offset !== undefined) {
+                localVarQueryParameter['offset'] = offset;
+            }
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
         /**
          * ログインしているユーザーのアカウント配下でIDで指定されたタイピストグループを取得します
          * @summary 
@@ -2256,6 +2391,50 @@ export const AccountsApiAxiosParamCreator = function (configuration?: Configurat
             localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
             localVarRequestOptions.data = serializeDataIfNeeded(updateTypistGroupRequest, localVarRequestOptions, configuration)
 
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @summary 
+         * @param {number} id Worktypeの内部ID
+         * @param {UpdateWorktypesRequest} updateWorktypesRequest 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        updateWorktype: async (id: number, updateWorktypesRequest: UpdateWorktypesRequest, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('updateWorktype', 'id', id)
+            // verify required parameter 'updateWorktypesRequest' is not null or undefined
+            assertParamExists('updateWorktype', 'updateWorktypesRequest', updateWorktypesRequest)
+            const localVarPath = `/accounts/worktypes/{id}`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(updateWorktypesRequest, localVarRequestOptions, configuration)
+
             return {
                 url: toPathString(localVarUrlObj),
                 options: localVarRequestOptions,
@@ -2379,6 +2558,18 @@ export const AccountsApiFp = function(configuration?: Configuration) {
             const localVarAxiosArgs = await localVarAxiosParamCreator.getPartnerLicenses(getPartnerLicensesRequest, options);
             return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
         },
+        /**
+         * 
+         * @summary 
+         * @param {number} limit 取得件数
+         * @param {number} offset 開始位置
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getPartners(limit: number, offset: number, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<GetPartnersResponse>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getPartners(limit, offset, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
         /**
          * ログインしているユーザーのアカウント配下でIDで指定されたタイピストグループを取得します
          * @summary 
@@ -2443,6 +2634,18 @@ export const AccountsApiFp = function(configuration?: Configuration) {
             const localVarAxiosArgs = await localVarAxiosParamCreator.updateTypistGroup(typistGroupId, updateTypistGroupRequest, options);
             return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
         },
+        /**
+         * 
+         * @summary 
+         * @param {number} id Worktypeの内部ID
+         * @param {UpdateWorktypesRequest} updateWorktypesRequest 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async updateWorktype(id: number, updateWorktypesRequest: UpdateWorktypesRequest, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<object>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.updateWorktype(id, updateWorktypesRequest, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
     }
 };
 
@@ -2551,6 +2754,17 @@ export const AccountsApiFactory = function (configuration?: Configuration, baseP
         getPartnerLicenses(getPartnerLicensesRequest: GetPartnerLicensesRequest, options?: any): AxiosPromise<GetPartnerLicensesResponse> {
             return localVarFp.getPartnerLicenses(getPartnerLicensesRequest, options).then((request) => request(axios, basePath));
         },
+        /**
+         * 
+         * @summary 
+         * @param {number} limit 取得件数
+         * @param {number} offset 開始位置
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getPartners(limit: number, offset: number, options?: any): AxiosPromise<GetPartnersResponse> {
+            return localVarFp.getPartners(limit, offset, options).then((request) => request(axios, basePath));
+        },
         /**
          * ログインしているユーザーのアカウント配下でIDで指定されたタイピストグループを取得します
          * @summary 
@@ -2609,6 +2823,17 @@ export const AccountsApiFactory = function (configuration?: Configuration, baseP
         updateTypistGroup(typistGroupId: number, updateTypistGroupRequest: UpdateTypistGroupRequest, options?: any): AxiosPromise<object> {
             return localVarFp.updateTypistGroup(typistGroupId, updateTypistGroupRequest, options).then((request) => request(axios, basePath));
         },
+        /**
+         * 
+         * @summary 
+         * @param {number} id Worktypeの内部ID
+         * @param {UpdateWorktypesRequest} updateWorktypesRequest 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        updateWorktype(id: number, updateWorktypesRequest: UpdateWorktypesRequest, options?: any): AxiosPromise<object> {
+            return localVarFp.updateWorktype(id, updateWorktypesRequest, options).then((request) => request(axios, basePath));
+        },
     };
 };
 
@@ -2737,6 +2962,19 @@ export class AccountsApi extends BaseAPI {
         return AccountsApiFp(this.configuration).getPartnerLicenses(getPartnerLicensesRequest, options).then((request) => request(this.axios, this.basePath));
     }
 
+    /**
+     * 
+     * @summary 
+     * @param {number} limit 取得件数
+     * @param {number} offset 開始位置
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AccountsApi
+     */
+    public getPartners(limit: number, offset: number, options?: AxiosRequestConfig) {
+        return AccountsApiFp(this.configuration).getPartners(limit, offset, options).then((request) => request(this.axios, this.basePath));
+    }
+
     /**
      * ログインしているユーザーのアカウント配下でIDで指定されたタイピストグループを取得します
      * @summary 
@@ -2806,6 +3044,19 @@ export class AccountsApi extends BaseAPI {
     public updateTypistGroup(typistGroupId: number, updateTypistGroupRequest: UpdateTypistGroupRequest, options?: AxiosRequestConfig) {
         return AccountsApiFp(this.configuration).updateTypistGroup(typistGroupId, updateTypistGroupRequest, options).then((request) => request(this.axios, this.basePath));
     }
+
+    /**
+     * 
+     * @summary 
+     * @param {number} id Worktypeの内部ID
+     * @param {UpdateWorktypesRequest} updateWorktypesRequest 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AccountsApi
+     */
+    public updateWorktype(id: number, updateWorktypesRequest: UpdateWorktypesRequest, options?: AxiosRequestConfig) {
+        return AccountsApiFp(this.configuration).updateWorktype(id, updateWorktypesRequest, options).then((request) => request(this.axios, this.basePath));
+    }
 }
 
 

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

@@ -110,3 +110,66 @@ export const addWorktypeAsync = createAsyncThunk<
     return thunkApi.rejectWithValue({ error });
   }
 });
+
+export const editWorktypeAsync = createAsyncThunk<
+  {
+    // return empty
+  },
+  void,
+  {
+    // rejectした時の返却値の型
+    rejectValue: {
+      error: ErrorObject;
+    };
+  }
+>("workflow/editWorktypeAsync", 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);
+  // stateからworktypeIdとdescriptionを取得する
+  const { selectedId, worktypeId, description } = state.worktype.apps;
+
+  try {
+    await accountsApi.updateWorktype(
+      selectedId,
+      {
+        worktypeId,
+        description,
+      },
+      {
+        headers: { authorization: `Bearer ${accessToken}` },
+      }
+    );
+    thunkApi.dispatch(
+      openSnackbar({
+        level: "info",
+        message: getTranslationID("common.message.success"),
+      })
+    );
+
+    return {};
+  } catch (e) {
+    // e ⇒ errorObjectに変換"
+    const error = createErrorObject(e);
+
+    let errorMessage = getTranslationID("common.message.internalServerError");
+
+    // 既に同じworktypeIdが存在する場合
+    if (error.code === "E011001") {
+      errorMessage = getTranslationID(
+        "worktypeIdSetting.message.alreadyWorktypeIdExistError"
+      );
+    }
+
+    thunkApi.dispatch(
+      openSnackbar({
+        level: "error",
+        message: errorMessage,
+      })
+    );
+    return thunkApi.rejectWithValue({ error });
+  }
+});

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

@@ -2,9 +2,19 @@ import { RootState } from "app/store";
 
 export const selectWorktypes = (state: RootState) =>
   state.worktype.domain.worktypes;
+
 export const selectIsLoading = (state: RootState) =>
   state.worktype.apps.isLoading;
 
+export const selectIsAddLoading = (state: RootState) =>
+  state.worktype.apps.isAddLoading;
+
+export const selectIsEditLoading = (state: RootState) =>
+  state.worktype.apps.isEditLoading;
+
+export const selectSelectedId = (state: RootState) =>
+  state.worktype.apps.selectedId;
+
 export const selectWorktypeId = (state: RootState) =>
   state.worktype.apps.worktypeId;
 

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

@@ -7,6 +7,9 @@ export interface WorktypeState {
 
 export interface Apps {
   isLoading: boolean;
+  isAddLoading: boolean;
+  isEditLoading: boolean;
+  selectedId: number;
   worktypeId: string;
   description?: string;
 }

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

@@ -1,11 +1,19 @@
 import { PayloadAction, createSlice } from "@reduxjs/toolkit";
 import { WorktypeState } from "./state";
-import { addWorktypeAsync, listWorktypesAsync } from "./operations";
+import {
+  addWorktypeAsync,
+  editWorktypeAsync,
+  listWorktypesAsync,
+} from "./operations";
 
 const initialState: WorktypeState = {
   apps: {
     isLoading: false,
+    isAddLoading: false,
+    isEditLoading: false,
+    selectedId: NaN,
     worktypeId: "",
+    description: undefined,
   },
   domain: {},
 };
@@ -15,8 +23,13 @@ export const worktypeSlice = createSlice({
   initialState,
   reducers: {
     cleanupWorktype: (state) => {
+      state.apps.selectedId = initialState.apps.selectedId;
       state.apps.worktypeId = initialState.apps.worktypeId;
-      state.apps.description = undefined;
+      state.apps.description = initialState.apps.description;
+    },
+    changeSelectedId: (state, action: PayloadAction<{ id: number }>) => {
+      const { id } = action.payload;
+      state.apps.selectedId = id;
     },
     changeWorktypeId: (
       state,
@@ -46,13 +59,29 @@ export const worktypeSlice = createSlice({
       state.apps.isLoading = false;
     });
     builder.addCase(addWorktypeAsync.pending, (state) => {
-      state.apps.isLoading = true;
+      state.apps.isAddLoading = true;
     });
     builder.addCase(addWorktypeAsync.rejected, (state) => {
-      state.apps.isLoading = false;
+      state.apps.isAddLoading = false;
+    });
+    builder.addCase(addWorktypeAsync.fulfilled, (state) => {
+      state.apps.isAddLoading = false;
+    });
+    builder.addCase(editWorktypeAsync.pending, (state) => {
+      state.apps.isEditLoading = true;
+    });
+    builder.addCase(editWorktypeAsync.rejected, (state) => {
+      state.apps.isEditLoading = false;
+    });
+    builder.addCase(editWorktypeAsync.fulfilled, (state) => {
+      state.apps.isEditLoading = false;
     });
   },
 });
-export const { changeDescription, changeWorktypeId, cleanupWorktype } =
+export const {
-  worktypeSlice.actions;
+  changeDescription,
+  changeWorktypeId,
+  changeSelectedId,
+  cleanupWorktype,
+} = worktypeSlice.actions;
 export default worktypeSlice.reducer;

dictation_client/src/pages/WorkTypeIdSettingPage/addWorktypeIdPopup.tsx

@@ -10,11 +10,13 @@ import {
   listWorktypesAsync,
   selectDescription,
   selectHasErrorWorktypeId,
+  selectIsAddLoading,
   selectWorktypeId,
 } from "features/workflow/worktype";
 import { AppDispatch } from "app/store";
 import { getTranslationID } from "translation";
 import close from "../../assets/images/close.svg";
+import progress_activit from "../../assets/images/progress_activit.svg";
 
 // popupのpropsの型定義
 interface AddWorktypeIdPopupProps {
@@ -28,6 +30,8 @@ export const AddWorktypeIdPopup: React.FC<AddWorktypeIdPopupProps> = (
   const { onClose, isOpen } = props;
   const [t] = useTranslation();
   const dispatch: AppDispatch = useDispatch();
+
+  const isAddLoading = useSelector(selectIsAddLoading);
   const worktypeId = useSelector(selectWorktypeId);
   const description = useSelector(selectDescription);
   // 追加ボタンを押したかどうか
@@ -39,10 +43,13 @@ export const AddWorktypeIdPopup: React.FC<AddWorktypeIdPopupProps> = (
 
   // ×ボタンを押した時の処理
   const closePopup = useCallback(() => {
+    if (isAddLoading) {
+      return;
+    }
     dispatch(cleanupWorktype());
     setIsPushAddButton(false);
     onClose();
-  }, [onClose, dispatch]);
+  }, [onClose, dispatch, isAddLoading]);
 
   // 追加ボタンを押した時の処理
   const addWorktypeId = useCallback(async () => {
@@ -70,7 +77,7 @@ export const AddWorktypeIdPopup: React.FC<AddWorktypeIdPopupProps> = (
             onClick={closePopup}
           />
         </p>
-        <form action="" name="" method="" className={styles.form}>
+        <form className={styles.form}>
           <dl className={`${styles.formList} ${styles.hasbg}`}>
             <dt className={styles.formTitle} />
             <dt>{t(getTranslationID("worktypeIdSetting.label.worktypeId"))}</dt>
@@ -119,9 +126,12 @@ export const AddWorktypeIdPopup: React.FC<AddWorktypeIdPopupProps> = (
                 value={description ?? ""}
                 className={styles.formInput}
                 onChange={(e) => {
-                  const description =
+                  dispatch(
-                    e.target.value === "" ? undefined : e.target.value;
+                    changeDescription({
-                  dispatch(changeDescription({ description }));
+                      description:
+                        e.target.value === "" ? undefined : e.target.value,
+                    })
+                  );
                 }}
               />
             </dd>
@@ -132,9 +142,18 @@ export const AddWorktypeIdPopup: React.FC<AddWorktypeIdPopupProps> = (
                 value={t(
                   getTranslationID("worktypeIdSetting.label.addWorktype")
                 )}
-                className={`${styles.formSubmit} ${styles.marginBtm1} ${styles.isActive}`}
+                className={`${styles.formSubmit} ${styles.marginBtm1} ${
+                  !isAddLoading ? styles.isActive : ""
+                }`}
                 onClick={addWorktypeId}
               />
+              {isAddLoading && (
+                <img
+                  src={progress_activit}
+                  className={styles.icLoading}
+                  alt="Loading"
+                />
+              )}
             </dd>
           </dl>
         </form>

dictation_client/src/pages/WorkTypeIdSettingPage/editWorktypeIdPopup.tsx

@@ -0,0 +1,162 @@
+import React, { useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
+import styles from "styles/app.module.scss";
+import { useDispatch, useSelector } from "react-redux";
+import {
+  editWorktypeAsync,
+  changeDescription,
+  changeWorktypeId,
+  cleanupWorktype,
+  listWorktypesAsync,
+  selectDescription,
+  selectHasErrorWorktypeId,
+  selectIsEditLoading,
+  selectWorktypeId,
+} from "features/workflow/worktype";
+import { AppDispatch } from "app/store";
+import { getTranslationID } from "translation";
+import close from "../../assets/images/close.svg";
+import progress_activit from "../../assets/images/progress_activit.svg";
+
+// popupのpropsの型定義
+interface EditWorktypeIdPopupProps {
+  onClose: () => void;
+  isOpen: boolean;
+}
+
+export const EditWorktypeIdPopup: React.FC<EditWorktypeIdPopupProps> = (
+  props: EditWorktypeIdPopupProps
+): JSX.Element => {
+  const { onClose, isOpen } = props;
+  const [t] = useTranslation();
+  const dispatch: AppDispatch = useDispatch();
+  const isEditLoading = useSelector(selectIsEditLoading);
+  const worktypeId = useSelector(selectWorktypeId);
+  const description = useSelector(selectDescription);
+  // 保存ボタンを押したかどうか
+  const [isPushSaveButton, setIsPushSaveButton] = useState<boolean>(false);
+  // WorktypeIdのバリデーションチェック
+  const { hasIncorrectPatternWorktypeId, isEmptyWorktypeId } = useSelector(
+    selectHasErrorWorktypeId
+  );
+
+  // ×ボタンを押した時の処理
+  const closePopup = useCallback(() => {
+    if (isEditLoading) {
+      return;
+    }
+    dispatch(cleanupWorktype());
+    setIsPushSaveButton(false);
+    onClose();
+  }, [onClose, dispatch, isEditLoading]);
+
+  // 保存ボタンを押した時の処理
+  const saveWorktypeId = useCallback(async () => {
+    setIsPushSaveButton(true);
+    if (isEmptyWorktypeId || hasIncorrectPatternWorktypeId) {
+      return;
+    }
+    const { meta } = await dispatch(editWorktypeAsync());
+    if (meta.requestStatus === "fulfilled") {
+      dispatch(listWorktypesAsync());
+      closePopup();
+    }
+  }, [closePopup, dispatch, hasIncorrectPatternWorktypeId, isEmptyWorktypeId]);
+
+  return (
+    <div className={`${styles.modal} ${isOpen ? styles.isShow : ""}`}>
+      <div className={styles.modalBox}>
+        <p className={styles.modalTitle}>
+          {t(getTranslationID("worktypeIdSetting.label.editWorktypeId"))}
+          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */}
+          <img
+            src={close}
+            className={styles.modalTitleIcon}
+            alt="close"
+            onClick={closePopup}
+          />
+        </p>
+        <form className={styles.form}>
+          <dl className={`${styles.formList} ${styles.hasbg}`}>
+            <dt className={styles.formTitle} />
+            <dt>{t(getTranslationID("worktypeIdSetting.label.worktypeId"))}</dt>
+            <dd>
+              <input
+                type="text"
+                size={40}
+                maxLength={255}
+                value={worktypeId ?? ""}
+                className={styles.formInput}
+                onChange={(e) => {
+                  dispatch(changeWorktypeId({ worktypeId: e.target.value }));
+                }}
+              />
+              {isPushSaveButton && isEmptyWorktypeId && (
+                <span className={styles.formError}>
+                  {t(getTranslationID("common.message.inputEmptyError"))}
+                </span>
+              )}
+              {isPushSaveButton && hasIncorrectPatternWorktypeId && (
+                <span className={styles.formError}>
+                  {t(
+                    getTranslationID(
+                      "worktypeIdSetting.message.worktypeIdIncorrectError"
+                    )
+                  )}
+                </span>
+              )}
+              <span
+                style={{ whiteSpace: "pre-line" }}
+                className={styles.formComment}
+              >
+                {t(getTranslationID("worktypeIdSetting.label.worktypeIdTerms"))}
+              </span>
+            </dd>
+            <dt className={styles.overLine}>
+              {t(
+                getTranslationID("worktypeIdSetting.label.descriptionOptional")
+              )}
+            </dt>
+            <dd className={styles.last}>
+              <input
+                type="text"
+                size={40}
+                maxLength={255}
+                value={description ?? ""}
+                className={styles.formInput}
+                onChange={(e) => {
+                  dispatch(
+                    changeDescription({
+                      description:
+                        e.target.value === "" ? undefined : e.target.value,
+                    })
+                  );
+                }}
+              />
+            </dd>
+            <dd className={`${styles.full} ${styles.alignCenter}`}>
+              <input
+                type="button"
+                name="Save Changes"
+                value={t(
+                  getTranslationID("worktypeIdSetting.label.saveChange")
+                )}
+                className={`${styles.formSubmit} ${styles.marginBtm1} ${
+                  !isEditLoading ? styles.isActive : ""
+                }`}
+                onClick={saveWorktypeId}
+              />
+              {isEditLoading && (
+                <img
+                  src={progress_activit}
+                  className={styles.icLoading}
+                  alt="Loading"
+                />
+              )}
+            </dd>
+          </dl>
+        </form>
+      </div>
+    </div>
+  );
+};

dictation_client/src/pages/WorkTypeIdSettingPage/index.tsx

@@ -10,12 +10,16 @@ import progress_activit from "assets/images/progress_activit.svg";
 import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
 import {
+  changeSelectedId,
+  changeWorktypeId,
+  changeDescription,
   listWorktypesAsync,
   selectIsLoading,
   selectWorktypes,
 } from "features/workflow/worktype";
 import { AppDispatch } from "app/store";
 import { AddWorktypeIdPopup } from "./addWorktypeIdPopup";
+import { EditWorktypeIdPopup } from "./editWorktypeIdPopup";
 
 const WorktypeIdSettingPage: React.FC = (): JSX.Element => {
   const dispatch: AppDispatch = useDispatch();
@@ -25,6 +29,8 @@ const WorktypeIdSettingPage: React.FC = (): JSX.Element => {
   const [selectedRow, setSelectedRow] = useState<number>(NaN);
   // 追加Popupの表示制御
   const [isShowAddPopup, setIsShowAddPopup] = useState<boolean>(false);
+  // 編集Popupの表示制御
+  const [isShowEditPopup, setIsShowEditPopup] = useState<boolean>(false);
   useEffect(() => {
     dispatch(listWorktypesAsync());
   }, [dispatch]);
@@ -37,6 +43,12 @@ const WorktypeIdSettingPage: React.FC = (): JSX.Element => {
         }}
         isOpen={isShowAddPopup}
       />
+      <EditWorktypeIdPopup
+        onClose={() => {
+          setIsShowEditPopup(false);
+        }}
+        isOpen={isShowEditPopup}
+      />
       <div className={styles.wrap}>
         <Header userName="XXXXXXX" />
         <UpdateTokenTimer />
@@ -131,9 +143,23 @@ const WorktypeIdSettingPage: React.FC = (): JSX.Element => {
                           className={`${styles.menuAction} ${styles.inTable}`}
                         >
                           <li>
+                            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
                             <a
                               className={`${styles.menuLink} ${styles.isActive}`}
-                              // onClick={}
+                              onClick={() => {
+                                dispatch(changeSelectedId({ id: worktype.id }));
+                                dispatch(
+                                  changeWorktypeId({
+                                    worktypeId: worktype.worktypeId,
+                                  })
+                                );
+                                dispatch(
+                                  changeDescription({
+                                    description: worktype.description,
+                                  })
+                                );
+                                setIsShowEditPopup(true);
+                              }}
                             >
                               {t(getTranslationID("common.label.edit"))}
                             </a>

dictation_client/src/translation/de.json

@@ -390,8 +390,10 @@
       "description": "(de)Description",
       "descriptionOptional": "(de)Description (Optional)",
       "optionItem": "(de)Option Item",
-      "worktypeIdTerms": "(de)WorktypeID should be alphanumeric and symbols,\n but not include: \\ / : * ? “ < > | .",
+      "worktypeIdTerms": "(de)WorktypeID should be alphanumeric and symbols,\nbut not include: \\ / : * ? “ < > | .",
-      "addWorktype": "(de)Add Worktype"
+      "addWorktype": "(de)Add Worktype",
+      "editWorktypeId": "(de)Edit Worktype ID",
+      "saveChange": "(de)Save Changes"
     },
     "message": {
       "worktypeIdIncorrectError": "(de)入力されたWorktypeIDがルールを満たしていません。下記のルールを満たすWorktypeIDを入力してください",
@@ -414,4 +416,4 @@
       "deleteAccount": "(de)Delete Account"
     }
   }
-}
+}

dictation_client/src/translation/en.json

@@ -390,8 +390,10 @@
       "description": "Description",
       "descriptionOptional": "Description (Optional)",
       "optionItem": "Option Item",
-      "worktypeIdTerms": "WorktypeID should be alphanumeric and symbols,\n but not include: \\ / : * ? “ < > | .",
+      "worktypeIdTerms": "WorktypeID should be alphanumeric and symbols,\nbut not include: \\ / : * ? “ < > | .",
-      "addWorktype": "Add Worktype"
+      "addWorktype": "Add Worktype",
+      "editWorktypeId": "Edit Worktype ID",
+      "saveChange": "Save Changes"
     },
     "message": {
       "worktypeIdIncorrectError": "入力されたWorktypeIDがルールを満たしていません。下記のルールを満たすWorktypeIDを入力してください",
@@ -414,4 +416,4 @@
       "deleteAccount": "Delete Account"
     }
   }
-}
+}

dictation_client/src/translation/es.json

@@ -390,8 +390,10 @@
       "description": "(es)Description",
       "descriptionOptional": "(es)Description (Optional)",
       "optionItem": "(es)Option Item",
-      "worktypeIdTerms": "(es)WorktypeID should be alphanumeric and symbols,\n but not include: \\ / : * ? “ < > | .",
+      "worktypeIdTerms": "(es)WorktypeID should be alphanumeric and symbols,\nbut not include: \\ / : * ? “ < > | .",
-      "addWorktype": "(es)Add Worktype"
+      "addWorktype": "(es)Add Worktype",
+      "editWorktypeId": "(es)Edit Worktype ID",
+      "saveChange": "(es)Save Changes"
     },
     "message": {
       "worktypeIdIncorrectError": "(es)入力されたWorktypeIDがルールを満たしていません。下記のルールを満たすWorktypeIDを入力してください",
@@ -414,4 +416,4 @@
       "deleteAccount": "(es)Delete Account"
     }
   }
-}
+}

dictation_client/src/translation/fr.json

@@ -390,8 +390,10 @@
       "description": "(fr)Description",
       "descriptionOptional": "(fr)Description (Optional)",
       "optionItem": "(fr)Option Item",
-      "worktypeIdTerms": "(fr)WorktypeID should be alphanumeric and symbols,\n but not include: \\ / : * ? “ < > | .",
+      "worktypeIdTerms": "(fr)WorktypeID should be alphanumeric and symbols,\nbut not include: \\ / : * ? “ < > | .",
-      "addWorktype": "(fr)Add Worktype"
+      "addWorktype": "(fr)Add Worktype",
+      "editWorktypeId": "(fr)Edit Worktype ID",
+      "saveChange": "(fr)Save Changes"
     },
     "message": {
       "worktypeIdIncorrectError": "(fr)入力されたWorktypeIDがルールを満たしていません。下記のルールを満たすWorktypeIDを入力してください",
@@ -414,4 +416,4 @@
       "deleteAccount": "(fr)Delete Account"
     }
   }
-}
+}