diff --git a/src/actions/email-actions.js b/src/actions/email-actions.js index ea13a97bf..0b4e4741b 100644 --- a/src/actions/email-actions.js +++ b/src/actions/email-actions.js @@ -29,7 +29,7 @@ import { escapeFilterValue } from "openstack-uicore-foundation/lib/utils/actions"; import URI from "urijs"; -import debounce from "lodash/debounce" +import debounce from "lodash/debounce"; import history from "../history"; import { checkOrFilter, getAccessTokenSafely } from "../utils/methods"; import { saveMarketingSetting } from "./marketing-actions"; @@ -99,7 +99,7 @@ export const getEmailTemplates = createAction(RECEIVE_TEMPLATES), `${window.EMAIL_API_BASE_URL}/api/v1/mail-templates`, authErrorHandler, - { order, orderDir, term } + { order, orderDir, term, page, perPage } )(params)(dispatch).then(() => { dispatch(stopLoading()); }); diff --git a/src/pages/emails/email-template-list-page.js b/src/pages/emails/email-template-list-page.js index c7138eb9e..36cdcb9f6 100644 --- a/src/pages/emails/email-template-list-page.js +++ b/src/pages/emails/email-template-list-page.js @@ -12,13 +12,14 @@ * */ import React, { useEffect } from "react"; +import Button from "@mui/material/Button"; +import Grid2 from "@mui/material/Grid2"; +import AddIcon from "@mui/icons-material/Add"; import { connect } from "react-redux"; import T from "i18n-react/dist/i18n-react"; -import Swal from "sweetalert2"; -import { Pagination } from "react-bootstrap"; -import FreeTextSearch from "openstack-uicore-foundation/lib/components/free-text-search" -import Table from "openstack-uicore-foundation/lib/components/table"; -import { getSummitById } from "../../actions/summit-actions"; +import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input"; +import MuiTable from "openstack-uicore-foundation/lib/components/mui/table"; +import { DEFAULT_CURRENT_PAGE } from "../../utils/constants"; import { getEmailTemplates, deleteEmailTemplate @@ -26,7 +27,6 @@ import { const EmailTemplateListPage = ({ templates, - lastPage, currentPage, perPage, term, @@ -34,26 +34,43 @@ const EmailTemplateListPage = ({ orderDir, totalTemplates, history, - ...props + getEmailTemplates: fetchEmailTemplates, + deleteEmailTemplate: removeEmailTemplate }) => { useEffect(() => { - props.getEmailTemplates(term, currentPage, perPage, order, orderDir); - }, []); + fetchEmailTemplates(term, currentPage, perPage, order, orderDir); + }, [fetchEmailTemplates]); - const handleEdit = (template_id) => { - history.push(`/app/emails/templates/${template_id}`); + const handleEdit = (row) => { + history.push(`/app/emails/templates/${row.id}`); }; - const handlePageChange = (newPage) => { - props.getEmailTemplates(term, newPage, perPage, order, orderDir); + const handlePageChange = (page) => { + fetchEmailTemplates(term, page, perPage, order, orderDir); }; - const handleSort = (index, key, dir) => { - props.getEmailTemplates(term, currentPage, perPage, key, dir); + const handlePerPageChange = (newPerPage) => { + fetchEmailTemplates( + term, + DEFAULT_CURRENT_PAGE, + newPerPage, + order, + orderDir + ); + }; + + const handleSort = (key, dir) => { + fetchEmailTemplates(term, currentPage, perPage, key, dir); }; const handleSearch = (newTerm) => { - props.getEmailTemplates(newTerm, 1, perPage, order, orderDir); + fetchEmailTemplates( + newTerm, + DEFAULT_CURRENT_PAGE, + perPage, + order, + orderDir + ); }; const handleNewEmailTemplate = (ev) => { @@ -61,69 +78,75 @@ const EmailTemplateListPage = ({ history.push("/app/emails/templates/new"); }; - const handleDeleteEmailTemplate = (templateId) => { - const template = templates.find((t) => t.id === templateId); - - Swal.fire({ - title: T.translate("general.are_you_sure"), - text: `${T.translate("emails.delete_template_warning")} ${ - template.identifier - }`, - type: "warning", - showCancelButton: true, - confirmButtonColor: "#DD6B55", - confirmButtonText: T.translate("general.yes_delete") - }).then((result) => { - if (result.value) { - props.deleteEmailTemplate(templateId); - } - }); + const handleDeleteEmailTemplate = (row) => { + removeEmailTemplate(row.id); }; const columns = [ - { columnKey: "id", value: T.translate("general.id"), sortable: true }, + { + columnKey: "id", + header: T.translate("general.id"), + sortable: true, + width: 70 + }, { columnKey: "identifier", - value: T.translate("emails.name"), - styles: { wordBreak: "break-all" }, + header: T.translate("emails.name"), + render: (row) => ( +
+ {row.identifier} +
+ ), sortable: true }, - { columnKey: "subject", value: T.translate("emails.subject") }, - { columnKey: "from_email", value: T.translate("emails.from_email") } + { columnKey: "subject", header: T.translate("emails.subject") }, + { columnKey: "from_email", header: T.translate("emails.from_email") } ]; - const table_options = { + const tableOptions = { sortCol: order, - sortDir: orderDir, - actions: { - edit: { onClick: handleEdit }, - delete: { onClick: handleDeleteEmailTemplate } - } + sortDir: orderDir }; return (
-

- {" "} - {T.translate("emails.template_list")} ({totalTemplates}) -

-
-
- -
-
- -
-
+ + + {templates.length === 0 && (
{T.translate("emails.no_templates")}
@@ -131,24 +154,23 @@ const EmailTemplateListPage = ({ {templates.length > 0 && (
- - row.identifier} + deleteDialogBody={(item) => + `${T.translate("emails.delete_template_warning")} ${item}` + } + confirmButtonColor="error" /> )} @@ -161,7 +183,6 @@ const mapStateToProps = ({ emailTemplateListState }) => ({ }); export default connect(mapStateToProps, { - getSummitById, getEmailTemplates, deleteEmailTemplate })(EmailTemplateListPage); diff --git a/src/reducers/emails/email-template-list-reducer.js b/src/reducers/emails/email-template-list-reducer.js index 454b34896..2fe6a5f11 100644 --- a/src/reducers/emails/email-template-list-reducer.js +++ b/src/reducers/emails/email-template-list-reducer.js @@ -1,4 +1,4 @@ -/** +/* * 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. @@ -9,16 +9,15 @@ * 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_TEMPLATES, REQUEST_TEMPLATES, TEMPLATE_DELETED } from "../../actions/email-actions"; -import { LOGOUT_USER } from "openstack-uicore-foundation/lib/security/actions"; - const DEFAULT_STATE = { templates: [], term: null, @@ -30,38 +29,49 @@ const DEFAULT_STATE = { totalTemplates: 0 }; -const emailTemplateListReducer = (state = DEFAULT_STATE, action) => { +const emailTemplateListReducer = (state = DEFAULT_STATE, action = {}) => { const { type, payload } = action; switch (type) { case LOGOUT_USER: { return DEFAULT_STATE; } case REQUEST_TEMPLATES: { - let { order, orderDir, term } = payload; - - return { ...state, order, orderDir, term }; + const { order, orderDir, term, page, perPage } = payload; + return { + ...state, + order, + orderDir, + term, + currentPage: page, + perPage, + templates: [] + }; } case RECEIVE_TEMPLATES: { - let { total, last_page, current_page } = payload.response; - let templates = payload.response.data.map((s) => { - return { - id: s.id, - identifier: s.identifier, - subject: s.subject, - from_email: s.from_email - }; - }); + const { + total, + last_page: lastPage, + current_page: currentPage, + per_page: perPage + } = payload.response; + const templates = payload.response.data.map((s) => ({ + id: s.id, + identifier: s.identifier, + subject: s.subject, + from_email: s.from_email + })); return { ...state, - templates: templates, - currentPage: current_page, + templates, + currentPage, + perPage, totalTemplates: total, - lastPage: last_page + lastPage }; } case TEMPLATE_DELETED: { - let { templateId } = payload; + const { templateId } = payload; return { ...state, templates: state.templates.filter((s) => s.id !== templateId)