Merged PR 380: 画面実装(ワークタイプID追加Popup)
## 概要 [Task2517: 画面実装(ワークタイプID追加Popup)](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/2517) - ワークタイプID追加Popupを実装 - 入力チェック - ワークタイプID作成API呼び出し - 多言語対応 ## レビューポイント - 画面にワークタイプIDのルールを追加したがデザイン的に問題ありそうか ## UIの変更 - 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/Task2517?csf=1&web=1&e=Fm7bpm ## 動作確認状況 - ローカルで確認 ## 補足 - 相談、参考資料などがあれば
This commit is contained in:
parent
009f133c8b
commit
2d378b8e66
@ -51,4 +51,6 @@ export const errorCodes = [
|
|||||||
"E010809", // ライセンス発行キャンセル不可エラー(ステータスが変えられている場合)
|
"E010809", // ライセンス発行キャンセル不可エラー(ステータスが変えられている場合)
|
||||||
"E010810", // ライセンス発行キャンセル不可エラー(発行から一定期間経過した場合)
|
"E010810", // ライセンス発行キャンセル不可エラー(発行から一定期間経過した場合)
|
||||||
"E010811", // ライセンス発行キャンセル不可エラー(発行したライセンスが割り当てされている場合)
|
"E010811", // ライセンス発行キャンセル不可エラー(発行したライセンスが割り当てされている場合)
|
||||||
|
"E011001", // ワークタイプ重複エラー
|
||||||
|
"E011002", // ワークタイプ登録上限超過エラー
|
||||||
] as const;
|
] as const;
|
||||||
|
|||||||
@ -43,3 +43,70 @@ export const listWorktypesAsync = createAsyncThunk<
|
|||||||
return thunkApi.rejectWithValue({ error });
|
return thunkApi.rejectWithValue({ error });
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
export const addWorktypeAsync = createAsyncThunk<
|
||||||
|
{
|
||||||
|
// return empty
|
||||||
|
},
|
||||||
|
void,
|
||||||
|
{
|
||||||
|
// rejectした時の返却値の型
|
||||||
|
rejectValue: {
|
||||||
|
error: ErrorObject;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
>("workflow/addWorktypeAsync", 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 { worktypeId, description } = state.worktype.apps;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await accountsApi.createWorktype(
|
||||||
|
{
|
||||||
|
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"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
// worktypeIdが上限に達している場合
|
||||||
|
if (error.code === "E011002") {
|
||||||
|
errorMessage = getTranslationID(
|
||||||
|
"worktypeIdSetting.message.worktypeIDLimitError"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
thunkApi.dispatch(
|
||||||
|
openSnackbar({
|
||||||
|
level: "error",
|
||||||
|
message: errorMessage,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
return thunkApi.rejectWithValue({ error });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|||||||
@ -2,6 +2,24 @@ import { RootState } from "app/store";
|
|||||||
|
|
||||||
export const selectWorktypes = (state: RootState) =>
|
export const selectWorktypes = (state: RootState) =>
|
||||||
state.worktype.domain.worktypes;
|
state.worktype.domain.worktypes;
|
||||||
|
|
||||||
export const selectIsLoading = (state: RootState) =>
|
export const selectIsLoading = (state: RootState) =>
|
||||||
state.worktype.apps.isLoading;
|
state.worktype.apps.isLoading;
|
||||||
|
|
||||||
|
export const selectWorktypeId = (state: RootState) =>
|
||||||
|
state.worktype.apps.worktypeId;
|
||||||
|
|
||||||
|
export const selectDescription = (state: RootState) =>
|
||||||
|
state.worktype.apps.description;
|
||||||
|
|
||||||
|
// worktypeIdの値をチェックする
|
||||||
|
export const selectHasErrorWorktypeId = (state: RootState) => {
|
||||||
|
const { worktypeId } = state.worktype.apps;
|
||||||
|
// worktypeIdが空文字の場合はエラー
|
||||||
|
const isEmptyWorktypeId = worktypeId === "";
|
||||||
|
|
||||||
|
// worktypeIdに\/ : * ? “< > | .が含まれている場合はエラー
|
||||||
|
const incorrectPattern = /[\\/:*?"<>|.]|[^ -~]/;
|
||||||
|
const hasIncorrectPatternWorktypeId = incorrectPattern.test(worktypeId);
|
||||||
|
|
||||||
|
return { isEmptyWorktypeId, hasIncorrectPatternWorktypeId };
|
||||||
|
};
|
||||||
|
|||||||
@ -7,6 +7,8 @@ export interface WorktypeState {
|
|||||||
|
|
||||||
export interface Apps {
|
export interface Apps {
|
||||||
isLoading: boolean;
|
isLoading: boolean;
|
||||||
|
worktypeId: string;
|
||||||
|
description?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Domain {
|
export interface Domain {
|
||||||
|
|||||||
@ -1,10 +1,11 @@
|
|||||||
import { createSlice } from "@reduxjs/toolkit";
|
import { PayloadAction, createSlice } from "@reduxjs/toolkit";
|
||||||
import { WorktypeState } from "./state";
|
import { WorktypeState } from "./state";
|
||||||
import { listWorktypesAsync } from "./operations";
|
import { addWorktypeAsync, listWorktypesAsync } from "./operations";
|
||||||
|
|
||||||
const initialState: WorktypeState = {
|
const initialState: WorktypeState = {
|
||||||
apps: {
|
apps: {
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
|
worktypeId: "",
|
||||||
},
|
},
|
||||||
domain: {},
|
domain: {},
|
||||||
};
|
};
|
||||||
@ -12,7 +13,26 @@ const initialState: WorktypeState = {
|
|||||||
export const worktypeSlice = createSlice({
|
export const worktypeSlice = createSlice({
|
||||||
name: "worktype",
|
name: "worktype",
|
||||||
initialState,
|
initialState,
|
||||||
reducers: {},
|
reducers: {
|
||||||
|
cleanupWorktype: (state) => {
|
||||||
|
state.apps.worktypeId = initialState.apps.worktypeId;
|
||||||
|
state.apps.description = undefined;
|
||||||
|
},
|
||||||
|
changeWorktypeId: (
|
||||||
|
state,
|
||||||
|
action: PayloadAction<{ worktypeId: string }>
|
||||||
|
) => {
|
||||||
|
const { worktypeId } = action.payload;
|
||||||
|
state.apps.worktypeId = worktypeId;
|
||||||
|
},
|
||||||
|
changeDescription: (
|
||||||
|
state,
|
||||||
|
action: PayloadAction<{ description?: string }>
|
||||||
|
) => {
|
||||||
|
const { description } = action.payload;
|
||||||
|
state.apps.description = description;
|
||||||
|
},
|
||||||
|
},
|
||||||
extraReducers: (builder) => {
|
extraReducers: (builder) => {
|
||||||
builder.addCase(listWorktypesAsync.pending, (state) => {
|
builder.addCase(listWorktypesAsync.pending, (state) => {
|
||||||
state.apps.isLoading = true;
|
state.apps.isLoading = true;
|
||||||
@ -25,7 +45,14 @@ export const worktypeSlice = createSlice({
|
|||||||
builder.addCase(listWorktypesAsync.rejected, (state) => {
|
builder.addCase(listWorktypesAsync.rejected, (state) => {
|
||||||
state.apps.isLoading = false;
|
state.apps.isLoading = false;
|
||||||
});
|
});
|
||||||
|
builder.addCase(addWorktypeAsync.pending, (state) => {
|
||||||
|
state.apps.isLoading = true;
|
||||||
|
});
|
||||||
|
builder.addCase(addWorktypeAsync.rejected, (state) => {
|
||||||
|
state.apps.isLoading = false;
|
||||||
|
});
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
export const { changeDescription, changeWorktypeId, cleanupWorktype } =
|
||||||
|
worktypeSlice.actions;
|
||||||
export default worktypeSlice.reducer;
|
export default worktypeSlice.reducer;
|
||||||
|
|||||||
@ -0,0 +1,144 @@
|
|||||||
|
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 {
|
||||||
|
addWorktypeAsync,
|
||||||
|
changeDescription,
|
||||||
|
changeWorktypeId,
|
||||||
|
cleanupWorktype,
|
||||||
|
listWorktypesAsync,
|
||||||
|
selectDescription,
|
||||||
|
selectHasErrorWorktypeId,
|
||||||
|
selectWorktypeId,
|
||||||
|
} from "features/workflow/worktype";
|
||||||
|
import { AppDispatch } from "app/store";
|
||||||
|
import { getTranslationID } from "translation";
|
||||||
|
import close from "../../assets/images/close.svg";
|
||||||
|
|
||||||
|
// popupのpropsの型定義
|
||||||
|
interface AddWorktypeIdPopupProps {
|
||||||
|
onClose: () => void;
|
||||||
|
isOpen: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const AddWorktypeIdPopup: React.FC<AddWorktypeIdPopupProps> = (
|
||||||
|
props: AddWorktypeIdPopupProps
|
||||||
|
): JSX.Element => {
|
||||||
|
const { onClose, isOpen } = props;
|
||||||
|
const [t] = useTranslation();
|
||||||
|
const dispatch: AppDispatch = useDispatch();
|
||||||
|
const worktypeId = useSelector(selectWorktypeId);
|
||||||
|
const description = useSelector(selectDescription);
|
||||||
|
// 追加ボタンを押したかどうか
|
||||||
|
const [isPushAddButton, setIsPushAddButton] = useState<boolean>(false);
|
||||||
|
// WorktypeIdのバリデーションチェック
|
||||||
|
const { hasIncorrectPatternWorktypeId, isEmptyWorktypeId } = useSelector(
|
||||||
|
selectHasErrorWorktypeId
|
||||||
|
);
|
||||||
|
|
||||||
|
// ×ボタンを押した時の処理
|
||||||
|
const closePopup = useCallback(() => {
|
||||||
|
dispatch(cleanupWorktype());
|
||||||
|
setIsPushAddButton(false);
|
||||||
|
onClose();
|
||||||
|
}, [onClose, dispatch]);
|
||||||
|
|
||||||
|
// 追加ボタンを押した時の処理
|
||||||
|
const addWorktypeId = useCallback(async () => {
|
||||||
|
setIsPushAddButton(true);
|
||||||
|
if (isEmptyWorktypeId || hasIncorrectPatternWorktypeId) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const { meta } = await dispatch(addWorktypeAsync());
|
||||||
|
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.addWorktypeId"))}
|
||||||
|
{/* 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 action="" name="" method="" 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 }));
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{isPushAddButton && isEmptyWorktypeId && (
|
||||||
|
<span className={styles.formError}>
|
||||||
|
{t(getTranslationID("common.message.inputEmptyError"))}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{isPushAddButton && 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) => {
|
||||||
|
const description =
|
||||||
|
e.target.value === "" ? undefined : e.target.value;
|
||||||
|
dispatch(changeDescription({ description }));
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</dd>
|
||||||
|
<dd className={`${styles.full} ${styles.alignCenter}`}>
|
||||||
|
<input
|
||||||
|
type="button"
|
||||||
|
name="Add Worktype"
|
||||||
|
value={t(
|
||||||
|
getTranslationID("worktypeIdSetting.label.addWorktype")
|
||||||
|
)}
|
||||||
|
className={`${styles.formSubmit} ${styles.marginBtm1} ${styles.isActive}`}
|
||||||
|
onClick={addWorktypeId}
|
||||||
|
/>
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -15,6 +15,7 @@ import {
|
|||||||
selectWorktypes,
|
selectWorktypes,
|
||||||
} from "features/workflow/worktype";
|
} from "features/workflow/worktype";
|
||||||
import { AppDispatch } from "app/store";
|
import { AppDispatch } from "app/store";
|
||||||
|
import { AddWorktypeIdPopup } from "./addWorktypeIdPopup";
|
||||||
|
|
||||||
const WorktypeIdSettingPage: React.FC = (): JSX.Element => {
|
const WorktypeIdSettingPage: React.FC = (): JSX.Element => {
|
||||||
const dispatch: AppDispatch = useDispatch();
|
const dispatch: AppDispatch = useDispatch();
|
||||||
@ -22,148 +23,171 @@ const WorktypeIdSettingPage: React.FC = (): JSX.Element => {
|
|||||||
const isLoading = useSelector(selectIsLoading);
|
const isLoading = useSelector(selectIsLoading);
|
||||||
const worktypes = useSelector(selectWorktypes);
|
const worktypes = useSelector(selectWorktypes);
|
||||||
const [selectedRow, setSelectedRow] = useState<number>(NaN);
|
const [selectedRow, setSelectedRow] = useState<number>(NaN);
|
||||||
|
// 追加Popupの表示制御
|
||||||
|
const [isShowAddPopup, setIsShowAddPopup] = useState<boolean>(false);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
dispatch(listWorktypesAsync());
|
dispatch(listWorktypesAsync());
|
||||||
}, [dispatch]);
|
}, [dispatch]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.wrap}>
|
<>
|
||||||
<Header userName="XXXXXXX" />
|
<AddWorktypeIdPopup
|
||||||
<UpdateTokenTimer />
|
onClose={() => {
|
||||||
<main className={styles.main}>
|
setIsShowAddPopup(false);
|
||||||
<div>
|
}}
|
||||||
<div className={styles.pageHeader}>
|
isOpen={isShowAddPopup}
|
||||||
<h1 className={styles.pageTitle}>
|
/>
|
||||||
{t(getTranslationID("workflowPage.label.title"))}
|
<div className={styles.wrap}>
|
||||||
</h1>
|
<Header userName="XXXXXXX" />
|
||||||
<p className={styles.pageTx}>
|
<UpdateTokenTimer />
|
||||||
{t(getTranslationID("worktypeIdSetting.label.title"))}
|
<main className={styles.main}>
|
||||||
</p>
|
<div>
|
||||||
</div>
|
<div className={styles.pageHeader}>
|
||||||
<section className={styles.workflow}>
|
<h1 className={styles.pageTitle}>
|
||||||
<div>
|
{t(getTranslationID("workflowPage.label.title"))}
|
||||||
<ul className={`${styles.menuAction} ${styles.worktype}`}>
|
</h1>
|
||||||
<li>
|
<p className={styles.pageTx}>
|
||||||
<a
|
{t(getTranslationID("worktypeIdSetting.label.title"))}
|
||||||
href="/workflow"
|
</p>
|
||||||
className={`${styles.menuLink} ${styles.isActive}`}
|
|
||||||
>
|
|
||||||
<img src={undo} alt="" className={styles.menuIcon} />
|
|
||||||
{t(getTranslationID("common.label.return"))}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
className={`${styles.menuLink} ${styles.isActive}`}
|
|
||||||
// onClick={}
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src={worktype_add}
|
|
||||||
alt=""
|
|
||||||
className={styles.menuIcon}
|
|
||||||
/>
|
|
||||||
{t(
|
|
||||||
getTranslationID("worktypeIdSetting.label.addWorktypeId")
|
|
||||||
)}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className={styles.selectMenu}>
|
|
||||||
{`${t(
|
|
||||||
getTranslationID("worktypeIdSetting.label.activeWorktypeId")
|
|
||||||
)}:`}
|
|
||||||
<select name="Active Worktype" className={styles.formInput}>
|
|
||||||
{worktypes?.map((worktype) => (
|
|
||||||
<option key={worktype.id} value={worktype.id}>
|
|
||||||
{worktype.worktypeId}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<table className={`${styles.table} ${styles.worktype}`}>
|
|
||||||
<tr className={styles.tableHeader}>
|
|
||||||
<th className={styles.noLine}>
|
|
||||||
{t(getTranslationID("worktypeIdSetting.label.worktypeId"))}
|
|
||||||
</th>
|
|
||||||
<th className={styles.noLine}>
|
|
||||||
{t(getTranslationID("worktypeIdSetting.label.description"))}
|
|
||||||
</th>
|
|
||||||
<th>{/** empty th */}</th>
|
|
||||||
</tr>
|
|
||||||
{worktypes?.map((worktype) => (
|
|
||||||
<tr
|
|
||||||
key={worktype.id}
|
|
||||||
className={
|
|
||||||
worktype.id === selectedRow ? styles.isSelected : ""
|
|
||||||
}
|
|
||||||
onMouseEnter={() => {
|
|
||||||
setSelectedRow(worktype.id);
|
|
||||||
}}
|
|
||||||
onMouseLeave={() => {
|
|
||||||
setSelectedRow(NaN);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<td>{worktype.worktypeId}</td>
|
|
||||||
<td>{worktype.description}</td>
|
|
||||||
<td>
|
|
||||||
<ul className={`${styles.menuAction} ${styles.inTable}`}>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
className={`${styles.menuLink} ${styles.isActive}`}
|
|
||||||
// onClick={}
|
|
||||||
>
|
|
||||||
{t(getTranslationID("common.label.edit"))}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
className={`${styles.menuLink} ${styles.isActive}`}
|
|
||||||
// onClick={}
|
|
||||||
>
|
|
||||||
{t(
|
|
||||||
getTranslationID(
|
|
||||||
"worktypeIdSetting.label.optionItem"
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
className={`${styles.menuLink} ${styles.isActive}`}
|
|
||||||
// onClick={}
|
|
||||||
>
|
|
||||||
{t(getTranslationID("common.label.delete"))}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</table>
|
|
||||||
{!isLoading && worktypes?.length === 0 && (
|
|
||||||
<p
|
|
||||||
style={{
|
|
||||||
margin: "10px",
|
|
||||||
textAlign: "center",
|
|
||||||
width: "1000px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{t(getTranslationID("common.message.listEmpty"))}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
{isLoading && (
|
|
||||||
<img
|
|
||||||
src={progress_activit}
|
|
||||||
className={styles.icLoading}
|
|
||||||
alt="Loading"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<section className={styles.workflow}>
|
||||||
</div>
|
<div>
|
||||||
</main>
|
<ul className={`${styles.menuAction} ${styles.worktype}`}>
|
||||||
<Footer />
|
<li>
|
||||||
</div>
|
<a
|
||||||
|
href="/workflow"
|
||||||
|
className={`${styles.menuLink} ${styles.isActive}`}
|
||||||
|
>
|
||||||
|
<img src={undo} alt="" className={styles.menuIcon} />
|
||||||
|
{t(getTranslationID("common.label.return"))}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<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={() => {
|
||||||
|
setIsShowAddPopup(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={worktype_add}
|
||||||
|
alt=""
|
||||||
|
className={styles.menuIcon}
|
||||||
|
/>
|
||||||
|
{t(
|
||||||
|
getTranslationID(
|
||||||
|
"worktypeIdSetting.label.addWorktypeId"
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className={styles.selectMenu}>
|
||||||
|
{`${t(
|
||||||
|
getTranslationID(
|
||||||
|
"worktypeIdSetting.label.activeWorktypeId"
|
||||||
|
)
|
||||||
|
)}:`}
|
||||||
|
<select name="Active Worktype" className={styles.formInput}>
|
||||||
|
{worktypes?.map((worktype) => (
|
||||||
|
<option key={worktype.id} value={worktype.id}>
|
||||||
|
{worktype.worktypeId}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<table className={`${styles.table} ${styles.worktype}`}>
|
||||||
|
<tr className={styles.tableHeader}>
|
||||||
|
<th className={styles.noLine}>
|
||||||
|
{t(
|
||||||
|
getTranslationID("worktypeIdSetting.label.worktypeId")
|
||||||
|
)}
|
||||||
|
</th>
|
||||||
|
<th className={styles.noLine}>
|
||||||
|
{t(
|
||||||
|
getTranslationID("worktypeIdSetting.label.description")
|
||||||
|
)}
|
||||||
|
</th>
|
||||||
|
<th>{/** empty th */}</th>
|
||||||
|
</tr>
|
||||||
|
{worktypes?.map((worktype) => (
|
||||||
|
<tr
|
||||||
|
key={worktype.id}
|
||||||
|
className={
|
||||||
|
worktype.id === selectedRow ? styles.isSelected : ""
|
||||||
|
}
|
||||||
|
onMouseEnter={() => {
|
||||||
|
setSelectedRow(worktype.id);
|
||||||
|
}}
|
||||||
|
onMouseLeave={() => {
|
||||||
|
setSelectedRow(NaN);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<td>{worktype.worktypeId}</td>
|
||||||
|
<td>{worktype.description}</td>
|
||||||
|
<td>
|
||||||
|
<ul
|
||||||
|
className={`${styles.menuAction} ${styles.inTable}`}
|
||||||
|
>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
className={`${styles.menuLink} ${styles.isActive}`}
|
||||||
|
// onClick={}
|
||||||
|
>
|
||||||
|
{t(getTranslationID("common.label.edit"))}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
className={`${styles.menuLink} ${styles.isActive}`}
|
||||||
|
// onClick={}
|
||||||
|
>
|
||||||
|
{t(
|
||||||
|
getTranslationID(
|
||||||
|
"worktypeIdSetting.label.optionItem"
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
className={`${styles.menuLink} ${styles.isActive}`}
|
||||||
|
// onClick={}
|
||||||
|
>
|
||||||
|
{t(getTranslationID("common.label.delete"))}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</table>
|
||||||
|
{!isLoading && worktypes?.length === 0 && (
|
||||||
|
<p
|
||||||
|
style={{
|
||||||
|
margin: "10px",
|
||||||
|
textAlign: "center",
|
||||||
|
width: "1000px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t(getTranslationID("common.message.listEmpty"))}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{isLoading && (
|
||||||
|
<img
|
||||||
|
src={progress_activit}
|
||||||
|
className={styles.icLoading}
|
||||||
|
alt="Loading"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -5,10 +5,10 @@
|
|||||||
"passwordIncorrectError": "(de)Error Message",
|
"passwordIncorrectError": "(de)Error Message",
|
||||||
"emailIncorrectError": "(de)Error Message",
|
"emailIncorrectError": "(de)Error Message",
|
||||||
"internalServerError": "(de)処理に失敗しました。時間をおいて再実行しても解決しない場合はシステム管理者にお問い合わせください。",
|
"internalServerError": "(de)処理に失敗しました。時間をおいて再実行しても解決しない場合はシステム管理者にお問い合わせください。",
|
||||||
|
"permissionDeniedError": "(de)操作を実行する権限がありません。",
|
||||||
"listEmpty": "(de)検索結果が0件です。",
|
"listEmpty": "(de)検索結果が0件です。",
|
||||||
"dialogConfirm": "(de)操作を実行しますか?",
|
"dialogConfirm": "(de)操作を実行しますか?",
|
||||||
"success": "(de)処理に成功しました。",
|
"success": "(de)処理に成功しました。"
|
||||||
"permissionDeniedError": "(de)操作を実行する権限がありません。"
|
|
||||||
},
|
},
|
||||||
"label": {
|
"label": {
|
||||||
"cancel": "(de)Cancel",
|
"cancel": "(de)Cancel",
|
||||||
@ -388,7 +388,30 @@
|
|||||||
"addWorktypeId": "(de)Add Worktype ID",
|
"addWorktypeId": "(de)Add Worktype ID",
|
||||||
"worktypeId": "(de)Worktype ID",
|
"worktypeId": "(de)Worktype ID",
|
||||||
"description": "(de)Description",
|
"description": "(de)Description",
|
||||||
"optionItem": "(de)Option Item"
|
"descriptionOptional": "(de)Description (Optional)",
|
||||||
|
"optionItem": "(de)Option Item",
|
||||||
|
"worktypeIdTerms": "(de)WorktypeID should be alphanumeric and symbols,\n but not include: \\ / : * ? “ < > | .",
|
||||||
|
"addWorktype": "(de)Add Worktype"
|
||||||
|
},
|
||||||
|
"message": {
|
||||||
|
"worktypeIdIncorrectError": "(de)入力されたWorktypeIDがルールを満たしていません。下記のルールを満たすWorktypeIDを入力してください",
|
||||||
|
"alreadyWorktypeIdExistError": "(de)このWorktype IDは既に登録されています。他のWorktype IDで登録してください。",
|
||||||
|
"worktypeIDLimitError": "(de)Worktype IDが登録件数の上限に達しているため追加できません。"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"partnerPage": {
|
||||||
|
"label": {
|
||||||
|
"title": "(de)Partners",
|
||||||
|
"addAccount": "(de)Add Account",
|
||||||
|
"name": "(de)Name",
|
||||||
|
"category": "(de)Category",
|
||||||
|
"accountId": "(de)Account ID",
|
||||||
|
"country": "(de)Country",
|
||||||
|
"primaryAdmin": "(de)Primary Admin",
|
||||||
|
"email": "(de)E-mail",
|
||||||
|
"dealerManagement": "(de)Dealer Management",
|
||||||
|
"partners": "(de)partners",
|
||||||
|
"deleteAccount": "(de)Delete Account"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,10 +5,10 @@
|
|||||||
"passwordIncorrectError": "Error Message",
|
"passwordIncorrectError": "Error Message",
|
||||||
"emailIncorrectError": "Error Message",
|
"emailIncorrectError": "Error Message",
|
||||||
"internalServerError": "処理に失敗しました。時間をおいて再実行しても解決しない場合はシステム管理者にお問い合わせください。",
|
"internalServerError": "処理に失敗しました。時間をおいて再実行しても解決しない場合はシステム管理者にお問い合わせください。",
|
||||||
|
"permissionDeniedError": "操作を実行する権限がありません。",
|
||||||
"listEmpty": "検索結果が0件です。",
|
"listEmpty": "検索結果が0件です。",
|
||||||
"dialogConfirm": "操作を実行しますか?",
|
"dialogConfirm": "操作を実行しますか?",
|
||||||
"success": "処理に成功しました。",
|
"success": "処理に成功しました。"
|
||||||
"permissionDeniedError": "操作を実行する権限がありません。"
|
|
||||||
},
|
},
|
||||||
"label": {
|
"label": {
|
||||||
"cancel": "Cancel",
|
"cancel": "Cancel",
|
||||||
@ -388,7 +388,30 @@
|
|||||||
"addWorktypeId": "Add Worktype ID",
|
"addWorktypeId": "Add Worktype ID",
|
||||||
"worktypeId": "Worktype ID",
|
"worktypeId": "Worktype ID",
|
||||||
"description": "Description",
|
"description": "Description",
|
||||||
"optionItem": "Option Item"
|
"descriptionOptional": "Description (Optional)",
|
||||||
|
"optionItem": "Option Item",
|
||||||
|
"worktypeIdTerms": "WorktypeID should be alphanumeric and symbols,\n but not include: \\ / : * ? “ < > | .",
|
||||||
|
"addWorktype": "Add Worktype"
|
||||||
|
},
|
||||||
|
"message": {
|
||||||
|
"worktypeIdIncorrectError": "入力されたWorktypeIDがルールを満たしていません。下記のルールを満たすWorktypeIDを入力してください",
|
||||||
|
"alreadyWorktypeIdExistError": "このWorktype IDは既に登録されています。他のWorktype IDで登録してください。",
|
||||||
|
"worktypeIDLimitError": "Worktype IDが登録件数の上限に達しているため追加できません。"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"partnerPage": {
|
||||||
|
"label": {
|
||||||
|
"title": "Partners",
|
||||||
|
"addAccount": "Add Account",
|
||||||
|
"name": "Name",
|
||||||
|
"category": "Category",
|
||||||
|
"accountId": "Account ID",
|
||||||
|
"country": "Country",
|
||||||
|
"primaryAdmin": "Primary Admin",
|
||||||
|
"email": "E-mail",
|
||||||
|
"dealerManagement": "Dealer Management",
|
||||||
|
"partners": "partners",
|
||||||
|
"deleteAccount": "Delete Account"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,10 +5,10 @@
|
|||||||
"passwordIncorrectError": "(es)Error Message",
|
"passwordIncorrectError": "(es)Error Message",
|
||||||
"emailIncorrectError": "(es)Error Message",
|
"emailIncorrectError": "(es)Error Message",
|
||||||
"internalServerError": "(es)処理に失敗しました。時間をおいて再実行しても解決しない場合はシステム管理者にお問い合わせください。",
|
"internalServerError": "(es)処理に失敗しました。時間をおいて再実行しても解決しない場合はシステム管理者にお問い合わせください。",
|
||||||
|
"permissionDeniedError": "(es)操作を実行する権限がありません。",
|
||||||
"listEmpty": "(es)検索結果が0件です。",
|
"listEmpty": "(es)検索結果が0件です。",
|
||||||
"dialogConfirm": "(es)操作を実行しますか?",
|
"dialogConfirm": "(es)操作を実行しますか?",
|
||||||
"success": "(es)処理に成功しました。",
|
"success": "(es)処理に成功しました。"
|
||||||
"permissionDeniedError": "(es)操作を実行する権限がありません。"
|
|
||||||
},
|
},
|
||||||
"label": {
|
"label": {
|
||||||
"cancel": "(es)Cancel",
|
"cancel": "(es)Cancel",
|
||||||
@ -388,7 +388,30 @@
|
|||||||
"addWorktypeId": "(es)Add Worktype ID",
|
"addWorktypeId": "(es)Add Worktype ID",
|
||||||
"worktypeId": "(es)Worktype ID",
|
"worktypeId": "(es)Worktype ID",
|
||||||
"description": "(es)Description",
|
"description": "(es)Description",
|
||||||
"optionItem": "(es)Option Item"
|
"descriptionOptional": "(es)Description (Optional)",
|
||||||
|
"optionItem": "(es)Option Item",
|
||||||
|
"worktypeIdTerms": "(es)WorktypeID should be alphanumeric and symbols,\n but not include: \\ / : * ? “ < > | .",
|
||||||
|
"addWorktype": "(es)Add Worktype"
|
||||||
|
},
|
||||||
|
"message": {
|
||||||
|
"worktypeIdIncorrectError": "(es)入力されたWorktypeIDがルールを満たしていません。下記のルールを満たすWorktypeIDを入力してください",
|
||||||
|
"alreadyWorktypeIdExistError": "(es)このWorktype IDは既に登録されています。他のWorktype IDで登録してください。",
|
||||||
|
"worktypeIDLimitError": "(es)Worktype IDが登録件数の上限に達しているため追加できません。"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"partnerPage": {
|
||||||
|
"label": {
|
||||||
|
"title": "(es)Partners",
|
||||||
|
"addAccount": "(es)Add Account",
|
||||||
|
"name": "(es)Name",
|
||||||
|
"category": "(es)Category",
|
||||||
|
"accountId": "(es)Account ID",
|
||||||
|
"country": "(es)Country",
|
||||||
|
"primaryAdmin": "(es)Primary Admin",
|
||||||
|
"email": "(es)E-mail",
|
||||||
|
"dealerManagement": "(es)Dealer Management",
|
||||||
|
"partners": "(es)partners",
|
||||||
|
"deleteAccount": "(es)Delete Account"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,10 +5,10 @@
|
|||||||
"passwordIncorrectError": "(fr)Error Message",
|
"passwordIncorrectError": "(fr)Error Message",
|
||||||
"emailIncorrectError": "(fr)Error Message",
|
"emailIncorrectError": "(fr)Error Message",
|
||||||
"internalServerError": "(fr)処理に失敗しました。時間をおいて再実行しても解決しない場合はシステム管理者にお問い合わせください。",
|
"internalServerError": "(fr)処理に失敗しました。時間をおいて再実行しても解決しない場合はシステム管理者にお問い合わせください。",
|
||||||
|
"permissionDeniedError": "(fr)操作を実行する権限がありません。",
|
||||||
"listEmpty": "(fr)検索結果が0件です。",
|
"listEmpty": "(fr)検索結果が0件です。",
|
||||||
"dialogConfirm": "(fr)操作を実行しますか?",
|
"dialogConfirm": "(fr)操作を実行しますか?",
|
||||||
"success": "(fr)処理に成功しました。",
|
"success": "(fr)処理に成功しました。"
|
||||||
"permissionDeniedError": "(fr)操作を実行する権限がありません。"
|
|
||||||
},
|
},
|
||||||
"label": {
|
"label": {
|
||||||
"cancel": "(fr)Cancel",
|
"cancel": "(fr)Cancel",
|
||||||
@ -388,7 +388,30 @@
|
|||||||
"addWorktypeId": "(fr)Add Worktype ID",
|
"addWorktypeId": "(fr)Add Worktype ID",
|
||||||
"worktypeId": "(fr)Worktype ID",
|
"worktypeId": "(fr)Worktype ID",
|
||||||
"description": "(fr)Description",
|
"description": "(fr)Description",
|
||||||
"optionItem": "(fr)Option Item"
|
"descriptionOptional": "(fr)Description (Optional)",
|
||||||
|
"optionItem": "(fr)Option Item",
|
||||||
|
"worktypeIdTerms": "(fr)WorktypeID should be alphanumeric and symbols,\n but not include: \\ / : * ? “ < > | .",
|
||||||
|
"addWorktype": "(fr)Add Worktype"
|
||||||
|
},
|
||||||
|
"message": {
|
||||||
|
"worktypeIdIncorrectError": "(fr)入力されたWorktypeIDがルールを満たしていません。下記のルールを満たすWorktypeIDを入力してください",
|
||||||
|
"alreadyWorktypeIdExistError": "(fr)このWorktype IDは既に登録されています。他のWorktype IDで登録してください。",
|
||||||
|
"worktypeIDLimitError": "(fr)Worktype IDが登録件数の上限に達しているため追加できません。"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"partnerPage": {
|
||||||
|
"label": {
|
||||||
|
"title": "(fr)Partners",
|
||||||
|
"addAccount": "(fr)Add Account",
|
||||||
|
"name": "(fr)Name",
|
||||||
|
"category": "(fr)Category",
|
||||||
|
"accountId": "(fr)Account ID",
|
||||||
|
"country": "(fr)Country",
|
||||||
|
"primaryAdmin": "(fr)Primary Admin",
|
||||||
|
"email": "(fr)E-mail",
|
||||||
|
"dealerManagement": "(fr)Dealer Management",
|
||||||
|
"partners": "(fr)partners",
|
||||||
|
"deleteAccount": "(fr)Delete Account"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user