feat: move event category group edition to MUI

package.json

@@ -92,6 +92,7 @@
     "moment": "^2.29.1",
     "moment-duration-format": "^2.3.2",
     "moment-timezone": "^0.5.33",
+    "mui-color-input": "^9.0.0",
     "openstack-uicore-foundation": "5.0.34",
     "p-limit": "^6.1.0",
     "path-browserify": "^1.0.1",

src/actions/event-category-actions.js

@@ -21,12 +21,13 @@ 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 +381,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) => {
@@ -464,7 +489,7 @@ export const saveEventCategoryGroup =
     const params = { access_token: accessToken };
 
     if (entity.id) {
-      putRequest(
+      return putRequest(
         createAction(UPDATE_EVENT_CATEGORY_GROUP),
         createAction(EVENT_CATEGORY_GROUP_UPDATED),
         `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/track-groups/${entity.id}`,
@@ -478,30 +503,22 @@ export const saveEventCategoryGroup =
           )
         );
       });
-    } else {
-      const successMessage = {
-        title: T.translate("general.done"),
-        html: T.translate("edit_event_category_group.group_created"),
-        type: "success"
-      };
-
-      postRequest(
+    } 
+      return postRequest(
         createAction(UPDATE_EVENT_CATEGORY_GROUP),
         createAction(EVENT_CATEGORY_GROUP_ADDED),
         `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/track-groups`,
         normalizedEntity,
         authErrorHandler,
         entity
-      )(params)(dispatch).then((payload) => {
+      )(params)(dispatch).then(() => {
         dispatch(
-          showMessage(successMessage, () => {
-            history.replace(
-              `/app/summits/${currentSummit.id}/event-category-groups/${payload.response.id}`
-            );
-          })
+          showSuccessMessage(
+            T.translate("edit_event_category_group.group_created")
+          )
         );
       });
-    }
+
   };
 
 export const deleteEventCategoryGroup =

src/components/mui/formik-inputs/mui-formik-color-input.js

@@ -0,0 +1,47 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useField } from "formik";
+import { MuiColorInput } from "mui-color-input";
+
+const COLOR_INPUT_SX = {
+  "& input": { visibility: "hidden" },
+  "& .MuiInputBase-root": { position: "relative", overflow: "hidden" },
+  "& .MuiInputAdornment-root": {
+    position: "absolute",
+    inset: 0,
+    maxHeight: "none",
+    margin: 0
+  },
+  "& .MuiColorInput-Button": {
+    width: "100%",
+    height: "100%",
+    borderRadius: "3px",
+    minWidth: 0
+  }
+};
+
+const MuiFormikColorInput = ({ name, ...props }) => {
+  const [field, , helpers] = useField(name);
+
+  const value = field.value?.startsWith("#")
+    ? field.value
+    : field.value
+    ? `#${field.value}`
+    : "";
+
+  return (
+    <MuiColorInput
+      {...props}
+      value={value}
+      onChange={(newColor) => helpers.setValue(newColor)}
+      format="hex"
+      sx={COLOR_INPUT_SX}
+    />
+  );
+};
+
+MuiFormikColorInput.propTypes = {
+  name: PropTypes.string.isRequired
+};
+
+export default MuiFormikColorInput;

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",
@@ -1395,7 +1395,9 @@
     "group_created": "Activity Category Group created successfully.",
     "unlink_track_warning": "if you remove a category from the category group, any activities linked to that category will automatically be removed from the selection plan. Do you want to continue?",
     "placeholders": {
-      "select_class": "Select Class"
+      "select_class": "Select Class",
+      "search_categories": "Search and add categories",
+      "search_groups": "Search and add allowed groups"
     }
   },
   "location_list": {

src/layouts/event-category-group-layout.js

@@ -9,56 +9,34 @@
  * 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 { Switch, Route, withRouter } from "react-router-dom";
+import { Switch, Route, Redirect, withRouter } from "react-router-dom";
 import T from "i18n-react/dist/i18n-react";
 import { Breadcrumb } from "react-breadcrumbs";
 import Restrict from "../routes/restrict";
 
-import EditEventCategoryGroupPage from "../pages/events/edit-event-category-group-page";
 import EventCategoryGroupListPage from "../pages/events/event-category-group-list-page";
-import NoMatchPage from "../pages/no-match-page";
 
-class EventCategoryGroupLayout extends React.Component {
-  render() {
-    const { match } = this.props;
-    return (
-      <div>
-        <Breadcrumb
-          data={{
-            title: T.translate(
-              "event_category_group_list.event_category_groups"
-            ),
-            pathname: match.url
-          }}
-        />
-
-        <Switch>
-          <Route
-            exact
-            strict
-            path={match.url}
-            component={EventCategoryGroupListPage}
-          />
-          <Route
-            exact
-            strict
-            path={`${match.url}/new`}
-            component={EditEventCategoryGroupPage}
-          />
-          <Route
-            exact
-            strict
-            path={`${match.url}/:group_id(\\d+)`}
-            component={EditEventCategoryGroupPage}
-          />
-          <Route component={NoMatchPage} />
-        </Switch>
-      </div>
-    );
-  }
-}
+const EventCategoryGroupLayout = ({ match }) => (
+  <div>
+    <Breadcrumb
+      data={{
+        title: T.translate("event_category_group_list.event_category_groups"),
+        pathname: match.url
+      }}
+    />
+    <Switch>
+      <Route
+        exact
+        strict
+        path={match.url}
+        component={EventCategoryGroupListPage}
+      />
+      <Redirect to={match.url} />
+    </Switch>
+  </div>
+);
 
 export default Restrict(withRouter(EventCategoryGroupLayout), "events");