Merge pull request #277 from GRA0007/feat/selection-shortcuts

Selection controls

frontend/src/components/AvailabilityEditor/AvailabilityEditor.module.scss

@@ -0,0 +1,5 @@
+.selectionControls {
+  display: flex;
+  align-items: center;
+  gap: 1em;
+}

frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx

@@ -1,12 +1,14 @@
-import { Fragment, useCallback, useRef, useState } from 'react'
+import { Fragment, useCallback, useEffect, useRef, useState } from 'react'
 
+import Button from '/src/components/Button/Button'
 import Content from '/src/components/Content/Content'
 import GoogleCalendar from '/src/components/GoogleCalendar/GoogleCalendar'
 import { usePalette } from '/src/hooks/usePalette'
 import { useTranslation } from '/src/i18n/client'
 import { calculateTable, makeClass, parseSpecificDate } from '/src/utils'
 
-import styles from '../AvailabilityViewer/AvailabilityViewer.module.scss'
+import styles from './AvailabilityEditor.module.scss'
+import viewerStyles from '../AvailabilityViewer/AvailabilityViewer.module.scss'
 import Skeleton from '../AvailabilityViewer/components/Skeleton/Skeleton'
 
 interface AvailabilityEditorProps {
@@ -34,8 +36,35 @@ const AvailabilityEditor = ({ times, timezone, value = [], onChange, table }: Av
   // Create the colour palette
   const palette = usePalette(2)
 
+  // Selection control
+  const selectAll = useCallback(() => onChange(times), [onChange, times])
+  const selectNone = useCallback(() => onChange([]), [onChange])
+  const selectInvert = useCallback(() => onChange(times.filter(t => !value.includes(t))), [onChange, times, value])
+
+  // Selection keyboard shortcuts
+  useEffect(() => {
+    const handleKeydown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && (e.key === 'a' || e.key === 'i')) {
+        e.preventDefault()
+        if (e.shiftKey && e.key === 'a') selectNone()
+        else if (e.key === 'a') selectAll()
+        else selectInvert()
+      }
+    }
+
+    document.addEventListener('keydown', handleKeydown)
+    return () => document.removeEventListener('keydown', handleKeydown)
+  }, [selectAll, selectNone, selectInvert])
+
   return <>
