Policy List Scroller

Signed-off-by: Frank Jogeleit <[email protected]>

frontend/modules/core/components/policy/Item.vue

@@ -41,6 +41,6 @@ const props = defineProps({
 
 const status = useStatusInjection()
 
-const showSkipped = computed(() => console.log(status.value.includes(Status.SKIP) && !!props.item?.results[Status.SKIP]) || status.value.includes(Status.SKIP) && !!props.item?.results[Status.SKIP])
+const showSkipped = computed(() => status.value.includes(Status.SKIP) && !!props.item?.results[Status.SKIP])
 const showed = computed(() => status.value.filter((s) => s !== Status.SKIP))
 </script>

frontend/modules/core/components/policy/List.vue

@@ -13,7 +13,11 @@
   </v-list>
   <template v-else>
     <v-list v-if="list.length && open" lines="two" class="mt-0 pt-0 pb-0 mb-0">
-      <PolicyItem v-for="item in list" :key="item.name" :item="item" :details="false" />
+      <policy-list-scroller :list="list" :default-loadings="3" key-prop="name">
+        <template #default="{ item }">
+          <PolicyItem :item="item" :details="false" />
+        </template>
+      </policy-list-scroller>
     </v-list>
     <template v-if="!list.length">
       <v-divider />

frontend/modules/core/components/policy/ListScroller.vue

@@ -0,0 +1,29 @@
+<template>
+  <v-infinite-scroll :onLoad="load" class="no-scrollbar pb-0 mb-0" v-if="loaded.length">
+    <template v-for="item in loaded" :key="keyProp ? item[keyProp] : item">
+      <slot :item="item" />
+    </template>
+    <template #empty></template>
+  </v-infinite-scroll>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ list: any[]; defaultLoadings: number; keyProp?: string }>()
+
+const max = props.list.length
+
+const loaded = ref<any[]>(max ? props.list.slice(0, Math.min(max, props.defaultLoadings)) : [])
+
+const load = ({ done }: any) => {
+  const current = loaded.value.length
+
+  loaded.value = [...loaded.value, ...props.list.slice(current, Math.min(max, current + props.defaultLoadings))]
+
+  if (loaded.value.length === props.list.length) {
+    done('empty')
+  } else {
+    done('ok')
+  }
+}
+
+</script>

frontend/modules/core/provider/dashboard.ts

@@ -3,4 +3,3 @@ export const ShowedStatus = Symbol('show status chip')
 export const NamespacedKinds = Symbol('namespaced kind filters')
 export const ClusterKinds = Symbol('cluster kind filters')
 export const SourceContext = Symbol('source context')
-