CropBrowsePage.tsx 4.79 KB
Newer Older
1
2
import * as React from 'react';
import { connect } from 'react-redux';
Maksym Tishchenko's avatar
Maksym Tishchenko committed
3
import { compose } from 'redux';
4
5
6
7
8
import { WithTranslation, withTranslation } from 'react-i18next';

// Action
import { listCropsAction, loadMoreCropsAction } from 'crop/action/public';
// Model
Maksym Tishchenko's avatar
Maksym Tishchenko committed
9
import { Crop } from '@gringlobal-ce/client/model/gringlobal';
10
import { UserRole } from '@gringlobal-ce/client/model/gringlobal/SysUser';
11
// UI
12
13
14
import ContentHeader from '@gringlobal-ce/client/ui/common/heading/ContentHeader';
import Table, { TextAlign } from '@gringlobal-ce/client/ui/common/table/Table';
import AddNewButton from '@gringlobal-ce/client/ui/common/button/AddNewButton';
Maksym Tishchenko's avatar
Maksym Tishchenko committed
15
import withBrowsePageBase, { WithBrowsePage } from 'ui/common/withBrowsePageBase';
16
import { CooperatorOwnedTableConfiguration as TableConfiguration } from '@gringlobal-ce/client/ui/common/table/TableConfiguration';
17
import { CropLink } from 'ui/common/Links';
18
19
import PageTitle from '@gringlobal-ce/client/ui/common/PageTitle';
import Authorize from '@gringlobal-ce/client/ui/common/authorized/Authorize';
20
21
import CropForm from 'crop/ui/admin/c/CropForm';
import { createCropAction } from 'crop/action/admin';
Maksym Tishchenko's avatar
Maksym Tishchenko committed
22
23
24
25
import PrintIcon from "@material-ui/icons/Print";
import FABMenu from "@gringlobal-ce/client/ui/common/button/FABMenu";
import PrintReportDialog from "common/PrintReportDialog";
import { showDialog } from "@gringlobal-ce/client/action/dialog";
26
27
28
29
30
31
32
33
34
35

export const CropTableDefaultConfig = {
  defaultColumns: [
    'id',
    'name',
    'note',
  ],
  defaultColumnSettings: {
    id: { readonly: true, align: TextAlign.right },
  },
36
37
  columnRenderers: {
    name: ({ row: crop }: { row: Crop }): JSX.Element => <CropLink crop={ crop } />,
38
39
40
41
42
  },
};

const CropTableConfig = new TableConfiguration(CropTableDefaultConfig);

Maksym Tishchenko's avatar
Maksym Tishchenko committed
43

Maksym Tishchenko's avatar
Maksym Tishchenko committed
44
class BrowsePage extends React.Component<PropsFromRedux & WithBrowsePage & WithTranslation> {
45
46
  public state = {
    cropDialogIsOpen: false,
Maksym Tishchenko's avatar
Maksym Tishchenko committed
47
    selected: []
48
  };
49
50
51
52
53

  protected static needs = [
    ({}) => listCropsAction(),
  ];

Matija Obreza's avatar
Matija Obreza committed
54
55
  private static PRINT_DIALOG_KEY = 'crop-print-pdf-dialog';

56
57
  public constructor(props) {
    super(props);
58
59
  }

60
61
62
63
64
65
  private handleSubmit = (formData: Crop) => {
    const { createCropAction } = this.props;
    createCropAction(formData);
    this.closeCropDialog();
  };

Maksym Tishchenko's avatar
Maksym Tishchenko committed
66
67
68
69
70
71
  private onRowsToggled = (selectedRows: number[]) => {
    const { data } = this.props;
    const selected = selectedRows.map((rowIndex) => data?.content[rowIndex].id)
    this.setState({ selected });
  }

72
73
74
75
76
77
78
79
  private openCropDialog = () => {
    this.setState({ cropDialogIsOpen: true });
  };