-    <Content isCentered>{t('you.info')}</Content>
+    <Content isCentered>
+      <div>{t('you.info')}</div>
+      <div className={styles.selectionControls}>
+        <Button isSmall onClick={selectAll} title="Ctrl + A (⌘ A)">{t('you.select_all')}</Button>
+        <Button isSmall onClick={selectNone} title="Ctrl + Shift + A (⌘ ⇧ A)">{t('you.select_none')}</Button>
+        <Button isSmall onClick={selectInvert} title="Ctrl + I (⌘ I)">{t('you.select_invert')}</Button>
+      </div>
+    </Content>
     {times[0].length === 13 && <Content>
       <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center', gap: 12 }}>
         <GoogleCalendar
@@ -48,13 +77,13 @@ const AvailabilityEditor = ({ times, timezone, value = [], onChange, table }: Av
       </div>
     </Content>}
 
-    <div className={styles.wrapper}>
+    <div className={viewerStyles.wrapper}>
       <div>
-        <div className={styles.heatmap}>
+        <div className={viewerStyles.heatmap}>
-          <div className={styles.timeLabels}>
+          <div className={viewerStyles.timeLabels}>
             {table?.rows.map((row, i) =>
-              <div className={styles.timeSpace} key={i}>
+              <div className={viewerStyles.timeSpace} key={i}>
-                {row && <label className={styles.timeLabel}>
+                {row && <label className={viewerStyles.timeLabel}>
                   {row.label}
                 </label>}
               </div>
@@ -62,12 +91,12 @@ const AvailabilityEditor = ({ times, timezone, value = [], onChange, table }: Av
           </div>
 
           {table?.columns.map((column, x) => <Fragment key={x}>
-            {column ? <div className={styles.dateColumn}>
+            {column ? <div className={viewerStyles.dateColumn}>
-              {column.header.dateLabel && <label className={styles.dateLabel}>{column.header.dateLabel}</label>}
+              {column.header.dateLabel && <label className={viewerStyles.dateLabel}>{column.header.dateLabel}</label>}
-              <label className={styles.dayLabel}>{column.header.weekdayLabel}</label>
+              <label className={viewerStyles.dayLabel}>{column.header.weekdayLabel}</label>
 
               <div
-                className={styles.times}
+                className={viewerStyles.times}
                 data-border-left={x === 0 || table.columns.at(x - 1) === null}
                 data-border-right={x === table.columns.length - 1 || table.columns.at(x + 1) === null}
               >
@@ -75,7 +104,7 @@ const AvailabilityEditor = ({ times, timezone, value = [], onChange, table }: Av
                   if (y === column.cells.length - 1) return null
 
                   if (!cell) return <div
-                    className={makeClass(styles.timeSpace, styles.grey)}
+                    className={makeClass(viewerStyles.timeSpace, viewerStyles.grey)}
                     key={y}
                     title={t<string>('greyed_times')}
                   />
@@ -87,7 +116,7 @@ const AvailabilityEditor = ({ times, timezone, value = [], onChange, table }: Av
 
                   return <div
                     key={y}
-                    className={makeClass(styles.time, selecting.length === 0 && styles.editable)}
+                    className={makeClass(viewerStyles.time, selecting.length === 0 && viewerStyles.editable)}
                     style={{
                       touchAction: 'none',
                       backgroundColor: isSelected ? palette[1].string : palette[0].string,
@@ -132,7 +161,7 @@ const AvailabilityEditor = ({ times, timezone, value = [], onChange, table }: Av
                   />
                 })}
               </div>
-            </div> : <div className={styles.columnSpacer} />}
+            </div> : <div className={viewerStyles.columnSpacer} />}
           </Fragment>) ?? <Skeleton isSpecificDates={times[0].length === 13} />}
         </div>
       </div>

frontend/src/components/Content/Content.module.scss

@@ -9,6 +9,8 @@
   align-items: center;
   justify-content: center;
   text-align: center;
+  flex-direction: column;
+  gap: 1em;
 }
 
 .slim {

frontend/src/components/GoogleCalendar/GoogleCalendar.tsx

@@ -121,18 +121,18 @@ const GoogleCalendar = ({ timezone, timeStart, timeEnd, times, onImport }: Googl
       shadowColor="#3367BD"
       icon={<img aria-hidden="true" src={googleLogo.src} alt="" />}
     >
-      {t('you.google_cal.login')}
+      {t('you.google_cal')}
     </Button>}
 
     {calendars && <div className={styles.wrapper}>
       <p className={styles.title}>
         <img src={googleLogo.src} alt="" className={styles.icon} />
-        <strong>{t('you.google_cal.login')}</strong>
+        <strong>{t('you.google_cal')}</strong>
         (<button
           className={styles.linkButton}
           type="button"
           onClick={() => setCanLoad(false)}
-        >{t('you.google_cal.logout')}</button>)
+        >{t('you.integration.logout')}</button>)
       </p>
 
       <div className={styles.options}>
@@ -140,12 +140,12 @@ const GoogleCalendar = ({ timezone, timeStart, timeEnd, times, onImport }: Googl
           className={styles.linkButton}
           type="button"
           onClick={() => setCalendars(calendars.map(c => ({ ...c, isChecked: true })))}
-        >{t('event:you.google_cal.select_all')}</button>}
+        >{t('you.select_all')}</button>}
         {calendars.every(c => c.isChecked) && <button
           className={styles.linkButton}
           type="button"
           onClick={() => setCalendars(calendars.map(c => ({ ...c, isChecked: false })))}
-        >{t('event:you.google_cal.select_none')}</button>}
+        >{t('you.select_none')}</button>}
       </div>
 
       {calendars.map(calendar => <div key={calendar.id}>
@@ -161,13 +161,13 @@ const GoogleCalendar = ({ timezone, timeStart, timeEnd, times, onImport }: Googl
         <label className={styles.calendarName} htmlFor={calendar.id} title={calendar.description}>{allowUrlToWrap(calendar.name)}</label>
       </div>)}
 
-      <div className={styles.info}>{t('you.google_cal.info')}</div>
+      <div className={styles.info}>{t('you.integration.info')}</div>
       <Button
         isSmall
         isLoading={isLoadingAvailability}
         disabled={isLoadingAvailability}
         onClick={() => importAvailability()}
-      >{t('you.google_cal.button')}</Button>
+      >{t('you.integration.button')}</Button>
     </div>}
 
     {/* Load google api scripts */}

frontend/src/i18n/locales/de/event.json

@@ -54,14 +54,15 @@
 
   "you": {
     "info": "Klicke und ziehe im Kalender unten, um deine Verfügbarkeit festzulegen",
-    "google_cal": {
+    "select_all": "Alle wählen",
-      "login": "Mit Google Kalender synchronisieren",
+    "select_none": "Keine wählen",
+
+    "google_cal": "Mit Google Kalender synchronisieren",
+    "outlook_cal": "Mit Outlook Kalender synchronisieren",
+    "integration": {
       "logout": "ausloggen",
-      "select_all": "Alle wählen",
-      "select_none": "Keine wählen",
       "info": "Durch den Import wird deine aktuelle Verfügbarkeit überschrieben",
       "button": "Verfügbarkeit importieren"
-    },
+    }
-    "outlook_cal": "Mit Outlook Kalender synchronisieren"
   }
 }

frontend/src/i18n/locales/en-GB/event.json

@@ -54,14 +54,15 @@
 
   "you": {
     "info": "Click and drag the calendar below to set your availabilities",
-    "google_cal": {
+    "select_all": "Select all",
-      "login": "Sync with Google Calendar",
+    "select_none": "Select none",
+    "select_invert": "Invert selection",
+    "google_cal": "Sync with Google Calendar",
+    "outlook_cal": "Sync with Outlook Calendar",
+    "integration": {
       "logout": "log out",
-      "select_all": "Select all",
-      "select_none": "Select none",
       "info": "Importing will overwrite your current availability",
       "button": "Import availability"
-    },
+    }
-    "outlook_cal": "Sync with Outlook Calendar"
   }
 }

frontend/src/i18n/locales/en/event.json

@@ -54,14 +54,16 @@
 
   "you": {
     "info": "Click and drag the calendar below to set your availabilities",
-    "google_cal": {
+    "select_all": "Select all",
-      "login": "Sync with Google Calendar",
+    "select_none": "Select none",
+    "select_invert": "Invert selection",
+
+    "google_cal": "Sync with Google Calendar",
+    "outlook_cal": "Sync with Outlook Calendar",
+    "integration": {
       "logout": "log out",
-      "select_all": "Select all",
-      "select_none": "Select none",
       "info": "Importing will overwrite your current availability",
       "button": "Import availability"
-    },
+    }
-    "outlook_cal": "Sync with Outlook Calendar"
   }
 }

frontend/src/i18n/locales/es/event.json

@@ -54,14 +54,15 @@
 
   "you": {
     "info": "Haga clic y arrastre el calendario a continuación para configurar sus disponibilidades",
-    "google_cal": {
+    "select_all": "Seleccionar todo",
-      "login": "Sincronizar con Google Calendar",
+    "select_none": "Seleccionar ninguno",
+
+    "google_cal": "Sincronizar con Google Calendar",
+    "outlook_cal": "Sincronizar con el calendario de Outlook",
+    "integration": {
       "logout": "cerrar sesión",
-      "select_all": "Seleccionar todo",
-      "select_none": "Seleccionar ninguno",
       "info": "La importación sobrescribirá su disponibilidad actual",
       "button": "Disponibilidad de importación"
-    },
+    }
-    "outlook_cal": "Sincronizar con el calendario de Outlook"
   }
 }

frontend/src/i18n/locales/fr/event.json

@@ -54,14 +54,15 @@
 
   "you": {
     "info": "Cliquez et faites glisser le calendrier ci-dessous pour définir vos disponibilités",
-    "google_cal": {
+    "select_all": "Tout sélectionner",
-      "login": "Synchroniser avec Google Agenda",
+    "select_none": "Tout déselectionner",
+
+    "google_cal": "Synchroniser avec Google Agenda",
+    "outlook_cal": "Synchroniser avec le calendrier Outlook",
+    "integration": {
       "logout": "déconnexion",
-      "select_all": "Tout sélectionner",
-      "select_none": "Tout déselectionner",
       "info": "L'importation écrasera vos disponibilités actuelles",
       "button": "Importer les disponibilités"
-    },
+    }
-    "outlook_cal": "Synchroniser avec le calendrier Outlook"
   }
 }

