From c9d33f7fef7af303a8e0d451c6005fc47e1a3c41 Mon Sep 17 00:00:00 2001 From: Priscila Moneo Date: Fri, 24 Apr 2026 12:40:07 -0300 Subject: [PATCH 1/3] feat: move show directory to mui --- src/i18n/en.json | 7 +- src/pages/summits/summit-directory-page.js | 306 +++++++++++---------- 2 files changed, 168 insertions(+), 145 deletions(-) diff --git a/src/i18n/en.json b/src/i18n/en.json index 9c4f9fd05..d4d7164e3 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -300,7 +300,12 @@ "summits": "Events", "add_summit": "Add Event", "remove_warning": "Are you sure you want to delete event", - "invitation_only": "Invitation Only" + "error_loading": "Error loading directory.", + "invitation_only": "Invitation Only", + "id": "ID", + "summit_name": "Event Name", + "start_date": "Start Date", + "end_date": "End Date" }, "dashboard": { "dashboard": "Dashboard", diff --git a/src/pages/summits/summit-directory-page.js b/src/pages/summits/summit-directory-page.js index 2b4118710..bcea57e72 100644 --- a/src/pages/summits/summit-directory-page.js +++ b/src/pages/summits/summit-directory-page.js @@ -11,13 +11,13 @@ * 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 { formatEpoch } from "openstack-uicore-foundation/lib/utils/methods"; -import { Pagination } from "react-bootstrap"; -import history from "../../history"; +import MuiTable from "openstack-uicore-foundation/lib/components/mui/table"; +import { Button, Box, Grid2 } from "@mui/material"; +import AddIcon from "@mui/icons-material/Add"; import { loadSummits, clearCurrentSummit, @@ -25,155 +25,173 @@ import { } from "../../actions/summit-actions"; import Member from "../../models/member"; -import "../../styles/summit-directory-page.less"; - -class SummitDirectoryPage extends React.Component { - constructor(props) { - super(props); - - props.clearCurrentSummit(); - props.loadSummits(); - - this.handlePageChange = this.handlePageChange.bind(this); - } - - handlePageChange(page) { - const { perPage } = this.props; - this.props.loadSummits(page, perPage); - } - - onSelectedSummit(event, summit) { - event.preventDefault(); - history.push(`/app/summits/${summit.id}/dashboard`); - return false; - } - - onEditSummit(summit, ev) { - const { history } = this.props; - ev.preventDefault(); - - history.push(`/app/summits/${summit.id}`); - } - - onNewSummit(ev) { - const { history } = this.props; - ev.preventDefault(); - - history.push("/app/summits/new"); +const SummitDirectoryPage = ({ + summits, + member, + currentPage, + perPage, + totalSummits, + loadSummits, + clearCurrentSummit, + deleteSummit, + history +}) => { + const safeSummits = Array.isArray(summits) ? summits : []; + const safeMember = + member && typeof member === "object" + ? { ...member, groups: Array.isArray(member.groups) ? member.groups : [] } + : { groups: [] }; + useEffect(() => { + clearCurrentSummit(); + loadSummits(); + }, []); + + let memberObj; + try { + memberObj = new Member(safeMember); + } catch (e) { + memberObj = { + canEditSummit: () => false, + canAddSummits: () => false, + canDeleteSummits: () => false + }; } - - onDeleteSummit(summit, ev) { - const { deleteSummit } = this.props; - - ev.preventDefault(); - - Swal.fire({ - title: T.translate("general.are_you_sure"), - text: `${T.translate("directory.remove_warning")} ${summit.name}`, - type: "warning", - showCancelButton: true, - confirmButtonColor: "#DD6B55", - confirmButtonText: T.translate("general.yes_delete") - }).then((result) => { - if (result.value) { - deleteSummit(summit.id); + const canEditSummit = + typeof memberObj.canEditSummit === "function" + ? memberObj.canEditSummit() + : false; + const canAddSummits = + typeof memberObj.canAddSummits === "function" + ? memberObj.canAddSummits() + : false; + const canDeleteSummits = + typeof memberObj.canDeleteSummits === "function" + ? memberObj.canDeleteSummits() + : false; + + try { + const handlePageChange = (page) => { + loadSummits(page, perPage); + }; + + const handleNewSummit = () => { + history.push("/app/summits/new"); + }; + + const handleEditSummit = (summit) => { + history.push(`/app/summits/${summit.id}`); + }; + + const handleSelectSummit = (summit) => { + history.push(`/app/summits/${summit.id}/dashboard`); + }; + + const columns = [ + { + columnKey: "id", + header: T.translate("directory.id"), + width: 80 + }, + { + columnKey: "name", + header: T.translate("directory.summit_name") + }, + { + columnKey: "start_date", + header: T.translate("directory.start_date"), + render: (row) => formatEpoch(row.start_date, "MMMM Do YYYY") + }, + { + columnKey: "end_date", + header: T.translate("directory.end_date"), + render: (row) => formatEpoch(row.end_date, "MMMM Do YYYY") + }, + { + columnKey: "invite_only_registration", + header: T.translate("directory.invitation_only"), + width: 120, + render: (row) => + row.invite_only_registration ? ( + + {T.translate("directory.invitation_only")} + + ) : null } - }); - } - - render() { - const { summits, member, lastPage, currentPage, totalSummits } = this.props; - const memberObj = new Member(member); - - const canEditSummit = memberObj.canEditSummit(); - const canAddSummits = memberObj.canAddSummits(); - const canDeleteSummits = memberObj.canDeleteSummits(); + ]; return ( -
-

- {" "} - {T.translate("directory.summits")} ({totalSummits}) -

- {canAddSummits && ( -
-
- -
-
- )} -
- - - {summits && - summits.map((summit) => ( - - - - - - - - - ))} - -
{summit.id} {summit.name} {formatEpoch(summit.start_date, "MMMM Do YYYY")} {formatEpoch(summit.end_date, "MMMM Do YYYY")} - {summit.invite_only_registration && ( - - {" "} - {T.translate("directory.invitation_only")} - - )} - - this.onSelectedSummit(e, summit)} - className="btn btn-default btn-sm" - > - {T.translate("directory.select")} - - {canEditSummit && ( - - {T.translate("general.edit")} - - )} - {canDeleteSummits && ( - - {T.translate("general.delete")} - - )} -
- -
+ + )} + + + deleteSummit(id) : undefined} + onSelect={handleSelectSummit} + getName={(row) => row.name} + deleteDialogTitle={T.translate("general.are_you_sure")} + deleteDialogBody={(name) => + `${T.translate("directory.remove_warning")} ${name}` + } + deleteDialogConfirmText={T.translate("general.yes_delete")} + confirmButtonColor="error" + /> + + ); + } catch (err) { + return ( +
+

{T.translate("directory.error_loading")}

+ 
{err.message}
); } -} +}; const mapStateToProps = ({ directoryState, loggedUserState }) => ({ ...directoryState, From f8aab1b8b35b0bd62b7758a435d4f259d642368d Mon Sep 17 00:00:00 2001 From: Priscila Moneo Date: Wed, 6 May 2026 18:32:38 -0300 Subject: [PATCH 2/3] fix: figma adjustments on show directory grid --- src/actions/summit-actions.js | 26 +++++++- src/i18n/en.json | 12 +++- src/pages/summits/summit-directory-page.js | 73 +++++++++++++++++++--- 3 files changed, 98 insertions(+), 13 deletions(-) diff --git a/src/actions/summit-actions.js b/src/actions/summit-actions.js index 15a178edd..d6e2f940c 100644 --- a/src/actions/summit-actions.js +++ b/src/actions/summit-actions.js @@ -21,7 +21,8 @@ import { stopLoading, startLoading, showSuccessMessage, - authErrorHandler + authErrorHandler, + escapeFilterValue } from "openstack-uicore-foundation/lib/utils/actions"; import moment from "moment-timezone"; import { @@ -130,7 +131,12 @@ export const clearCurrentSummit = () => (dispatch) => { }; export const loadSummits = - (page = DEFAULT_CURRENT_PAGE, perPage = DEFAULT_PER_PAGE) => + ( + page = DEFAULT_CURRENT_PAGE, + perPage = DEFAULT_PER_PAGE, + term = "", + hidePastEvents = false + ) => async (dispatch, getState) => { const accessToken = await getAccessTokenSafely(); @@ -146,6 +152,22 @@ export const loadSummits = order: "-start_date" }; + const filters = []; + + if (term) { + const escapedTerm = escapeFilterValue(term); + filters.push(`name=@${escapedTerm}`); + } + + if (hidePastEvents) { + const now = moment().tz("UTC").unix(); + filters.push(`end_date>=${now}`); + } + + if (filters.length > 0) { + params["filter[]"] = filters; + } + getRequest( createAction(REQUEST_SUMMITS), createAction(RECEIVE_SUMMITS), diff --git a/src/i18n/en.json b/src/i18n/en.json index d4d7164e3..14565e8f0 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -297,15 +297,23 @@ }, "directory": { "select": "Select", - "summits": "Events", + "summits": "Shows", + "shows": "shows", "add_summit": "Add Event", "remove_warning": "Are you sure you want to delete event", "error_loading": "Error loading directory.", "invitation_only": "Invitation Only", "id": "ID", "summit_name": "Event Name", + "sponsors": "Sponsors", + "forms": "Forms", + "attachments": "Attachments", + "hide_past_events": "Hide past events", "start_date": "Start Date", - "end_date": "End Date" + "end_date": "End Date", + "placeholders": { + "search": "Search..." + } }, "dashboard": { "dashboard": "Dashboard", diff --git a/src/pages/summits/summit-directory-page.js b/src/pages/summits/summit-directory-page.js index bcea57e72..6dc6c9798 100644 --- a/src/pages/summits/summit-directory-page.js +++ b/src/pages/summits/summit-directory-page.js @@ -11,12 +11,19 @@ * limitations under the License. * */ -import React, { useEffect } from "react"; +import React, { useEffect, useState } from "react"; import { connect } from "react-redux"; import T from "i18n-react/dist/i18n-react"; import { formatEpoch } from "openstack-uicore-foundation/lib/utils/methods"; import MuiTable from "openstack-uicore-foundation/lib/components/mui/table"; -import { Button, Box, Grid2 } from "@mui/material"; +import MuiSearchInput from "openstack-uicore-foundation/lib/components/mui/search-input"; +import Box from "@mui/material/Box"; +import Button from "@mui/material/Button"; +import Checkbox from "@mui/material/Checkbox"; +import Chip from "@mui/material/Chip"; +import FormControlLabel from "@mui/material/FormControlLabel"; +import FormGroup from "@mui/material/FormGroup"; +import Grid2 from "@mui/material/Grid2"; import AddIcon from "@mui/icons-material/Add"; import { loadSummits, @@ -24,6 +31,7 @@ import { deleteSummit } from "../../actions/summit-actions"; import Member from "../../models/member"; +import { DEFAULT_CURRENT_PAGE } from "../../utils/constants"; const SummitDirectoryPage = ({ summits, @@ -36,6 +44,8 @@ const SummitDirectoryPage = ({ deleteSummit, history }) => { + const [searchTerm, setSearchTerm] = useState(""); + const [hidePastEvents, setHidePastEvents] = useState(false); const safeSummits = Array.isArray(summits) ? summits : []; const safeMember = member && typeof member === "object" @@ -43,7 +53,7 @@ const SummitDirectoryPage = ({ : { groups: [] }; useEffect(() => { clearCurrentSummit(); - loadSummits(); + loadSummits(DEFAULT_CURRENT_PAGE, perPage, searchTerm, hidePastEvents); }, []); let memberObj; @@ -71,7 +81,18 @@ const SummitDirectoryPage = ({ try { const handlePageChange = (page) => { - loadSummits(page, perPage); + loadSummits(page, perPage, searchTerm, hidePastEvents); + }; + + const handleSearch = (value) => { + setSearchTerm(value); + loadSummits(DEFAULT_CURRENT_PAGE, perPage, value, hidePastEvents); + }; + + const handleHidePastEventsChange = (ev) => { + const { checked } = ev.target; + setHidePastEvents(checked); + loadSummits(DEFAULT_CURRENT_PAGE, perPage, searchTerm, checked); }; const handleNewSummit = () => { @@ -96,6 +117,21 @@ const SummitDirectoryPage = ({ columnKey: "name", header: T.translate("directory.summit_name") }, + { + columnKey: "sponsor_qty", + header: T.translate("directory.sponsors"), + render: (row) => row.sponsor_qty ?? 0 + }, + { + columnKey: "sponsor_forms_qty", + header: T.translate("directory.forms"), + render: (row) => row.sponsor_forms_qty ?? 0 + }, + { + columnKey: "sponsor_attachments_qty", + header: T.translate("directory.attachments"), + render: (row) => row.sponsor_attachments_qty ?? 0 + }, { columnKey: "start_date", header: T.translate("directory.start_date"), @@ -108,13 +144,11 @@ const SummitDirectoryPage = ({ }, { columnKey: "invite_only_registration", - header: T.translate("directory.invitation_only"), + header: "", width: 120, render: (row) => row.invite_only_registration ? ( - - {T.translate("directory.invitation_only")} - + ) : null } ]; @@ -133,9 +167,30 @@ const SummitDirectoryPage = ({ }} > - {totalSummits} {T.translate("general.items")} + {totalSummits} {T.translate("directory.shows")} + + + } + label={T.translate("directory.hide_past_events")} + /> + + + + {canAddSummits && (