Merge pull request #329 from Syuparn/issue-327

フロントエンドに傷病手当金を追加
project-inclusive · Sep 18, 2024 · c9083dd · c9083dd
2 parents 2331b05 + 6b712b0
commit c9083dd
Show file tree

Hide file tree

Showing 16 changed files with 597 additions and 22 deletions.
diff --git a/dashboard/src/components/forms/attributes/IndustrialAccidentDisease.tsx b/dashboard/src/components/forms/attributes/IndustrialAccidentDisease.tsx
@@ -0,0 +1,58 @@
+import { useState, useCallback, useEffect } from 'react';
+import { useNavigationType } from 'react-router-dom';
+import { Checkbox } from '@chakra-ui/react';
+
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { currentDateAtom, householdAtom } from '../../../state';
+
+export const IndustrialAccidentDisease = ({
+  personName,
+}: {
+  personName: string;
+}) => {
+  const navigationType = useNavigationType();
+  const currentDate = useRecoilValue(currentDateAtom);
+
+  const [household, setHousehold] = useRecoilState(householdAtom);
+  const [isChecked, setIsChecked] = useState(false);
+
+  // チェックボックスの値が変更された時
+  const onChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const newHousehold = { ...household };
+    if (event.target.checked) {
+      newHousehold.世帯員[personName].業務によって病気になった = {
+        [currentDate]: true,
+      };
+    } else {
+      newHousehold.世帯員[personName].業務によって病気になった = {
+        [currentDate]: false,
+      };
+    }
+
+    setHousehold({ ...newHousehold });
+    setIsChecked(event.target.checked);
+  }, []);
+
+  // stored states set checkbox when page transition
+  useEffect(() => {
+    const IndustrialAccidentDiseaseObj =
+      household.世帯員[personName].業務によって病気になった;
+    setIsChecked(
+      IndustrialAccidentDiseaseObj && IndustrialAccidentDiseaseObj[currentDate]
+    );
+  }, [navigationType]);
+
+  return (
+    <>
+      <Checkbox
+        isChecked={isChecked}
+        onChange={onChange}
+        colorScheme="cyan"
+        mb={2}
+      >
+        業務によって病気になった
+      </Checkbox>
+      <br />
+    </>
+  );
+};
diff --git a/dashboard/src/components/forms/attributes/IndustrialAccidentInjury.tsx b/dashboard/src/components/forms/attributes/IndustrialAccidentInjury.tsx
@@ -0,0 +1,58 @@
+import { useState, useCallback, useEffect } from 'react';
+import { useNavigationType } from 'react-router-dom';
+import { Checkbox } from '@chakra-ui/react';
+
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { currentDateAtom, householdAtom } from '../../../state';
+
+export const IndustrialAccidentInjury = ({
+  personName,
+}: {
+  personName: string;
+}) => {
+  const navigationType = useNavigationType();
+  const currentDate = useRecoilValue(currentDateAtom);
+
+  const [household, setHousehold] = useRecoilState(householdAtom);
+  const [isChecked, setIsChecked] = useState(false);
+
+  // チェックボックスの値が変更された時
+  const onChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const newHousehold = { ...household };
+    if (event.target.checked) {
+      newHousehold.世帯員[personName].業務によってけがをした = {
+        [currentDate]: true,
+      };
+    } else {
+      newHousehold.世帯員[personName].業務によってけがをした = {
+        [currentDate]: false,
+      };
+    }
+
+    setHousehold({ ...newHousehold });
+    setIsChecked(event.target.checked);
+  }, []);
+
+  // stored states set checkbox when page transition
+  useEffect(() => {
+    const IndustrialAccidentInjuryObj =
+      household.世帯員[personName].業務によってけがをした;
+    setIsChecked(
+      IndustrialAccidentInjuryObj && IndustrialAccidentInjuryObj[currentDate]
+    );
+  }, [navigationType]);
+
+  return (
+    <>
+      <Checkbox
+        isChecked={isChecked}
+        onChange={onChange}
+        colorScheme="cyan"
+        mb={2}
+      >
+        業務によってけがをした
+      </Checkbox>
+      <br />
+    </>
+  );
+};
diff --git a/dashboard/src/components/forms/attributes/Injury.tsx b/dashboard/src/components/forms/attributes/Injury.tsx
@@ -0,0 +1,64 @@
+import { useCallback, useState, useEffect } from 'react';
+import { useNavigationType } from 'react-router-dom';
+import { Checkbox, Box } from '@chakra-ui/react';
+
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { currentDateAtom, householdAtom } from '../../../state';
+import { LeaveOfAbsenseByInjury } from './LeaveOfAbsenseByInjury';
+import { IndustrialAccidentInjury } from './IndustrialAccidentInjury';
+
+export const Injury = ({ personName }: { personName: string }) => {
+  const navigationType = useNavigationType();
+  const currentDate = useRecoilValue(currentDateAtom);
+
+  const [isChecked, setIsChecked] = useState(false);
+
+  const [household, setHousehold] = useRecoilState(householdAtom);
+
+  // チェックボックスの値が変更された時
+  const onChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    if (!event.target.checked) {
+      const newHousehold = { ...household };
+      newHousehold.世帯員[personName].けがによって連続三日以上休業している = {
+        [currentDate]: false,
+      };
+      newHousehold.世帯員[personName].業務によってけがをした = {
+        [currentDate]: false,
+      };
+      setHousehold({ ...newHousehold });
+    }
+
+    setIsChecked(event.target.checked);
+  }, []);
+
+  // stored states set value when page transition
+  useEffect(() => {
+    const personObj = household.世帯員[personName];
+    if (
+      (personObj.けがによって連続三日以上休業している &&
+        personObj.けがによって連続三日以上休業している[currentDate] !==
+          false) ||
+      (personObj.業務によってけがをした &&
+        personObj.業務によってけがをした[currentDate] !== false)
+    ) {
+      setIsChecked(true);
+    }
+  }, [navigationType]);
+
+  return (
+    <Box mb={4}>
+      <Checkbox colorScheme="cyan" isChecked={isChecked} onChange={onChange}>
+        けがをしている
+      </Checkbox>
+
+      {isChecked && (
+        <Box mt={2} ml={4} mr={4} mb={4}>
+          <>
+            <LeaveOfAbsenseByInjury personName={personName} />
+            <IndustrialAccidentInjury personName={personName} />
+          </>
+        </Box>
+      )}
+    </Box>
+  );
+};
diff --git a/dashboard/src/components/forms/attributes/LeaveOfAbsense.tsx b/dashboard/src/components/forms/attributes/LeaveOfAbsense.tsx
@@ -0,0 +1,53 @@
+import { useState, useCallback, useEffect } from 'react';
+import { useNavigationType } from 'react-router-dom';
+import { Box, Checkbox } from '@chakra-ui/react';
+
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { currentDateAtom, householdAtom } from '../../../state';
+import { LeaveOfAbsenseWithoutSalary } from './LeaveOfAbsenseWithoutSalary';
+
+export const LeaveOfAbsense = ({ personName }: { personName: string }) => {
+  const navigationType = useNavigationType();
+  const currentDate = useRecoilValue(currentDateAtom);
+  const [isChecked, setIsChecked] = useState(false);
+
+  const [household, setHousehold] = useRecoilState(householdAtom);
+
+  // チェックボックスの値が変更された時
+  const onChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    if (!event.target.checked) {
+      const newHousehold = { ...household };
+      newHousehold.世帯員[personName].休業中に給与の支払いがない = {
+        [currentDate]: false,
+      };
+      setHousehold({ ...newHousehold });
+    }
+
+    setIsChecked(event.target.checked);
+  }, []);
+
+  // stored states set value when page transition
+  useEffect(() => {
+    const personObj = household.世帯員[personName];
+    if (
+      personObj.休業中に給与の支払いがない &&
+      personObj.休業中に給与の支払いがない[currentDate] !== false
+    ) {
+      setIsChecked(true);
+    }
+  }, [navigationType]);
+
+  return (
+    <Box mb={4}>
+      <Checkbox colorScheme="cyan" isChecked={isChecked} onChange={onChange}>
+        休業中である
+      </Checkbox>
+
+      {isChecked && (
+        <Box mt={2} ml={4} mr={4} mb={4}>
+          <LeaveOfAbsenseWithoutSalary personName={personName} />
+        </Box>
+      )}
+    </Box>
+  );
+};
diff --git a/dashboard/src/components/forms/attributes/LeaveOfAbsenseByDisease.tsx b/dashboard/src/components/forms/attributes/LeaveOfAbsenseByDisease.tsx
@@ -0,0 +1,58 @@
+import { useState, useCallback, useEffect } from 'react';
+import { useNavigationType } from 'react-router-dom';
+import { Checkbox } from '@chakra-ui/react';
+
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { currentDateAtom, householdAtom } from '../../../state';
+
+export const LeaveOfAbsenseByDisease = ({
+  personName,
+}: {
+  personName: string;
+}) => {
+  const navigationType = useNavigationType();
+  const currentDate = useRecoilValue(currentDateAtom);
+
+  const [household, setHousehold] = useRecoilState(householdAtom);
+  const [isChecked, setIsChecked] = useState(false);
+
+  // チェックボックスの値が変更された時
+  const onChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const newHousehold = { ...household };
+    if (event.target.checked) {
+      newHousehold.世帯員[personName].病気によって連続三日以上休業している = {
+        [currentDate]: true,
+      };
+    } else {
+      newHousehold.世帯員[personName].病気によって連続三日以上休業している = {
+        [currentDate]: false,
+      };
+    }
+
+    setHousehold({ ...newHousehold });
+    setIsChecked(event.target.checked);
+  }, []);
+
+  // stored states set checkbox when page transition
+  useEffect(() => {
+    const LeaveOfAbsenseByDiseaseObj =
+      household.世帯員[personName].病気によって連続三日以上休業している;
+    setIsChecked(
+      LeaveOfAbsenseByDiseaseObj && LeaveOfAbsenseByDiseaseObj[currentDate]
+    );
+  }, [navigationType]);
+
+  return (
+    <>
+      <Checkbox
+        isChecked={isChecked}
+        onChange={onChange}
+        colorScheme="cyan"
+        mb={2}
+      >
+        病気によって連続三日以上休業している
+      </Checkbox>
+      <br />
+    </>
+  );
+};
diff --git a/dashboard/src/components/forms/attributes/LeaveOfAbsenseByInjury.tsx b/dashboard/src/components/forms/attributes/LeaveOfAbsenseByInjury.tsx
@@ -0,0 +1,58 @@
+import { useState, useCallback, useEffect } from 'react';
+import { useNavigationType } from 'react-router-dom';
+import { Checkbox } from '@chakra-ui/react';
+
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { currentDateAtom, householdAtom } from '../../../state';
+
+export const LeaveOfAbsenseByInjury = ({
+  personName,
+}: {
+  personName: string;
+}) => {
+  const navigationType = useNavigationType();
+  const currentDate = useRecoilValue(currentDateAtom);
+
+  const [household, setHousehold] = useRecoilState(householdAtom);
+  const [isChecked, setIsChecked] = useState(false);
+
+  // チェックボックスの値が変更された時
+  const onChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const newHousehold = { ...household };
+    if (event.target.checked) {
+      newHousehold.世帯員[personName].けがによって連続三日以上休業している = {
+        [currentDate]: true,
+      };
+    } else {
+      newHousehold.世帯員[personName].けがによって連続三日以上休業している = {
+        [currentDate]: false,
+      };
+    }
+
+    setHousehold({ ...newHousehold });
+    setIsChecked(event.target.checked);
+  }, []);
+
+  // stored states set checkbox when page transition
+  useEffect(() => {
+    const LeaveOfAbsenseByInjuryObj =
+      household.世帯員[personName].けがによって連続三日以上休業している;
+    setIsChecked(
+      LeaveOfAbsenseByInjuryObj && LeaveOfAbsenseByInjuryObj[currentDate]
+    );
+  }, [navigationType]);
+
+  return (
+    <>
+      <Checkbox
+        isChecked={isChecked}
+        onChange={onChange}
+        colorScheme="cyan"
+        mb={2}
+      >
+        けがによって連続三日以上休業している
+      </Checkbox>
+      <br />
+    </>
+  );
+};