Moznost nahravat fotky copilotem

src/components/flights/FlightBasicInfo.vue

@@ -1,6 +1,7 @@
 <script setup>
 import {FORMAT_DATE, FORMAT_TIME, formatDatetime, minutesToHumanReadable} from "src/composables/datetimeUtils";
 import WeatherInfo from "components/weather/WeatherInfo.vue";
+import CopyLinkButton from "components/inputs/CopyLinkButton.vue";
 
 const props = defineProps({
   flight: {
@@ -26,6 +27,11 @@ const props = defineProps({
     type: Object,
     required: false,
     default: null
+  },
+  loggedUser: {
+    type: Object,
+    required: false,
+    default: null
   }
 })
 </script>
@@ -144,14 +150,31 @@ const props = defineProps({
         <q-item v-for="copilot in flight.copilots" :key="copilot.id">
           <q-item-section avatar>
             <q-icon name="people"/>
-          </q-item-section>
+          </q-item-section>3
           <q-item-section>
-            <router-link
-              v-if="copilot.isPublic"
-              :to="{name: copilotDetailRoute.name, params: {...copilotDetailRoute.params, copilotSlug: copilot.urlSlug, id: copilot.id}}"
-            >
-              {{ copilot.name }}
-            </router-link>
+            <template v-if="copilot.isPublic">
+              <div>
+                <router-link
+                  :to="{name: copilotDetailRoute.name, params: {...copilotDetailRoute.params, copilotSlug: copilot.urlSlug, id: copilot.id}}"
+                >
+                  {{ copilot.name }}
+                </router-link>
+
+                <CopyLinkButton
+                  :route='{
+                  name: "publicCopilotUploadPhoto",
+                  params: {flightSlug: flight.urlSlug, username: loggedUser.publicUsername},
+                  query: {token: copilot.token}
+                }'
+                  icon="cloud_upload"
+                  title="Získat odkaz na nahrání fotek od kopilota"
+                  label=""
+                  round
+                  class="q-mx-3"
+                  v-if="loggedUser && copilot.token"
+                />
+              </div>
+            </template>
             <template v-else> {{ copilot.name }}</template>
           </q-item-section>
         </q-item>

src/components/flights/form/FlightFormPhotos.vue

@@ -1,8 +1,6 @@
 <script setup>
 import FormWrapper from "components/FormWrapper.vue";
 import {reactive} from "vue";
-import ComboboxInput from "components/inputs/ComboboxInput.vue";
-import {roundWithPrecision} from "../../../composables/utils";
 
 const props = defineProps({
     flight: {

src/components/inputs/CopyLinkButton.vue

@@ -7,6 +7,16 @@ const props = defineProps({
   route: {
     type: Object,
     required: true
+  },
+  icon: {
+    type: String,
+    required: false,
+    default: "link"
+  },
+  label: {
+    type: String,
+    required: false,
+    default: "Získat odkaz"
   }
 })
 
@@ -24,9 +34,10 @@ const copyLinkToClipboard = () => {
 
 <template>
   <q-btn
-    icon="link"
-    @click="copyLinkToClipboard()"
+    :icon="icon"
+    :label="label"
+    v-bind="$attrs"
     flat
-    label="Získat odkaz"
+    @click="copyLinkToClipboard()"
   />
 </template>

src/components/photos/PhotosEditorList.vue

@@ -2,6 +2,7 @@
 import {computed, onMounted, reactive, ref, watch} from "vue";
 import {useQuasar} from "quasar";
 import {confirmObject} from "src/composables/dialog";
+import {usePhotoBatchManagement} from "src/composables/photos/batch";
 
 const props = defineProps({
   photos: {
@@ -19,100 +20,23 @@ const props = defineProps({
 
 const $q = useQuasar();
 
-
-const batchEdit = ref({});
-for (const photo of props.photos) {
-  batchEdit.value[photo.id] = false;
-}
-
 const emits = defineEmits(["edit", "delete", "set-title-photo", "batch-edit", "batch-rotate"])
 
 const openEdit = (photo) => {
   emits("edit", photo);
 };
 
-
 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;
-        }
-      });
-}
-
-const handleImageClick = (photo, idx) => {
-  batchEdit.value[photo.id] = !batchEdit.value[photo.id];
-}
-
-const selectedPhotos = computed(() => {
-  const photos = [];
-  for (const i in batchEdit.value) {
-    const photo = props.photos.find(p => p.id === parseInt(i));
-    if (photo && batchEdit.value[i]) photos.push(photo);
-  }
-
-  return photos;
-});
-
-const openBatchEdit = () => {
-  const photos = selectedPhotos.value;
-  for (const i in batchEdit.value) {
-    batchEdit.value[i] = false;
-  }
-  emits('batch-edit', photos);
-}
-
-const batchRotate = (direction) => {
-  const photos = selectedPhotos.value;
-  emits("batch-rotate", {photos, direction});
-}
-
-const isBatchEditAllowed = computed(() => Object.values(batchEdit.value).filter(v => v).length > 0);
-
-const checkAll = ref(false);
-watch(() => checkAll.value, (newVal) => {
-  if (newVal === null) return;
-
-  for (const photo of props.photos) {
-    batchEdit.value[photo.id] = newVal;
-  }
-});
-watch(() => batchEdit.value, () => {
-  let checkedAll = true;
-  let uncheckedAll = true;
-
-  for (const i of Object.keys(batchEdit.value)) {
-    if (typeof batchEdit.value[i] === 'undefined') continue;
-
-    if (batchEdit.value[i]) uncheckedAll = false;
-    if (!batchEdit.value[i]) checkedAll = false;
-  }
-
-  if (checkedAll) {
-    checkAll.value = true;
-  } else if (uncheckedAll) {
-    checkAll.value = false;
-  } else {
-    checkAll.value = null;
-  }
-}, {deep: true});
-
-const batchOptionsProps = computed(() => ({
-  round: true,
-  flat: true,
-  class: "q-ml-lg",
-  disable: !isBatchEditAllowed.value
-}));
+const {
+  openBatchEdit, batchEdit, handleImageClick, confirmBatchPhotoDelete, batchOptionsProps,
+  isBatchEditAllowed, batchRotate, checkAll
+} = usePhotoBatchManagement({photos: props.photos, emits});
 
 const setFlightCover = (titlePhoto) => {
   emits("set-title-photo", titlePhoto);
@@ -136,10 +60,10 @@ const showLarge = (displayedPhoto) => {
               <q-btn icon="fullscreen" color="grey-6" round @click.stop.prevent="showLarge(photo)"/>
             </div>
             <q-btn
-                icon="star"
-                :color="titlePhoto?.id === photo.id ? 'amber-9' : 'grey-6'"
-                round
-                @click.stop.prevent="setFlightCover(photo)"
+              icon="star"
+              :color="titlePhoto?.id === photo.id ? 'amber-9' : 'grey-6'"
+              round
+              @click.stop.prevent="setFlightCover(photo)"
             />
           </div>
 
@@ -183,7 +107,7 @@ const showLarge = (displayedPhoto) => {
   <q-dialog v-model="openPhoto" full-width>
     <q-img :src="photo.url">
       <div class="absolute-top bg-transparent text-right">
-          <q-btn icon="close" round color="primary" @click="openPhoto = false" />
+        <q-btn icon="close" round color="primary" @click="openPhoto = false"/>
       </div>
     </q-img>
   </q-dialog>

src/components/photos/PhotosEditorListSimple.vue

@@ -0,0 +1,63 @@
+<script setup>
+import {useQuasar} from "quasar";
+import {confirmObject} from "src/composables/dialog";
+import {usePhotoBatchManagement} from "src/composables/photos/batch";
+
+const props = defineProps({
+  photos: {
+    type: Array
+  },
+  titlePhoto: {
+    type: Object,
+  },
+  showActions: {
+    type: Boolean,
+    required: false,
+    default: true
+  }
+});
+
+const $q = useQuasar();
+
+
+const emits = defineEmits(["delete", "batch-edit", "batch-rotate"])
+
+const confirmPhotoDelete = (id) => {
+  $q.dialog(confirmObject("Opravdu chces smazat tuto fotku?"))
+    .onOk(() => {
+      emits("delete", id);
+    });
+}
+
+const {
+  batchEdit, handleImageClick, confirmBatchPhotoDelete, batchOptionsProps, isBatchEditAllowed, batchRotate, checkAll
+} = usePhotoBatchManagement({photos: props.photos, emits});
+
+</script>
+
+<template>
+  <div class="row" v-bind="$attrs">
+    <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)" style="cursor: pointer"/>
+        <q-card-actions align="right" :class="{'bg-primary': batchEdit[photo.id], 'text-white': batchEdit[photo.id]}" v-if="showActions">
+          <div class="col-grow">
+            <q-checkbox v-model="batchEdit[photo.id]"/>
+          </div>
+          <q-btn flat icon="delete" color="red" @click="confirmPhotoDelete(photo.id)"/>
+        </q-card-actions>
+      </q-card>
+    </div>
+  </div>
+
+  <q-page-sticky :offset="[50, 50]" position="bottom" v-if="photos.length > 0 && showActions">
+    <q-card>
+      <q-card-actions>
+        <q-checkbox v-model="checkAll" label="Vybrat vše"/>
+        <q-btn v-bind="batchOptionsProps" icon="rotate_90_degrees_ccw" :color="isBatchEditAllowed ? 'secondary' : 'grey'" @click="batchRotate('counterClockwise')"/>
+        <q-btn v-bind="batchOptionsProps" icon="rotate_90_degrees_cw" :color="isBatchEditAllowed ? 'secondary' : 'grey'" @click="batchRotate('clockwise')"/>
+        <q-btn v-bind="batchOptionsProps" icon="delete" :color="isBatchEditAllowed ? 'red' : 'grey'" @click="confirmBatchPhotoDelete"/>
+      </q-card-actions>
+    </q-card>
+  </q-page-sticky>
+</template>