Merge pull request #22 from scout-ch/feature/calendar-title-prefix

add ability to set a prefix for calendar entry titles
scout-ch · Sep 30, 2023 · 468212f · 468212f
2 parents 06d055f + dc781ed
commit 468212f
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 38 deletions.
diff --git a/src/components/CalendarForm.tsx b/src/components/CalendarForm.tsx
@@ -30,6 +30,7 @@ type MyState = {
   startDate: string
   responsible: string
   puffer: number
+  calendarTitlePrefix: string
   taskList: Array<ApiTask>,
   tasks: Array<TaskT>
 }
@@ -41,6 +42,7 @@ class CalendarForm extends React.Component<Props, MyState> {
       startDate: new Date().toISOString().slice(0, 10),
       responsible: 'all',
       puffer: 0,
+      calendarTitlePrefix: '',
       taskList: [],
       tasks: []
     };
@@ -80,6 +82,10 @@ class CalendarForm extends React.Component<Props, MyState> {
     this.setState({ puffer: parseInt(e.currentTarget.value) });
   };
 
+  onChangeTitlePrefix= (e: React.FormEvent<HTMLInputElement>): void => {
+    this.setState({ calendarTitlePrefix: e.currentTarget.value });
+  };
+
   taskSort = (a: TaskT, b: TaskT) => {
     let aDate = a.deadline
     let bDate = b.deadline
@@ -133,12 +139,6 @@ class CalendarForm extends React.Component<Props, MyState> {
                 </label>
                 <input type="date" name="startDate" value={this.state.startDate} onChange={this.onChangeStartDate} />
               </li>
-              <li>
-                <label>
-                  {t('calendarPage.puffer')}
-                </label>
-                <input type="number" id="puffer" name="puffer" value={this.state.puffer} onChange={this.onChangePuffer} />
-              </li>
               <li>
                 <label>
                   {t('calendarPage.responsible')}
@@ -150,13 +150,31 @@ class CalendarForm extends React.Component<Props, MyState> {
                   <option value="C">{t('calendarPage.responsibleOptions.c')}</option>
                 </select>
               </li>
+              <hr/>
+              <li>
+                <label>
+                  {t('calendarPage.puffer')}
+                </label>
+                <input type="number" id="puffer" name="puffer" value={this.state.puffer} onChange={this.onChangePuffer} />
+              </li>
+              <li>
+                <label>
+                  {t('calendarPage.prefixPlaceholder')}
+                </label>
+                <div>
+                  <input type='text' name='calendar-prefix' value={this.state.calendarTitlePrefix} onChange={this.onChangeTitlePrefix} />
+                  <div className='calendar-title-prefix-hint'>
+                    {t('calendarPage.prefixPreview', { calendarTitlePrefix: this.state.calendarTitlePrefix })}
+                  </div>
+                </div>
+              </li>
               <li>
-                <button type="submit"> {t('calendarPage.generate')}</button>
+                <button type="submit"> {t('calendarPage.ics.generate')}</button>
               </li>
             </ul>
           </form>
         </div>
-        <CalendarTable tasks={this.state.tasks.sort(this.taskSort)} />
+        <CalendarTable tasks={this.state.tasks.sort(this.taskSort)} prefix={this.state.calendarTitlePrefix} />
       </div>
     );
   }

diff --git a/src/components/CalendarTable.tsx b/src/components/CalendarTable.tsx
@@ -6,6 +6,7 @@ import Task, { TaskT } from './Task';
 type Props = {
   t: any
   tasks: Array<TaskT>
+  prefix: string
 }
 
 function CalendarTable(props: Props) {
@@ -16,7 +17,7 @@ function CalendarTable(props: Props) {
   })
   return (
     <div className='calendar-table'>
-    <IcsDownload tasks={tasks}></IcsDownload>
+    <IcsDownload tasks={tasks} calendarTitlePrefix={props.prefix}></IcsDownload>
       <table>
         <thead>
           <tr>

diff --git a/src/components/IcsDownload.tsx b/src/components/IcsDownload.tsx
@@ -3,14 +3,15 @@ import styled from '@emotion/styled';
 import { withTranslation } from 'react-i18next'
 import { TaskT } from './Task'
 import { ChapterT } from './Chapter';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 const A = styled.a`
   border: none;
   color: white;
   background: var(--color-primary-light);
   padding: 0.3em;
   border-radius: 4px;
-
+  
   &:hover {
     color: white;
     opacity: 0.5;
@@ -20,6 +21,7 @@ const A = styled.a`
 type Props = {
   t: any
   tasks: Array<TaskT>
+  calendarTitlePrefix: string
 }
 
 function buildDescription(task: TaskT): string {
@@ -33,7 +35,7 @@ function buildLinks(task: TaskT): string {
   }).join(',')
 }
 
-function generateIcs(tasks: Array<TaskT>) {
+function generateIcs(tasks: Array<TaskT>, calendarTitlePrefix: string) {
   const ics = require('ics')
 
   const events = tasks.map(function (task) {
@@ -48,7 +50,7 @@ function generateIcs(tasks: Array<TaskT>) {
     return {
       start: [deadline.getFullYear(), deadline.getMonth() + 1, deadline.getDate()],
       end: [deadline.getFullYear(), deadline.getMonth() + 1, deadline.getDate()],
-      title: task.title,
+      title: `${calendarTitlePrefix} ${task.title}`,
       description: buildLinks(task),
       url: buildLinks(task),
       status: 'CONFIRMED',
@@ -66,17 +68,24 @@ function generateIcs(tasks: Array<TaskT>) {
   })
 }
 
+function downloadIcs(mouseClickEvent: React.MouseEvent<HTMLAnchorElement, MouseEvent>, tasks: TaskT[], calendarTitlePrefix: string) {
+  const value = generateIcs(tasks, calendarTitlePrefix)
+  const data = new Blob([value], { type: 'text/calendar' });
+  const link = window.URL.createObjectURL(data);
+
+  mouseClickEvent.currentTarget.href = link;
+}
+
 function IcsDownload(props: Props) {
   const { t } = props;
 
   if (props.tasks[0]) {
-    const value = generateIcs(props.tasks)
-    // console.log(value)
-    const data = new Blob([value], { type: 'text/calendar' });
-    const link = window.URL.createObjectURL(data);
     return (
       <div className='calendar-ics'>
-        <A className="ics_download" id="link" download={t('calendarPage.filename')} href={link}>{t('calendarPage.download')}</A>
+        <A className="ics_download" id="link" download={t('calendarPage.ics.filename')} onClick={e => downloadIcs(e, props.tasks, props.calendarTitlePrefix)}>
+          <i><FontAwesomeIcon icon="calendar" /> </i> 
+          {t('calendarPage.ics.download')}
+        </A>
       </div>
     );
   }

diff --git a/src/i18n/de.json b/src/i18n/de.json
@@ -14,16 +14,20 @@
       "title": "Kalender",
       "startDate": "Startdatum Lager",
       "responsible": "Verantwortlich",
-      "puffer": "Puffer",
+      "puffer": "Puffer (Tage)",
       "responsibleOptions": {
         "all": "Alle",
         "ll": "Lagerleitung",
         "al": "Abteilungsleitung",
         "c": "Coach"
       },
-      "generate": "Generieren",
-      "download": "Download als .ics",
-      "filename": "Daten.ics",
+      "prefixPlaceholder": "Prefix für Kalendereinträge",
+      "prefixPreview": "Vorschau: {{calendarTitlePrefix}} Lagerdaten an Coach",
+      "ics": {
+        "generate": "Generieren",
+        "download": "Download als .ics",
+        "filename": "Daten.ics"
+      },
       "table": {
         "what": "Was",
         "who": "Wer",

diff --git a/src/i18n/fr.json b/src/i18n/fr.json
@@ -14,16 +14,20 @@
       "title": "Calendrier",
       "startDate": "Premier jour du camp",
       "responsible": "Responsable",
-      "puffer": "Marge",
+      "puffer": "Marge (jours)",
       "responsibleOptions": {
         "all": "Tous",
         "ll": "Responsable de camp",
         "al": "Responsable de groupe",
         "c": "Coach"
       },
-      "generate": "Générer",
-      "download": "Télécharger .ics",
-      "filename": "Dates.ics",
+      "prefixPlaceholder": "Préfixe pour les entrées de calendrier",
+      "prefixPreview": "Aperçu: {{calendarTitlePrefix}} Données relatives",
+      "ics": {
+        "generate": "Générer",
+        "download": "Télécharger .ics",
+        "filename": "Dates.ics"
+      },
       "table": {
         "what": "Quoi",
         "who": "Qui",

diff --git a/src/i18n/it.json b/src/i18n/it.json
@@ -14,16 +14,20 @@
       "title": "Calendario",
       "startDate": "Primo giorno del campo",
       "responsible": "Responsabile",
-      "puffer": "Puffer",
+      "puffer": "Tampone (giorni)",
       "responsibleOptions": {
         "all": "Tutti",
         "ll": "Capo campo",
         "al": "Capo Sezione",
         "c": "Coach"
       },
-      "generate": "Generieren",
-      "download": "Download als .ics",
-      "filename": "Dati.ics",
+      "prefixPlaceholder": "Prefisso per le voci del calendario",
+      "prefixPreview": "Anteprima: {{calendarTitlePrefix}} Dati del campo",
+      "ics": {
+        "generate": "Generare",
+        "download": "Scarica come .ics",
+        "filename": "Dati.ics"
+      },
       "table": {
         "what": "Cosa",
         "who": "Chi",

diff --git a/src/styles/calendar.less b/src/styles/calendar.less
@@ -1,5 +1,13 @@
 .calendar {
   overflow-x: scroll;
+
+  input, select {
+    border: 1px solid black;
+    height: 30px;
+    width: 200px;
+    margin: 0;
+  }
+
   .calendar-table {
 
     ul {
@@ -37,12 +45,31 @@
       }
     }
   }
+
   .calendar-ics {
     margin-bottom: 20px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: end;
+    gap: 8px;
+
+    .ics_download {
+      padding: 0.5em;
+      line-height: normal;
+    }
   }
 
   .calendar-form-container {
+    hr {
+      border: 0.5px solid #8c3c4f
+    }
     .calendar-form {
+      .calendar-title-prefix-hint {
+        font-weight: 200;
+        font-size: 15px;
+        width: 206px;
+      }
+
       list-style-type: none;
       padding: 0;
       max-width: 50%;
@@ -65,19 +92,12 @@
         justify-content: space-between;
         margin-top: 8px;
 
-        input, select {
-          border: 1px solid black;
-          height: 30px;
-          width: 200px;
-          margin: 0;
-        }
-
         #puffer {
-          width: 197px;
+          width: 200px;
         }
 
         #responsible {
-          width: 201px;
+          width: 206px;
         }
       }
     }