jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Resolves some UI issues

Browse Source
This commit is contained in:
PascalMarchesseault
2025-01-02 01:31:40 -05:00
parent 6cf9f1876d
commit 1ba7db7eb2
1 changed files with 113 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

181
src/views/creators/CreatorHome.vue
View File

@@ -117,81 +117,100 @@
</h2> </h2>
<!-- 4 images côte à côte --> <!-- 4 images côte à côte -->
<FullscreenImage ref="fullscreenImage" :image-url="currentImage" /> <FullscreenImage ref="fullscreenImage" :image-url="currentImage" />
<div> <div>
<div v-if="isEditMode" class="text-2xl py-2">Images</div> <!-- Mode édition -->
<div class="grid grid-cols-1 gap-4 md:grid-cols-4"> <div v-if="isEditMode">
<!-- Première image --> <div class="text-2xl py-2">Images</div>
<div v-if="image1Url || isEditMode" class="relative"> <div class="grid grid-cols-1 gap-4 md:grid-cols-4">
<label v-if="isEditMode"> <!-- Première image -->
<input type="file" @change="updateImage('image1Url', $event)" class="hidden" /> <div class="relative">
<img :src="image1Url || fallbackImage" <label>
alt="Image 1" <input type="file" @change="updateImage('image1Url', $event)" class="hidden" />
class="rounded-md max-w-full h-auto cursor-pointer" /> <img :src="image1Url || fallbackImage"
</label> alt="Image 1"
<div v-if="image1Url" @click="openFullscreen(image1Url)"> class="rounded-md max-w-full h-auto cursor-pointer" />
<img :src="image1Url" alt="Image 1" class="rounded-md max-w-full h-auto cursor-pointer" /> </label>
<button @click="deleteImage('image1Url')"
class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
X
</button>
</div> </div>
<button v-if="isEditMode" @click="deleteImage('image1Url')"
class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
X
</button>
</div>
<!-- Deuxième image --> <!-- Deuxième image -->
<div v-if="image2Url || isEditMode" class="relative"> <div class="relative">
<label v-if="isEditMode"> <label>
<input type="file" @change="updateImage('image2Url', $event)" class="hidden" /> <input type="file" @change="updateImage('image2Url', $event)" class="hidden" />
<img :src="image2Url || fallbackImage" <img :src="image2Url || fallbackImage"
alt="Image 2" alt="Image 2"
class="rounded-md max-w-full h-auto cursor-pointer" /> class="rounded-md max-w-full h-auto cursor-pointer" />
</label> </label>
<div v-if="image2Url" @click="openFullscreen(image2Url)"> <button @click="deleteImage('image2Url')"
<img :src="image2Url" alt="Image 2" class="rounded-md max-w-full h-auto cursor-pointer" /> class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
X
</button>
</div> </div>
<button v-if="isEditMode" @click="deleteImage('image2Url')"
class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
X
</button>
</div>
<!-- Troisième image --> <!-- Troisième image -->
<div v-if="image3Url || isEditMode" class="relative"> <div class="relative">
<label v-if="isEditMode"> <label>
<input type="file" @change="updateImage('image3Url', $event)" class="hidden" /> <input type="file" @change="updateImage('image3Url', $event)" class="hidden" />
<img :src="image3Url || fallbackImage" <img :src="image3Url || fallbackImage"
alt="Image 3" alt="Image 3"
class="rounded-md max-w-full h-auto cursor-pointer" /> class="rounded-md max-w-full h-auto cursor-pointer" />
</label> </label>
<div v-if="image3Url" @click="openFullscreen(image3Url)"> <button @click="deleteImage('image3Url')"
<img :src="image3Url" alt="Image 3" class="rounded-md max-w-full h-auto cursor-pointer" /> class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
X
</button>
</div> </div>
<button v-if="isEditMode" @click="deleteImage('image3Url')"
class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
X
</button>
</div>
<!-- Quatrième image --> <!-- Quatrième image -->
<div v-if="image4Url || isEditMode" class="relative"> <div class="relative">
<label v-if="isEditMode"> <label>
<input type="file" @change="updateImage('image4Url', $event)" class="hidden" /> <input type="file" @change="updateImage('image4Url', $event)" class="hidden" />
<img :src="image4Url || fallbackImage" <img :src="image4Url || fallbackImage"
alt="Image 4" alt="Image 4"
class="rounded-md max-w-full h-auto cursor-pointer" /> class="rounded-md max-w-full h-auto cursor-pointer" />
</label> </label>
<div v-if="image4Url" @click="openFullscreen(image4Url)"> <button @click="deleteImage('image4Url')"
<img :src="image4Url" alt="Image 4" class="rounded-md max-w-full h-auto cursor-pointer" /> class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
X
</button>
</div> </div>
<button v-if="isEditMode" @click="deleteImage('image4Url')"
class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
X
</button>
</div> </div>
</div> </div>
<!-- Mode normal -->
<div v-else>
<div class="flex flex-wrap gap-4">
<!-- Première image -->
<div class="relative w-full sm:flex-1 sm:min-w-[calc(25%-1rem)]" v-if="image1Url" @click="openFullscreen(image1Url)">
<img :src="image1Url" alt="Image 1" class="rounded-md max-w-full h-auto cursor-pointer" />
</div>
<!-- Deuxième image -->
<div class="relative w-full sm:flex-1 sm:min-w-[calc(25%-1rem)]" v-if="image2Url" @click="openFullscreen(image2Url)">
<img :src="image2Url" alt="Image 2" class="rounded-md max-w-full h-auto cursor-pointer" />
</div>
<!-- Troisième image -->
<div class="relative w-full sm:flex-1 sm:min-w-[calc(25%-1rem)]" v-if="image3Url" @click="openFullscreen(image3Url)">
<img :src="image3Url" alt="Image 3" class="rounded-md max-w-full h-auto cursor-pointer" />
</div>
<!-- Quatrième image -->
<div class="relative w-full sm:flex-1 sm:min-w-[calc(25%-1rem)]" v-if="image4Url" @click="openFullscreen(image4Url)">
<img :src="image4Url" alt="Image 4" class="rounded-md max-w-full h-auto cursor-pointer" />
</div>
</div>
</div>
</div> </div>
<!-- Texte sous les deux images --> <!-- Texte sous les deux images -->
<div v-if="isEditMode"> <div v-if="isEditMode">
<div class="text-2xl py-2"> Images</div> <div class="text-2xl py-2"> Images</div>
@@ -299,10 +318,9 @@
</template> </template>
<script setup> <script setup>
import {ref, onMounted, computed} from "vue"; import {ref, onMounted} from "vue";
import { useClient } from "@/plugins/api.js"; import { useClient } from "@/plugins/api.js";
import {useBrandingStore} from "@/stores/brandingStore.js"; import {useBrandingStore} from "@/stores/brandingStore.js";
import {useAuthStore} from "@/stores/authStore.js";
import { useCreatorProfileStore } from "@/stores/creatorProfileStore.js"; import { useCreatorProfileStore } from "@/stores/creatorProfileStore.js";
import { useDisplay } from "vuetify"; import { useDisplay } from "vuetify";
import { watch} from "vue"; import { watch} from "vue";
@@ -320,7 +338,7 @@ const isLoading = ref(true);
const isLoggedIn = true; const isLoggedIn = true;
const isEditMode = ref(false); const isEditMode = ref(false);
const authStore = useAuthStore();
const currentImage = ref(""); const currentImage = ref("");
const fullscreenImage = ref(null); const fullscreenImage = ref(null);
@@ -532,23 +550,50 @@ async function saveChanges() {
if (editableImages.value[4]) formData.append("Image4", editableImages.value[4]); if (editableImages.value[4]) formData.append("Image4", editableImages.value[4]);
try { try {
// Désactiver le bouton de sauvegarde pour éviter les clics multiples
isLoading.value = true;
// Envoyer les données au backend
const response = await client.post( const response = await client.post(
`/api/creators/${creatorProfileStore.creator.id}/presentation-infos`, `/api/creators/${creatorProfileStore.creator.id}/presentation-infos`,
formData, formData,
{ headers: { "Content-Type": "multipart/form-data" } } { headers: { "Content-Type": "multipart/form-data" } }
); );
// Mettre à jour les valeurs locales pour refléter les changements
mainTitle.value = editableMainTitle.value;
mainImageText.value = editableMainImageText.value;
mainVideoText.value = editableMainVideoText.value;
imagesSubtitle.value = editableImagesSubtitle.value;
imagesText.value = editableImagesText.value;
videoSubtitle.value = editableVideoSubtitle.value;
videoSubtitleMain.value = editableVideoSubtitleMain.value;
videoText.value = editableVideoText.value;
videoUrlMain.value = editableVideoUrlMain.value;
videoUrl.value = editableVideoUrl.value;
phoneNumber.value = editablePhoneNumber.value;
email.value = editableEmail.value;
console.log("Données sauvegardées :", response.data); console.log("Données sauvegardées :", response.data);
// Recharger la page après une sauvegarde réussie // Réinitialiser le mode édition
window.location.reload(); isEditMode.value = false;
// Rafraîchir après une légère pause pour s'assurer des mises à jour visuelles
setTimeout(() => {
window.location.reload();
}, 500); // Pause de 500ms pour garantir que tout est bien mis à jour
} catch (error) { } catch (error) {
console.error("Erreur lors de la sauvegarde :", error); console.error("Erreur lors de la sauvegarde :", error);
} finally {
// Réactiver les interactions
isLoading.value = false;
} }
} }
function cancelEdit() { function cancelEdit() {
// Restaurer les valeurs d'origine // Restaurer les valeurs d'origine
editableMainTitle.value = mainTitle.value; editableMainTitle.value = mainTitle.value;