From 4c6025ebf27c870fdd800d656341bc5ccb67c199 Mon Sep 17 00:00:00 2001 From: farhantock Date: Wed, 28 Feb 2024 16:03:33 +0700 Subject: [PATCH] contact sales page --- src/views/SimproV2/SalesContact/DialogForm.js | 201 ++++++++++ src/views/SimproV2/SalesContact/index.js | 374 ++++++++++++++++++ 2 files changed, 575 insertions(+) create mode 100644 src/views/SimproV2/SalesContact/DialogForm.js create mode 100644 src/views/SimproV2/SalesContact/index.js diff --git a/src/views/SimproV2/SalesContact/DialogForm.js b/src/views/SimproV2/SalesContact/DialogForm.js new file mode 100644 index 0000000..da508d4 --- /dev/null +++ b/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 ( +
+ + + * Wajib diisi. + + + + + + + setName(e.target.value)} + placeholder={t('inputName')} + /> + + + + + + setEmail(e.target.value)} + placeholder={t('inputEmail')} + /> + + + + + + + + setName(e.target.value)} + placeholder={t('inputNoPhone')} + /> + + + + + + setRole(e.target.value)} + placeholder={t('inputRole')} + /> + + + + + + + + + + + + + + + + setMessage(e.target.value)} placeholder={t('inputMessage')} /> + + + +
+ ) + } + + + return ( + <> + + {typeDialog == "Save" ? `Add` : "Edit"} {t('Demo')} + + {renderForm()} + + + {' '} + + + + + ) + +} + +export default DialogForm; diff --git a/src/views/SimproV2/SalesContact/index.js b/src/views/SimproV2/SalesContact/index.js new file mode 100644 index 0000000..a1a3754 --- /dev/null +++ b/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 ( + + {t('noData')} + + ) + } + } + + return ( +
+ + + {t('deleteMsg')} + + toggleAddDialog} + typeDialog={typeDialog} + dataEdit={dataEdit} + clickOpenModal={clickOpenModal} + dataParent={allDataMenu} + /> + + +

{pageName}

+ + + + + + + + + + + + + + + + + + + + + {column.map((i, index) => { + return ( + + ) + })} + + + + {dataNotAvailable()} + {dataTable.map((n, index) => { + return ( + + + + + + + + + + + ) + })} + +
Aksi{i.name}
+ + handleDelete(n.id)}> + + + handleEdit(n)}> + + {n.name}{n.company_name}{n.email}{n.role}{n.number_phone}{n.status}{n.message}
+ + + +
+ ) +} + +export default ProjectType;