Merge pull request #16 from rafgugi/edit-sex

chore: enable edit all person attributes in edit mode * chore: enable edit person sex * refactor: rename hideCode to showCode * chore: enable controlling showing person sex and death date
rafgugi · Aug 5, 2023 · 99c340b · 99c340b
2 parents 016e75b + 05ffd91
commit 99c340b
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 21 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -21,7 +21,9 @@ function App(props: AppProps) {
   const [trees, setTreesValue] = useCache('trees', props.trees);
 
   const [split, setSplitValue] = useCache('split', !!props.split);
-  const [hidePersonCode, setHideCode] = useCache('hideCode', false);
+  const [showPersonCode, setShowCode] = useCache('showPersonCode', true);
+  const [showSex, setShowSex] = useCache('showSex', false);
+  const [showDeathdate, setShowDeathdate] = useCache('showDeathdate', false);
   const [editMode, setEditModeValue] = useState(false);
 
   const [modalPerson, setModalPerson] = useState(null as Person | null);
@@ -79,7 +81,9 @@ function App(props: AppProps) {
       value={{
         split,
         editMode,
-        hidePersonCode,
+        showPersonCode,
+        showSex,
+        showDeathdate,
         treeMap,
         setTreesValue,
         upsertPerson,
@@ -96,18 +100,42 @@ function App(props: AppProps) {
               onChange={() => setSplitValue(!split)}
             />
             <Label for="split-switch" check>
-              Split Family
+              Split family
             </Label>
           </FormGroup>
           <FormGroup switch>
             <Input
               type="switch"
-              checked={hidePersonCode}
-              id="hidePersonCode-switch"
-              onChange={() => setHideCode(!hidePersonCode)}
+              checked={showPersonCode}
+              id="showPersonCode-switch"
+              onChange={() => setShowCode(!showPersonCode)}
             />
-            <Label for="hidePersonCode-switch" check>
-              Hide Code
+            <Label for="showPersonCode-switch" check>
+              Show person code
+            </Label>
+          </FormGroup>
+          <FormGroup switch>
+            <Input
+              type="switch"
+              checked={editMode || showSex}
+              id="showSex-switch"
+              disabled={editMode}
+              onChange={() => setShowSex(!showSex)}
+            />
+            <Label for="showSex-switch" check>
+              Show person sex
+            </Label>
+          </FormGroup>
+          <FormGroup switch>
+            <Input
+              type="switch"
+              checked={editMode || showDeathdate}
+              id="showDeathdate-switch"
+              disabled={editMode}
+              onChange={() => setShowDeathdate(!showDeathdate)}
+            />
+            <Label for="showDeathdate-switch" check>
+              Show person death date
             </Label>
           </FormGroup>
           <FormGroup switch>
@@ -118,7 +146,7 @@ function App(props: AppProps) {
               onChange={() => setEditModeValue(!editMode)}
             />
             <Label for="editMode-switch" check>
-              Edit Mode
+              Edit mode
             </Label>
           </FormGroup>
           <FormGroup>

diff --git a/src/components/AppContext.tsx b/src/components/AppContext.tsx
@@ -4,7 +4,9 @@ import { Person } from '../family.interface';
 interface AppContextValue {
   split: boolean;
   editMode: boolean;
-  hidePersonCode: boolean;
+  showPersonCode: boolean;
+  showSex: boolean;
+  showDeathdate: boolean;
   setTreesValue: (ps: Person[]) => void;
   upsertPerson: (p: Person) => void;
   deletePerson: (p: Person) => void;
@@ -14,7 +16,9 @@ interface AppContextValue {
 const AppContext = createContext<AppContextValue>({
   split: false,
   editMode: false,
-  hidePersonCode: false,
+  showPersonCode: false,
+  showSex: false,
+  showDeathdate: false,
   setTreesValue: () => {},
   upsertPerson: () => {},
   deletePerson: () => {},

diff --git a/src/components/FamilyGrid.tsx b/src/components/FamilyGrid.tsx
@@ -9,18 +9,21 @@ interface FamilyGridProps {
 }
 
 export default function FamilyGrid({ trees }: FamilyGridProps) {
-  const { hidePersonCode } = useContext(AppContext);
+  const { editMode, showPersonCode, showSex, showDeathdate } =
+    useContext(AppContext);
 
   return (
     <Table size="sm" bordered hover responsive>
       <thead>
         <tr>
-          <th style={{ width: '7em' }} hidden={hidePersonCode}>
-            Code
-          </th>
+          {showPersonCode && <th style={{ width: '7em' }}>Code</th>}
           <th style={{ width: '15.5em' }}>Name</th>
-          <th style={{ width: '7em' }}>Birthplace</th>
-          <th style={{ width: '7em' }}>Birthdate</th>
+          {(editMode || showSex) && <th style={{ width: '5em' }}>Sex</th>}
+          <th style={{ width: '7em' }}>Birth place</th>
+          <th style={{ width: '7em' }}>Birth date</th>
+          {(editMode || showDeathdate) && (
+            <th style={{ width: '7em' }}>Death date</th>
+          )}
           <th style={{ width: '8.5em' }}>Phone</th>
           <th style={{ width: '18.5em' }}>Address</th>
           <th style={{ width: '8.5em' }}>IG</th>
@@ -58,7 +61,8 @@ function FamilyRows({ person, ...props }: PersonRowProps) {
 }
 
 function PersonRow({ person }: PersonRowProps) {
-  const { editMode, hidePersonCode, upsertPerson } = useContext(AppContext);
+  const { editMode, showPersonCode, showSex, showDeathdate, upsertPerson } =
+    useContext(AppContext);
   const name = person.name || person.id;
 
   const updatePerson = function (e: ChangeEvent<any>, key: string) {
@@ -71,12 +75,18 @@ function PersonRow({ person }: PersonRowProps) {
     inputClass = 'd-print-none';
     spanClass = 'd-none d-print-block';
   }
+  const sexMap: Record<string, string> = {
+    F: 'Female',
+    M: 'Male',
+  };
 
   return (
     <tr>
-      <td hidden={hidePersonCode}>
-        <span>{person.code}</span>
-      </td>
+      {showPersonCode && (
+        <td>
+          <span>{person.code}</span>
+        </td>
+      )}
       <td>
         <Input
           bsSize="sm"
@@ -90,6 +100,24 @@ function PersonRow({ person }: PersonRowProps) {
           {person.name && <small className="fw-light"> ({person.id})</small>}
         </span>
       </td>
+      {(editMode || showSex) && (
+        <td>
+          <Input
+            type="select"
+            bsSize="sm"
+            className={inputClass}
+            value={person.sex || ''}
+            onChange={e => updatePerson(e, 'sex')}
+          >
+            <option value=""></option>
+            <option value="M">{sexMap.M}</option>
+            <option value="F">{sexMap.F}</option>
+          </Input>
+          <span className={spanClass}>
+            {person.sex ? sexMap[person.sex] || '' : ''}
+          </span>
+        </td>
+      )}
       <td>
         <Input
           bsSize="sm"
@@ -108,6 +136,17 @@ function PersonRow({ person }: PersonRowProps) {
         />
         <span className={spanClass}>{person.birthdate}</span>
       </td>
+      {(editMode || showDeathdate) && (
+        <td>
+          <Input
+            bsSize="sm"
+            className={inputClass}
+            value={person.deathdate || ''}
+            onChange={e => updatePerson(e, 'deathdate')}
+          />
+          <span className={spanClass}>{person.deathdate}</span>
+        </td>
+      )}
       <td>
         <Input
           bsSize="sm"