frontend/src/i18n/locales/hi/event.json

@@ -54,14 +54,15 @@
 
   "you": {
     "info": "अपनी उपलब्धता सेट करने के लिए नीचे कैलेंडर को क्लिक करें और खींचें",
-    "google_cal": {
+    "select_all": "सभी का चयन करे",
-      "login": "Google कैलेंडर के साथ समन्वयित करें",
+    "select_none": "सबको अचयनित करो",
+
+    "google_cal": "Google कैलेंडर के साथ समन्वयित करें",
+    "outlook_cal": "Outlook कैलेंडर के साथ सिंक",
+    "integration": {
       "logout": "लॉग आउट",
-      "select_all": "सभी का चयन करे",
-      "select_none": "सबको अचयनित करो",
       "info": "आयात करना आपकी वर्तमान उपलब्धता को अधिलेखित कर देगा",
       "button": "आयात उपलब्धता"
-    },
+    }
-    "outlook_cal": "Outlook कैलेंडर के साथ सिंक"
   }
 }

frontend/src/i18n/locales/id/event.json

@@ -54,14 +54,15 @@
 
   "you": {
     "info": "Klik dan seret kalender di bawah ini untuk mengatur ketersediaan Anda",
-    "google_cal": {
+    "select_all": "Pilih semua",
-      "login": "Sinkronkan dengan Google Kalender",
+    "select_none": "Hapus semua",
+
+    "google_cal": "Sinkronkan dengan Google Kalender",
+    "outlook_cal": "Sinkronkan dengan Kalender Outlook",
+    "integration": {
       "logout": "keluar",
-      "select_all": "Pilih semua",
-      "select_none": "Hapus semua",
       "info": "Mengimpor akan menimpa ketersediaan Anda saat ini",
       "button": "Impor ketersediaan Anda"
-    },
+    }
-    "outlook_cal": "Sinkronkan dengan Kalender Outlook"
   }
 }

