Merge pull request #46 from hiroto7/CollectivelyCourseSet-Unregistered

履修状態の一括登録で [履修しない] を選択できるよう改良

package.json

@@ -3,53 +3,53 @@
   "version": "2.7.5",
   "private": true,
   "dependencies": {
-    "@babel/core": "7.10.5",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.4.1",
+    "@babel/core": "7.11.6",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.4.2",
     "@svgr/webpack": "5.4.0",
-    "@types/jest": "^26.0.8",
-    "@types/lodash": "^4.14.158",
-    "@types/node": "^14.0.27",
-    "@types/react": "^16.9.44",
+    "@types/jest": "^26.0.13",
+    "@types/lodash": "^4.14.161",
+    "@types/node": "^14.6.4",
+    "@types/react": "^16.9.49",
     "@types/react-dom": "^16.9.8",
     "@types/react-router-dom": "^5.1.5",
-    "@typescript-eslint/eslint-plugin": "^3.3.0",
-    "@typescript-eslint/parser": "^3.3.0",
+    "@typescript-eslint/eslint-plugin": "^4.0.1",
+    "@typescript-eslint/parser": "^4.0.1",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.0.1",
+    "babel-jest": "^26.3.0",
     "babel-loader": "8.1.0",
     "babel-plugin-named-asset-import": "1.0.0-next.101+7ab01169",
     "babel-preset-react-app": "10.0.0-next.64+7ab01169",
     "bfj": "^7.0.2",
-    "bootstrap": "^4.5.0",
+    "bootstrap": "^4.5.2",
     "camelcase": "^6.0.0",
     "case-sensitive-paths-webpack-plugin": "2.3.0",
-    "css-loader": "3.6.0",
-    "csv-parse": "^4.11.1",
+    "css-loader": "4.2.2",
+    "csv-parse": "^4.12.0",
     "dotenv": "8.2.0",
     "dotenv-expand": "5.1.0",
-    "eslint": "^7.5.0",
+    "eslint": "^7.8.1",
     "eslint-config-react-app": "6.0.0-next.64+7ab01169",
     "eslint-loader": "^4.0.2",
     "eslint-plugin-flowtype": "^5.2.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.20.3",
-    "eslint-plugin-react-hooks": "^4.0.8",
-    "file-loader": "6.0.0",
-    "fs-extra": "^9.0.0",
+    "eslint-plugin-react": "^7.20.6",
+    "eslint-plugin-react-hooks": "^4.1.0",
+    "file-loader": "6.1.0",
+    "fs-extra": "^9.0.1",
     "gh-pages": "^3.1.0",
-    "html-webpack-plugin": "4.3.0",
+    "html-webpack-plugin": "4.4.1",
     "identity-obj-proxy": "3.0.0",
-    "jest": "26.1.0",
-    "jest-circus": "26.1.0",
-    "jest-resolve": "26.1.0",
-    "jest-watch-typeahead": "0.6.0",
-    "mini-css-extract-plugin": "0.9.0",
-    "optimize-css-assets-webpack-plugin": "5.0.3",
+    "jest": "26.4.2",
+    "jest-circus": "26.4.2",
+    "jest-resolve": "26.4.0",
+    "jest-watch-typeahead": "0.6.1",
+    "mini-css-extract-plugin": "0.11.0",
+    "optimize-css-assets-webpack-plugin": "5.0.4",
     "pnp-webpack-plugin": "1.6.4",
     "postcss-flexbugs-fixes": "4.2.1",
     "postcss-loader": "3.0.0",
-    "postcss-normalize": "8.0.1",
+    "postcss-normalize": "9.0.0",
     "postcss-preset-env": "6.7.0",
     "postcss-safe-parser": "4.0.2",
     "react": "^16.13.1",
@@ -60,21 +60,21 @@
     "react-refresh": "^0.8.3",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-use": "^15.3.3",
+    "react-use": "^15.3.4",
     "resolve": "1.17.0",
     "resolve-url-loader": "3.1.1",
-    "sass-loader": "8.0.2",
+    "sass-loader": "10.0.2",
     "semver": "7.3.2",
     "style-loader": "1.2.1",
-    "terser-webpack-plugin": "3.0.7",
+    "terser-webpack-plugin": "4.1.0",
     "ts-pnp": "1.2.0",
-    "typescript": "^3.9.7",
+    "typescript": "^4.0.2",
     "url-loader": "4.1.0",
-    "webpack": "4.43.0",
+    "webpack": "4.44.1",
     "webpack-dev-server": "3.11.0",
     "webpack-manifest-plugin": "2.2.0",
     "workbox-webpack-plugin": "5.1.3",
-    "worker-loader": "^3.0.0"
+    "worker-loader": "^3.0.2"
   },
   "scripts": {
     "start": "node scripts/start.js",

src/App.tsx

@@ -178,7 +178,7 @@ const InnerMain: React.FC<{ selectedId: string }> = ({ selectedId }) => {
 }
 
 const Main: React.FC = () => {
-    const { requirementId } = useParams();
+    const { requirementId }: { requirementId: string } = useParams();
     if (requirementId === undefined) {
         return (<Redirect to="/" />);
     } else {

src/CollectivelyCourseSetView.tsx

@@ -3,7 +3,8 @@ import React, { useState } from 'react';
 import { Badge, Button, ButtonGroup, Form, Modal, OverlayTrigger, Table, Tooltip } from "react-bootstrap";
 import Course from './Course';
 import getValueFromModal, { useModals } from './getValueFromModal';
-import { RegistrationStatus } from './Plan';
+import { getNextStatus, RegistrationStatus } from './Plan';
+import RegistrationStatusLockTarget from './RegistrationStatusLockTarget';
 import safely from './safely';
 
 const placeholder = `
@@ -23,7 +24,7 @@ const CollectivelyCourseSetConfirmationModal = ({ onReturn, onExited }: {
     return (
         <Modal show={show} onHide={() => { setShow(false); onReturn(false); }} onExited={onExited}>
             <Modal.Header closeButton>
-                <Modal.Title>履修状態の一括登録</Modal.Title>
+                <Modal.Title>CSVから履修状態を一括登録</Modal.Title>
             </Modal.Header>
             <Modal.Body>
                 続けると、<strong>現在の履修 / 修得状態が失われます</strong>。
@@ -42,8 +43,8 @@ const Table1: React.FC<{
     titleColumnIndex: number | undefined,
     creditsCountColumnIndex: number | undefined,
     courseAndRecordPairs: readonly CourseAndRecordPair[],
-    courseToStatus: ReadonlyMap<Course, RegistrationStatus12>,
-    setCourseToStatus: (courseToStatus: ReadonlyMap<Course, RegistrationStatus12>) => void,
+    courseToStatus: ReadonlyMap<Course, RegistrationStatus>,
+    setCourseToStatus: (courseToStatus: ReadonlyMap<Course, RegistrationStatus>) => void,
 }> = ({ codeColumnIndex, titleColumnIndex, creditsCountColumnIndex, courseAndRecordPairs, courseToStatus, setCourseToStatus }) => {
     const {
         course: firstCourse,
@@ -125,7 +126,7 @@ const Table1: React.FC<{
 
                             if (course === undefined) {
                                 return (
-                                    <tr key={recordIndex}>
+                                    <tr key={recordIndex} className="table-secondary">
                                         <td style={{ textAlign: 'center' }}>
                                             <OverlayTrigger
                                                 overlay={
@@ -139,9 +140,8 @@ const Table1: React.FC<{
                                     </tr>
                                 )
                             } else {
-                                const status = courseToStatus.get(course);
-                                const nextStatus = status === RegistrationStatus.Acquired ? RegistrationStatus.Registered : RegistrationStatus.Acquired;
-                                const variant = status === RegistrationStatus.Acquired ? 'success' : 'primary';
+                                const status = courseToStatus.get(course) ?? RegistrationStatus.Registered;
+                                const nextStatus = getNextStatus({ currentStatus: status, lockTarget: RegistrationStatusLockTarget.None });
 
                                 return (
                                     <tr
@@ -153,11 +153,11 @@ const Table1: React.FC<{
                                             ]))
                                         }
                                         style={{ cursor: 'pointer' }}
-                                        className={`table-${variant}`}
+                                        className={status === RegistrationStatus.Unregistered ? undefined : `table-${status === RegistrationStatus.Acquired ? 'success' : 'primary'}`}
                                     >
                                         <td style={{ textAlign: 'center' }}>
-                                            <Badge variant={variant}>
-                                                {status === RegistrationStatus.Acquired ? '修得済み' : '履修する'}
+                                            <Badge variant={status === RegistrationStatus.Acquired ? 'success' : status === RegistrationStatus.Registered ? 'primary' : 'secondary'}>
+                                                {status === RegistrationStatus.Acquired ? '修得済み' : status === RegistrationStatus.Registered ? '履修する' : '履修しない'}
                                             </Badge>
                                         </td>
                                         {tds}
@@ -210,10 +210,10 @@ const Modal1: React.FC<{
     show: boolean,
     onHide: () => void,
     onBack: () => void,
-    onSubmit: (courseToStatus: ReadonlyMap<Course, RegistrationStatus12>) => void,
+    onSubmit: (courseToStatus: ReadonlyMap<Course, RegistrationStatus>) => void,
 }> = ({ codeColumnIndex, courseAndRecordPairs, show, onHide, onBack, onSubmit }) => {
     const { modals, setModalsAndCount } = useModals();
-    const [courseToStatus, setCourseToStatus] = useState<ReadonlyMap<Course, RegistrationStatus12>>(new Map());
+    const [courseToStatus, setCourseToStatus] = useState<ReadonlyMap<Course, RegistrationStatus>>(new Map());
 
     const titleColumnIndex = getColumnIndex(courseAndRecordPairs, course => course.title, recordTitle => recordTitle.trim());
     const creditsCountColumnIndex = getColumnIndex(courseAndRecordPairs, course => course.creditCount, recordCreditsCount => +recordCreditsCount)
@@ -244,12 +244,16 @@ const Modal1: React.FC<{
             {modals}
             <Modal size="xl" show={show} onHide={onHide}>
                 <Modal.Header closeButton>
-                    <Modal.Title>履修状態の一括登録</Modal.Title>
+                    <Modal.Title>CSVから履修状態を一括登録</Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
+                    <p>CSVデータから見つかった科目が以下に表示されています。</p>
                     <p>
-                        CSVデータから見つかった科目が以下に表示されています。
-                        それぞれの科目を [履修する] / [修得済み] のどちらかに設定し、 [OK] ボタンを押します。
+                        それぞれの科目を [履修する] / [修得済み] のどちらかに設定してください。
+                        CSVデータに不要な科目が含まれている場合は、 [履修しない] に設定してください。
+                    </p>
+                    <p>
+                        設定が終わったら [OK] ボタンを押します。
                         <strong>現在の履修 / 修得状態は失われます。</strong>
                     </p>
                     <ButtonGroup className="mb-3">
@@ -342,7 +346,7 @@ const Modal0: React.FC<{
     return (
         <Modal size="lg" show={show} onHide={onHide}>
             <Modal.Header closeButton>
-                <Modal.Title>履修状態の一括登録</Modal.Title>
+                <Modal.Title>CSVから履修状態を一括登録</Modal.Title>
             </Modal.Header>
             <Modal.Body>
                 <p>
@@ -410,15 +414,15 @@ const Modal0: React.FC<{
 
 const CollectivelyCourseSetView: React.FC<{
     codeToCourse: ReadonlyMap<string, Course>,
-    onSubmit: (courseToStatus: ReadonlyMap<Course, RegistrationStatus12>) => void,
+    onSubmit: (courseToStatus: ReadonlyMap<Course, RegistrationStatus>) => void,
 }> = ({ codeToCourse, onSubmit }) => {
     const [page, setPage] = useState<number | undefined>();
     const [courseAndRecordPairs, setCourseAndRecordPairs] = useState<readonly CourseAndRecordPair[] | undefined>();
     const [codeColumnIndex, setCodeColumnIndex] = useState<number | undefined>();
 
     return (
         <>
-            <Button variant="secondary" onClick={() => setPage(0)}>履修状態の一括登録</Button>
+            <Button variant="secondary" onClick={() => setPage(0)}>CSVから履修状態を一括登録</Button>
             <Modal0
                 codeToCourse={codeToCourse}
                 show={page === 0}
@@ -440,7 +444,7 @@ const CollectivelyCourseSetView: React.FC<{
                         onHide={() => setPage(undefined)}
                         onBack={() => setPage(0)}
                         onSubmit={
-                            (courseToStatus: ReadonlyMap<Course, RegistrationStatus12>) => {
+                            (courseToStatus: ReadonlyMap<Course, RegistrationStatus>) => {
                                 onSubmit(courseToStatus);
                                 setPage(undefined);
                             }

src/Plan.ts

@@ -1,4 +1,5 @@
 import Course from "./Course";
+import RegistrationStatusLockTarget from "./RegistrationStatusLockTarget";
 import { RequirementWithCourses } from "./Requirements";
 
 export interface RegisteredCreditCounts {
@@ -22,6 +23,29 @@ export enum RegistrationStatus {
     Acquired = 2,
 }
 
+export const getNextStatus = ({ currentStatus, lockTarget }: {
+    currentStatus: RegistrationStatus,
+    lockTarget: RegistrationStatusLockTarget,
+}): RegistrationStatus => {
+    switch (lockTarget) {
+        case RegistrationStatusLockTarget.All:
+            return currentStatus;
+        case RegistrationStatusLockTarget.Acquired:
+        case RegistrationStatusLockTarget.Unregistered:
+            const difference = (3 + lockTarget - currentStatus) % 3;
+            switch (difference) {
+                case 0:
+                    return currentStatus;
+                case 1:
+                    return (currentStatus + 2) % 3;
+                default:
+                    return (currentStatus + 1) % 3;
+            }
+        default:
+            return (currentStatus + 1) % 3;
+    }
+}
+
 export interface PlanJSON {
     readonly courseToStatus: { [courseCode: string]: RegistrationStatus };
     readonly courseToRequirement: { [courseCode: string]: RequirementId };

src/RequirementView/CourseList.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import { Badge, ListGroup, OverlayTrigger, Tooltip } from "react-bootstrap";
 import Course from "../Course";
-import Plan, { RegistrationStatus } from '../Plan';
+import Plan, { getNextStatus, RegistrationStatus } from '../Plan';
 import RegistrationStatusLockTarget from '../RegistrationStatusLockTarget';
 import Requirements, { RequirementWithCourses } from "../Requirements";
-import getNextStatus from './getNextStatus';
 
 const isRegistrable = ({ course, courseToStatus }: {
     course: Course,

src/RequirementView/index.tsx

@@ -2,11 +2,10 @@ import React from 'react';
 import Course from '../Course';
 import FilterType from '../FilterType';
 import getValueFromModal, { useModals } from '../getValueFromModal';
-import Plan, { RegisteredCreditCounts, RegistrationStatus } from '../Plan';
+import Plan, { getNextStatus, RegisteredCreditCounts, RegistrationStatus } from '../Plan';
 import RegistrationStatusLockTarget from '../RegistrationStatusLockTarget';
 import Requirements, { RequirementWithCourses } from '../Requirements';
 import CourseMovementConfirmationModal from './CourseMovementConfirmationModal';
-import getNextStatus from './getNextStatus';
 import InnerRequirementView from './InnerRequirementView';
 
 const RequirementView = ({ requirement, plan, filterType, lockTarget, onChange }: {