Frontend support for members emails as arrays (#632)

Author: joanagmaia

frontend/src/assets/scss/badge.scss

@@ -52,4 +52,8 @@
       @apply bg-yellow-100;
     }
   }
+
+  &--interactive {
+    @apply text-gray-900 hover:text-brand-500 transition text-ellipsis truncate flex items-center hover:cursor-pointer gap-1.5 border px-1.5 rounded-md h-6;
+  }
 }

frontend/src/modules/member/components/form/member-form-identities.vue

@@ -69,30 +69,18 @@
           </el-form-item>
         </div>
       </div>
-
-      <div class="flex items-center justify-between mt-24">
+      <div class="flex items-start justify-between mt-24">
         <div class="flex items-center flex-1">
           <app-platform platform="email" />
           <div class="font-medium text-sm ml-3">
             Email address
           </div>
         </div>
-        <el-form-item
-          prop="email"
+        <app-string-array-input
+          v-model="computedModelEmails"
           class="flex-1"
-          :rules="[
-            {
-              type: 'email',
-              message: 'Please input correct email address',
-              trigger: ['blur', 'change']
-            }
-          ]"
-        >
-          <el-input
-            v-model="computedModelEmail"
-            placeholder="john.doe@gmail.com"
-          />
-        </el-form-item>
+          add-row-label="Add e-email address"
+        />
       </div>
     </div>
   </div>
@@ -133,12 +121,14 @@ const model = computed({
   }
 })
 
