Merge branch 'GREG-327-sponsor-search-guests' into 'master'

GREG-327: Add search field for active guests

See merge request !383

frontend/public/locales/en/common.json

@@ -104,7 +104,9 @@
   "activeGuests": "Confirmed guests",
   "activeGuestsDescription": "Make changes to guest roles.",
   "noActiveGuests": "No active guests",
+  "foundNoGuests": "Found no guests",
   "sentInvitations": "Sent invitations",
+  "placeholder": "Search for guest",
   "sentInvitationsDescription": "Invitations awaiting response from guest.",
   "noInvitations": "No invitations",
   "status": "Status",

frontend/public/locales/nb/common.json

@@ -104,7 +104,9 @@
   "activeGuests": "Godkjente gjester",
   "activeGuestsDescription": "Her kan du endre på gjesteroller",
   "noActiveGuests": "Ingen aktive gjester",
+  "foundNoGuests": "Fant ingen gjester",
   "sentInvitations": "Sendte invitasjoner",
+  "placeholder": "Søk etter gjest",
   "sentInvitationsDescription": "Invitasjoner som venter på at gjesten skal ferdigstille registreringen.",
   "noInvitations": "Ingen invitasjoner",
   "status": "Status",

frontend/public/locales/nn/common.json

@@ -104,7 +104,9 @@
   "activeGuests": "Godkjende gjester",
   "activeGuestsDescription": "Endre på gjesteroller.",
   "noActiveGuests": "Ingen aktive gjester",
+  "foundNoGuests": "Fann ingen gjester",
   "sentInvitations": "Sendte invitasjonar",
+  "placeholder": "Søk etter gjest",
   "sentInvitationsDescription": "Invitasjonar som venter på at gjesten skal ferdigstille registreringa.",
   "noInvitations": "Ingen invitasjonar",
   "status": "Status",

frontend/src/routes/sponsor/frontpage/index.tsx

@@ -5,6 +5,7 @@ import {
   AccordionDetails,
   AccordionSummary,
   Button,
+  InputAdornment,
   Paper,
   Table,
   TableBody,
@@ -12,10 +13,12 @@ import {
   TableContainer,
   TableHead,
   TableRow,
+  TextField,
   Typography,
 } from '@mui/material'
-import { styled } from '@mui/system'
+import { Box, styled } from '@mui/system'
 import { useState } from 'react'
+import SearchIcon from '@mui/icons-material/Search'
 
 import Loading from 'components/loading'
 import Page from 'components/page'
@@ -316,6 +319,8 @@ const InvitedGuests = ({ persons }: GuestProps) => {
 
 const ActiveGuests = ({ persons }: GuestProps) => {
   const [activeExpanded, setActiveExpanded] = useState(false)
+  const [searchHasInput, setSearchHasInput] = useState(false)
+  const [searchGuests, setSearchGuests] = useState<Guest[]>([])
 
   // Show all verified guests
   let guests = persons.length > 0 ? persons : []
@@ -323,6 +328,21 @@ const ActiveGuests = ({ persons }: GuestProps) => {
     guests = guests.filter((person) => person.verified)
   }
   const [t] = useTranslation(['common'])
+
+  const getSponsorGuests = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.value) {
+      setSearchHasInput(true)
+      const guestSearch: Guest[] = guests.filter((guest) =>
+        `${guest.first.toLowerCase()} ${guest.last.toLowerCase()}`.includes(
+          event.target.value.toLowerCase()
+        )
+      )
+      setSearchGuests(guestSearch)
+    } else {
+      setSearchHasInput(false)
+      setSearchGuests([])
+    }
+  }
   return (
     <StyledAccordion
       expanded={activeExpanded}
@@ -344,11 +364,37 @@ const ActiveGuests = ({ persons }: GuestProps) => {
         >
           {t('common:activeGuestsDescription')}
         </Typography>
-        <GuestTable
-          guests={guests}
-          emptyText={t('common:noActiveGuests')}
-          marginWidth={1000}
-        />
+        <Box
+          sx={{
+            marginBottom: '1rem',
+          }}
+        >
+          <TextField
+            variant="standard"
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <SearchIcon />
+                </InputAdornment>
+              ),
+            }}
+            placeholder={t('placeholder')}
+            onChange={getSponsorGuests}
+          />
+          {!searchHasInput ? (
+            <GuestTable
+              guests={guests}
+              emptyText={t('common:noActiveGuests')}
+              marginWidth={1000}
+            />
+          ) : (
+            <GuestTable
+              guests={searchGuests}
+              emptyText={t('common:foundNoGuests')}
+              marginWidth={1000}
+            />
+          )}
+        </Box>
       </AccordionDetails>
     </StyledAccordion>
   )