Merged PR 302: 画面修正(注文履歴)

## 概要
[Task2339: 画面修正(注文履歴)](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/2339)

注文履歴画面について、以下の修正を行いました。
・Issueボタン押下時の処理を追加
・Issueボタン、Issue Cancelボタン、Order Cancelボタンのレイアウト修正
※Issue Cancelボタン、Order Cancelボタン押下時の動作は今回は対象外です。

## レビューポイント
なし

## 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/Task2339?csf=1&web=1&e=sUjf1e

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

## 補足
なし
This commit is contained in:
水本 祐希 2023-08-08 04:46:59 +00:00
parent ef83477533
commit c304271494
8 changed files with 192 additions and 59 deletions

View File

@ -42,4 +42,6 @@ export const errorCodes = [
"E010701", // Blobファイル不在エラー
"E010801", // ライセンス不在エラー
"E010802", // ライセンス取り込み済みエラー
"E010803", // ライセンス数不足エラー
"E010804", // ライセンス発行済みエラー
] as const;

View File

@ -1,6 +1,6 @@
import { PayloadAction, createSlice } from "@reduxjs/toolkit";
import { LicenseOrderHistoryState } from "./state";
import { getLicenseOrderHistoriesAsync } from "./operations";
import { getLicenseOrderHistoriesAsync, issueLicenseAsync } from "./operations";
import { LIMIT_ORDER_HISORY_NUM } from "./constants";
const initialState: LicenseOrderHistoryState = {
@ -52,6 +52,15 @@ export const licenseOrderHistorySlice = createSlice({
builder.addCase(getLicenseOrderHistoriesAsync.rejected, (state) => {
state.apps.isLoading = false;
});
builder.addCase(issueLicenseAsync.pending, (state) => {
state.apps.isLoading = true;
});
builder.addCase(issueLicenseAsync.fulfilled, (state) => {
state.apps.isLoading = false;
});
builder.addCase(issueLicenseAsync.rejected, (state) => {
state.apps.isLoading = false;
});
},
});

View File

