changes for show and hiiden on user page

.gitignore

@@ -24,7 +24,6 @@ yarn-error.log
 phpunit.txt
 public/css
 public/js/*.js
-
 public/js/plugins
 public/js/skins
 public/js/themes

public/js/backend/access/users/script.js

-$(function() {
-    $(".show-permissions").click(function(e) {
-        e.preventDefault();
-        var $this = $(this);
-        var role = $this.data('role');
-        var permissions = $(".permission-list[data-role='"+role+"']");
-        var hideText = $this.find('.hide-text');
-        var showText = $this.find('.show-text');
-        // console.log(permissions); // for debugging
-
-        // show permission list
-        permissions.toggleClass('hidden');
-
-        // toggle the text Show/Hide for the link
-        hideText.toggleClass('hidden');
-        showText.toggleClass('hidden');
+window.onload = function () {
+   document.querySelectorAll(".show-permissions").forEach(function(element){
+        element.onclick = function(event){
+            event.preventDefault();
+            var $this = this;
+            var role = $this.getAttribute("data-role");
+    
+            var permissions = document.querySelector(".permission-list[data-role='"+role+"']");
+            var hideText = $this.querySelector('.hide-text');
+            var showText = $this.querySelector('.show-text');
+    
+            // show permission list
+            Backend.Utils.toggleClass(permissions,'hidden');
+    
+            // toggle the text Show/Hide for the link
+            Backend.Utils.toggleClass(hideText,'hidden');
+            Backend.Utils.toggleClass(showText,'hidden');
+        };
     });
-});
+  
+};
+

public/js/backend/admin.js

-var Backend = {
+//common functionalities for all the javascript featueres 
+var Backend = {}; // common variable used in all the files of the backend 
 
+(function()
+{
+    Backend = {
+    
+    Utils:{
+        toggleClass :function(element,className){
+            if (element.classList) {
+                element.classList.toggle(className);
+              } else {
+                var classes = element.className.split(' ');
+                var existingIndex = classes.indexOf(className);
+              
+                if (existingIndex >= 0)
+                  classes.splice(existingIndex, 1);
+                else
+                  classes.push(className);
+              
+                element.className = classes.join(' ');
+              }
+        }
+    },
 
-    /**
+      /**
      * Pages
      *
      */
@@ -20,21 +42,24 @@ var Backend = {
     Access:
     {
         selectors: {
-            select2: jQuery(".select2"),
+            select2: $(".select2"),
         },
 
         init: function ()
         {
+            this.setSelectors();
             this.addHandlers();
         },
+        setSelectors:function(){
+            this.selectors.select2 = $(".select2");
+           
+        },
 
         addHandlers: function ()
         {
             this.selectors.select2.select2();
         }
-    },
-
-
+    },   
     /**
      * Blog
      *
@@ -42,18 +67,24 @@ var Backend = {
     Blog:
     {
         selectors: {
-            tags: jQuery(".tags"),
-            categories : jQuery(".categories"),
-            toDisplay :jQuery(".toDisplay"),
-            status : jQuery(".status"),
+            tags: document.querySelector(".tags"),
+            categories : document.querySelector(".categories"),
+            toDisplay :document.querySelector(".toDisplay"),
+            status : document.querySelector(".status"),
         },
 
         init: function ()
         {
+            this.setSelectors();
             this.addHandlers();
             Backend.tinyMCE.init();
         },
-
+        setSelectors:function(){
+            tags= document.querySelector(".tags");
+            categories = document.querySelector(".categories");
+            toDisplay =document.querySelector(".toDisplay");
+            status = document.querySelector(".status");
+        },
         addHandlers: function ()
         {
             this.selectors.tags.select2({
@@ -117,7 +148,7 @@ var Backend = {
     emailTemplate: {
 
         selectors: {
-            emailtemplateSelection: jQuery(".select2")
+            emailtemplateSelection: document.querySelector(".select2")
         },
 
         init: function () {
@@ -147,12 +178,14 @@ var Backend = {
 
         // ! Backend.emailTemplate.showPreview
         showPreview: function (event) {
-            jQuery( ".modal-body" ).html(tinyMCE.get('txtBody').getContent());
-            $(".model-wrapper").modal('show');
+
+            document.querySelector( ".modal-body" ).innerHTML = tinyMCE.get('txtBody').getContent();
+            document.querySelector( ".modal-body" ).modal('show');
+            
         },
     },
 
-    /**
+     /**
      * Faq
      *
      */
