Load conversations from api (#27)

src/store/index.js

@@ -47,6 +47,10 @@ const store = new Vuex.Store({
     users: {
       all: [],
       byId: []
+    },
+    conversations: {
+      all: [],
+      byId: []
     }
   },
   mutations: {
@@ -109,7 +113,12 @@ const store = new Vuex.Store({
       Vue.set(state.shifts.byId, shift.id, shift)
       if (!state.shifts.all.includes(shift.id))
         state.shifts.all.push(shift.id)
-    }
+    },
+    ADD_CONVERSATION(state, conversation) {
+      Vue.set(state.conversations.byId, conversation.id, conversation)
+      if (!state.conversations.all.includes(conversation.id))
+        state.conversations.all.push(conversation.id)
+    },
   },
   actions: {
     showSnackbar({ commit }, snackbar) {
@@ -367,6 +376,16 @@ const store = new Vuex.Store({
         data: { shift }
       })
     },
+
+    async loadConversations({ commit }) {
+      const { data } = await axios({
+        method: 'GET',
+        url: `${baseUrl}/conversations`
+      })
+      data.conversations.forEach(c => {
+        commit('ADD_CONVERSATION', c)
+      })
+    }
   },
   getters: {
     // TODO: Transform this and add labels, separated by day of week
@@ -454,6 +473,12 @@ const store = new Vuex.Store({
     shifts: (state, getters) => {
       return state.shifts.all.map(id => getters.shift(id))
     },
+    conversation: (state) => id => {
+      return state.conversations.byId[id]
+    },
+    conversations: (state, getters) => {
+      return state.conversations.all.map(id => getters.conversation(id))
+    },
   },
   modules: {
   }

src/views/Clock.vue

@@ -25,7 +25,7 @@
           ')
             template(v-slot:process='props')
               span
-                | That's in
+                | That's in  
                 span(v-if='props.timeObj.d != 0')
                   | {{ props.timeObj.d }} days,
                 span(v-if='props.timeObj.h != 0')

src/views/approvals/Approvals.vue

@@ -1,5 +1,10 @@
 <template lang="pug">
-v-container.approvals
+
+v-container.d-flex.flex-column.justify-center(fill-height v-if="!approvedTimecards.length && !unapprovedTimecards.length")
+  v-icon.text-h2.ma-5 mdi-clock-check-outline
+  p.text-body-1 No timecard approvals left!
+
+v-container.approvals(v-else)
 
   edit-timecard-dialog(
     :opened.sync="editTimecardDialog",
@@ -14,6 +19,7 @@ v-container.approvals
     :opened.sync="paymentDialog",
     :timecards="selectedTimecards"
   )
+
 
   .mb-5(v-if="approvedTimecards.length")
     v-toolbar(flat, color="transparent")

src/views/approvals/DenyDialog.vue

@@ -7,7 +7,7 @@ v-dialog(
 )
   v-card
     v-card-title.headline Deny timecard?
-    v-card-text
+    v-card-text(v-if="timecard")
       | {{ timecard.first_name }} {{ timecard.last_name }} will not be paid for
       | this shift.
     v-card-actions

src/views/approvals/EditTimecardDialog.vue

@@ -6,7 +6,7 @@ v-dialog(
   persistent
 )
   v-card
-    v-form(@submit.prevent="updateTimecard", v-model="form.isValid")
+    v-form(@submit.prevent="updateTimecard", v-model="form.isValid" v-if="timecard")
       v-toolbar(flat)
         v-toolbar-title
           | Editing timecard for

src/views/messages/Conversation.vue

@@ -27,7 +27,7 @@
       v-model="message",
       ref="message",
       background-color="grey lighten-3",
-      flat,https://stackoverflow.com/questions/65854015/get-the-the-flask-security-user-id-in-a-flask-socketio-event/65865820#65865820
+      flat,
       hide-details,
       rounded,
       solo,
@@ -46,7 +46,7 @@ export default {
   name: "Messages",
   mounted() {
     // TODO: doesnt' work
-    this.$refs.message.$el.focus();https://stackoverflow.com/questions/65854015/get-the-the-flask-security-user-id-in-a-flask-socketio-event/65865820#65865820
+    this.$refs.message.$el.focus();
   },
   watch: {
     '$route.params.conversationId'(newVal, oldVal) {

src/views/messages/Conversations.vue

@@ -2,18 +2,33 @@
 .conversations
   v-list(color="transparent")
     v-list-item(
-      v-for="n in [1, 2, 3, 4, 5]",
-      :key="n",
+      v-for="conversation in conversations",
+      :key="conversation.id",
       link,
       activeclass="primary--text",
-      :to="{ name: 'conversation', params: { conversationId: n } }"
+      :to="{ name: 'conversation', params: { conversationId: conversation.id } }"
     )
       v-list-item-content
-        v-list-item-title Conversation {{ n }}
+        v-list-item-title
+          span(
+            v-for="participant in conversation.participants",
+            :key="participant.id",
+            v-if="participant.id != authenticatedUser.id"
+          )
+            | {{ participant.first_name }} {{ participant.last_name }}
 </template>
 
 <script>
+import { mapState, mapGetters } from "vuex";
+
 export default {
   name: "Conversations",
+  async mounted() {
+    await this.$store.dispatch("loadConversations");
+  },
+  computed: {
+    ...mapState(["authenticatedUser"]),
+    ...mapGetters(["conversations"]),
+  },
 };
 </script>