[#156] As a user I want to delete more then one…

…"Bereich" at once.

closes #156

Author: bitboxer

next-env.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
 
-declare module '*.svg' {
-  const value: React.FC<JSX.IntrinsicElements['svg']>
-  export default value
-}
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

pages/business/company/[companyId]/area/index.tsx

@@ -5,7 +5,7 @@ import { saveAs } from 'file-saver'
 
 import { withOwner, WithOwnerProps } from '~lib/pageWrappers'
 import { CurrentOwner, useCompany, useModals } from '~lib/hooks'
-import { IconButton } from '~ui/core'
+import { Box, Button, Checkbox, Icon, IconButton } from '~ui/core'
 import { Edit, Trash, Download } from '~ui/svg'
 import { OwnerApp, BackLink } from '~ui/layouts/OwnerApp'
 import { ActionList } from '~ui/blocks/ActionList'
@@ -18,6 +18,9 @@ import { QrInfoModal } from '~ui/modals/QrInfoModal'
 import { AreaRes, CompanyRes } from '~lib/api'
 import { decrypt } from '~lib/crypto'
 import { sortAreas } from '~lib/interactors'
+import { Form, Formik } from 'formik'
+import styled from '@emotion/styled'
+import { css } from '@emotion/react'
 
 const AreasIndexPage: React.FC<WithOwnerProps> = ({ owner }) => {
   const { query } = useRouter()
@@ -69,6 +72,12 @@ const AreasIndexPage: React.FC<WithOwnerProps> = ({ owner }) => {
     }
   }
 
+  const areas = sortAreas(company?.areas)
+
+  const handleSubmit = async (values, _bag) => {
+    console.log(values)
+  }
+
   return (
     <OwnerApp title={`${company?.name ?? ''} – Bereiche`}>
       <BackLink
@@ -83,44 +92,82 @@ const AreasIndexPage: React.FC<WithOwnerProps> = ({ owner }) => {
           title="Bereich hinzufügen..."
           onClick={() => openModal('data', { companyId: companyId })}
         />
-        {sortAreas(company?.areas).map((area) => (
-          <ActionCard
-            key={area.id}
-            href="/business/company/[companyId]/area/[areaId]"
-            as={`/business/company/${companyId}/area/${area.id}`}
-          >
-            <ActionCard.Main title={area.name} />
-            <ActionCard.Actions>
-              <IconButton
-                icon={Download}
-                color="bluegrey.700"
-                onClick={handleDownload(area)}
-                title="QR-Code"
-              />
-              <IconButton
-                icon={Edit}
-                color="yellow.500"
-                onClick={() =>
-                  openModal('data', {
-                    type: 'edit',
-                    areaId: area.id,
-                    name: area.name,
-                    testExemption: area.testExemption,
-                  })
-                }
-                title="Ändern"
-              />
-              <IconButton
-                icon={Trash}
-                color="red.500"
-                onClick={() => openModal('delete')}
-              />
-            </ActionCard.Actions>
-          </ActionCard>
-        ))}
+
+        <Formik
+          initialValues={Object.assign(
+            {},
+            ...areas.map((area) => ({ [`selected-${area.id}`]: false }))
+          )}
+          onSubmit={handleSubmit}
+        >
+          <Form>
+            {areas.map((area) => (
+              <ActionCard
+                key={area.id}
+                href="/business/company/[companyId]/area/[areaId]"
+                as={`/business/company/${companyId}/area/${area.id}`}
+              >
+                <ExpandArea>
+                  <Checkbox name={`selected-${area.id}`} label={area.name} />
+                </ExpandArea>
+                <ActionCard.Actions>
+                  <IconButton
+                    icon={Download}
+                    color="bluegrey.700"
+                    onClick={handleDownload(area)}
+                    title="QR-Code"
+                  />
+                  <IconButton
+                    icon={Edit}
+                    color="yellow.500"
+                    onClick={() =>
+                      openModal('data', {
+                        type: 'edit',
+                        areaId: area.id,
+                        name: area.name,
+                        testExemption: area.testExemption,
+                      })
+                    }
+                    title="Ändern"
+                  />
+                  <IconButton
+                    icon={Trash}
+                    color="red.500"
+                    onClick={() => openModal('delete')}
+                  />
+                </ActionCard.Actions>
+              </ActionCard>
+            ))}
+            <Box height={4} />
+            <Button type="submit">
+              <DeleteAllContent>
+                <Icon size={4} color="red.500" icon={Trash} />
+                <ButtonText>Ausgewählte Bereiche löschen</ButtonText>
+              </DeleteAllContent>
+            </Button>
+          </Form>
+        </Formik>
       </ActionList>
     </OwnerApp>
   )
 }
 
+const ExpandArea = styled('div')(
+  css({
+    flexGrow: 1,
+  })
+)
+
+const DeleteAllContent = styled('div')(
+  css({
+    display: 'flex',
+  })
+)
+
+const ButtonText = styled('div')(
+  css({
+    marginLeft: '0.5rem',
+  })
+)
+
 export default withOwner()(AreasIndexPage)

ui/blocks/ActionCard.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 import { Card, SRText, Row, Text, Box, Icon } from '~ui/core'
 
 interface Props {
@@ -18,32 +19,54 @@ interface Composition {
 type AreaCardCmps = React.FC<Props> & Composition
 
 export const ActionCard: AreaCardCmps = ({ href, as, onClick, children }) => {
+  const router = useRouter()
+
+  const isTargetOrNonInteractiveElement = (event: React.MouseEvent) => {
+    if (event.target == event.currentTarget) {
+      return true
+    }
+
+    let parentNode = event.target as HTMLElement
+    let isInteractive = false
+
+    while (!isInteractive && parentNode && parentNode != event.currentTarget) {
+      if (
+        ['A', 'INPUT', 'BUTTON'].includes(parentNode.nodeName) ||
+        parentNode.hasAttribute('href') ||
+        parentNode.hasAttribute('onClick') ||
+        parentNode.hasAttribute('for')
+      ) {
+        isInteractive = true
+      }
+      parentNode = parentNode.parentNode as HTMLElement
+    }
+
+    return !isInteractive
+  }
+
+  const navigateToHref = (event) => {
+    if (as && isTargetOrNonInteractiveElement(event)) {
+      event.preventDefault()
+      router.push(as)
+    }
+  }
+
   return (
     <Card
-      css={{ position: 'relative', textAlign: 'left' }}
+      css={{ position: 'relative', textAlign: 'left', cursor: 'pointer' }}
       as={onClick ? 'button' : 'div'}
-      onClick={onClick}
+      onClick={onClick ? onClick : navigateToHref}
     >
       <>
         <Row flexWrap="wrap" alignItems="center" px={4} py={2}>
           {children}
         </Row>
         {href && (
-          <Link href={href} as={as}>
-            <a
-              css={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                zIndex: 1,
-                cursor: 'pointer',
-              }}
-            >
-              <SRText>Zur Seite navigieren</SRText>
-            </a>
-          </Link>
+          <SRText>
+            <Link href={href} as={as}>
+              Zur Seite navigieren
+            </Link>
+          </SRText>
         )}
       </>
     </Card>