Improve usability (#19)

* feat: add column toggle * chore: sort drop down lists * chore: change layout for better usability * chore: make function for sortCaret
OdysseusLarp · May 28, 2024 · b3e2efa · b3e2efa
1 parent 779e15d
commit b3e2efa
Show file tree

Hide file tree

Showing 23 changed files with 618 additions and 338 deletions.
diff --git a/.devcontainer/postCreateCommand.sh b/.devcontainer/postCreateCommand.sh
@@ -3,6 +3,9 @@
 # Fix volume permissions
 sudo chown -R $USER: node_modules
 
+# Add git config
+git config --global --add safe.directory /workspaces/odysseus-admin-story-tool
+
 # Install dependencies
 npm install --legacy-peer-deps
 npm start
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "react-bootstrap-table-next": "^4.0.3",
     "react-bootstrap-table2-filter": "^1.3.3",
     "react-bootstrap-table2-paginator": "^2.1.2",
+    "react-bootstrap-table2-toolkit": "^2.1.3",
     "react-calendar-timeline": "^0.27.0",
     "react-dom": "^17.0.2",
     "react-hot-toast": "^2.4.1",

diff --git a/src/App.js b/src/App.js
@@ -65,16 +65,16 @@ function App() {
         <span>Admin Story DB: </span>
         <span className={`title-tab ${key}`}>{key}</span>
         <ButtonGroup>
-          <Button size="sm" className="float-char-btn" title="Toggle Dark Mode" variant="outline-secondary" onClick={() => setIsDarkMode(!isDarkMode)}>{isDarkMode ? "🌞 Light mode" : "🌚 Dark mode"}</Button>
+          <Button size="md" className="float-char-btn" title="Toggle Dark Mode" variant="outline-secondary" onClick={() => setIsDarkMode(!isDarkMode)}>{isDarkMode ? "🌞 Light mode" : "🌚 Dark mode"}</Button>
           <Button size="md" className="float-char-btn" title="Create New Plot" variant="outline-secondary" onClick={null}><TbMessagePlus className="plot-button" size="24px"/><span>New plot</span></Button>
           <Button size="md" className="float-char-btn" title="Create New Event" variant="outline-secondary" onClick={null}><LuCalendarPlus className="event-button" size="24px"/><span>New event</span></Button>
           <Button size="md" className="float-char-btn" title="Create New Message" variant="outline-secondary" onClick={() => setShowMessageNew(true)}><LuMailPlus className="message-button" size="24px"/><span>New message</span></Button>
         </ButtonGroup>
       </h1>
       <CreateNewMessageModal
-          showMessageNew={showMessageNew}
-          handleClose={() => setShowMessageNew(false)}
-        />
+        showMessageNew={showMessageNew}
+        handleClose={() => setShowMessageNew(false)}
+      />
       <Tabs id="tabs" activeKey={key} onSelect={onSelectTab} className="mb-3">
         <Tab eventKey="Characters" title="Characters" />
         <Tab eventKey="Fleet" title="Fleet" />
@@ -88,13 +88,13 @@ function App() {
         <Route path="/fleet/:id" element={<Ship changeTab={changeTab} />} />
         <Route path="/characters" element={<Characters changeTab={changeTab} />} />
         <Route path="/characters/:id" element={<Character changeTab={changeTab} />} />
-        <Route path="/artifacts" element={<Artifacts />} />
+        <Route path="/artifacts" element={<Artifacts changeTab={changeTab}/>} />
         <Route path="/artifacts/:id" element={<Artifact changeTab={changeTab} />} />
-        <Route path="/plots" element={<Plots />} />
+        <Route path="/plots" element={<Plots changeTab={changeTab}/>} />
         <Route path="/plots/:id" element={<Plot changeTab={changeTab} />} />
-        <Route path="/events" element={<Events />} />
+        <Route path="/events" element={<Events changeTab={changeTab}/>} />
         <Route path="/events/:id" element={<Event changeTab={changeTab} />} />
-        <Route path="/messages" element={<Messages />} />
+        <Route path="/messages" element={<Messages changeTab={changeTab}/>} />
         <Route path="/messages/:id" element={<Message changeTab={changeTab} />} />
         <Route path="*" element={<></>} />
       </Routes>

diff --git a/src/components/Artifact.css b/src/components/Artifact.css
@@ -9,6 +9,7 @@ h1.artifact {
 
 .artifact .caption{
     font-weight: bold;
+    vertical-align: top;
 }
 
 .artifact .row-mini-header {
@@ -30,3 +31,7 @@ h1.artifact {
     max-width: 150ch;
     display: inline-block;
 }
+
+.artifact li::marker {
+    vertical-align: top;
+}
diff --git a/src/components/Artifact.js b/src/components/Artifact.js
@@ -55,6 +55,7 @@ export default function Artifact(props) {
 
     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'>
@@ -91,11 +92,6 @@ export default function Artifact(props) {
           <Row>
             <Col sm><span className='description'>{artifact.text.split('![]')[0]}</span></Col>
           </Row>
-          <Row className='row-mini-header'>
-            <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={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}>
@@ -108,6 +104,29 @@ export default function Artifact(props) {
               </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>
@@ -137,7 +156,7 @@ export default function Artifact(props) {
             <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 => <li key={e}><Row><Col sm>{e}</Col></Row></li>)}
+            {artifact_entries.map(e => e ? <span className="description"><li key={e}>{e}</li></span> : null)}
           </ul>}
         </Container>
       </div>

diff --git a/src/components/Artifacts.js b/src/components/Artifacts.js
@@ -22,76 +22,75 @@ export default function Artifacts() {
   if (isLoading) return <TableLoading />;
   if (error) return <div>Failed to load data</div>;
 
-  function getRowIndex(cell, row, rowIndex) {
-    return (page-1) * sizePerPage + rowIndex + 1;
-  }
-
   const originSelectOptions = toSelectOptions(artifacts, 'type');
-
   const selectOptions = {
-    true: 'Yes',
-    false: 'No'
+    false: 'No',
+    true: 'Yes'
   };
-
+
+  function getRowIndex(cell, row, rowIndex) {
+    return (page - 1) * sizePerPage + rowIndex + 1;
+  }
+
   const columns = [{
-      dataField: '_row_index_placeholder',
-      text: 'Row',
-      formatter: getRowIndex,
-      headerStyle: () => {
-        return { width: '50px', textAlign: 'center' };
-      },
-      align: 'center'
-    }, {
-      dataField: 'catalog_id',
-      text: 'Catalog ID',
-      sort: true,
-      filter: textFilter(),
-      formatter: (cell, row) => {
-        return <Link to={`/artifacts/${row.id}`}>{cell}</Link>
-      }
-    }, {
-      dataField: 'name',
-      text: 'Name',
-      sort: true,
-      filter: textFilter(),
-      headerStyle: () => {
-        return { width: '17%', textAlign: 'left' };
-      },
-    }, {
-      dataField: 'type',
-      text: 'Origin',
-      sort: true,
-      filter: selectFilter({
-        options: originSelectOptions
-      }),
-    }, {
-      dataField: 'discovered_at',
-      text: 'Discovered At',
-      sort: true,
-      filter: textFilter()
-    }, {
-      dataField: 'discovered_by',
-      text: 'Discovered By',
-      sort: true,
-      filter: textFilter()
-    }, {
-      dataField: 'discovered_from',
-      text: 'Discovered From',
-      sort: true,
-      filter: textFilter()
-    }, {
-      dataField: 'is_visible',
-      text: 'Visible',
-      sort: true,
-      formatter: cell => selectOptions[cell],
-      filter: selectFilter({
-        options: selectOptions
-      })
+    dataField: '_row_index_placeholder',
+    text: 'Row',
+    formatter: getRowIndex,
+    headerStyle: () => {
+      return { width: '50px', textAlign: 'center' }
+    },
+    align: 'center'
+  }, {
+    dataField: 'catalog_id',
+    text: 'Catalog ID',
+    sort: true,
+    filter: textFilter(),
+    formatter: (cell, row) => {
+      return <Link to={`/artifacts/${row.id}`}>{cell}</Link>
+    }
+  }, {
+    dataField: 'name',
+    text: 'Name',
+    sort: true,
+    filter: textFilter(),
+    headerStyle: () => {
+      return { width: '17%', textAlign: 'left' }
+    },
+  }, {
+    dataField: 'type',
+    text: 'Origin',
+    sort: true,
+    filter: selectFilter({
+      options: originSelectOptions
+    }),
+  }, {
+    dataField: 'discovered_at',
+    text: 'Discovered At',
+    sort: true,
+    filter: textFilter()
+  }, {
+    dataField: 'discovered_by',
+    text: 'Discovered By',
+    sort: true,
+    filter: textFilter()
+  }, {
+    dataField: 'discovered_from',
+    text: 'Discovered From',
+    sort: true,
+    filter: textFilter()
+  }, {
+    dataField: 'is_visible',
+    text: 'Visible',
+    sort: true,
+    formatter: cell => selectOptions[cell],
+    filter: selectFilter({
+      options: selectOptions
+    })
   }];
 
   const customTotal = (from, to, size) => (
     <span className="react-bootstrap-table-pagination-total">
-      Showing { from } to { to } of { size } Results
+      Showing {from} to {to} of {size} Results
     </span>
   );
 
@@ -111,12 +110,12 @@ export default function Artifacts() {
     lastPageTitle: 'Last page',
     showTotal: true,
     paginationTotalRenderer: customTotal,
-    onPageChange: (page, sizePerPage) => { 
-      setPage(page); 
+    onPageChange: (page, sizePerPage) => {
+      setPage(page);
       setSizePerPage(sizePerPage);
     },
-    onSizePerPageChange: (sizePerPage, page) => { 
-      setPage(page); 
+    onSizePerPageChange: (sizePerPage, page) => {
+      setPage(page);
       setSizePerPage(sizePerPage);
     },
     disablePageTitle: true,
@@ -142,11 +141,11 @@ export default function Artifacts() {
         striped
         hover
         keyField="id"
-        bordered={ false }
-        data={ artifacts }
-        columns={ columns }
-        filter={ filterFactory() }
-        pagination={ paginationFactory(options) }
+        bordered={false}
+        data={artifacts}
+        columns={columns}
+        filter={filterFactory()}
+        pagination={paginationFactory(options)}
       />
     </div>
   )