chore: enable controlling showing person sex and death date

rafgugi · Aug 1, 2023 · 05ffd91 · 05ffd91
1 parent bc4095f
commit 05ffd91
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 9 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -22,6 +22,8 @@ function App(props: AppProps) {
 
   const [split, setSplitValue] = useCache('split', !!props.split);
   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);
@@ -80,6 +82,8 @@ function App(props: AppProps) {
         split,
         editMode,
         showPersonCode,
+        showSex,
+        showDeathdate,
         treeMap,
         setTreesValue,
         upsertPerson,
@@ -110,6 +114,30 @@ function App(props: AppProps) {
               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>
             <Input
               type="switch"

diff --git a/src/components/AppContext.tsx b/src/components/AppContext.tsx
@@ -5,6 +5,8 @@ interface AppContextValue {
   split: boolean;
   editMode: boolean;
   showPersonCode: boolean;
+  showSex: boolean;
+  showDeathdate: boolean;
   setTreesValue: (ps: Person[]) => void;
   upsertPerson: (p: Person) => void;
   deletePerson: (p: Person) => void;
@@ -15,6 +17,8 @@ const AppContext = createContext<AppContextValue>({
   split: false,
   editMode: false,
   showPersonCode: false,
+  showSex: false,
+  showDeathdate: false,
   setTreesValue: () => {},
   upsertPerson: () => {},
   deletePerson: () => {},

diff --git a/src/components/FamilyGrid.tsx b/src/components/FamilyGrid.tsx
@@ -9,17 +9,21 @@ interface FamilyGridProps {
 }
 
 export default function FamilyGrid({ trees }: FamilyGridProps) {
-  const { editMode, showPersonCode } = useContext(AppContext);
+  const { editMode, showPersonCode, showSex, showDeathdate } =
+    useContext(AppContext);
 
   return (
     <Table size="sm" bordered hover responsive>
       <thead>
         <tr>
-          {showPersonCode && (<th style={{ width: '7em' }}>Code</th>)}
+          {showPersonCode && <th style={{ width: '7em' }}>Code</th>}
           <th style={{ width: '15.5em' }}>Name</th>
-          {editMode && <th style={{ width: '5em' }}>Sex</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>
@@ -57,7 +61,8 @@ function FamilyRows({ person, ...props }: PersonRowProps) {
 }
 
 function PersonRow({ person }: PersonRowProps) {
-  const { editMode, showPersonCode, 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) {
@@ -77,7 +82,11 @@ function PersonRow({ person }: PersonRowProps) {
 
   return (
     <tr>
-      {showPersonCode && (<td><span>{person.code}</span></td>)}
+      {showPersonCode && (
+        <td>
+          <span>{person.code}</span>
+        </td>
+      )}
       <td>
         <Input
           bsSize="sm"
@@ -91,7 +100,7 @@ function PersonRow({ person }: PersonRowProps) {
           {person.name && <small className="fw-light"> ({person.id})</small>}
         </span>
       </td>
-      {editMode && (
+      {(editMode || showSex) && (
         <td>
           <Input
             type="select"
@@ -104,7 +113,9 @@ function PersonRow({ person }: PersonRowProps) {
             <option value="M">{sexMap.M}</option>
             <option value="F">{sexMap.F}</option>
           </Input>
-          <span className={spanClass}>{person.sex ? sexMap[person.sex] || '' : ''}</span>
+          <span className={spanClass}>
+            {person.sex ? sexMap[person.sex] || '' : ''}
+          </span>
         </td>
       )}
       <td>
@@ -125,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"