diff --git a/src/actions/event-category-actions.js b/src/actions/event-category-actions.js index 7644777a9..76b1f1e90 100644 --- a/src/actions/event-category-actions.js +++ b/src/actions/event-category-actions.js @@ -21,12 +21,16 @@ import { startLoading, showMessage, showSuccessMessage, - authErrorHandler + authErrorHandler, + escapeFilterValue } from "openstack-uicore-foundation/lib/utils/actions"; import T from "i18n-react/dist/i18n-react"; import history from "../history"; import { getAccessTokenSafely } from "../utils/methods"; -import { HUNDRED_PER_PAGE } from "../utils/constants"; +import { + DEFAULT_PER_PAGE, + DEFAULT_CURRENT_PAGE +} from "../utils/constants"; export const REQUEST_EVENT_CATEGORIES = "REQUEST_EVENT_CATEGORIES"; export const RECEIVE_EVENT_CATEGORIES = "RECEIVE_EVENT_CATEGORIES"; @@ -380,31 +384,55 @@ const normalizeEntity = (entity) => { /** ********************************* CATEGORY GROUPS ************************************************** */ -export const getEventCategoryGroups = () => async (dispatch, getState) => { - const { currentSummitState } = getState(); - const accessToken = await getAccessTokenSafely(); - const { currentSummit } = currentSummitState; +export const getEventCategoryGroups = + ( + term = null, + page = DEFAULT_CURRENT_PAGE, + perPage = DEFAULT_PER_PAGE, + order = "id", + orderDir = 1 + ) => + async (dispatch, getState) => { + const { currentSummitState } = getState(); + const accessToken = await getAccessTokenSafely(); + const { currentSummit } = currentSummitState; + const filter = []; - dispatch(startLoading()); + dispatch(startLoading()); - const params = { - access_token: accessToken, - page: 1, - per_page: HUNDRED_PER_PAGE, - expand: "tracks", - fields: "id,name,class_name,color,tracks.name,tracks.id", - relations: "tracks.none" - }; + const params = { + access_token: accessToken, + page, + per_page: perPage, + expand: "tracks", + fields: "id,name,class_name,color,tracks.name,tracks.id", + relations: "tracks.none" + }; - return getRequest( - createAction(REQUEST_EVENT_CATEGORY_GROUPS), - createAction(RECEIVE_EVENT_CATEGORY_GROUPS), - `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/track-groups`, - authErrorHandler - )(params)(dispatch).then(() => { - dispatch(stopLoading()); - }); -}; + if (term) { + const escapedTerm = escapeFilterValue(term); + filter.push(`name=@${escapedTerm}`); + } + + if (filter.length > 0) { + params["filter[]"] = filter; + } + + if (order != null && orderDir != null) { + const orderDirSign = orderDir === 1 ? "" : "-"; + params.order = `${orderDirSign}${order}`; + } + + return getRequest( + createAction(REQUEST_EVENT_CATEGORY_GROUPS), + createAction(RECEIVE_EVENT_CATEGORY_GROUPS), + `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/track-groups`, + authErrorHandler, + { order, orderDir, term, perPage } + )(params)(dispatch).then(() => { + dispatch(stopLoading()); + }); + }; export const getEventCategoryGroup = (groupId) => async (dispatch, getState) => { diff --git a/src/i18n/en.json b/src/i18n/en.json index 0bb5e83e8..568ca1678 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -1367,15 +1367,15 @@ } }, "event_category_group_list": { - "event_category_group_list": "Activity Category Groups", - "event_category_groups": "Activity Category Groups", + "event_category_group_list": "Activity Category Groups List", + "event_category_groups": "Groups", "no_items": "No activity category groups found.", "add_category_group": "Add Group", "name": "Name", "type": "Type", "categories": "Categories", "color": "Color", - "delete_warning": "Are you sure you want to delete activity category group " + "delete_warning": "Please verify you want to delete activity category group " }, "edit_event_category_group": { "event_category_group": "Activity Category Group", diff --git a/src/pages/events/event-category-group-list-page.js b/src/pages/events/event-category-group-list-page.js index e5d9b805b..5f71a45eb 100644 --- a/src/pages/events/event-category-group-list-page.js +++ b/src/pages/events/event-category-group-list-page.js @@ -11,129 +11,201 @@ * limitations under the License. * */ -import React from "react"; +import React, { useEffect } from "react"; import { connect } from "react-redux"; import T from "i18n-react/dist/i18n-react"; -import Swal from "sweetalert2"; -import Table from "openstack-uicore-foundation/lib/components/table"; +import Box from "@mui/material/Box"; +import Button from "@mui/material/Button"; +import Grid2 from "@mui/material/Grid2"; +import AddIcon from "@mui/icons-material/Add"; +import MuiTable from "openstack-uicore-foundation/lib/components/mui/table"; +import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input"; import { getEventCategoryGroups, deleteEventCategoryGroup } from "../../actions/event-category-actions"; - -class EventCategoryGroupListPage extends React.Component { - constructor(props) { - super(props); - - this.handleEdit = this.handleEdit.bind(this); - this.handleNew = this.handleNew.bind(this); - this.handleDelete = this.handleDelete.bind(this); - } - - componentDidMount() { - const { currentSummit } = this.props; +import { DEFAULT_CURRENT_PAGE } from "../../utils/constants"; + +const EventCategoryGroupListPage = ({ + currentSummit, + eventCategoryGroups, + term, + currentPage, + perPage, + order, + orderDir, + totalEventCategoryGroups, + getEventCategoryGroups, + deleteEventCategoryGroup, + history +}) => { + useEffect(() => { if (currentSummit) { - this.props.getEventCategoryGroups(); + getEventCategoryGroups(); } - } + }, []); - handleEdit(groupId) { - const { currentSummit, history } = this.props; + const handleEdit = (row) => { history.push( - `/app/summits/${currentSummit.id}/event-category-groups/${groupId}` + `/app/summits/${currentSummit.id}/event-category-groups/${row.id}` ); - } + }; - handleNew() { - const { currentSummit, history } = this.props; + const handleNew = () => { history.push(`/app/summits/${currentSummit.id}/event-category-groups/new`); - } - - handleDelete(groupId) { - const { deleteEventCategoryGroup, eventCategoryGroups } = this.props; - const group = eventCategoryGroups.find((g) => g.id === groupId); - - Swal.fire({ - title: T.translate("general.are_you_sure"), - text: `${T.translate("event_category_group_list.delete_warning")} ${ - group.name - }`, - type: "warning", - showCancelButton: true, - confirmButtonColor: "#DD6B55", - confirmButtonText: T.translate("general.yes_delete") - }).then((result) => { - if (result.value) { - deleteEventCategoryGroup(groupId); - } - }); - } - - render() { - const { currentSummit, eventCategoryGroups } = this.props; - - const columns = [ - { columnKey: "id", value: T.translate("general.id") }, - { - columnKey: "name", - value: T.translate("event_category_group_list.name") - }, - { - columnKey: "type", - value: T.translate("event_category_group_list.type") - }, - { - columnKey: "categories", - value: T.translate("event_category_group_list.categories") - }, - { - columnKey: "color", - value: T.translate("event_category_group_list.color") - } - ]; - - const table_options = { - actions: { - edit: { onClick: this.handleEdit }, - delete: { onClick: this.handleDelete } - } - }; - - if (!currentSummit.id) return
; - - return ( -
-

{T.translate("event_category_list.event_category_list")}

-
-
- -
-
- - {eventCategoryGroups.length === 0 && ( -
- {T.translate("event_category_group_list.no_items")} -
- )} - - {eventCategoryGroups.length > 0 && ( -
- - - )} - + }; + + const handleDelete = (groupId) => { + deleteEventCategoryGroup(groupId).then(() => + getEventCategoryGroups( + term, + DEFAULT_CURRENT_PAGE, + perPage, + order, + orderDir + ) ); - } -} + }; + + const handleSearch = (searchTerm) => { + getEventCategoryGroups( + searchTerm, + DEFAULT_CURRENT_PAGE, + perPage, + order, + orderDir + ); + }; + + const handlePageChange = (page) => { + getEventCategoryGroups(term, page, perPage, order, orderDir); + }; + + const handlePerPageChange = (newPerPage) => { + getEventCategoryGroups( + term, + DEFAULT_CURRENT_PAGE, + newPerPage, + order, + orderDir + ); + }; + + const handleSort = (key, dir) => { + getEventCategoryGroups(term, currentPage, perPage, key, dir); + }; + + const columns = [ + { + columnKey: "id", + header: T.translate("general.id"), + width: 60, + sortable: true + }, + { + columnKey: "name", + header: T.translate("event_category_group_list.name"), + width: 160, + sortable: true + }, + { + columnKey: "type", + header: T.translate("event_category_group_list.type"), + width: 90 + }, + { + columnKey: "categories", + header: T.translate("event_category_group_list.categories") + }, + { + columnKey: "color", + header: T.translate("event_category_group_list.color"), + width: 70, + render: (row) => ( + + ) + } + ]; + + const tableOptions = { sortCol: order, sortDir: orderDir }; + + if (!currentSummit.id) return
; + + return ( +
+

+ {T.translate("event_category_group_list.event_category_group_list")} +

+ + + + {totalEventCategoryGroups}{" "} + {T.translate("event_category_group_list.event_category_groups")} + + + + + + + + + + + {eventCategoryGroups.length > 0 && ( + + `${T.translate("event_category_group_list.delete_warning")} ${name}` + } + confirmButtonColor="error" + /> + )} + + {eventCategoryGroups.length === 0 && ( +
{T.translate("event_category_group_list.no_items")}
+ )} +
+ ); +}; const mapStateToProps = ({ currentSummitState, diff --git a/src/reducers/events/event-category-group-list-reducer.js b/src/reducers/events/event-category-group-list-reducer.js index e3dad6032..7953f4da7 100644 --- a/src/reducers/events/event-category-group-list-reducer.js +++ b/src/reducers/events/event-category-group-list-reducer.js @@ -9,8 +9,9 @@ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. - **/ + * */ +import { LOGOUT_USER } from "openstack-uicore-foundation/lib/security/actions"; import { RECEIVE_EVENT_CATEGORY_GROUPS, REQUEST_EVENT_CATEGORY_GROUPS, @@ -18,10 +19,16 @@ import { } from "../../actions/event-category-actions"; import { SET_CURRENT_SUMMIT } from "../../actions/summit-actions"; -import { LOGOUT_USER } from "openstack-uicore-foundation/lib/security/actions"; const DEFAULT_STATE = { - eventCategoryGroups: [] + eventCategoryGroups: [], + term: "", + order: "id", + orderDir: 1, + currentPage: 1, + lastPage: 1, + perPage: 10, + totalEventCategoryGroups: 0 }; const eventCategoryGroupListReducer = (state = DEFAULT_STATE, action) => { @@ -32,24 +39,30 @@ const eventCategoryGroupListReducer = (state = DEFAULT_STATE, action) => { return DEFAULT_STATE; } case REQUEST_EVENT_CATEGORY_GROUPS: { - return { ...state }; + const { order, orderDir, term, perPage } = payload; + return { ...state, order, orderDir, term, perPage }; } case RECEIVE_EVENT_CATEGORY_GROUPS: { - let eventCategoryGroups = payload.response.data.map((e) => { - return { - id: e.id, - name: e.name, - color: `
 
`, - type: - e.class_name === "PresentationCategoryGroup" ? "Public" : "Private", - categories: e.tracks.map((c) => c.name).join(", ") - }; - }); + const { total, last_page, current_page } = payload.response; + const eventCategoryGroups = payload.response.data.map((e) => ({ + id: e.id, + name: e.name, + color: e.color, + type: + e.class_name === "PresentationCategoryGroup" ? "Public" : "Private", + categories: e.tracks.map((c) => c.name).join(", ") + })); - return { ...state, eventCategoryGroups }; + return { + ...state, + eventCategoryGroups, + currentPage: current_page, + lastPage: last_page, + totalEventCategoryGroups: total + }; } case EVENT_CATEGORY_GROUP_DELETED: { - let { groupId } = payload; + const { groupId } = payload; return { ...state, eventCategoryGroups: state.eventCategoryGroups.filter(