Show header information of the gedcom file on the side panel (#252)

* Show header information of the gedcom file on the side panel #251

* Format creation date in HEAD section

src/index.css

@@ -178,6 +178,10 @@ div.zoom {
   text-transform: uppercase;
 }
 
+.ui.sub.header, .ui.list {
+  margin-left: 20px;
+}
+
 .limit-height {
   height: 300px;
   overflow-y: scroll;

src/sidepanel/config/config.tsx

@@ -1,3 +1,5 @@
+import {SourceHead} from '../head/head';
+import {GedcomData} from '../../util/gedcom_util';
 import {ParsedQuery} from 'query-string';
 import {FormattedMessage} from 'react-intl';
 import {Checkbox, Form, Header, Item} from 'semantic-ui-react';
@@ -74,11 +76,13 @@ export function configToArgs(config: Config): ParsedQuery<any> {
 }
 
 export function ConfigPanel(props: {
+  gedcom: GedcomData;
   config: Config;
   onChange: (config: Config) => void;
 }) {
   return (
-    <Form className="details">
+    <>
+    {SourceHead(props.gedcom)}<Form className="details">
       <Item.Group>
         <Item>
           <Item.Content>
@@ -230,5 +234,6 @@ export function ConfigPanel(props: {
         </Item>
       </Item.Group>
     </Form>
+    </>
   );
 }

src/sidepanel/head/head.tsx

@@ -0,0 +1,108 @@
+import {
+  dereference,
+  GedcomData,
+} from '../../util/gedcom_util';
+import {FormattedMessage, useIntl} from 'react-intl';
+import {Header, Divider, List} from 'semantic-ui-react';
+import {getDate} from 'topola';
+import {formatDateOrRange} from '../../util/date_util';
+
+export function SourceHead(gedcom: GedcomData){
+  const head = gedcom.head;
+  /* Don't show the section if there is no relevant information */
+  if (!head || !head.tree) {
+    return null;
+  } 
+
+  const sour = head.tree.find((entry) => entry.tag === 'SOUR');
+  const sour_name = sour && sour.tree && sour.tree.find((entry) => entry.tag === 'NAME')?.data; // Software name
+
+  const date = head.tree.find((entry) => entry.tag === 'DATE'); // Creation date
+  const intl = useIntl();
+  const dateFormatted = date ? formatDateOrRange(getDate(date.data), intl) : null; // Formatted creation date
+
+  const file = head.tree.find((entry) => entry.tag === 'FILE')?.data; // File path
+  const filename = file && ( file.split('\\').pop() || file.split('/').pop() ); // Extract file name from path
+  const copr = head.tree.find((entry) => entry.tag === 'COPR')?.data; // Copyright
+
+  // Reference to submitter
+  const submReference = head.tree.find((entry) => entry.tag === 'SUBM');
+  const subm = submReference && dereference(submReference, gedcom, (gedcom) => gedcom.other);
+
+  const name = subm && subm.tree && subm.tree.find((entry) => entry.tag === 'NAME')?.data; // Submitter name
+  const phon = subm && subm.tree && subm.tree.find((entry) => entry.tag === 'PHON')?.data; // Phone number
+  const email = subm && subm.tree && subm.tree.find((entry) => entry.tag === 'EMAIL')?.data; // Email
+
+  const addr = subm && subm.tree && subm.tree.find((entry) => entry.tag === 'ADDR'); // Address
+  const adr1 = addr && addr.tree && addr.tree.find((entry) => entry.tag === 'ADR1')?.data; // Street address
+  const city = addr && addr.tree && addr.tree.find((entry) => entry.tag === 'CITY')?.data; // City
+  const post = addr && addr.tree && addr.tree.find((entry) => entry.tag === 'POST')?.data; // Postal code
+  const location = [adr1, post, city].filter(Boolean).join(', '); // Combined location
+
+  /* Don't show the section if there is no relevant information */
+  if (!(sour_name || dateFormatted || filename || copr || name || phon || email || location)) {
+    return null;
+  }
+
+  // Icons: https://react.semantic-ui.com/elements/icon/
+    return (
+      <>
+      <Header sub>
+        <FormattedMessage id="head.source" defaultMessage="Data source" />
+      </Header>
+      <List>
+        {sour_name && (          
+          <List.Item>
+            <List.Icon name='edit' />
+            <List.Content>{sour_name}</List.Content>
+          </List.Item>
+        )}
+        
+        {date && (
+          <List.Item>
+            <List.Icon name='calendar' />
+            <List.Content>{dateFormatted}</List.Content>
+          </List.Item>
+        )}
+        {file && (
+          <List.Item>
+            <List.Icon name='file' />
+            <List.Content>{filename}</List.Content>
+          </List.Item>
+        )}
+        {name && (
+          <List.Item>
+            <List.Icon name='user' />
+            <List.Content>{name}</List.Content>
+          </List.Item>
+        )}
+        {adr1 && (
+          <List.Item>
+            <List.Icon name='marker' />
+            <List.Content>{location}</List.Content>
+          </List.Item>
+        )}
+         {phon && (
+          <List.Item>
+            <List.Icon name='phone' />
+            <List.Content>{phon}</List.Content>
+          </List.Item>
+        )}
+        {email && (
+          <List.Item>
+            <List.Icon name='mail' />
+            <List.Content>{email}</List.Content>
+          </List.Item>
+        )}
+        {copr && (
+          <List.Item>
+            <List.Icon name='copyright' />
+            <List.Content>{copr}</List.Content>
+          </List.Item>
+        )}
+      </List>
+
+      <Divider />
+      </>
+    );
+}

src/sidepanel/side-panel.tsx

@@ -37,7 +37,7 @@ export function SidePanel({
         id: 'tab.settings',
         defaultMessage: 'Settings',
       }),
-      render: () => <ConfigPanel config={config} onChange={onConfigChange} />,
+      render: () => <ConfigPanel gedcom={data.gedcom} config={config} onChange={onConfigChange} />,
     },
   ];
 

src/translations/bg.json

@@ -129,6 +129,7 @@
   "config.sex": "Пол",
   "config.sex.HIDE": "Скриване",
   "config.sex.SHOW": "Показване",
+  "head.source": "Източник на данни",
   "name.unknown_name": "Неизвестно име",
   "extras.images": "Изображение",
   "extras.notes": "Бележки",

src/translations/cs.json

@@ -129,6 +129,7 @@
   "config.sex": "Pohlaví",
   "config.sex.HIDE": "skrýt",
   "config.sex.SHOW": "zobrazit",
+  "head.source": "Zdroj dat",
   "name.unknown_name": "N.N.",
   "extras.images": "Obrázky",
   "extras.notes": "Poznámky",

src/translations/de.json

@@ -129,6 +129,7 @@
   "config.sex": "Geschlecht",
   "config.sex.HIDE": "verbergen",
   "config.sex.SHOW": "anzeigen",
+  "head.source": "Datenquelle",
   "name.unknown_name": "N.N.",
   "extras.images": "Bilder",
   "extras.notes": "Notizen",

src/translations/fr.json

@@ -129,6 +129,7 @@
   "config.sex": "Sexe",
   "config.sex.HIDE": "cacher",
   "config.sex.SHOW": "afficher",
+  "head.source": "Source de données",
   "name.unknown_name": "?",
   "extras.images": "Images",
   "extras.notes": "Notes",

src/translations/it.json

@@ -129,6 +129,7 @@
   "config.sex": "Sesso",
   "config.sex.HIDE": "nascondere",
   "config.sex.SHOW": "visualizzare",
+  "head.source": "Origine dati",
   "name.unknown_name": "N.N.",
   "extras.images": "Immagini",
   "extras.notes": "Appunti",

src/translations/pl.json

@@ -128,7 +128,8 @@
   "config.ids.SHOW": "pokaż",
   "config.sex": "Płeć",
   "config.sex.HIDE": "ukryj",
-  "config.sex.SHOW": "pokaż",      
+  "config.sex.SHOW": "pokaż",    
+  "head.source": "Źródło danych",  
   "name.unknown_name": "N.N.",
   "extras.images": "Zdjęcia",
   "extras.notes": "Notatki",

src/translations/ru.json

@@ -129,6 +129,7 @@
   "config.sex": "Пол",
   "config.sex.HIDE": "Скрыть",
   "config.sex.SHOW": "Показать",
+  "head.source": "Источник данных",  
   "name.unknown_name": "Неизвестно",
   "extras.images": "Картинки",
   "extras.notes": "Примечание",