UPD: use pginator in groups

frontend/src/views/cntl/Groups.vue

@@ -13,29 +13,31 @@
     </p>
     <hr/>
     <Loading :data="[groups]">
-      <template v-for="group in groups">
-        <GroupCard
-          v-bind:key="group.name"
-          :mgrs="mgrs"
-          :group="group"
-          :groups="groups"
-          :create-bcd2-group="createBCD2Group"
-          :create-fqdn2-group="createFQDN2Group"
-          :create-mgr2-group="createMgr2Group"
-          :create-subgroup="createSubgroup"
-          :delete-bcd-item="deleteBCDItem"
-          :delete-mgr-item="deleteMgrItem"
-          :delete-fqdn-item="deleteFQDNItem"
-          :edit-fqdn2-group="editFQDN2Group"
-          :subgroups="groups_by_parent[group.name]"
-          :fqdn2grp="fqdn2grp"
-          :bcds2grp="bcds2grp"
-          :mgrs2grp="mgrs2grp"
-          :delete-group="deleteGroup"
-          :edit-group="editGroup"
-        >
-        </GroupCard>
-      </template>
+      <Paginator :items="groups" items_per_page="15">
+        <template v-slot:item="data">
+          <GroupCard
+            v-bind:key="data.item.name"
+            :mgrs="mgrs"
+            :group=data.item
+            :groups="groups"
+            :create-bcd2-group="createBCD2Group"
+            :create-fqdn2-group="createFQDN2Group"
+            :create-mgr2-group="createMgr2Group"
+            :create-subgroup="createSubgroup"
+            :delete-bcd-item="deleteBCDItem"
+            :delete-mgr-item="deleteMgrItem"
+            :delete-fqdn-item="deleteFQDNItem"
+            :edit-fqdn2-group="editFQDN2Group"
+            :subgroups="groups_by_parent[data.item.name]"
+            :fqdn2grp="fqdn2grp"
+            :bcds2grp="bcds2grp"
+            :mgrs2grp="mgrs2grp"
+            :delete-group="deleteGroup"
+            :edit-group="editGroup"
+          >
+          </GroupCard>
+        </template>
+      </Paginator>
       <div v-if="!groups || groups.length === 0"
            class="font-italic text-center mb-3">
         Keine Gruppen vorhanden
@@ -62,10 +64,11 @@ import FQDN2GroupService from '@/api-services.gen/dns.fqdn2group'
 import GenGroupService from '@/api-services.gen/cntl.group'
 import DBEditor from '@/components/DBEditor'
 import GroupCard from '@/components/GroupCard'
+import Paginator from '@/components/Paginator'
 
 export default {
   name: 'Groups',
-  components: {GroupCard, DBEditor, Loading},
+  components: {Paginator, GroupCard, DBEditor, Loading},
   data() {
     return {
       mgrs: null,