Migrate to Gridv2

r00tat · Sep 30, 2024 · e1ab039 · e1ab039
1 parent 53d1c0a
commit e1ab039
Show file tree

Hide file tree

Showing 12 changed files with 66 additions and 91 deletions.
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/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/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) => (

diff --git a/src/components/pages/EinsatzTagebuch.tsx b/src/components/pages/EinsatzTagebuch.tsx
@@ -31,7 +31,7 @@ import {
   filterActiveItems,
 } from '../firebase/firestore';
 import { DownloadButton } from '../inputs/DownloadButton';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Grid2';
 import React from 'react';
 import { randomUUID } from 'crypto';
 
@@ -289,36 +289,32 @@ export default function EinsatzTagebuch({
             />
           </Typography>
           <Grid container>
-            <Grid item xs={3} md={2} lg={1}>
+            <Grid size={{ xs: 3, md: 2, lg: 1 }}>
               <b>Nummer</b>
             </Grid>
-            <Grid item xs={6} md={5} lg={2}>
+            <Grid size={{ xs: 6, md: 5, lg: 2 }}>
               <b>Datum</b>
             </Grid>
-            <Grid item xs={12} md={5} lg={2}>
+            <Grid size={{ xs: 12, md: 5, lg: 2 }}>
               <b>typ von -&gt; an</b>
             </Grid>
-            <Grid item xs={12} md={5} lg={3}>
+            <Grid size={{ xs: 12, md: 5, lg: 3 }}>
               <b>Eintrag</b>
             </Grid>
-            <Grid item xs={12} md={5} lg={3}>
+            <Grid size={{ xs: 12, md: 5, lg: 3 }}>
               <b>Beschreibung</b>
             </Grid>
-            <Grid item xs={12} md={2} lg={1}></Grid>
+            <Grid size={{ xs: 12, md: 2, lg: 1 }}></Grid>
             {diaries.map((e) => (
               <React.Fragment
                 key={`tagebuch-${e.id || randomUUID()}-${e.nummer}`}
               >
-                <Grid item xs={3} md={2} lg={1}>
-                  {e.nummer}
-                </Grid>
-                <Grid item xs={6} md={5} lg={2}>
-                  {e.datum}
-                </Grid>
-                <Grid item xs={12} md={5} lg={2}>
+                <Grid size={{ xs: 3, md: 2, lg: 1 }}>{e.nummer}</Grid>
+                <Grid size={{ xs: 6, md: 5, lg: 2 }}>{e.datum}</Grid>
+                <Grid size={{ xs: 12, md: 5, lg: 2 }}>
                   {e.art} {e.von} {(e.von || e.an) && '->'} {e.an}
                 </Grid>
-                <Grid item xs={12} md={5} lg={3}>
+                <Grid size={{ xs: 12, md: 5, lg: 3 }}>
                   <b>
                     {e.name?.split(`\n`).map((line, index) => (
                       <React.Fragment key={`title-${e.id}-${index}`}>
@@ -328,15 +324,15 @@ export default function EinsatzTagebuch({
                     ))}
                   </b>
                 </Grid>
-                <Grid item xs={12} md={5} lg={3}>
+                <Grid size={{ xs: 12, md: 5, lg: 3 }}>
                   {e.beschreibung?.split('\n').map((line, index) => (
                     <React.Fragment key={`beschreibung-${e.id}-${index}`}>
                       {line}
                       <br />
                     </React.Fragment>
                   ))}
                 </Grid>
-                <Grid item xs={12} md={2} lg={1}>
+                <Grid size={{ xs: 12, md: 2, lg: 1 }}>
                   {showEditButton && <DiaryButtons diary={e}></DiaryButtons>}
                 </Grid>
               </React.Fragment>

diff --git a/src/components/pages/Fahrzeuge.tsx b/src/components/pages/Fahrzeuge.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Grid2';
 import Typography from '@mui/material/Typography';
 import { formatTimestamp } from '../../common/time-format';
 import useFirebaseLogin from '../../hooks/useFirebaseLogin';