const eventHub = new Vue(), buildQuery = function ( params ) { return Object.keys( params ).map(function ( key ) { return key + '=' + params[key]; } ).join( '&' ); }; Vue.directive( 'click-outside', { bind: function ( el, binding, vnode ) { el.clickOutsideEvent = function ( event ) { if ( ! ( el == event.target || el.contains( event.target ) ) ) { vnode.context[ binding.expression ]( event ); } }; document.body.addEventListener( 'click', el.clickOutsideEvent ) }, unbind: function ( el ) { document.body.removeEventListener( 'click', el.clickOutsideEvent ) } } ); Vue.component( 'jet-search-suggestions-settings', { template: '#jet-dashboard-jet-search-suggestions-settings', data: function() { return { settings: window.JetSearchSettingsConfig, generalSettings: { records_limit: "5", use_session: false, widget_suggestion_save_permission: true, }, isLoading: true, itemsList: [], parentsList: [], totalItems: 0, offset: 0, perPage: 30, onPage: 0, pageNumber: 1, currentFilterQuery: {}, columnsIDs: [ 'id', 'type', 'name', 'weight', 'actions' ], labels: { id: 'ID', type: 'Type', name : 'Name', weight: 'Weight', actions: 'Actions' }, curentSort: 'id', sortBy: { orderby: 'id', order: 'ASC', }, notSortable: [ 'type', 'actions', ], popUpState: '', popUpContent: {}, popUpShow: false, nameError: false }; }, methods: { getItemLabel: function ( key ) { let lable = this.labels[key] ? this.labels[key] : key; return lable; }, getItemColumnValue: function ( item, key ) { if ( 'parent' != key ) { return item[key]; } }, sortColumn: function ( column ) { if ( this.notSortable.includes( column ) ) { return false; } this.curentSort = column; let newSortBy = { orderby: column, order: "DESC" === this.sortBy.order ? "ASC" : "DESC" }; this.sortBy = newSortBy; this.getItems( this.currentFilterQuery ); }, getItems : function( filterQuery = {} ) { this.isLoading = true; let query = buildQuery( { per_page: this.perPage, offset: this.offset, sort: JSON.stringify( this.sortBy ), filter: JSON.stringify( filterQuery ), action: encodeURIComponent( 'jet_search_get_suggestion' ), nonce: this.settings.nonce, } ), queryPath = `${this.settings.getSuggestionsUrl}?${query}`; wp.apiFetch( { method: 'GET', url: queryPath, } ).then( ( response ) => { let item_list = response.items_list; item_list.map( item => { item['parent'] = '0' != item['parent'] ? item['parent'] : "0"; } ); this.itemsList = item_list; this.totalItems = response.total; this.onPage = response.on_page; if ( 0 < response.parents_list.length && response.success ) { this.parentsList.push( ...response.parents_list ); this.parentsList = new Set( this.parentsList ); this.parentsList = [...this.parentsList]; } this.isLoading = false; } ).catch( function ( e ) { eventHub.$CXNotice.add( { message: e.message, type: 'error', duration: 7000, } ); } ); }, addItem: function ( content ) { this.isLoading = true; let query = buildQuery( { action: encodeURIComponent( 'jet_search_add_suggestion' ), nonce: this.settings.nonce, content: JSON.stringify( content ), } ), queryPath = `${this.settings.addSuggestionUrl}?${query}`; wp.apiFetch( { method: 'POST', url: queryPath, } ).then( response => { console.log(response); let message = response.data, type = !response.success ? 'error' : 'success'; eventHub.$CXNotice.add( { message: message, type: type, duration: 7000, } ); if ( response.success ) { this.cancelPopup(); this.nameError = false; } else { this.nameError = true; } this.getItems( this.currentFilterQuery ); } ).catch( function ( e ) { eventHub.$CXNotice.add({ message: e.message, type: 'error', duration: 7000, } ); } ); }, updateItem: function ( content ) { this.isLoading = true; let query = buildQuery( { action: encodeURIComponent( 'jet_search_update_suggestion' ), nonce: this.settings.nonce, content: JSON.stringify( content ), } ), queryPath = `${this.settings.updateSuggestionUrl}?${query}`; wp.apiFetch( { method: 'POST', url: queryPath, } ).then( response => { let message = response.data, type = !response.success ? 'error' : 'success'; eventHub.$CXNotice.add( { message: message, type: type, duration: 7000, } ); if ( response.success ) { this.cancelPopup(); this.nameError = false; } else { this.nameError = true; } this.getItems( this.currentFilterQuery ); } ).catch( function ( e ) { eventHub.$CXNotice.add( { message: e.message, type: 'error', duration: 7000, } ); this.isLoading = false; } ); }, deleteItem: function ( content ) { this.isLoading = true; let query = buildQuery( { action: encodeURIComponent( 'jet_search_delete_suggestion' ), nonce: this.settings.nonce, content: JSON.stringify( content ), } ), queryPath = `${this.settings.deleteSuggestionUrl}?${query}`; wp.apiFetch( { method: 'POST', url: queryPath, } ).then( response => { let message = response.data, type = !response.success ? 'error' : 'success'; eventHub.$CXNotice.add({ message: message, type: type, duration: 7000, } ); this.getItems(); } ).catch( function ( e ) { eventHub.$CXNotice.add( { message: e.message, type: 'error', duration: 7000, } ); this.isLoading = false; } ); }, changePage: function( value ) { this.offset = this.perPage * (value - 1); this.pageNumber = value; this.getItems( this.currentFilterQuery ); }, changePerPage: function( value ) { this.offset = 0; this.perPage = value; this.pageNumber = 1; this.getItems( this.currentFilterQuery ); }, classColumn: function ( column ) { return { 'list-table-heading__cell-content': true, 'list-table-heading__cell-clickable': !this.notSortable.includes(column), 'jet-search-suggestions-active-column': column === this.curentSort, 'jet-search-suggestions-active-column-asc': column === this.curentSort && "DESC" === this.sortBy.order, 'jet-search-suggestions-active-column-desc': column === this.curentSort && "ASC" === this.sortBy.order, }; }, callPopup: function ( state, item ) { this.popUpState = state; this.popUpContent = item; this.popUpShow = true; }, cancelPopup: function () { this.popUpShow = false ; this.popUpContent = {}; }, popUpActions: function( action, content ) { switch ( action ) { case 'add': this.addItem( content ); break; case 'update': this.updateItem( content ); break; case 'delete': this.deleteItem( content ); break; } }, clearFilter: function() { this.currentFilterQuery = {}; this.getItems( this.currentFilterQuery ); }, updateFilters: function( filter ) { this.currentFilterQuery = filter; if ( '' === filter['search'] && '' === filter['searchType'] ) { this.offset = 0; this.pageNumber = 1; } this.getItems( this.currentFilterQuery ); }, getSettings: function() { let ajaxUrl = this.settings.ajaxUrl, nonce = this.settings.nonce, $this = this; jQuery.ajax( { url: ajaxUrl, type: 'POST', dataType: 'json', data: { action: 'suggestions_get_settings', nonce: nonce, }, } ).done( function( response ) { let settings = response.data.settings; settings['use_session'] = JSON.parse( settings['use_session'] ); settings['widget_suggestion_save_permission'] = JSON.parse( settings['widget_suggestion_save_permission'] ); $this.generalSettings = settings; } ).fail( function( jqXHR, textStatus, errorThrown ) { eventHub.$CXNotice.add({ message: jqXHR.statusText, type: 'error', duration: 7000, } ); } ); }, saveSettings : function( settings ) { let ajaxUrl = this.settings.ajaxUrl, nonce = this.settings.nonce; jQuery.ajax( { url: ajaxUrl, type: 'POST', dataType: 'json', data: { action: 'suggestions_save_settings', nonce: nonce, settings: settings, }, } ).done( function( response ) { let message = response.data.message, type = !response.success ? 'error' : 'success'; if ( response.success ) { this.generalSettings = settings; } eventHub.$CXNotice.add({ message: message, type: type, duration: 7000, } ); } ).fail( function( jqXHR, textStatus, errorThrown ) { eventHub.$CXNotice.add({ message: jqXHR.statusText, type: 'error', duration: 7000, } ); } ); }, fixSuggestionsDuplicates: function() { let ajaxUrl = this.settings.ajaxUrl, nonce = this.settings.nonce, $this = this; jQuery.ajax( { url: ajaxUrl, type: 'POST', dataType: 'json', data: { action: 'jet_search_suggestions_remove_duplicates', nonce: nonce, }, } ).done( function( response ) { let message = response.data.message, type = !response.success ? 'error' : 'success'; eventHub.$CXNotice.add({ message: message, type: type, duration: 7000, } ); $this.getItems( $this.currentFilterQuery ); } ).fail( function( jqXHR, textStatus, errorThrown ) { eventHub.$CXNotice.add({ message: jqXHR.statusText, type: 'error', duration: 7000, } ); } ); }, }, mounted: function() { this.getSettings(); this.getItems(); } } ); //ADD NEW Vue.component( 'jet-search-add-new-suggestion', { template: '#jet-dashboard-jet-search-suggestions-add-new', data: function () { return { item: { name : '', weight: 1, parent: "0", } } }, methods: { callPopup: function ( state = false, item = false ) { this.$emit( 'callPopup', state, item ); this.item = { name : '', weight: 1, parent: "0", } }, } } ); // PAGINATION Vue.component( 'jet-search-suggestions-pagination', { template: '#jet-dashboard-jet-search-suggestions-pagination', props: { totalItems: { type: Number }, perPage: { type: Number }, pageNumber: { type: Number }, offset: { type: Number }, onPage: { type: Number } }, computed: { currentPerPage: { get() { return this.perPage; }, set( value ) { let newValue = Math.abs( value ); newValue = newValue <= 0 || newValue > 1000 ? 25 : parseInt( newValue ); this.$emit( 'changePerPage', newValue ); } }, currentPageNumber: { get() { return this.pageNumber; } } }, methods: { perPageInfo: function () { let total = this.totalItems, from = total ? this.offset + 1 : 0, to = total ? this.offset + this.onPage : 0; return __( `Showing results ${from} - ${to} of ${total}`, 'jet-search' ); }, changePage: function ( value ) { this.$emit( 'changePage', value ); }, }, } ); //POPUP Vue.component( 'jet-search-suggestions-popup', { template: '#jet-dashboard-jet-search-suggestions-popup', props: { state: { validator( value ) { return [ 'update', 'delete', 'new', '' ].includes( value ); } }, popUpContent: { type: Object }, popUpShow: { type: Boolean }, parentsList: { type: Array }, nameError: { type: Boolean } }, data: function () { return { settings: window.JetSearchSettingsConfig, isShow: this.popUpShow, popUpState: this.state, addButtonDisabled: false, updateButtonDisabled: false, columns: [ 'id', 'name', 'weight', 'parent', 'actions' ], labels: { id: 'ID', name : 'Name', weight: 'Weight', parent: 'Parent', actions: 'Actions' }, content: [], currentContent: [], preparedContent: [], contentParents: [], currentParentName: '', currentParentID: '', contentParentText: '', optionsList: [], items: [], notFoundMessage: 'Parent does not exist. Please enter a valid value', inputNameError: false, placeholder: { name: 'Enter from 1 to 120 char.', parent: '' }, } }, watch: { popUpShow( value ) { this.isShow = value; }, state( value ) { this.popUpState = value; }, popUpContent( value ) { this.content = value ? JSON.parse( JSON.stringify( value ) ) : []; this.currentContent = value ? JSON.parse( JSON.stringify( value ) ) : []; this.contentParents = value.parent ? JSON.parse( JSON.stringify( value.parent ) ) : []; this.preparedContent = []; this.currentParentName = ''; this.currentParentID = ''; this.addButtonDisabled = true; this.updateButtonDisabled = true; if ( "0" != this.contentParents ) { this.placeholder[ 'parent' ] = ''; } else { this.placeholder[ 'parent' ] = "Enter at least 2 char." this.preparedContent[ 'parent' ] = "0" } }, nameError( value ) { this.inputNameError = value; } }, methods: { getItemLabel: function ( key ) { let lable = this.labels[key] ? this.labels[key] : key; return lable; }, popUpActions: function( action, content ) { this.$emit( 'popUpActions', action, content ); }, cancelPopup: function () { this.$emit( 'cancelPopup' ); }, deleteItem: function () { let action = 'delete'; this.$emit( 'popUpActions', action, this.content ); this.$emit( 'cancelPopup' ); }, updateItem: function () { if ( ! this.checkEmptyFields() ) { return; } let action = 'update', content = Object.assign( this.content, this.preparedContent ); if ( '' === this.preparedContent['parent'] ) { content['parent'] = "0"; } this.$emit( 'popUpActions', action, content ); }, addNewItem: function () { let content = Object.assign( this.content, this.preparedContent ); if ( ! this.checkEmptyFields() ) { return; } let action = 'add'; this.$emit( 'popUpActions', action, content ); }, blurInputQueryHandler: function( query, callback ) { if ( "0" === this.currentParentID || '' === this.currentParentID ) { callback( '' ); } if ( this.contentParentText != this.currentParentName ) { if ( '' != this.contentParentText && '' != this.currentParentName ) { this.preparedContent[ 'parent' ] = this.currentParentID; callback( this.currentParentName ); } else { if ( '' != this.currentParentName ) { callback( '' ); this.preparedContent[ 'parent' ] = "0"; if ( '' === this.contentParentText ) { this.placeholder['parent'] = "Enter at least 2 char." } } } } if ( '' === this.contentParentText ) { this.preparedContent[ 'parent' ] = "0"; } if ( 'new' === this.popUpState ) { if ( "0" != this.preparedContent[ 'parent' ] || this.content[ 'name' ] != this.preparedContent[ 'name' ]) { this.addButtonDisabled = false; this.updateButtonDisabled = false; } else { this.addButtonDisabled = true; this.updateButtonDisabled = true; } } else { if ( this.content[ 'parent' ] != this.preparedContent[ 'parent' ] || ( this.preparedContent[ 'name' ] && this.content[ 'name' ] != this.preparedContent[ 'name' ] ) ) { this.addButtonDisabled = false; this.updateButtonDisabled = false; } else { this.addButtonDisabled = true; this.updateButtonDisabled = true; } } }, selectedOptionsHandler: function( options ) { if ( options.length ) { this.currentParentName = options[0].label; this.currentParentID = options[0].value; } }, queryChange: function( value ) { let query = value[0], currentValues = value[1], key = 'parent'; this.contentParentText = query.trim(); if ( '' === this.contentParentText || 1 > this.contentParentText.length ) { this.preparedContent[ key ] = "0"; } else { this.preparedContent[ key ] = currentValues[0]; } if ( 'new' === this.popUpState ) { if ( '' != this.preparedContent[ 'name' ] || ( '' != this.preparedContent[ 'name' ] && "0" != this.preparedContent[ key ] ) ) { this.addButtonDisabled = false; this.updateButtonDisabled = false; } else { this.addButtonDisabled = true; this.updateButtonDisabled = true; } } else { if ( this.content[ key ] != this.preparedContent[ key ] ) { this.addButtonDisabled = false; this.updateButtonDisabled = false; } else { this.addButtonDisabled = true; this.updateButtonDisabled = true; } } }, changeValue: function ( value, key, fieldType = '' ) { this.inputNameError = false; if ( 'name' === key ) { if ( 'new' === this.popUpState ) { this.preparedContent[ key ] = value; if ( '' != this.preparedContent[ key ] || "0" != this.preparedContent[ 'parent' ] ) { this.addButtonDisabled = false; } else { this.addButtonDisabled = true; } } else { this.preparedContent[ key ] = value; if ( this.content[ key ] != this.preparedContent[ key ] || ( this.content[ 'parent' ] && this.content[ 'parent' ] != this.preparedContent[ 'parent' ] ) ) { this.updateButtonDisabled = false; } else { this.updateButtonDisabled = true; } } } }, validationHandler: function( value, callback ) { let maxLength = 6; if ( value.length > maxLength ) { value = JSON.parse( JSON.stringify( this.preparedContent['weight'] ) ); } this.preparedContent['weight'] = value; callback( value ); if ( this.content['weight'] != this.preparedContent['weight'] ) { this.addButtonDisabled = false; this.updateButtonDisabled = false; } else { this.addButtonDisabled = true; this.updateButtonDisabled = true; } }, blurValidationHandler: function( value, callback ) { if ( '' === value ) { value = '1'; this.content['weight'] = value; } else if ( parseInt( value, 10 ) < 0 ) { value = Math.abs( value ); } this.preparedContent['weight'] = value; callback( value ); if ( this.content['weight'] != this.preparedContent['weight'] ) { this.addButtonDisabled = false; this.updateButtonDisabled = false; } else { this.addButtonDisabled = true; this.updateButtonDisabled = true; } }, getOptionList: function( query, ids ) { let currentIds = []; this.optionsList = []; if ( ids.length ) { let addToList = []; ids.forEach( id => { if ( "0" != id ) { currentIds.push( id ); let foundInParentList = this.parentsList.find( el => { if ( el.value === id ) { let foundInOptionsList = this.optionsList.find( el => el.value === id ); if ( ! foundInOptionsList ) { this.optionsList.push( { value: el.value, label: el.label } ); this.currentParentName = el.label; this.currentParentID = el.value; } return true; } else { return false; } } ); if ( ! foundInParentList ) { addToList.push( id ); } } } ); if ( 0 === addToList.length ) { let promise = new Promise( ( resolve, reject ) => resolve( this.optionsList ) ).then( value => value ); return promise; } else { ids = addToList; } } queryPath = `${this.settings.getSuggestionsUrl}?` + buildQuery( { query: query, ids: ids, action: encodeURIComponent( 'jet_search_get_suggestion' ), nonce: this.settings.nonce, } ); return wp.apiFetch( { method: 'GET', url: queryPath, } ).then( ( response ) => { if ( currentIds.length ) { let currentParents = []; this.parentsList.push( ...response ); currentIds.forEach( id => { this.parentsList.find( el => { if ( el.value === id ) { this.currentParentName = el.label; this.currentParentID = el.value; currentParents.push( { value: el.value, label: el.label } ); } } ); } ); return currentParents; } else { let currentParents = []; response.find( el => { if ( el.value !== this.content['id'] ) { currentParents.push( { value: el.value, label: el.label } ); } } ); return currentParents; } } ).catch( function ( e ) { eventHub.$CXNotice.add( { message: e.message, type: 'error', duration: 7000, } ); } ); }, fieldType: function ( key, type = null ) { let needType = ''; switch ( key ) { case 'parent': needType = 'f-select'; break; case 'weight': needType = 'number'; break; case 'name': needType = 'input'; break; default: needType = type break; } if ( this.beEdited( key ) && type === needType ) { return true; } else { return false; } }, beEdited: function ( key ) { switch ( key ) { case 'id': case 'actions': return false; case 'weight': case 'name': case 'parent': return true; default: return true; } }, beVisible: function ( key ) { switch ( key ) { case 'actions': return false; case 'id': return false; default: return true; } }, popupWidth: function() { return '400px'; }, contentClass: function() { let classes = [ 'jet-search-suggestions', `jet-search-suggestions-${ this.popUpState }` ]; return classes; }, checkEmptyFields: function () { let requiredFields = [ 'name', 'weight' ], emptyFields = []; for ( let field of requiredFields ) { if (! this.content[field] ) { emptyFields.push( this.labels[ field ] ? this.labels[ field ] : field ); } } if( ! emptyFields[0] ){ return true; } emptyFields = emptyFields.join( ', ' ).toLowerCase(); eventHub.$CXNotice.add( { message: wp.i18n.sprintf( __('Empty fields: %s', 'jet-search'), emptyFields ), type: 'error', duration: 7000, } ); return false; }, } } ); //FILTERS Vue.component( 'jet-search-suggestions-filter', { template: '#jet-dashboard-jet-search-suggestions-filter', data: function () { return { curentFilters: { search: "", searchType: "" }, filters: { search: { name: 'search', label: 'Search', placeholder: 'Enter name', label_button: 'Clear', value: '', type: 'input', }, searchType: { name: 'search-type', label: 'Filter by type', value: '', type: 'select', options: [ { 'value': '', 'label': wp.i18n.__('Select...', 'jet-search'), }, { 'value': 'parent', 'label': wp.i18n.__('Parent', 'jet-search'), }, { 'value': 'child', 'label': wp.i18n.__('Child', 'jet-search'), }, { 'value': 'unassigned', 'label': wp.i18n.__('Unassigned', 'jet-search'), }, ] } }, filterButtonDisabled: true }; }, methods: { updateFilters: function ( value, name, type ) { let filterValue = value.target ? value.target.value : value, newFilters = Object.assign({}, this.curentFilters, {[name]: filterValue}); this.curentFilters = newFilters; this.$emit( 'updateFilters', this.curentFilters ); if ( '' != this.curentFilters['search'] || '' != this.curentFilters['searchType'] ) { this.filterButtonDisabled = false; } else { this.filterButtonDisabled = true; } }, clearFilter: function () { this.curentFilters = { search: "", searchType: "" }; this.$emit( 'updateFilters', '' ); this.$emit( 'clearFilter' ); this.filterButtonDisabled = true; }, }, } ); //CONFIG Vue.component('jet-search-suggestions-config', { template: '#jet-dashboard-jet-search-suggestions-config', props: { generalSettings: { type: Object }, }, data: function () { return { //settings: window.JetSearchSettingsConfig, showSaveButton: false, configVisible: false, settings: {}, currentSettings: {}, currentLimits: 'N', preparedGeneralSettings: {}, generalSettingsLabels: { records_limit: { title: 'Limit suggestions saved per user', label: 'Set the limits', desc: '', info: '', }, use_session: { title: '', label: 'Limit suggestions saved per user', desc: '', info: '', }, widget_suggestion_save_permission : { title: '', label: 'Save user searches as suggestions', desc: 'If this option is enabled, all search requests made from JetSearch widgets/blocks will be saved as suggestions.', info: '', } }, saveButtonDisabled: true, } }, watch: { generalSettings( value ) { this.settings = JSON.parse( JSON.stringify( value ) ); this.currentSettings = JSON.parse( JSON.stringify( value ) ); this.preparedGeneralSettings = JSON.parse( JSON.stringify( value ) ); }, currentLimits: function() { this.updateUseSessionDesc(); } }, methods: { updateUseSessionDesc: function() { this.generalSettingsLabels.use_session.desc = 'If this option is enabled, the plugin will save only ' + this.currentLimits + ' suggestions from a single visitor. If disabled, all requests will be saved. This option will help to avoid suggestion spam.'; }, showPopUp: function() { this.settings = JSON.parse( JSON.stringify( this.generalSettings ) ); this.currentSettings = JSON.parse( JSON.stringify( this.generalSettings ) ); this.saveButtonDisabled = true; this.configVisible = !this.configVisible; this.currentLimits = this.settings.records_limit; }, hidePopUp: function () { this.configVisible = false; }, limitValidationHandler: function( value, callback ) { let maxLength = 6; value = !isNaN( value ) ? parseInt( value, 10 ).toString() : '1'; if ( value.length > maxLength ) { value = JSON.parse( JSON.stringify( this.preparedGeneralSettings['records_limit'] ) ); } else if ( '' !== value && parseInt( value, 10 ) < 1 ) { value = 1; } else if ( isNaN( value ) ) { value = 1; } this.settings['records_limit'] = value; this.preparedGeneralSettings['records_limit'] = value; this.currentLimits = value; callback( value ); this.settingsChangeValidation(); }, limitBlurValidationHandler: function( value, callback ) { if ( ! value ) { this.settings['records_limit'] = '1'; this.preparedGeneralSettings['records_limit'] = '1'; callback( 1 ); } }, checkboxValidation: function( item ) { let settingName = item.target.name; this.preparedGeneralSettings[settingName] = item.target.checked; this.settingsChangeValidation(); }, settingsChangeValidation: function() { let isDiff = this.areObjectsDifferent( this.preparedGeneralSettings, this.currentSettings); isDiff ? this.saveButtonDisabled = false : this.saveButtonDisabled = true; }, areObjectsDifferent: function( obj1, obj2 ) { if ( Object.keys( obj1 ).length !== Object.keys( obj2 ).length ) { return true; } for ( let key in obj1 ) { if ( ! obj2.hasOwnProperty( key ) || obj1[key] !== obj2[key] ) { return true; } } for ( let key in obj2 ) { if ( ! obj1.hasOwnProperty( key ) ) { return true; } } return false; }, saveSettings: function() { this.$emit( 'saveSettings', this.preparedGeneralSettings ); this.settings = JSON.parse( JSON.stringify( this.preparedGeneralSettings ) ); this.currentSettings = JSON.parse( JSON.stringify( this.preparedGeneralSettings ) ); this.saveButtonDisabled = true; } }, } );