ADD: mailto button in Group member list

frontend/src/components/GroupCard.vue

@@ -8,7 +8,9 @@
             {{ group.name }}
           </h4>
           <b-badge v-if="group.do_idm_sync" variant="primary">IDM-Sync</b-badge>
-          <b-badge v-if="group.is_admin" variant="danger" title="Sie administrieren diese Gruppe durch Ihre OE-Zuordnung">Admin</b-badge>
+          <b-badge v-if="group.is_admin" variant="danger"
+                   title="Sie administrieren diese Gruppe durch Ihre OE-Zuordnung">Admin
+          </b-badge>
           <b-badge v-if="group.is_own" variant="success" title="Sie sind Mitglied dieser Gruppe">Mitglied</b-badge>
           <p class="text-muted">Gruppenname</p>
         </b-col>
@@ -96,7 +98,8 @@
     <b-button block squared variant="outline-secondary" v-b-toggle="group.name.replace(' ', '_') + '-collapse-domains'">
       Domains (Namensraum)
       <b-badge pill v-if="fqdn2grp[group.name]">{{ fqdn2grp[group.name].length }}</b-badge>
-      <b-badge pill v-else variant="warning">0</b-badge><br/>
+      <b-badge pill v-else variant="warning">0</b-badge>
+      <br/>
       <font-awesome-icon class="collapse-icon" :icon="['fas','chevron-down']"/>
     </b-button>
     <b-collapse :id="group.name.replace(' ', '_') + '-collapse-domains'">
@@ -157,6 +160,13 @@
             {{ mgrs[data.item.mgr_login_name].email }}
           </b-link>
         </template>
+        <template v-slot:head(email)>
+          Email
+          <b-link class="ml-1" v-if="mgrs2grp[group.name].length > 0"
+                  :href="`mailto:${group2mgr_emails(group.name).toString()}?subject=Betreuer der Gruppe '${group.name}'`">
+            <font-awesome-icon icon="envelope"/>
+          </b-link>
+        </template>
         <template v-slot:head(actions)>
           <b-button block variant="outline-success"
                     :id="'button-assign-mgr-' +  group.name" @click="createMgr2Group(group.name)">
@@ -182,7 +192,8 @@
       </b-table>
     </b-collapse>
     <template v-if="!group.is_sub_group">
-      <b-button block squared variant="outline-secondary" v-b-toggle="group.name.replace(' ', '_') + '-collapse-subgroups'">
+      <b-button block squared variant="outline-secondary"
+                v-b-toggle="group.name.replace(' ', '_') + '-collapse-subgroups'">
         Untergruppen
         <b-badge pill v-if="subgroups && subgroups.length > 0">{{ subgroups.length }}</b-badge>
         <b-badge pill v-else>0</b-badge>
@@ -192,10 +203,13 @@
       <b-collapse :id="group.name.replace(' ', '_') + '-collapse-subgroups'">
         <b-container fluid style="margin-top: 20px">
           <b-button style="margin-bottom: 20px" block variant="outline-success"
-                    :id="'button-create-subgroup-' +  group.name.replace(' ', '_')" @click="createSubgroup(group.name)" v-if="group.is_own">
+                    :id="'button-create-subgroup-' +  group.name.replace(' ', '_')" @click="createSubgroup(group.name)"
+                    v-if="group.is_own">
             <font-awesome-icon :icon="['fas', 'plus']"/>
           </b-button>
-          <b-alert v-else variant="info" class="text-center" show>Sie können nur Untergruppen zu Gruppen anlegen, in denen Sie Mitglied sind.</b-alert>
+          <b-alert v-else variant="info" class="text-center" show>Sie können nur Untergruppen zu Gruppen anlegen, in
+            denen Sie Mitglied sind.
+          </b-alert>
           <b-tooltip :target="'button-create-subgroup-' +  group.name.replace(' ', '_')" triggers="hover"
                      variant="success" placement="bottom">
             Neue Untergruppe anlegen
@@ -384,6 +398,15 @@ export default {
       type: Function,
       required: true
     }
+  },
+  methods: {
+    group2mgr_emails(group_name) {
+      const emails = []
+      this.mgrs2grp[group_name].forEach(mgr2group => {
+        emails.push(this.mgrs[mgr2group.mgr_login_name].email)
+      })
+      return emails
+    }
   }
 }
 </script>