From feb9f89a34fc0e92ccb0d9d1e47d9aeae89aa162 Mon Sep 17 00:00:00 2001
From: Arnaud Levy <contact@arnaudlevy.com>
Date: Wed, 1 Feb 2023 17:56:56 +0100
Subject: [PATCH] ready, waiting for api key to finalize

---
 .../communication/photo_import/pexels.png     | Bin 0 -> 4592 bytes
 .../photo_import/_selector.html.erb           |  64 ++++++++++++++++++
 .../photo_import/pexels.json.jbuilder         |   7 +-
 .../photo_import/pexels/_photo.json.jbuilder  |   6 --
 .../photo_import/unsplash.json.jbuilder       |   7 +-
 .../unsplash/_photo.json.jbuilder             |   6 --
 6 files changed, 76 insertions(+), 14 deletions(-)
 create mode 100644 app/assets/images/communication/photo_import/pexels.png
 delete mode 100644 app/views/admin/communication/photo_import/pexels/_photo.json.jbuilder
 delete mode 100644 app/views/admin/communication/photo_import/unsplash/_photo.json.jbuilder

diff --git a/app/assets/images/communication/photo_import/pexels.png b/app/assets/images/communication/photo_import/pexels.png
new file mode 100644
index 0000000000000000000000000000000000000000..0fdda8d646eaefdee64a9275b0e5c523f5db2946
GIT binary patch
literal 4592
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
NMh^nhdaGd{`X3wWX>R}k

literal 0
HcmV?d00001

diff --git a/app/views/admin/communication/photo_import/_selector.html.erb b/app/views/admin/communication/photo_import/_selector.html.erb
index a1ea39fea..7d1af9a6d 100644
--- a/app/views/admin/communication/photo_import/_selector.html.erb
+++ b/app/views/admin/communication/photo_import/_selector.html.erb
@@ -92,6 +92,36 @@ pexels_path = admin_communication_pexels_path(website_id: nil, format: :json)
                   </div>
                 </div>
               </div>
+              <div class="col-md-6">
+                <div class="row pure__row--small" ref="results">
+                  <p v-if="pexels.data.results.length === 0 || !pexels.data" >
+                    <%= t 'photo_import.nothing' %>
+                  </p>
+                  <div v-for="image in pexels.data.results"  class="col-6 col-lg-4">
+                    <img
+                        :src="image.thumb"
+                        :alt="image.alt"
+                        v-on:click="select(image)"
+                        class="img-fluid img-thumbnail mb-3"
+                        :class="image === selected ? 'bg-secondary' : ''">
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col-lg-5">
+                    <a href="#" v-if="pexels.page > 1" v-on:click="pexels.page = pexels.page - 1" class="btn btn-light btn-sm">
+                      <%= t 'photo_import.previous' %>
+                    </a>
+                  </div>
+                  <div class="col-lg-2 text-center">
+                    <%= image_tag 'communication/photo_import/pexels.png', width: 100, alt: 'Unsplash' %>
+                  </div>
+                  <div class="col-lg-5 text-end">
+                    <a href="#" v-if="pexels.page < pexels.data.total_pages" v-on:click="pexels.page = pexels.page + 1" class="btn btn-light btn-sm">
+                      <%= t 'photo_import.next' %>
+                    </a>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -121,6 +151,14 @@ pexels_path = admin_communication_pexels_path(website_id: nil, format: :json)
             total: 0
           }
         },
+        pexels: {
+          url: '<%= pexels_path %>',
+          page: 1,
+          data: {
+            results: [],
+            total: 0
+          }
+        },
         targets: {
           image: '<%= about_featured_image_image %> img',
           imageContainer: '<%= about_featured_image_image %> .sdfi-deletable-file__preview',
@@ -157,12 +195,17 @@ pexels_path = admin_communication_pexels_path(website_id: nil, format: :json)
     watch: {
       'unsplash.page': function(newVal, oldVal) {
         this.searchUnsplash();
+      },
+      'pexels.page': function(newVal, oldVal) {
+        this.searchPexels();
       }
     },
     methods: {
       research() {
         this.unsplash.page = 1;
+        this.pexels.page = 1;
         this.searchUnsplash();
+        this.searchPexels();
       },
       searchUnsplash() {
         if (!this.query) {
@@ -185,6 +228,27 @@ pexels_path = admin_communication_pexels_path(website_id: nil, format: :json)
                       false );
         xmlHttp.send( null );
       },
+      searchPexels() {
+        if (!this.query) {
+          return null;
+        }
+
+        var xmlHttp = new XMLHttpRequest();
+        xmlHttp.onreadystatechange = function() {
+          if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
+            this.pexels.data = JSON.parse(xmlHttp.responseText);
+          }
+        }.bind(this);
+
+        xmlHttp.open( "GET",
+                      this.pexels.url
+                      + '?query=' + this.query
+                      + '&per_page=' + this.parameters.per_page
+                      + '&page=' + this.pexels.page
+                      + '&lang=' + this.parameters.lang,
+                      false );
+        xmlHttp.send( null );
+      },
       select(image) {
         var inputImage = document.querySelector(this.targets.image),
             inputImageContainer = document.querySelector(this.targets.imageContainer),
diff --git a/app/views/admin/communication/photo_import/pexels.json.jbuilder b/app/views/admin/communication/photo_import/pexels.json.jbuilder
index 5491f6229..ad0ef5a83 100644
--- a/app/views/admin/communication/photo_import/pexels.json.jbuilder
+++ b/app/views/admin/communication/photo_import/pexels.json.jbuilder
@@ -1,5 +1,10 @@
 json.total @total
 json.total_pages @total_pages
 json.results @search do |photo|
-  json.partial! 'admin/communication/photo_import/unsplash/photo', photo: photo
+  json.id photo['id']
+  json.filename "#{photo['id']}.jpg"
+  json.alt photo['alt_description']
+  json.credit "Photo by <a href=\"https://www.pexels.com/@daria\">Daria</a> on <a href=\"https://www.pexels.com\">Pexels</a>"
+  json.thumb photo['urls']['small']
+  json.preview photo['urls']['regular']
 end
diff --git a/app/views/admin/communication/photo_import/pexels/_photo.json.jbuilder b/app/views/admin/communication/photo_import/pexels/_photo.json.jbuilder
deleted file mode 100644
index 34175cfbd..000000000
--- a/app/views/admin/communication/photo_import/pexels/_photo.json.jbuilder
+++ /dev/null
@@ -1,6 +0,0 @@
-json.id photo['id']
-json.filename "#{photo['id']}.jpg"
-json.alt photo['alt_description']
-json.credit "Photo by <a href=\"https://unsplash.com/@#{ photo['user']['username'] }?utm_source=#{ Unsplash.configuration.utm_source }&utm_medium=referral\"> #{ photo['user']['name'] }</a> on <a href=\"https://unsplash.com/?utm_source=#{ Unsplash.configuration.utm_source }&utm_medium=referral\">Unsplash</a>"
-json.thumb photo['urls']['thumb']
-json.preview photo['urls']['regular']
diff --git a/app/views/admin/communication/photo_import/unsplash.json.jbuilder b/app/views/admin/communication/photo_import/unsplash.json.jbuilder
index 5491f6229..59eeb59df 100644
--- a/app/views/admin/communication/photo_import/unsplash.json.jbuilder
+++ b/app/views/admin/communication/photo_import/unsplash.json.jbuilder
@@ -1,5 +1,10 @@
 json.total @total
 json.total_pages @total_pages
 json.results @search do |photo|
-  json.partial! 'admin/communication/photo_import/unsplash/photo', photo: photo
+  json.id photo['id']
+  json.filename "#{photo['id']}.jpg"
+  json.alt photo['alt_description']
+  json.credit "Photo by <a href=\"https://unsplash.com/@#{ photo['user']['username'] }?utm_source=#{ Unsplash.configuration.utm_source }&utm_medium=referral\"> #{ photo['user']['name'] }</a> on <a href=\"https://unsplash.com/?utm_source=#{ Unsplash.configuration.utm_source }&utm_medium=referral\">Unsplash</a>"
+  json.thumb photo['urls']['small']
+  json.preview photo['urls']['regular']
 end
diff --git a/app/views/admin/communication/photo_import/unsplash/_photo.json.jbuilder b/app/views/admin/communication/photo_import/unsplash/_photo.json.jbuilder
deleted file mode 100644
index 1dc8aac83..000000000
--- a/app/views/admin/communication/photo_import/unsplash/_photo.json.jbuilder
+++ /dev/null
@@ -1,6 +0,0 @@
-json.id photo['id']
-json.filename "#{photo['id']}.jpg"
-json.alt photo['alt_description']
-json.credit "Photo by <a href=\"https://unsplash.com/@#{ photo['user']['username'] }?utm_source=#{ Unsplash.configuration.utm_source }&utm_medium=referral\"> #{ photo['user']['name'] }</a> on <a href=\"https://unsplash.com/?utm_source=#{ Unsplash.configuration.utm_source }&utm_medium=referral\">Unsplash</a>"
-json.thumb photo['urls']['small']
-json.preview photo['urls']['regular']
-- 
GitLab