  private closeCropDialog = () => {
    this.setState({ cropDialogIsOpen: false });
  };

80
  public render() {
Maksym Tishchenko's avatar
Maksym Tishchenko committed
81
82
    const { data, t, onSortChange, showDialog, loadMore } = this.props;
    const { cropDialogIsOpen, selected } = this.state;
83
    const columns = CropTableConfig.getColumns(data && data.content ? data.content[0] : null);
Maksym Tishchenko's avatar
Maksym Tishchenko committed
84
85
86
    const actions = [
      {
        title: 'common:action.generatePdf',
Matija Obreza's avatar
Matija Obreza committed
87
        action: () => showDialog(BrowsePage.PRINT_DIALOG_KEY),
Maksym Tishchenko's avatar
Maksym Tishchenko committed
88
89
90
        icon: <PrintIcon/>,
      },
    ]
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

    return (
      <>
        <PageTitle title={ t('crop.public.p.browse.title') }/>
        <ContentHeader title={ t('crop.public.p.browse.title') }/>
        <Table
          tableKey="crop-list"
          type={ 'Crop' }
          columns={ columns }
          data={ data && data.content }
          tableConfig={ CropTableConfig }
          total={ data && data.content && data.totalElements }
          loadMore={ loadMore }
          sort={ data && data.sort }
          onSortChange={ onSortChange }
Maksym Tishchenko's avatar
Maksym Tishchenko committed
106
          onRowsToggled={ this.onRowsToggled }
107
        />
Maksym Tishchenko's avatar
Maksym Tishchenko committed
108
109
110
111
112
113
        { selected.length > 0 &&
          <FABMenu
            title="common:label.openActionList"
            actions={ actions }
          />
        }
Matija Obreza's avatar
Matija Obreza committed
114
        <Authorize roles={ [ UserRole.ADMINISTRATOR ] }>
115
          <>
Maksym Tishchenko's avatar
Maksym Tishchenko committed
116
117
118
            { selected.length === 0 &&
              <AddNewButton action={ this.openCropDialog }/>
            }
119
120
121
122
            <CropForm
              isOpen={ cropDialogIsOpen }
              onClose={ this.closeCropDialog }
              onSubmit={ this.handleSubmit }
Maksym Tishchenko's avatar
Maksym Tishchenko committed
123
              formId="crop-form"
124
125
126
              title={ t('crop.admin.p.cropEdit.title') }
            />
          </>
127
        </Authorize>
Maksym Tishchenko's avatar
Maksym Tishchenko committed
128
        <PrintReportDialog
Matija Obreza's avatar
Matija Obreza committed
129
130
          endpoint="crop"
          modelName="Crop"
Maksym Tishchenko's avatar
Maksym Tishchenko committed
131
          selectedItemIds={ selected }
Matija Obreza's avatar
Matija Obreza committed
132
          dialogKey={ BrowsePage.PRINT_DIALOG_KEY }
Maksym Tishchenko's avatar
Maksym Tishchenko committed
133
        />
134
135
136
137
138
139
140
141
142
143
144
      </>
    );
  }

}


const mapStateToProps = (state) => ({
  loadableData: state.crop.public.crops,
});

Maksym Tishchenko's avatar
Maksym Tishchenko committed
145
const mapDispatch = {
146
147
  listAction: listCropsAction,
  loadMoreData: loadMoreCropsAction,
148
  createCropAction,
Maksym Tishchenko's avatar
Maksym Tishchenko committed
149
  showDialog
Maksym Tishchenko's avatar
Maksym Tishchenko committed
150
}
151

Maksym Tishchenko's avatar
Maksym Tishchenko committed
152
type PropsFromRedux = ReturnType<typeof mapStateToProps> & typeof mapDispatch;
153
154

export default compose(
Maksym Tishchenko's avatar
Maksym Tishchenko committed
155
  connect(mapStateToProps, mapDispatch),
156
157
  withTranslation(),
)(withBrowsePageBase(BrowsePage));