Merge pull request #160 from r00tat/feature/gb-tabs

Feature: Geschäftsbuch Tabs
r00tat · Sep 30, 2024 · 70d6a57 · 70d6a57
2 parents cff597b + e1ab039
commit 70d6a57
Show file tree

Hide file tree

Showing 18 changed files with 526 additions and 277 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,8 +20,9 @@
     "@mapbox/togeojson": "^0.16.2",
     "@mdi/js": "^7.4.47",
     "@mdi/react": "^1.6.1",
-    "@mui/icons-material": "^5.16.7",
-    "@mui/material": "^5.16.7",
+    "@mui/icons-material": "^6.1.1",
+    "@mui/lab": "^6.0.0-beta.10",
+    "@mui/material": "^6.1.1",
     "@mui/x-data-grid": "^7.18.0",
     "@mui/x-date-pickers": "^7.18.0",
     "@serwist/next": "^9.0.8",

diff --git a/src/app/groups/page.tsx b/src/app/groups/page.tsx
@@ -6,7 +6,7 @@ import EditIcon from '@mui/icons-material/Edit';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import Box from '@mui/material/Box';
 import Fab from '@mui/material/Fab';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Grid2';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
@@ -116,41 +116,35 @@ export default function Groups() {
           </IconButton>
         </Typography>
         <Grid container>
-          <Grid item xs={2} md={2} lg={2}></Grid>
-          <Grid item xs={5} md={3} lg={3}>
+          <Grid size={{ xs: 2, md: 2, lg: 2 }}></Grid>
+          <Grid size={{ xs: 5, md: 3, lg: 3 }}>
             <b>ID</b>
           </Grid>
-          <Grid item xs={5} md={3} lg={3}>
+          <Grid size={{ xs: 5, md: 3, lg: 3 }}>
             <b>Name</b>
           </Grid>
 
-          <Grid item xs={12} md={4} lg={4}>
+          <Grid size={{ xs: 12, md: 4, lg: 4 }}>
             <b>Description</b>
           </Grid>
-          <Grid item xs={12}>
+          <Grid size={{ xs: 12 }}>
             <hr />
           </Grid>
 
           {groups.map((group) => (
             <React.Fragment key={`group-${group.id}`}>
-              <Grid item xs={2} md={2} lg={2}>
+              <Grid size={{ xs: 2, md: 2, lg: 2 }}>
                 <GroupRowButtons
                   row={group}
                   editFn={editAction}
                   deleteFn={showDeleteConfirm}
                 />
               </Grid>
-              <Grid item xs={5} md={3} lg={3}>
-                {group.id}
-              </Grid>
-              <Grid item xs={5} md={3} lg={3}>
-                {group.name}
-              </Grid>
+              <Grid size={{ xs: 5, md: 3, lg: 3 }}>{group.id}</Grid>
+              <Grid size={{ xs: 5, md: 3, lg: 3 }}>{group.name}</Grid>
 
-              <Grid item xs={12} md={4} lg={4}>
-                {group.description}
-              </Grid>
-              <Grid item xs={12}>
+              <Grid size={{ xs: 12, md: 4, lg: 4 }}>{group.description}</Grid>
+              <Grid size={{ xs: 12 }}>
                 <hr />
               </Grid>
             </React.Fragment>

diff --git a/src/app/users/page.tsx b/src/app/users/page.tsx
@@ -5,7 +5,7 @@ import CheckIcon from '@mui/icons-material/Check';
 import EditIcon from '@mui/icons-material/Edit';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Grid2';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
@@ -158,49 +158,47 @@ export default function Users() {
           </IconButton>
         </Typography>
         <Grid container>
-          <Grid item xs={2} md={2} lg={2}></Grid>
-          <Grid item xs={5} md={6} lg={2}>
+          <Grid size={{ xs: 2, md: 2, lg: 2 }}></Grid>
+          <Grid size={{ xs: 5, md: 6, lg: 2 }}>
             <b>Name</b>
           </Grid>
-          <Grid item xs={5} md={6} lg={2}>
+          <Grid size={{ xs: 5, md: 6, lg: 2 }}>
             <b>Email</b>
           </Grid>
 
-          <Grid item xs={6} md={4} lg={2}>
+          <Grid size={{ xs: 6, md: 4, lg: 2 }}>
             <b>Feuerwehr</b>
           </Grid>
-          <Grid item xs={6} md={4} lg={3}>
+          <Grid size={{ xs: 6, md: 4, lg: 3 }}>
             <b>Gruppen</b>
           </Grid>
-          <Grid item xs={12}>
+          <Grid size={{ xs: 12 }}>
             <hr />
           </Grid>
           {users.map((user) => (
             <React.Fragment key={`user-entry-${user.uid}`}>
-              <Grid item xs={2} md={2} lg={2}>
+              <Grid size={{ xs: 2, md: 2, lg: 2 }}>
                 <UserRowButtons
                   row={user}
                   authorizeFn={authorizeAction}
                   editFn={editAction}
                 />
               </Grid>
-              <Grid item xs={5} md={6} lg={2}>
+              <Grid size={{ xs: 5, md: 6, lg: 2 }}>
                 {user.displayName || ''}
               </Grid>
-              <Grid item xs={5} md={6} lg={2}>
-                {user.email}
-              </Grid>
+              <Grid size={{ xs: 5, md: 6, lg: 2 }}>{user.email}</Grid>
 
-              <Grid item xs={6} md={4} lg={2}>
+              <Grid size={{ xs: 6, md: 4, lg: 2 }}>
                 {user.feuerwehr} {user.description}
               </Grid>
-              <Grid item xs={6} md={4} lg={3}>
+              <Grid size={{ xs: 6, md: 4, lg: 3 }}>
                 {(user.groups || [])
                   .map((key: string) => groups[key])
                   .filter((v: string) => v)
                   .join(', ')}
               </Grid>
-              <Grid item xs={12}>
+              <Grid size={{ xs: 12 }}>
                 <hr />
               </Grid>
             </React.Fragment>

diff --git a/src/components/FirecallItems/FirecallItemCard.tsx b/src/components/FirecallItems/FirecallItemCard.tsx
@@ -11,7 +11,7 @@ import Card from '@mui/material/Card';
 import CardActions from '@mui/material/CardActions';
 import CardContent from '@mui/material/CardContent';
 import Collapse from '@mui/material/Collapse';
-import Grid, { RegularBreakpoints } from '@mui/material/Grid';
+import Grid, { GridBaseProps } from '@mui/material/Grid2';
 import IconButton, { IconButtonProps } from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
@@ -41,7 +41,7 @@ const ExpandMore = styled((props: ExpandMoreProps) => {
   }),
 }));
 
-export interface FirecallItemCardOptions extends RegularBreakpoints {
+export interface FirecallItemCardOptions extends GridBaseProps {
   item: FirecallItem;
   close?: () => void;
   subItems?: FirecallItem[];
@@ -107,7 +107,7 @@ export default function FirecallItemCard({
   };
 
   return (
-    <Grid item xs={12} md={6} lg={4} {...breakpoints}>
+    <Grid size={{ xs: 12, md: 6, lg: 4 }} {...breakpoints}>
       <Card ref={setNodeRef} style={style} {...listeners} {...attributes}>
         <CardContent>
           <Typography variant="h5" component="div" flex={1}>
@@ -172,10 +172,7 @@ export default function FirecallItemCard({
                   <FirecallItemCard
                     item={si}
                     key={si.id}
-                    xs={12}
-                    md={12}
-                    lg={6}
-                    xl={4}
+                    size={{ xs: 12, md: 12, lg: 6, xl: 4 }}
                     draggable={subItemsDraggable}
                   />
                 ))}

diff --git a/src/components/FirecallItems/elements/FirecallGb.tsx b/src/components/FirecallItems/elements/FirecallGb.tsx
@@ -8,6 +8,7 @@ export class FirecallGb extends FirecallItemBase {
   von: string;
   an: string;
   ausgehend: boolean;
+  weiterleitung: string;
 
   public constructor(firecallItem?: GeschaeftsbuchEintrag) {
     super(firecallItem);
@@ -16,6 +17,7 @@ export class FirecallGb extends FirecallItemBase {
     this.an = firecallItem?.an ?? '';
     this.nummer = firecallItem?.nummer ?? 1;
     this.ausgehend = firecallItem?.ausgehend ?? false;
+    this.weiterleitung = firecallItem?.weiterleitung ?? '';
   }
 
   public data(): GeschaeftsbuchEintrag {
@@ -25,6 +27,7 @@ export class FirecallGb extends FirecallItemBase {
       an: this.an,
       ausgehend: this.ausgehend,
       nummer: this.nummer,
+      weiterleitung: this.weiterleitung,
     } as GeschaeftsbuchEintrag;
   }
 
@@ -53,6 +56,7 @@ export class FirecallGb extends FirecallItemBase {
       an: 'Meldung an',
       name: 'Information',
       beschreibung: 'Anmerkung',
+      weiterleitung: 'Weiterleiten an (S1, S2, ...)',
     };
   }
 
@@ -108,6 +112,7 @@ export class FirecallGb extends FirecallItemBase {
             </>
           )}
           {this.ausgehend ? 'Ausgehend' : 'Eingehend'}: {this.name}
+          Weiterleitung: {this.weiterleitung} <br />
           <br />
           Anmerkung: {this.beschreibung}
         </>

diff --git a/src/components/chat/chat-ui.tsx b/src/components/chat/chat-ui.tsx
@@ -5,7 +5,7 @@ import { useCallback, useEffect, useState } from 'react';
 
 import FormControl from '@mui/material/FormControl';
 import FormControlLabel from '@mui/material/FormControlLabel';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Grid2';
 import IconButton from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
 import InputLabel from '@mui/material/InputLabel';
@@ -56,7 +56,7 @@ export default function ChatUi() {
     <>
       <Typography variant="h3">Chat</Typography>
       <Grid container>
-        <Grid item xs={12}>
+        <Grid size={{ xs: 12 }}>
           <FormControlLabel
             control={
               <Switch
@@ -72,7 +72,7 @@ export default function ChatUi() {
             label="Chat Benachrichtigungen"
           />
         </Grid>
-        <Grid item xs={11}>
+        <Grid size={{ xs: 11 }}>
           <FormControl sx={{ m: 2 }} variant="outlined" fullWidth>
             <InputLabel htmlFor="outlined-adornment-password">
               Chat Message
@@ -105,11 +105,11 @@ export default function ChatUi() {
           </FormControl>
         </Grid>
 
-        {/* <Grid item xs={12}>
+        {/* <Grid size={{xs:12}}>
           <Typography>Register: {JSON.stringify(result)}</Typography>
         </Grid> */}
 
-        <Grid item xs={12}>
+        <Grid size={{ xs: 12 }}>
           <ChatMessages />
         </Grid>
       </Grid>

diff --git a/src/components/chat/messages.tsx b/src/components/chat/messages.tsx
@@ -1,4 +1,4 @@
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Grid2';
 import { orderBy } from 'firebase/firestore';
 import { ChatMessage } from '../../common/chat';
 import useFirebaseCollection from '../../hooks/useFirebaseCollection';
@@ -21,7 +21,7 @@ export default function ChatMessages({ order = 'desc' }: ChatMessagesProps) {
     <>
       <Grid container>
         {messages.map((m) => (
-          <Grid item xs={12} key={m.id}>
+          <Grid size={{ xs: 12 }} key={m.id}>
             <MessageBox msg={m} />
           </Grid>
         ))}

diff --git a/src/components/firebase/firestore.ts b/src/components/firebase/firestore.ts
@@ -98,6 +98,7 @@ export interface GeschaeftsbuchEintrag extends FirecallItem {
   datum: string;
   von?: string;
   an?: string;
+  weiterleitung?: string;
 }
 
 export interface MultiPointItem extends FirecallItem {

diff --git a/src/components/inputs/DateTimePicker.tsx b/src/components/inputs/DateTimePicker.tsx
@@ -6,7 +6,7 @@ import type {} from '@mui/x-date-pickers/themeAugmentation';
 import { Moment } from 'moment';
 import 'moment/locale/de';
 import TimeIcon from '@mui/icons-material/AccessTime';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Grid2';
 import Tooltip from '@mui/material/Tooltip';
 import moment from 'moment';
 
@@ -24,7 +24,7 @@ export default function MyDateTimePicker({
   // const [value, setValue] = React.useState<Moment | null>(moment());
   return (
     <Grid container>
-      <Grid item xs={11}>
+      <Grid size={{ xs: 11 }}>
         <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="de-DE">
           <DateTimePicker
             slotProps={{
@@ -40,7 +40,7 @@ export default function MyDateTimePicker({
           />
         </LocalizationProvider>
       </Grid>
-      <Grid item xs={1}>
+      <Grid size={{ xs: 1 }}>
         <Tooltip title="Auf aktuelle Uhrzeit setzten">
           <IconButton onClick={() => setValue(moment())}>
             <TimeIcon />

diff --git a/src/components/pages/Einsaetze.tsx b/src/components/pages/Einsaetze.tsx
@@ -9,7 +9,7 @@ import Card from '@mui/material/Card';
 import CardActions from '@mui/material/CardActions';
 import CardContent from '@mui/material/CardContent';
 import Fab from '@mui/material/Fab';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Grid2';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
@@ -82,7 +82,7 @@ function EinsatzCard({
   );
 
   return (
-    <Grid item xs={12} md={6} lg={4}>
+    <Grid size={{ xs: 12, md: 6, lg: 4 }}>
       <Card>
         <CardContent>
           <Typography variant="h5" component="div">
@@ -180,7 +180,7 @@ export default function Einsaetze() {
           Einsätze
         </Typography>
         <Grid container spacing={2}>
-          <Grid item xs={12}>
+          <Grid size={{ xs: 12 }}>
             <FirecallImport />
           </Grid>
           {einsaetze.map((einsatz) => (