add search and count to mailing lists

dashboard/src/views/EmailMailinglistsView.vue

@@ -4,8 +4,8 @@ import { useI18n } from 'vue-i18n';
 const i18n = useI18n();
 const t = i18n.t;
 
-import { ref, onMounted, useTemplateRef } from 'vue';
-import { Button, Menu, TableView, Dialog } from '@cloudron/pankow';
+import { ref, onMounted, useTemplateRef, computed } from 'vue';
+import { Button, Menu, TableView, Dialog, TextInput } from '@cloudron/pankow';
 import { eachLimit } from 'async';
 import Section from '../components/Section.vue';
 import MailinglistDialog from '../components/MailinglistDialog.vue';
@@ -51,6 +51,20 @@ const busy = ref(true);
 const mailinglists = ref([]);
 const domains = ref([]);
 
+const searchFilter = ref('');
+
+const filteredMailinglists = computed(() => {
+  if (!searchFilter.value) return mailinglists.value;
+
+  return mailinglists.value.filter(m => {
+    const search = searchFilter.value.toLowerCase();
+
+    if (m.members.find(a => a.toLowerCase().indexOf(search) !== -1)) return true;
+
+    return false;
+  });
+});
+
 const mailinglistDialog = useTemplateRef('mailinglistDialog');
 
 async function onAddOrEdit(mailinglist = null) {
@@ -146,11 +160,16 @@ onMounted(async () => {
     <MailinglistDialog ref="mailinglistDialog" :domains="domains" @success="refresh()"/>
 
     <Section :title="$t('email.incoming.mailinglists.title')">
+      <template #header-title-extra>
+        <span style="font-weight: normal; font-size: 14px">({{ filteredMailinglists.length }})</span>
+      </template>
+
       <template #header-buttons>
+        <TextInput :placeholder="$t('main.searchPlaceholder')" style="flex-grow: 1;" v-model="searchFilter"/>
         <Button @click="onAddOrEdit()">{{ $t('email.incoming.mailboxes.addAction') }}</Button>
       </template>
 
-      <TableView :columns="columns" :model="mailinglists" :busy="busy">
+      <TableView :columns="columns" :model="filteredMailinglists" :busy="busy">
         <template #membersOnly="mailinglist">
           <i class="fas" :class="{ 'fa-door-closed': mailinglist.membersOnly, 'fa-door-open': !mailinglist.membersOnly }" v-tooltip="$t(mailinglist.membersOnly ? 'email.incoming.mailinglists.everyoneTooltip' : 'email.incoming.mailinglists.membersOnlyTooltip')"></i>
         </template>