-const computedModelEmail = computed({
+const computedModelEmails = computed({
   get() {
-    return model.value.email
+    return model.value.emails?.length > 0
+      ? model.value.emails
+      : ['']
   },
-  set(newEmail) {
-    model.value.email = newEmail
+  set(emails) {
+    model.value.emails = emails
   }
 })
 
@@ -150,8 +140,8 @@ watch(
 
     if (platforms.length) {
       model.value.platform = platforms[0]
-    } else if (newValue.email) {
-      model.value.platform = 'email'
+    } else if (newValue.emails) {
+      model.value.platform = 'emails'
     } else {
       model.value.platform = null
     }

frontend/src/modules/member/components/list/member-list-table.vue

@@ -300,7 +300,10 @@
                 </template>
               </el-table-column>
 
-              <el-table-column label="Email" width="240">
+              <el-table-column
+                label="Emails"
+                :width="emailsColumnWidth"
+              >
                 <template #default="scope">
                   <router-link
                     :to="{
@@ -309,41 +312,45 @@
                     }"
                     class="block"
                   >
-                    <div class="text-sm cursor-auto">
+                    <div
+                      v-if="scope.row.emails.length"
+                      class="text-sm cursor-auto flex flex-wrap gap-1"
+                    >
                       <el-tooltip
-                        v-if="scope.row.email"
-                        :disabled="!scope.row.email"
+                        v-for="email of scope.row.emails"
+                        :key="email"
+                        :disabled="!email"
                         popper-class="custom-identity-tooltip"
                         placement="top"
                       >
                         <template #content
                           ><span
                             >Send email
                             <i
-                              v-if="scope.row.email"
+                              v-if="email"
                               class="ri-external-link-line text-gray-400"
                             ></i></span
                         ></template>
                         <div @click.prevent>
                           <a
                             target="_blank"
-                            class="text-gray-500 hover:!text-brand-500"
-                            :href="`mailto:${scope.row.email}`"
+                            class="badge--interactive"
+                            :href="`mailto:${email}`"
                             @click.stop="trackEmailClick"
-                            >{{ scope.row.email }}</a
+                            >{{ email }}</a
                           >
                         </div>
                       </el-tooltip>
-                      <span v-else class="text-gray-500"
-                        >-</span
-                      >
                     </div>
+                    <span v-else class="text-gray-500"
+                      >-</span
+                    >
                   </router-link>
                 </template>
               </el-table-column>
 
               <el-table-column
-                :width="maxTabWidth"
+                :width="tagsColumnWidth"
                 :label="
                   translate('entities.member.fields.tag')
                 "
@@ -498,7 +505,7 @@ const loading = computed(
     store.state.member.list.loading || props.isPageLoading
 )
 
-const maxTabWidth = computed(() => {
+const tagsColumnWidth = computed(() => {
   let maxTabWidth = 0
   for (const row of rows.value) {
     if (row.tags) {
@@ -515,6 +522,21 @@ const maxTabWidth = computed(() => {
   return Math.min(maxTabWidth + 100, 500)
 })
 
+const emailsColumnWidth = computed(() => {
+  let maxTabWidth = 0
+  for (const row of rows.value) {
+    const tabWidth = row.emails
+      .map((email) => email.length * 12)
+      .reduce((a, b) => a + b, 0)
+
+    if (tabWidth > maxTabWidth) {
+      maxTabWidth = tabWidth > 400 ? 400 : tabWidth
+    }
+  }
+
+  return maxTabWidth
+})
+
 const selectedRows = computed(
   () => store.getters['member/selectedRows']
 )

frontend/src/modules/member/components/member-manage-identities-drawer.vue

@@ -83,7 +83,7 @@ const handleSubmit = async () => {
   loading.value = true
   await MemberService.update(props.member.id, {
     username: memberModel.value.username,
-    email: memberModel.value.email
+    emails: memberModel.value.emails
   })
   await store.dispatch('member/doFind', props.member.id)
   Message.success('Member identities updated successfully')

frontend/src/modules/member/components/member-organizations.vue

@@ -76,7 +76,7 @@
           name: 'organizationView',
           params: { id: organization.id }
         }"
-        class="text-gray-900 hover:text-brand-500 transition text-ellipsis truncate flex items-center hover:cursor-pointer gap-1.5 border px-1.5 rounded-md h-6"
+        class="badge--interactive"
         @click.stop
       >
         <img
@@ -92,10 +92,6 @@
     </div>
   </div>
   <div v-else class="text-gray-900">-</div>
-  <app-paywall-modal
-    v-model="isUpgradeModalOpen"
-    module="organizations"
-  />
 </template>
 
 <script>
@@ -105,8 +101,7 @@ export default {
 </script>
 
 <script setup>
-import { defineProps, ref } from 'vue'
-import AppPaywallModal from '@/modules/layout/components/paywall-modal.vue'
+import { defineProps } from 'vue'
 
 const props = defineProps({
   member: {
@@ -122,6 +117,4 @@ const props = defineProps({
     default: () => 'vertical'
   }
 })
-
-const isUpgradeModalOpen = ref(false)
 </script>

frontend/src/modules/member/components/view/_aside/_aside-custom-attributes.vue

@@ -121,8 +121,8 @@ const computedCustomAttributes = computed(() => {
           'bio',
           'url',
           'location',
+          'emails',
           'jobTitle',
-          // 'emails' TODO: should we actually render emails here?
           'workExperiences', // we render them in _aside-work-experience
           'certifications', // we render them in _aside-work-certifications
           'education', // we render them in _aside-work-education

frontend/src/modules/member/components/view/_aside/_aside-identities.vue

@@ -61,23 +61,32 @@
       </a>
     </div>
     <div
-      v-if="Object.keys(socialIdentities).length && email"
+      v-if="
+        Object.keys(socialIdentities).length &&
+        emails.length
+      "
       class="mt-2"
     >
       <el-divider class="border-t-gray-200"></el-divider>
-      <a
-        class="py-2 px-6 -mx-6 mt-4 flex justify-between items-center relative hover:bg-gray-50 transition-colors cursor-pointer"
-        :href="`mailto:${email}`"
-        target="_blank"
-      >
-        <div class="flex gap-3 items-center">
-          <app-platform platform="email" />
-          <span class="text-gray-900 text-xs">
-            {{ email }}</span
-          >
-        </div>
-        <i class="ri-external-link-line text-gray-300"></i>
-      </a>
+      <div class="mt-4">
+        <a
+          v-for="email of emails"
+          :key="email"
+          class="py-2 px-6 -mx-6 flex justify-between items-center relative hover:bg-gray-50 transition-colors cursor-pointer"
+          :href="`mailto:${email}`"
+          target="_blank"
+        >
+          <div class="flex gap-3 items-center">
+            <app-platform platform="email" />
+            <span class="text-gray-900 text-xs">
+              {{ email }}</span
+            >
+          </div>
+          <i
+            class="ri-external-link-line text-gray-300"
+          ></i>
+        </a>
+      </div>
     </div>
     <app-member-manage-identities-drawer
       v-model="identitiesDrawer"
@@ -103,13 +112,13 @@ const { currentTenant, currentUser } = mapGetters('auth')
 
 const identitiesDrawer = ref(false)
 
-const email = computed(() => {
-  return props.member.email
+const emails = computed(() => {
+  return props.member.emails
 })
 
 const socialIdentities = computed(() => {
   const identities = { ...props.member.username }
-  delete identities.email
+  delete identities.emails
 
   return identities
 })

frontend/src/modules/member/member-list-exporter-fields.js

@@ -5,7 +5,7 @@ const { fields } = MemberModel
 export default [
   fields.id,
   fields.username,
-  fields.email,
+  fields.emails,
   fields.createdAt,
   fields.updatedAt
 ]

frontend/src/modules/member/member-model.js

@@ -14,6 +14,7 @@ import SearchField from '@/shared/fields/search-field'
 import MemberIdentitiesField from './member-identities-field'
 import SentimentField from '@/shared/fields/sentiment-field'
 import ActivityTypeField from '@/modules/activity/activity-type-field'
+import StringArrayField from '@/shared/fields/string-array-field'
 
 function label(name) {
   return i18n(`entities.member.fields.${name}`)
@@ -64,9 +65,7 @@ const fields = {
   tags: TagField.relationToMany('tags', label('tags'), {
     filterable: true
   }),
-  email: new StringField('email', label('email'), {
-    email: true
-  }),
+  emails: new StringArrayField('emails', 'Emails'),
   noMerge: MemberField.relationToMany(
     'noMerge',
     label('noMerge'),

frontend/src/modules/member/pages/member-form-page.vue

@@ -150,7 +150,7 @@ const formSchema = computed(
   () =>
     new FormSchema([
       fields.displayName,
-      fields.email,
+      fields.emails,
       fields.joinedAt,
       fields.tags,
       fields.username,
@@ -280,7 +280,7 @@ function getInitialModel(record) {
     JSON.stringify(
       formSchema.value.initialValues({
         displayName: record ? record.displayName : '',
-        email: record ? record.email : '',
+        emails: record ? record.emails : '',
         joinedAt: record ? record.joinedAt : '',
         attributes: record
           ? filteredAttributes(record.attributes)
@@ -301,6 +301,7 @@ function filteredAttributes(attributes) {
   return Object.keys(attributes).reduce((acc, item) => {
     if (
       ![
+        'emails',
         'workExperiences',
         'education',
         'certifications',
@@ -337,8 +338,8 @@ async function onSubmit() {
     formModel.value.displayName && {
       displayName: formModel.value.displayName
     },
-    formModel.value.email && {
-      email: formModel.value.email
+    formModel.value.emails && {
+      emails: formModel.value.emails
     },
     formModel.value.joinedAt && {
       joinedAt: formModel.value.joinedAt