designtopack/src/components/project/brief/ImageDetailsModal.vue
2024-11-19 14:10:35 +01:00

170 lines
4.2 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<Dialog
v-model:visible="isOpen"
id="image-details"
modal
header="Détails de limage"
class="bg-white | text-grey-800 | rounded-2xl | overflow-hidden"
>
<img :src="image.url" alt="" class="bg-grey-200" loading="lazy" />
<div class="flex flex-col | p-32" style="--row-gap: var(--space-32)">
<fieldset class="image__tags">
<legend class="text-sm text-grey-700 | mb-8">Tags</legend>
<div class="flex" style="gap: var(--space-8)">
<template v-for="(pageTag, index) in page.tags" :key="index">
<input
class="sr-only"
type="checkbox"
:id="pageTag + '-image'"
:name="pageTag + '-image'"
:value="pageTag"
@change="saveTags()"
v-model="image.tags"
/>
<label class="btn btn--sm btn--primary" :for="pageTag + '-image'">{{
StringUtils.toPascalCase(pageTag)
}}</label>
</template>
</div>
</fieldset>
<div class="image__description | w-full">
<label
for="image-description"
class="flex | text-sm text-grey-700 | mb-8"
>Description de limage</label
>
<textarea
name="image-description"
id="image-description"
placeholder="Ajoutez une description à limage…"
class="border border-grey-200 | rounded-xl | p-16 | w-full"
v-model="image.description"
@input="saveDescription()"
></textarea>
</div>
<button
data-icon="delete"
class="btn btn--black-10 | ml-auto mt-auto"
@click="remove()"
>
Supprimer cette image
</button>
</div>
</Dialog>
</template>
<script setup>
import { ref, watch } from "vue";
import { usePageStore } from "../../../stores/page";
import StringUtils from "../../../utils/string";
import Dialog from "primevue/dialog";
import debounce from "lodash/debounce";
const { imageDetails } = defineProps({
imageDetails: Object,
});
const emit = defineEmits(["close", "remove"]);
const isOpen = ref(true);
watch(isOpen, () => {
emit("close");
});
const { page } = usePageStore();
const image = ref(imageDetails);
function saveTags() {
const headers = {
method: "POST",
body: JSON.stringify({
pageUri: page.uri,
fileName: image.value.name,
properties: [
{
name: "tags",
value: image.value.tags,
},
],
}),
};
fetch("/save-file.json", headers)
.then((res) => res.json())
.then((json) => {
console.log(json);
})
.catch((error) => {
console.error("Erreur lors de la sauvegarde :", error);
});
}
const saveDescription = debounce(() => {
const headers = {
method: "POST",
body: JSON.stringify({
pageUri: page.uri,
fileName: image.value.name,
properties: [
{
name: "description",
value: image.value.description,
},
],
}),
};
fetch("/save-file.json", headers)
.then((res) => res.json())
.then((json) => {
console.log(json);
emit("");
})
.catch((error) => {
console.error("Erreur lors de la sauvegarde :", error);
});
}, 1000);
function remove() {
const headers = {
method: "POST",
body: JSON.stringify({
pageUri: page.uri,
fileName: image.value.name,
}),
};
fetch("/remove-file.json", headers)
.then((res) => res.json())
.then((json) => {
console.log(json);
emit("remove", image.value);
isOpen.value = false;
})
.catch((error) => {
console.error("Erreur lors de la suppression :", error);
});
}
</script>
<style>
#image-details {
width: min(100vw - var(--gutter) * 2, 62.5rem);
height: min(100vh - var(--gutter) * 2, 50rem);
flex-direction: row !important;
}
#image-details [data-pc-section="header"] {
position: absolute;
left: 50%;
right: 0;
z-index: 1102;
padding: 1.5rem var(--space-32);
}
#image-details [data-pc-section="content"] {
display: flex;
}
#image-details [data-pc-section="content"] > * {
width: 50%;
}
#image-details [data-pc-section="content"] > div {
padding-top: 5rem;
}
</style>