You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and dots ('.'), can be up to 35 characters long. Letters must be lowercase.
70 lines
2.8 KiB
70 lines
2.8 KiB
<script setup> |
|
import { Link } from '@inertiajs/vue3'; |
|
import { useForm } from '@inertiajs/vue3'; |
|
import { reactive } from 'vue'; |
|
import Edit from './Edit.vue'; |
|
import axios from 'axios'; |
|
import Utils from '@/utils'; |
|
|
|
const props = defineProps({ |
|
photo: { |
|
type: Object, |
|
required: true, |
|
}, |
|
index: { |
|
type: Number, |
|
required: true, |
|
}, |
|
length: { |
|
type: Number, |
|
required: true, |
|
}, |
|
columns: { |
|
type: Number, |
|
default: 3, |
|
}, |
|
noEdit: { |
|
type: Boolean, |
|
default: false |
|
} |
|
}); |
|
|
|
const photoState = reactive({ edit: false }); |
|
|
|
const emits = defineEmits(["full-screen", "delete-photo"]); |
|
|
|
|
|
</script> |
|
|
|
<template> |
|
<div :class="{ |
|
'border-r': (props.index + 1) % props.columns != 0, |
|
'border-b': props.index < props.length - props.columns, |
|
'laptop:h-96 h-44': props.columns === 3, |
|
'h-[25rem]': props.columns !== 3, |
|
}" |
|
class="group relative w-full overflow-hidden border-white hover:scale-[1.003] flex items-center bg-black/90"> |
|
<div class="hidden absolute left-0 right-0 top-0 p-2 group-hover:flex justify-between"> |
|
<div class="flex items-center"> |
|
<button @click="() => emits('full-screen', props.photo.uuid)" class="bg-black/50 p-1 rounded-md mr-2"><img src="/icons/full-screen.svg" class="h-6 invert"></button> |
|
<div class="laptop:relative"> |
|
<button v-if="!props.noEdit" @click="photoState.edit = !photoState.edit" class="bg-black/50 p-1 rounded-md mr-2"><img src="/icons/modify.svg" class="h-6 invert"></button> |
|
<Edit v-if="photoState.edit && !props.noEdit" |
|
@close="() => photoState.edit = false" |
|
:photo="props.photo" |
|
:class="'absolute left-0 right-0 top-full mt-2'" |
|
/> |
|
</div> |
|
<button @click="emits('delete-photo', props.photo.uuid)" class="bg-red-600 p-1 rounded-md"><img src="/icons/delete.png" class="h-6 invert"></button> |
|
</div> |
|
</div> |
|
<div class="hidden absolute left-0 right-0 bottom-0 p-2 group-hover:flex justify-between flex-wrap items-end"> |
|
<a :href="props.photo.path" target="_blank" class="bg-black/50 p-1 rounded-md mt-1 h-fit"><img src="/icons/download.png" class="h-6 invert"></a> |
|
<div class="laptop:block hidden text-right bg-black/30 p-1 laptop:px-3 px-1 rounded-md mt-1"> |
|
<p class="laptop:text-sm text-xs text-white">{{ props.photo.name }}</p> |
|
<p class="laptop:text-sm text-xs text-white">publier par {{ props.photo.user.name }}</p> |
|
</div> |
|
</div> |
|
<img :src="Utils.DownloadUrl(props.photo.path)" class="w-full bg-white"> |
|
</div> |
|
</template> |