Improve infoboard entry management (#22)

Improves the infoboard management view. --------- Co-authored-by: Nico Hagelberg <[email protected]>
OdysseusLarp · Jun 15, 2024 · 461c501 · 461c501
1 parent 2586649
commit 461c501
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 64 deletions.
diff --git a/src/components/Infoboard.vue b/src/components/Infoboard.vue
@@ -60,17 +60,24 @@
         :key="i"
         :class="'card'"
         :title="infoboard.title"
-        :sub-title="infoboard.created_at"
+        :sub-title="'Created on ' + formatDate(infoboard.created_at)"
       >
-        <p class="card-text">
-          {{ infoboard.body }}
-        </p>
-        <p>Set: {{ infoboard.priority }} Enabled: {{ infoboard.enabled }}</p>
+        <div class="badges">
+          <b-badge v-if="infoboard.enabled" variant="success">Enabled</b-badge>
+          <b-badge v-else variant="secondary">Disabled</b-badge>
+          <b-badge variant="info">Set {{ infoboard.priority }}</b-badge>
+          <b-badge v-if="infoboard.active_until" variant="primary"
+            >Active until {{ formatDate(infoboard.active_until) }} ({{ formatDuration(infoboard.active_until) }})</b-badge>
+        </div>
+        <div class="card-text">
+          <pre>{{ infoboard.body }}</pre>
+        </div>
         <b-button
           v-b-modal.infoboard-entry-modal
           size="sm"
           class="my-2 my-sm-0"
           entry="'infoboard'"
+          variant="primary"
           @click="sendInfo(infoboard)"
           >Edit infoboard entry</b-button
         >
@@ -137,6 +144,7 @@
 <script>
 import axios from "axios";
 import { pushError } from "../helpers";
+import { format, distanceInWordsToNow } from "date-fns";
 
 const emptyEntry = { priority: 1, title: "", body: "", enabled: true };
 
@@ -178,6 +186,12 @@ export default {
     handleError(error) {
       pushError(this.errors, error, this.$notify);
     },
+    formatDate(date) {
+      return date ? format(new Date(date), "dddd HH:mm:ss") : "";
+    },
+    formatDuration(date) {
+      return date ? distanceInWordsToNow(date) : "";
+    },
     async addInfoboardEntry(entry) {
       if (!entry.priority || !entry.title || !entry.body) {
         this.errors.push("Priority, title or body was not provided");
@@ -273,6 +287,14 @@ export default {
 button {
   margin-right: 15px;
 }
+.badges {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 1rem;
+}
+.badges > *:not(:last-child) {
+  margin-right: 5px;
+}
 .wrapper {
   padding: 15px;
 }

diff --git a/src/components/Social.vue b/src/components/Social.vue
@@ -1,47 +1,38 @@
 <template>
   <div class="wrapper">
     <b-container v-for="(error, i) in errors" :key="error" fluid>
-      <b-alert
-variant="danger" show
-        dismissible
-        :hover="true"
-        @dismissed="removeError(i)"><strong>Error: </strong>{{ error }}</b-alert>
+      <b-alert variant="danger" show dismissible :hover="true" @dismissed="removeError(i)"><strong>Error: </strong>{{
+        error }}</b-alert>
     </b-container>
     <div v-if="!!pendingVotes.length">
-        <h2>Pending new votes</h2>
-        <b-card
-v-for="vote in pendingVotes" :key="vote.id"
-            class="card"
-            :title="vote.title"
-            :sub-title="formatVoteSubtitle(vote)">
-            <p class="card-text">{{ vote.description }}</p>
-            <p class="card-text">
-                <ul>
-                    <li>Will be active for: {{ vote.duration_minutes }} minutes</li>
-                    <li>Allowed voters: {{ vote.allowed_voters }}</li>
-                    <li>Vote options: {{ vote.options.map(o => o.text).join(', ') }}</li>
-                </ul>
-            </p>
-            <b-button variant="success" @click="updateVoteStatus(vote.id, 'APPROVED')">Approve</b-button>
-            <b-button variant="danger" @click="updateVoteStatus(vote.id, 'REJECTED')">Reject</b-button>
-        </b-card>
+      <h2>Pending new votes</h2>
+      <b-card v-for="vote in pendingVotes" :key="vote.id" class="card" :title="vote.title"
+        :sub-title="formatVoteSubtitle(vote)">
+        <p class="card-text">{{ vote.description }}</p>
+        <p class="card-text">
+        <ul>
+          <li>Will be active for: {{ vote.duration_minutes }} minutes</li>
+          <li>Allowed voters: {{ vote.allowed_voters }}</li>
+          <li>Vote options: {{ vote.options.map(o => o.text).join(', ') }}</li>
+        </ul>
+        </p>
+        <b-button variant="success" @click="updateVoteStatus(vote.id, 'APPROVED')">Approve</b-button>
+        <b-button variant="danger" @click="updateVoteStatus(vote.id, 'REJECTED')">Reject</b-button>
+      </b-card>
     </div>
     <div v-else>
       No pending votes.
     </div>
     <div v-if="!!pendingPosts.length">
-        <h2>Pending new posts</h2>
-        <b-card
-v-for="post in pendingPosts" :key="post.id"
-            class="card"
-            :title="post.title"
-            :sub-title="formatPostSubtitle(post)">
-            <p class="card-text">
-              <vue-markdown :source="post.body"></vue-markdown>
-            </p>
-            <b-button variant="success" @click="updatePostStatus(post.id, 'APPROVED')">Approve</b-button>
-            <b-button variant="danger" @click="updatePostStatus(post.id, 'REJECTED')">Reject</b-button>
-        </b-card>
+      <h2>Pending new posts</h2>
+      <b-card v-for="post in pendingPosts" :key="post.id" class="card" :title="post.title"
+        :sub-title="formatPostSubtitle(post)">
+        <p class="card-text">
+          <vue-markdown :source="post.body"></vue-markdown>
+        </p>
+        <b-button variant="success" @click="updatePostStatus(post.id, 'APPROVED')">Approve</b-button>
+        <b-button variant="danger" @click="updatePostStatus(post.id, 'REJECTED')">Reject</b-button>
+      </b-card>
     </div>
     <div v-else>
       No pending posts.
@@ -215,6 +206,7 @@ import VueMarkdown from "vue-markdown";
 import { distanceInWordsStrict } from 'date-fns';
 import { difference } from 'lodash';
 import { pushError } from '../helpers';
+import { format } from "date-fns";
 
 export default {
   components: {
@@ -302,11 +294,11 @@ export default {
         },
       ],
       personStatusOptions: [
-          'Killed in action',
-          'Missing in action',
-          'Present and accounted for',
-          'Unknown',
-          'Deceased',
+        'Killed in action',
+        'Missing in action',
+        'Present and accounted for',
+        'Unknown',
+        'Deceased',
       ],
       personVisibleOptions: [
         { value: true, text: 'Visible' },
@@ -393,12 +385,11 @@ export default {
       this.getArtifact();
     },
     formatVoteSubtitle(vote) {
-      return `Created by ${vote.author.full_name} at ${vote.created_at}`;
+      return `Created by ${vote.author.full_name} on ${format(new Date(vote.created_at), "dddd HH:mm:ss")}`;
     },
-    formatPostSubtitle(vote) {
-      return `Created by ${vote.author.full_name} at ${vote.created_at} (${
-        vote.type
-      })`;
+    formatPostSubtitle(post) {
+      return `Created by ${post.author.full_name} on ${format(new Date(post.created_at), "dddd HH:mm:ss")} (${post.type
+        })`;
     },
     fetchData() {
       this.fetchPendingVotes();
@@ -705,10 +696,9 @@ export default {
         baseURL: this.$store.state.backend.uri,
         method: "put",
         data: { status, is_active }
-      })
-        .then(() => {
-          this.fetchData();
-        }).catch(this.handleError);
+      }).then(() => {
+        this.fetchData();
+      }).catch(this.handleError);
     },
     updatePostStatus(id, status) {
       axios({
@@ -720,7 +710,7 @@ export default {
         .then(() => {
           this.fetchData();
         }).catch(this.handleError);
-    }
+    },
   }
 };
 </script>
@@ -729,12 +719,15 @@ export default {
 button {
   margin-right: 15px;
 }
+
 .wrapper {
   padding: 15px;
 }
+
 .card {
   margin: 15px;
 }
+
 .selected-person {
   margin-top: 15px
 }
@@ -744,6 +737,7 @@ h3 {
 .action-button {
   margin: 12px auto;
 }
+
 .person-groups-checkboxes {
   margin-top: 15px;
 
@@ -756,11 +750,11 @@ h3 {
   padding: 16px;
 }
 
-li > * {
+li>* {
   margin: auto 4px;
 }
 
-li > strong {
+li>strong {
   cursor: pointer;
 }
 </style>
diff --git a/src/store.ts b/src/store.ts
@@ -10,10 +10,7 @@ const vuexPersist = new VuexPersist({
   storage: localStorage,
 });
 
-const uri =
-  window.location.hostname === "localhost"
-    ? "http://localhost:8888"
-    : window.location.origin;
+const uri = window.location.hostname === "localhost" ? "http://localhost:8888" : window.location.origin;
 
 const store = new Vuex.Store<State>({
   state: {
@@ -51,9 +48,7 @@ const store = new Vuex.Store<State>({
       }
     },
     deleteDataBlob(state, data) {
-      state.dataBlobs = state.dataBlobs.filter(
-        (e) => e.type !== data.type || e.id !== data.id,
-      );
+      state.dataBlobs = state.dataBlobs.filter((e) => e.type !== data.type || e.id !== data.id);
     },
     setAllDataBlobs(state, datas) {
       state.dataBlobs = datas;

diff --git a/src/types.ts b/src/types.ts
@@ -6,7 +6,6 @@ interface DataBlob {
   version: number;
   [x: string]: any;
 }
-
 export interface State {
   dataBlobs: DataBlob[];
   info: {