Merge pull request #2 from Marukome0743/main

Add Next.js files

.editorconfig

@@ -0,0 +1,18 @@
+# https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+max_line_length = 80
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = 0
+trim_trailing_whitespace = false
+
+[COMMIT_EDITMSG]
+max_line_length = 0

.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "@next/next/no-img-element": "off"
+  }
+}

.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "ms-vscode-remote.vscode-remote-extensionpack",
+    "ms-azuretools.vscode-docker",
+    "davidanson.vscode-markdownlint",
+    "editorconfig.editorconfig",
+    "eamodio.gitlens"
+  ]
+}

components/dashboard/AccountSettingManagementComponent.js

@@ -0,0 +1,292 @@
+import { Button, Grid, Paper, Typography, Box, FormControlLabel, Checkbox, Dialog, DialogContent } from "@mui/material"
+import { useRouter } from "next/router";
+import { createRef, forwardRef, useEffect, useRef, useState } from "react";
+import { updateAccountData } from "../../utilities/setContentData";
+import { getAccountDataClient, getContentsDataClient } from "../../utilities/getContentDataClient";
+import { useOrderContext } from "./OrderContext";
+import { IconButton } from "@mui/material";
+import CancelIcon from "@mui/icons-material/Cancel";
+import { getAuth } from '@firebase/auth';
+
+
+function AccountSettingManagementComponent() {
+  const [user, setUser] = useState({});
+  const [contentList, setContentList] = useState([]);
+
+  const [displayFlg, setDisplayFlg] = useState(false);
+  const [updateDisplay, setUpdateDisplay] = useState(false);
+
+  const [userName, setUserName] = useState("");
+  const [userNameFlg, setUserNameFlg] = useState(true);
+
+  const [nowPassword, setNowPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [newRePassword, setNewRePassword] = useState("");
+  const [passwordFlg, setPasswordFlg] = useState(true);
+  const [management, setManagement] = useState("user");
+  const [coverageAreaList, setCoverageAreaList] = useState([]);
+
+  const [error, setError] = useState("");
+  const [errorPart, setErrorPart] = useState("");
+  const [showError, setShowError] = useState(false);
+
+  const { uid, setCoverageArea, progress, setProgress } = useOrderContext();
+  useEffect(() => {
+  　　if (!sessionStorage.getItem('uid') && !uid) {
+        router.push("/dashboard/Login");
+      }　
+      async function getAccountInfoData() {
+        const u_id = sessionStorage.getItem('uid') || uid;
+        if (!u_id) return;
+        const userData = await getAccountDataClient(u_id);
+        const contents = await getContentsDataClient("contents");
+        console.log(userData);
+        setUser(userData);
+        console.log(contents);
+        setContentList(contents);
+        setDisplayFlg(true);
+        setManagement((userData && userData.management) ? "management": "user");
+        const list = contents.map(item => userData && userData.coverageArea.includes(item.areaId))
+        setCoverageAreaList(list);
+      }
+      getAccountInfoData();
+    }, [progress])
+
+  const router = useRouter();
+
+  const onClickUpdate = async () => {
+  　if(!passwordFlg) {
+      if(nowPassword == newPassword) {
+        setError("同じパスワードが設定されています");
+        setErrorPart("パスワード");
+        setShowError(true);
+        return;
+      }
+      if(newPassword != newRePassword) {
+        setError("新しいパスワードに関して異なった入力がされています");
+        setErrorPart("パスワード");
+        setShowError(true);
+        return;
+      }
+    }
+    try {
+      setProgress(true); // スピナーを表示
+      const list = coverageAreaList.map((item, i) => {
+        if(item) {
+          return contentList[i].areaId;
+        }
+      }).filter(item => item);
+      const content = {
+        userName: userNameFlg ? user.userName : userName,
+        management: (management == "management") ? true: false,
+        coverageArea: list,
+      }
+      if(!passwordFlg) {
+        await updateAccountData(uid, content, user.email, nowPassword, newPassword);
+      } else {
+        await updateAccountData(uid, content);
+      }
+      setCoverageArea(list);
+      setUpdateDisplay(false);
+    } catch (e) {
+      console.log(e);
+    } finally {
+      setProgress(false); // スピナーを表示
+    }
+  }
+  const handleCloseError = () => {
+    setShowError(false);
+  }
+
+  // エリア設定
+  const onChangeCheckBox = (index) => {
+    const list = coverageAreaList.map((item, i) => (index == i) ? !item: item);
+    setCoverageAreaList(list);
+  }
+
+
+  const areaList = user && user.coverageArea && user.coverageArea.map((area, index)=> {
+     const list = contentList.filter(content => content.areaId == area);
+     return (list[0] && list[0].areaName) && list[0].areaName ;
+  }).filter(item=> item);
+
+  window && window.addEventListener('beforeunload', () => {
+    const auth = getAuth();
+    auth.signOut();
+  });
+  return (
+    <>
+      <Box>
+        <Typography>アカウント詳細管理</Typography>
+        {!displayFlg ? (
+         <>
+           <Typography>データ取得中</Typography>
+         </>
+        )
+        :
+        (
+        <>
+        <Typography style={{ width: "50%", lineHeight: "35px" }}>ユーザー名： {user.userName}</Typography>
+        <Box style={{ display: "flex", flexDirection: "column" }}>
+          <Paper sx={{ height: 1 / 5, m: 1 }} key={"key"} style={{  position: "relative" }}>
+            <Grid container>
+              {updateDisplay ? (<Button variant="contained" sx={{ m: 1 }} onClick={() => setUpdateDisplay(false)}>閉じる</Button>) : (<Button variant="contained" sx={{ m: 1 }} onClick={() => setUpdateDisplay(true)}>編集</Button>)}
+            </Grid>
+            <Grid>
+                {updateDisplay ? (
+                  <>
+                    <Grid container>
+                        <Grid item xs={8} container direction="column" style={{ minWidth: "550px", display: "flex",　flexDirection: "row", alignItems: "center", padding: "20px" }}>
+                          <Grid item style={{ display: "flex", height: "45px", padding: "5px", justifyContent: "space-between" }}>
+                            <Typography style={{ lineHeight: "35px" }}>ユーザー名： </Typography>
+                            <input
+                              type="text"
+                              style={{ width: "50%" }}
+                              name={"userName"}
+                              placeholder={user.userName}
+                              disabled={userNameFlg}
+                              onInput={e => setUserName(e.target.value)} />
+                           </Grid>
+                           <FormControlLabel
+                             label={"変更しない"}
+                             labelPlacement="start"
+                             control={<Checkbox name={"userNameFlg"} checked={userNameFlg} onChange={(e) => setUserNameFlg(!userNameFlg)} style={{ width: "20px" }}/>}
+                             style={{ marginRight: "0px" }} />
+                        </Grid>
+                        <Grid item xs={8} container direction="column" style={{ minWidth: "550px", display: "flex",　flexDirection: "row", alignItems: "center", padding: "20px" }}>
+                          <Grid item style={{ display: "flex", height: "45px", padding: "5px", justifyContent: "space-between" }}>
+                            <Typography style={{ lineHeight: "35px" }}>パスワード（現在のパスワード）： </Typography>
+                            <input
+                              type="password"
+                              style={{ width: "50%" }}
+                              name={"nowPassword"}
+                              placeholder={"現在のパスワード"}
+                              disabled={passwordFlg}
+                              onInput={e => setNowPassword(e.target.value)} />
+                           </Grid>
+                           <FormControlLabel
+                             label={"変更しない"}
+                             labelPlacement="start"
+                             control={<Checkbox name={"passwordFlg"} checked={passwordFlg} onChange={(e) => setPasswordFlg(!passwordFlg)} style={{ width: "20px" }}/>}
+                             style={{ marginRight: "0px" }} />
+                        </Grid>
+                        <Grid item xs={8} container direction="column" style={{ minWidth: "550px", display: "flex",　flexDirection: "row", alignItems: "center", padding: "20px" }}>
+                          <Grid item style={{ display: "flex", height: "45px", padding: "5px", justifyContent: "space-between" }}>
+                            <Typography style={{ lineHeight: "35px" }}>新しいパスワード： </Typography>
+                            <input
+                              type="password"
+                              style={{ width: "50%" }}
+                              name={"newPassword"}
+                              placeholder={"新しいパスワード"}
+                              disabled={passwordFlg}
+                              onInput={e => setNewPassword(e.target.value)} />
+                           </Grid>
+                        </Grid>
+                        <Grid item xs={8} container direction="column" style={{ minWidth: "550px", display: "flex",　flexDirection: "row", alignItems: "center", padding: "20px" }}>
+                          <Grid item style={{ display: "flex", height: "45px", padding: "5px", justifyContent: "space-between" }}>
+                            <Typography style={{ lineHeight: "35px" }}>新しいパスワード（再）： </Typography>
+                            <input
+                              type="password"
+                              style={{ width: "50%" }}
+                              name={"newRePassword"}
+                              placeholder={"新しいパスワード（再入力）"}
+                              disabled={passwordFlg}
+                              onInput={e => setNewRePassword(e.target.value)} />
+                           </Grid>
+                        </Grid>
+                        <Grid item xs={8} container direction="column" style={{ minWidth: "550px", display: "flex",　flexDirection: "row", alignItems: "center", padding: "20px" }}>
+                          <Grid item style={{ display: "flex", height: "45px", padding: "5px", justifyContent: "space-between" }}>
+                            <Typography style={{ lineHeight: "35px" }}>権限： </Typography>
+                            <FormControlLabel
+                              label={"管理者"}
+                              labelPlacement="start"
+                              control={<input
+                                type="radio"
+                                style={{ width: "20%" }}
+                                name={"management"}
+                                value={"management"}
+                                disabled={true}
+                                checked={management === "management"}
+                                onChange={e => setManagement(e.target.value)} />}
+                              style={{ marginRight: "0px", width: "75px" }} />
+                            <FormControlLabel
+                              label={"利用者"}
+                              labelPlacement="start"
+                              control={<input
+                                type="radio"
+                                style={{ width: "20%" }}
+                                name={".management"}
+                                value={"user"}
+                                checked={management === "user"}
+                                disabled={true}
+                                onChange={e => setManagement(e.target.value)} />}
+                              style={{ marginRight: "0px", width: "75px" }} />
+                          </Grid>
+                        </Grid>
+                        <Grid item xs={8} container direction="column" style={{ minWidth: "550px", display: "flex",　flexDirection: "row", alignItems: "center", padding: "20px" }}>
+                          <Grid item style={{ display: "flex", height: "45px", padding: "5px", justifyContent: "space-between" }}>
+                            <Typography style={{ lineHeight: "35px" }}>エリア設定： </Typography>
+                            <Grid style={{ display: "flex", flexWrap: "wrap" }}>
+                              {contentList.map((content, i) => {
+                                return (
+                                  <FormControlLabel
+                                    label={content.areaName}
+                                    labelPlacement="start"
+                                    key={"areaName_" + i}
+                                    control={<Checkbox name={"coverageArea"} checked={coverageAreaList[i]} onChange={(e) => onChangeCheckBox(i)} style={{ width: "20px" }}/>}
+                                    style={{ marginRight: "0px" }} />
+                                )
+                              })}
+                            </Grid>
+                          </Grid>
+                        </Grid>
+                      </Grid>
+                    <Button variant="contained" sx={{ m: 1 }} onClick={() => onClickUpdate()}>編集</Button>
+                  </>
+                )
+                :
+                (
+                 <>
+                   <Grid container>
+                       <Grid item xs={8} container direction="column" style={{ minWidth: "550px", display: "flex",　flexDirection: "row", alignItems: "center", padding: "20px" }}>
+                         <Grid item style={{ display: "flex", height: "45px", padding: "5px" }}>
+                           <Typography style={{ lineHeight: "35px" }}>ユーザー名： {user.userName}</Typography>
+                         </Grid>
+                       </Grid>
+                       <Grid item xs={8} container direction="column" style={{ minWidth: "550px", display: "flex",　flexDirection: "row", alignItems: "center", padding: "20px" }}>
+                         <Grid item style={{ display: "flex", height: "45px", padding: "5px" }}>
+                           <Typography style={{ lineHeight: "35px" }}>パスワード： ***********</Typography>
+                         </Grid>
+                       </Grid>
+                       <Grid item xs={8} container direction="column" style={{ minWidth: "550px", display: "flex",　flexDirection: "row", alignItems: "center", padding: "20px" }}>
+                         <Grid item style={{ display: "flex", height: "45px", padding: "5px" }}>
+                           <Typography style={{ lineHeight: "35px" }}>権限： {user.management ? "管理者" : "利用者"}</Typography>
+                         </Grid>
+                       </Grid>
+                       <Grid item xs={8} container direction="column" style={{ minWidth: "550px", display: "flex",　flexDirection: "row", alignItems: "center", padding: "20px" }}>
+                         <Grid item style={{ display: "flex", height: "45px", padding: "5px" }}>
+                           <Typography style={{ lineHeight: "35px", display: "flex", flexDirection: "row"}}>エリア設定： {areaList.length > 0 ? (areaList.map((area, i) => (<Grid key={"areList_" + i} style={{ padding: "0 10px" }}>{area}</Grid>))) : (<Grid style={{ padding: "0 10px" }}>設定なし</Grid>)}</Typography>
+                         </Grid>
+                       </Grid>
+                     </Grid>
+                 </>
+                )}
+            </Grid>
+          </Paper>
+        </Box>
+
+        </>
+        )}
+        <Dialog open={showError} onClose={handleCloseError}>
+                <DialogContent>
+                  <Typography variant="h6" color="error">{error}</Typography>
+                  <Typography variant="body1">対象箇所</Typography>
+                  <Typography variant="body1">{errorPart}</Typography>
+                </DialogContent>
+              </Dialog>
+      </Box>
+    </>
+  );
+}
+
+export default AccountSettingManagementComponent;