Fixes for message

Author: spapas

client/out/app.js

@@ -33849,7 +33849,7 @@ ${JSON.stringify(newTargetLocation, null, 2)}
     },
     actions: {
       login(context, { server: server2, username, password }) {
-        console.log("LIGIN ", server2, context.state);
+        console.log("LOGIN ", server2, context.state);
         context.commit("setLoading", true);
         context.commit("setServer", server2);
         localStorage.setItem("server", server2);
@@ -34088,11 +34088,45 @@ ${JSON.stringify(newTargetLocation, null, 2)}
     },
     template: `
 
-        <ul>
-            <li v-for='message in messages' :key="message.id">
-                {{ message }}
-            </li>
-        </ul>
+        <table class='table'>
+            <thead>
+                <tr>
+                    <th>ID</th>
+                    <th>Protocol</th>
+                    <th>Message</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for='message in messages' :key="message.mesage_id">
+                    <td><router-link class="btn btn-sm btn-primary" :to="'/message/' + message.message_id ">{{ message.message_id }}</router-link></td>
+                    <td>
+                        <span v-if="message.message.protocol">
+                            {{ message.message.protocol }} / {{ message.message.protocol_year }}
+                        </span>
+                        <span v-else>
+                            Draft message
+                        </span>
+                    </td>
+                    <td>{{ message }}</td>
+                </tr>
+            </tbody>
+        </table>
+    `
+  };
+
+  // src/components/Message.js
+  var Message_default = {
+    computed: mapState([
+      "messages",
+      "loading"
+    ]),
+    created() {
+      if (this.messages == void 0) {
+        this.$store.dispatch("fetchMessages");
+      }
+    },
+    template: `
+      <div>Message {{ $route.params.id }}</div>
     `
   };
 
@@ -34104,6 +34138,7 @@ ${JSON.stringify(newTargetLocation, null, 2)}
     { path: "/", component: Home_default },
     { path: "/login", component: Login_default },
     { path: "/messages", component: Messages_default },
+    { path: "/message/:id/", component: Message_default },
     { path: "/help", component: Help },
     { path: "/public_key_list", component: PublicKeyList },
     { path: "/privatekey_load", component: PrivateKeyLoad }

client/src/Store.js

@@ -34,7 +34,7 @@ const Store = createStore({
   },
   actions: {
     login (context, {server, username, password}) {
-      console.log("LIGIN ", server, context.state)
+      console.log("LOGIN ", server, context.state)
       context.commit('setLoading', true)
       context.commit('setServer', server)
       localStorage.setItem('server', server)

client/src/app.js

@@ -9,6 +9,7 @@ import Home from './components/Home';
 import Nav from './components/Nav';
 import Login from './components/Login';
 import Messages from './components/Messages';
+import Message from './components/Message';
 
 const Help = { template: '<div>Help</div>' }
 const PublicKeyList = { template: '<div>PublicKeyList</div>' }
@@ -18,6 +19,7 @@ const routes = [
   { path: '/', component: Home },
   { path: '/login', component: Login },
   { path: '/messages', component: Messages },
+  { path: '/message/:id/', component: Message },
   { path: '/help', component: Help },
   { path: '/public_key_list', component: PublicKeyList },
   { path: '/privatekey_load', component: PrivateKeyLoad },

client/src/components/Message.js

@@ -0,0 +1,18 @@
+import { mapState } from 'vuex'
+
+export default {
+    computed: mapState([
+        'messages', 'loading'
+    ]),
+    created() {
+        
+        if(this.messages== undefined) {
+            this.$store.dispatch('fetchMessages')
+        }
+
+      },
+    template: `
+      <div>Message {{ $route.params.id }}</div>
+    `
+}
+

client/src/components/Messages.js

@@ -13,11 +13,29 @@ export default {
       },
     template: `
     
-        <ul>
-            <li v-for='message in messages' :key="message.id">
-                {{ message }}
-            </li>
-        </ul>
+        <table class='table'>
+            <thead>
+                <tr>
+                    <th>ID</th>
+                    <th>Protocol</th>
+                    <th>Message</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for='message in messages' :key="message.mesage_id">
+                    <td><router-link class="btn btn-sm btn-primary" :to="'/message/' + message.message_id ">{{ message.message_id }}</router-link></td>
+                    <td>
+                        <span v-if="message.message.protocol">
+                            {{ message.message.protocol }} / {{ message.message.protocol_year }}
+                        </span>
+                        <span v-else>
+                            Draft message
+                        </span>
+                    </td>
+                    <td>{{ message }}</td>
+                </tr>
+            </tbody>
+        </table>
     `
 }