Merged PR 464: データ取得失敗時に各一覧表示画面の表示がそろっていない
## 概要 [Task2720: データ取得失敗時に各一覧表示画面の表示がそろっていない](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/2720) - 元PBI or タスクへのリンク（内容・目的などはそちらにあるはず） - 何をどう変更したか、追加したライブラリなど - 各一覧表示画面で値０件およびデータ取得エラー時に表示する挙動を統一 ※Accountに関しては自アカウント情報の表示のため値０件はないとみて、特に本タスクの実装 は必要ないと判断しました。 →対応としてはデータ取得エラー時のスナックバー表示のみ ※Userも自アカウント情報が表示されるため上記と同じ実装にする予定でしたが、スナックバーと０件表示ができました。  ・〇はそれぞれの検証条件をクリアできているという意味です。 ・「データ取得エラーとする」は通常ではAccount、License、Userは値が０件となることはなく、データベースエラーの場合のみと考えたので、値が0件＝データ取得エラーとしました。 ・「スナックバー表示のみ」はデータ取得エラーが発生した場合、スナックバー表示のみで対応するという意味です。 ・「表示できない」はデータベースを切った状態だと、子アカウントのorderhistoryが表示されないため、表示できないと記載しました。 - dictationSlice.tsでbuilder.addCase(getSortColumnAsync.rejected, (state) => { state.apps.isLoading = false; を実装したのは、修正前はデータベースを切った状態だとロードのぐるぐるが消えずにいました。原因はgetSortColumnAsyncにrejectの場合、isLordingをfalseにする実装がなかったためです。 以上のことから上記実装を追加しました。 - このPull Requestでの対象/対象外 - 影響範囲（他の機能にも影響があるか） ## レビューポイント - 特にレビューしてほしい箇所 - 軽微なものや自明なものは記載不要 - 修正範囲が大きい場合などに記載 - 全体的にや仕様を満たしているか等は本当に必要な時のみ記載 ## UIの変更 - Before/Afterのスクショなど - スクショ置き場 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/Task2720?csf=1&web=1&e=MBNgO8 ## 動作確認状況 - ローカルで確認 ## 補足 - 相談、参考資料などがあれば
This commit is contained in:
水本 祐希
parent
0e57d0cb81
commit
3af64fbf8e
@ -117,6 +117,10 @@ export const dictationSlice = createSlice({
|
||||
state.apps.direction = action.payload.direction;
|
||||
state.apps.paramName = action.payload.paramName;
|
||||
});
|
||||
// 画面起動時にgetSortColumnAsyncがrejectedするとisLoadingがtrueのままになるため
|
||||
builder.addCase(getSortColumnAsync.rejected, (state) => {
|
||||
state.apps.isLoading = false;
|
||||
});
|
||||
builder.addCase(listTypistsAsync.fulfilled, (state, action) => {
|
||||
state.domain.typists = action.payload.typists;
|
||||
});
|
||||
|
||||
@ -41,6 +41,13 @@ export const listUsersAsync = createAsyncThunk<
|
||||
// e ⇒ errorObjectに変換
|
||||
const error = createErrorObject(e);
|
||||
|
||||
thunkApi.dispatch(
|
||||
openSnackbar({
|
||||
level: "error",
|
||||
message: getTranslationID("common.message.internalServerError"),
|
||||
})
|
||||
);
|
||||
|
||||
return thunkApi.rejectWithValue({ error });
|
||||
}
|
||||
});
|
||||
|
||||
@ -331,6 +331,16 @@ export const LicenseOrderHistory: React.FC<LicenseOrderHistoryProps> = (
|
||||
</tr>
|
||||
))}
|
||||
</table>
|
||||
{!isLoading && licenseOrderHistory.length === 0 && (
|
||||
<p
|
||||
style={{
|
||||
textAlign: "center",
|
||||
width: "1000px",
|
||||
}}
|
||||
>
|
||||
{t(getTranslationID("common.message.listEmpty"))}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{isLoading && (
|
||||
<img
|
||||
|
||||
@ -452,6 +452,16 @@ const PartnerLicense: React.FC = (): JSX.Element => {
|
||||
</tr>
|
||||
))}
|
||||
</table>
|
||||
{!isLoading && childrenPartnerLicensesInfo.length === 0 && (
|
||||
<p
|
||||
style={{
|
||||
margin: "10px",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
{t(getTranslationID("common.message.listEmpty"))}
|
||||
</p>
|
||||
)}
|
||||
{/* pagenation */}
|
||||
<div className={styles.pagenation}>
|
||||
<nav className={styles.pagenationNav}>
|
||||
|
||||
@ -189,6 +189,16 @@ const PartnerPage: React.FC = (): JSX.Element => {
|
||||
</tr>
|
||||
))}
|
||||
</table>
|
||||
{!isLoading && partnerInfo.partners.length === 0 && (
|
||||
<p
|
||||
style={{
|
||||
textAlign: "center",
|
||||
width: "1420px",
|
||||
}}
|
||||
>
|
||||
{t(getTranslationID("common.message.listEmpty"))}
|
||||
</p>
|
||||
)}
|
||||
{/** pagenation */}
|
||||
<div className={styles.pagenation}>
|
||||
<nav className={styles.pagenationNav}>
|
||||
|
||||
@ -101,16 +101,17 @@ export const TemplateFilePage: React.FC = () => {
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{!isLoading && templates?.length === 0 && (
|
||||
<p
|
||||
style={{
|
||||
margin: "10px",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
{t(getTranslationID("common.message.listEmpty"))}
|
||||
</p>
|
||||
)}
|
||||
{!isLoading &&
|
||||
(templates === undefined || templates.length === 0) && (
|
||||
<p
|
||||
style={{
|
||||
margin: "10px",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
{t(getTranslationID("common.message.listEmpty"))}
|
||||
</p>
|
||||
)}
|
||||
{isLoading && (
|
||||
<img
|
||||
src={progress_activit}
|
||||
|
||||
@ -290,6 +290,16 @@ const UserListPage: React.FC = (): JSX.Element => {
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
{!isLoading && users.length === 0 && (
|
||||
<p
|
||||
style={{
|
||||
margin: "10px",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
{t(getTranslationID("common.message.listEmpty"))}
|
||||
</p>
|
||||
)}
|
||||
{isLoading && (
|
||||
<img
|
||||
src={progress_activit}
|
||||
|
||||
@ -265,17 +265,18 @@ const WorktypeIdSettingPage: React.FC = (): JSX.Element => {
|
||||
</tr>
|
||||
))}
|
||||
</table>
|
||||
{!isLoading && worktypes?.length === 0 && (
|
||||
<p
|
||||
style={{
|
||||
margin: "10px",
|
||||
textAlign: "center",
|
||||
width: "1000px",
|
||||
}}
|
||||
>
|
||||
{t(getTranslationID("common.message.listEmpty"))}
|
||||
</p>
|
||||
)}
|
||||
{!isLoading &&
|
||||
(worktypes === undefined || worktypes.length === 0) && (
|
||||
<p
|
||||
style={{
|
||||
margin: "10px",
|
||||
textAlign: "center",
|
||||
width: "1000px",
|
||||
}}
|
||||
>
|
||||
{t(getTranslationID("common.message.listEmpty"))}
|
||||
</p>
|
||||
)}
|
||||
{isLoading && (
|
||||
<img
|
||||
src={progress_activit}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, { useEffect } from "react";
|
||||
import Header from "components/header";
|
||||
import Footer from "components/footer";
|
||||
import styles from "styles/app.module.scss";
|
||||
@ -14,13 +14,10 @@ import { listWorkflowAsync } from "features/workflow/operations";
|
||||
import { selectIsLoading, selectWorkflows } from "features/workflow";
|
||||
import progress_activit from "assets/images/progress_activit.svg";
|
||||
import { getTranslationID } from "translation";
|
||||
import { AddWorkflowPopup } from "./addworkflowPopup";
|
||||
|
||||
const WorkflowPage: React.FC = (): JSX.Element => {
|
||||
const dispatch: AppDispatch = useDispatch();
|
||||
const [t] = useTranslation();
|
||||
// 追加Popupの表示制御
|
||||
const [isShowAddPopup, setIsShowAddPopup] = useState<boolean>(false);
|
||||
const workflows = useSelector(selectWorkflows);
|
||||
const isLoading = useSelector(selectIsLoading);
|
||||
|
||||
@ -28,143 +25,117 @@ const WorkflowPage: React.FC = (): JSX.Element => {
|
||||
dispatch(listWorkflowAsync());
|
||||
}, [dispatch]);
|
||||
return (
|
||||
<>
|
||||
{isShowAddPopup && (
|
||||
<AddWorkflowPopup
|
||||
onClose={() => {
|
||||
setIsShowAddPopup(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<div className={styles.wrap}>
|
||||
<Header userName="XXXXXX" />
|
||||
<UpdateTokenTimer />
|
||||
<main className={styles.main}>
|
||||
<div className="">
|
||||
<div className={styles.pageHeader}>
|
||||
<h1 className={styles.pageTitle}>
|
||||
{t(getTranslationID("workflowPage.label.title"))}
|
||||
</h1>
|
||||
</div>
|
||||
<section className={styles.workflow}>
|
||||
<div>
|
||||
<ul className={`${styles.menuAction} ${styles.alignRight}`}>
|
||||
<li className={styles.floatLeft}>
|
||||
{/* 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={ruleAddImg}
|
||||
alt="addRoutingRule"
|
||||
className={styles.menuIcon}
|
||||
/>
|
||||
{t(getTranslationID("workflowPage.label.addRoutingRule"))}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="/workflow/template"
|
||||
className={`${styles.menuLink} ${styles.isActive}`}
|
||||
>
|
||||
<img
|
||||
src={templateSettingImg}
|
||||
alt="templateSetting"
|
||||
className={styles.menuIcon}
|
||||
/>
|
||||
{t(
|
||||
getTranslationID("workflowPage.label.templateSetting")
|
||||
)}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="/workflow/worktype-id"
|
||||
className={`${styles.menuLink} ${styles.isActive}`}
|
||||
>
|
||||
<img
|
||||
src={worktypeSettingImg}
|
||||
alt="worktypeIdSetting"
|
||||
className={styles.menuIcon}
|
||||
/>
|
||||
{t(
|
||||
getTranslationID("workflowPage.label.worktypeIdSetting")
|
||||
)}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="/workflow/typist-group"
|
||||
className={`${styles.menuLink} ${styles.isActive}`}
|
||||
>
|
||||
<img
|
||||
src={groupSettingImg}
|
||||
alt="typistGroupSetting"
|
||||
className={styles.menuIcon}
|
||||
/>
|
||||
{t(
|
||||
getTranslationID(
|
||||
"workflowPage.label.typistGroupSetting"
|
||||
)
|
||||
)}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<table className={`${styles.table} ${styles.workflow}`}>
|
||||
<tr className={styles.tableHeader}>
|
||||
<th className={styles.clm0}>{/** empty th */}</th>
|
||||
<th>
|
||||
{t(getTranslationID("workflowPage.label.authorID"))}
|
||||
</th>
|
||||
<th>
|
||||
{t(getTranslationID("workflowPage.label.worktype"))}
|
||||
</th>
|
||||
<th>
|
||||
{t(
|
||||
getTranslationID("workflowPage.label.transcriptionist")
|
||||
)}
|
||||
</th>
|
||||
<th>
|
||||
{t(getTranslationID("workflowPage.label.template"))}
|
||||
</th>
|
||||
</tr>
|
||||
{workflows?.map((workflow) => (
|
||||
<tr key={workflow.id}>
|
||||
<td className={styles.clm0}>
|
||||
<ul className={styles.menuInTable}>
|
||||
<li>
|
||||
<a href="">
|
||||
{t(
|
||||
getTranslationID("workflowPage.label.editRule")
|
||||
)}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
{t(getTranslationID("common.label.delete"))}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td>{workflow.author.authorId}</td>
|
||||
<td>{workflow.worktype?.worktypeId ?? "-"}</td>
|
||||
<div className={styles.wrap}>
|
||||
<Header userName="XXXXXX" />
|
||||
<UpdateTokenTimer />
|
||||
<main className={styles.main}>
|
||||
<div className="">
|
||||
<div className={styles.pageHeader}>
|
||||
<h1 className={styles.pageTitle}>
|
||||
{t(getTranslationID("workflowPage.label.title"))}
|
||||
</h1>
|
||||
</div>
|
||||
<section className={styles.workflow}>
|
||||
<div>
|
||||
<ul className={`${styles.menuAction} ${styles.alignRight}`}>
|
||||
<li className={styles.floatLeft}>
|
||||
<a className={`${styles.menuLink} ${styles.isActive}`}>
|
||||
<img
|
||||
src={ruleAddImg}
|
||||
alt="addRoutingRule"
|
||||
className={styles.menuIcon}
|
||||
/>
|
||||
{t(getTranslationID("workflowPage.label.addRoutingRule"))}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<td className={styles.txWsline}>
|
||||
{workflow.typists.map((typist, i) => (
|
||||
<>
|
||||
{typist.typistName}
|
||||
{i !== workflow.typists.length - 1 && <br />}
|
||||
</>
|
||||
))}
|
||||
</td>
|
||||
<td>{workflow.template?.fileName ?? "-"}</td>
|
||||
</tr>
|
||||
))}
|
||||
</table>
|
||||
{!isLoading && workflows?.length === 0 && (
|
||||
<li>
|
||||
<a
|
||||
href="/workflow/template"
|
||||
className={`${styles.menuLink} ${styles.isActive}`}
|
||||
>
|
||||
<img
|
||||
src={templateSettingImg}
|
||||
alt="templateSetting"
|
||||
className={styles.menuIcon}
|
||||
/>
|
||||
{t(getTranslationID("workflowPage.label.templateSetting"))}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="/workflow/worktype-id"
|
||||
className={`${styles.menuLink} ${styles.isActive}`}
|
||||
>
|
||||
<img
|
||||
src={worktypeSettingImg}
|
||||
alt="worktypeIdSetting"
|
||||
className={styles.menuIcon}
|
||||
/>
|
||||
{t(
|
||||
getTranslationID("workflowPage.label.worktypeIdSetting")
|
||||
)}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="/workflow/typist-group"
|
||||
className={`${styles.menuLink} ${styles.isActive}`}
|
||||
>
|
||||
<img
|
||||
src={groupSettingImg}
|
||||
alt="typistGroupSetting"
|
||||
className={styles.menuIcon}
|
||||
/>
|
||||
{t(
|
||||
getTranslationID("workflowPage.label.typistGroupSetting")
|
||||
)}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<table className={`${styles.table} ${styles.workflow}`}>
|
||||
<tr className={styles.tableHeader}>
|
||||
<th className={styles.clm0}>{/** empty th */}</th>
|
||||
<th>{t(getTranslationID("workflowPage.label.authorID"))}</th>
|
||||
<th>{t(getTranslationID("workflowPage.label.worktype"))}</th>
|
||||
<th>
|
||||
{t(getTranslationID("workflowPage.label.transcriptionist"))}
|
||||
</th>
|
||||
<th>{t(getTranslationID("workflowPage.label.template"))}</th>
|
||||
</tr>
|
||||
{workflows?.map((workflow) => (
|
||||
<tr key={workflow.id}>
|
||||
<td className={styles.clm0}>
|
||||
<ul className={styles.menuInTable}>
|
||||
<li>
|
||||
<a href="">
|
||||
{t(getTranslationID("workflowPage.label.editRule"))}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
{t(getTranslationID("common.label.delete"))}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td>{workflow.author.authorId}</td>
|
||||
<td>{workflow.worktype?.worktypeId ?? "-"}</td>
|
||||
|
||||
<td className={styles.txWsline}>
|
||||
{workflow.typists.map((typist, i) => (
|
||||
<>
|
||||
{typist.typistName}
|
||||
{i !== workflow.typists.length - 1 && <br />}
|
||||
</>
|
||||
))}
|
||||
</td>
|
||||
<td>{workflow.template?.fileName ?? "-"}</td>
|
||||
</tr>
|
||||
))}
|
||||
</table>
|
||||
{!isLoading &&
|
||||
(workflows === undefined || workflows.length === 0) && (
|
||||
<p
|
||||
style={{
|
||||
margin: "10px",
|
||||
@ -174,20 +145,19 @@ const WorkflowPage: React.FC = (): JSX.Element => {
|
||||
{t(getTranslationID("common.message.listEmpty"))}
|
||||
</p>
|
||||
)}
|
||||
{isLoading && (
|
||||
<img
|
||||
src={progress_activit}
|
||||
className={styles.icLoading}
|
||||
alt="Loading"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
</>
|
||||
{isLoading && (
|
||||
<img
|
||||
src={progress_activit}
|
||||
className={styles.icLoading}
|
||||
alt="Loading"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user