use filtering TableView for domains

dashboard/src/views/DomainsView.vue

@@ -2,10 +2,15 @@
 
 const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
 
-import { ref, onMounted } from 'vue';
-import { Button, ButtonGroup } from 'pankow';
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+const t = i18n.t;
+
+import { ref, onMounted, useTemplateRef, computed } from 'vue';
+import { Button, ButtonGroup, TableView, TextInput } from 'pankow';
 import Certificates from '../components/Certificates.vue';
 import SyncDns from '../components/SyncDns.vue';
+import DomainDialog from '../components/DomainDialog.vue';
 import DashboardDomain from '../components/DashboardDomain.vue';
 import Section from '../components/Section.vue';
 import DashboardModel from '../models/DashboardModel.js';
@@ -15,8 +20,9 @@ const dashboardModel = DashboardModel.create(API_ORIGIN, localStorage.token);
 const domainsModel = DomainsModel.create(API_ORIGIN, localStorage.token);
 
 const domains = ref([]);
-const pageSize = 20;
+const search = ref('');
 const dashboardDomain = ref('');
+const domainDialog = useTemplateRef('domainDialog');
 
 function prettyProviderName(domain) {
   switch (domain.provider) {
@@ -46,11 +52,11 @@ function prettyProviderName(domain) {
 };
 
 function onAdd () {
-
+  domainDialog.value.open(null);
 }
 
 function onEdit(domain) {
-
+  domainDialog.value.open(domain);
 }
 
 function onRemove(domain) {
@@ -61,14 +67,35 @@ function onEditWellKnown(domain) {
 
 }
 
+const columns = ref({
+  domain: {
+    label: t('domains.domain'),
+    sort: true
+  },
+  provider: {
+    label: t('domains.provider'),
+    sort: true
+  },
+  actions: {
+    label: '',
+    sort: false
+  }
+});
+
+const filteredDomains = computed(() => {
+  if (!search.value) return domains.value;
+
+  return domains.value.filter(d => {
+    return d.domain.indexOf(search.value) !== -1 || d.provider.indexOf(search.value) !== -1;
+  });
+});
+
 onMounted(async () => {
   let [error, result] = await domainsModel.list();
   if (error) return console.error(error);
 
   domains.value = result;
 
-  console.log(result);
-
   [error, result] = await dashboardModel.getConfig();
   if (error) return console.error(error);
 
@@ -79,45 +106,28 @@ onMounted(async () => {
 
 <template>
   <div class="content">
+    <DomainDialog ref="domainDialog" />
+
     <Section :title="$t('domains.title')">
       <template #header-buttons>
-        <Button v-show="domains.length <= pageSize" @click="onAdd()" icon="fa-solid fa-plus"> {{ $t('domains.addDomain') }}</Button>
+        <TextInput v-model="search" :placeholder="$t('main.searchPlaceholder')"/>
+        <Button @click="onAdd()" icon="fa-solid fa-plus"> {{ $t('domains.addDomain') }}</Button>
       </template>
 
-      <table class="table table-hover">
-        <thead>
-          <tr>
-            <th>{{ $t('domains.domain') }}</th>
-            <th class="text-left hidden-xs hidden-sm">{{ $t('domains.provider') }}</th>
-            <th style="width: 100px" class="text-right">{{ $t('main.actions') }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="domain in domains" :key="domain">
-            <td class="elide-table-cell hand" @click="onEdit(domain)">
-              {{ domain.domain }}
-            </td>
-            <td class="text-left elide-table-cell hidden-xs hidden-sm hand" @click="onEdit(domain)">
-              {{ prettyProviderName(domain) }}
-            </td>
-            <td class="text-right no-wrap" style="vertical-align: bottom">
-              <ButtonGroup>
-                <Button tool small secondary @click="onEditWellKnown(domain)" v-tooltip="$t('domains.tooltipWellKnown')" icon="fa-solid fa-atlas" />
-                <Button tool small secondary @click="onEdit(domain)" v-tooltip="$t('domains.tooltipEdit')" icon="fa-solid fa-pencil-alt" />
-                <Button tool small danger @click="onRemove(domain)" v-tooltip="$t('domains.tooltipRemove')" :disabled="domain.domain === adminDomain" icon="fa-solid fa-trash-alt" />
-              </ButtonGroup>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <div class="pull-left">
-        {{ $t('domains.count', { count: domains.length || 0 }) }}
-      </div>
-      <div class="pull-right" ng-show="domains.length > pageSize">
-        <button class="btn btn-default btn-outline btn-xs" ng-click="showPrevPage()" ng-class="{ 'btn-primary': currentPage > 1 }" ng-disabled="currentPage <= 1"><i class="fa fa-angle-double-left"></i> {{ 'main.pagination.prev' | tr }}</button>
-        <span style="margin: 0 5px; line-height: 1.5; font-size: 12px;">{{ currentPage }}</span>
-        <button class="btn btn-default btn-outline btn-xs" ng-click="showNextPage()" ng-class="{ 'btn-primary': (domains | filter:domainSearchString).length > (currentPage * pageSize) }" ng-disabled="(domains | filter:domainSearchString).length <= (currentPage * pageSize)">{{ 'main.pagination.next' | tr }} <i class="fa fa-angle-double-right"></i></button>
-      </div>
+      <TableView :model="filteredDomains" :columns="columns" style="max-height: 900px;">
+        <template #provider="domain">
+          {{ prettyProviderName(domain) }}
+        </template>
+        <template #actions="domain">
+          <div class="table-actions">
+            <ButtonGroup>
+              <Button tool small secondary @click="onEditWellKnown(domain)" v-tooltip="$t('domains.tooltipWellKnown')" icon="fa-solid fa-atlas" />
+              <Button tool small secondary @click="onEdit(domain)" v-tooltip="$t('domains.tooltipEdit')" icon="fa-solid fa-pencil-alt" />
+              <Button tool small danger @click="onRemove(domain)" v-tooltip="$t('domains.tooltipRemove')" :disabled="domain.domain === adminDomain" icon="fa-solid fa-trash-alt" />
+            </ButtonGroup>
+          </div>
+        </template>
+      </TableView>
     </Section>
 
     <Certificates />