Aktualizace balicku, strnakovani, uprava hlavni stranky

src/components/flights/FlightsList.vue

@@ -2,6 +2,9 @@
 import {minutesToHumanReadable} from "src/composables/datetimeUtils";
 import {flightName} from "src/composables/flight";
 import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
+import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
+import {computed} from "vue";
+import LoadMoreList from "components/LoadMoreList.vue";
 
 const props = defineProps({
   items: {
@@ -12,6 +15,20 @@ const props = defineProps({
     type: Boolean,
     required: true
   },
+  totalItemsCount: {
+    type: Number,
+    required: true
+  },
+  itemsPerPage: {
+    type: Number,
+    required: false,
+    default: 5,
+  },
+  isQueryRunning: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
 });
 
 const routeDetail = (flight) => {
@@ -20,52 +37,75 @@ const routeDetail = (flight) => {
   else
     return {name: "flightDetail", params: {id: flight.id}}
 };
+
+const pluralize = (count, singular, plural, pluralMore) => {
+  if (count === 1) return singular;
+  else if (count < 5) return plural;
+  else return pluralMore;
+}
+const loadMoreCount = computed(() => {
+  const remaining = props.totalItemsCount - props.items.length;
+
+  return Math.min(props.itemsPerPage, remaining);
+});
+
 </script>
 
 <template>
-  <q-list bordered separator>
-    <q-item
-      v-for="flight of items" :key="flight"
-      ripple
-      clickable
-      :to="routeDetail(flight)"
-    >
-      <q-item-section avatar>
-        <AvatarFromPhoto :size="120" v-if="flight.titlePhoto" :src="flight.titlePhoto.thumbnailUrl"/>
-      </q-item-section>
-      <q-item-section>
-        <div class="text-h5 q-mb-md">{{ flightName(flight) }}</div>
+  <LoadMoreList :total-items-count="totalItemsCount" :items-length="items.length">
+    <template #items>
+      <q-list bordered separator>
+        <q-item
+          v-for="flight of items" :key="flight"
+          ripple
+          clickable
+          :to="routeDetail(flight)"
+        >
+          <q-item-section avatar>
+            <AvatarFromPhoto :size="120" v-if="flight.titlePhoto" :src="flight.titlePhoto.thumbnailUrl"/>
+          </q-item-section>
+          <q-item-section>
+            <div class="text-h5 q-mb-md">{{ flightName(flight) }}</div>
 
-        <div class="text-secondary" v-if="props.public">
-          <q-icon name="support_agent"/>
-          @{{flight.pilot.publicUsername}}
-        </div>
+            <div class="text-secondary" v-if="props.public">
+              <q-icon name="support_agent"/>
+              @{{ flight.pilot.publicUsername }}
+            </div>
 
-        <div class="text-secondary" v-if="flight.copilot">
-          <q-icon name="person"/>
-          {{ flight.pilot.name }}
-          {{ flight.copilot.name }}
-        </div>
+            <div class="text-secondary" v-if="flight.copilots">
+              <q-icon name="person"/>
+              {{ flight.pilot.name }}
+              {{ flight.copilots }}
+            </div>
 
-        <div class="text-secondary">
-          <q-icon name="schedule"/>
-          {{ minutesToHumanReadable(flight.durationMinCalculated) }}
-        </div>
-        <div class="text-secondary">
-          <q-icon name="flight"/>
-          {{ flight.aircraft.callSign }}
-        </div>
+            <div class="text-secondary">
+              <q-icon name="schedule"/>
+              {{ minutesToHumanReadable(flight.durationMinCalculated) }}
+            </div>
+            <div class="text-secondary">
+              <q-icon name="flight"/>
+              {{ flight.aircraft.callSign }}
+            </div>
 
-        <div class="text-secondary" v-if="flight.event">
-          <q-icon name="event"/>
-          {{ flight.event.name }}
-        </div>
-      </q-item-section>
+            <div class="text-secondary" v-if="flight.event">
+              <q-icon name="event"/>
+              {{ flight.event.name }}
+            </div>
+          </q-item-section>
+
+          <q-item-section side top v-if="flight.isPublic && !props.public">
+            <!-- Zobraz jen v adminu -->
+            <q-icon name="visibility"></q-icon>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </template>
+    <template #skeleton>
+      <FlightsListSkeleton :items="itemsPerPage"/>
+    </template>
+    <template #loadMoreText>
+      Načíst {{ pluralize(loadMoreCount, 'jeden let', `další ${loadMoreCount} lety`, `dalších ${loadMoreCount} letů`) }}
+    </template>
+  </LoadMoreList>
 
-      <q-item-section side top v-if="flight.isPublic && !props.public">
-        <!-- Zobraz jen v adminu -->
-        <q-icon name="visibility"></q-icon>
-      </q-item-section>
-    </q-item>
-  </q-list>
 </template>