Upgrade extension search selector

Fix paste number in mobile field in extension form
mikopbx · Sep 20, 2024 · fcd7ffb · fcd7ffb
1 parent 48b96ee
commit fcd7ffb
Show file tree

Hide file tree

Showing 18 changed files with 5,495 additions and 3,569 deletions.
diff --git a/sites/admin-cabinet/assets/css/custom.css b/sites/admin-cabinet/assets/css/custom.css
@@ -582,4 +582,9 @@ a.ui.button.pbx-extensions-settings {
 
 #extensions-table th {
     padding: .4em .6em;
+}
+
+/** Improve extensions search filed view */
+#search-extensions-input .prompt{
+    border-radius: 5px;
 }
diff --git a/sites/admin-cabinet/assets/js/pbx/Extensions/extension-modify.js b/sites/admin-cabinet/assets/js/pbx/Extensions/extension-modify.js
diff --git a/sites/admin-cabinet/assets/js/pbx/Extensions/extensions-index.js b/sites/admin-cabinet/assets/js/pbx/Extensions/extensions-index.js
diff --git a/sites/admin-cabinet/assets/js/pbx/PbxAPI/extensionsAPI.js b/sites/admin-cabinet/assets/js/pbx/PbxAPI/extensionsAPI.js
diff --git a/sites/admin-cabinet/assets/js/src/Extensions/extension-modify.js b/sites/admin-cabinet/assets/js/src/Extensions/extension-modify.js
@@ -233,6 +233,8 @@ const extension = {
             extension.cbOnCompleteNumber();
         });
 
