Fix tables and descriptions (#18)

* fix: fix table order and sort * chore: show darkmode button * chore: update package-lock.json * chore: fix descriptions to not go over 150 characters
OdysseusLarp · May 24, 2024 · 779e15d · 779e15d
1 parent 4165209
commit 779e15d
Show file tree

Hide file tree

Showing 18 changed files with 145 additions and 90 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/App.js b/src/App.js
@@ -65,7 +65,7 @@ function App() {
         <span>Admin Story DB: </span>
         <span className={`title-tab ${key}`}>{key}</span>
         <ButtonGroup>
-          <Button style={{ display: "none" }} size="sm" className="float-char-btn" title="Toggle Dark Mode" variant="outline-secondary" onClick={() => setIsDarkMode(!isDarkMode)}>{isDarkMode ? "🌞 Light mode" : "🌚 Dark mode"}</Button>
+          <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="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>

diff --git a/src/components/Artifact.css b/src/components/Artifact.css
@@ -24,3 +24,9 @@ h1.artifact {
 .artifact .new {
     color: #da3e00;
 }
+
+.artifact span.description {
+    white-space: pre-line;
+    max-width: 150ch;
+    display: inline-block;
+}
diff --git a/src/components/Artifact.js b/src/components/Artifact.js
@@ -88,10 +88,14 @@ export default function Artifact(props) {
           <Row className='row-mini-header'>
             <Col sm><span className='mini-header'>Artifact Description</span></Col>
           </Row>
-          <Row><Col sm><p>{artifact.text.split('![]')[0]}</p></Col></Row>
-          <Row><Col sm><span className='mini-header'>GM Notes</span></Col></Row>
-          {artifact_notes.length < 1 ? <ul><li>No notes</li></ul> :
-            <ul>{artifact_notes.map(n => <li key={n}>{n}</li>)}</ul>}
+          <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}>

diff --git a/src/components/Character.css b/src/components/Character.css
@@ -32,3 +32,9 @@ h1.character {
 .character .data-found {
     color: #f26bf7;
 }
+
+.character span.description {
+    white-space: pre-line;
+    max-width: 150ch;
+    display: inline-block;
+}
diff --git a/src/components/Character.js b/src/components/Character.js
@@ -95,6 +95,9 @@ export default function Character(props) {
             <Col sm><span className='caption'>Home planet: </span>{character.home_planet}</Col>
             <Col sm><span className='caption'>Database ID: </span>{character.id}</Col>
           </Row>
+          <Row>
+            <Col sm={8}><span className='caption'>Military Rank: </span>{character.military_rank ? character.military_rank : "-"}</Col>
+          </Row>
           <Row>
             <Col sm><span className='caption'>Shift: </span>{character.shift ? character.shift : "-"}</Col>
           </Row>
@@ -132,12 +135,15 @@ export default function Character(props) {
           <Row className='row-mini-header'>
             <Col sm ><span className='mini-header'>Summary</span></Col>
           </Row>
-          {character_summary.length < 1 ? <p>No summary</p> : <ul>{character_summary.map(n => <li key={n}><Row><Col sm>{n}</Col></Row></li>)}
-          </ul>}
+          <span className="description">{character_summary.length < 1 ? <p>No summary</p> : <ul>{character_summary.map(n => <li key={n}><Row><Col sm>{n}</Col></Row></li>)}
+          </ul>}</span>
           <Row>
-            <Col sm><span className='mini-header'>GM Notes</span>
-              {gm_notes_list.length <1 ? <ul><li>No notes</li></ul> :
-                <ul>{gm_notes_list.map(n => <li key={n}>{n}</li>)}</ul>}
+            <Col sm><span className='mini-header'>GM Notes</span></Col>
+          </Row>
+          <Row>
+            <Col sm>
+              <span className="description">{gm_notes_list.length <1 ? <ul><li>No notes</li></ul> :
+                <ul>{gm_notes_list.map(n => <li key={n}>{n}</li>)}</ul>}</span>
             </Col>
           </Row>
           <Row>
@@ -203,7 +209,7 @@ export default function Character(props) {
             <Col sm><span className='mini-header'>Other known relations</span></Col>
           </Row>
           <Row>
-          <Col sm>{relations_list.length ? <ul>{relations_list}</ul> : <ul><li>None</li></ul>}</Col>
+            <Col sm><span className="description">{relations_list.length ? <ul>{relations_list}</ul> : <ul><li>None</li></ul>}</span></Col>
           </Row>
           <Row>
             <Col sm><span className='mini-header'>Classified personal data</span></Col>

diff --git a/src/components/Characters.js b/src/components/Characters.js
@@ -44,11 +44,11 @@ export default function Characters(props) {
   const selectShip = toSelectOptions(characters.map((c) => c.ship), 'name');
 
   const columns = [{
-    dataField: '_row_index_placeholder',
-    text: 'Row',
-    formatter: getRowIndex,
+    dataField: 'id',
+    text: 'Id',
+    sort: true,
     headerStyle: () => {
-      return { width: '50px', textAlign: 'center' };
+      return { width: '60px', textAlign: 'center' };
     },
     align: 'center'
   }, {

diff --git a/src/components/Event.css b/src/components/Event.css
@@ -24,3 +24,9 @@ h1.event {
 .event a {
     color: #a52626 !important;
 }
+
+.event span.description {
+    white-space: pre-line;
+    max-width: 150ch;
+    display: inline-block;
+}
diff --git a/src/components/Event.js b/src/components/Event.js
@@ -71,15 +71,17 @@ export default function Event(props) {
           </Row>
           <Row>
             <Col sm><span className='mini-header'>Short Description</span></Col>
-            <span>{event.description}</span>
+          </Row>
+          <Row>
+            <Col><span className='description'>{event.description}</span></Col>
           </Row>
           <Row>
             <Col sm>&nbsp;</Col>
           </Row>
           <Row>
             <Col sm><span className='mini-header'>GM Notes</span></Col>
           </Row>
-          {gm_notes.length <1 ? <ul><li>No notes</li></ul> : <ul>{gm_notes.map(n => <li key={n}>{n}</li>)}</ul>}
+          <span className='description'>{gm_notes.length <1 ? <ul><li>No notes</li></ul> : <ul>{gm_notes.map(n => <li key={n}>{n}</li>)}</ul>}</span>
           <Row>
             <Col sm><span className='mini-header'>NPC needs</span></Col>
           </Row>

diff --git a/src/components/Events.js b/src/components/Events.js
@@ -22,9 +22,6 @@ export default function Events() {
   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 selectCharGroup = {
     'Bridge Crew': 'Bridge Crew',
     Civilian: 'Civilian',
@@ -45,10 +42,15 @@ export default function Events() {
   const selectSize = toSelectOptions(events, 'size');
   const selectType = toSelectOptions(events, 'type');
 
+  const defaultSorted = [{
+    dataField: 'id',
+    order: 'asc'
+  }];
+
   const columns = [{
-    dataField: '_row_index_placeholder',
-    text: 'Row',
-    formatter: getRowIndex,
+    dataField: 'id',
+    sort: true,
+    text: 'Id',
     headerStyle: () => {
       return { width: '50px', textAlign: 'center' };
     },
@@ -65,7 +67,18 @@ export default function Events() {
     dataField: 'after_jump',
     text: 'After Jump',
     sort: true,
-    filter: textFilter()
+    filter: textFilter(),
+    headerStyle: () => {
+      return { width: '7%', textAlign: 'left' };
+    },
+    sortFunc: (a, b, order, dataField, rowA, rowB) => {
+      const aValue = a === "" ? 100 : a;
+      const bValue = b === "" ? 100 : b;
+      if (order === 'asc') {
+        return bValue - aValue;
+      }
+      return aValue - bValue;
+    }
   }, {
     dataField: 'importance',
     text: 'Importance',
@@ -185,6 +198,7 @@ export default function Events() {
         columns={columns}
         filter={filterFactory()}
         pagination={paginationFactory(options)}
+        defaultSorted={defaultSorted}
       />
     </div>
   )

diff --git a/src/components/Message.css b/src/components/Message.css
@@ -25,8 +25,10 @@ h1.message {
     color: #4fa129 !important;
 }
 
-.message span {
+.message span.description {
     white-space: pre-line;
+    max-width: 150ch;
+    display: inline-block;
 }
 
 .message .float-char-btn {

diff --git a/src/components/Message.js b/src/components/Message.js
@@ -81,15 +81,15 @@ export default function Messages(props) {
               <Col sm><span className='mini-header'>Message</span></Col>
             </Row>
             <Row>
-              <Col sm><span> {message.message === "" ? "No message" : message.message } </span></Col>
+              <Col sm><span className="description"> {message.message === "" ? "No message" : message.message } </span></Col>
             </Row>
             <Row>
               <Col sm>&nbsp;</Col>
             </Row>
             <Row>
               <Col sm><span className='mini-header'>GM Notes</span></Col>
             </Row>
-            {gm_notes.length < 1 ? <ul><li>No notes</li></ul> : <ul>{gm_notes.map(e => <li key={e}>{e}</li>)}</ul>}
+            <span className="description">{gm_notes.length < 1 ? <ul><li>No notes</li></ul> : <ul>{gm_notes.map(e => <li key={e}>{e}</li>)}</ul>}</span>
             <Row>
               <Col sm>&nbsp;</Col>
             </Row>

diff --git a/src/components/Messages.js b/src/components/Messages.js
@@ -22,17 +22,18 @@ export default function Messages(props) {
   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 sentSelectOptions = toSelectOptions(messages, 'sent');
   const typeSelectOptions = toSelectOptions(messages, 'type');
 
+  const defaultSorted = [{
+    dataField: 'id',
+    order: 'asc'
+  }];
+
   const columns = [{
-      dataField: '_row_index_placeholder',
-      text: 'Row',
-      formatter: getRowIndex,
+      dataField: 'id',
+      text: 'Id',
+      sort: true,
       headerStyle: () => {
         return { width: '50px', textAlign: 'center' };
       },
@@ -48,6 +49,22 @@ export default function Messages(props) {
       formatter: (cell, row) => {
         return <Link to={`/messages/${row.id}`}>{cell}</Link>
       }
+    }, {
+      dataField: 'after_jump',
+      text: 'After Jump',
+      sort: true,
+      filter: textFilter({comparator: Comparator.EQ}),
+      headerStyle: () => {
+        return { width: '7%', textAlign: 'left' };
+      },
+      sortFunc: (a, b, order, dataField, rowA, rowB) => {
+        const aValue = a === "" ? 100 : a;
+        const bValue = b === "" ? 100 : b;
+        if (order === 'asc') {
+          return bValue - aValue;
+        }
+        return aValue - bValue;
+      }
     }, {
       dataField: 'sender.name',
       text: 'Sender',
@@ -83,22 +100,6 @@ export default function Messages(props) {
       filter: selectFilter({
         options: typeSelectOptions
       }),
-    }, {
-      dataField: 'after_jump',
-      text: 'After Jump',
-      sort: true,
-      filter: textFilter({comparator: Comparator.EQ}),
-      headerStyle: () => {
-        return { width: '10%', textAlign: 'left' };
-      },
-      sortFunc: (a, b, order, dataField, rowA, rowB) => {
-        const aValue = a === "" ? -1 : a;
-        const bValue = b === "" ? -1 : b;
-        if (order === 'asc') {
-          return bValue - aValue;
-        }
-        return aValue - bValue;
-      }
     }, {
       dataField: 'sent',
       text: 'Sent',
@@ -166,6 +167,7 @@ export default function Messages(props) {
         columns={ columns }
         filter={ filterFactory() }
         pagination={ paginationFactory(options) }
+        defaultSorted={defaultSorted}
       />
     </div>
   )

diff --git a/src/components/Plot.css b/src/components/Plot.css
@@ -27,4 +27,10 @@ h1.plot {
 
 .plot .new {
     color: #da3e00 !important; 
+}
+
+.plot span.description {
+    white-space: pre-line;
+    max-width: 150ch;
+    display: inline-block;
 }
diff --git a/src/components/Plot.js b/src/components/Plot.js
@@ -113,29 +113,25 @@ export default function Plot(props) {
               <Row>
                 <Col sm><span className='mini-header'>Short Description</span></Col>
               </Row>
-              <Row>
-                <Col sm>
-                  {plot.description}
-                </Col>
-              </Row>
+              <span className="description">{plot.description}</span>
               <Row>
                 <Col sm>&nbsp;</Col>
               </Row>
               <Row>
                 <Col sm><span className='mini-header'>GM Notes</span></Col>
               </Row>
-              {plot_notes.length <1 ? <ul><li>No notes</li></ul> : <ul>
+              <span className='description'>{plot_notes.length <1 ? <ul><li>No notes</li></ul> : <ul>
                 {plot_notes.map(n => <li key={n}>{n}</li>)}
-              </ul>}
+              </ul>}</span>
               <Row>
                 <Col sm={4}><span className='mini-header'>Characters Involved</span>
-                  {plot.persons.length<1 ? <p>No linked characters</p> : <ul> {relatedCharacters.map(p => <li key={p.id}>
+                  {plot.persons.length<1 ? <ul><li>No linked characters</li></ul> : <ul> {relatedCharacters.map(p => <li key={p.id}>
                     <span className='characters'><Link onClick={() => props.changeTab('Characters')} to={`/characters/${p.id}`}>{p.full_name}</Link></span>
                     <span> - {p.is_character ? "Character" : "NPC"}</span></li>)}
                     </ul>
                   }</Col>
                 <Col sm={4}><span className='mini-header'>Character Groups Involved</span>
-                {characterGroups.length <1 ? <p>No linked character groups</p> : 
+                {characterGroups.length <1 ? <ul><li>No linked character groups</li></ul> : 
               <ul>{characterGroups.map(g => <li key={g}><Row><Col sm>{g}</Col></Row></li>)}</ul>}
               </Col></Row>
               <Row>
@@ -186,9 +182,11 @@ export default function Plot(props) {
               </Row>
               <Row>
                 <Col sm>
-                {copiedFromCharacter.length <1 ? <p>Nothing copied</p> : 
-                copiedFromCharacter.map(n => <p key={n}>{n}</p>)}
-                  </Col>
+                  <span className="description">
+                    {copiedFromCharacter.length <1 ? <p>Nothing copied</p> : 
+                    copiedFromCharacter.map(n => <p key={n}>{n}</p>)}
+                  </span>
+                </Col>
               </Row>
               <Row>
                 <Col sm>&nbsp;</Col>