Improvements (#21)

* feat: disable message sending if sender is deceased * fix: remove extra arrow from sizePerPage change button * feat: add edit character gm_notes * chore: remove placeholder for add gm notes during the game * feat: add edit artifact gm_notes --------- Co-authored-by: Nico Hagelberg <[email protected]>
OdysseusLarp · Jun 22, 2024 · 6d84038 · 6d84038
1 parent ad61d91
commit 6d84038
Show file tree

Hide file tree

Showing 13 changed files with 590 additions and 390 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/api/artifact.js b/src/api/artifact.js
@@ -0,0 +1,18 @@
+import { apiUrl } from "../api";
+
+export async function updateArtifactGmNotes(artifactId, gmNote) {
+  const requestBody = {
+    id: artifactId,
+    gm_notes: gmNote?.trim() ?? null,
+  };
+
+  const response = await fetch(apiUrl("/science/artifact"), {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(requestBody),
+  });
+
+  return response;
+}
diff --git a/src/api/character.js b/src/api/character.js
@@ -0,0 +1,17 @@
+import { apiUrl } from "../api";
+
+export async function updateCharacterGmNotes(personId, gmNotes) {
+  const requestBody = {
+    gm_notes: gmNotes?.trim() ?? null,
+  };
+
+  const response = await fetch(apiUrl("/person/" + personId), {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(requestBody),
+  });
+
+  return response;
+}
diff --git a/src/components/Artifact.css b/src/components/Artifact.css
@@ -35,3 +35,22 @@ h1.artifact {
 .artifact li::marker {
     vertical-align: top;
 }
+
+.artifact .edit-btn {
+    border-color: var(--gray-border-color);
+    padding: 4px 6px 4px 6px;
+    margin-left: 15px;
+}
+
+.artifact .float-char-btn > svg {
+    color: var(--artifact-color);
+}
+
+.artifact .float-char-btn:hover {
+    background-color:#dcdbdb;
+    border-color: var(--gray-border-color);
+}
+
+.artifact .float-char-btn:focus {
+    box-shadow: 0 0 0 .2rem var(--gray-border-color);
+}
diff --git a/src/components/Artifact.js b/src/components/Artifact.js
@@ -5,10 +5,14 @@ import { Link } from "react-router-dom";
 import { apiGetRequest } from "../api";
 import TableLoading from "./TableLoading";
 import useSWR from "swr";
+import { Button } from "react-bootstrap";
+import { BiPencil } from "react-icons/bi";
+import EditArtifactModal from "./modals/EditArtifactModal";
 
 import './Artifact.css';
 
 export default function Artifact(props) {
+  const [showArtifactEdit, setShowArtifactEdit] = React.useState(false);
   const params = useParams();
 
   const swrArtifact = useSWR(
@@ -21,7 +25,7 @@ export default function Artifact(props) {
     apiGetRequest,
   );
 
-  const swrPerson = useSWR(() => 
+  const swrPerson = useSWR(() =>
     "/person/search/" + swrArtifact.data.discovered_by,
     apiGetRequest,
   );
@@ -38,114 +42,101 @@ export default function Artifact(props) {
 
   const renderArtifact = () => {
     if (!artifact || !artifactDetails) return null;
-    
+
 
     const artifact_entries = artifact.entries.map((e) => e.entry.split('\n')).flat();
     const artifact_notes = artifact.gm_notes ? artifact.gm_notes.split('\n') : [];
     const test_result_none = "No significant findings were discovered."
 
     return (
-      <div className='artifact'>
-        <Container fluid className='artifact'>
-          <Row className='row-mini-header'>
-            <Col sm><span className='mini-header'>Basic Info</span></Col>
-          </Row>
-          <Row>
-            <Col sm={4}><span className='caption'>Name: </span>{artifact.name}</Col>
-            <Col sm={4}><span className='caption'>ID: </span>{artifact.id}</Col>
-          </Row>
-          <Row>
-            <Col sm={4}><span className='caption'>Origin: </span>{artifact.type ?? '-'}</Col>
-            <Col sm={4}><span className='caption'>Catalog ID: </span>{artifact.catalog_id}</Col>
-          </Row>
-          <Row>
-            <Col sm={4}><span className='caption'>Visible on DataHub: </span>{artifact.is_visible ? "Yes" : "No"}</Col>
-          </Row>
-          <Row className='row-mini-header'>
-            <Col sm><span className='mini-header'>Discovery</span></Col>
-          </Row>
-          <Row>
-            <Col sm><span className='caption'>Discovered At: </span>{artifact.discovered_at ?? '-'}</Col>
-          </Row>
-          <Row>
-            <Col sm><span className='caption'>Discovered By: </span>{artifact.discovered_by ? <span className='characters'><Link onClick={() => props.changeTab('Characters')} to={`/characters/${discoveredById}`}>{artifact.discovered_by}</Link></span> : '-'}</Col>
-          </Row>
-          <Row>
-            <Col sm><span className='caption'>Discovered From: </span>{artifact.discovered_from ?? '-'}</Col>
-          </Row>
-          <Row className='row-mini-header'>
-            <Col sm><span className='mini-header'>Artifact Description</span></Col>
-          </Row>
-          <Row>
-            <Col sm><span className='description'>{artifact.text ? artifact.text.split('![]')[0].trim() : 'No description available'}</span></Col>
-          </Row>
-          <Row className='row-mini-header'>
-            <Col sm={4}><span className='mini-header'>Plots</span>
-              {artifactDetails.plots.length < 1 ? <ul><li>No linked plots</li></ul> : <ul> {artifactDetails.plots.map(p => <li key={p.id}>
-                <span className='plots'><Link onClick={() => props.changeTab('Plots')} to={`/plots/${p.id}`}>{p.name}</Link></span></li>)}
-              </ul>}
-            </Col>
-            <Col sm><span className='mini-header'>Events</span>
-              {artifactDetails.events.length < 1 ? <ul><li>No linked events</li></ul> : <ul> {artifactDetails.events.map(e => <li key={e.id}>
-                <span className='events'><Link onClick={() => props.changeTab('Events')} to={`/events/${e.id}`}>{e.name}</Link></span></li>)}
-              </ul>}
-            </Col>
-          </Row>
-          <Row>
-            <Col sm><span className='mini-header'>Test Results</span></Col>
-          </Row>
-          <Row>
-            <Col sm><p><span className='caption'>Age: </span>{artifact.test_age ? artifact.test_age : test_result_none}</p></Col>
-          </Row>
-          <Row>
-            <Col sm><p><span className='caption test'>History: </span><span className="description">{artifact.test_history ? artifact.test_history : test_result_none}</span></p></Col>
-          </Row>
-          <Row>
-            <Col sm><p><span className='caption test'>Material: </span><span className="description">{artifact.test_material ? artifact.test_material : test_result_none}</span></p></Col>
-          </Row>
-          <Row>
-            <Col sm><p><span className='caption test'>Microscope: </span><span className="description">{artifact.test_microscope ? artifact.test_microscope : test_result_none}</span></p></Col>
-          </Row>
-          <Row>
-            <Col sm><p><span className='caption'>X-ray fluorecense: </span><span className="description">{artifact.test_xrf ? artifact.test_xrf : test_result_none}</span></p></Col>
-          </Row>
-          <Row>
-            <Col sm><span className='mini-header'>GM Notes</span></Col>
-          </Row>
-          <span className='description'> {artifact_notes.length < 1 ? <ul><li>No notes</li></ul> :
-            <ul>{artifact_notes.map(n => <li key={n}>{n}</li>)}</ul>}</span>
-          <Row>
-            <Col sm><span className='mini-header new'>GM Notes During the Runs [ADD NOTE BUTTON] [HIDE PREVIOUS RUNS CHECKBOX]</span></Col>
-          </Row>
-          <ul><li><Row>
-            <Col sm><span>Timestamp: Note 6</span></Col>
-          </Row></li>
-            <li><Row>
-              <Col sm><span>Timestamp: Note 5</span></Col>
-            </Row></li>
-            <li><Row>
-              <Col sm><span>Timestamp: Note 4</span></Col>
-            </Row></li>
-            <li><Row>
-              <Col sm><span>Timestamp: Note 3</span></Col>
-            </Row></li>
-            <li><Row>
-              <Col sm><span>Timestamp: Note 2</span></Col>
-            </Row></li>
-            <li><Row>
-              <Col sm><span>Timestamp: Note 1</span></Col>
-            </Row></li>
-          </ul>
-          <Row>
-            <Col sm><p className='new'>Save the notes between games!</p></Col>
-          </Row>
-          <Row>
-            <Col sm><span className='mini-header'>Artifact Entries</span></Col>
-          </Row>
-          {artifact_entries.length < 1 ? <ul><li>No entries</li></ul> : <ul>
-            {artifact_entries.map(e => e ? <span className="description"><li key={e}>{e}</li></span> : null)}
-          </ul>}
-        </Container>
+      <div>
+        <div className='artifact'>
+          <Container fluid className='artifact'>
+            <Row className='row-mini-header'>
+              <Col sm><span className='mini-header'>Basic Info</span></Col>
+            </Row>
+            <Row>
+              <Col sm={4}><span className='caption'>Name: </span>{artifact.name}</Col>
+              <Col sm={4}><span className='caption'>ID: </span>{artifact.id}</Col>
+            </Row>
+            <Row>
+              <Col sm={4}><span className='caption'>Origin: </span>{artifact.type ?? '-'}</Col>
+              <Col sm={4}><span className='caption'>Catalog ID: </span>{artifact.catalog_id}</Col>
+            </Row>
+            <Row>
+              <Col sm={4}><span className='caption'>Visible on DataHub: </span>{artifact.is_visible ? "Yes" : "No"}</Col>
+            </Row>
+            <Row className='row-mini-header'>
+              <Col sm><span className='mini-header'>Discovery</span></Col>
+            </Row>
+            <Row>
+              <Col sm><span className='caption'>Discovered At: </span>{artifact.discovered_at ?? '-'}</Col>
+            </Row>
+            <Row>
+              <Col sm><span className='caption'>Discovered By: </span>{artifact.discovered_by ? <span className='characters'><Link onClick={() => props.changeTab('Characters')} to={`/characters/${discoveredById}`}>{artifact.discovered_by}</Link></span> : '-'}</Col>
+            </Row>
+            <Row>
+              <Col sm><span className='caption'>Discovered From: </span>{artifact.discovered_from ?? '-'}</Col>
+            </Row>
+            <Row className='row-mini-header'>
+              <Col sm><span className='mini-header'>Artifact Description</span></Col>
+            </Row>
+            <Row>
+              <Col sm><span className='description'>{artifact.text ? artifact.text.split('![]')[0].trim() : 'No description available'}</span></Col>
+            </Row>
+            <Row className='row-mini-header'>
+              <Col sm={4}><span className='mini-header'>Plots</span>
+                {artifactDetails.plots.length < 1 ? <ul><li>No linked plots</li></ul> : <ul> {artifactDetails.plots.map(p => <li key={p.id}>
+                  <span className='plots'><Link onClick={() => props.changeTab('Plots')} to={`/plots/${p.id}`}>{p.name}</Link></span></li>)}
+                </ul>}
+              </Col>
+              <Col sm><span className='mini-header'>Events</span>
+                {artifactDetails.events.length < 1 ? <ul><li>No linked events</li></ul> : <ul> {artifactDetails.events.map(e => <li key={e.id}>
+                  <span className='events'><Link onClick={() => props.changeTab('Events')} to={`/events/${e.id}`}>{e.name}</Link></span></li>)}
+                </ul>}
+              </Col>
+            </Row>
+            <Row>
+              <Col sm><span className='mini-header'>Test Results</span></Col>
+            </Row>
+            <Row>
+              <Col sm><p><span className='caption'>Age: </span>{artifact.test_age ? artifact.test_age : test_result_none}</p></Col>
+            </Row>
+            <Row>
+              <Col sm><p><span className='caption test'>History: </span><span className="description">{artifact.test_history ? artifact.test_history : test_result_none}</span></p></Col>
+            </Row>
+            <Row>
+              <Col sm><p><span className='caption test'>Material: </span><span className="description">{artifact.test_material ? artifact.test_material : test_result_none}</span></p></Col>
+            </Row>
+            <Row>
+              <Col sm><p><span className='caption test'>Microscope: </span><span className="description">{artifact.test_microscope ? artifact.test_microscope : test_result_none}</span></p></Col>
+            </Row>
+            <Row>
+              <Col sm><p><span className='caption'>X-ray fluorecense: </span><span className="description">{artifact.test_xrf ? artifact.test_xrf : test_result_none}</span></p></Col>
+            </Row>
+            <Row>
+              <Col sm>
+                <span className='mini-header'>GM Notes
+                  <Button className="float-char-btn edit-btn" title="Edit GM Note" variant="outline-secondary" size="sm" onClick={() => setShowArtifactEdit(true)} ><BiPencil size="18px" /></Button>
+                </span>
+              </Col>
+            </Row>
+            <span className='description'> {artifact_notes.length < 1 ? <ul><li>No notes</li></ul> :
+              <ul>{artifact_notes.map(n => <li key={n}>{n}</li>)}</ul>}</span>
+            <Row>
+              <Col sm><span className='mini-header'>Artifact Entries</span></Col>
+            </Row>
+            {artifact_entries.length < 1 ? <ul><li>No entries</li></ul> : <ul>
+              {artifact_entries.map(e => e ? <span className="description"><li key={e}>{e}</li></span> : null)}
+            </ul>}
+          </Container>
+        </div>
+        <EditArtifactModal
+          characterToEdit={artifact}
+          showModal={showArtifactEdit}
+          handleClose={() => setShowArtifactEdit(false)}
+          onEditDone={swrArtifact.mutate}
+        />
       </div>
     )
   }

diff --git a/src/components/Character.css b/src/components/Character.css
@@ -33,4 +33,27 @@ h1.character {
     white-space: pre-line;
     max-width: 150ch;
     display: inline-block;
+}
+
+span.caret {
+    display: none;
+}
+
+.character .edit-btn {
+    border-color: var(--gray-border-color);
+    padding: 4px 6px 4px 6px;
+    margin-left: 15px;
+}
+
+.character .float-char-btn > svg {
+    color: var(--character-color);
+}
+
+.character .float-char-btn:hover {
+    background-color:#dcdbdb;
+    border-color: var(--gray-border-color);
+}
+
+.character .float-char-btn:focus {
+    box-shadow: 0 0 0 .2rem var(--gray-border-color);
 }