Added labels

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@churchapps/apphelper": "0.3.01",
+    "@churchapps/apphelper": "0.3.03",
     "@mui/icons-material": "^5.14.7",
     "@mui/material": "^5.14.7",
     "@types/react-cropper": "^1.3.2",

src/groups/components/GroupDetails.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { GroupDetailsEdit, ServiceTimes } from ".";
-import { GroupInterface, DisplayBox, UserHelper, Permissions, Loading, Locale, MarkdownPreviewLight, MarkdownPreview } from "@churchapps/apphelper";
+import { GroupInterface, DisplayBox, UserHelper, Permissions, Loading, Locale, MarkdownPreview } from "@churchapps/apphelper";
 import { Grid } from "@mui/material"
 
 interface Props { group: GroupInterface, updatedFunction: (group: GroupInterface) => void }
@@ -14,43 +14,6 @@ export const GroupDetails: React.FC<Props> = (props) => {
 
   const isStandard = props.group?.tags?.indexOf("standard") > -1;
 
-  const getTargetAndClasses = (extra: string) => {
-    let result = "";
-    const classRegex = /\.[^( |\})]+/g;
-    const matches = extra.match(classRegex)
-    if (matches && matches.length > 0) {
-      let classes = matches.join(" ");
-      classes = classes.replaceAll(".", "");
-      result = " class=\"" + classes + "\"";
-    }
-    const targetRegex = /:target="([^"]+)"/g;
-    let targets = targetRegex.exec(extra);
-    if (targets) result += " " + targets[0].replace(":", "");
-    return result;
-  }
-
-  // \[([^\]]+)\] - text
-  // \(([^)]+)\) - url
-  // \{([^\}]+)\} - target and classes
-  // \[([^\]]+)\]\(([^)]+)\)\{([^\}]+)\} - full
-  const getSpecialLinks = (markdownString: string) => {
-    if (!markdownString) return "";
-    const regex = /\[([^\]]+)\]\(([^)]+)\)\{([^\}]+)\}/g;
-    const convertedText = markdownString.replace(regex, (match, text, url, extra) => {
-      if (!match) return text;
-      let result = "<a href=\"" + url + "\"";
-      result += getTargetAndClasses(extra);
-      result += ">" + text + "</a>";
-      return result;
-    });
-    return convertedText
-  }
-
-  console.log("Group", getSpecialLinks(props.group?.about || ""));
-  console.log("Empty String", getSpecialLinks(""));
-  console.log("Null", getSpecialLinks(null));
-  console.log("Undefined", getSpecialLinks(undefined));
-  console.log("Undefined", getSpecialLinks("test"));
 
   const getRows = () => {
     if (!props.group) return <Loading />

src/groups/components/GroupDetailsEdit.tsx

@@ -5,6 +5,7 @@ import { Navigate } from "react-router-dom";
 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";
+import { GroupLabelsEdit } from "./GroupLabelsEdit";
 
 interface Props {
   group: GroupInterface;
@@ -40,6 +41,13 @@ export const GroupDetailsEdit: React.FC<Props> = (props) => {
     setGroup(g);
   };
 
+  const handleArrayChange = (val:string[]) => {
+    console.log("Array change", val)
+    let g = { ...group };
+    g.labelArray = val;
+    setGroup(g);
+  };
+
   const handlePhotoSelected = (image: string) => {
     let g = { ...group };
     g.photoUrl = image;
@@ -85,8 +93,7 @@ export const GroupDetailsEdit: React.FC<Props> = (props) => {
   const getAttendance = () => {
     if (teamMode) return (<></>);
     else return(<>
-      <hr style={{marginTop:30}} />
-      <h4>Attendance</h4>
+      <div style={{ backgroundColor:"var(--c1l2)", color:"#FFF", padding:10, marginTop:20, marginBottom:20}}><b>Attendance</b></div>
       <Grid container spacing={3}>
         <Grid item md={6} xs={12}>
           <FormControl fullWidth>
@@ -162,6 +169,7 @@ export const GroupDetailsEdit: React.FC<Props> = (props) => {
                 <Button variant="contained" onClick={() => setSelectPhotoField("photoUrl")}>{Locale.label("groups.groupDetailsEdit.selImg")}</Button>
               </Grid>
             </Grid>
+            <GroupLabelsEdit group={group} onUpdate={handleArrayChange} />
           </>
           }
           {getAttendance()}

src/groups/components/GroupLabelsEdit.tsx

@@ -0,0 +1,74 @@
+import React, { useEffect } from "react";
+import { Checkbox, FormControlLabel } from "@mui/material";
+import { ApiHelper, GroupInterface } from "@churchapps/apphelper";
+
+
+interface Props {
+  group: GroupInterface;
+  onUpdate: (array: string[]) => void;
+}
+
+export const GroupLabelsEdit: React.FC<Props> = (props) => {
+  const a = 1;
+
+  const [allLabels, setAllLabels] = React.useState<string[]>(["Small Group", "Sunday School Class"]);
+  const groupLabels = props.group?.labelArray;
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.currentTarget.name;
+    const idx = groupLabels.indexOf(val);
+    if (idx === -1) groupLabels.push(val);
+    else groupLabels.splice(idx, 1);
+    props.onUpdate(groupLabels);
+  };
+
+  const handleAdd = (e:React.MouseEvent) => {
+    e.preventDefault();
+    const newLabel = prompt("Enter a new label");
+    if (newLabel) {
+      const val = newLabel.trim();
+      if (val.length > 0) {
+        const idx = allLabels.indexOf(val);
+        if (idx === -1) {
+          allLabels.push(val);
+          setAllLabels(allLabels.sort());
+          groupLabels.push(val);
+          props.onUpdate(groupLabels);
+        }
+      }
+    }
+  };
+
+  const loadData = () => {
+    ApiHelper.get("/groups", "MembershipApi").then((groups) => {
+      const result:string[] = [];
+      groups.forEach((group: GroupInterface) => {
+        group.labelArray.forEach((label) => {
+          if (!result.includes(label)) result.push(label);
+        });
+      })
+      setAllLabels(result.sort());
+    });
+
+  };
+
+  useEffect(loadData, []);
+
+  const getLabelCheck = (key:string) => {
+    const isChecked = groupLabels.includes(key);
+    return <FormControlLabel
+      key={key}
+      control={<Checkbox name={key} checked={isChecked} onChange={handleChange} />}
+      label={key}
+    />
+  }
+
+  const getItems = () => allLabels.map((key) => getLabelCheck(key))
+
+  return <>
+    <div style={{marginTop:10}}>Labels</div>
+    {getItems()}
+    <a href="about:blank" onClick={handleAdd}>Add New Label</a>
+
+  </>
+};