Added volunteer signup

Author: jzongker

package-lock.json

@@ -11,7 +11,7 @@
     "@churchapps/apphelper-markdown": "0.6.15",
     "@churchapps/apphelper-website": "0.6.17",
     "@churchapps/content-providers": "0.1.0",
-    "@churchapps/helpers": "1.2.27",
+    "@churchapps/helpers": "1.2.28",
     "@mui/icons-material": "^7.1.2",
     "@mui/material": "^7.1.2",
     "@react-google-maps/api": "^2.20.0",

package.json

@@ -97,6 +97,8 @@ export interface PlanInterface {
   providerId?: string;
   providerPlanId?: string;
   providerPlanName?: string;
+  signupDeadlineHours?: number;
+  showVolunteerNames?: boolean;
 }
 
 export interface ProgramInterface {

src/helpers/Interfaces.ts

@@ -44,6 +44,7 @@ export const PlanEdit = (props: Props) => {
       case "name": p.name = value; break;
       case "serviceDate": p.serviceDate = DateHelper.toDate(value); break;
       case "planTypeId": p.planTypeId = value; break;
+      case "signupDeadlineHours": p.signupDeadlineHours = value ? parseInt(value) : undefined; break;
       case "copyMode":
         setCopyMode(value);
         return; // Don't update plan state
@@ -136,6 +137,12 @@ export const PlanEdit = (props: Props) => {
             <FormControlLabel control={<Checkbox checked={copyServiceOrder} onChange={(e) => setCopyServiceOrder(e.target.checked)} />} label={Locale.label("plans.planEdit.copyServiceOrder") || "Copy Order of Service"} />
           </>
         )}
+        {plan.id && (
+          <>
+            <TextField fullWidth label="Signup Deadline (hours before service)" id="signupDeadlineHours" name="signupDeadlineHours" type="number" value={plan.signupDeadlineHours || ""} onChange={handleChange} helperText="Leave blank for no deadline" />
+            <FormControlLabel control={<Checkbox checked={plan.showVolunteerNames !== false} onChange={(e) => setPlan({ ...plan, showVolunteerNames: e.target.checked })} />} label="Show volunteer names on signup page" />
+          </>
+        )}
       </InputBox>
     </>
   );

src/serving/components/PlanEdit.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { FormControl, InputLabel, MenuItem, Select, TextField, type SelectChangeEvent } from "@mui/material";
+import { Checkbox, FormControl, FormControlLabel, InputLabel, MenuItem, Select, TextField, type SelectChangeEvent } from "@mui/material";
 import { type GroupInterface, type PositionInterface } from "@churchapps/helpers";
 import { ApiHelper, ErrorMessages, InputBox, Locale } from "@churchapps/apphelper";
 import ReactSelect from "react-select";
@@ -34,6 +34,7 @@ export const PositionEdit = (props: Props) => {
       case "name": p.name = value; break;
       case "count": p.count = parseInt(value); break;
       case "groupId": p.groupId = value; break;
+      case "description": p.description = value; break;
     }
     setPosition(p);
   };
@@ -131,6 +132,11 @@ export const PositionEdit = (props: Props) => {
             {getGroupOptions()}
           </Select>
         </FormControl>
+        <FormControlLabel
+          control={<Checkbox checked={position.allowSelfSignup || false} onChange={(e) => setPosition({ ...position, allowSelfSignup: e.target.checked })} />}
+          label="Allow Self-Signup"
+        />
+        <TextField fullWidth label="Description" id="description" name="description" type="text" multiline rows={2} value={position.description || ""} onChange={handleChange} helperText="Shown to volunteers when browsing signup opportunities" />
       </InputBox>
     </>
   );

src/serving/components/PositionEdit.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Badge, Table, TableBody, TableCell, TableHead, TableRow, Avatar, useTheme } from "@mui/material";
+import { Badge, Chip, Table, TableBody, TableCell, TableHead, TableRow, Avatar, useTheme } from "@mui/material";
 import {
   type AssignmentInterface,
   type GroupInterface,
@@ -120,6 +120,7 @@ export const PositionList = (props: Props) => {
               {group && <span style={{ color: "#999", marginLeft: "8px" }}>({group.name})</span>}
             </span>
           )}
+          {position.allowSelfSignup && <Chip label={assignments.length + "/" + position.count + " signup"} size="small" color="info" variant="outlined" sx={{ ml: 1, fontSize: "0.6875rem" }} />}
         </TableCell>
         <TableCell style={{ paddingTop: hasPeople ? 2 : 10, paddingBottom: hasPeople ? 2 : 10, verticalAlign: "top" }}>{getPeopleLinks(position)}</TableCell>
       </TableRow>

src/serving/components/PositionList.tsx

@@ -266,6 +266,7 @@ export function AppEdit({ currentTab: currentTabFromProps, updatedFunction = ()
                   <MenuItem value="directory">{Locale.label("settings.appEdit.memberDirectory")}</MenuItem>
                   <MenuItem value="groups">{Locale.label("settings.appEdit.myGroups")}</MenuItem>
                   <MenuItem value="lessons">{Locale.label("settings.appEdit.lessons")}</MenuItem>
+                  <MenuItem value="volunteer">Volunteer Opportunities</MenuItem>
                   <MenuItem value="url">{Locale.label("settings.appEdit.externalUrl")}</MenuItem>
                   <MenuItem value="page">{Locale.label("settings.appEdit.internalPage")}</MenuItem>
                 </Select>

src/settings/components/AppEdit.tsx

@@ -275,10 +275,10 @@
   resolved "https://registry.npmjs.org/@churchapps/content-providers/-/content-providers-0.1.0.tgz"
   integrity sha512-RN05pODnkYZtoD1JdEfFe88y/uZU38G00k/jqX4WLlsOmHIWEk3dbjRWg3bNPn7yli5wAERUlLjDfxS5x5X0oA==
 
-"@churchapps/helpers@^1.2.4", "@churchapps/helpers@^1.2.5", "@churchapps/helpers@1.2.27":
-  version "1.2.27"
-  resolved "https://registry.npmjs.org/@churchapps/helpers/-/helpers-1.2.27.tgz"
-  integrity sha512-j3MVG/MpX+i9foZW8UIsmDdyJPne1yzKLJai48vw+UCIm7hNJiS7VsjRtTelOElEJKHU9PPKeG39q7XnlrCMGw==
+"@churchapps/helpers@^1.2.4", "@churchapps/helpers@^1.2.5", "@churchapps/helpers@1.2.28":
+  version "1.2.28"
+  resolved "https://registry.npmjs.org/@churchapps/helpers/-/helpers-1.2.28.tgz"
+  integrity sha512-bNJGF9P8gMpx0i6DGBCeV6W8B1rCM2ps09ux0x7tooWoTmDdpNKPu5cHmEcpduOyahwtO1SsCxu8yZ8jHHN8pw==
   dependencies:
     dayjs "^1.11.18"