@ -74,3 +74,70 @@ export const getLicenseOrderHistoriesAsync = createAsyncThunk<
return thunkApi.rejectWithValue({ error });
}
});
export const issueLicenseAsync = createAsyncThunk<
{
/* Empty Object */
},
{
// パラメータ
orderedAccountId: number;
poNumber: string;
},
{
// rejectした時の返却値の型
rejectValue: {
error: ErrorObject;
};
}
>("licenses/issueLicenseAsync", async (args, thunkApi) => {
const { orderedAccountId, poNumber } = args;
// 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);
try {
await accountsApi.issueLicense(
{
orderedAccountId,
poNumber,
},
{
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");
if (error.code === "E010803") {
errorMessage = getTranslationID(
"orderHistoriesPage.message.notEnoughOfNumberOfLicense"
);
} else if (error.code === "E010804") {
errorMessage = getTranslationID(
"orderHistoriesPage.message.alreadyIssueLicense"
);
}
thunkApi.dispatch(
openSnackbar({
level: "error",
message: errorMessage,
})
);
return thunkApi.rejectWithValue({ error });
}
});

View File

@ -17,6 +17,7 @@ import {
selectOrderHisory,
selectTotal,
selectTotalPage,
issueLicenseAsync,
selectOffset,
savePageInfo,
selectCompanyName,
@ -50,6 +51,40 @@ export const LicenseOrderHistory: React.FC<LicenseOrderHistoryProps> = (
onReturn();
}, [isLoading, onReturn]);
// issue,issueCancel,orderCancelボタンの処理終了時の情報更新用
const UpdateHistoriesList = () => {
dispatch(
getLicenseOrderHistoriesAsync({
limit: LIMIT_ORDER_HISORY_NUM,
offset,
})
);
};
// issueボタンを押下時の処理
const issueLicense = useCallback(
async (poNumber: string) => {
// ダイアログ確認
// eslint-disable-next-line no-alert
if (window.confirm(t(getTranslationID("common.message.dialogConfirm")))) {
// 注文APIの呼び出し
if (selectedRow) {
const { meta } = await dispatch(
issueLicenseAsync({
orderedAccountId: selectedRow.accountId,
poNumber,
})
);
if (meta.requestStatus === "fulfilled") {
UpdateHistoriesList();
}
}
}
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[dispatch]
);
// ページネーションのボタンクリック時のアクション
const movePage = (targetOffset: number) => {
dispatch(
@ -130,7 +165,6 @@ export const LicenseOrderHistory: React.FC<LicenseOrderHistoryProps> = (
{t(getTranslationID("orderHistoriesPage.label.status"))}
</th>
<th className={styles.noLine} />
<th className={styles.noLine} />
</tr>
{!isLoading &&
licenseOrderHistory.length !== 0 &&
@ -168,63 +202,68 @@ export const LicenseOrderHistory: React.FC<LicenseOrderHistoryProps> = (
})()}
</td>
<td>
{selectedRow === undefined &&
x.status === STATUS.ISSUE_REQESTING && (
<ul
className={`${styles.menuAction} ${styles.inTable}`}
>
<li>
<a
href=""
className={`${styles.menuLink} ${styles.isActive}`}
>
{t(
getTranslationID(
"orderHistoriesPage.label.orderCancel"
)
)}
</a>
</li>
</ul>
)}
{selectedRow !== undefined &&
x.status === STATUS.ISSUE_REQESTING && (
<ul
className={`${styles.menuAction} ${styles.inTable}`}
>
<li>
<a
href=""
className={`${styles.colorLink} ${styles.isActive}`}
>
{t(
getTranslationID(
"orderHistoriesPage.label.issue"
)
)}
</a>
</li>
</ul>
)}
{selectedRow !== undefined &&
x.status === STATUS.ISSUED && (
<ul
className={`${styles.menuAction} ${styles.inTable}`}
>
<li>
<a
href=""
className={`${styles.menuLink} ${styles.isActive}`}
>
{t(
getTranslationID(
"orderHistoriesPage.label.issueCancel"
)
)}
</a>
</li>
</ul>
)}
{!selectedRow && (
<ul
className={`${styles.menuAction} ${styles.inTable}`}
>
<li>
<a
className={`${styles.menuLink} ${
x.status === STATUS.ISSUE_REQESTING
? styles.isActive
: ""
}`}
>
{t(
getTranslationID(
"orderHistoriesPage.label.orderCancel"
)
)}
</a>
</li>
</ul>
)}
{selectedRow && (
<ul
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.colorLink} ${
x.status === STATUS.ISSUE_REQESTING
? styles.isActive
: ""
}`}
onClick={(event) => {
event.preventDefault();
issueLicense(x.poNumber);
}}
>
{t(
getTranslationID(
"orderHistoriesPage.label.issue"
)
)}
</a>
</li>
<li>
<a
className={`${styles.menuLink} ${
x.status === STATUS.ISSUED
? styles.isActive
: ""
}`}
>
{t(
getTranslationID(
"orderHistoriesPage.label.issueCancel"
)
)}
</a>
</li>
</ul>
)}
</td>
</tr>
))}

View File

@ -324,6 +324,10 @@
"issueCancel": "(de)Issue Cancel",
"orderCancel": "(de)Order Cancel",
"histories": "(de)histories"
},
"message": {
"notEnoughOfNumberOfLicense": "(de)ライセンスが不足しているため、発行することができませんでした。ライセンスの注文を行ってください。",
"alreadyIssueLicense": "(de)すでに発行済みの注文です。画面を更新してください。"
}
}
}

View File

@ -324,6 +324,10 @@
"issueCancel": "Issue Cancel",
"orderCancel": "Order Cancel",
"histories": "histories"
},
"message": {
"notEnoughOfNumberOfLicense": "ライセンスが不足しているため、発行することができませんでした。ライセンスの注文を行ってください。",
"alreadyIssueLicense": "すでに発行済みの注文です。画面を更新してください。"
}
}
}

View File

@ -324,6 +324,10 @@
"issueCancel": "(es)Issue Cancel",
"orderCancel": "(es)Order Cancel",
"histories": "(es)histories"
},
"message": {
"notEnoughOfNumberOfLicense": "(es)ライセンスが不足しているため、発行することができませんでした。ライセンスの注文を行ってください。",
"alreadyIssueLicense": "(es)すでに発行済みの注文です。画面を更新してください。"
}
}
}

View File

@ -324,6 +324,10 @@
"issueCancel": "(fr)Issue Cancel",
"orderCancel": "(fr)Order Cancel",
"histories": "(fr)histories"
},
"message": {
"notEnoughOfNumberOfLicense": "(fr)ライセンスが不足しているため、発行することができませんでした。ライセンスの注文を行ってください。",
"alreadyIssueLicense": "(fr)すでに発行済みの注文です。画面を更新してください。"
}
}
}