PHRAS-4069: Prod - expose-cli - search publication and parent publication (#4515)

* expose cli fix parent publication * translate and yarn.lock file * some css fix * expose search publication title filter * display nb items * trigger only from more than 3 character * do not display publication in to his parent list * trigger search publication on empty search
2025-10-07 01:54:27 +00:00 · 2024-06-06 19:24:18 +03:00
parent 45e8f29fc9
commit 80d5c400bd
26 changed files with 1125 additions and 1001 deletions
--- a/Phraseanet-production-client/config/config.js
+++ b/Phraseanet-production-client/config/config.js
@@ -13,5 +13,5 @@ module.exports = {
    setupDir: _root + 'tests/setup/node.js',
    karmaConf: _root + 'config/karma.conf.js',
    // change this version when you change JS file for lazy loading
-    assetFileVersion: 105
+    assetFileVersion: 106
 };
--- a/Phraseanet-production-client/dist/authenticate.js
+++ b/Phraseanet-production-client/dist/authenticate.js
@@ -96,7 +96,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/ 		if (__webpack_require__.nc) {
 /******/ 			script.setAttribute("nonce", __webpack_require__.nc);
 /******/ 		}
-/******/ 		script.src = __webpack_require__.p + "lazy-" + ({}[chunkId]||chunkId) + ".js?v=105";
+/******/ 		script.src = __webpack_require__.p + "lazy-" + ({}[chunkId]||chunkId) + ".js?v=106";
 /******/ 		var timeout = setTimeout(onScriptComplete, 120000);
 /******/ 		script.onerror = script.onload = onScriptComplete;
 /******/ 		function onScriptComplete() {
--- a/Phraseanet-production-client/dist/authenticate.min.js
+++ b/Phraseanet-production-client/dist/authenticate.min.js
@@ -96,7 +96,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/ 		if (__webpack_require__.nc) {
 /******/ 			script.setAttribute("nonce", __webpack_require__.nc);
 /******/ 		}
-/******/ 		script.src = __webpack_require__.p + "lazy-" + ({}[chunkId]||chunkId) + ".min.js?v=105";
+/******/ 		script.src = __webpack_require__.p + "lazy-" + ({}[chunkId]||chunkId) + ".min.js?v=106";
 /******/ 		var timeout = setTimeout(onScriptComplete, 120000);
 /******/ 		script.onerror = script.onload = onScriptComplete;
 /******/ 		function onScriptComplete() {
--- a/Phraseanet-production-client/dist/commons.js
+++ b/Phraseanet-production-client/dist/commons.js
@@ -91,7 +91,7 @@
 /******/ 		if (__webpack_require__.nc) {
 /******/ 			script.setAttribute("nonce", __webpack_require__.nc);
 /******/ 		}
-/******/ 		script.src = __webpack_require__.p + "lazy-" + ({}[chunkId]||chunkId) + ".js?v=105";
+/******/ 		script.src = __webpack_require__.p + "lazy-" + ({}[chunkId]||chunkId) + ".js?v=106";
 /******/ 		var timeout = setTimeout(onScriptComplete, 120000);
 /******/ 		script.onerror = script.onload = onScriptComplete;
 /******/ 		function onScriptComplete() {
--- a/Phraseanet-production-client/dist/commons.min.js
+++ b/Phraseanet-production-client/dist/commons.min.js
@@ -91,7 +91,7 @@
 /******/ 		if (__webpack_require__.nc) {
 /******/ 			script.setAttribute("nonce", __webpack_require__.nc);
 /******/ 		}
-/******/ 		script.src = __webpack_require__.p + "lazy-" + ({}[chunkId]||chunkId) + ".min.js?v=105";
+/******/ 		script.src = __webpack_require__.p + "lazy-" + ({}[chunkId]||chunkId) + ".min.js?v=106";
 /******/ 		var timeout = setTimeout(onScriptComplete, 120000);
 /******/ 		script.onerror = script.onload = onScriptComplete;
 /******/ 		function onScriptComplete() {
--- a/Phraseanet-production-client/dist/production.js
+++ b/Phraseanet-production-client/dist/production.js
@@ -10081,6 +10081,14 @@ var workzone = function workzone(services) {
            updatePublicationList(exposeName);
        });

+        (0, _jquery2.default)('#expose_title_filter').on('keyup', function (event) {
+            if ((0, _jquery2.default)(this).val().length > 2 || (0, _jquery2.default)(this).val().length === 0) {
+                var exposeName = (0, _jquery2.default)('#expose_list').val();
+                (0, _jquery2.default)('.publication-list').empty().html('<div style="text-align: center;"><img src="/assets/common/images/icons/main-loader.gif" alt="loading"/></div>');
+                updatePublicationList(exposeName);
+            }
+        });
+
        (0, _jquery2.default)('.refresh-list').on('click', function (event) {
            var exposeName = (0, _jquery2.default)('#expose_list').val();
            (0, _jquery2.default)('.publication-list').empty().html('<div style="text-align: center;"><img src="/assets/common/images/icons/main-loader.gif" alt="loading"/></div>');
@@ -11071,7 +11079,8 @@ var workzone = function workzone(services) {
            url: '/prod/expose/list-publication/?exposeName=' + exposeName + '&page=' + page,
            data: {
                mine: (0, _jquery2.default)("#expose_mine_only").is(':checked') ? 1 : 0,
-                editable: (0, _jquery2.default)("#expose_editable_only").is(':checked') ? 1 : 0
+                editable: (0, _jquery2.default)("#expose_editable_only").is(':checked') ? 1 : 0,
+                title: (0, _jquery2.default)("#expose_title_filter").val()
            },
            success: function success(data) {
                if ('twig' in data) {
@@ -11111,12 +11120,14 @@ var workzone = function workzone(services) {
                    (0, _jquery2.default)('.expose_connected').empty().text(loggedMessage);
                    (0, _jquery2.default)('.expose_logout_link').removeClass('hidden');
                    (0, _jquery2.default)('.expose_field_mapping').removeClass('hidden');
+                    (0, _jquery2.default)('.add_publication').removeClass('hidden');
                    (0, _jquery2.default)('.add_expose_block').removeClass('hidden');
                    (0, _jquery2.default)('.expose-pagination').removeClass('hidden');
                } else {
                    (0, _jquery2.default)('.expose_connected').empty();
                    (0, _jquery2.default)('.expose_logout_link').addClass('hidden');
                    (0, _jquery2.default)('.expose_field_mapping').addClass('hidden');
+                    (0, _jquery2.default)('.add_publication').addClass('hidden');
                    (0, _jquery2.default)('.add_expose_block').addClass('hidden');
                    (0, _jquery2.default)('.expose-pagination').addClass('hidden');
                }
@@ -11146,6 +11157,8 @@ var workzone = function workzone(services) {
                if ('error' in data) {
                    (0, _jquery2.default)('.publication-list').empty().html(data.error);
                }
+
+                (0, _jquery2.default)('#expose_workzone .nb_item').text(data.nbItems);
            },
            error: function error(data) {
                if (data.status === 403 && data.getResponseHeader('x-phraseanet-end-session')) {
--- a/Phraseanet-production-client/dist/production.min.js
+++ b/Phraseanet-production-client/dist/production.min.js
@@ -10081,6 +10081,14 @@ var workzone = function workzone(services) {
            updatePublicationList(exposeName);
        });

+        (0, _jquery2.default)('#expose_title_filter').on('keyup', function (event) {
+            if ((0, _jquery2.default)(this).val().length > 2 || (0, _jquery2.default)(this).val().length === 0) {
+                var exposeName = (0, _jquery2.default)('#expose_list').val();
+                (0, _jquery2.default)('.publication-list').empty().html('<div style="text-align: center;"><img src="/assets/common/images/icons/main-loader.gif" alt="loading"/></div>');
+                updatePublicationList(exposeName);
+            }
+        });
+
        (0, _jquery2.default)('.refresh-list').on('click', function (event) {
            var exposeName = (0, _jquery2.default)('#expose_list').val();
            (0, _jquery2.default)('.publication-list').empty().html('<div style="text-align: center;"><img src="/assets/common/images/icons/main-loader.gif" alt="loading"/></div>');
@@ -11071,7 +11079,8 @@ var workzone = function workzone(services) {
            url: '/prod/expose/list-publication/?exposeName=' + exposeName + '&page=' + page,
            data: {
                mine: (0, _jquery2.default)("#expose_mine_only").is(':checked') ? 1 : 0,
-                editable: (0, _jquery2.default)("#expose_editable_only").is(':checked') ? 1 : 0
+                editable: (0, _jquery2.default)("#expose_editable_only").is(':checked') ? 1 : 0,
+                title: (0, _jquery2.default)("#expose_title_filter").val()
            },
            success: function success(data) {
                if ('twig' in data) {
@@ -11111,12 +11120,14 @@ var workzone = function workzone(services) {
                    (0, _jquery2.default)('.expose_connected').empty().text(loggedMessage);
                    (0, _jquery2.default)('.expose_logout_link').removeClass('hidden');
                    (0, _jquery2.default)('.expose_field_mapping').removeClass('hidden');
+                    (0, _jquery2.default)('.add_publication').removeClass('hidden');
                    (0, _jquery2.default)('.add_expose_block').removeClass('hidden');
                    (0, _jquery2.default)('.expose-pagination').removeClass('hidden');
                } else {
                    (0, _jquery2.default)('.expose_connected').empty();
                    (0, _jquery2.default)('.expose_logout_link').addClass('hidden');
                    (0, _jquery2.default)('.expose_field_mapping').addClass('hidden');
+                    (0, _jquery2.default)('.add_publication').addClass('hidden');
                    (0, _jquery2.default)('.add_expose_block').addClass('hidden');
                    (0, _jquery2.default)('.expose-pagination').addClass('hidden');
                }
@@ -11146,6 +11157,8 @@ var workzone = function workzone(services) {
                if ('error' in data) {
                    (0, _jquery2.default)('.publication-list').empty().html(data.error);
                }
+
+                (0, _jquery2.default)('#expose_workzone .nb_item').text(data.nbItems);
            },
            error: function error(data) {
                if (data.status === 403 && data.getResponseHeader('x-phraseanet-end-session')) {
--- a/Phraseanet-production-client/src/components/ui/workzone/index.js
+++ b/Phraseanet-production-client/src/components/ui/workzone/index.js
@@ -127,6 +127,14 @@ const workzone = (services) => {
            updatePublicationList(exposeName);
        });

+        $('#expose_title_filter').on('keyup', function (event) {
+            if ($(this).val().length > 2 || $(this).val().length === 0) {
+                let exposeName = $('#expose_list').val();
+                $('.publication-list').empty().html('<div style="text-align: center;"><img src="/assets/common/images/icons/main-loader.gif" alt="loading"/></div>');
+                updatePublicationList(exposeName);
+            }
+        });
+
        $('.refresh-list').on('click',function (event) {
            let exposeName = $('#expose_list').val();
            $('.publication-list').empty().html('<div style="text-align: center;"><img src="/assets/common/images/icons/main-loader.gif" alt="loading"/></div>');
@@ -1129,8 +1137,9 @@ const workzone = (services) => {
            type: 'GET',
            url: '/prod/expose/list-publication/?exposeName=' + exposeName + '&page=' + page,
            data:{
-                mine : $("#expose_mine_only").is(':checked') ? 1 : 0,
-                editable: $("#expose_editable_only").is(':checked') ? 1 : 0
+                mine: $("#expose_mine_only").is(':checked') ? 1 : 0,
+                editable: $("#expose_editable_only").is(':checked') ? 1 : 0,
+                title: $("#expose_title_filter").val()
            },
            success: function (data) {
                if ('twig' in data) {
@@ -1171,12 +1180,14 @@ const workzone = (services) => {
                    $('.expose_connected').empty().text(loggedMessage);
                    $('.expose_logout_link').removeClass('hidden');
                    $('.expose_field_mapping').removeClass('hidden');
+                    $('.add_publication').removeClass('hidden');
                    $('.add_expose_block').removeClass('hidden');
                    $('.expose-pagination').removeClass('hidden');
                } else {
                    $('.expose_connected').empty();
                    $('.expose_logout_link').addClass('hidden');
                    $('.expose_field_mapping').addClass('hidden');
+                    $('.add_publication').addClass('hidden');
                    $('.add_expose_block').addClass('hidden');
                    $('.expose-pagination').addClass('hidden');
                }
@@ -1206,6 +1217,8 @@ const workzone = (services) => {
                if ('error' in data) {
                    $('.publication-list').empty().html(data.error);
                }
+
+                $('#expose_workzone .nb_item').text(data.nbItems);
            },
            error: function (data) {
                if (data.status === 403 && data.getResponseHeader('x-phraseanet-end-session')) {
--- a/lib/Alchemy/Phrasea/PhraseanetService/Controller/PSExposeController.php
+++ b/lib/Alchemy/Phrasea/PhraseanetService/Controller/PSExposeController.php
@@ -186,6 +186,7 @@ class PSExposeController extends Controller
    {
        $exposeName = $request->get('exposeName');
        $page = empty($request->get('page')) ? 1 : $request->get('page');
+        $title = urlencode($request->get('title'));

        if ($exposeName == null) {
            return $app->json([
@@ -240,7 +241,8 @@ class PSExposeController extends Controller
        $exposeClient = $proxyConfig->getClientWithOptions($clientOptions);

        try {
-            $uri = '/publications?flatten=true&order[createdAt]=desc&page=' . $page;
+            $uri = '/publications?flatten=true&order[createdAt]=desc&page=' . $page . '&title=' . $title;
+
            if ($request->get('mine') && $exposeConfiguration['connection_kind'] === 'password') {
                $uri .= '&mine=true';
            }
@@ -294,9 +296,27 @@ class PSExposeController extends Controller
        $exposeFrontBasePath = \p4string::addEndSlash($exposeConfiguration['expose_front_uri']);

        if ($request->get('format') == 'pub-list') {
+            $publicationsList = [];
+            $excludePublication = $request->get('exclude');
+
+            $key = 0;
+            foreach ($publications as $publication) {
+                if ($excludePublication != $publication['id']) {
+                    $publicationsList[$key]['id']   = $basePath . '/' . $publication['id'];
+                    $publicationsList[$key]['text'] = $publication['title'];
+                    $key++;
+                }
+            }
+
+            $pagination = ['more' => false];
+            if ($nextPage) {
+                $pagination = ['more' => true];
+            }
+
            return $app->json([
-                'publications' => $publications,
-                'basePath'     => $basePath
+                'publications' => $publicationsList,
+                'basePath'     => $basePath,
+                'pagination'   => $pagination
            ]);
        }

@@ -318,7 +338,8 @@ class PSExposeController extends Controller
            'exposeLogin'   => $session->get($this->getLoginSessionName($exposeName)),
            'basePath'      => $basePath,
            'previousPage'  => $previousPage,
-            'nextPage'      => $nextPage
+            'nextPage'      => $nextPage,
+            'nbItems'       => count($publications) . ' / ' . $totalItems
        ]);
    }

--- a/lib/Alchemy/Phrasea/Twig/PhraseanetExtension.php
+++ b/lib/Alchemy/Phrasea/Twig/PhraseanetExtension.php
@@ -63,7 +63,7 @@ class PhraseanetExtension extends \Twig_Extension
    {
        return [
            // change this version when you change JS file to force the navigation to reload js file
-            'assetFileVersion' => 105
+            'assetFileVersion' => 106
        ];

    }
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
    "npm-modernizr": "^2.8.3",
    "pusher-js": "^8.3.0",
    "requirejs": "^2.3.5",
+    "select2": "^4.1.0-rc.0",
    "tinymce": "^4.0.28",
    "underscore": "^1.8.3",
    "zxcvbn": "^4.4.2"
--- a/resources/gulp/build.js
+++ b/resources/gulp/build.js
@@ -51,6 +51,7 @@ gulp.task('build-vendors', [
    'build-jquery-test-paths',
    'build-simple-colorpicker',
    'build-jquery-datetimepicker',
-    'build-pusher-js'
+    'build-pusher-js',
+    'build-select2'
 ], function () {
 });
--- a/resources/gulp/components/vendors/select2.js
+++ b/resources/gulp/components/vendors/select2.js
@@ -0,0 +1,8 @@
+var gulp = require('gulp');
+var config = require('../../config.js');
+var utils = require('../../utils.js');
+
+gulp.task('build-select2', [], function(){
+    return gulp.src([config.paths.nodes + 'select2/**'])
+        .pipe(gulp.dest(config.paths.build + 'vendors/select2'));
+});
--- a/resources/locales/messages.de.xlf
+++ b/resources/locales/messages.de.xlf
--- a/resources/locales/messages.en.xlf
+++ b/resources/locales/messages.en.xlf
--- a/resources/locales/messages.fr.xlf
+++ b/resources/locales/messages.fr.xlf
--- a/resources/locales/messages.nl.xlf
+++ b/resources/locales/messages.nl.xlf
--- a/resources/locales/validators.de.xlf
+++ b/resources/locales/validators.de.xlf
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" xmlns:jms="urn:jms:translation" version="1.2">
-  <file date="2024-04-18T08:40:52Z" source-language="en" target-language="de" datatype="plaintext" original="not.available">
+  <file date="2024-06-05T12:43:29Z" source-language="en" target-language="de" datatype="plaintext" original="not.available">
    <header>
      <tool tool-id="JMSTranslationBundle" tool-name="JMSTranslationBundle" tool-version="1.1.0-DEV"/>
      <note>The source node in most cases contains the sample message as written by the developer. If it looks like a dot-delimitted string such as "form.label.firstname", then the developer has not provided a default message.</note>
--- a/resources/locales/validators.en.xlf
+++ b/resources/locales/validators.en.xlf
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" xmlns:jms="urn:jms:translation" version="1.2">
-  <file date="2024-04-18T08:41:08Z" source-language="en" target-language="en" datatype="plaintext" original="not.available">
+  <file date="2024-06-05T12:43:51Z" source-language="en" target-language="en" datatype="plaintext" original="not.available">
    <header>
      <tool tool-id="JMSTranslationBundle" tool-name="JMSTranslationBundle" tool-version="1.1.0-DEV"/>
      <note>The source node in most cases contains the sample message as written by the developer. If it looks like a dot-delimitted string such as "form.label.firstname", then the developer has not provided a default message.</note>
--- a/resources/locales/validators.fr.xlf
+++ b/resources/locales/validators.fr.xlf
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" xmlns:jms="urn:jms:translation" version="1.2">
-  <file date="2024-04-18T08:41:27Z" source-language="en" target-language="fr" datatype="plaintext" original="not.available">
+  <file date="2024-06-05T12:44:17Z" source-language="en" target-language="fr" datatype="plaintext" original="not.available">
    <header>
      <tool tool-id="JMSTranslationBundle" tool-name="JMSTranslationBundle" tool-version="1.1.0-DEV"/>
      <note>The source node in most cases contains the sample message as written by the developer. If it looks like a dot-delimitted string such as "form.label.firstname", then the developer has not provided a default message.</note>
--- a/resources/locales/validators.nl.xlf
+++ b/resources/locales/validators.nl.xlf
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" xmlns:jms="urn:jms:translation" version="1.2">
-  <file date="2024-04-18T08:41:50Z" source-language="en" target-language="nl" datatype="plaintext" original="not.available">
+  <file date="2024-06-05T12:44:47Z" source-language="en" target-language="nl" datatype="plaintext" original="not.available">
    <header>
      <tool tool-id="JMSTranslationBundle" tool-name="JMSTranslationBundle" tool-version="1.1.0-DEV"/>
      <note>The source node in most cases contains the sample message as written by the developer. If it looks like a dot-delimitted string such as "form.label.firstname", then the developer has not provided a default message.</note>
--- a/templates/web/prod/WorkZone/ExposeEdit.html.twig
+++ b/templates/web/prod/WorkZone/ExposeEdit.html.twig
@@ -25,7 +25,7 @@
    <div id="publication-editing">
        <div class="expose-edit-wrapper">
            <br/>
-            <form id="publication-data-form" >
+            <form id="publication-data-form-edit" >
                <div class="edit-publication-block">
                    <div class="ui-widget">
                        <label>{{ 'prod:expose:publication:Name' | trans }}</label>
@@ -44,13 +44,13 @@
                    </div>
                    <div class="ui-widget">
                        <label>{{ 'prod:expose:publication:Parent Publication' | trans }}</label>
-                        <div id="publication-list-data" class="ui-widget publication_parent_wrapper ">
+                        <div id="publication-list-data" class="ui-widget publication_parent_wrapper" style="margin-top: 10px;margin-left: 2px;">
                            {% if publication.parent.id %}
                                {% set parentId =  publication.parent.id %}
                            {% endif %}
-                            <select id="publication_parent" name="parent" tabindex="-1" aria-hidden="true"
+                            <select id="publication_parent_edit" name="parent" tabindex="-1" aria-hidden="true"
                                    class="publication-field">
-                                <option value="">{{ 'prod:expose:publication:Select a parent publication' | trans }}</option>
+                                <option value="">{{ 'prod:expose:publication:Search a parent publication' | trans }}</option>
                                {% if publication.parent %}
                                    <option value="/publications/{{ publication.parent.id }}" selected="selected">{{ publication.parent.title }}</option>
                                {% endif %}
@@ -201,8 +201,8 @@
    <script type="text/javascript">
        var publicationEdit = $(document).find("#DIALOG-expose-edit");

-        var publicationForm = publicationEdit.find("#publication-data-form");
-        var publicationParent = publicationEdit.find("#publication_parent");
+        var publicationForm = publicationEdit.find("#publication-data-form-edit");
+        var publicationParent = publicationEdit.find("#publication_parent_edit");
        var securityMethod = publicationEdit.find("#publication_securityMethod");
        var profileField = publicationEdit.find("#profile-field");
        var userList = publicationEdit.find("#user-list");
@@ -222,22 +222,31 @@
                $(this).next("div#moreSettingInner").toggleClass('hidden');
            });

-            $.ajax({
-                type: "GET",
-                url: `/prod/expose/list-publication/?format=pub-list&exposeName={{ exposeName }}`,
-                success: function (data) {
-                    publicationParent.empty().html('<option value="">{{ "prod:expose:publication:Select a parent publication" | trans }}</option>');
-                    for (i = 0; i < data.publications.length; i++) {
-                        let selected = '';
-                        if (data.publications[i].id == '{{ parentId }}') {
-                            selected = 'selected="selected"';
-                        }
+            publicationParent.select2({
+                ajax: {
+                    url: `/prod/expose/list-publication/`,
+                    data: function (params) {
+                        let exposeName = $('#expose_list').val();
+                        // Query parameters will be ?title=[term]&exposeName=[exposeName]&format=pub-list&page=[page]

-                        if (data.publications[i].id !== '{{ publication.id }}') {
-                            publicationParent.append('<option value='+ data.basePath + '/' + data.publications[i].id+' ' + selected +'>'+data.publications[i].title+'</option>');
-                        }
-                    }
-                }
+                        return {
+                            title: params.term,
+                            exposeName: exposeName,
+                            format: 'pub-list',
+                            editable: 1,
+                            page: params.page || 1,
+                            exclude: '{{ publication.id }}'
+                        };
+                    },
+                    processResults: function (data) {
+                        return {
+                            results: data.publications,
+                            pagination: data.pagination
+                        };
+                    },
+                    delay: 1000,
+                },
+                dropdownParent: $('#publication-data-form-edit'),
            });

            {% if publication.capabilities.operator %}
@@ -388,7 +397,7 @@
                    success: function (data) {
                        if (data.success) {
                            publicationEdit.find("#pub-success").removeClass("hidden").html(data.message);
-                            document.getElementById("publication-data-form").reset();
+                            document.getElementById("publication-data-form-edit").reset();
                            setTimeout(function(){
                                    $('#DIALOG-expose-edit').dialog('close');
                                }
--- a/templates/web/prod/WorkZone/ExposeNew.html.twig
+++ b/templates/web/prod/WorkZone/ExposeNew.html.twig
@@ -1,6 +1,6 @@
 {% macro add_publication(app) %}
    <div id='DIALOG-expose-add' style="display: none">
-        <div class="expose-edit-wrapper">
+        <div class="expose-edit-wrapper" style="position:relative;">
            <form id="publication-data-form" >
                <div class="edit-publication-block">
                    <div class="ui-widget">
@@ -20,10 +20,9 @@
                    </div>
                    <div class="ui-widget">
                        <label>{{ 'prod:expose:publication:Parent Publication' | trans }}</label>
-                        <div id="publication-list-data" class="ui-widget publication_parent_wrapper ">
-                            <select id="publication_parent" name="parent" tabindex="-1" aria-hidden="true"
-                                    class="publication-field">
-                                <option value="">{{ 'prod:expose:publication:Select a parent publication' | trans }}</option>
+                        <div id="publication-list-data" class="ui-widget publication_parent_wrapper" style="margin-top: 10px;margin-left: 2px;">
+                            <select id="publication_parent" name="parent">
+                                <option value="">{{ 'prod:expose:publication:Search a parent publication' | trans }}</option>
                            </select>
                        </div>
                    </div>
@@ -158,6 +157,33 @@
        }

        $(document).ready(function () {
+
+            $("#publication_parent").select2({
+                ajax: {
+                    url: `/prod/expose/list-publication/`,
+                    data: function (params) {
+                        let exposeName = $('#expose_list').val();
+                        // Query parameters will be ?title=[term]&exposeName=[exposeName]&format=pub-list&page=[page]
+
+                        return {
+                            title: params.term,
+                            exposeName: exposeName,
+                            format: 'pub-list',
+                            editable: 1,
+                            page: params.page || 1
+                        };
+                    },
+                    processResults: function (data) {
+                        return {
+                            results: data.publications,
+                            pagination: data.pagination
+                        };
+                    },
+                    delay: 1000
+                },
+                dropdownParent: $('#publication-data-form')
+            });
+
            $.datetimepicker.setLocale('{{ app['locale'] }}');

            $(".new-use-datepicker").datetimepicker({
@@ -345,17 +371,6 @@
            removeSecurityFieldDialogAdd();
        });

-        /**Selected Parent info **/
-        $(document).on('change', '#publication_parent', function (e) {
-            var selectedparent = $(this).children('option:selected');
-            if (selectedparent.val() !== "") {
-                $('#parent_info').html('').append('<p>Title : ' + selectedparent.data('title') + '</p><p>Slug: ' + selectedparent.data('slug') + '</p>');
-            } else {
-                $('#parent_info').html('');
-            }
-        });
-
-
        $('#DIALOG-expose-add').on('submit', '#publication-json', function (e) {
            e.preventDefault();
            removeSecurityFieldDialogAdd();
@@ -436,18 +451,6 @@
                 $('#DIALOG-expose-add').dialog('close');
             });

-             $.ajax({
-                 type: "GET",
-                 url: `/prod/expose/list-publication/?format=pub-list&exposeName=` + exposeName,
-                 success: function (data) {
-                     $('#DIALOG-expose-add #publication_parent').empty().html('<option value="">Select a parent publication</option>');
-                     var i = 0;
-                     for ( ;i < data.publications.length; i++) {
-                         $('#DIALOG-expose-add select#publication_parent').append('<option value=' + data.basePath + '/' + data.publications[i].id+' >'+data.publications[i].title+'</option>');
-                     }
-                 }
-             });
-
             $.ajax({
                 type: "GET",
                 url: `/prod/expose/list-profile?exposeName=` + exposeName,
@@ -478,5 +481,15 @@
        .publication-block .ui-widget.hide {
            display: none;
        }
+        .select2-dropdown {
+            z-index: 4000;
+        }
+        .select2-container {
+            color: #555;
+            font-size: 14px;
+        }
+        .select2-container--open .select2-dropdown {
+            left: 220px;
+        }
    </style>
 {% endmacro %}
--- a/templates/web/prod/WorkZone/Macros.html.twig
+++ b/templates/web/prod/WorkZone/Macros.html.twig
@@ -691,15 +691,22 @@
                {% endif %}
            </div>

-            <button class="btn btn-secondary btn-sm expose_field_mapping hidden" href="#"
-                    style="margin-left:10px">{{ 'prod:expose field mapping' |trans }}</button>
+            <div style="margin-left:10px; margin-bottom: 10px;">
+                <button class="btn-primary btn-sm expose_field_mapping hidden" href="#" >{{ 'prod:expose field mapping' |trans }}
+                </button>
+            </div>

-            <div class="add_expose_block hidden" style="padding:10px;display:flex; align-items: center;">
-                <a id="add_publication" class="add_publication" href="#">
+            <div style="margin-left:10px">
+                <button id="add_publication" class="add_publication btn-primary btn-sm hidden">
                    <span>{{ 'prod:expose:Add publication' | trans }}</span>
                    <img src="/assets/common/images/icons/Basket-New.png"
                         title="{{ 'prod:expose:Add publication' | trans }}">
-                </a>
+                </button>
+            </div>
+
+            <div class="add_expose_block hidden" style="padding:10px;display:flex; align-items: center;">
+
+                <input type="text" value="" name="expose_title_filter" id="expose_title_filter" placeholder="{{ 'prod:expose search' | trans }}" style="max-width: 130px;">

                <label class="checkbox" for="expose_editable_only" style="font-size: 12px; margin-left: auto;">
                    <input type="checkbox" id="expose_editable_only" name="expose_editable_only" value="1">
@@ -720,6 +727,7 @@
                <a class="publication-pagination previous-publication" style="cursor:pointer;color:#4990e2;">&#60; {{ 'prod:expose previous' | trans}}</a>
                <span class="publication-page" style="margin-left: 20px; color:#4990e2;">1</span>
                <a class="publication-pagination next-publication" style="margin-left: 20px;cursor:pointer;color:#4990e2;"> {{ 'prod:expose next' | trans}} &#62;</a>
+                <span class="nb_item pull-right" style="margin-bottom: 10px; margin-right: 10px;"></span>
            </div>
        </div>

--- a/templates/web/prod/index.html.twig
+++ b/templates/web/prod/index.html.twig
@@ -68,6 +68,8 @@
 {% block stylesheet %}
    <link type="text/css" rel="stylesheet" href="/assets/production/production{% if not app.debug %}.min{% endif %}.css?v={{ assetFileVersion }}">
    <link id="skinCss" type="text/css" rel="stylesheet" href="/assets/production/skin-{{ cssfile  }}{% if not app.debug %}.min{% endif %}.css?v={{ assetFileVersion }}">
+    <link href="/assets/vendors/select2/dist/css/select2.min.css" rel="stylesheet" />
+
    <style title="color_selection" type="text/css">
        .diapo.selected,#reorder_box .diapo.selected, #EDIT_ALL .diapo.selected, .list.selected, .list.selected .diapo {
            color: {{"#" ~ app['settings'].getUserSetting(app.getAuthenticatedUser(), 'fontcolor-selection', 'FFFFFF')}};
@@ -85,6 +87,7 @@
    <script type="text/javascript" src="/assets/production/commons{% if not app.debug %}.min{% endif %}.js?v={{ assetFileVersion }}"></script>
    <script type="text/javascript" src="/assets/production/production{% if not app.debug %}.min{% endif %}.js?v={{ assetFileVersion }}"></script>
    <script type="text/javascript" src="/assets/vendors/tinymce/tinymce.min.js"></script>
+    <script type="text/javascript" src="/assets/vendors/select2/dist/js/select2.min.js"></script>

    <script type="text/javascript">

--- a/yarn.lock
+++ b/yarn.lock
@@ -6047,6 +6047,11 @@ scss-tokenizer@^0.2.3:
    js-base64 "^2.1.8"
    source-map "^0.4.2"

+select2@^4.1.0-rc.0:
+  version "4.1.0-rc.0"
+  resolved "https://registry.yarnpkg.com/select2/-/select2-4.1.0-rc.0.tgz#ba3cd3901dda0155e1c0219ab41b74ba51ea22d8"
+  integrity sha512-Hr9TdhyHCZUtwznEH2CBf7967mEM0idtJ5nMtjvk3Up5tPukOLXbHUNmh10oRfeNIhj+3GD3niu+g6sVK+gK0A==
+
 semver-diff@^2.0.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-2.1.0.tgz#4bbb8437c8d37e4b0cf1a68fd726ec6d645d6d36"