containers/Settings/VideoAction/VideoAction.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

import { checkPermisson, getActiveModal, getModalData, getNavigatedLink } from '../../../selectors/common';
import EditableTable from '../../../components/MenuItems/Bonus/EditableTable';
import { CONFIRM_MODAL_CONTENT, MENU_ITEMS, MODALS, PERMISSIONS, VIDEO_ACTION_STATUS } from '../../../constants';
import ConfirmationModal from '../../../components/Modals/ConfirmationModal';
import { getVideoActionStatus, getVideoActionType, getVideoActions } from '../../../selectors/settings';
import { formatTimer } from '../../../utils/common';
import { aSetFilters, aSetNavigationInfo, aSetOpenModal } from '../../../reducers/common';
import { aGetVideoAction, aSaveVideoAction } from '../../../reducers/actions';
import { withRouterHooks } from '../../../utils/router';
import Filter from '../../../components/Filter';
import { aClearFilterData } from '../../../reducers/cashier';

const mapToProps = (state) => ({
  videoActionList: getVideoActions(state),
  checkPermisson: (payload) => checkPermisson(state, payload),
  activeModal: getActiveModal(state),
  modalData: getModalData(state),
  nextNavigationLink: getNavigatedLink(state),
  videoActionType: getVideoActionType(state),
  videoActionStatus: getVideoActionStatus(state),
});

const actionsToProps = (dispatch) => ({
  setFilterData: (payload) => dispatch(aSetFilters(payload)),
  getVideoAction: (payload) => dispatch(aGetVideoAction(payload)),
  saveVideoAction: (payload) => dispatch(aSaveVideoAction(payload)),
  setOpenModal: (payload) => dispatch(aSetOpenModal(payload)),
  setNavigationInfo: (payload) => dispatch(aSetNavigationInfo(payload)),
  clearFilterData: (payload) => dispatch(aClearFilterData(payload)),
});

/**
 * @class
 * @property {object} props
 * @property {boolean} props.checkPermisson Check if user have permission to edit page
 * @property {Function} props.getVideoAction Call API for VideoAction
 * @property {Function} props.saveVideoAction Call API to save changes
 * @property {Function} props.setOpenModal Open modal
 * @property {object} props.nextNavigationLink link for navigation
 * @property {Function} props.setNavigationInfo set navigation info for unsaved data
 */
class VideoAction extends Component {
  constructor(props) {
    super(props);
    /**
     * @member {Array}
     *
     */
    this.fields = [
      {
        label: 'ID',
        field: 'id',
        getValue: (video, field) => video[field],
      },
      {
        label: 'Name',
        field: 'name',
        getValue: (video, field) => video[field],
      },
      {
        label: 'Type',
        field: 'type',
        getValue: (video, field) =>
          props.videoActionType.find((type) => parseInt(type.id) === parseInt(video[field]))?.label,
      },
      {
        label: 'Goal',
        field: 'goal',
        getValue: (video, field) => (video[field] === true ? 'Yes' : 'No'),
      },
      {
        label: 'Status',
        field: 'status',
        isEditable: true,
        dropdown: [
          { id: '1', label: 'Active' },
          { id: '-1', label: 'Disabled' },
        ],
        getValue: (video, field) => VIDEO_ACTION_STATUS[video[field]],
      },
      {
        label: 'Action history delay',
        field: 'actionHistoryDelay',
        getValue: (video, field) => video[field],
      },
      {
        label: 'Main action history delay',
        field: 'mainActionHistoryDelay',
        getValue: (video, field) => video[field],
      },
      {
        label: 'Duration',
        field: 'duration',
        getValue: (video, field) => video[field],
      },
      {
        label: 'Event Moment',
        field: 'eventMoment',
        getValue: (video, field) => video[field],
      },
      {
        label: 'Start Time',
        field: 'startTime',
        getValue: (video, field) => formatTimer(video[field]),
      },
      {
        label: 'Stop Time',
        field: 'stopTime',
        getValue: (video, field) => formatTimer(video[field]),
      },
    ];
    this.filterFields = [
      {
        text: 'ID',
        field: 'filter.id',
      },
      {
        text: 'Name',
        field: 'filter.name',
      },
      {
        text: 'Status',
        field: 'filter.status',
        dropdown: props.videoActionStatus,
      },
      {
        text: 'Type',
        field: 'filter.type',
        dropdown: props.videoActionType,
      },
      {
        text: 'Goal',
        field: 'filter.goal',
        dropdown: [
          { id: '', label: 'Any' },
          { id: 'true', label: 'Yes' },
          { id: 'false', label: 'No' },
        ],
      },
    ];

    /**
     * @member {boolean}
     */
    this.edit = props.checkPermisson(PERMISSIONS.SETTINGS_VIDEO_ACTION_EDIT);
  }

  /**
   * Call API to save data
   *
   * @function
   * @returns {void}
   */
  save = () => {
    this.props.saveVideoAction({ videoActionList: this.state.table });
    this.EditableTable.clearChanges(true);
  };

  /**
   * close modal and navigate
   *
   * @returns {void}
   */
  unsavedNavigation = () => {
    this.props.setOpenModal({ modal: '' });
    this.props.navigate(this.props.nextNavigationLink);
  };

  /**
   * set table info
   *
   * @param {Array} data
   * @returns {void}
   */
  setTableInfo = (data) => {
    this.setState({ table: data });
  };

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    return (
      <>
        <div className="user">
          <Filter
            filterFields={this.filterFields}
            info
            setFilterData={this.props.setFilterData}
            search={this.props.getVideoAction}
            filtersProps={this.props.filters}
            clearFilterData={this.props.clearFilterData}
          />
          {this.props.videoActionList && (
            <EditableTable
              ref={(reff) => {
                this.EditableTable = reff;
              }}
              key={MENU_ITEMS.BONUS.RANK_SETTINGS_VIEW.path}
              tableRows={this.props.videoActionList}
              fields={this.fields}
              edit={this.edit}
              save={this.save}
              setNavigationInfo={this.props.setNavigationInfo}
              nextNavigationLink={this.props.nextNavigationLink}
              setTableInfo={this.setTableInfo}
            />
          )}
        </div>
        {this.props.activeModal === MODALS.SAVE_BEFORE_NAVIGATION ? (
          <ConfirmationModal
            modalData={CONFIRM_MODAL_CONTENT.SAVE_CHANGES}
            cancel={this.unsavedNavigation}
            confirmation={this.save}
            cancelBtnText="Cancel"
            confirmBtnText="Save"
            logo
          />
        ) : null}
      </>
    );
  }
}

export default connect(mapToProps, actionsToProps)(withRouterHooks(VideoAction));