studio-variable/designtopack
4
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

177
src/components/project/client-brief/add-images-modal/ImagesEditPanel.vue Normal file
View file

@ -0,0 +1,177 @@
<template>
<div
class="flex flex-col items-start | bg-grey-50 | rounded-2xl | w-full | p-8"
>
<Accordion
value="0"
class="flex flex-col | w-full"
style="--row-gap: var(--space-8)"
>
<AccordionPanel
v-for="(image, index) in images"
:key="index + 1"
:value="index"
class="w-full | bg-white | rounded-xl | p-12 pt-8"
>
<AccordionHeader>
<span class="badge">{{ index + 1 }}</span>
</AccordionHeader>
<AccordionContent>
<div class="image-details__description | my-16">
<label
for="image-description"
class="flex | text-sm text-grey-700 | mb-8"
>Description</label
>
<textarea
name="image-description"
id="image-description"
placeholder="Ajoutez une description à cette image…"
rows="3"
class="border border-grey-200 | rounded-xl | p-16 | w-full"
v-model="image.description"
@input="saveDescription(image)"
></textarea>
</div>
<fieldset class="image-details__filters | flex-1">
<legend class="text-sm text-grey-700 | mb-8">
Sélectionner un ou plusieurs tags
</legend>
<div class="flex" style="gap: var(--space-8)">
<template v-for="tag in page.tags" :key="tag">
<input
class="sr-only"
type="checkbox"
:id="`${tag}-image-edit`"
:name="`${tag}-image-edit`"
:value="`${tag}`"
@change="saveTags(image)"
v-model="image.tags"
/>
<label
class="btn btn--sm btn--primary"
:for="`${tag}-image-edit`"
>{{ toPascalCase(tag) }}</label
>
</template>
</div>
</fieldset>
</AccordionContent>
</AccordionPanel>
<template #collapseicon>
<svg
aria-hidden="true"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
style="transform: rotate(180deg)"
>
<path
d="M1.875 6.0625L9.5625 13.75C9.61861 13.8098 9.68638 13.8574 9.76163 13.89C9.83688 13.9226 9.918 13.9394 10 13.9394C10.082 13.9394 10.1631 13.9226 10.2384 13.89C10.3136 13.8574 10.3814 13.8098 10.4375 13.75L18.125 6.0625"
stroke="#5E6060"
stroke-width="1.25"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</template>
<template #expandicon>
<svg
aria-hidden="true"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.875 6.0625L9.5625 13.75C9.61861 13.8098 9.68638 13.8574 9.76163 13.89C9.83688 13.9226 9.918 13.9394 10 13.9394C10.082 13.9394 10.1631 13.9226 10.2384 13.89C10.3136 13.8574 10.3814 13.8098 10.4375 13.75L18.125 6.0625"
stroke="#5E6060"
stroke-width="1.25"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</template>
</Accordion>
<button class="btn | w-full | mt-auto">
Ajouter les images sélectionnées
</button>
</div>
</template>
<script setup>
import Accordion from "primevue/accordion";
import AccordionPanel from "primevue/accordionpanel";
import AccordionHeader from "primevue/accordionheader";
import AccordionContent from "primevue/accordioncontent";
import { usePageStore } from "../../../../stores/page";
import { toPascalCase } from "../../../../helpers";
import debounce from "lodash/debounce";
const { images } = defineProps({
images: Array,
});
const { page } = usePageStore();
function saveTags(image) {
const headers = {
method: "POST",
body: JSON.stringify({
pageUri: page.uri,
fileName: image.name,
properties: [
{
name: "tags",
value: image.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((image) => {
const headers = {
method: "POST",
body: JSON.stringify({
pageUri: page.uri,
fileName: image.name,
properties: [
{
name: "description",
value: image.description,
},
],
}),
};
fetch("/save-file.json", headers)
.then((res) => res.json())
.then((json) => {
console.log(json);
})
.catch((error) => {
console.error("Erreur lors de la sauvegarde :", error);
});
}, 1000);
</script>
<style>
/* Accordion */
[data-pc-name="accordionheader"] {
height: var(--space-40);
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
</style>