frontend/src/i18n/locales/it/event.json

@@ -54,14 +54,15 @@
 
   "you": {
     "info": "Clicca e trascina nel calendario qui sotto per impostare la tua disponibilità",
-    "google_cal": {
+    "select_all": "Seleziona tutto",
-      "login": "Sincronizza con il calendario Google",
+    "select_none": "Seleziona nessuno",
+
+    "google_cal": "Sincronizza con il calendario Google",
+    "outlook_cal": "Sincronizza con il calendario Outlook",
+    "integration": {
       "logout": "Esci",
-      "select_all": "Seleziona tutto",
-      "select_none": "Seleziona nessuno",
       "info": "L'importazione sovrascriverà la tua disponibilità attuale",
       "button": "Importa la disponibilità"
-    },
+    }
-    "outlook_cal": "Sincronizza con il calendario Outlook"
   }
 }

frontend/src/i18n/locales/ja/event.json

@@ -54,14 +54,15 @@
 
   "you": {
     "info": "下のカレンダーをクリック・ドラッグして、いつ予定が空いているかを登録しましょう",
-    "google_cal": {
+    "select_all": "すべて選択",
-      "login": "Google カレンダーと同期",
+    "select_none": "すべて選択解除",
+
+    "google_cal": "Google カレンダーと同期",
+    "outlook_cal": "Outlook カレンダーと同期",
+    "integration": {
       "logout": "ログアウト",
-      "select_all": "すべて選択",
-      "select_none": "すべて選択解除",
       "info": "インポートすると、現在の登録状況が上書きされます",
       "button": "空き具合をインポート"
-    },
+    }
-    "outlook_cal": "Outlook カレンダーと同期"
   }
 }