+        //extension.$mobile_number.val(new libphonenumber.AsYouType().input('+'+extension.$mobile_number.val()));
+
         // Set up the input masks for the mobile number input
         const maskList = $.masksSort(InputMaskPatterns, ['#'], /[0-9]|#/, 'mask');
         extension.$mobile_number.inputmasks({
@@ -254,6 +256,38 @@ const extension = {
             listKey: 'mask',
         });
 
+        extension.$mobile_number.on('paste', function(e) {
+            e.preventDefault(); // Предотвращаем стандартное поведение вставки
+
+            // Получаем вставленные данные из буфера обмена
+            let pastedData = '';
+            if (e.originalEvent.clipboardData && e.originalEvent.clipboardData.getData) {
+                pastedData = e.originalEvent.clipboardData.getData('text');
+            } else if (window.clipboardData && window.clipboardData.getData) { // Для IE
+                pastedData = window.clipboardData.getData('text');
+            }
+
+            // Проверяем, начинается ли вставленный текст с '+'
+            if (pastedData.charAt(0) === '+') {
+                // Сохраняем '+' и удаляем остальные нежелательные символы
+                var processedData = '+' + pastedData.slice(1).replace(/\D/g, '');
+            } else {
+                // Удаляем все символы, кроме цифр
+                var processedData = pastedData.replace(/\D/g, '');
+            }
+
+            // Вставляем очищенные данные в поле ввода
+            const input = this;
+            const start = input.selectionStart;
+            const end = input.selectionEnd;
+            const currentValue = $(input).val();
+            const newValue = currentValue.substring(0, start) + processedData + currentValue.substring(end);
+            extension.$mobile_number.inputmask("remove");
+            extension.$mobile_number.val(newValue);
+            // Триггерим событие 'input' для применения маски ввода
+            $(input).trigger('input');
+        });
+
         // Set up the input mask for the email input
         let timeoutEmailId;
         extension.$email.inputmask('email', {
@@ -272,7 +306,7 @@ const extension = {
             extension.cbOnCompleteEmail();
         });
 
-        // Attach a focusout event listener to the mobile number input
+        //Attach a focusout event listener to the mobile number input
         extension.$mobile_number.focusout(function (e) {
             let phone = $(e.target).val().replace(/[^0-9]/g, "");
             if (phone === '') {
@@ -353,7 +387,8 @@ const extension = {
             // Check if call forwarding was set to the default mobile number
             if (extension.$formObj.form('get value', 'fwd_forwarding') === extension.defaultMobileNumber) {
                 // If the ring length is empty, set it to 45
-                if (extension.$formObj.form('get value', 'fwd_ringlength').length === 0) {
+                if (extension.$formObj.form('get value', 'fwd_ringlength').length === 0
+                    || extension.$formObj.form('get value', 'fwd_ringlength')==="0") {
                     extension.$formObj.form('set value', 'fwd_ringlength', 45);
                 }
 

diff --git a/sites/admin-cabinet/assets/js/src/Extensions/extensions-index.js b/sites/admin-cabinet/assets/js/src/Extensions/extensions-index.js
@@ -45,6 +45,12 @@ const extensionsIndex = {
      */
     $pageLengthSelector:$('#page-length-select'),
 
+    /**
+     * The page length selector.
+     * @type {jQuery}
+     */
+    $searchExtensionsInput: $('#search-extensions-input'),
+
     /**
      * The data table object.
      * @type {Object}
@@ -133,6 +139,36 @@ const extensionsIndex = {
                 extensionsIndex.dataTable.page.len(pageLength).draw();
             },
         });
+        extensionsIndex.$pageLengthSelector.on('click', function(event) {
+            event.stopPropagation(); // Prevent the event from bubbling
+        });
+        // Initialize the Search component
+        extensionsIndex.$searchExtensionsInput.search({
+            minCharacters: 0,
+            searchOnFocus: false,
+            searchFields: ['title'],
+            showNoResults: false,
+            source: [
+                { title: globalTranslate.ex_SearchByExtension, value: 'number:' },
+                { title: globalTranslate.ex_SearchByMobile, value: 'mobile:' },
+                { title: globalTranslate.ex_SearchByEmail, value: 'email:' },
+                { title: globalTranslate.ex_SearchByID, value: 'id:' },
+                { title: globalTranslate.ex_SearchByCustomPhrase, value: '' },
+            ],
+            onSelect: function(result, response) {
+                extensionsIndex.$globalSearch.val(result.value);
+                extensionsIndex.$searchExtensionsInput.search('hide results');
+                return false;
+            }
+        });
+
+
+        // Start the search when you click on the icon
+        $('#search-icon').on('click', function() {
+            extensionsIndex.$globalSearch.focus();
+            extensionsIndex.$searchExtensionsInput.search('query');
+        });
+
     },
 
     // Set up the DataTable on the extensions list.
@@ -316,7 +352,7 @@ const extensionsIndex = {
 
         // Calculate window height and available space for table
         const windowHeight = window.innerHeight;
-        const headerFooterHeight = 380; // Estimate height for header, footer, and other elements
+        const headerFooterHeight = 390; // Estimate height for header, footer, and other elements
 
         // Calculate new page length
         return Math.max(Math.floor((windowHeight - headerFooterHeight) / rowHeight), 5);

diff --git a/sites/admin-cabinet/assets/js/src/PbxAPI/extensionsAPI.js b/sites/admin-cabinet/assets/js/src/PbxAPI/extensionsAPI.js
@@ -281,7 +281,7 @@ const Extensions = {
                 if (response.data['available'] === true) {
                     $(`.ui.input.${cssClassName}`).parent().removeClass('error');
                     $(`#${cssClassName}-error`).addClass('hidden');
-                } else if (userId.length > 0 && response.data['userId'] === userId) {
+                } else if (userId.length > 0 && parseInt(response.data['userId']) === parseInt(userId)) {
                     $(`.ui.input.${cssClassName}`).parent().removeClass('error');
                     $(`#${cssClassName}-error`).addClass('hidden');
                 } else {

diff --git a/sites/admin-cabinet/assets/js/vendor/inputmask/bindings/inputmask.binding.js b/sites/admin-cabinet/assets/js/vendor/inputmask/bindings/inputmask.binding.js
@@ -6,21 +6,26 @@
  */
 (function (factory) {
 	factory(jQuery, window.Inputmask, window);
-}
-(function ($, Inputmask, window) {
-	$(window.document).ajaxComplete(function (event, xmlHttpRequest, ajaxOptions) {
-		if ($.inArray("html", ajaxOptions.dataTypes) !== -1) {
-			$(".inputmask, [data-inputmask], [data-inputmask-mask], [data-inputmask-alias], [data-inputmask-regex]").each(function (ndx, lmnt) {
+})(function ($, Inputmask, window) {
+	$(window.document)
+		.ajaxComplete(function (event, xmlHttpRequest, ajaxOptions) {
+			if ($.inArray("html", ajaxOptions.dataTypes) !== -1) {
+				$(
+					".inputmask, [data-inputmask], [data-inputmask-mask], [data-inputmask-alias], [data-inputmask-regex]"
+				).each(function (ndx, lmnt) {
+					if (lmnt.inputmask === undefined) {
+						Inputmask().mask(lmnt);
+					}
+				});
+			}
+		})
+		.ready(function () {
+			$(
+				".inputmask, [data-inputmask], [data-inputmask-mask], [data-inputmask-alias],[data-inputmask-regex]"
+			).each(function (ndx, lmnt) {
 				if (lmnt.inputmask === undefined) {
 					Inputmask().mask(lmnt);
 				}
 			});
-		}
-	}).ready(function () {
-		$(".inputmask, [data-inputmask], [data-inputmask-mask], [data-inputmask-alias],[data-inputmask-regex]").each(function (ndx, lmnt) {
-			if (lmnt.inputmask === undefined) {
-				Inputmask().mask(lmnt);
-			}
 		});
-	});
-}));
+});