add: print nametag field to groups (#297)

* add: print nametag field to groups * update groupInterface from apphelper
ChurchApps · Dec 14, 2024 · 459d27b · 459d27b
1 parent 04fe77b
commit 459d27b
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 23 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@churchapps/apphelper": "0.2.81",
+    "@churchapps/apphelper": "0.2.82",
     "@mui/icons-material": "^5.14.7",
     "@mui/material": "^5.14.7",
     "@types/react-cropper": "^1.3.2",

diff --git a/public/locales/en.json b/public/locales/en.json
@@ -261,7 +261,8 @@
 			"attTrack": "Track Attendance:",
 			"cat": "Category",
 			"groupDet": "Group Details",
-			"parPick": "Parent Pickup:"
+			"parPick": "Parent Pickup:",
+			"prinName": "Print Nametag:"
 		},
 		"groupDetailsEdit": {
 			"attTrack": "Track Attendance",
@@ -274,6 +275,7 @@
 			"groupName": "Group Name",
 			"groupNameMsg": "Please enter a group name.",
 			"parPick": "Parent Pickup",
+			"prinName": "Print Nametag",
 			"selImg": "Select Photo"
 		},
 		"groupMembers": {

diff --git a/src/groups/components/GroupDetails.tsx b/src/groups/components/GroupDetails.tsx
@@ -17,14 +17,15 @@ export const GroupDetails: React.FC<Props> = (props) => {
   const getRows = () => {
     if (!props.group) return <Loading />
     else return (<>
-      <Grid container spacing={3}>
+      <Grid container spacing={1}>
         {isStandard && <Grid item md={6} xs={12}><label>{Locale.label("groups.groupDetails.cat")}</label> {props.group.categoryName}</Grid>}
         <Grid item md={6} xs={12}><label>{Locale.label("common.name")}</label> {props.group.name}</Grid>
       </Grid>
       {isStandard && <>
-        <Grid container spacing={3}>
+        <Grid container spacing={1} marginTop="1px">
           <Grid item md={6} xs={12}><label>{Locale.label("groups.groupDetails.attTrack")}</label> {(props.group.trackAttendance?.toString().replace("false", Locale.label("common.no")).replace("true", Locale.label("common.yes")) || "")}</Grid>
           <Grid item md={6} xs={12}><label>{Locale.label("groups.groupDetails.parPick")}</label> {(props.group.parentPickup?.toString().replace("false", Locale.label("common.no")).replace("true", Locale.label("common.yes")) || "")}</Grid>
+          <Grid item md={6} xs={12}><label>{Locale.label("groups.groupDetails.prinName")}</label> {(props.group.printNametag?.toString().replace("false", Locale.label("common.no")).replace("true", Locale.label("common.yes")) || "")}</Grid>
         </Grid>
         <ServiceTimes group={props.group} />
       </>}

diff --git a/src/groups/components/GroupDetailsEdit.tsx b/src/groups/components/GroupDetailsEdit.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { ServiceTimesEdit } from ".";
 import { ApiHelper, InputBox, ErrorMessages, Locale } from "@churchapps/apphelper";
 import { Navigate } from "react-router-dom";
-import { Button, FormControl, Grid, InputLabel, MenuItem, Select, SelectChangeEvent, TextField } from "@mui/material";
+import { Button, FormControl, Grid, InputLabel, MenuItem, Select, SelectChangeEvent, Stack, TextField } from "@mui/material";
 import { useMountedState, GalleryModal, GroupInterface } from "@churchapps/apphelper";
 import { MarkdownEditor } from "@churchapps/apphelper";
 
@@ -33,6 +33,7 @@ export const GroupDetailsEdit: React.FC<Props> = (props) => {
       case "name": g.name = e.target.value; break;
       case "trackAttendance": g.trackAttendance = e.target.value === "true"; break;
       case "parentPickup": g.parentPickup = e.target.value === "true"; break;
+      case "printNametag": g.printNametag = e.target.value === "true"; break;
     }
     setGroup(g);
   };
@@ -109,13 +110,22 @@ export const GroupDetailsEdit: React.FC<Props> = (props) => {
                 </FormControl>
               </Grid>
               <Grid item md={6} xs={12}>
-                <FormControl fullWidth>
-                  <InputLabel>{Locale.label("groups.groupDetailsEdit.parPick")}</InputLabel>
-                  <Select label={Locale.label("groups.groupDetailsEdit.parPick")} name="parentPickup" value={group.parentPickup?.toString() || "false"} onChange={handleChange} onKeyDown={handleKeyDown}>
-                    <MenuItem value="false">{Locale.label("common.no")}</MenuItem>
-                    <MenuItem value="true">{Locale.label("common.yes")}</MenuItem>
-                  </Select>
-                </FormControl>
+                <Stack direction={{ xs: "column", md: "row" }}>
+                  <FormControl fullWidth>
+                    <InputLabel>{Locale.label("groups.groupDetailsEdit.parPick")}</InputLabel>
+                    <Select label={Locale.label("groups.groupDetailsEdit.parPick")} name="parentPickup" value={group.parentPickup?.toString() || "false"} onChange={handleChange} onKeyDown={handleKeyDown}>
+                      <MenuItem value="false">{Locale.label("common.no")}</MenuItem>
+                      <MenuItem value="true">{Locale.label("common.yes")}</MenuItem>
+                    </Select>
+                  </FormControl>
+                  <FormControl fullWidth sx={{ marginLeft: { md: 2 } }}>
+                    <InputLabel>{Locale.label("groups.groupDetailsEdit.prinName")}</InputLabel>
+                    <Select label={Locale.label("groups.groupDetailsEdit.prinName")} name="printNametag" value={group.printNametag?.toString() || "false"} onChange={handleChange} onKeyDown={handleKeyDown}>
+                      <MenuItem value="false">{Locale.label("common.no")}</MenuItem>
+                      <MenuItem value="true">{Locale.label("common.yes")}</MenuItem>
+                    </Select>
+                  </FormControl>
+                </Stack>
               </Grid>
             </Grid>
             <Grid container spacing={3}>