Otaceni fotek

src/components/photos/PhotosList.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {computed, onMounted, ref, watch} from "vue";
+import {computed, onMounted, reactive, ref, watch} from "vue";
 import {useQuasar} from "quasar";
 import {confirmObject} from "src/composables/dialog";
 
@@ -23,7 +23,7 @@ onMounted(() => {
   }
 });
 
-const emits = defineEmits(["edit", "delete", "batch-edit"])
+const emits = defineEmits(["edit", "delete", "batch-edit", "batch-rotate"])
 
 const openEdit = (photo) => {
   emits("edit", photo);
@@ -55,17 +55,29 @@ const handleImageClick = (photo, idx) => {
   }
 }
 
-
-const openBatchEdit = () => {
+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 = (angle) => {
+  const photos = selectedPhotos.value;
+  emits("batch-rotate", {photos, angle});
+}
+
 const isBatchEditAllowed = computed(() => Object.values(batchEdit.value).filter(v => v).length > 0);
 
 const checkAll = ref(false);
@@ -96,6 +108,12 @@ watch(() => batchEdit.value, () => {
   }
 }, {deep: true});
 
+const batchOptionsProps = computed(() => ({
+  round: true,
+  flat: true,
+  class: "q-ml-lg",
+  disable: !isBatchEditAllowed.value
+}));
 </script>
 
 <template>
@@ -133,8 +151,10 @@ watch(() => batchEdit.value, () => {
     <q-card>
       <q-card-actions>
         <q-checkbox v-model="checkAll" label="Vybrat vše"/>
-        <q-btn round class="q-ml-lg" flat icon="edit" :color="isBatchEditAllowed ? 'primary' : 'grey'" :disable="!isBatchEditAllowed" @click="openBatchEdit" v-if="showActions"/>
-        <q-btn round flat icon="delete" :color="isBatchEditAllowed ? 'red' : 'grey'" :disable="!isBatchEditAllowed" @click="confirmBatchPhotoDelete" v-if="showActions"/>
+        <q-btn v-bind="batchOptionsProps" icon="edit" :color="isBatchEditAllowed ? 'primary' : 'grey'" @click="openBatchEdit"/>
+        <q-btn v-bind="batchOptionsProps" icon="rotate_left" :color="isBatchEditAllowed ? 'secondary' : 'grey'" @click="batchRotate(90)"/>
+        <q-btn v-bind="batchOptionsProps" icon="rotate_right" :color="isBatchEditAllowed ? 'secondary' : 'grey'" @click="batchRotate(-90)"/>
+        <q-btn v-bind="batchOptionsProps" icon="delete" :color="isBatchEditAllowed ? 'red' : 'grey'" @click="confirmBatchPhotoDelete"/>
       </q-card-actions>
     </q-card>
   </q-page-sticky>