add search to email domains

dashboard/src/views/EmailDomainsView.vue

@@ -1,7 +1,8 @@
 <script setup>
 
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed } from 'vue';
 import { prettyDecimalSize, sleep } from '@cloudron/pankow/utils';
+import { TextInput } from '@cloudron/pankow';
 import Section from '../components/Section.vue';
 import StateLED from  '../components/StateLED.vue';
 import DomainsModel from '../models/DomainsModel.js';
@@ -12,6 +13,25 @@ const mailModel = MailModel.create();
 
 const domains = ref([]);
 
+const searchFilter = ref('');
+
+const filteredDomains = computed(() => {
+  if (!searchFilter.value) return domains.value;
+
+  return domains.value.filter(d => {
+    const search = searchFilter.value.toLowerCase();
+
+    if (d.domain.toLowerCase().indexOf(search) !== -1) return true;
+    if (d.provider.toLowerCase().indexOf(search) !== -1) return true;
+
+    if (d.inboundEnabled && 'inbound'.includes(search)) return true;
+    if (d.outboundEnabled && 'outbound'.includes(search)) return true;
+
+    return false;
+  });
+});
+
+
 async function refreshStatus() {
   for (const domain of domains.value) {
     const [error, result] = await mailModel.status(domain.domain);
@@ -88,8 +108,16 @@ onMounted(async () => {
 <template>
   <div class="content">
     <Section :title="$t('emails.domains.title')">
+      <template #header-title-extra>
+        <span style="font-weight: normal; font-size: 14px">({{ busy ? '-' : filteredDomains.length }})</span>
+      </template>
+
+      <template #header-buttons>
+        <TextInput :placeholder="$t('main.searchPlaceholder')" style="flex-grow: 1;" v-model="searchFilter"/>
+      </template>
+
       <div>
-        <a v-for="domain in domains" :key="domain.domain" :href="`#/email-domain/${domain.domain}`" class="email-domain">
+        <a v-for="domain in filteredDomains" :key="domain.domain" :href="`#/email-domain/${domain.domain}`" class="email-domain">
          <div style="display: flex; align-items: center;">
             <StateLED :busy="domain.loadingStatus" :state="domain.status ? 'success' : 'danger'"/>
           </div>