Added display labels

ChurchApps · Jan 10, 2025 · 541337c · 541337c
1 parent 066d642
commit 541337c
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
diff --git a/public/locales/en.json b/public/locales/en.json
@@ -316,6 +316,7 @@
 		"groupsPage": {
 			"cat": "Category",
 			"groups": "Groups",
+      "labels": "Labels",
 			"noGroupMsg": "No groups found. Please create a group.",
 			"pers": "1 person",
 			"ppl": "People",

diff --git a/src/groups/GroupsPage.tsx b/src/groups/GroupsPage.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { GroupAdd } from "./components";
 import { ApiHelper, DisplayBox, UserHelper, ExportLink, Loading, Locale } from "@churchapps/apphelper";
 import { Link } from "react-router-dom";
-import { Icon, Table, TableBody, TableCell, TableRow, TableHead, Stack, IconButton, Paper, Box } from "@mui/material"
+import { Icon, Table, TableBody, TableCell, TableRow, TableHead, Stack, IconButton, Paper, Box, Chip } from "@mui/material"
 import { useMountedState, GroupInterface, Permissions } from "@churchapps/apphelper";
 import { Banner } from "@churchapps/apphelper";
 
@@ -65,6 +65,7 @@ export const GroupsPage = () => {
               <Link to={"/groups/" + g.id.toString()}>{g.name}</Link>
             </Box>
           </TableCell>
+          <TableCell>{g.labelArray.map(label => (<Chip label={label} variant="outlined" size="small" style={{marginRight:5}} />))}</TableCell>
           <TableCell>{memberCount}</TableCell>
         </TableRow>
       );
@@ -76,7 +77,7 @@ export const GroupsPage = () => {
   const getTableHeader = () => {
     const rows: JSX.Element[] = [];
     if (groups.length === 0) return rows;
-    rows.push(<TableRow sx={{textAlign: "left"}} key="header"><th>{Locale.label("groups.groupsPage.cat")}</th><th>{Locale.label("common.name")}</th><th>{Locale.label("groups.groupsPage.ppl")}</th></TableRow>);
+    rows.push(<TableRow sx={{textAlign: "left"}} key="header"><th>{Locale.label("groups.groupsPage.cat")}</th><th>{Locale.label("common.name")}</th><th>{Locale.label("groups.groupsPage.labels")}</th><th>{Locale.label("groups.groupsPage.ppl")}</th></TableRow>);
     return rows;
   }
 

diff --git a/src/groups/components/GroupDetails.tsx b/src/groups/components/GroupDetails.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { GroupDetailsEdit, ServiceTimes } from ".";
 import { GroupInterface, DisplayBox, UserHelper, Permissions, Loading, Locale, MarkdownPreview } from "@churchapps/apphelper";
-import { Grid } from "@mui/material"
+import { Chip, Grid } from "@mui/material"
 
 interface Props { group: GroupInterface, updatedFunction: (group: GroupInterface) => void }
 
@@ -29,6 +29,7 @@ export const GroupDetails: React.FC<Props> = (props) => {
           <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 item md={6} xs={12}>{props.group?.labelArray.map(label => (<Chip label={label} variant="outlined" size="small" style={{marginRight:5}} />))}</Grid>
         </Grid>
         <br />
         <MarkdownPreview value={props.group?.about} />