studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

rename folde

Browse source
This commit is contained in:
isUnknown 2024-10-09 17:39:05 +02:00
parent 14878fb3f2
commit be1c51dad9
10 changed files with 3 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

170
src/components/project/ClientBrief/ImageDetailsModal.vue
View file

@ -1,170 +0,0 @@
<template>
<Dialog
v-model:visible="isOpen"
id="image-details"
modal
header="Détails de l’image"
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'">{{
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 l’image</label
>
<textarea
name="image-description"
id="image-description"
placeholder="Ajoutez une description à l’image…"
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 { toPascalCase } from "../../../helpers";
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>