From 541337cabc58cf9ba6e1801e1e141b278b579750 Mon Sep 17 00:00:00 2001
From: Jeremy Zongker <jeremy@zongker.net>
Date: Thu, 9 Jan 2025 18:18:02 -0600
Subject: [PATCH] Added display labels

---
 public/locales/en.json                 | 1 +
 src/groups/GroupsPage.tsx              | 5 +++--
 src/groups/components/GroupDetails.tsx | 3 ++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/public/locales/en.json b/public/locales/en.json
index 8f15ea3..f65484e 100644
--- 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
index 260db7b..43df189 100644
--- 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
index 448293c..1202389 100644
--- 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} />