contact sales page

src/views/SimproV2/SalesContact/DialogForm.js

@@ -0,0 +1,201 @@
+import React, { useEffect, useState } from 'react'
+import {
+    Modal, ModalHeader, ModalBody, ModalFooter,
+    Button, Form, FormGroup, Label, Input, Col, Row
+} from 'reactstrap';
+import { Select } from 'antd';
+import 'antd/dist/antd.css';
+import { useTranslation } from 'react-i18next';
+import "rc-color-picker/assets/index.css";
+const { Option } = Select
+const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit }) => {
+    const [id, setId] = useState(0)
+    const [name, setName] = useState('')
+    const [email, setEmail] = useState('')
+    const [message, setMessage] = useState('')
+    const [phoneNumber, setPhoneNumber] = useState('')
+    const [role, setRole] = useState(null)
+    const [status, setStatus] = useState('')
+    const { t } = useTranslation()
+
+    useEffect(() => {
+        if (typeDialog === "Edit") {
+            setId(dataEdit.id)
+            setName(dataEdit.name)
+            setEmail(dataEdit.email)
+            setMessage(dataEdit.message)
+            setPhoneNumber(dataEdit.number_phone)
+            setStatus(dataEdit.status)
+            setRole(dataEdit.role)
+        } else {
+            setId(0)
+            setName('')
+            setEmail('')
+            setMessage('')
+            setStatus('')
+            setRole('')
+            setPhoneNumber('')
+        }
+    }, [dataEdit, openDialog])
+
+    const validation = () => {
+        if (!name || name === "") {
+            alert("Name cannot be empty!");
+            return true;
+        }
+    }
+    const handleSave = () => {
+        let data = '';
+        const err = validation();
+
+        if (!err) {
+            if (typeDialog === "Save") {
+                data = {
+                    name,
+                    email,
+                    message,
+                    number_phone: phoneNumber,
+                    role,
+                    status
+                }
+                closeDialog('save', data);
+            } else {
+                data = {
+                    id,
+                    name,
+                    email,
+                    message,
+                    number_phone: phoneNumber,
+                    role,
+                    status
+                }
+                closeDialog('edit', data);
+            }
+            setId(0)
+            setName('')
+        }
+    }
+    const handleCancel = () => {
+        closeDialog('cancel', 'none')
+        setId(0)
+        setName('')
+    }
+    const onChangeStatus = (val) => {
+        setStatus(val)
+    }
+
+
+    const renderForm = () => {
+        return (
+            <Form>
+                <Row>
+                    <Col md={12}>
+                        <span style={{ color: "red" }}>*</span> Wajib diisi.
+                    </Col>
+                </Row>
+                <Row>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">{t('name')}<span style={{ color: "red" }}>*</span></Label>
+                            <Input
+                                type="text"
+                                value={name}
+                                onChange={(e) => setName(e.target.value)}
+                                placeholder={t('inputName')}
+                            />
+                        </FormGroup>
+                    </Col>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">{t('email')}<span style={{ color: "red" }}>*</span></Label>
+                            <Input
+                                type="text"
+                                value={email}
+                                onChange={(e) => setEmail(e.target.value)}
+                                placeholder={t('inputEmail')}
+                            />
+                        </FormGroup>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">{t('phoneNumber')}<span style={{ color: "red" }}>*</span></Label>
+                            <Input
+                                type="text"
+                                value={phoneNumber}
+                                onChange={(e) => setName(e.target.value)}
+                                placeholder={t('inputNoPhone')}
+                            />
+                        </FormGroup>
+                    </Col>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">{t('role')}<span style={{ color: "red" }}>*</span></Label>
+                            <Input
+                                type="text"
+                                value={role}
+                                onChange={(e) => setRole(e.target.value)}
+                                placeholder={t('inputRole')}
+                            />
+                        </FormGroup>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col md={12}>
+                        <FormGroup>
+                            <Label className="capitalize">
+                                {t('status')}<span style={{ color: "red" }}>*</span>
+                            </Label>
+                            <Select
+                                showSearch
+                                filterOption={(inputValue, option) =>
+                                    option.children.toLowerCase().includes(inputValue.toLowerCase())
+                                }
+                                value={status}
+                                defaultValue={status}
+                                onChange={onChangeStatus}
+                                style={{ width: "100%" }}
+                            >
+                                <Option value="New Contact">New Contact</Option>
+                                <Option value="Presentation">Presentation</Option>
+                                <Option value="Live Demo">Live Demo</Option>
+                                <Option value="Trial">Trial</Option>
+                                <Option value="Go-Live">Go-Live</Option>
+                                <Option value="Postpone">Postpone</Option>
+
+                            </Select>
+                        </FormGroup>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col md={12}>
+                        <FormGroup>
+                            <Label className="capitalize">{t('message')}</Label>
+                            <Input row="4" type="textarea" value={message} onChange={(e) => setMessage(e.target.value)} placeholder={t('inputMessage')} />
+                        </FormGroup>
+                    </Col>
+                </Row>
+            </Form>
+        )
+    }
+
+
+    return (
+        <>
+            <Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>
+                <ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} {t('Demo')}</ModalHeader>
+                <ModalBody>
+                    {renderForm()}
+                </ModalBody>
+                <ModalFooter>
+                    <Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '}
+                    <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>{t('cancel')}</Button>
+                </ModalFooter>
+            </Modal>
+        </>
+    )
+
+}
+
+export default DialogForm;

