From 302a29db412f714b70ab918e48a57e4a9e3614bc Mon Sep 17 00:00:00 2001 From: LautaroCesso <59095036+LautaroCesso@users.noreply.github.com> Date: Tue, 21 Jul 2020 23:07:05 -0300 Subject: [PATCH] Fix filter show bug in ticket search when ordering (#829) * Fix bug in admin panel search tickets page first part. * fix show filters in search ticket * fix a ternary in admin panel search ticket. * fix a ternary in admin panel search ticket second part. * Add loading in ticket query filters buttons. * fix bug in search ticket when ordering. * Fix error with retrieve staff members in admin panel search tickets. * get all staff members after staff login. * Move history listen to index.js and add staff members in local storage. * Rename className in ticket query filters * Rename currentSearchObject to currentSearchParams. * Fix change show tickets in reducer and admin panel search tickets. * fix get filters for url function in search utils. * add some tabulations in search tickets utils. * fix error with initial url in ticket search * Add empty line at the end of ticket-query-filters.js --- client/src/actions/search-filters-actions.js | 29 +++++++++-- client/src/actions/session-actions.js | 1 + .../app-components/ticket-query-filters.js | 47 ++++++++++------- .../app-components/ticket-query-filters.scss | 4 +- .../src/app-components/ticket-query-list.js | 6 +-- .../src/app/admin/panel/admin-panel-menu.js | 4 +- .../tickets/admin-panel-search-tickets.js | 51 ++++++++----------- client/src/index.js | 11 ++++ client/src/lib-app/search-tickets-utils.js | 16 +++++- client/src/reducers/admin-data-reducer.js | 4 +- client/src/reducers/search-filters-reducer.js | 47 ++++++++++++----- 11 files changed, 143 insertions(+), 77 deletions(-) diff --git a/client/src/actions/search-filters-actions.js b/client/src/actions/search-filters-actions.js index 561f472e..3f0330eb 100644 --- a/client/src/actions/search-filters-actions.js +++ b/client/src/actions/search-filters-actions.js @@ -15,7 +15,7 @@ export default { payload: API.call({ path: '/ticket/search', data: { - ...filters, + ...filters, page: ticketQueryListState.page } }) @@ -47,15 +47,34 @@ export default { payload: showFilters } }, - changePage(listConfigWithPage) { - const filtersForAPI = searchTicketsUtils.prepareFiltersForAPI(listConfigWithPage.filters); + changePage(filtersWithPage) { + const filtersForAPI = searchTicketsUtils.prepareFiltersForAPI(filtersWithPage); const currentPath = window.location.pathname; - const urlQuery = searchTicketsUtils.getFiltersForURL(filtersForAPI, false); + const urlQuery = searchTicketsUtils.getFiltersForURL({ + filters: filtersForAPI, + shouldRemoveCustomParam: false, + shouldRemoveUseInitialValuesParam: true + }); urlQuery && history.push(`${currentPath}${urlQuery}`); return { type: 'SEARCH_FILTERS_CHANGE_PAGE', - payload: {...listConfigWithPage, filtersForAPI} + payload: {...filtersWithPage, ...filtersForAPI} + } + }, + changeOrderBy(filtersWithOrderBy) { + const filtersForAPI = searchTicketsUtils.prepareFiltersForAPI(filtersWithOrderBy); + const currentPath = window.location.pathname; + const urlQuery = searchTicketsUtils.getFiltersForURL({ + filters: filtersForAPI, + shouldRemoveCustomParam: false, + shouldRemoveUseInitialValuesParam: true + }); + urlQuery && history.push(`${currentPath}${urlQuery}`); + + return { + type: 'SEARCH_FILTERS_CHANGE_ORDER_BY', + payload: {...filtersWithOrderBy, ...filtersForAPI} } }, }; diff --git a/client/src/actions/session-actions.js b/client/src/actions/session-actions.js index 910d8ea1..ee8cc561 100644 --- a/client/src/actions/session-actions.js +++ b/client/src/actions/session-actions.js @@ -22,6 +22,7 @@ export default { .then(() => { if(result.data.staff) { store.dispatch(AdminDataActions.retrieveCustomResponses()); + store.dispatch(AdminDataActions.retrieveStaffMembers()); } }); diff --git a/client/src/app-components/ticket-query-filters.js b/client/src/app-components/ticket-query-filters.js index f59919c4..6e8f91fb 100644 --- a/client/src/app-components/ticket-query-filters.js +++ b/client/src/app-components/ticket-query-filters.js @@ -5,17 +5,18 @@ import {connect} from 'react-redux'; import SearchFiltersActions from 'actions/search-filters-actions'; import i18n from 'lib-app/i18n'; - import API from 'lib-app/api-call'; -import DateTransformer from 'lib-core/date-transformer'; import history from 'lib-app/history'; +import searchTicketsUtils from 'lib-app/search-tickets-utils'; + +import DateTransformer from 'lib-core/date-transformer'; import Form from 'core-components/form'; import SubmitButton from 'core-components/submit-button'; import FormField from 'core-components/form-field'; import Icon from 'core-components/icon'; import Button from 'core-components/button'; -import searchTicketsUtils from '../lib-app/search-tickets-utils'; +import Loading from 'core-components/loading'; const INITIAL_PAGE = 1; @@ -38,40 +39,42 @@ class TicketQueryFilters extends React.Component { const { formState, filters, - showFilters + showFilters, + ticketQueryListState } = this.props; return (
-
-
+
+
{i18n('DATE')}
-
+
{i18n('STATUS')}
-
-
+
+
{i18n('DEPARTMENTS')}
-
+
{i18n('OWNER')}
-
-
+
+
{i18n('TAGS')}
-
+
{i18n('AUTHORS')} - {i18n('CLEAR')} + {ticketQueryListState.loading ? + + : i18n('CLEAR')} + size= "medium"> {i18n('SEARCH')}
@@ -316,7 +322,11 @@ class TicketQueryFilters extends React.Component { if(formEdited) { const filtersForAPI = searchTicketsUtils.prepareFiltersForAPI(listConfigWithCompleteAuthorsList.filters); const currentPath = window.location.pathname; - const urlQuery = searchTicketsUtils.getFiltersForURL(filtersForAPI, true); + const urlQuery = searchTicketsUtils.getFiltersForURL({ + filters: filtersForAPI, + shouldRemoveCustomParam: true, + shouldRemoveUseInitialValuesParam: true + }); urlQuery && history.push(`${currentPath}${urlQuery}`); } } @@ -393,5 +403,6 @@ export default connect((store) => { filters: store.searchFilters.listConfig.filters, showFilters: store.searchFilters.showFilters, formEdited: store.searchFilters.formEdited, + ticketQueryListState: store.searchFilters.ticketQueryListState, }; -})(TicketQueryFilters); \ No newline at end of file +})(TicketQueryFilters); diff --git a/client/src/app-components/ticket-query-filters.scss b/client/src/app-components/ticket-query-filters.scss index 20c4ebbe..9e8926f0 100644 --- a/client/src/app-components/ticket-query-filters.scss +++ b/client/src/app-components/ticket-query-filters.scss @@ -41,13 +41,13 @@ } } - &__group { + &__row { display: flex; flex-direction: row; justify-content: space-around; align-items: flex-start; - &__container { + &__filter { display: flex; flex-direction: column; align-items: start; diff --git a/client/src/app-components/ticket-query-list.js b/client/src/app-components/ticket-query-list.js index 79c2af09..79c1e207 100644 --- a/client/src/app-components/ticket-query-list.js +++ b/client/src/app-components/ticket-query-list.js @@ -38,10 +38,8 @@ class TicketQueryList extends React.Component { } = this.props; dispatch(searchFiltersActions.changePage({ - filters: { - ...filters, - page: event.target.value - } + ...filters, + page: event.target.value })); } diff --git a/client/src/app/admin/panel/admin-panel-menu.js b/client/src/app/admin/panel/admin-panel-menu.js index 5e8f6f2e..aa97b0e9 100644 --- a/client/src/app/admin/panel/admin-panel-menu.js +++ b/client/src/app/admin/panel/admin-panel-menu.js @@ -116,7 +116,7 @@ class AdminPanelMenu extends React.Component { return window.customTicketList.map((item, index) => { return { name: item.title, - path: `/admin/panel/tickets/search-tickets?custom=${index}&page=${INITIAL_PAGE}`, + path: `/admin/panel/tickets/search-tickets?custom=${index}&page=${INITIAL_PAGE}&useInitialValues=true`, level: 1, } }) @@ -165,7 +165,7 @@ class AdminPanelMenu extends React.Component { }, { name: i18n('SEARCH_TICKETS'), - path: `/admin/panel/tickets/search-tickets?dateRange=${searchTicketsUtils.getDefaultDateRangeForFilters()}&page=${INITIAL_PAGE}`, + path: `/admin/panel/tickets/search-tickets?page=${INITIAL_PAGE}&useInitialValues=true`, level: 1, }, { diff --git a/client/src/app/admin/panel/tickets/admin-panel-search-tickets.js b/client/src/app/admin/panel/tickets/admin-panel-search-tickets.js index 5f27efba..912207d6 100644 --- a/client/src/app/admin/panel/tickets/admin-panel-search-tickets.js +++ b/client/src/app/admin/panel/tickets/admin-panel-search-tickets.js @@ -1,53 +1,50 @@ import React from 'react'; import {connect} from 'react-redux'; import queryString from 'query-string'; +import store from 'app/store'; import i18n from 'lib-app/i18n'; +import searchTicketsUtils from 'lib-app/search-tickets-utils'; + +import searchFiltersActions from 'actions/search-filters-actions'; import TicketQueryList from 'app-components/ticket-query-list'; -import AdminDataActions from 'actions/admin-data-actions'; -import searchTicketsUtils from '../../../../lib-app/search-tickets-utils'; -import searchFiltersActions from '../../../../actions/search-filters-actions'; -import history from 'lib-app/history'; +import TicketQueryFilters from 'app-components/ticket-query-filters'; import Header from 'core-components/header'; import Message from 'core-components/message'; -import TicketQueryFilters from 'app-components/ticket-query-filters'; import Icon from 'core-components/icon'; import Button from 'core-components/button'; -import store from 'app/store'; const INITIAL_PAGE = 1; const SEARCH_TICKETS_PATH = '/search-tickets'; +const SEARCH_TICKETS_INITIAL_QUERY = `?page=${INITIAL_PAGE}&useInitialValues=true`; -function retrieveStaffMembers() { - store.dispatch(AdminDataActions.retrieveStaffMembers()); -} - -function updateSearchTicketsFromURL() { +export function updateSearchTicketsFromURL() { const currentPathName = window.location.pathname; const currentSearch = window.location.search; const currentPath = `${currentPathName}${currentSearch}`; + if(currentPath.includes(SEARCH_TICKETS_PATH)) { searchTicketsUtils.getFiltersFromParams().then((listConfig) => { + const currentSearchParams = queryString.parse(currentSearch); + const showFilters = (currentSearch !== SEARCH_TICKETS_INITIAL_QUERY) && currentSearchParams.custom; + + if((showFilters !== undefined) && currentSearchParams.useInitialValues) store.dispatch(searchFiltersActions.changeShowFilters(!showFilters)); + store.dispatch(searchFiltersActions.changeFilters(listConfig)); store.dispatch(searchFiltersActions.retrieveSearchTickets( { ...store.getState().searchFilters.ticketQueryListState, - page: (queryString.parse(currentSearch).page || INITIAL_PAGE)*1 + page: (currentSearchParams.page || INITIAL_PAGE)*1 }, searchTicketsUtils.prepareFiltersForAPI(listConfig.filters) )); }); - retrieveStaffMembers(); + } } -history.listen(() => { - store.dispatch(searchFiltersActions.setLoadingInTrue()); - updateSearchTicketsFromURL(); -}); - updateSearchTicketsFromURL(); class AdminPanelSearchTickets extends React.Component { @@ -83,27 +80,19 @@ class AdminPanelSearchTickets extends React.Component { onChangeOrderBy(value) { const { listConfig, - ticketQueryListState, dispatch } = this.props; - let orderBy = listConfig.filters.orderBy ? JSON.parse(listConfig.filters.orderBy) : {value: ""}; + const orderBy = listConfig.filters.orderBy ? JSON.parse(listConfig.filters.orderBy) : {value: ""}; + const newValue = value; let newOrderBy = {}; let newAsc = 0; - let newValue = value; if(value === orderBy.value) { newAsc = orderBy.asc === 0 ? 1 : 0; } newOrderBy = JSON.stringify({"value": newValue, "asc": newAsc}); - dispatch(searchFiltersActions.changeFilters({ - ...listConfig, - filters: { - ...listConfig.filters, - orderBy: newOrderBy - }, - hasAllAuthorsInfo: true - })); - dispatch(searchFiltersActions.retrieveSearchTickets(ticketQueryListState, {...listConfig.filters, orderBy: newOrderBy})); + + dispatch(searchFiltersActions.changeOrderBy({...listConfig.filters, orderBy: newOrderBy})); } onChangeShowFilters() { @@ -111,7 +100,7 @@ class AdminPanelSearchTickets extends React.Component { showFilters, dispatch } = this.props; - dispatch(searchFiltersActions.changeShowFilters(showFilters)); + dispatch(searchFiltersActions.changeShowFilters(!showFilters)); } } diff --git a/client/src/index.js b/client/src/index.js index 53823ac4..33be2781 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -2,11 +2,17 @@ import React from 'react'; import {render} from 'react-dom' import { Provider } from 'react-redux'; +import history from 'lib-app/history'; + import SessionActions from 'actions/session-actions'; import ConfigActions from 'actions/config-actions'; +import searchFiltersActions from 'actions/search-filters-actions'; + import routes from 'app/Routes'; import store from 'app/store'; +import { updateSearchTicketsFromURL } from './app/admin/panel/tickets/admin-panel-search-tickets'; + import './main.scss'; Array.prototype.swap = function (x,y) { @@ -39,6 +45,11 @@ let unsubscribe = store.subscribe(() => { } }); +history.listen(() => { + store.dispatch(searchFiltersActions.setLoadingInTrue()); + updateSearchTicketsFromURL(); +}); + store.dispatch(ConfigActions.checkInstallation()); store.dispatch(ConfigActions.init()); store.dispatch(SessionActions.initSession()); diff --git a/client/src/lib-app/search-tickets-utils.js b/client/src/lib-app/search-tickets-utils.js index 9fd16afb..8ab4a4d4 100644 --- a/client/src/lib-app/search-tickets-utils.js +++ b/client/src/lib-app/search-tickets-utils.js @@ -99,14 +99,26 @@ export default { getDefaultDateRangeForFilters() { return JSON.stringify(DateTransformer.formDateRangeToFilters([20170101, DateTransformer.getDateToday()])); }, - getFiltersForURL(filters, shouldRemoveCustomParam = false) { + getFiltersForURL(filtersWithShouldRemoveParams) { + const shouldRemoveCustomParam = filtersWithShouldRemoveParams.shouldRemoveCustomParam ? filtersWithShouldRemoveParams.shouldRemoveCustomParam : false; + const shouldRemoveUseInitialValuesParam = filtersWithShouldRemoveParams.shouldRemoveUseInitialValuesParam ? filtersWithShouldRemoveParams.shouldRemoveUseInitialValuesParam : false; + let filters = filtersWithShouldRemoveParams.filters; + filters = { ...queryString.parse(window.location.search), ...filters, }; if(shouldRemoveCustomParam) delete filters.custom; - filters = (filters.custom !== undefined) ? {custom: filters.custom, page: (filters.page !== undefined) ? filters.page : undefined} : filters; + if(shouldRemoveUseInitialValuesParam) delete filters.useInitialValues; + + filters = (filters.custom !== undefined) ? + { + custom: filters.custom, + orderBy: filters.orderBy, + page: (filters.page !== undefined) ? filters.page : undefined + } : + filters; const query = Object.keys(filters).reduce(function (query, filter) { const value = filters[filter]; diff --git a/client/src/reducers/admin-data-reducer.js b/client/src/reducers/admin-data-reducer.js index abb70499..ffda023c 100644 --- a/client/src/reducers/admin-data-reducer.js +++ b/client/src/reducers/admin-data-reducer.js @@ -28,7 +28,7 @@ class AdminDataReducer extends Reducer { allTicketsLoaded: false, allTicketsError: false, - staffMembers: [], + staffMembers: JSON.parse(sessionStore.getItem('staffMembers')) || [], staffMembersLoaded: false, staffMembersError: false, }; @@ -135,6 +135,8 @@ class AdminDataReducer extends Reducer { } onStaffMembersRetrieved(state, payload) { + sessionStore.setItem('staffMembers', JSON.stringify(payload.data)); + return _.extend({}, state, { staffMembers: payload.data, staffMembersLoaded: true diff --git a/client/src/reducers/search-filters-reducer.js b/client/src/reducers/search-filters-reducer.js index 17311703..2caf788e 100644 --- a/client/src/reducers/search-filters-reducer.js +++ b/client/src/reducers/search-filters-reducer.js @@ -24,7 +24,7 @@ class searchFiltersReducer extends Reducer { getInitialState() { return { - showFilters: true, + showFilters: !this.getListConfig().title, listConfig: this.getListConfig(), form: { query: '', @@ -48,16 +48,20 @@ class searchFiltersReducer extends Reducer { getTypeHandlers() { return { - 'SEARCH_TICKETS_FULFILLED': this.onSearchTicketsRetrieved.bind(this), - 'SEARCH_TICKETS_REJECTED': this.onSearchTicketsRejected.bind(this), - 'SEARCH_TICKETS_PENDING': this.onSearchTicketsPending.bind(this), + 'SEARCH_TICKETS_FULFILLED': this.onSearchTicketsRetrieved, + 'SEARCH_TICKETS_REJECTED': this.onSearchTicketsRejected, + 'SEARCH_TICKETS_PENDING': this.onSearchTicketsPending, - 'SEARCH_FILTERS_CHANGE_PAGE': this.onPageChange.bind(this), - 'SEARCH_FILTERS_CHANGE_FILTERS': this.onFiltersChange.bind(this), 'SEARCH_FILTERS_CHANGE_FORM': this.onFormChange, - 'SEARCH_FILTERS_CHANGE_SHOW_FILTERS': this.onChangeShowFilters.bind(this), - 'SEARCH_FILTERS_SET_DEFAULT_FORM_VALUES': this.onSetDefaultFormValues.bind(this), - 'SEARCH_FILTERS_SET_LOADING_IN_TRUE': this.onSetLoadingInTrue.bind(this) + 'SEARCH_FILTERS_SET_DEFAULT_FORM_VALUES': this.onSetDefaultFormValues, + + 'SEARCH_FILTERS_CHANGE_FILTERS': this.onFiltersChange, + + 'SEARCH_FILTERS_CHANGE_PAGE': this.onPageChange, + 'SEARCH_FILTERS_CHANGE_ORDER_BY': this.onOrderByChange, + + 'SEARCH_FILTERS_CHANGE_SHOW_FILTERS': this.onChangeShowFilters, + 'SEARCH_FILTERS_SET_LOADING_IN_TRUE': this.onSetLoadingInTrue, }; } @@ -121,6 +125,25 @@ class searchFiltersReducer extends Reducer { ) } + onOrderByChange(state, payload) { + return ( + _.extend( + {}, + state, + { + listConfig: { + ...state.listConfig, + filters: { + ...state.listConfig.filters, + orderBy: payload.orderBy, + } + }, + formEdited: true, + } + ) + ); + } + onPageChange(state, payload) { return ( _.extend( @@ -129,7 +152,7 @@ class searchFiltersReducer extends Reducer { { ticketQueryListState: { ...state.ticketQueryListState, - page: payload.filters.page + page: payload.page }, formEdited: true, } @@ -154,7 +177,7 @@ class searchFiltersReducer extends Reducer { loading: true }, formEdited: state.ticketQueryListState.page !== 1, - showFilters: !payload.title, + showFilters: state.showFilters, form: payload.hasAllAuthorsInfo ? state.form : searchTicketsUtils.transformToFormValue({...DEFAULT_FILTERS, ...payload.filters}) @@ -169,7 +192,7 @@ class searchFiltersReducer extends Reducer { } onChangeShowFilters(state, payload) { - return _.extend({}, state, {showFilters: !payload}); + return _.extend({}, state, {showFilters: payload}); } onSetDefaultFormValues(state) {