@@ -173,95 +206,138 @@ var Backend = {
         }
     },
 
-    /**
-     * Profile
-     *
-     */
-    Profile:
-    {
-        selectors: {
-            state: jQuery(".st"),
-            cities : jQuery(".ct"),
-        },
 
-        init: function ()
+        /**
+         * Profile
+         *
+         */
+        Profile:
         {
-            this.addHandlers();
+            init: function ()
+            {
+                this.setSelectors();
+                this.addHandlers();
+            },
+            setSelectors:function(){
+                this.selectors.state = document.querySelector(".st");
+                this.selectors.cities = document.querySelector(".ct");
+            },
+            addHandlers: function ()
+            {
+                this.selectors.state.select2();
+                this.selectors.cities.select2();
+            }
         },
 
-        addHandlers: function ()
-        {
-            this.selectors.state.select2();
-            this.selectors.cities.select2();
-        }
-    },
+        /**
+         * for all datatables
+         *
+         */
+        DataTableSearch: { //functionalities related to datable search at all the places 
+            selector:{
+            },
 
-    DataTableSearch: {
-        init: function (dataTable) {
+            init: function (dataTable) {
 
-            // Header All search columns
-            $("div.dataTables_filter input").unbind();
-            $("div.dataTables_filter input").keypress( function (e)
-            {
-                if (e.keyCode == 13)
-                {
-                    dataTable.fnFilter( this.value );
+               this.setSelectors();
+               this.addHandlers();
+       
+            },
+            setSelectors:function(){
+                this.selector.searchInput = document.querySelector("div.dataTables_filter input");
+                this.selector.columnSearchInput = document.querySelectorAll(".search-input-text");
+                this.selector.columnSelectInput = document.querySelectorAll('search-input-select');
+                this.selector.restButton = document.querySelectorAll('.reset-data');
+                this.setSelectors.copyButton = document.getElementById("copyButton");
+                this.setSelectors.csvButton = document.getElementById("csvButton");
+                this.setSelectors.excelButton = document.getElementById("excelButton");
+                this.setSelectors.pdfButton = document.getElementById("pdfButton");
+                this.setSelectors.printButton = document.getElementById("printButton");
+                
+            },
+            cloneElement:function(element,callback){
+                var clone = element.cloneNode();
+                while (element.firstChild) {
+                    clone.appendChild(element.lastChild);
                 }
-            });
-
-            // Individual columns search
-            $('.search-input-text').on( 'keypress', function (e) {
+                element.parentNode.replaceChild(clone, element);
+                Backend.DataTableSearch.setSelectors();
+                callback(this.selector.searchInput);
+            },
+            addHandlers:function(){
+                        // get the datatable search input and on its key press check if we hit enter then search with datatable
+               this.cloneElement(this.selector.searchInput,function(element){ //cloning done to remove any binding of the events
+                    element.onkeypress = function(event){
+                        if(event.keyCode==13){
+                            dataTable.fnFilter( this.value );
+                        }
+                    };
+               }); // to remove all the listinerers  
+               
                 // for text boxes
-                if (e.keyCode == 13)
-                {
-                    var i =$(this).attr('data-column');  // getting column index
-                    var v =$(this).val();  // getting search input value
-                    dataTable.api().columns(i).search(v).draw();
+                //column input search if search box on the column of the datatable given with enter then search with datatable 
+                if(this.selector.columnSearchInput.length>0){
+                    this.selector.columnSearchInput.forEach(function(element){
+                        element.onkeypress = function(event){
+                            if (event.keyCode == 13){
+                                var i =element.getAttribute("data-column")  // getting column index
+                                var v =element.value;  // getting search input value
+                                dataTable.api().columns(i).search(v).draw();
+                            }
+                        };
+                    });
                 }
-            });
+               
+
+               // Individual columns search
+                if(this.selector.columnSelectInput.length>>0){
+                    this.selector.columnSelectInput.forEach(function(element){
+                        element.onchange = function(event){
+                            var i =element.getAttribute("data-column"); // getting column index
+                            var v =element.value;  // getting search input value
+                            dataTable.api().columns(i).search(v).draw();
+                        };
+                    });
+                }
+               
+                // Individual columns reset
+                if(this.selector.restButton.length>>0){
+                    this.selector.restButton.forEach(function(element){
+                        element.onclick = function(event){
+                            var inputelement  = this.previousElementSibling;
+                            var i = inputelement.getAttribute("data-column");
+                            inputelement.value = "";
+                            dataTable.api().columns(i).search("").draw();
+                        };
+                    });
+                }
+
+                this.setSelectors.copyButton.onclick = function(element){
+                    document.querySelector(".copyButton").click();
+                };
+                this.setSelectors.csvButton.onclick = function(element){
+                    document.querySelector(".csvButton").click();
+                };
+                this.setSelectors.excelButton.onclick = function(element){
+                    document.querySelector(".excelButton").click();
+                };
+                this.setSelectors.pdfButton.onclick = function(element){
+                    document.querySelector(".pdfButton").click();
+                };
+                this.setSelectors.printButton.onclick = function(element){
+                    document.querySelector(".printButton").click();
+                };
+            }
+
+        }    
+    };
+})();
+
+
+
+
+
 
-            // Individual columns search
-            $('.search-input-select').on( 'change', function (e) {
-                // for dropdown
-                var i =$(this).attr('data-column');  // getting column index
-                var v =$(this).val();  // getting search input value
-                dataTable.api().columns(i).search(v).draw();
-            });
 
-            // Individual columns reset
-            $('.reset-data').on( 'click', function (e) {
-                var textbox = $(this).prev('input'); // Getting closest input field
-                var i =textbox.attr('data-column');  // Getting column index
-                $(this).prev('input').val(''); // Blank the serch value
-                dataTable.api().columns(i).search("").draw();
-            });
 
-             //Copy button
-            $('#copyButton').click(function(){
-                $('.copyButton').trigger('click');
-            });
-             //Download csv
-            $('#csvButton').click(function(){
-                $('.csvButton').trigger('click');
-            });
-            //Download excelButton
-            $('#excelButton').click(function(){
-                $('.excelButton').trigger('click');
-            });
-            //Download pdf
-            $('#pdfButton').click(function(){
-                $('.pdfButton').trigger('click');
-            });
-             //Download printButton
-            $('#printButton').click(function(){
-                $('.printButton').trigger('click');
-            });
 
-            var id = $('.table-responsive .dataTables_filter').attr('id');
-            $('#'+id+' label').append('<a class="reset-data" id="input-sm-reset" href="javascript:void(0)"><i class="fa fa-times"></i></a>');
-            $(document).on('click', "#"+id+" label #input-sm-reset", function(){
-                dataTable.fnFilter('');
-            });
-        },
-    }
-}
\ No newline at end of file

webpack.mix.js

@@ -43,8 +43,7 @@ mix.sass('resources/assets/sass/frontend/app.scss', 'public/css/frontend.css')
         "public/js/bootstrap-datetimepicker.min.js",
         "public/js/backend/custom-file-input.js",
         "public/js/backend/notification.js",
-        //"public/js/backend/admin.js"
-        "public/js/backend/mainbackend.js"
+        "public/js/backend/admin.js"
     ], 'public/js/backend-custom.js')
     //Datatable js
     .scripts([