Merge pull request #538 from ChicagoWorldcon/PLAN-450-email-tab-v1

PLAN-450 lightweight email tab.
PlanoramaEvents · Aug 3, 2022 · 12e0d2a · 12e0d2a
2 parents 0392cf4 + 1f052a4
commit 12e0d2a
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 4 deletions.
diff --git a/app/javascript/people/person_tabs.vue b/app/javascript/people/person_tabs.vue
@@ -47,13 +47,14 @@
         <b-tab title="Draft Schedule" lazy v-if="displayDraftSchedule" :active="tab === 'draft-schedule'">
           <person-draft-schedule></person-draft-schedule>
         </b-tab>
+        <b-tab title="Emails" lazy v-if="currentUserIsAdmin || currentUserIsStaff" :active="tab === 'email'">
+          <people-email-tab></people-email-tab>
+        </b-tab>
         <b-tab title="Admin" lazy v-if="currentUserIsAdmin || currentUserIsStaff" :active="tab === 'admin'">
           <people-admin-tab></people-admin-tab>
         </b-tab>
         <b-tab title="Surveys" disabled lazy>
         </b-tab>
-        <b-tab title="Emails" disabled lazy>
-        </b-tab>
       </b-tabs>
     </model-loading-overlay>
   </div>
@@ -69,6 +70,7 @@ import PersonDemographics from '../profile/person_demographics.vue';
 import PersonLiveSchedule from '@/profile/person_live_schedule.vue';
 import PersonDraftSchedule from '@/profile/person_draft_schedule.vue';
 import PeopleAdminTab from './people_admin_tab.vue';
+import PeopleEmailTab from '@/profile/person_email_tab.vue';
 import ModelLoadingOverlay from '@/components/model_loading_overlay.vue';
 
 import { personModel } from '@/store/person.store'
@@ -100,6 +102,7 @@ export default {
     PersonLiveSchedule,
     PersonDraftSchedule,
     PeopleAdminTab,
+    PeopleEmailTab,
   },
   mixins: [
     personSessionMixin,
@@ -120,13 +123,14 @@ export default {
         'availability',
         'session-selection',
         'session-ranking',
-        'admin'
       ]
       if (this.displayDraftSchedule) {
         baseTabs.splice(5, 0, 'draft-schedule')
       }
       if (this.currentUserIsAdmin || this.currentUserIsStaff || this.firmSchedule) {
-        baseTabs.splice(5, 0, 'schedule')
+        baseTabs.splice(5, 0, 'schedule');
+        baseTabs.push('email');
+        baseTabs.push('admin');
       }
       return baseTabs;
     },

diff --git a/app/javascript/profile/person_email_tab.vue b/app/javascript/profile/person_email_tab.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col">
+        <div v-for="mail in fetchedMailings" :key="mail.id" class="mb-2">
+          <h5> {{DateTime.fromISO(mail.date_sent).toFormat("DDDD, t ZZZZ")}} </h5>
+          <dl>
+            <dt class="font-weight-bold">Subject</dt>
+            <dd class="ml-2">{{mail.subject}}</dd>
+            <dt class="font-weight-bold">Body</dt>
+            <dd class="ml-2" v-html="mail.content"></dd>
+          </dl>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { DateTime } from 'luxon';
+import { mapActions } from 'vuex';
+import { personModel as model } from '@/store/person.store';
+import { modelMixinNoProp } from '@/mixins';
+
+export default {
+  name: 'PersonEmailTab',
+  data: () => ({
+    fetchedMailings: [],
+    DateTime,
+    model,
+  }),
+  mixins: [
+    modelMixinNoProp
+  ],
+  methods: {
+    ...mapActions({
+      get: 'jv/get'
+    }),
+    fetchMailings() {
+      this.get(`/person/${this.selected.id}/mail_histories`).then((data) => {
+          let {_jv, ...filteredMailings} = data;
+          let sortableMailings = Object.values(filteredMailings);
+          sortableMailings.sort((a, b) => DateTime.fromISO(b.date_sent) - DateTime.fromISO(a.date_sent));
+          this.fetchedMailings = sortableMailings
+      });
+    }
+  },
+  mounted() {
+    if (this.selected) {
+      this.fetchMailings();
+    }
+  },
+
+}
+</script>
+
+<style>
+
+</style>