Lepsi verejna cast, ssr, lepsi prace s fotkamaa

src/components/photos/PhotosEditorList.vue

@@ -3,24 +3,29 @@ import {computed, onMounted, reactive, ref, watch} from "vue";
 import {useQuasar} from "quasar";
 import {confirmObject} from "src/composables/dialog";
 
-const $q = useQuasar();
-
-
 const props = defineProps({
   photos: {
     type: Array
   },
-});
-
-const batchEdit = ref({});
-
-onMounted(() => {
-  for (const photo of props.photos) {
-    batchEdit.value[photo.id] = false;
+  titlePhoto: {
+    type: Object,
+  },
+  showActions: {
+    type: Boolean,
+    required: false,
+    default: true
   }
 });
 
-const emits = defineEmits(["edit", "delete", "batch-edit", "batch-rotate"])
+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);
@@ -29,20 +34,20 @@ const openEdit = (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;
-        }
-      });
+    .onOk(() => {
+      for (const id in batchEdit.value) {
+        if (!batchEdit.value[id]) continue;
+        emits("delete", parseInt(id));
+        batchEdit.value[id] = false;
+      }
+    });
 }
 
 const handleImageClick = (photo, idx) => {
@@ -108,6 +113,10 @@ const batchOptionsProps = computed(() => ({
   class: "q-ml-lg",
   disable: !isBatchEditAllowed.value
 }));
+
+const setFlightCover = (titlePhoto) => {
+  emits("set-title-photo", titlePhoto);
+}
 </script>
 
 <template>
@@ -115,6 +124,15 @@ const batchOptionsProps = computed(() => ({
     <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">
+          <div class="absolute-top bg-transparent text-right">
+            <q-btn
+              icon="star"
+              :color="titlePhoto?.id === photo.id ? 'amber-9' : 'grey-6'"
+              round
+              @click.stop.prevent="setFlightCover(photo)"
+            />
+          </div>
+
           <div class="absolute-bottom" v-if="photo.name !== '' || photo.description !== ''">
             <div class="text-h6" v-if="photo.name !== ''">
               {{ photo.name }}
@@ -125,24 +143,26 @@ const batchOptionsProps = computed(() => ({
           </div>
         </q-img>
 
-        <q-card-actions align="right" :class="{'bg-primary': batchEdit[photo.id], 'text-white': batchEdit[photo.id]}">
+        <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]"/>
-            <q-icon name="star" v-if="photo.isFlightCover" color="red"/>
+
+            <q-icon name="flight" v-if="photo.isAircraft" size="xs" color="grey-5" />
+            <q-icon name="person" v-if="photo.copilots.length > 0" size="xs" color="grey-5" />
           </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="edit" color="blue" @click="openEdit(photo)"/>
+          <q-btn flat icon="tune" color="black" :to="{name: 'photoEditor', params: {id: photo.id}}"/>
           <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">
+  <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="info" :color="isBatchEditAllowed ? 'primary' : 'grey'" @click="openBatchEdit"/>
+        <q-btn v-bind="batchOptionsProps" icon="edit" :color="isBatchEditAllowed ? 'primary' : 'grey'" @click="openBatchEdit"/>
         <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"/>