frontend/src/i18n/locales/ko/event.json

@@ -54,14 +54,15 @@
 
   "you": {
     "info": "사용 가능 여부를 설정하려면 아래 캘린더를 클릭하고 드래그하세요",
-    "google_cal": {
+    "select_all": "모두 선택",
-      "login": "Google 캘린더와 동기화합니다",
+    "select_none": "모두 선택 해제",
+
+    "google_cal": "Google 캘린더와 동기화합니다",
+    "outlook_cal": "아웃룩 캘린더와 동기화합니다",
+    "integration": {
       "logout": "로그 아웃",
-      "select_all": "모두 선택",
-      "select_none": "모두 선택 해제",
       "info": "가져 오면 현재 사용 가능 여부를 덮어 씁니다",
       "button": "가용성 가져 오기"
-    },
+    }
-    "outlook_cal": "아웃룩 캘린더와 동기화합니다"
   }
 }

frontend/src/i18n/locales/pt-BR/event.json

@@ -54,14 +54,15 @@
 
   "you": {
     "info": "Clique e arraste para assinalar seu tempo livre no calendário",
-    "google_cal": {
+    "select_all": "Selecionar todos",
-      "login": "Sincronizar com sua Agenda Google",
+    "select_none": "Selecionar nenhum",
+
+    "google_cal": "Sincronizar com sua Agenda Google",
+    "outlook_cal": "Sincronizar com sua Agenda Outlook",
+    "integration": {
       "logout": "sair",
-      "select_all": "Selecionar todos",
-      "select_none": "Selecionar nenhum",
       "info": "Ao importar você substituirá sua disponibilidade atual",
       "button": "Importar horários disponíveis"
-    },
+    }
-    "outlook_cal": "Sincronizar com sua Agenda Outlook"
   }
 }

frontend/src/i18n/locales/pt-PT/event.json

@@ -54,14 +54,15 @@
 
   "you": {
     "info": "Clica e arrasta no calendário abaixo para definires a tua disponibilidade.",
-    "google_cal": {
+    "select_all": "Selecionar tudo",
-      "login": "Sincronizar com o Calendário Google",
+    "select_none": "Selecionar nenhum",
+
+    "google_cal": "Sincronizar com o Calendário Google",
+    "outlook_cal": "Sincronizar com o Calendário do Outlook",
+    "integration": {
       "logout": "terminar sessão",
-      "select_all": "Selecionar tudo",
-      "select_none": "Selecionar nenhum",
       "info": "Importar substituirá a tua disponibilidade atual",
       "button": "Importar disponibilidade"
-    },
+    }
-    "outlook_cal": "Sincronizar com o Calendário do Outlook"
   }
 }

frontend/src/i18n/locales/ru/event.json

@@ -54,14 +54,15 @@
 
   "you": {
     "info": "Щелкните и перетащите календарь ниже, чтобы указать доступность",
-    "google_cal": {
+    "select_all": "Выбрать все",
-      "login": "Синхронизация с календарем Google",
+    "select_none": "Ничего не выбрать",
+
+    "google_cal": "Синхронизация с календарем Google",
+    "outlook_cal": "Синхронизация с календарем Outlook",
+    "integration": {
       "logout": "выйти",
-      "select_all": "Выбрать все",
-      "select_none": "Ничего не выбрать",
       "info": "При импорте ваша текущая доступность будет перезаписана",
       "button": "Доступность импорта"
-    },
+    }
-    "outlook_cal": "Синхронизация с календарем Outlook"
   }
 }