Merged PR 293: 注文履歴画面_画面遷移対応
## 概要 [Task2273: 注文履歴画面_画面遷移対応](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/2273) - 注文履歴画面について、画面遷移を意識した対応を行いました。 - 何をどう変更したか、追加したライブラリなど - パートナーライセンス画面について、選択行の情報（selectedRow）をstateで保存し、ボタン押下で遷移した先の画面で使用できるよう対応 - 注文履歴画面について、stateの値の有無により、自アカウントとして情報を取得するか他アカウントとして情報を取得するか判定するよう対応 - ボタン表示について自アカウント、子アカウント＋ステータスを意識した表示を行うよう対応 - ライセンス画面（第一～第四階層）から注文履歴画面を呼び出すよう対応 - 「LicenseOrderHistoryPage」について、仮画面用で不要となったので削除しました - このPull Requestでの対象/対象外 - 「Issue」「Issue Cancel」のボタンについて、デザイナさん画面とことなる配置になっています。ボタンについてはPBI対象外で、親子で表示ボタンを変更できることを確認することが目的なので対象外とさせてください。（PBI1210の中で値対応します） - 影響範囲（他の機能にも影響があるか） - 無し ## レビューポイント - 特筆する部分はなし ## UIの変更 - 無し ## 動作確認状況 - ローカルで確認済 ## 補足 - 相談、参考資料などがあれば
This commit is contained in:
masaaki
parent
3b30ee6035
commit
9ef4752bc1
@ -11,7 +11,6 @@ const initialState: LicenseOrderHistoryState = {
|
||||
apps: {
|
||||
limit: LIMIT_ORDER_HISORY_NUM,
|
||||
offset: 0,
|
||||
accountId: 0,
|
||||
isLoading: false,
|
||||
LicenseOrder: undefined,
|
||||
},
|
||||
|
||||
@ -13,7 +13,6 @@ export const getLicenseOrderHistoriesAsync = createAsyncThunk<
|
||||
// パラメータ
|
||||
limit: number;
|
||||
offset: number;
|
||||
accountId: number;
|
||||
},
|
||||
{
|
||||
// rejectした時の返却値の型
|
||||
@ -22,7 +21,7 @@ export const getLicenseOrderHistoriesAsync = createAsyncThunk<
|
||||
};
|
||||
}
|
||||
>("licenses/licenseOrderHisotyAsync", async (args, thunkApi) => {
|
||||
const { limit, offset, accountId } = args;
|
||||
const { limit, offset } = args;
|
||||
// apiのConfigurationを取得する
|
||||
const { getState } = thunkApi;
|
||||
const state = getState() as RootState;
|
||||
@ -31,6 +30,19 @@ export const getLicenseOrderHistoriesAsync = createAsyncThunk<
|
||||
const accountsApi = new AccountsApi(config);
|
||||
|
||||
try {
|
||||
const { selectedRow } = state.partnerLicense.apps;
|
||||
let accountId = 0;
|
||||
// 他の画面から指定されていない場合はログインアカウントのidを取得する
|
||||
if (!selectedRow) {
|
||||
const getMyAccountResponse = await accountsApi.getMyAccount({
|
||||
headers: { authorization: `Bearer ${accessToken}` },
|
||||
});
|
||||
// accountIDを返す
|
||||
accountId = getMyAccountResponse.data.account.accountId;
|
||||
} else {
|
||||
accountId = selectedRow.accountId;
|
||||
}
|
||||
|
||||
const res = await accountsApi.getOrderHistories(
|
||||
{
|
||||
limit,
|
||||
|
||||
@ -13,9 +13,6 @@ export const seletctLimit = (state: RootState) =>
|
||||
export const selectOffset = (state: RootState) =>
|
||||
state.licenseOrderHistory.apps.offset;
|
||||
|
||||
export const selectAccountId = (state: RootState) =>
|
||||
state.licenseOrderHistory.apps.accountId;
|
||||
|
||||
export const selectTotalPage = (state: RootState) => {
|
||||
const { limit } = state.licenseOrderHistory.apps;
|
||||
const { total } = state.licenseOrderHistory.domain;
|
||||
|
||||
@ -13,7 +13,6 @@ export interface Domain {
|
||||
export interface Apps {
|
||||
limit: number;
|
||||
offset: number;
|
||||
accountId: number;
|
||||
LicenseOrder?: LicenseOrder;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { PayloadAction, createSlice } from "@reduxjs/toolkit";
|
||||
import { PartnerLicenseInfo } from "api";
|
||||
import { PartnerLicensesState, HierarchicalElement } from "./state";
|
||||
import { getMyAccountAsync, getPartnerLicenseAsync } from "./operations";
|
||||
import { ACCOUNTS_VIEW_LIMIT } from "./constants";
|
||||
@ -25,6 +26,7 @@ const initialState: PartnerLicensesState = {
|
||||
currentPage: 0,
|
||||
hierarchicalElements: [],
|
||||
isLoading: true,
|
||||
selectedRow: undefined,
|
||||
},
|
||||
};
|
||||
|
||||
@ -53,6 +55,13 @@ export const partnerLicenseSlice = createSlice({
|
||||
const { deleteCount } = action.payload;
|
||||
state.apps.hierarchicalElements.splice(-deleteCount);
|
||||
},
|
||||
changeSelectedRow: (
|
||||
state,
|
||||
action: PayloadAction<{ value?: PartnerLicenseInfo }>
|
||||
) => {
|
||||
const { value } = action.payload;
|
||||
state.apps.selectedRow = value;
|
||||
},
|
||||
savePageInfo: (
|
||||
state,
|
||||
action: PayloadAction<{
|
||||
@ -95,6 +104,7 @@ export const {
|
||||
pushHierarchicalElement,
|
||||
popHierarchicalElement,
|
||||
spliceHierarchicalElement,
|
||||
changeSelectedRow,
|
||||
savePageInfo,
|
||||
} = partnerLicenseSlice.actions;
|
||||
|
||||
|
||||
@ -28,3 +28,5 @@ export const selectCurrentPage = (state: RootState) => {
|
||||
const page = floor(offset / limit) + 1;
|
||||
return page;
|
||||
};
|
||||
export const selectSelectedRow = (state: RootState) =>
|
||||
state.partnerLicense.apps.selectedRow;
|
||||
|
||||
@ -19,6 +19,7 @@ export interface Apps {
|
||||
currentPage: number;
|
||||
hierarchicalElements: HierarchicalElement[];
|
||||
isLoading: boolean;
|
||||
selectedRow?: PartnerLicenseInfo;
|
||||
}
|
||||
|
||||
export interface HierarchicalElement {
|
||||
|
||||
@ -1,45 +0,0 @@
|
||||
import React, { useCallback } from "react";
|
||||
import Footer from "components/footer";
|
||||
import Header from "components/header";
|
||||
import styles from "styles/app.module.scss";
|
||||
import { UpdateTokenTimer } from "components/auth/updateTokenTimer";
|
||||
|
||||
interface LicenseOrderHistoryProps {
|
||||
onClose: () => void;
|
||||
}
|
||||
export const LicenseOrderHistory: React.FC<LicenseOrderHistoryProps> = (
|
||||
props
|
||||
): JSX.Element => {
|
||||
const { onClose } = props;
|
||||
|
||||
// ポップアップを閉じる処理
|
||||
const closeScreen = useCallback(() => {
|
||||
onClose();
|
||||
}, [onClose]);
|
||||
|
||||
// 表示確認用の仮画面
|
||||
return (
|
||||
<div className={styles.wrap}>
|
||||
<Header userName="XXXXXX" />
|
||||
<UpdateTokenTimer />
|
||||
<main className={styles.main}>
|
||||
<div className="">
|
||||
<div className={styles.pageHeader}>
|
||||
<h1 className={styles.pageTitle}>Order History</h1>
|
||||
</div>
|
||||
</div>
|
||||
<ul className={styles.menuAction}>
|
||||
<li>
|
||||
<button type="button" onClick={closeScreen}>
|
||||
<img src="images/undo.svg" alt="" className={styles.menuIcon} />
|
||||
Return
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LicenseOrderHistory;
|
||||
@ -12,13 +12,13 @@ import {
|
||||
LIMIT_ORDER_HISORY_NUM,
|
||||
STATUS,
|
||||
getLicenseOrderHistoriesAsync,
|
||||
selectAccountId,
|
||||
selectCurrentPage,
|
||||
selectIsLoading,
|
||||
selectOrderHisory,
|
||||
selectTotal,
|
||||
selectTotalPage,
|
||||
} from "features/license/licenseOrderHistory";
|
||||
import { selectSelectedRow } from "features/license/partnerLicense";
|
||||
import undo from "../../assets/images/undo.svg";
|
||||
import history from "../../assets/images/history.svg";
|
||||
import progress_activit from "../../assets/images/progress_activit.svg";
|
||||
@ -35,8 +35,8 @@ export const LicenseOrderHistory: React.FC<LicenseOrderHistoryProps> = (
|
||||
const total = useSelector(selectTotal);
|
||||
const totalPage = useSelector(selectTotalPage);
|
||||
const currentPage = useSelector(selectCurrentPage);
|
||||
const accountId = useSelector(selectAccountId);
|
||||
const isLoading = useSelector(selectIsLoading);
|
||||
const selectedRow = useSelector(selectSelectedRow);
|
||||
|
||||
// Return押下時の処理
|
||||
const returnGui = useCallback(() => {
|
||||
@ -52,10 +52,9 @@ export const LicenseOrderHistory: React.FC<LicenseOrderHistoryProps> = (
|
||||
getLicenseOrderHistoriesAsync({
|
||||
limit: LIMIT_ORDER_HISORY_NUM,
|
||||
offset: 0,
|
||||
accountId,
|
||||
})
|
||||
);
|
||||
}, [dispatch, accountId]);
|
||||
}, [dispatch]);
|
||||
|
||||
const getLastPage = useCallback(() => {
|
||||
const lastPageOffset = (totalPage - 1) * LIMIT_ORDER_HISORY_NUM;
|
||||
@ -63,10 +62,9 @@ export const LicenseOrderHistory: React.FC<LicenseOrderHistoryProps> = (
|
||||
getLicenseOrderHistoriesAsync({
|
||||
limit: LIMIT_ORDER_HISORY_NUM,
|
||||
offset: lastPageOffset,
|
||||
accountId,
|
||||
})
|
||||
);
|
||||
}, [dispatch, totalPage, accountId]);
|
||||
}, [dispatch, totalPage]);
|
||||
|
||||
const getPrevPage = useCallback(() => {
|
||||
const prevPageOffset = (currentPage - 2) * LIMIT_ORDER_HISORY_NUM;
|
||||
@ -74,10 +72,9 @@ export const LicenseOrderHistory: React.FC<LicenseOrderHistoryProps> = (
|
||||
getLicenseOrderHistoriesAsync({
|
||||
limit: LIMIT_ORDER_HISORY_NUM,
|
||||
offset: prevPageOffset,
|
||||
accountId,
|
||||
})
|
||||
);
|
||||
}, [dispatch, currentPage, accountId]);
|
||||
}, [dispatch, currentPage]);
|
||||
|
||||
const getNextPage = useCallback(() => {
|
||||
const nextPageOffset = currentPage * LIMIT_ORDER_HISORY_NUM;
|
||||
@ -85,10 +82,9 @@ export const LicenseOrderHistory: React.FC<LicenseOrderHistoryProps> = (
|
||||
getLicenseOrderHistoriesAsync({
|
||||
limit: LIMIT_ORDER_HISORY_NUM,
|
||||
offset: nextPageOffset,
|
||||
accountId,
|
||||
})
|
||||
);
|
||||
}, [dispatch, currentPage, accountId]);
|
||||
}, [dispatch, currentPage]);
|
||||
|
||||
// apiからの値取得関係
|
||||
const licenseOrderHistory = useSelector(selectOrderHisory);
|
||||
@ -98,10 +94,9 @@ export const LicenseOrderHistory: React.FC<LicenseOrderHistoryProps> = (
|
||||
getLicenseOrderHistoriesAsync({
|
||||
limit: LIMIT_ORDER_HISORY_NUM,
|
||||
offset: 0,
|
||||
accountId,
|
||||
})
|
||||
);
|
||||
}, [dispatch, accountId]);
|
||||
}, [dispatch]);
|
||||
|
||||
return (
|
||||
<div className={styles.wrap}>
|
||||
@ -176,7 +171,6 @@ export const LicenseOrderHistory: React.FC<LicenseOrderHistoryProps> = (
|
||||
<td>{x.poNumber}</td>
|
||||
<td>
|
||||
{(() => {
|
||||
// eslint-disable-next-line default-case
|
||||
switch (x.status) {
|
||||
case STATUS.ISSUE_REQESTING:
|
||||
return t(
|
||||
@ -196,26 +190,69 @@ export const LicenseOrderHistory: React.FC<LicenseOrderHistoryProps> = (
|
||||
"orderHistoriesPage.label.orderCanceled"
|
||||
)
|
||||
);
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
})()}
|
||||
</td>
|
||||
<td>
|
||||
<ul
|
||||
className={`${styles.menuAction} ${styles.inTable}`}
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
href=""
|
||||
className={`${styles.menuLink} ${styles.isActive}`}
|
||||
{selectedRow === undefined &&
|
||||
x.status === STATUS.ISSUE_REQESTING && (
|
||||
<ul
|
||||
className={`${styles.menuAction} ${styles.inTable}`}
|
||||
>
|
||||
{t(
|
||||
getTranslationID(
|
||||
"orderHistoriesPage.label.orderCancel"
|
||||
)
|
||||
)}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<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>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
|
||||
@ -31,10 +31,10 @@ import {
|
||||
spliceHierarchicalElement,
|
||||
savePageInfo,
|
||||
getMyAccountAsync,
|
||||
changeSelectedRow,
|
||||
} from "../../features/license/partnerLicense";
|
||||
import { LicenseOrderPopup } from "./licenseOrderPopup";
|
||||
import LicenseSummary from "./licenseSummary";
|
||||
import { LicenseOrderHistory } from "../LicenseOrderHistoryPage";
|
||||
import { LicenseOrderHistory } from "./licenseOrderHistory";
|
||||
import progress_activit from "../../assets/images/progress_activit.svg";
|
||||
|
||||
const PartnerLicense: React.FC = (): JSX.Element => {
|
||||
@ -130,13 +130,21 @@ const PartnerLicense: React.FC = (): JSX.Element => {
|
||||
|
||||
// licenseDetailsボタン押下時
|
||||
// TODO 本PIBでは対象外のため、遷移先の内容の正しさは対象外
|
||||
const onClickViewDetails = () => <LicenseSummary />;
|
||||
const onClickViewDetails = useCallback(
|
||||
(value?: PartnerLicenseInfo) => {
|
||||
dispatch(changeSelectedRow({ value }));
|
||||
},
|
||||
[dispatch]
|
||||
);
|
||||
|
||||
// orderHistoryボタン押下時
|
||||
// TODO 本PIBでは画面遷移までで、遷移先の内容の正しさは対象外
|
||||
const onClickOrderHistory = useCallback(() => {
|
||||
setIslicenseOrderHistoryOpen(true);
|
||||
}, [setIslicenseOrderHistoryOpen]);
|
||||
const onClickOrderHistory = useCallback(
|
||||
(value?: PartnerLicenseInfo) => {
|
||||
dispatch(changeSelectedRow({ value }));
|
||||
setIslicenseOrderHistoryOpen(true);
|
||||
},
|
||||
[dispatch, setIslicenseOrderHistoryOpen]
|
||||
);
|
||||
|
||||
// マウント時のみ実行
|
||||
useEffect(() => {
|
||||
@ -226,7 +234,7 @@ const PartnerLicense: React.FC = (): JSX.Element => {
|
||||
)}
|
||||
{islicenseOrderHistoryOpen && (
|
||||
<LicenseOrderHistory
|
||||
onClose={() => {
|
||||
onReturn={() => {
|
||||
setIslicenseOrderHistoryOpen(false);
|
||||
}}
|
||||
/>
|
||||
@ -287,7 +295,9 @@ const PartnerLicense: React.FC = (): JSX.Element => {
|
||||
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
|
||||
<a
|
||||
className={`${styles.menuLink} ${styles.isActive}`}
|
||||
onClick={onClickOrderHistory}
|
||||
onClick={() => {
|
||||
onClickOrderHistory();
|
||||
}}
|
||||
>
|
||||
<img src={history} alt="" className={styles.menuIcon} />
|
||||
{t(
|
||||
@ -421,9 +431,9 @@ const PartnerLicense: React.FC = (): JSX.Element => {
|
||||
}`}
|
||||
onClick={() => {
|
||||
if (ownPartnerLicenseInfo.tier === 4) {
|
||||
onClickViewDetails();
|
||||
onClickViewDetails(value);
|
||||
} else {
|
||||
onClickOrderHistory();
|
||||
onClickOrderHistory(value);
|
||||
}
|
||||
}}
|
||||
>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user