client brief > my images : upload images working

src/components/project/client-brief/Images.vue

@@ -12,7 +12,7 @@
       >
         Ajouter une ou plusieurs images
       </button>
-      <template v-for="image in images" :key="image.uri">
+      <template v-for="image in page.images" :key="image.uri">
         <figure
           v-if="
             selectedTags.length === 0 ||
@@ -35,7 +35,6 @@
     <AddImagesModal
       v-if="isAddImagesModalOpen"
       :isAddImagesModalOpen="isAddImagesModalOpen"
-      :images="images"
       @close="isAddImagesModalOpen = false"
     />
     <ImageDetailsModal
@@ -53,51 +52,23 @@ import { usePageStore } from "../../../stores/page";
 import { ref } from "vue";
 import ImageDetailsModal from "./ImageDetailsModal.vue";
 import AddImagesModal from "./add-images-modal/AddImagesModal.vue";
+import { storeToRefs } from "pinia";
 
-const { page } = usePageStore();
+const { page } = storeToRefs(usePageStore());
 
 const selectedTags = ref([]);
 const imageDetails = ref(null);
-const images = ref(page.images);
 const isAddImagesModalOpen = ref(false);
 
-function onAdvancedUpload(event) {
-  if (event.xhr.status === 200) {
-    toast.add({
-      severity: "success",
-      summary: "Upload réussi",
-      detail: event.xhr.response.success,
-      life: 3000,
-    });
-    const response = JSON.parse(event.xhr.response);
-    console.log(response);
-    images.value = response.images;
-  } else {
-    toast.add({
-      severity: "error",
-      summary: "Échec de l'upload",
-      detail: event.xhr.response.error,
-      life: 3000,
-    });
-    console.error(JSON.parse(event.xhr.response));
-  }
-}
-
-function beforeSend(event) {
-  const formData = event.formData;
-  formData.append(
-    "pageUri",
-    "projects/miss-dior-blooming-bouquet/client-brief"
-  );
-}
-
 function changeSelectedTags(newTags) {
   selectedTags.value = newTags;
 }
 
 function removeImage(target) {
   console.log("remove", target);
-  images.value = images.value.filter((image) => image.uuid !== target.uuid);
+  page.value.images = page.value.images.filter(
+    (image) => image.uuid !== target.uuid
+  );
 }
 </script>
 

src/components/project/client-brief/add-images-modal/AddImagesModal.vue

@@ -26,7 +26,7 @@
         <div class="bg-grey-50 | rounded-2xl | p-8 | overflow-y">
           <component :is="activeTab.component" :params="activeTab.params" />
         </div>
-        <ImagesEditPanel :images="images" />
+        <ImagesEditPanel />
       </div>
     </div>
   </Dialog>
@@ -66,9 +66,8 @@ import MyImages from "./MyImages.vue";
 import { usePageStore } from "../../../../stores/page";
 import { ref, watch } from "vue";
 
-const { isAddImagesModalOpen, images } = defineProps({
+const { isAddImagesModalOpen } = defineProps({
   isAddImagesModalOpen: Boolean,
-  images: Array,
 });
 const emit = defineEmits(["update:isAddImagesModalOpen"]);
 
@@ -83,9 +82,6 @@ const tabs = [
   {
     name: "Mes images",
     component: MyImages,
-    params: {
-      images,
-    },
   },
   {
     name: "Matériauthèque",

src/components/project/client-brief/add-images-modal/ImagesEditPanel.vue

@@ -8,7 +8,7 @@
       style="--row-gap: var(--space-8)"
     >
       <AccordionPanel
-        v-for="(image, index) in images"
+        v-for="(image, index) in page.images"
         :key="index + 1"
         :value="index"
         class="w-full | bg-white | rounded-xl | p-12 pt-8"
@@ -109,18 +109,15 @@ import AccordionContent from "primevue/accordioncontent";
 import { usePageStore } from "../../../../stores/page";
 import { toPascalCase } from "../../../../helpers";
 import debounce from "lodash/debounce";
+import { storeToRefs } from "pinia";
 
-const { images } = defineProps({
-  images: Array,
-});
-
-const { page } = usePageStore();
+const { page } = storeToRefs(usePageStore());
 
 function saveTags(image) {
   const headers = {
     method: "POST",
     body: JSON.stringify({
-      pageUri: page.uri,
+      pageUri: page.value.uri,
       fileName: image.name,
       properties: [
         {
@@ -144,7 +141,7 @@ const saveDescription = debounce((image) => {
   const headers = {
     method: "POST",
     body: JSON.stringify({
-      pageUri: page.uri,
+      pageUri: page.value.uri,
       fileName: image.name,
       properties: [
         {

src/components/project/client-brief/add-images-modal/MyImages.vue

@@ -41,7 +41,7 @@
         <div v-if="files.length > 0">Fichiers importés</div>
       </template>
     </FileUpload>
-    <figure v-for="image in params.images" class="image">
+    <figure v-for="image in page.images" class="image">
       <img :src="image.url" alt="" />
     </figure>
     <Toast />
@@ -53,11 +53,30 @@ import { usePageStore } from "../../../../stores/page";
 import Toast from "primevue/toast";
 import { useToast } from "primevue/usetoast";
 import FileUpload from "primevue/fileupload";
+import { storeToRefs } from "pinia";
 
-const { params } = defineProps({
-  params: Object,
-});
-
-const { page } = usePageStore();
+const { page } = storeToRefs(usePageStore());
 const toast = useToast();
+
+function onAdvancedUpload(event) {
+  if (event.xhr.status === 200) {
+    toast.add({
+      severity: "success",
+      summary: "Upload réussi",
+      detail: event.xhr.response.success,
+      life: 3000,
+    });
+    const response = JSON.parse(event.xhr.response);
+    console.log(response);
+    page.value.images = response.images;
+  } else {
+    toast.add({
+      severity: "error",
+      summary: "Échec de l'upload",
+      detail: event.xhr.response.error,
+      life: 3000,
+    });
+    console.error(JSON.parse(event.xhr.response));
+  }
+}
 </script>