UPD: use paginator for macauth

frontend/src/views/macauth/MACAuth.vue

 <template>
   <div id="MACAuth">
     <h1 class="my-4">MACAuth</h1>
-    <b-input-group class="shadow mb-4">
-      <b-input-group-prepend>
-        <b-input-group-text>
-          <font-awesome-icon :icon="['fas', 'filter']"/>
-        </b-input-group-text>
-      </b-input-group-prepend>
-      <b-form-input id="filter-input" v-model.trim="filter_text" placeholder="Filter"
-                    autofocus debounce="300"/>
-    </b-input-group>
-    <Loading :data="[filtered_bcds, clients_by_bcd]">
-      <template v-for="bcd in filtered_bcds">
-        <b-card no-body :key="'card-bcd-' + bcd.name" class="mb-4 shadow">
-          <template v-slot:header>
-            <b-row>
-              <b-col lg="3">
-                <h4>
-                  {{ bcd.name }}
-                  <b-badge variant="success">
-                    <template v-if="bcd.name in clients_by_bcd">
-                      <template v-if="clients_by_bcd[bcd.name].length === 1">
-                        1 Client
+    <Loading :data="[clients_by_bcd]">
+      <Paginator items_per_page="15" :items="bcds">
+        <template v-slot:item="card_data">
+          <b-card no-body :key="'card-bcd-' + card_data.item.name" class="mb-4 shadow">
+            <template v-slot:header>
+              <b-row>
+                <b-col lg="3">
+                  <h4>
+                    {{ card_data.item.name }}
+                    <b-badge variant="success">
+                      <template v-if="card_data.item.name in clients_by_bcd">
+                        <template v-if="clients_by_bcd[card_data.item.name].length === 1">
+                          1 Client
+                        </template>
+                        <template v-else>{{ clients_by_bcd[card_data.item.name].length }} Clients
+                        </template>
                       </template>
-                      <template v-else>{{ clients_by_bcd[bcd.name].length }} Clients
-                      </template>
-                    </template>
-                    <template v-else>0 Clients</template>
-                  </b-badge>
-                </h4>
-                <p class="text-muted">Broadcastdomain</p>
-              </b-col>
-              <b-col>
-                <div v-if="bcd.description === '' || bcd.description == null">Keine Beschreibung vorhanden.</div>
-                <div v-else>{{ bcd.description }}</div>
-                <p class="text-muted">Beschreibung</p>
-              </b-col>
-            </b-row>
-          </template>
-          <b-button block squared variant="outline-secondary" v-b-toggle="bcd.name + '-collapse'">
-            <font-awesome-icon class="collapse-icon" :icon="['fas','chevron-down']"/>
-          </b-button>
-          <b-collapse :id="bcd.name + '-collapse'">
-            <b-table :items="clients_by_bcd[bcd.name]"
-                     :fields="macauth_fields"
-                     class="m-0"
-                     striped
-                     responsive
-                     primary-key="description">
-              <template v-slot:head(buttons)>
-                <b-button block variant="outline-success"
-                          :id="'button-create-client-' +  bcd.name"
-                          @click="createClient(bcd)">
-                  <font-awesome-icon :icon="['fas', 'plus']"/>
-                </b-button>
-                <b-tooltip :target="'button-create-client-' +  bcd.name" triggers="hover"
-                           variant="success" placement="left">
-                  Client hinzufügen
-                </b-tooltip>
-              </template>
-              <template v-slot:cell(wpa_key)="data">
+                      <template v-else>0 Clients</template>
+                    </b-badge>
+                  </h4>
+                  <p class="text-muted">Broadcastdomain</p>
+                </b-col>
+                <b-col>
+                  <div v-if="card_data.item.description === '' || card_data.item.description == null">Keine Beschreibung
+                    vorhanden.
+                  </div>
+                  <div v-else>{{ card_data.item.description }}</div>
+                  <p class="text-muted">Beschreibung</p>
+                </b-col>
+              </b-row>
+            </template>
+            <b-button block squared variant="outline-secondary" v-b-toggle="card_data.item.name + '-collapse'">
+              <font-awesome-icon class="collapse-icon" :icon="['fas','chevron-down']"/>
+            </b-button>
+            <b-collapse :id="card_data.item.name + '-collapse'">
+              <b-table :items="clients_by_bcd[card_data.item.name]"
+                       :fields="macauth_fields"
+                       class="m-0"
+                       striped
+                       responsive
+                       primary-key="description">
+                <template v-slot:head(buttons)>
+                  <b-button block variant="outline-success"
+                            :id="'button-create-client-' +  card_data.item.name"
+                            @click="createClient(bcd)">
+                    <font-awesome-icon :icon="['fas', 'plus']"/>
+                  </b-button>
+                  <b-tooltip :target="'button-create-client-' +  card_data.item.name" triggers="hover"
+                             variant="success" placement="left">
+                    Client hinzufügen
+                  </b-tooltip>
+                </template>
+                <template v-slot:cell(wpa_key)="data">
                 <span v-if="data.item.wpa_key !== null">
-                <b-button block :id="'show-wpa-key-' + bcd.name + '-' + data.index" variant="primary">
+                <b-button block :id="'show-wpa-key-' + card_data.item.name + '-' + data.index" variant="primary">
                   <font-awesome-icon :icon="['fas','eye']"/>
                 </b-button>
-                <b-popover :target="'show-wpa-key-' + bcd.name + '-' + data.index"
+                <b-popover :target="'show-wpa-key-' + card_data.item.name + '-' + data.index"
                            triggers="focus" custom-class="popover-wide">
                   <CopyField :text="data.item.wpa_key" code/>
                 </b-popover></span>
-                <span v-else class="text-center"><p><font-awesome-icon :icon="['fas', 'eye-slash']"></font-awesome-icon></p></span>
-              </template>
-              <template v-slot:cell(last_login_date)="data">
-                {{ formatDate(data.item.last_login_date) }}
-              </template>
-              <template v-slot:cell(mac_addr)="data">
-                <code>{{ data.item.mac_addr }}</code>
-              </template>
-              <template v-slot:cell(buttons)="data">
-                <b-button-group class="fullwidth">
-                  <b-button variant="outline-primary"
-                            :id="'button-edit-client-' + bcd.name + '-' + data.index"
-                            @click="editClient(data.item)">
-                    <font-awesome-icon :icon="['far', 'edit']"/>
-                  </b-button>
-                  <b-tooltip :target="'button-edit-client-' + bcd.name + '-' + data.index"
-                             triggers="hover" variant="primary" placement="top">
-                    Client bearbeiten
-                  </b-tooltip>
-                  <b-button variant="outline-danger"
-                            :id="'button-delete-client-' + bcd.name + '-' + data.index"
-                            @click="deleteClient(data.item)">
-                    <font-awesome-icon :icon="['far', 'trash-alt']"/>
-                  </b-button>
-                  <b-tooltip :target="'button-delete-client-' + bcd.name + '-' + data.index"
-                             triggers="hover" variant="danger" placement="top">
-                    Client entfernen
-                  </b-tooltip>
-                </b-button-group>
-              </template>
-            </b-table>
-          </b-collapse>
-        </b-card>
-      </template>
+                  <span v-else class="text-center"><p><font-awesome-icon
+                    :icon="['fas', 'eye-slash']"></font-awesome-icon></p></span>
+                </template>
+                <template v-slot:cell(last_login_date)="data">
+                  {{ formatDate(data.item.last_login_date) }}
+                </template>
+                <template v-slot:cell(mac_addr)="data">
+                  <code>{{ data.item.mac_addr }}</code>
+                </template>
+                <template v-slot:cell(buttons)="data">
+                  <b-button-group class="fullwidth">
+                    <b-button variant="outline-primary"
+                              :id="'button-edit-client-' + card_data.item.name + '-' + data.index"
+                              @click="editClient(data.item)">
+                      <font-awesome-icon :icon="['far', 'edit']"/>
+                    </b-button>
+                    <b-tooltip :target="'button-edit-client-' + card_data.item.name + '-' + data.index"
+                               triggers="hover" variant="primary" placement="top">
+                      Client bearbeiten
+                    </b-tooltip>
+                    <b-button variant="outline-danger"
+                              :id="'button-delete-client-' + card_data.item.name + '-' + data.index"
+                              @click="deleteClient(data.item)">
+                      <font-awesome-icon :icon="['far', 'trash-alt']"/>
+                    </b-button>
+                    <b-tooltip :target="'button-delete-client-' + card_data.item.name + '-' + data.index"
+                               triggers="hover" variant="danger" placement="top">
+                      Client entfernen
+                    </b-tooltip>
+                  </b-button-group>
+                </template>
+              </b-table>
+            </b-collapse>
+          </b-card>
+        </template>
+      </Paginator>
       <DBEditor object_fq_name="macauth.client" :object_function="db_editor_object_function"
                 modal_id="dbeditor_macauth" :old_data="db_editor_old_data" :presets="db_editor_presets"
                 :non_optionals_order="['bcd_name', 'mac_addr', 'description', 'do_refresh_wpa_key']"
@@ -119,10 +115,11 @@ import DBEditor from '@/components/DBEditor'
 import transactionutil from '@/util/transactionutil'
 import MACAuthService from '@/api-services.gen/macauth.client'
 import CopyField from '@/components/CopyField'
+import Paginator from '@/components/Paginator'
 
 export default {
   name: 'macauth',
-  components: {CopyField, DBEditor, Loading},
+  components: {Paginator, CopyField, DBEditor, Loading},
   data() {
     return {
       db_editor_object_function: 'create',
@@ -161,20 +158,6 @@ export default {
       waiting: false
     }
   },
-  computed: {
-    filtered_bcds() {
-      if (this.bcds == null) {
-        return null
-      }
-      if (this.filter_text === '') {
-        return this.bcds
-      }
-      return this.bcds.filter(bcd => {
-        return bcd.name.toLowerCase().includes(this.filter_text.toLowerCase()) ||
-          (bcd.description != null && bcd.description.toLowerCase().includes(this.filter_text.toLowerCase()))
-      })
-    }
-  },
   created() {
     this.fetchData()
   },