From d13d4b1169296611babba8d2661268115f0225b7 Mon Sep 17 00:00:00 2001
From: Hiroyasu OHYAMA <user.localhost2000@gmail.com>
Date: Thu, 12 Dec 2024 07:46:59 +0000
Subject: [PATCH] Added page component for AliasEntry

---
 .../components/entity/EntityControlMenu.tsx   |  4 +
 frontend/src/pages/ListAliasEntryPage.tsx     | 88 +++++++++++++++++++
 frontend/src/routes/AppRouter.tsx             |  6 ++
 frontend/src/routes/Routes.ts                 |  2 +
 4 files changed, 100 insertions(+)
 create mode 100644 frontend/src/pages/ListAliasEntryPage.tsx

diff --git a/frontend/src/components/entity/EntityControlMenu.tsx b/frontend/src/components/entity/EntityControlMenu.tsx
index 3312e0cff..15e584c64 100644
--- a/frontend/src/components/entity/EntityControlMenu.tsx
+++ b/frontend/src/components/entity/EntityControlMenu.tsx
@@ -20,6 +20,7 @@ import {
   editEntityPath,
   entitiesPath,
   restoreEntryPath,
+  listAliasPath,
   topPath,
   entityEntriesPath,
   aclHistoryPath,
@@ -94,6 +95,9 @@ export const EntityControlMenu: FC<Props> = ({
       <MenuItem component={Link} to={entityEntriesPath(entityId)}>
         <Typography>アイテム一覧</Typography>
       </MenuItem>
+      <MenuItem component={Link} to={listAliasPath(entityId)}>
+        <Typography>エイリアス一覧</Typography>
+      </MenuItem>
       <MenuItem component={Link} to={editEntityPath(entityId)}>
         <Typography>編集</Typography>
       </MenuItem>
diff --git a/frontend/src/pages/ListAliasEntryPage.tsx b/frontend/src/pages/ListAliasEntryPage.tsx
new file mode 100644
index 000000000..297b66c18
--- /dev/null
+++ b/frontend/src/pages/ListAliasEntryPage.tsx
@@ -0,0 +1,88 @@
+import AppsIcon from "@mui/icons-material/Apps";
+import { Box, Container, IconButton, Grid } from "@mui/material";
+import { useSnackbar } from "notistack";
+import React, { FC, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { EntityControlMenu } from "components/entity/EntityControlMenu";
+import { useAsyncWithThrow } from "../hooks/useAsyncWithThrow";
+import { useTypedParams } from "../hooks/useTypedParams";
+import { EntryImportModal } from "components/entry/EntryImportModal";
+
+import { Loading } from "components/common/Loading";
+import { PageHeader } from "components/common/PageHeader";
+import { SubmitButton } from "components/common/SubmitButton";
+import {
+  CopyForm as DefaultCopyForm,
+  CopyFormProps,
+} from "components/entry/CopyForm";
+import { EntryBreadcrumbs } from "components/entry/EntryBreadcrumbs";
+import { usePrompt } from "hooks/usePrompt";
+import { aironeApiClient } from "repository/AironeApiClient";
+import { entityEntriesPath, entryDetailsPath } from "routes/Routes";
+import { EntityBreadcrumbs } from "components/entity/EntityBreadcrumbs";
+
+interface Props {
+  CopyForm?: FC<CopyFormProps>;
+}
+
+export const ListAliasEntryPage: FC<Props> = ({ CopyForm = DefaultCopyForm }) => {
+  const navigate = useNavigate();
+  const { enqueueSnackbar } = useSnackbar();
+
+  const [entityAnchorEl, setEntityAnchorEl] =
+    useState<HTMLButtonElement | null>(null);
+  const [openImportModal, setOpenImportModal] = React.useState(false);
+
+  const { entityId } = useTypedParams<{
+    entityId: number;
+  }>();
+
+  const entity = useAsyncWithThrow(async () => {
+    return await aironeApiClient.getEntity(entityId);
+  }, [entityId]);
+
+  // (TODO) get all corresponding aliases of entity
+
+  return (
+    <Box>
+      <EntityBreadcrumbs entity={entity.value} title="エイリアス設定" />
+
+      <PageHeader title={entity.value?.name ?? ""} description="エイリアス設定">
+        <Box width="50px">
+          <IconButton
+            id="entity_menu"
+            onClick={(e) => {
+              setEntityAnchorEl(e.currentTarget);
+            }}
+          >
+            <AppsIcon />
+          </IconButton>
+          <EntityControlMenu
+            entityId={entityId}
+            anchorElem={entityAnchorEl}
+            handleClose={() => setEntityAnchorEl(null)}
+            setOpenImportModal={setOpenImportModal}
+          />
+        </Box>
+      </PageHeader>
+
+      <Container>
+        {/* show all Aliases that are associated with each Items */}
+        <Grid container spacing={2}>
+          <Grid item xs={4} sx={{ height: "500px" }}>
+            <>xs=8</>
+          </Grid>
+          <Grid item xs={8} sx={{ height: "500px" }}>
+            <>xs=4</>
+          </Grid>
+        </Grid>
+      </Container>
+
+      <EntryImportModal
+        openImportModal={openImportModal}
+        closeImportModal={() => setOpenImportModal(false)}
+      />
+    </Box>
+  );
+};
\ No newline at end of file
diff --git a/frontend/src/routes/AppRouter.tsx b/frontend/src/routes/AppRouter.tsx
index bc0bc976a..73f0b6efe 100644
--- a/frontend/src/routes/AppRouter.tsx
+++ b/frontend/src/routes/AppRouter.tsx
@@ -9,6 +9,7 @@ import {
 } from "react-router-dom";
 
 import { ACLHistoryPage } from "../pages/ACLHistoryPage";
+import { ListAliasEntryPage } from "../pages/ListAliasEntryPage";
 import { EntryCopyPage } from "../pages/EntryCopyPage";
 import { EntryDetailsPage } from "../pages/EntryDetailsPage";
 import { EntryRestorePage } from "../pages/EntryRestorePage";
@@ -52,6 +53,7 @@ import {
   groupsPath,
   jobsPath,
   loginPath,
+  listAliasPath,
   newEntityPath,
   newEntryPath,
   newGroupPath,
@@ -133,6 +135,10 @@ export const AppRouter: FC<Props> = ({ customRoutes }) => {
             path={entityHistoryPath(":entityId")}
             element={<EntityHistoryPage />}
           />
+          <Route
+            path={listAliasPath(":entityId")}
+            element={<ListAliasEntryPage />}
+          />
           <Route path={newEntityPath()} element={<EntityEditPage />} />
           <Route
             path={editEntityPath(":entityId")}
diff --git a/frontend/src/routes/Routes.ts b/frontend/src/routes/Routes.ts
index 6b9332670..e8c454f39 100644
--- a/frontend/src/routes/Routes.ts
+++ b/frontend/src/routes/Routes.ts
@@ -41,6 +41,8 @@ export const showEntryHistoryPath = (
 // entities
 export const entityHistoryPath = (entityId: number | string) =>
   basePath + `entities/${entityId}/history`;
+export const listAliasPath = (entityId: number | string) =>
+  basePath + `entities/${entityId}/alias`;
 export const newEntityPath = () => basePath + "entities/new";
 export const editEntityPath = (entityId: number | string) =>
   basePath + `entities/${entityId}`;