src/views/SimproV2/SalesContact/index.js

@@ -0,0 +1,374 @@
+import * as XLSX from 'xlsx';
+import DialogForm from './DialogForm';
+import React, { useState, useEffect } from 'react';
+import SweetAlert from 'react-bootstrap-sweetalert';
+import axios from "../../../const/interceptorApi"
+import { Card, CardBody, CardHeader, Col, Row, Input, Table } from 'reactstrap';
+import { SALES_CONTACT_EDIT, SALES_CONTACT_SEARCH, SALES_CONTACT_LIST, SALES_CONTACT_GET_ID, SALES_CONTACT_ADD, SALES_CONTACT_DELETE } from '../../../const/ApiConst';
+import { NotificationContainer, NotificationManager } from 'react-notifications';
+import { Spin, Button, Tooltip } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+
+const ProjectType = ({ params, ...props }) => {
+    let role_id = 0, user_id = 0, isLogin = false, token = '', company_id = 0, all_project = null, role_name = '', hierarchy = [], user_name = '';
+    if (props && props.role_id && props.user_id) {
+        role_id = props.role_id;
+        user_id = props.user_id;
+        token = props.token;
+        isLogin = props.isLogin;
+        company_id = props.company_id;
+        all_project = props.all_project;
+        role_name = props.role_name;
+        isLogin = props.isLogin;
+        hierarchy = props.hierarchy;
+        user_name = props.user_name;
+    }
+
+    const HEADER = {
+        headers: {
+            "Content-Type": "application/json",
+            "Authorization": `Bearer ${token}`
+        }
+    }
+    const pageName = params.name;
+
+    const [alertDelete, setAlertDelete] = useState(false)
+    const [allDataMenu, setAllDataMenu] = useState([])
+    const [clickOpenModal, setClickOpenModal] = useState(false)
+    const [currentPage, setCurrentPage] = useState(1)
+    const [dataEdit, setDataEdit] = useState([])
+    const [dataExport, setDataExport] = useState([])
+    const [dataTable, setDatatable] = useState([])
+    const [idDelete, setIdDelete] = useState(0)
+    const [openDialog, setOpenDialog] = useState(false)
+    const [rowsPerPage, setRowsPerPage] = useState(10)
+    const [search, setSearch] = useState("")
+    const [totalPage, setTotalPage] = useState(0)
+    const [typeDialog, setTypeDialog] = useState('Save')
+    const [dataDemo, setDataDemo] = useState([])
+    const [listCompany, setListCompany] = useState([])
+    const [loading, setLoading] = useState(true);
+    const { t } = useTranslation()
+    const column = [
+        { name: t('name') },
+        { name: t('company') },
+        { name: t('email') },
+        { name: t('roles') },
+        { name: t('phoneNumber') },
+        { name: t('status') },
+        { name: t('description') },
+    ].filter(column => column && column.name);
+    useEffect(() => {
+        getDataContactSales();
+    }, [currentPage, rowsPerPage, search])
+
+    useEffect(() => {
+        const cekData = dataExport || []
+        if (cekData.length > 0) {
+            exportExcel()
+        }
+    }, [dataExport])
+
+    const getDataContactSales = async () => {
+        let start = 0;
+        if (currentPage !== 1 && currentPage > 1) {
+            start = currentPage * rowsPerPage - rowsPerPage;
+        }
+        const payload = {
+            group_column: {
+                "operator": "AND",
+                "group_operator": "OR",
+                "where": [
+                    {
+                        "name": "name",
+                        "logic_operator": "~*",
+                        "value": search,
+                    }
+                ]
+            },
+            columns: [],
+            "orders": {
+                "ascending": true,
+                "columns": [
+                    'id'
+                ]
+            },
+            "paging": {
+                "length": rowsPerPage,
+                "start": start
+            },
+            'joins': []
+        }
+
+        const result = await axios
+            .post(SALES_CONTACT_SEARCH, payload, HEADER)
+            .then(res => res)
+            .catch((error) => error.response);
+
+        if (result && result.data && result.data.code == 200) {
+            setDatatable(result.data.data);
+            setTotalPage(result.data.totalRecord);
+            setLoading(false)
+        } else {
+            NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
+            setLoading(false)
+        }
+    }
+    const handleExportExcel = async () => {
+        let start = 0;
+
+        if (currentPage !== 1 && currentPage > 1) {
+            start = (currentPage * rowsPerPage) - rowsPerPage
+        }
+
+        const payload = {
+            group_column: {
+                "operator": "AND",
+                "group_operator": "OR",
+                "where": [
+                    {
+                        "name": "name",
+                        "logic_operator": "~*",
+                        "value": search,
+                    }
+                ]
+            },
+            "columns": [],
+            "orders": {
+                "ascending": true,
+                "columns": [
+                    'id'
+                ]
+            },
+            "paging": {
+                "length": rowsPerPage,
+                "start": start
+            },
+            'joins': []
+        }
+
+        const result = await axios
+            .post(SALES_CONTACT_SEARCH, payload, HEADER)
+            .then(res => res)
+            .catch((error) => error.response);
+        if (result && result.data && result.data.code == 200) {
+            let resData = result.data.data;
+            const excelData = [];
+            resData.map((val, index) => {
+                let dataRow = {};
+                dataRow["Nama"] = val.name;
+                dataRow["Email"] = val.email;
+                dataRow["Role"] = val.role;
+                dataRow["No Telepon"] = val.number_phone;
+                dataRow["Status"] = val.message;
+                dataRow["Message"] = val.message;
+                excelData.push(dataRow)
+            })
+            await setDataExport(excelData)
+        } else {
+            NotificationManager.error('Gagal Export Data!!', 'Failed');
+        }
+    }
+
+    const exportExcel = () => {
+        const dataExcel = dataExport || [];
+        const fileName = `Data ${pageName}.xlsx`;
+        const ws = XLSX.utils.json_to_sheet(dataExcel);
+        const wb = XLSX.utils.book_new();
+        XLSX.utils.book_append_sheet(wb, ws, `Data ${pageName}`);
+        XLSX.writeFile(wb, fileName);
+        setDataExport([])
+    }
+
+    const handleSearch = e => {
+        const value = e.target.value
+        setSearch(value);
+        setCurrentPage(1)
+    };
+
+    const handleOpenDialog = (type) => {
+        setOpenDialog(true)
+        setTypeDialog(type)
+    }
+
+    const handleEdit = (data) => {
+        setDataEdit(data)
+        handleOpenDialog('Edit');
+    }
+
+    const handleDelete = async (id) => {
+        await setAlertDelete(true)
+        await setIdDelete(id)
+    }
+
+    const handleCloseDialog = (type, data) => {
+        if (type === "save") {
+            saveContactSales(data);
+        } else if (type === "edit") {
+            editContactSales(data);
+        }
+        setDataEdit([])
+        setOpenDialog(false)
+    }
+
+    const saveContactSales = async (data) => {
+        const formData = data
+        const result = await axios.post(SALES_CONTACT_ADD, formData, HEADER)
+            .then(res => res)
+            .catch((error) => error.response);
+        if (result && result.data && result.data.code === 200) {
+            getDataContactSales()
+            NotificationManager.success(`Data berhasil ditambahkan`, 'Success!!');
+        } else {
+            NotificationManager.error(`Data gagal ditambahkan`, 'Failed!!');
+        }
+    }
+
+    const editContactSales = async (data) => {
+        let urlEdit = SALES_CONTACT_EDIT(data.id)
+        const formData = data
+        const result = await axios.put(urlEdit, formData, HEADER)
+            .then(res => res)
+            .catch((error) => error.response);
+        if (result && result.data && result.data.code === 200) {
+            getDataContactSales();
+            NotificationManager.success(`Data berhasil diubah`, 'Success!!');
+        } else {
+            NotificationManager.error(`Data gagal diubah`, `Failed!!`);
+        }
+    }
+
+    const toggleAddDialog = () => {
+        setOpenDialog(!openDialog)
+    }
+
+    const onConfirmDelete = async () => {
+        let url = SALES_CONTACT_DELETE(idDelete);
+        const result = await axios.delete(url, HEADER)
+            .then(res => res)
+            .catch((error) => error.response);
+
+        if (result && result.data && result.data.code === 200) {
+            getDataContactSales()
+            setIdDelete(0)
+            setAlertDelete(false)
+            NotificationManager.success(`Data berhasil dihapus!`, 'Success!!');
+        } else {
+            setIdDelete(0)
+            setAlertDelete(false)
+            NotificationManager.error(`Data gagal dihapus!}`, 'Failed!!');
+        }
+    }
+
+    const cancelDelete = () => {
+        setAlertDelete(false)
+        setIdDelete(0)
+    }
+
+    const onShowSizeChange = (current, pageSize) => {
+        setRowsPerPage(pageSize)
+    }
+
+    const onPagination = (current, pageSize) => {
+        setCurrentPage(current)
+    }
+
+    const dataNotAvailable = () => {
+        if (dataTable.length === 0) {
+            return (
+                <tr>
+                    <td align="center" colSpan="8">{t('noData')}</td>
+                </tr>
+            )
+        }
+    }
+
+    return (
+        <div>
+            <NotificationContainer />
+            <SweetAlert
+                show={alertDelete}
+                warning
+                showCancel
+                confirmBtnText="Delete"
+                confirmBtnBsStyle="danger"
+                title={t('deleteConfirm')}
+                onConfirm={onConfirmDelete}
+                onCancel={cancelDelete}
+                focusCancelBtn
+            >
+                {t('deleteMsg')}
+            </SweetAlert>
+            <DialogForm
+                openDialog={openDialog}
+                closeDialog={handleCloseDialog}
+                toggleDialog={() => toggleAddDialog}
+                typeDialog={typeDialog}
+                dataEdit={dataEdit}
+                clickOpenModal={clickOpenModal}
+                dataParent={allDataMenu}
+            />
+            <Card>
+                <CardHeader style={{ display: "flex", justifyContent: "space-between" }}>
+                    <h4 className="capitalize">{pageName}</h4>
+                    <Row>
+                        <Col>
+                            <Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={t('searchDemo')} />
+                        </Col>
+                        <Col>
+                            <Tooltip title={t('demoAdd')}>
+                                <Button style={{ background: "#4caf50", color: "#fff" }} onClick={() => handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button>
+                            </Tooltip>
+                            <Tooltip title={t('exportExcel')}>
+                                <Button style={{ marginLeft: "5px" }} onClick={() => handleExportExcel()}><i className="fa fa-print"></i></Button>
+                            </Tooltip>
+                        </Col>
+                    </Row>
+                </CardHeader>
+                <CardBody>
+                    <Spin tip="Loading..." spinning={loading}>
+                        <Table responsive striped hover>
+                            <thead>
+                                <tr>
+                                    <th>Aksi</th>
+                                    {column.map((i, index) => {
+                                        return (
+                                            <th key={index} scope="row">{i.name}</th>
+                                        )
+                                    })}
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {dataNotAvailable()}
+                                {dataTable.map((n, index) => {
+                                    return (
+                                        <tr key={n.id}>
+                                            <td className='nowrap'>
+                                                <Tooltip title={t('delete')}>
+                                                    <i id="TooltipDelete" className="fa fa-trash" style={{ color: 'red', marginRight: 10, cursor: "pointer" }} onClick={() => handleDelete(n.id)}></i>
+                                                </Tooltip>
+                                                <Tooltip title={t('edit')}>
+                                                    <i id="TooltipEdit" className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => handleEdit(n)}></i>
+                                                </Tooltip>
+                                            </td>
+                                            <td>{n.name}</td>
+                                            <td>{n.company_name}</td>
+                                            <td>{n.email}</td>
+                                            <td>{n.role}</td>
+                                            <td>{n.number_phone}</td>
+                                            <td>{n.status}</td>
+                                            <td>{n.message}</td>
+                                        </tr>
+                                    )
+                                })}
+                            </tbody>
+                        </Table>
+                    </Spin>
+                </CardBody>
+            </Card>
+        </div>
+    )
+}
+
+export default ProjectType;