create clientBrief header component. add debounce process for page save
This commit is contained in:
isUnknown
parent
d4fe38e65a
commit
06d3a71fb0
5 changed files with 115 additions and 75 deletions
6
package-lock.json
generated
6
package-lock.json
generated
|
|
@ -10,6 +10,7 @@
|
|||
"dependencies": {
|
||||
"@vue/compiler-sfc": "^3.5.6",
|
||||
"dayjs": "^1.11.13",
|
||||
"lodash": "^4.17.21",
|
||||
"pinia": "^2.1.7",
|
||||
"primevue": "^4.0.6",
|
||||
"slugify": "^1.6.6",
|
||||
|
|
@ -889,6 +890,11 @@
|
|||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/lodash": {
|
||||
"version": "4.17.21",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
|
||||
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
|
||||
},
|
||||
"node_modules/magic-string": {
|
||||
"version": "0.30.11",
|
||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
"dependencies": {
|
||||
"@vue/compiler-sfc": "^3.5.6",
|
||||
"dayjs": "^1.11.13",
|
||||
"lodash": "^4.17.21",
|
||||
"pinia": "^2.1.7",
|
||||
"primevue": "^4.0.6",
|
||||
"slugify": "^1.6.6",
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ Clientbriefpdf:
|
|||
|
||||
----
|
||||
|
||||
Description:
|
||||
Description: Bon voilà ça marche
|
||||
|
||||
----
|
||||
|
||||
|
|
|
|||
105
src/components/project/ClientBrief/Header.vue
Normal file
105
src/components/project/ClientBrief/Header.vue
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
<template>
|
||||
<header
|
||||
class="project-details | flex items-start | bg-white | rounded-2xl | p-16 | w-full"
|
||||
>
|
||||
<div class="project-details__description | flex-1">
|
||||
<label
|
||||
for="project-description"
|
||||
class="flex | text-sm text-grey-700 | mb-8"
|
||||
>Description du projet</label
|
||||
>
|
||||
<textarea
|
||||
name="project-description"
|
||||
id="project-description"
|
||||
placeholder="Ajoutez une description générale de votre projet…"
|
||||
rows="3"
|
||||
class="border border-grey-200 | rounded-xl | p-16 | w-full"
|
||||
v-model="page.content.description"
|
||||
@input="savePage()"
|
||||
></textarea>
|
||||
</div>
|
||||
<fieldset class="project-details__filters | flex-1">
|
||||
<legend class="text-sm text-grey-700 | mb-8">Filtrer par tags</legend>
|
||||
<div class="flex" style="gap: var(--space-8)">
|
||||
<button
|
||||
class="btn btn--sm btn--grey"
|
||||
id="all"
|
||||
:aria-pressed="selectedTags.length === 0"
|
||||
role="switch"
|
||||
@click="clearTags()"
|
||||
>
|
||||
Voir tout
|
||||
</button>
|
||||
<template v-for="tag in page.tags" :key="tag">
|
||||
<input
|
||||
class="sr-only"
|
||||
type="checkbox"
|
||||
:id="`${tag}-page`"
|
||||
:name="`${tag}-page`"
|
||||
:value="`${tag}-page`"
|
||||
v-model="localSelectedTags"
|
||||
/>
|
||||
<label class="btn btn--sm btn--primary" :for="`${tag}-page`">{{
|
||||
toPascalCase(tag)
|
||||
}}</label>
|
||||
</template>
|
||||
</div>
|
||||
</fieldset>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from "vue";
|
||||
import { usePageStore } from "../../../stores/page";
|
||||
import { toPascalCase } from "../../../helpers";
|
||||
import debounce from "lodash/debounce";
|
||||
|
||||
const { selectedTags } = defineProps({
|
||||
selectedTags: Array,
|
||||
});
|
||||
|
||||
const { page } = usePageStore();
|
||||
const emit = defineEmits(["update:selectedTags"]);
|
||||
|
||||
const localSelectedTags = ref([...selectedTags]);
|
||||
|
||||
watch(localSelectedTags, updateSelectedTags);
|
||||
|
||||
function updateSelectedTags(tags) {
|
||||
emit("update:selectedTags", tags);
|
||||
}
|
||||
|
||||
const isWaitingForSave = ref(false);
|
||||
|
||||
const savePage = debounce(() => {
|
||||
if (!isWaitingForSave.value) {
|
||||
isWaitingForSave.value = true;
|
||||
const headers = {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
pageUri: page.uri,
|
||||
properties: [
|
||||
{
|
||||
name: "description",
|
||||
value: page.content.description,
|
||||
},
|
||||
],
|
||||
}),
|
||||
};
|
||||
fetch("/save-page.json", headers)
|
||||
.then((res) => res.json())
|
||||
.then((json) => {
|
||||
isWaitingForSave.value = false;
|
||||
console.log(json);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Erreur lors de la sauvegarde :", error);
|
||||
isWaitingForSave.value = false;
|
||||
});
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
function clearTags() {
|
||||
localSelectedTags.value = [];
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,51 +1,6 @@
|
|||
<template>
|
||||
<section class="h-full | flex flex-col" style="--row-gap: var(--space-32)">
|
||||
<header
|
||||
class="project-details | flex items-start | bg-white | rounded-2xl | p-16 | w-full"
|
||||
>
|
||||
<div class="project-details__description | flex-1">
|
||||
<label
|
||||
for="project-description"
|
||||
class="flex | text-sm text-grey-700 | mb-8"
|
||||
>Description du projet</label
|
||||
>
|
||||
<textarea
|
||||
name="project-description"
|
||||
id="project-description"
|
||||
placeholder="Ajoutez une description générale de votre projet…"
|
||||
rows="3"
|
||||
class="border border-grey-200 | rounded-xl | p-16 | w-full"
|
||||
v-model="page.content.description"
|
||||
@input="savePage()"
|
||||
></textarea>
|
||||
</div>
|
||||
<fieldset class="project-details__filters | flex-1">
|
||||
<legend class="text-sm text-grey-700 | mb-8">Filtrer par tags</legend>
|
||||
<div class="flex" style="gap: var(--space-8)">
|
||||
<button
|
||||
class="btn btn--sm btn--grey"
|
||||
id="all"
|
||||
:aria-pressed="selectedTags.length === 0"
|
||||
@click="selectedTags = []"
|
||||
>
|
||||
Voir tout
|
||||
</button>
|
||||
<template v-for="(tag, index) in page.tags" :key="index">
|
||||
<input
|
||||
class="sr-only"
|
||||
type="checkbox"
|
||||
:id="tag + '-page'"
|
||||
:name="tag + '-page'"
|
||||
:value="tag + '-page'"
|
||||
v-model="selectedTags"
|
||||
/>
|
||||
<label class="btn btn--sm btn--primary" :for="tag + '-page'">{{
|
||||
toPascalCase(tag)
|
||||
}}</label>
|
||||
</template>
|
||||
</div>
|
||||
</fieldset>
|
||||
</header>
|
||||
<Header :selectedTags="selectedTags" />
|
||||
<div class="h-full | masonry">
|
||||
<button
|
||||
data-icon="upload"
|
||||
|
|
@ -216,10 +171,10 @@
|
|||
import Toast from "primevue/toast";
|
||||
import FileUpload from "primevue/fileupload";
|
||||
import Dialog from "primevue/dialog";
|
||||
import Header from "./Header.vue";
|
||||
import { useToast } from "primevue/usetoast";
|
||||
import { usePageStore } from "../../../stores/page";
|
||||
import { ref, watch } from "vue";
|
||||
import { toPascalCase } from "../../../helpers";
|
||||
|
||||
const { page } = usePageStore();
|
||||
const toast = useToast();
|
||||
|
|
@ -240,33 +195,6 @@ watch(modal, (newValue) => {
|
|||
|
||||
const images = ref(page.images);
|
||||
|
||||
const isWaitingForSave = ref(false);
|
||||
function savePage() {
|
||||
if (!isWaitingForSave.value) {
|
||||
isWaitingForSave.value = true;
|
||||
setTimeout(() => {
|
||||
const headers = {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
pageUri: page.uri,
|
||||
properties: [
|
||||
{
|
||||
name: "description",
|
||||
value: page.content.description,
|
||||
},
|
||||
],
|
||||
}),
|
||||
};
|
||||
fetch("/save-page.json", headers)
|
||||
.then((res) => res.json())
|
||||
.then((json) => {
|
||||
isWaitingForSave.value = false;
|
||||
console.log(json);
|
||||
});
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
|
||||
function onAdvancedUpload(event) {
|
||||
if (event.xhr.status === 200) {
|
||||
toast.add({
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue