Prepracovane zobrazeni seznamu fotke

2023-10-27 23:01:11 +02:00
parent 100e1fa33b
commit a63efc44d8
6 changed files with 132 additions and 60 deletions
@@ -22,22 +22,24 @@ const props = defineProps({
  }
 })

+const $route = useRoute();
+const photoId = parseInt($route.query.photo);
+
 const displayedPhoto = ref(null);
-const openPhotoDetail = ref(false);
-const photoData = ref(null);
-const openDetail = ({photo, idx, allPhotos}) => {
-  openPhotoDetail.value = true;
-  photoData.value = {photo, idx, allPhotos};
-}
+
+const emits = defineEmits(["open-detail"]);

 watch(() => props.photos, (newVal) => {
  if (newVal.length === 0) return;
  displayedPhoto.value = props.coverPhotoUrl || newVal[0].url;
 }, {immediate: true});

-const $route = useRoute();
+
+const openDetail = ({photo, idx, allPhotos}) => {
+  emits("open-detail", {photo, idx, allPhotos});
+}
+
 onMounted(() => {
-  const photoId = parseInt($route.query.photo);
  const idx = props.photos.findIndex(p => p.id === photoId);
  if (idx >= 0) {
    const photo = props.photos[idx];
@@ -75,13 +77,4 @@ onMounted(() => {
      </q-img>
    </q-carousel-slide>
  </q-carousel>
-
-  <PhotoDetail
-    v-if="photoData"
-    v-model="openPhotoDetail"
-    :default-title="defaultTitle"
-    :photo="photoData.photo"
-    :photos="photoData.allPhotos"
-    :opened-index="photoData.idx"
-  />
 </template>
@@ -182,7 +182,6 @@ const showExtraInfo = () => {
                :class='{"shadow-5": true, "active-thumbnail": idx === displayedPhotoIndex}'
              />
            </div>
-
          </div>

          <div class="row" ref="infoWrapper">
@@ -23,7 +23,7 @@ onMounted(() => {
  }
 });

-const emits = defineEmits(["edit", "delete", "batch-edit", "batch-rotate"])
+const emits = defineEmits(["edit", "delete", "batch-edit", "batch-rotate", "photo-click"])

 const openEdit = (photo) => {
  emits("edit", photo);
@@ -33,25 +33,27 @@ const $q = useQuasar();

 const confirmPhotoDelete = (id) => {
  $q.dialog(confirmObject("Opravdu chces smazat tuto fotku?"))
-    .onOk(() => {
-      emits("delete", id);
-    });
+      .onOk(() => {
+        emits("delete", id);
+      });
 }

 const confirmBatchPhotoDelete = () => {
  $q.dialog(confirmObject("Opravdu chces smazat vybrané fotky?"))
-    .onOk(() => {
-      for (const id in batchEdit.value) {
-        if (!batchEdit.value[id]) continue;
-        emits("delete", parseInt(id));
-        batchEdit.value[id] = false;
-      }
-    });
+      .onOk(() => {
+        for (const id in batchEdit.value) {
+          if (!batchEdit.value[id]) continue;
+          emits("delete", parseInt(id));
+          batchEdit.value[id] = false;
+        }
+      });
 }

 const handleImageClick = (photo, idx) => {
  if (props.showActions) {
    batchEdit.value[photo.id] = !batchEdit.value[photo.id];
+  } else {
+    emits("photo-click", {photo, idx});
  }
 }

@@ -120,7 +122,7 @@ const batchOptionsProps = computed(() => ({
  <div class="row">
    <div class="col-6 col-sm-4 col-md-4 col-lg-3" v-for="(photo, idx) in photos" :key="photo.id">
      <q-card :class='{"q-ma-sm": true, "shadow-1": !batchEdit[photo.id], "shadow-10": batchEdit[photo.id]}'>
-        <q-img :src="photo.thumbnailUrl" @click="handleImageClick(photo, idx)">
+        <q-img :src="photo.thumbnailUrl" @click="handleImageClick(photo, idx)" style="cursor: pointer">
          <div class="absolute-bottom" v-if="photo.name !== '' || photo.description !== ''">
            <div class="text-h6" v-if="photo.name !== ''">
              {{ photo.name }}
@@ -139,9 +141,9 @@ const batchOptionsProps = computed(() => ({
            <q-icon name="gps_fixed" v-if="photo.gpsLatitude && photo.gpsLongitude"/>
            <q-icon name="gps_off" v-else/>
          </div>
-          <q-btn flat icon="edit" color="black" :to="{name: 'photoEditor', params: {id: photo.id}}" />
-          <q-btn flat icon="info" color="blue" @click="openEdit(photo)" />
-          <q-btn flat icon="delete" color="red" @click="confirmPhotoDelete(photo.id)" />
+          <q-btn flat icon="edit" color="black" :to="{name: 'photoEditor', params: {id: photo.id}}"/>
+          <q-btn flat icon="info" color="blue" @click="openEdit(photo)"/>
+          <q-btn flat icon="delete" color="red" @click="confirmPhotoDelete(photo.id)"/>
        </q-card-actions>
      </q-card>
    </div>
@@ -0,0 +1,12 @@
+import {ref} from "vue";
+import {flight} from "src/composables/objects/flight";
+
+export const openPhotoDetail = ref(false);
+export const photoData = ref(null);
+export const openDetail = ({photo, idx, allPhotos}) => {
+  openPhotoDetail.value = true;
+  photoData.value = {photo, idx, allPhotos};
+}
+export const openPhotoFromList = ({photo, idx}) => {
+  openDetail({photo, idx, allPhotos: flight.value.photos});
+}
@@ -12,6 +12,10 @@ import PhotoCarousel from "components/photos/PhotoCarousel.vue";
 import FlightTrackMap from "components/flights/FlightTrackMap.vue";
 import {useUserStore} from "stores/User";
 import {storeToRefs} from "pinia";
+import PhotosList from "components/photos/PhotosList.vue";
+import {openDetail, openPhotoDetail, openPhotoFromList, photoData} from "src/composables/photos/photo";
+import PhotoDetail from "components/photos/PhotoDetail.vue";
+import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";

 const $q = useQuasar();
 const $router = useRouter();
@@ -44,11 +48,11 @@ const handleDeleteAndRedirect = () => {
 const togglePublicVisibility = () => {
  const newVisibility = !flight.value.isPublic;
  useFlightsStore()
-    .update(flightId, {isPublic: newVisibility})
-    .then((updatedFlight) => {
-      flight.value = updatedFlight;
-      $q.notify(successObject(newVisibility ? "Úspěšně publikováno" : "Úspěšně skryto"));
-    });
+      .update(flightId, {isPublic: newVisibility})
+      .then((updatedFlight) => {
+        flight.value = updatedFlight;
+        $q.notify(successObject(newVisibility ? "Úspěšně publikováno" : "Úspěšně skryto"));
+      });
 };

 const copyLinkToClipboard = () => {
@@ -69,46 +73,94 @@ const copyLinkToClipboard = () => {

  <q-card class="flight-detail-card" v-else>
    <PhotoCarousel
-      :cover-photo-url="flight.coverPhoto?.url"
-      :carousel-title="flightName(flight)"
-      :photos="flight.photos"
+        :cover-photo-url="flight.coverPhoto?.url"
+        :carousel-title="flightName(flight)"
+        :photos="flight.photos"
+        @open-detail="openDetail"
    />

    <q-card-actions class="q-my-md">
      <div class="col-grow">
        <q-btn
-          flat
-          :to="{name: 'flightEdit', params:{id: flight.id}}"
-          icon="edit"
-          text-color="primary"
-          label="Upravit"
+            flat
+            :to="{name: 'flightEdit', params:{id: flight.id}}"
+            icon="edit"
+            text-color="primary"
+            label="Upravit"
        />

        <q-btn
-          @click="togglePublicVisibility"
-          :icon="flight.isPublic ? 'visibility_off' : 'visibility'"
-          :disable="!loggedUser.publicUsername"
-          flat
-          :label="flight.isPublic ? 'Skrýt' : 'Zveřejnit'"
+            @click="togglePublicVisibility"
+            :icon="flight.isPublic ? 'visibility_off' : 'visibility'"
+            :disable="!loggedUser.publicUsername"
+            flat
+            :label="flight.isPublic ? 'Skrýt' : 'Zveřejnit'"
        />

        <q-btn
-          icon="link"
-          @click="copyLinkToClipboard()"
-          flat
-          v-if="flight.isPublic"
-          label="Získat odkaz"
+            icon="link"
+            @click="copyLinkToClipboard()"
+            flat
+            v-if="flight.isPublic"
+            label="Získat odkaz"
        />
      </div>
      <q-btn @click="handleDeleteAndRedirect" icon="delete" flat text-color="red" label="Smazat"/>
    </q-card-actions>

    <q-card-section>
+      <div class="text-right">
+        <q-btn class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'basic'}}" icon="edit" color="primary">Upravit informace</q-btn>
+      </div>
      <FlightBasicInfo :flight="flight" :show-copilots="true"/>

+      <div class="text-right">
+        <q-btn class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'notes'}}" icon="edit" color="primary">Upravit text</q-btn>
+      </div>
      <article class="q-my-lg" v-html="flight.description"/>

-      <FlightTrackMap :flight="flight"/>
+      <q-separator />
+
+      <div class="text-right">
+        <q-btn class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}" icon="edit" color="primary">Upravit fotky</q-btn>
+      </div>
+      <BasicInfoBanner
+          v-if="flight.photos.length === 0"
+          :route-add="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}"
+      >
+        U tohoto letu nemáš nahrané žádné fotografie.
+      </BasicInfoBanner>
+      <PhotosList
+          v-else
+          :photos="flight.photos"
+          :show-actions="false"
+          @photo-click="openPhotoFromList"
+      />
+
+      <q-separator />
+
+      <div class="text-right">
+        <q-btn class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'track'}}" icon="edit" color="primary">Upravit trasu</q-btn>
+      </div>
+      <BasicInfoBanner
+          v-if="flight.track.length === 0 && !flight.gpxTrack"
+          :route-add="{name: 'flightEdit', params: {id: flightId, step: 'track'}}"
+      >
+        Nemáš nastavenou žádnou trasu.
+      </BasicInfoBanner>
+      <FlightTrackMap
+          v-else
+          :flight="flight"
+      />
    </q-card-section>
  </q-card>
+
+  <PhotoDetail
+      v-if="photoData"
+      v-model="openPhotoDetail"
+      :default-title="flightName(flight)"
+      :photo="photoData.photo"
+      :photos="photoData.allPhotos"
+      :opened-index="photoData.idx"
+  />
 </template>
@@ -10,6 +10,9 @@ import FlightDetailSkeleton from "components/flights/FlightDetailSkeleton.vue";
 import {fetchUser, loading as pilotLoading, user as pilot} from "src/composables/objects/user";
 import PublicProfileSkeleton from "components/profile/PublicProfileSkeleton.vue";
 import PilotProfileCard from "components/profile/PilotProfileCard.vue";
+import PhotosList from "components/photos/PhotosList.vue";
+import PhotoDetail from "components/photos/PhotoDetail.vue";
+import {openDetail, openPhotoDetail, openPhotoFromList, photoData} from "src/composables/photos/photo";

 const routeParams = useRoute().params;
 onMounted(() => {
@@ -26,7 +29,6 @@ watch(flight, (newVal) => {
    {label: flightNameFormatted}
  ]);
 });
-
 </script>

 <template>
@@ -40,18 +42,30 @@ watch(flight, (newVal) => {

      <q-card class="q-mx-md q-my-md flight-detail-card">
        <PhotoCarousel
-            :default-title="flightName(flight)"
+          :default-title="flightName(flight)"
          :cover-photo-url="flight.coverPhoto?.url"
          :photos="flight.photos"
+          @open-detail="openDetail"
        />
        <q-card-section>
          <FlightBasicInfo :flight="flight" :show-copilots="false"/>

          <article class="q-my-lg" v-html="flight.description"/>

+          <PhotosList :photos="flight.photos" :show-actions="false" @photo-click="openPhotoFromList"/>
+
          <FlightTrackMap :flight="flight"/>
        </q-card-section>
      </q-card>
-      </template>
+
+      <PhotoDetail
+        v-if="photoData"
+        v-model="openPhotoDetail"
+        :default-title="flightName(flight)"
+        :photo="photoData.photo"
+        :photos="photoData.allPhotos"
+        :opened-index="photoData.idx"
+      />
+    </template>
  </div>
 </template>