diff --git a/src/actions/event-type-actions.js b/src/actions/event-type-actions.js index 9c4cb7005..cae3f9bb9 100644 --- a/src/actions/event-type-actions.js +++ b/src/actions/event-type-actions.js @@ -21,10 +21,11 @@ import { startLoading, showMessage, showSuccessMessage, - authErrorHandler + authErrorHandler, + escapeFilterValue } from "openstack-uicore-foundation/lib/utils/actions"; -import history from "../history"; import { getAccessTokenSafely } from "../utils/methods"; +import { DEFAULT_PER_PAGE, DEFAULT_CURRENT_PAGE } from "../utils/constants"; export const REQUEST_EVENT_TYPES = "REQUEST_EVENT_TYPES"; export const RECEIVE_EVENT_TYPES = "RECEIVE_EVENT_TYPES"; @@ -36,28 +37,52 @@ export const EVENT_TYPE_ADDED = "EVENT_TYPE_ADDED"; export const EVENT_TYPE_DELETED = "EVENT_TYPE_DELETED"; export const EVENT_TYPES_SEEDED = "EVENT_TYPES_SEEDED"; -export const getEventTypes = () => async (dispatch, getState) => { - const { currentSummitState } = getState(); - const accessToken = await getAccessTokenSafely(); - const { currentSummit } = currentSummitState; +export const getEventTypes = + ( + 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()); + + const params = { + access_token: accessToken, + page, + per_page: perPage + }; - dispatch(startLoading()); + if (term) { + const escapedTerm = escapeFilterValue(term); + filter.push(`name=@${escapedTerm}`); + } - const params = { - access_token: accessToken, - per_page: 100, - page: 1 - }; + if (filter.length > 0) { + params["filter[]"] = filter; + } - return getRequest( - createAction(REQUEST_EVENT_TYPES), - createAction(RECEIVE_EVENT_TYPES), - `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/event-types`, - authErrorHandler - )(params)(dispatch).then(() => { - dispatch(stopLoading()); - }); -}; + if (order != null && orderDir != null) { + const orderDirSign = orderDir === 1 ? "" : "-"; + params.order = `${orderDirSign}${order}`; + } + + return getRequest( + createAction(REQUEST_EVENT_TYPES), + createAction(RECEIVE_EVENT_TYPES), + `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/event-types`, + authErrorHandler, + { order, orderDir, term, perPage } + )(params)(dispatch).then(() => { + dispatch(stopLoading()); + }); + }; export const getEventType = (eventTypeId) => async (dispatch, getState) => { const { currentSummitState } = getState(); @@ -98,7 +123,7 @@ export const saveEventType = (entity) => async (dispatch, getState) => { const params = { access_token: accessToken }; if (entity.id) { - putRequest( + return putRequest( createAction(UPDATE_EVENT_TYPE), createAction(EVENT_TYPE_UPDATED), `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/event-types/${entity.id}`, @@ -109,31 +134,26 @@ export const saveEventType = (entity) => async (dispatch, getState) => { dispatch( showSuccessMessage(T.translate("edit_event_type.event_type_saved")) ); - }); - } else { - const success_message = { - title: T.translate("general.done"), - html: T.translate("edit_event_type.event_type_created"), - type: "success" - }; - - postRequest( - createAction(UPDATE_EVENT_TYPE), - createAction(EVENT_TYPE_ADDED), - `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/event-types`, - normalizedEntity, - authErrorHandler, - entity - )(params)(dispatch).then((payload) => { - dispatch( - showMessage(success_message, () => { - history.push( - `/app/summits/${currentSummit.id}/event-types/${payload.response.id}` - ); - }) - ); + dispatch(stopLoading()); }); } + const success_message = { + title: T.translate("general.done"), + html: T.translate("edit_event_type.event_type_created"), + type: "success" + }; + + return postRequest( + createAction(UPDATE_EVENT_TYPE), + createAction(EVENT_TYPE_ADDED), + `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/event-types`, + normalizedEntity, + authErrorHandler, + entity + )(params)(dispatch).then(() => { + dispatch(showMessage(success_message, () => {})); + dispatch(stopLoading()); + }); }; export const deleteEventType = (eventTypeId) => async (dispatch, getState) => { diff --git a/src/components/forms/event-type-form.js b/src/components/forms/event-type-form.js index dea75dc08..dca560548 100644 --- a/src/components/forms/event-type-form.js +++ b/src/components/forms/event-type-form.js @@ -120,7 +120,7 @@ class EventTypeForm extends React.Component { render() { const { entity, errors, showSection } = this.state; - const { getMediaUploads, currentSummit } = this.props; + const { getMediaUploads, currentSummit, isSaving } = this.props; const event_types_ddl = [ { label: "Presentation", value: "PRESENTATION_TYPE" }, { label: "Event", value: "EVENT_TYPE" } @@ -618,6 +618,7 @@ class EventTypeForm extends React.Component { onClick={this.handleSubmit} className="btn btn-primary pull-right" value={T.translate("general.save")} + disabled={isSaving} /> diff --git a/src/i18n/en.json b/src/i18n/en.json index eda7913d2..3b18db148 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -1269,7 +1269,7 @@ "name": "Name", "class": "Class", "seed_event_types": "Seed Types", - "remove_warning": "Are you sure you want to delete activity type " + "remove_warning": "Please verify you want to delete activity type " }, "edit_event_type": { "event_type": "Activity Type", diff --git a/src/layouts/event-type-layout.js b/src/layouts/event-type-layout.js index 579798981..b4ec1d484 100644 --- a/src/layouts/event-type-layout.js +++ b/src/layouts/event-type-layout.js @@ -9,49 +9,36 @@ * 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 React from "react"; +import PropTypes from "prop-types"; import { Switch, Route, withRouter } from "react-router-dom"; import T from "i18n-react/dist/i18n-react"; import { Breadcrumb } from "react-breadcrumbs"; import Restrict from "../routes/restrict"; -import EditEventTypePage from "../pages/events/edit-event-type-page"; import EventTypeListPage from "../pages/events/event-type-list-page"; import NoMatchPage from "../pages/no-match-page"; -class EventTypeLayout extends React.Component { - render() { - const { match } = this.props; - return ( -
- +const EventTypeLayout = ({ match }) => ( +
+ - - - - - - -
- ); - } -} + + + + +
+); + +EventTypeLayout.propTypes = { + match: PropTypes.shape({ url: PropTypes.string }).isRequired +}; export default Restrict(withRouter(EventTypeLayout), "events"); diff --git a/src/pages/events/components/event-type-dialog.js b/src/pages/events/components/event-type-dialog.js new file mode 100644 index 000000000..33a8f5df5 --- /dev/null +++ b/src/pages/events/components/event-type-dialog.js @@ -0,0 +1,127 @@ +/** + * Copyright 2026 OpenStack Foundation + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * 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 React, { useState } from "react"; +import { connect } from "react-redux"; +import PropTypes from "prop-types"; +import T from "i18n-react/dist/i18n-react"; +import Dialog from "@mui/material/Dialog"; +import DialogContent from "@mui/material/DialogContent"; +import DialogTitle from "@mui/material/DialogTitle"; +import Divider from "@mui/material/Divider"; +import IconButton from "@mui/material/IconButton"; +import CloseIcon from "@mui/icons-material/Close"; +import EventTypeForm from "../../../components/forms/event-type-form"; +import { + linkToPresentationType as linkToPresentationTypeAction, + unlinkFromPresentationType as unlinkFromPresentationTypeAction, + queryMediaUploads +} from "../../../actions/media-upload-actions"; + +const EventTypeDialog = ({ + currentSummit, + entity, + errors, + onClose, + onSave, + linkToPresentationType, + unlinkFromPresentationType +}) => { + const [isSaving, setIsSaving] = useState(false); + + const handleClose = () => { + if (isSaving) return; + onClose(); + }; + + const handleOnSave = (eventTypeEntity) => { + if (isSaving) return; + setIsSaving(true); + Promise.resolve(onSave(eventTypeEntity)) + .then(() => onClose()) + .catch(() => { + // keep dialog open on save error to preserve user input + }) + .finally(() => setIsSaving(false)); + }; + + const getMediaUploads = (input, callback) => { + if (!input) return Promise.resolve({ options: [] }); + return queryMediaUploads(currentSummit.id, input, callback); + }; + + const isEdit = Boolean(entity.id); + const title = `${T.translate( + isEdit ? "general.edit" : "general.add" + )} ${T.translate("edit_event_type.event_type")}`; + + return ( + + + {title} + + + + + + + + + + ); +}; + +EventTypeDialog.propTypes = { + currentSummit: PropTypes.shape({ id: PropTypes.number }).isRequired, + entity: PropTypes.shape({ id: PropTypes.number }).isRequired, + errors: PropTypes.shape({}), + onClose: PropTypes.func.isRequired, + onSave: PropTypes.func.isRequired, + linkToPresentationType: PropTypes.func.isRequired, + unlinkFromPresentationType: PropTypes.func.isRequired +}; + +EventTypeDialog.defaultProps = { + errors: {} +}; + +const mapStateToProps = ({ currentSummitState, currentEventTypeState }) => ({ + currentSummit: currentSummitState.currentSummit, + ...currentEventTypeState +}); + +export default connect(mapStateToProps, { + linkToPresentationType: linkToPresentationTypeAction, + unlinkFromPresentationType: unlinkFromPresentationTypeAction +})(EventTypeDialog); diff --git a/src/pages/events/edit-event-type-page.js b/src/pages/events/edit-event-type-page.js deleted file mode 100644 index 7fe3782c4..000000000 --- a/src/pages/events/edit-event-type-page.js +++ /dev/null @@ -1,113 +0,0 @@ -/** - * Copyright 2017 OpenStack Foundation - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * http://www.apache.org/licenses/LICENSE-2.0 - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * 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 React from "react"; -import { connect } from "react-redux"; -import T from "i18n-react/dist/i18n-react"; -import { Breadcrumb } from "react-breadcrumbs"; -import EventTypeForm from "../../components/forms/event-type-form"; -import { getSummitById } from "../../actions/summit-actions"; -import { - getEventType, - resetEventTypeForm, - saveEventType -} from "../../actions/event-type-actions"; -import "../../styles/edit-event-type-page.less"; -import { - queryMediaUploads, - linkToPresentationType, - unlinkFromPresentationType -} from "../../actions/media-upload-actions"; -import AddNewButton from "../../components/buttons/add-new-button"; - -class EditEventTypePage extends React.Component { - constructor(props) { - const eventTypeId = props.match.params.event_type_id; - super(props); - - if (!eventTypeId) { - props.resetEventTypeForm(); - } else { - props.getEventType(eventTypeId); - } - - this.getMediaUploads = this.getMediaUploads.bind(this); - } - - componentDidUpdate(prevProps, prevState, snapshot) { - const oldId = prevProps.match.params.event_type_id; - const newId = this.props.match.params.event_type_id; - - if (oldId !== newId) { - if (!newId) { - this.props.resetEventTypeForm(); - } else { - this.props.getEventType(newId); - } - } - } - - getMediaUploads(input, callback) { - const { currentSummit } = this.props; - - if (!input) { - return Promise.resolve({ options: [] }); - } - - return queryMediaUploads(currentSummit.id, input, callback); - } - - render() { - const { currentSummit, entity, errors, match } = this.props; - const title = entity.id - ? T.translate("general.edit") - : T.translate("general.add"); - const breadcrumb = entity.id ? entity.name : T.translate("general.new"); - - return ( -
- -

- {title} {T.translate("edit_event_type.event_type")} - -

-
- {currentSummit && ( - - )} -
- ); - } -} - -const mapStateToProps = ({ currentSummitState, currentEventTypeState }) => ({ - currentSummit: currentSummitState.currentSummit, - ...currentEventTypeState -}); - -export default connect(mapStateToProps, { - getSummitById, - getEventType, - resetEventTypeForm, - saveEventType, - linkToPresentationType, - unlinkFromPresentationType -})(EditEventTypePage); diff --git a/src/pages/events/event-type-list-page.js b/src/pages/events/event-type-list-page.js index 91f803ea4..c9e23b34d 100644 --- a/src/pages/events/event-type-list-page.js +++ b/src/pages/events/event-type-list-page.js @@ -1,5 +1,5 @@ /** - * Copyright 2017 OpenStack Foundation + * Copyright 2026 OpenStack Foundation * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at @@ -9,127 +9,229 @@ * 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 React from "react"; +import React, { useEffect, useState } from "react"; import { connect } from "react-redux"; +import PropTypes from "prop-types"; 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 { + getEventTypes as getEventTypesAction, + getEventType as getEventTypeAction, + deleteEventType as deleteEventTypeAction, + seedEventTypes as seedEventTypesAction, + resetEventTypeForm as resetEventTypeFormAction, + saveEventType as saveEventTypeAction +} from "../../actions/event-type-actions"; +import { DEFAULT_CURRENT_PAGE } from "../../utils/constants"; +import EventTypeDialog from "./components/event-type-dialog"; + +const EventTypeListPage = ({ + currentSummit, + eventTypes, + term, + currentPage, + perPage, + order, + orderDir, + totalEventTypes, getEventTypes, + getEventType, deleteEventType, - seedEventTypes -} from "../../actions/event-type-actions"; + seedEventTypes, + resetEventTypeForm, + saveEventType +}) => { + const [openPopup, setOpenPopup] = useState(null); + + useEffect(() => { + getEventTypes(); + }, []); + + const handleEdit = (row) => { + getEventType(row.id).then(() => setOpenPopup("eventTypeForm")); + }; + + const handleNew = () => { + resetEventTypeForm(); + setOpenPopup("eventTypeForm"); + }; + + const handleSave = (eventTypeEntity) => + saveEventType(eventTypeEntity).then(() => + getEventTypes(term, DEFAULT_CURRENT_PAGE, perPage, order, orderDir) + ); -class EventTypeListPage extends React.Component { - constructor(props) { - super(props); - this.state = {}; - props.getEventTypes(); - - this.handleEdit = this.handleEdit.bind(this); - this.handleNew = this.handleNew.bind(this); - this.handleDelete = this.handleDelete.bind(this); - this.isNotDefault = this.isNotDefault.bind(this); - } - - componentDidMount() { - const { currentSummit } = this.props; - if (currentSummit) { - this.props.getEventTypes(); - } - } - - handleEdit(eventTypeId) { - const { currentSummit, history } = this.props; - history.push(`/app/summits/${currentSummit.id}/event-types/${eventTypeId}`); - } - - handleNew(ev) { - const { currentSummit, history } = this.props; - history.push(`/app/summits/${currentSummit.id}/event-types/new`); - } - - handleDelete(eventTypeId) { - const { deleteEventType, eventTypes } = this.props; - let eventType = eventTypes.find((e) => e.id === eventTypeId); - - Swal.fire({ - title: T.translate("general.are_you_sure"), - text: - T.translate("event_type_list.remove_warning") + " " + eventType.name, - type: "warning", - showCancelButton: true, - confirmButtonColor: "#DD6B55", - confirmButtonText: T.translate("general.yes_delete") - }).then(function (result) { - if (result.value) { - deleteEventType(eventTypeId); - } - }); - } - - isNotDefault(eventTypeId) { - const { eventTypes } = this.props; - let eventType = eventTypes.find((e) => e.id === eventTypeId); - - return !eventType.is_default; - } - - render() { - const { currentSummit, eventTypes } = this.props; - - const columns = [ - { columnKey: "name", value: T.translate("event_type_list.name") }, - { columnKey: "class_name", value: T.translate("event_type_list.class") } - ]; - - const table_options = { - actions: { - edit: { onClick: this.handleEdit }, - delete: { onClick: this.handleDelete, display: this.isNotDefault } - } - }; - - if (!currentSummit.id) return
; - - return ( -
-

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

-
-
- - -
-
- - {eventTypes.length === 0 && ( -
- {T.translate("event_type_list.no_items")} -
- )} - - {eventTypes.length > 0 && ( -
- - - )} - + const handleDelete = (eventTypeId) => { + deleteEventType(eventTypeId).then(() => + getEventTypes(term, DEFAULT_CURRENT_PAGE, perPage, order, orderDir) ); - } -} + }; + + const handleSearch = (searchTerm) => { + getEventTypes(searchTerm, DEFAULT_CURRENT_PAGE, perPage, order, orderDir); + }; + + const handlePageChange = (page) => { + getEventTypes(term, page, perPage, order, orderDir); + }; + + const handlePerPageChange = (newPerPage) => { + getEventTypes(term, DEFAULT_CURRENT_PAGE, newPerPage, order, orderDir); + }; + + const handleSort = (key, dir) => { + getEventTypes(term, currentPage, perPage, key, dir); + }; + + const columns = [ + { + columnKey: "name", + header: T.translate("event_type_list.name"), + sortable: true + }, + { + columnKey: "class_name", + header: T.translate("event_type_list.class") + } + ]; + + const tableOptions = { sortCol: order, sortDir: orderDir }; + + if (!currentSummit.id) return
; + + return ( +
+

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

+ + + + {totalEventTypes} {T.translate("event_type_list.event_types")} + + + + + + + + + + + + {eventTypes.length > 0 && ( + !row.is_default} + deleteDialogBody={(name) => + `${T.translate("event_type_list.remove_warning")} ${name}` + } + confirmButtonColor="error" + /> + )} + + {eventTypes.length === 0 && ( +
{T.translate("event_type_list.no_items")}
+ )} + + {openPopup === "eventTypeForm" && ( + setOpenPopup(null)} + onSave={handleSave} + /> + )} +
+ ); +}; + +EventTypeListPage.propTypes = { + currentSummit: PropTypes.shape({ id: PropTypes.number }).isRequired, + eventTypes: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.number, + name: PropTypes.string, + class_name: PropTypes.string, + is_default: PropTypes.bool + }) + ).isRequired, + term: PropTypes.string, + currentPage: PropTypes.number, + perPage: PropTypes.number, + order: PropTypes.string, + orderDir: PropTypes.number, + totalEventTypes: PropTypes.number, + getEventTypes: PropTypes.func.isRequired, + getEventType: PropTypes.func.isRequired, + deleteEventType: PropTypes.func.isRequired, + seedEventTypes: PropTypes.func.isRequired, + resetEventTypeForm: PropTypes.func.isRequired, + saveEventType: PropTypes.func.isRequired +}; + +EventTypeListPage.defaultProps = { + term: "", + currentPage: 1, + perPage: 10, + order: "id", + orderDir: 1, + totalEventTypes: 0 +}; const mapStateToProps = ({ currentSummitState, @@ -140,7 +242,10 @@ const mapStateToProps = ({ }); export default connect(mapStateToProps, { - getEventTypes, - deleteEventType, - seedEventTypes + getEventTypes: getEventTypesAction, + getEventType: getEventTypeAction, + deleteEventType: deleteEventTypeAction, + seedEventTypes: seedEventTypesAction, + resetEventTypeForm: resetEventTypeFormAction, + saveEventType: saveEventTypeAction })(EventTypeListPage); diff --git a/src/reducers/events/event-type-list-reducer.js b/src/reducers/events/event-type-list-reducer.js index 1f9244980..8485fa14a 100644 --- a/src/reducers/events/event-type-list-reducer.js +++ b/src/reducers/events/event-type-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_TYPES, REQUEST_EVENT_TYPES, @@ -19,10 +20,16 @@ import { } from "../../actions/event-type-actions"; import { SET_CURRENT_SUMMIT } from "../../actions/summit-actions"; -import { LOGOUT_USER } from "openstack-uicore-foundation/lib/security/actions"; const DEFAULT_STATE = { - eventTypes: [] + eventTypes: [], + term: "", + order: "id", + orderDir: 1, + currentPage: 1, + lastPage: 1, + perPage: 10, + totalEventTypes: 0 }; const eventTypeListReducer = (state = DEFAULT_STATE, action) => { @@ -33,30 +40,38 @@ const eventTypeListReducer = (state = DEFAULT_STATE, action) => { return DEFAULT_STATE; } case REQUEST_EVENT_TYPES: { - return { ...state }; + const { order, orderDir, term, perPage } = payload; + return { ...state, order, orderDir, term, perPage }; } case RECEIVE_EVENT_TYPES: { - let eventTypes = [...payload.response.data]; + const { total, last_page, current_page } = payload.response; + const eventTypes = [...payload.response.data]; - return { ...state, eventTypes }; + return { + ...state, + eventTypes, + currentPage: current_page, + lastPage: last_page, + totalEventTypes: total + }; } case EVENT_TYPE_DELETED: { - let { eventTypeId } = payload; + const { eventTypeId } = payload; return { ...state, eventTypes: state.eventTypes.filter((e) => e.id !== eventTypeId) }; } case EVENT_TYPES_SEEDED: { - let eventTypesAdded = payload.response.data; + const eventTypesAdded = payload.response.data; if (eventTypesAdded.length > 0) { return { ...state, - eventTypes: [...state.eventTypes, ...eventTypesAdded] + eventTypes: [...state.eventTypes, ...eventTypesAdded], + totalEventTypes: state.totalEventTypes + eventTypesAdded.length }; - } else { - return state; } + return state; } default: return state;