From 38e2aef44532b0bc54ab1d09d47522fdab9eead5 Mon Sep 17 00:00:00 2001
From: Benoit Socias <bso@odoo.com>
Date: Wed, 25 Jan 2023 10:07:14 +0000
Subject: [PATCH] [IMP] web_editor, web_unsplash: alternate unsplash and
 illustrations
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Before this commit, all search result illustrations were displayed
before the Unsplash images.

This commit makes the search result images from Unsplash and the
illustrations alternate, beginning with the first Unsplash image.
The existing attachment results remain in front.

task-3060679

closes odoo/odoo#111481

Signed-off-by: Bojabza Soukéina (sobo) <sobo@odoo.com>
---
 .../media_dialog/image_selector.xml           | 26 ++++++++------
 .../components/media_dialog/image_selector.js | 18 ++++++++++
 .../media_dialog/image_selector.xml           | 34 ++++++++++++-------
 3 files changed, 55 insertions(+), 23 deletions(-)

diff --git a/addons/web_editor/static/src/components/media_dialog/image_selector.xml b/addons/web_editor/static/src/components/media_dialog/image_selector.xml
index 368515117de..727fc211695 100644
--- a/addons/web_editor/static/src/components/media_dialog/image_selector.xml
+++ b/addons/web_editor/static/src/components/media_dialog/image_selector.xml
@@ -11,6 +11,20 @@
     </div>
 </t>
 
+<t t-name="web_editor.ExternalImage" owl="1">
+    <t t-if="record.mediaType == 'libraryMedia'">
+        <AutoResizeImage author="record.author"
+            src="record.thumbnail_url"
+            authorLink="record.author_link"
+            title="record.tooltip"
+            altDescription="record.tooltip"
+            minRowHeight="MIN_ROW_HEIGHT"
+            selected="this.selectedMediaIds.includes(record.id)"
+            onImageClick="() => this.onClickMedia(record)"
+            onLoaded="(imgEl) => this.onImageLoaded(imgEl, record)"/>
+    </t>
+</t>
+
 <t t-name="web_editor.ImagesListTemplate" owl="1">
     <div class="o_we_existing_attachments o_we_images d-flex flex-wrap my-0">
         <t t-if="!hasContent and !isFetching">
@@ -42,16 +56,8 @@
                 </t>
             </t>
             <t id="o_we_media_library_images" t-if="['all', 'media-library'].includes(state.searchService)">
-                <t t-foreach="state.libraryMedia" t-as="media" t-key="media.id">
-                    <AutoResizeImage author="media.author"
-                        src="media.thumbnail_url"
-                        authorLink="media.author_link"
-                        title="media.tooltip"
-                        altDescription="media.tooltip"
-                        minRowHeight="MIN_ROW_HEIGHT"
-                        selected="this.selectedMediaIds.includes(media.id)"
-                        onImageClick="() => this.onClickMedia(media)"
-                        onLoaded="(imgEl) => this.onImageLoaded(imgEl, media)"/>
+                <t t-foreach="state.libraryMedia" t-as="record" t-key="record.id">
+                    <t t-call="web_editor.ExternalImage"/>
                 </t>
             </t>
             <!-- 20 placeholders is just enough for a 5K screen, change this if ImageWidget.MIN_ROW_HEIGHT changes -->
diff --git a/addons/web_unsplash/static/src/components/media_dialog/image_selector.js b/addons/web_unsplash/static/src/components/media_dialog/image_selector.js
index dd72342ddea..8b75650785c 100644
--- a/addons/web_unsplash/static/src/components/media_dialog/image_selector.js
+++ b/addons/web_unsplash/static/src/components/media_dialog/image_selector.js
@@ -107,6 +107,24 @@ patch(ImageSelector.prototype, 'image_selector_unsplash', {
         return this._super() || this.state.isFetchingUnsplash;
     },
 
+    get combinedRecords() {
+        /**
+         * Creates an array with alternating elements from two arrays.
+         *
+         * @param {Array} a
+         * @param {Array} b
+         * @returns {Array} alternating elements from a and b, starting with
+         *     an element of a
+         */
+        function alternate(a, b) {
+            return [
+                a.map((v, i) => i < b.length ? [v, b[i]] : v),
+                b.slice(a.length),
+            ].flat(2);
+        }
+        return alternate(this.state.unsplashRecords, this.state.libraryMedia);
+    },
+
     // It seems that setters are mandatory when patching a component that
     // extends another component.
     set canLoadMore(_) {},
diff --git a/addons/web_unsplash/static/src/components/media_dialog/image_selector.xml b/addons/web_unsplash/static/src/components/media_dialog/image_selector.xml
index f2d7f558943..16aeef2e94f 100644
--- a/addons/web_unsplash/static/src/components/media_dialog/image_selector.xml
+++ b/addons/web_unsplash/static/src/components/media_dialog/image_selector.xml
@@ -34,20 +34,28 @@
     </div>
 </t>
 
+<t t-inherit="web_editor.ExternalImage" t-inherit-mode="extension">
+    <xpath expr="//t[@t-if]" position="after">
+        <t t-elif="record.mediaType == 'unsplashRecord'">
+            <AutoResizeImage src="record.url"
+                author="record.user.name"
+                authorLink="record.user.links.html"
+                name="record.user.name"
+                title="record.user.name"
+                altDescription="record.alt_description"
+                selected="this.selectedRecordIds.includes(record.id)"
+                onImageClick="() => this.onClickRecord(record)"
+                minRowHeight="MIN_ROW_HEIGHT"
+                onLoaded="(imgEl) => this.onImageLoaded(imgEl, record)"/>
+        </t>
+    </xpath>
+</t>
+
 <t t-name="web_unsplash.ImagesListTemplate" t-inherit="web_editor.ImagesListTemplate" t-inherit-mode="extension">
-    <xpath expr="//t[@id='o_we_media_library_images']" position="after">
-        <t t-if="['all', 'unsplash'].includes(state.searchService)">
-            <t t-foreach="state.unsplashRecords" t-as="record" t-key="record.id">
-                <AutoResizeImage src="record.url"
-                    author="record.user.name"
-                    authorLink="record.user.links.html"
-                    name="record.user.name"
-                    title="record.user.name"
-                    altDescription="record.alt_description"
-                    selected="this.selectedRecordIds.includes(record.id)"
-                    onImageClick="() => this.onClickRecord(record)"
-                    minRowHeight="MIN_ROW_HEIGHT"
-                    onLoaded="(imgEl) => this.onImageLoaded(imgEl, record)"/>
+    <xpath expr="//t[@id='o_we_media_library_images']" position="replace">
+        <t id='o_we_media_library_images' t-if="['all', 'unsplash', 'media-library'].includes(state.searchService)">
+            <t t-foreach="combinedRecords" t-as="record" t-key="record.id">
+                <t t-call="web_editor.ExternalImage"/>
             </t>
         </t>
     </xpath>