add USER_LIST variabel apiConst

1 year ago · cb9e192815
1 changed files with 141 additions and 123 deletions
--- a/src/views/Master/MasterBroadcast/DialogDetail.js
+++ b/src/views/Master/MasterBroadcast/DialogDetail.js
@ -1,123 +1,141 @@
-import 'antd/dist/antd.css';
-import React, { Component } from 'react';
-import moment from 'moment';
-import { Button, Table, FormFeedback, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
-import Select from 'react-select';
-import axios from 'axios';
-import { BASE_SIMPRO_LUMEN, BASE_URL_GEOHR_API } from '../../../const/ApiConst';
-import { Transfer } from 'antd';
-import { withTranslation } from 'react-i18next';
-const token = window.localStorage.getItem('token');
-const config = {
-  headers:
-  {
-    Authorization: `Bearer ${token}`,
-    "Content-type": `application/json`
-  }
-};
-const ERROR_TITLE = "judul is required!"
-const ERROR_MESSAGE = "message is required!"
-const BASE_URL = "https://oslog.id/geohr-api/";
-let countError = 0;
-class DialogDetail extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      openDialog: false,
-      isParentClick: false,
-      dataListDetail: [],
-      id: 0,
-    }
-  }
-
-  async componentDidMount() {
-    this.props.showDialog(this.showDialog);
-  }
-
-  async componentDidUpdate() {
-    if (this.state.isParentClick === true) {
-      const { dataDetail } = this.props
-      console.log("cek data detail", dataDetail)
-      this.setState({
-        id: dataDetail.id
-      }, () => {
-        this.getDataDetail();
-        this.setState({ isParentClick: false });
-      });
-    }
-  }
-
-  getDataDetail = async () => {
-    countError++;
-    let url = BASE_SIMPRO_LUMEN + `/broadcast/search`;
-    const payload = {
-      "paging": { "start": 0, "length": 25 },
-      "orders": { "columns": ["id"], "ascending": true },
-      "columns": [
-        { "name": "id", "logic_operator": "=", "value": this.state.id, "operator": "AND" }
-      ]
-    }
-    const result = await axios
-      .post(url, payload, config)
-      .then(res => res)
-      .catch((error) => error.response);
-    console.log('cek data detail', result.data)
-
-    if (result && result.data && result.data.code === 200) {
-      if (result.data.data && result.data.data) {
-        this.setState({ dataListDetail: result.data.data })
-      }
-    } else {
-      if (countError < 6) {
-        this.getDataDetail();
-      }
-    }
-  }
-
-  showDialog = () => {
-    this.setState({ isParentClick: true });
-  }
-
-  handleCloseDialog = () => {
-    this.props.closeDialog()
-  }
-
-  render() {
-    return (
-      <Modal size="xl" isOpen={this.props.openDialog} toggle={this.props.toggleDialog}>
-        <ModalHeader toggle={this.handleCloseDialog}>{this.props.t('broadcastDetail')}</ModalHeader>
-        <ModalBody>
-          <Table>
-            <thead>
-              <tr>
-                <th>{this.props.t('statusSend')}</th>
-                <th>{this.props.t('dateSend')}</th>
-                <th>{this.props.t('description')}</th>
-                <th>{this.props.t('titleNotification')}</th>
-                <th>{this.props.t('messageNotification')}</th>
-              </tr>
-            </thead>
-            <tbody>
-              {this.state.dataListDetail.map((val, index) => {
-                return (
-                  <tr key={index}>
-                    <td>{val.status_send === "" ? "-" : val.status_send}</td>
-                    <td>{val.created_at === "" ? "-" : moment(val.created_date).format("DD-MM-YYYY HH:mm:ss")}</td>
-                    <td>{val.description === "" ? "-" : val.description}</td>
-                    <td>{val.title_notif === "" ? "-" : val.title_notif}</td>
-                    <td>{val.message_notif === "" ? "-" : val.message_notif}</td>
-                  </tr>
-                )
-              })}
-            </tbody>
-          </Table>
-
-        </ModalBody>
-        <ModalFooter>
-          <Button color="secondary" onClick={this.handleCloseDialog}>{this.props.t('close')}</Button>
-        </ModalFooter>
-      </Modal>
-    )
-  }
-}
-export default withTranslation()(DialogDetail);
+import 'antd/dist/antd.css';
+import React, { Component } from 'react';
+import moment from 'moment';
+import { Button, Table, FormFeedback, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import Select from 'react-select';
+import axios from 'axios';
+import { BASE_SIMPRO_LUMEN, USER_LIST } from '../../../const/ApiConst';
+import { Transfer } from 'antd';
+import { withTranslation } from 'react-i18next';
+const token = window.localStorage.getItem('token');
+const config = {
+  headers:
+  {
+    Authorization: `Bearer ${token}`,
+    "Content-type": `application/json`
+  }
+};
+const ERROR_TITLE = "judul is required!"
+const ERROR_MESSAGE = "message is required!"
+const BASE_URL = "https://oslog.id/geohr-api/";
+let countError = 0;
+class DialogDetail extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      openDialog: false,
+      isParentClick: false,
+      dataListDetail: [],
+      id: 0,
+    }
+  }
+
+  async componentDidMount() {
+    this.props.showDialog(this.showDialog);
+  }
+
+  async componentDidUpdate() {
+    if (this.state.isParentClick === true) {
+      const { dataDetail } = this.props
+      console.log("cek data detail", dataDetail)
+      this.setState({
+        id: dataDetail.id
+      }, () => {
+        this.getDataDetail();
+        this.getDataUsers();
+        this.setState({ isParentClick: false });
+      });
+    }
+  }
+
+  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 }, () => {
+      });
+    }
+  }
+
+  getDataDetail = async () => {
+    countError++;
+    let url = BASE_SIMPRO_LUMEN + `/broadcast/search`;
+    const payload = {
+      "paging": { "start": 0, "length": 25 },
+      "orders": { "columns": ["id"], "ascending": true },
+      "columns": [
+        { "name": "id", "logic_operator": "=", "value": this.state.id, "operator": "AND" }
+      ]
+    }
+    const result = await axios
+      .post(url, payload, config)
+      .then(res => res)
+      .catch((error) => error.response);
+    console.log('cek data detail', result.data)
+
+    if (result && result.data && result.data.code === 200) {
+      if (result.data.data && result.data.data) {
+        this.setState({ dataListDetail: result.data.data })
+      }
+    } else {
+      if (countError < 6) {
+        this.getDataDetail();
+        this.getDataUsers();
+      }
+    }
+  }
+
+  showDialog = () => {
+    this.setState({ isParentClick: true });
+  }
+
+  handleCloseDialog = () => {
+    this.props.closeDialog()
+  }
+  render() {
+    const dataUser = this.state.dataUser || [];
+    return (
+      <Modal size="xl" isOpen={this.props.openDialog} toggle={this.props.toggleDialog}>
+        <ModalHeader toggle={this.handleCloseDialog}>{this.props.t('broadcastDetail')}</ModalHeader>
+        <ModalBody>
+          <Table>
+            <thead>
+              <tr>
+                <th>{this.props.t('statusSend')}</th>
+                <th>{this.props.t('dateSend')}</th>
+                <th>{this.props.t('description')}</th>
+                <th>{this.props.t('receiver')}</th>
+                <th>{this.props.t('titleNotification')}</th>
+                <th>{this.props.t('messageNotification')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {this.state.dataListDetail.map((val, index) => {
+                const matchedUser = dataUser.find(item => item.id == val.send_to_id);
+                return (
+                  <tr key={index}>
+                    <td>{val.status_send === "" ? "-" : val.status_send}</td>
+                    <td>{val.created_at === "" ? "-" : moment(val.created_date).format("DD-MM-YYYY HH:mm:ss")}</td>
+                    <td>{val.description === "" ? "-" : val.description}</td>
+                    <td>{ matchedUser ? matchedUser.name : "-" }</td>
+                    <td>{val.title_notif === "" ? "-" : val.title_notif}</td>
+                    <td>{val.message_notif === "" ? "-" : val.message_notif}</td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </Table>
+
+        </ModalBody>
+        <ModalFooter>
+          <Button color="secondary" onClick={this.handleCloseDialog}>{this.props.t('close')}</Button>
+        </ModalFooter>
+      </Modal>
+    )
+  }
+}
+export default withTranslation()(DialogDetail);