Merge pull request #99 from yrjarv/dev-reset-input-fields

X-button in some input fields

Author: pvk05

app/(pages)/(main)/volunteering/logs/voucherLogInput.js

@@ -2,6 +2,7 @@
 import { Box, Button, Grid, Skeleton, Stack, TextField, Typography } from "@mui/material";
 import { useState } from "react";
 import CustomNumberInput from "@/app/components/input/CustomNumberInput";
+import TextFieldWithX from "@/app/components/input/TextFieldWithX";
 
 export default function voucherLogInput(
   session,
@@ -132,12 +133,14 @@ export default function voucherLogInput(
           check={(data) => data.match(/[^0-9]/)}
           error={numVouchersError}
         />
-        <TextField
+        <TextFieldWithX
           label="Description"
+          name="voucherdescription"
+          value={descriptionVoucher}
+          setValue={setDescriptionVoucher}
           size="small"
           multiline
           InputLabelProps={{ shrink: true }}
-          value={descriptionVoucher}
           error={descriptionVoucherError}
           onChange={(e) => setDescriptionVoucher(e.target.value)}
         />

app/(pages)/(main)/volunteering/logs/workLogInput.js

@@ -7,6 +7,7 @@ import CustomAutoComplete from "@/app/components/input/CustomAutocomplete";
 import CustomNumberInput from "@/app/components/input/CustomNumberInput";
 import locale from "date-fns/locale/en-GB";
 import { CalendarToday, PunchClock } from "@mui/icons-material";
+import TextFieldWithX from "@/app/components/input/TextFieldWithX";
 
 export default function workLogInput(
   session,
@@ -177,12 +178,14 @@ export default function workLogInput(
             </Fab>
           </Tooltip>
         </Stack>
-        <TextField
+        <TextFieldWithX
           label="Description"
+          name="worklogdescription"
+          value={description}
+          setValue={setDescription}
           size="small"
           multiline
           InputLabelProps={{ shrink: true }}
-          value={description}
           onChange={(e) => setDescription(e.target.value)}
           error={descriptionError}
         />

app/(pages)/(main)/volunteering/membership/page.js

@@ -16,6 +16,7 @@ import authWrapper from "@/app/middleware/authWrapper";
 import { format, parseISO } from "date-fns";
 import { useSession } from "next-auth/react";
 import { useEffect, useState } from "react";
+import TextFieldWithX from "@/app/components/input/TextFieldWithX";
 
 const MEMBERSHIP_TABLE_HEADERS = [
   {
@@ -125,23 +126,17 @@ function MembershipPage() {
             <Card elevation={3}>
               <CardContent>
                 <Stack direction="column" spacing={2}>
-                  <TextField
-                    variant="outlined"
-                    size="small"
+                  <TextFieldWithX
                     label="new member"
-                    fullWidth
-                    InputLabelProps={{ shrink: true }}
+                    name="membername"
                     value={newMemberName}
-                    onChange={(e) => setNewMemberName(e.target.value)}
+                    setValue={setNewMemberName}
                   />
-                  <TextField
-                    variant="outlined"
-                    size="small"
+                  <TextFieldWithX
                     label="comment"
-                    fullWidth
-                    InputLabelProps={{ shrink: true }}
+                    name="membercomment"
                     value={newMemberComment}
-                    onChange={(e) => setNewMemberComment(e.target.value)}
+                    setValue={setNewMemberComment}
                   />
                   <Button
                     fullWidth

app/components/CustomTable.js

@@ -26,6 +26,7 @@ import CustomAutoComplete from "./input/CustomAutocomplete";
 import { DateTimePicker, LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFnsV3";
 import locale from "date-fns/locale/en-GB";
+import TextFieldWithX from "./input/TextFieldWithX";
 
 // Styled table component
 const TableStyle = styled(Table)(({ theme }) => ({
@@ -180,14 +181,12 @@ function CustomTable({ headers, data, defaultFilterBy=null }) {
   }
 
   let searchComponent = (
-    <TextField
+    <TextFieldWithX
       label="Search string"
-      size="small"
-      fullWidth
-      onKeyDown={(e) => (e.key === "Enter" ? setRefresh(!refresh) : null)}
-      InputLabelProps={{ shrink: true }}
+      name="searchString"
       value={searchString}
-      onChange={(e) => setSearchString(e.target.value)}
+      setValue={setSearchString}
+      onKeyDown={(e) => (e.key === "Enter" ? setRefresh(!refresh) : null)}
     />
   );
 

app/components/input/TextFieldWithX.js

@@ -0,0 +1,44 @@
+import {
+    TextField,
+    InputAdornment,
+    Tooltip,
+} from "@mui/material";
+import { Component } from "react";
+
+export default class TextFieldWithX extends Component {
+  render() {
+    const { label, name, value, setValue} = this.props;
+
+    return (
+      <TextField
+        variant="outlined"
+        size="small"
+        label={label}
+        name={name}
+        fullWidth
+        InputLabelProps={{ shrink: true }}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        InputProps={{
+          endAdornment: (
+            <Tooltip title="Clear">
+              <InputAdornment
+                  position="end"
+                  onClick={() => {
+                    setValue("");
+                    document.querySelector(`[name="${name}"]`).focus();
+                  }}
+                sx={{
+                  cursor: 'pointer',
+                  padding: 1.5,
+                  margin: -1.5,
+                }}
+              >✗</InputAdornment>
+            </Tooltip>
+          ),
+        }}
+        {...this.props}
+        />
+    );
+  }
+}