Aktualizace balicku, strnakovani, uprava hlavni stranky

src/components/poi/POIList.vue

@@ -1,4 +1,8 @@
 <script setup>
+import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
+import LoadMoreList from "components/LoadMoreList.vue";
+import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
+
 const props = defineProps({
   items: {
     type: Array,
@@ -7,6 +11,20 @@ const props = defineProps({
   public: {
     type: Boolean,
     required: true
+  },
+  totalItemsCount: {
+    type: Number,
+    required: true
+  },
+  itemsPerPage: {
+    type: Number,
+    required: false,
+    default: 5,
+  },
+  isQueryRunning: {
+    type: Boolean,
+    required: false,
+    default: false
   }
 });
 
@@ -18,23 +36,33 @@ const getRoute = (item) => {
 }
 </script>
 <template>
-  <q-list bordered separator>
-    <q-item clickable v-ripple v-for="poi of items" :key="poi" :to="getRoute(poi)">
-      <q-item-section avatar>
-        <q-avatar v-if="poi.titlePhoto">
-          <img :src="poi.titlePhoto.thumbnailUrl" alt=""/>
-        </q-avatar>
-        <q-avatar v-else :icon="poi.type?.icon || 'place'" color="primary" text-color="white"/>
-      </q-item-section>
-      <q-item-section>
-        {{ poi.name }}
-        <div class="text-secondary" v-if="poi.type">
-          {{ poi.type.name }}
-        </div>
-      </q-item-section>
-      <q-item-section side top v-if="poi.isPublic">
-        <q-icon name="visibility"></q-icon>
-      </q-item-section>
-    </q-item>
-  </q-list>
+  <LoadMoreList :total-items-count="totalItemsCount" :items-length="items.length">
+    <template #items>
+      <q-list bordered separator>
+        <q-item clickable v-ripple v-for="poi of items" :key="poi" :to="getRoute(poi)">
+          <q-item-section avatar>
+            <q-avatar v-if="poi.titlePhoto">
+              <img :src="poi.titlePhoto.thumbnailUrl" alt=""/>
+            </q-avatar>
+            <q-avatar v-else :icon="poi.type?.icon || 'place'" color="primary" text-color="white"/>
+          </q-item-section>
+          <q-item-section>
+            {{ poi.name }}
+            <div class="text-secondary" v-if="poi.type">
+              {{ poi.type.name }}
+            </div>
+          </q-item-section>
+          <q-item-section side top v-if="!props.public && poi.isPublic">
+            <q-icon name="visibility"></q-icon>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </template>
+    <template #skeleton>
+      <BasicListSkeleton :items="itemsPerPage"/>
+    </template>
+    <template #loadMoreText>
+      Další
+    </template>
+  </LoadMoreList>
 </template>