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

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
 };

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() {

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() {

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() {

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() {

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')) {

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')) {

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,
+                mine: $("#expose_mine_only").is(':checked') ? 1 : 0,
-                editable: $("#expose_editable_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')) {

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,
+                'publications' => $publicationsList,
-                'basePath'     => $basePath
+                '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
         ]);
     }
 

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
         ];
 
     }

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"

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 () {
 });

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'));
+});

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>

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>

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>

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>

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

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 ">
+                        <div id="publication-list-data" class="ui-widget publication_parent_wrapper" style="margin-top: 10px;margin-left: 2px;">
-                            <select id="publication_parent" name="parent" tabindex="-1" aria-hidden="true"
+                            <select id="publication_parent" name="parent">
-                                    class="publication-field">
+                                <option value="">{{ 'prod:expose:publication:Search a parent publication' | trans }}</option>
-                                <option value="">{{ 'prod:expose:publication:Select 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 %}

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="#"
+            <div style="margin-left:10px; margin-bottom: 10px;">
-                    style="margin-left:10px">{{ 'prod:expose field mapping' |trans }}</button>
+                <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;">
+            <div style="margin-left:10px">
-                <a id="add_publication" class="add_publication" href="#">
+                <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>
 

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">
 

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"