roster level equipment selection

jaaimino · Oct 29, 2024 · e125260 · e125260
1 parent 588b86b
commit e125260
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 10 deletions.
diff --git a/src/components/equipment-cards/equipment-card.module.css b/src/components/equipment-cards/equipment-card.module.css
@@ -0,0 +1,19 @@
+.root {
+    position: relative;
+    padding: var(--mantine-spacing-md);
+    transition: border-color 150ms ease;
+
+    &[data-checked] {
+      border-color: var(--mantine-primary-color-filled);
+    }
+
+    @mixin hover {
+      @mixin light {
+        background-color: var(--mantine-color-gray-0);
+      }
+
+      @mixin dark {
+        background-color: var(--mantine-color-dark-6);
+      }
+    }
+  }
diff --git a/src/components/equipment-cards/index.js b/src/components/equipment-cards/index.js
@@ -1,8 +1,11 @@
-import { Card, SimpleGrid, Stack, Title } from "@mantine/core";
+import { Card, Checkbox, Group, SimpleGrid, Stack, Title } from "@mantine/core";
 import { convertShapes } from "../../utils/shapes";
+import classes from './equipment-card.module.css';
+import React from "react";
 
 export default function EquipmentCards(props) {
-    const { equipment: groupedEquipment } = props;
+    const { equipment: groupedEquipment, selectable = false, onSelect = () => { } } = props;
+    console.log(groupedEquipment);
     return (
         <Stack my="md">
             {Object.keys(groupedEquipment)?.map((key) => {
@@ -12,12 +15,22 @@ export default function EquipmentCards(props) {
                         <Title order={2}>{key}</Title>
                         <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
                             {equipment.map((equip) => (
-                                <Card>
-                                    <Stack>
-                                        <Title order={3}>{equip.eqname}</Title>
-                                        <div dangerouslySetInnerHTML={{ __html: `${convertShapes(equip.eqdescription)}` }} />
-                                    </Stack>
-                                </Card>
+                                <>
+                                    {selectable ? <Checkbox.Card className={classes.root} p="sm" onClick={() => onSelect(equip, !equip.selected)} checked={!!equip.selected}>
+                                        <Group wrap="nowrap" align="flex-start">
+                                            <Checkbox.Indicator />
+                                            <Stack align="flex-start">
+                                                <Title order={3}>{equip.eqname}</Title>
+                                                <div dangerouslySetInnerHTML={{ __html: `${convertShapes(equip.eqdescription)}` }} />
+                                            </Stack>
+                                        </Group>
+                                    </Checkbox.Card> : <Card className={classes.root} p="sm" onClick={() => onSelect(equip, !equip.selected)} checked={!!equip.selected}>
+                                        <Stack align="flex-start">
+                                            <Title order={3}>{equip.eqname}</Title>
+                                            <div dangerouslySetInnerHTML={{ __html: `${convertShapes(equip.eqdescription)}` }} />
+                                        </Stack>
+                                    </Card>}
+                                </>
                             ))}
                         </SimpleGrid>
                     </>

diff --git a/src/pages/dashboard/index.js b/src/pages/dashboard/index.js
@@ -22,7 +22,42 @@ export default function Dashboard() {
     const canEdit = userData?.username === roster?.username;
     const killteam = roster?.killteam;
     const isNarrativeEquipment = (equip) => equip.eqid.includes('BS-') || equip.eqid.includes('BH-');
-    const groupedEquipment = groupBy(killteam?.equipments?.filter(equip => !isNarrativeEquipment(equip)), 'eqcategory');
+    const groupedEquipment = groupBy(roster?.rostereqs?.filter(equip => !isNarrativeEquipment(equip)), 'eqcategory');
+    const handleSelectEquipment = React.useCallback((equipment, checked) => {
+        const newEq = {
+            "userid": userData.userid,
+            "rosterid": roster.rosterid,
+            "eqfactionid": equipment.factionid,
+            "eqkillteamid": equipment.killteamid,
+            "eqid": equipment.eqid
+        };
+        if (checked) {
+            api.request(`/rostereq.php`, {
+                method: "POST",
+                body: JSON.stringify(newEq)
+            }).then((data) => {
+                if (data?.eqid) {
+                    setRoster({
+                        ...roster,
+                        rostereqs: [...roster?.rostereqs?.map((eq) => eq.eqid === equipment.eqid ? ({ ...eq, selected: 1 }) : eq)]
+                    });
+                }
+            })
+        } else {
+            api.request(`/rostereq.php`, {
+                method: "DELETE",
+                body: JSON.stringify(newEq)
+            }).then((data) => {
+                if (data?.success) {
+                    setRoster({
+                        ...roster,
+                        rostereqs: [...roster?.rostereqs?.map((eq) => eq.eqid === equipment.eqid ? ({ ...eq, selected: 0 }) : eq)]
+                    });
+                }
+            })
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [roster]);
     const handleUpdateOperativeWounds = React.useCallback((operative, wounds) => {
         api.request(`/rosteropw.php?roid=${operative.rosteropid}&curW=${wounds}`, {
             method: "POST"
@@ -135,7 +170,7 @@ export default function Dashboard() {
                         <PloyCards killteam={killteam} />
                     </Tabs.Panel>
                     {killteam.edition === "kt24" && <Tabs.Panel value="equipment">
-                        <EquipmentCards equipment={groupedEquipment} />
+                        <EquipmentCards selectable onSelect={handleSelectEquipment} equipment={groupedEquipment} />
                     </Tabs.Panel>}
                     <Tabs.Panel value="tacops">
                         <TacOpCards tacops={roster.tacops} />