Added album name modification

beta
anulax1225 ago%!(EXTRA string=2 days)
parent 0939f24dff
commit d396470fe5
  1. 2
      app/Http/Controllers/AlbumController.php
  2. 8
      resources/js/Pages/Album/Partials/Edit.vue
  3. 23
      resources/js/Pages/Album/Show.vue

@ -119,7 +119,7 @@ public function update(Request $request, string $id)
$album->update([ $album->update([
"name" => $request->name "name" => $request->name
]); ]);
return redirect(route("album.index"))->with(["message" => "Album modifié avec success"]); return redirect()->back()->with(["message" => "Album modifié avec success"]);
} }
public function addPhotos(Request $request) public function addPhotos(Request $request)

@ -11,7 +11,7 @@ const props = defineProps({
}) })
const form = useForm({ const form = useForm({
name: "" name: props.album.name
}); });
const emits = defineEmits(["close"]); const emits = defineEmits(["close"]);
@ -29,11 +29,11 @@ const submit = () => {
<template> <template>
<div class="text-left text-black shadow-md shadow-gray-500 rounded-lg z-40 <div class="text-left text-black shadow-md shadow-gray-500 rounded-lg z-40
bg-gray-50 overflow-hidden border border-gray-300 p-2 w-72 pointer-events-none"> bg-gray-50 overflow-hidden border border-gray-300 p-2 w-72">
<form> <form @submit.prevent="submit">
<TextInput :placeholder="'Changer le nom de la album'" :class="'w-full'" v-model="form.name"/> <TextInput :placeholder="'Changer le nom de la album'" :class="'w-full'" v-model="form.name"/>
<div class="w-full flex mt-3"> <div class="w-full flex mt-3">
<button @click.prevent="submit" class="text-white font-semibold p-1 px-2 bg-primary rounded-md">Changer</button> <button type="submit" class="text-white font-semibold p-1 px-2 bg-primary rounded-md">Changer</button>
</div> </div>
</form> </form>
</div> </div>

@ -5,8 +5,10 @@ import Create from '@/Pages/Photo/Partials/Create.vue';
import Show from'@/Pages/Photo/Partials/Show.vue'; import Show from'@/Pages/Photo/Partials/Show.vue';
import Modal from '@/Pages/Photo/Partials/Modal.vue'; import Modal from '@/Pages/Photo/Partials/Modal.vue';
import { onMounted, reactive, ref } from 'vue'; import { onMounted, reactive, ref } from 'vue';
import Edit from './Partials/Edit.vue';
import Panel from '../Photo/Partials/Panel.vue'; import Panel from '../Photo/Partials/Panel.vue';
import Platform from '@/platform'; import Platform from '@/platform';
import Utils from '@/utils';
const props = defineProps({ const props = defineProps({
album: { album: {
@ -25,6 +27,7 @@ const props = defineProps({
const form = useForm({ uuids: [] }); const form = useForm({ uuids: [] });
const create = reactive({ active: false }); const create = reactive({ active: false });
const edit = ref(false);
const fullScreenState = reactive({ photo: {}, active: false , prev: { square: true, list: 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 photoState = reactive({ square: true, list: false, pageCount: 1, photos: props.photos });
@ -124,10 +127,20 @@ onMounted(() => {
</div> </div>
</div> </div>
<div class="relative flex items-center"> <div class="relative flex items-center">
<button @click="create.active = !create.active" class="flex items-center hover:bg-black/10 rounded-md px-2 py-1"> <div id="affichage" class="static flex items-center bg-white rounded-md shadow-sm shadow-gray-300 overflow-hidden mx-2">
<p class="font-medium laptop:mr-4 mr-1 laptop:text-lg text-sm">Ajouter une photo</p> <button @click="edit = !edit" class="flex items-center h-full border-r border-gray-400 p-1
<img src="/icons/add.svg" class="h-8"> hover:bg-black/5">
</button> <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" <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 " /> class="absolute right-0 top-[110%] z-10 mt-4 " />
</div> </div>
@ -136,7 +149,7 @@ onMounted(() => {
<template #content> <template #content>
<div class="w-full desktop:px-[17.5%] laptop:px-[12.5%] h-full"> <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"> <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="album.image"> <img :src="Utils.DownloadUrl(album.image)">
<div class="w-full h-full laptop:px-10 px-3 py-6"> <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="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> <p class="pt-1 pl-2 text-2xl font-extrabold text-black/90">publiée le {{ album.created_at }}</p>

Loading…
Cancel
Save