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.
179 lines
7.3 KiB
179 lines
7.3 KiB
<script setup> |
|
import { Head, Link, useForm } from '@inertiajs/vue3'; |
|
import Layout from '@/Layouts/Layout.vue'; |
|
import Create from '@/Pages/Photo/Partials/Create.vue'; |
|
import Show from'@/Pages/Photo/Partials/Show.vue'; |
|
import Modal from '@/Pages/Photo/Partials/Modal.vue'; |
|
import { onMounted, reactive, ref } from 'vue'; |
|
import Edit from './Partials/Edit.vue'; |
|
import Panel from '../Photo/Partials/Panel.vue'; |
|
import Platform from '@/platform'; |
|
import Utils from '@/utils'; |
|
|
|
const props = defineProps({ |
|
album: { |
|
type: Object, |
|
default: {} |
|
}, |
|
photos: { |
|
type: Array, |
|
default: [] |
|
}, |
|
lastPage: { |
|
type: Number, |
|
default: 1, |
|
} |
|
}); |
|
|
|
const form = useForm({ uuids: [] }); |
|
const create = reactive({ active: false }); |
|
const edit = ref(false); |
|
|
|
const fullScreenState = reactive({ photo: {}, active: false , prev: { square: true, list: false, } }); |
|
const photoState = reactive({ square: true, list: false, pageCount: 1, photos: props.photos }); |
|
|
|
const fullScreen = (photo) => { |
|
fullScreenState.photo = photo; |
|
fullScreenState.active = true; |
|
fullScreenState.prev.square = photoState.square; |
|
fullScreenState.prev.list = photoState.list; |
|
photoState.square = false; |
|
photoState.list = false; |
|
} |
|
|
|
const gridState = reactive({ columns: 3 }); |
|
|
|
const squareView = () => { |
|
gridState.columns = 3; |
|
fullScreenState.active = false; |
|
photoState.square = true; |
|
photoState.list = false; |
|
} |
|
|
|
const listView = () => { |
|
gridState.columns = 1; |
|
fullScreenState.active = false; |
|
photoState.square = false; |
|
photoState.list = true; |
|
} |
|
|
|
const backView = () => { |
|
fullScreenState.photo = {}; |
|
fullScreenState.active = false; |
|
photoState.square = fullScreenState.prev.square; |
|
photoState.list = fullScreenState.prev.list; |
|
} |
|
|
|
const addPhotos = (uuids) => { |
|
console.log("uuid"); |
|
form.uuids = uuids; |
|
form.post("/album/" + props.album.uuid + "/add",{ |
|
headers: { |
|
"X-CSRF-Token": document.querySelector('input[name=_token]').value, |
|
}, |
|
onSuccess: () => window.location.reload() |
|
}); |
|
} |
|
|
|
const loadPhotos = async () => { |
|
photoState.pageCount++; |
|
const res = await axios.get(route("album.photo.page", { |
|
id: props.album.uuid, |
|
page: photoState.pageCount |
|
})); |
|
photoState.photos = photoState.photos.concat(res.data.photos) |
|
console.log("hello", res.data.photos, photoState.photos, props.lastPage) |
|
} |
|
|
|
const deletePhoto = (uuid) => { |
|
if(confirm("Voulez-vous vraiment retirer cette photo de l'album")){ |
|
form.delete(route("album.photo.remove", {id: props.album.uuid, photoId: uuid}), { |
|
headers: { |
|
"X-CSRF-Token": document.querySelector('input[name=_token]').value, |
|
}, |
|
onSuccess: () => { |
|
photoState.photos = photoState.photos.filter(photo => photo.uuid != uuid); |
|
} |
|
}); |
|
} |
|
} |
|
|
|
onMounted(() => { |
|
if(Platform.detect() == "mobile") { |
|
listView(); |
|
} |
|
}); |
|
</script> |
|
|
|
<template> |
|
<Head title="Photos"/> |
|
<Layout> |
|
<template #header> |
|
<div class="w-full flex justify-between items-center py-1"> |
|
<div class="relative flex items-center"> |
|
<div id="affichage" class="static flex items-center bg-white rounded-md shadow-sm shadow-gray-300 overflow-hidden mx-2"> |
|
<button @click="squareView" :class="{'bg-black/5': photoState.square}" class="flex items-center h-full border-r border-gray-400 p-1 |
|
hover:bg-black/5"> |
|
<img src="/icons/block-content.svg" class="h-7"> |
|
</button> |
|
<button @click="listView" :class="{'bg-black/5': photoState.list}" class="flex items-center h-full border-r border-gray-400 p-1 |
|
hover:bg-black/5"> |
|
<img src="/icons/list.svg" class="h-7"> |
|
</button> |
|
<button @click="() => fullScreen(photoState.photos[0].uuid)" :class="{'bg-black/5': fullScreenState.active}" class="flex items-center p-1 |
|
hover:bg-black/5"> |
|
<img src="/icons/slider.svg" class="h-7"> |
|
</button> |
|
</div> |
|
</div> |
|
<div class="relative flex items-center"> |
|
<div id="affichage" class="static flex items-center bg-white rounded-md shadow-sm shadow-gray-300 overflow-hidden mx-2"> |
|
<button @click="edit = !edit" class="flex items-center h-full border-r border-gray-400 p-1 |
|
hover:bg-black/5"> |
|
<img src="/icons/modify.svg" class="h-7"> |
|
</button> |
|
<button @click="create.active = !create.active" |
|
class="flex items-center h-full p-1 |
|
hover:bg-black/5"> |
|
<img src="/icons/add.svg" class="h-7"> |
|
</button> |
|
</div> |
|
<div class="absolute top-full right-0 mt-3 z-10"> |
|
<Edit v-if="edit" :album="album" @close="edit = false"/> |
|
</div> |
|
<Panel @data="(uuids) => addPhotos(uuids)" @close="create.active = !create.active" v-if="create.active" :album="props.album" |
|
class="absolute right-0 top-[110%] z-10 mt-4 " /> |
|
</div> |
|
</div> |
|
</template> |
|
<template #content> |
|
<div class="w-full desktop:px-[17.5%] laptop:px-[12.5%] h-full"> |
|
<div v-if="!fullScreenState.active" class="w-full laptop:h-96 flex laptop:flex-row flex-col items-stretch justify-stretch overflow-hidden"> |
|
<img :src="Utils.DownloadUrl(album.image)"> |
|
<div class="w-full h-full laptop:px-10 px-3 py-6"> |
|
<p class="text-7xl font-extrabold text-black/90">{{ album.name }}</p> |
|
<p class="pt-1 pl-2 text-2xl font-extrabold text-black/90">publiée le {{ album.created_at }}</p> |
|
</div> |
|
</div> |
|
<div class="w-full h-full pb-20 bg-black/5"> |
|
<div v-if="!fullScreenState.active" :class="{'grid-cols-3': gridState.columns === 3}" |
|
class="w-full grid pt-10"> |
|
<Show v-for="(photo, index) in photoState.photos" |
|
:photo="photo" :index="index" :length="photoState.photos.length" :columns="gridState.columns" :noEdit="true" |
|
@full-screen="fullScreen" |
|
@delete-photo="deletePhoto" |
|
/> |
|
</div> |
|
<div v-if="!fullScreenState.active && photoState.pageCount < props.lastPage" class="w-full pt-5 flex items-center justify-center"> |
|
<button @click="loadPhotos" |
|
class="bg-gray-100 p-2 font-medium text-gray-700 rounded shadow hover:scale-[1.01]">Afficher plus de photos</button> |
|
</div> |
|
<Modal v-if="fullScreenState.active" :photoId="fullScreenState.photo" :photos="photoState.photos" |
|
@close="backView" |
|
/> |
|
</div> |
|
|
|
</div> |
|
</template> |
|
</Layout> |
|
</template> |