Removing existing photos wip.

app/controllers/publishRealEstate.js

@@ -1,5 +1,8 @@
 const { findRealEstateByAgencyId } = require("../helpers/db/realEstate");
-const { bulkUpsertKiviPhotos } = require("../helpers/db/kiviOriginalAdsPhotos");
+const {
+  bulkUpsertKiviPhotos,
+  findPhotosForKiviAd
+} = require("../helpers/db/kiviOriginalAdsPhotos");
 const { currentKiviRealEstate } = require("../helpers/url");
 const {
   notifyForNewRealEstates,
@@ -27,7 +30,9 @@ const {
 const getPublishInputs = async (req, res) => {
   const kiviOriginal = await currentKiviRealEstate(req);
 
-  const realEstate = await findRealEstateByAgencyId(kiviOriginal.kiviAdId);
+  const realEstate = await findRealEstateByAgencyId(
+    kiviOriginal.dataValues.kiviAdId
+  );
 
   if (!realEstate || !realEstate.dataValues) {
     res.render("notFound", { title: " " });
@@ -83,13 +88,27 @@ const getPublishInputs = async (req, res) => {
     longDescription
   } = realEstate;
 
-  const { email } = kiviOriginal;
+  const email = kiviOriginal.dataValues.email;
   //If email is not empty - has string value, then proces of publishing has been conducted alredy
   //That means user is editing existing real estate ad not publishing new one
   let editingRealEstate = false;
   if (email) {
     editingRealEstate = true;
   }
+  //If we are editing real estate ad we need to fetch and show images on server
+  const urlGooglePrefix =
+    "https://storage.cloud.google.com/marketalarm-photos/";
+  let realEstatePhotosUrls = [];
+  if (editingRealEstate) {
+    const realEstatePhotosData = await findPhotosForKiviAd(
+      kiviOriginal.dataValues.kiviAdId
+    );
+    realEstatePhotosData.map(row => {
+      realEstatePhotosUrls.push(urlGooglePrefix + row.dataValues.photoUrl);
+    });
+  } else {
+    realEstatePhotosUrls.push(false);
+  }
 
   const category = AD_CATEGORY[realEstateType] || AD_CATEGORY.FLAT;
 
@@ -185,7 +204,8 @@ const getPublishInputs = async (req, res) => {
     email,
     locationLat: locationLat || 0,
     locationLong: locationLong || 0,
-    editingRealEstate
+    editingRealEstate,
+    realEstatePhotosUrls
   });
 };
 

app/public/main.css

@@ -202,3 +202,9 @@ h3 {
 .dz-progress {
   display: none;
 }
+
+.dz-preview .dz-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

app/views/publishRealEstate.ejs

@@ -92,6 +92,9 @@
 
     const editingRealEstate = <%- editingRealEstate %>;
     $("#editingRealEstate").val(editingRealEstate);
+    
+    const realEstatePhotosUrls = <%-JSON.stringify(realEstatePhotosUrls)%>;
+   
 
     // Manual dropzone init
     const dropzoneOptions = {
@@ -113,8 +116,42 @@
           dictRemoveFile: 'Izbriši ',
           dictFileTooBig: 'Fajl je prevelik!',
           dictInvalidFileType: 'Iabrani fajl nije fotografija!',
-          dictMaxFilesExceeded: 'Dostigli ste maksimalan broj fotografija!'
-				};
+          dictMaxFilesExceeded: 'Dostigli ste maksimalan broj fotografija!',
+          init: function () {
+            let fileCountOnServer = realEstatePhotosUrls.length; // The number of files already uploaded
+            this.options.maxFiles = this.options.maxFiles - fileCountOnServer;
+
+            if (editingRealEstate) {
+              for (let i=0; i<realEstatePhotosUrls.length; i++) {
+               let fileName = realEstatePhotosUrls[i].replace("https://storage.cloud.google.com/marketalarm-photos/", "");
+               var mockFile = { name: fileName, size: 12345, type: 'image/jpeg', accepted: true, status: Dropzone.ACCEPTED };       
+              this.options.addedfile.call(this, mockFile);
+             this.options.thumbnail.call(this, mockFile, realEstatePhotosUrls[i]);
+           
+             this.files.push(mockFile);
+             mockFile.previewElement.classList.add('dz-success');
+             mockFile.previewElement.classList.add('dz-complete');
+              }
+              
+          };
+
+          this.on("addedfile", function(event) {
+           while (this.files.length > this.options.maxFiles) {
+            this.removeFile(this.files[0]);
+          }
+          console.log('Files:', this.files);
+          });  
+
+          this.on("removedfile", function(event) {
+            let fileCountOnPreview = this.files.length;
+            this.options.maxFiles = 10;
+            this._updateMaxFilesReachedClass();
+           });
+          
+          }
+
+        }
+      
       var photosUploader = new Dropzone('#photos-upload', dropzoneOptions);
 
 
@@ -279,6 +316,11 @@
 
         validate (input);
       } */
+
+      //
+      console.log('All files:', photosUploader.files);
+
+
       const addedFiles = photosUploader.files.filter(file => file.status!=="error");
       const asyncUpload =[];
 
@@ -288,6 +330,8 @@
      
         if (!hasErrors) {
             await Promise.all(asyncUpload);
+            alert($("#imageUrls").val());
+
             $("#publishForm").submit();
 
       };