fix search table, export excel, view detail data table

src/views/Master/MasterBroadcast/index.js

@@ -5,7 +5,7 @@ import React, { Component } from 'react';
 import SweetAlert from 'react-bootstrap-sweetalert';
 import axios from 'axios';
 import moment from 'moment';
-import { API_BROADCAST_SIMPRO, BASE_SIMPRO, BASE_SIMPRO_LUMEN, BASE_URL_GEOHR_API2 } from '../../../const/ApiConst';
+import { USER_LIST, BASE_SIMPRO_LUMEN } from '../../../const/ApiConst';
 import { Button, Card, CardBody, CardHeader, DropdownItem, DropdownMenu, DropdownToggle, Input, InputGroup, InputGroupButtonDropdown, Table, Row, Col } from 'reactstrap';
 import { DatePicker, Pagination } from 'antd';
 import { NotificationContainer, NotificationManager } from 'react-notifications';
@@ -51,7 +51,7 @@ class index extends Component {
       page: 0,
       rowsPerPage: LENGTH_DATA,
       search: "",
-      searchDetail: "Judul",
+      searchDetail: "Title",
       searchDetailField: "title_notif",
       splitButtonOpen: false,
       startDate: moment(moment().format("YYYY-M-D")),
@@ -84,17 +84,29 @@ class index extends Component {
     this.setState({ search: value, currentPage: 1 })
   };
 
+  getDataUsers = async () => {
+    const result = await axios
+      .get(USER_LIST, config)
+      .then(res => res)
+      .catch((error) => error.response);
+    console.log('Get Data User', result)
+
+    if (result && result.data && result.status == 200) {
+      this.setState({ dataUser: result.data.data }, () => {
+      });
+    }
+  }
+
   getDataBroadcast = async () => {
     let url = BASE_SIMPRO_LUMEN + `/broadcast/search`;
-    const { searchDetail } = this.state
+    const { searchDetailField, search, currentPage, rowsPerPage, startDate, endDate } = this.state
-
     let start = 0;
-    if (this.state.currentPage !== 1 && this.state.currentPage > 1) {
+    if (currentPage !== 1 && currentPage > 1) {
-      start = (this.state.currentPage * this.state.rowsPerPage) - this.state.rowsPerPage
+      start = (currentPage * rowsPerPage) - rowsPerPage
     }
 
-    let dateStart = moment(this.state.startDate).format("YYYY-MM-DD 00:00:00");
+    let dateStart = moment(startDate).format("YYYY-MM-DD 00:00:00");
-    let dateEnd = moment(this.state.endDate).format("YYYY-MM-DD 23:59:59");
+    let dateEnd = moment(endDate).format("YYYY-MM-DD 23:59:59");
 
     const payload = {
       "columns": [
@@ -107,9 +119,9 @@ class index extends Component {
         },
         {
           "logic_operator": "ilike",
-          "name": "title_notif",
+          "name": searchDetailField,
           "operator": "AND",
-          "value": ""
+          "value": search
         }
       ],
       "orders": {
@@ -134,6 +146,7 @@ class index extends Component {
     if (result && result.data) {
       if (result.data.code === 200) {
         this.setState({ dataTable: result.data.data, totalPage: result.data.totalRecord });
+        this.getDataUsers()
       } else {
         NotificationManager.error('Failed retreiving data!!', 'Failed');
       }
@@ -161,7 +174,7 @@ class index extends Component {
 
   onConfirmBroadcast = async () => {
     const { idSend, statusSend } = this.state
-    let url = `${API_BROADCAST_SIMPRO}/edit-status-send/${idSend}`;
+    let url = BASE_SIMPRO_LUMEN + `/broadcast/update/${idSend}`;
     let payload = {
       "status_send": statusSend
     }
@@ -311,50 +324,15 @@ class index extends Component {
   }
 
   handleExportExcel = async () => {
-    let url = BASE_SIMPRO + `/broadcast.php?act=get_data&role_name=${roleName}`;
+    const dataExcel = this.state.dataTable || [];
-    const { searchDetail } = this.state
+    const dataUser = this.state.dataUser || [];
-
-    let start = 0;
-    if (this.state.currentPage !== 1) {
-      start = (this.state.currentPage * this.state.rowsPerPage) - this.state.rowsPerPage
-    }
-
-    let dateStart = this.state.startDate;
-    let dateEnd = this.state.endDate;
-
-    const formData = new FormData();
-    formData.append("startDate", dateStart.format("YYYY-M-D") + " 00:00:00");
-    formData.append("endDate", dateEnd.format("YYYY-M-D") + " 23:59:59");
-    formData.append('field', this.state.searchDetailField);
-    formData.append("start", start);
-    formData.append("length", "all");
-    if (this.state.search !== "" && this.state.search !== null) {
-      formData.append('value', this.state.search);
-    }
-
-    const result = await axios
-      .post(url, formData)
-      .then(res => res)
-      .catch((error) => error.response);
-    if (result && result.data) {
-      if (result.data.code_status === 200) {
-        this.setState({ dataExport: result.data.data }, () => {
-          this.exportExcel();
-        });
-      } else {
-      }
-    } else {
-    }
-  }
-
-  exportExcel = () => {
-    const dataExcel = this.state.dataExport || [];
     const dataExport = [];
     dataExcel.map((val) => {
+      const matchedUser = dataUser.find(item => item.id == val.send_to_id);
       let row = {
-        "Tanggal Broadcast": moment(val.created_date).format("YYYY-MM-DD HH:mm:ss"),
+        "Tanggal Broadcast": moment(val.created_at).format("YYYY-MM-DD HH:mm:ss"),
-        "Penerima": val.employee_name,
         "Judul": val.title_notif,
+        "Penerima": matchedUser ? matchedUser.name : "-",
         "Pesan": val.message_notif,
         "Deskripsi": val.description,
         "Status": val.status_send
@@ -415,19 +393,22 @@ class index extends Component {
       { name: this.props.t('title') },
       { name: this.props.t('message') },
       { name: this.props.t('description') },
+      { name: this.props.t('receiver') },
       { name: "Status" },
       { name: this.props.t('date') },
     ]
-    const t = this.props
     const dataTable2 = this.state.dataTable || [];
+    const dataUser = this.state.dataUser || [];
+
     return (
       <tbody>
         {dataTable2.length !== 0 ? dataTable2.map((n) => {
-          return (
+            const matchedUser = dataUser.find(item => item.id == n.send_to_id);
-            <tr key={n.id}>
+            return (
-              <td width={93}>
+              <tr key={n.id}>
+                <td width={93}>
                 <Row>
-                  {n.status_send === 'completed' || n.status_send === 'failed' || n.status_send === 'send' ?
+                  {n.status_send === 'completed' || n.status_send === 'failed' || n.status_send === 'send' || n.status_send === 'resend' ?
                     this.renderBtnResend(n.id) :
                     this.renderBtnSend(n.id)
                   }
@@ -437,16 +418,15 @@ class index extends Component {
                       Detail
                     </Tooltip>
                   </Col>
-                </Row>
+                </Row>                </td>
-              </td>
+                <td>{n.title_notif}</td>
-
+                <td>{n.message_notif !== "" ? n.message_notif : "-"}</td>
-              <td>{n.title_notif}</td>
+                <td>{n.description !== "" ? n.description : "-"}</td>
-              <td>{n.message_notif !== "" ? n.message_notif : "-"}</td>
+                <td>{ matchedUser ? matchedUser.name : "-" }</td>
-              <td>{n.description !== "" ? n.description : "-"}</td>
+                <td>{n.status_send !== "" ? n.status_send : "-"}</td>
-              <td>{n.status_send !== "" ? n.status_send : "-"}</td>
+                <td>{n.created_at !== "" ? moment.utc(n.created_at).format("DD-MM-YYYY HH:mm:ss") : "-"}</td>
-              <td>{n.created_date !== "" ? moment.utc(n.created_date).format("DD-MM-YYYY HH:mm:ss") : "-"}</td>
+              </tr>
-            </tr>
+            );
-          )
         }) : <tr>
           <td colSpan={column.length} align="center">{this.props.t('noData')}</td>
         </tr>
@@ -504,6 +484,7 @@ class index extends Component {
       { name: this.props.t('title') },
       { name: this.props.t('message') },
       { name: this.props.t('description') },
+      { name: this.props.t('receiver') },
       { name: "Status" },
       { name: this.props.t('date') },
     ]
@@ -553,7 +534,7 @@ class index extends Component {
                   {this.props.t('broadcastAdd')}
                 </Tooltip>
                 <Tooltip placement="right" isOpen={tooltipExport} target="TooltipExport" toggle={() => this.toggle("export")}>
-                  {this.props.t('exprotExcel')}
+                  {this.props.t('exportExcel')}
                 </Tooltip>
               </Col>
             </Row>
@@ -570,7 +551,7 @@ class index extends Component {
                 </div>
                 <div style={{}}>
                   <RangePicker format={"DD-MM-YYYY"} size="default" allowClear={false} value={[this.state.startDate, this.state.endDate]} onChange={this.handleDatePicker} />{' '}
-                  <Button color="primary" onClick={() => this.getDataPanicButton()}>{this.props.t('search')}</Button>
+                  <Button color="primary" onClick={() => this.getDataBroadcast()}>{this.props.t('search')}</Button>
                 </div>
               </div>
               <InputGroup style={{ maxWidth: "200px" }}>