ordo
/
surveyor_indonesia_frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

add project comments feature

pull/2/head
ardhi 2 years ago
parent
e471668b8d
commit
f66324d918
2 changed files with 323 additions and 29 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 175
      src/views/Dashboard/DashboardCustomer.js
  2. 177
      src/views/Dashboard/DashboardProject.js

175
src/views/Dashboard/DashboardCustomer.js
Unescape View File

@ -1,12 +1,15 @@
import React, { useEffect, useMemo, useRef, useState } from 'react';
import axios from 'axios'
import { Row, Col } from 'antd';
import { Row, Col, Button, Input } from 'antd';
import { CardDashboard, CardExpenditure, CardScheduleHealthPerDivision } from '../../components/CardDashboard/CardDashboard';
import L from 'leaflet';
import { useParams } from 'react-router-dom';
import '../../assets/css/customscroll.css'
import moment from 'moment';
import { BASE_OSPRO } from '../../const/ApiConst';
import { SendOutlined } from '@ant-design/icons';
import { NotificationContainer, NotificationManager } from 'react-notifications';
const { TextArea } = Input;
const styles = {
cardContainer: { backgroundColor: '#F8F8F8', margin: 2, paddingLeft: 20, paddingRight: 20, paddingTop: 10 },
@ -26,12 +29,13 @@ const DashboardCustomer = () => {
const HEADER = {
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${token}`
Authorization: `Bearer ${token}`
}
}
const { PROJECT_ID, GANTT_ID } = useParams();
// const URL_GANTT = `http://103.73.125.81:8446/index.html?base_url=http://103.73.125.81:8444/api&gantt_id=${GANTT_ID}&proyek_id=${PROJECT_ID}&token=${token}&ro=1`;
const URL_GANTT = `https://adw-gantt.ospro.id/index.html?base_url=${BASE_OSPRO}/api&gantt_id=${GANTT_ID}&proyek_id=${PROJECT_ID}&token=${token}&ro=1`;
// const URL_GANTT = '';
const mapRef = useRef()
const [projectName, setProjectName] = useState("Project Tower ABC");
const [customerName, setCustomerName] = useState("Jaya Gedung Group");
@ -45,11 +49,16 @@ const DashboardCustomer = () => {
const [activeTabCommentIdx, setActiveTabCommentIdx] = useState(0);
const [planningProgress, setPlanningProgress] = useState(79);
const [actualProgress, setActualProgress] = useState(50);
const [comment, setComment] = useState('');
const [comments, setComments] = useState([]);
const [isReadyComments, setIsReadyComments] = useState(false);
const [isSendingComment, setIsSendingComment] = useState(false);
const [behindTasks, setBehindTasks] = useState([]);
useEffect(() => {
console.log('URL_GANTT', URL_GANTT);
// console.log('URL_GANTT', URL_GANTT);
getComments();
getBehindTasks();
return () => {
console.log('unmount RenderMap');
}
@ -61,6 +70,105 @@ const DashboardCustomer = () => {
}
}, [activeTabIdx]);
const getComments = async () => {
setIsReadyComments(false);
const URL = `${BASE_OSPRO}/api/project-comment/search`;
const payload = {
columns: [
{
name: "project_id",
logic_operator: "=",
value: PROJECT_ID.toString(),
operator: "AND",
},
],
joins: [
{
name: "m_users",
column_join: "sender_id",
column_results: ["name", "username"],
}
],
orders: { columns: ["created_at"], ascending: false },
paging: { start: 0, length: -1 },
};
const result = await axios.post(URL, payload, HEADER).then(res => res).catch(err => err.response)
console.log('getComments', result);
if (!result) {
NotificationManager.error(`Could not connect to internet.`, "Failed");
setIsReadyComments(true);
return;
}
if (result.status !== 200) {
NotificationManager.error(`Post comment failed, ${result.data.message}`, "Failed");
setIsReadyComments(true);
return;
}
else if (result.status == 200 && result.data.data) {
console.log(result.data.data);
setComments(result.data.data);
setIsReadyComments(true);
}
}
const handleSendComment = async () => {
console.log('handleSendComment', comment);
setIsSendingComment(true);
if (comment === '') {
NotificationManager.error("Please leave a comment before you send it.", "Failed");
setIsSendingComment(false);
return;
}
const URL = `${BASE_OSPRO}/api/project-comment/add`;
const payload = {
"sender_id": localStorage.getItem('user_id'),
"project_id": PROJECT_ID,
"comment": comment
}
const result = await axios.post(URL, payload, HEADER).then(res => res).catch(err => err.response)
if (!result) {
NotificationManager.error(`Could not connect to internet.`, "Failed");
setIsSendingComment(false);
return;
}
if (result.status !== 200) {
NotificationManager.error(`Post comment failed, ${result.data.message}`, "Failed");
setIsSendingComment(false);
return;
}
else if (result.status === 200) {
NotificationManager.success(`Post comment success`, "Success");
resetInputComment();
getComments();
}
}
const resetInputComment = () => {
setComment('');
setIsSendingComment(false);
}
const getBehindTasks = () => {
setBehindTasks([
{
id: 1,
name: "Tom",
message: "Overdue by 5 days",
division: "IT"
},
{
id: 1,
name: "Jerry",
message: "Overdue by 3 days",
division: "Finance"
}
])
}
const initMap = () => {
let mymap = L.map('map-area', {
center: center,
@ -86,16 +194,56 @@ const DashboardCustomer = () => {
></iframe>
), [activeTabIdx])
const Comment = ({name, division, message}) => (
const Comment = ({name, comment, created_at}) => (
<div style={{backgroundColor: '#EEEEEE', border: 'solid', borderWidth: 1, borderColor: '#DDDDDD', padding: 5, marginBottom: 5, marginRight: 2, marginLeft: 2}}>
<div style={{fontWeight: 'bold'}}>{name}</div>
<div>{division}</div>
<div style={{color: '#E80053', textAlign: 'right', fontWeight: 500, fontSize: 12}}>{message}</div>
<div style={{color: '#E80053', fontWeight: 100, fontSize: 10}}>{created_at ? moment(created_at).format('D MMMM YYYY HH:mm:ss') : '-'}</div>
<div>{comment}</div>
</div>
)
const BehindTaskItem = ({name, message, division}) => (
<div style={{backgroundColor: '#EEEEEE', border: 'solid', borderWidth: 1, borderColor: '#DDDDDD', padding: 5, marginBottom: 5, marginRight: 2, marginLeft: 2}}>
<div style={{fontWeight: 'bold'}}>{name}</div>
<div>{message}</div>
<div style={{color: '#E80053', textAlign: 'right', fontWeight: 500, fontSize: 12}}>{division}</div>
</div>
)
const RenderComments = useMemo(() => {
return (
<>
<div style={{padding: 5, marginBottom: 5, marginRight: 2, marginLeft: 2}}>
<TextArea value={comment} onChange={(e) => setComment(e.target.value)} rows={3} placeholder="Write comment here" disabled={isSendingComment} />
<div style={{float: 'right', marginTop: -40, marginRight: 10}}>
<Button title='Send' type="primary" shape="circle" icon={<SendOutlined />} size={20} onClick={handleSendComment} disabled={isSendingComment} />
</div>
</div>
<div>
{!isReadyComments && <div style={{color: 'grey', flex: 1, textAlign: 'center', marginTop: 50, marginBottom: 50}}>Loading comments...</div>}
{isReadyComments && comments && comments.length < 1 && <div style={{flex: 1, textAlign: 'center', color: '#E80053', marginTop: 50, marginBottom: 50}}>No comments found.</div>}
{comments && comments.length > 0 && comments.map((item, idx) =>
<Comment key={idx} name={item.join_first_name} comment={item.comment} created_at={item.created_at} />
)}
</div>
</>
)
}, [comment, comments, isSendingComment, isReadyComments])
const RenderBehindTasks = useMemo(() => {
return (
<div>
{behindTasks && behindTasks.length < 1 && <div style={{flex: 1, textAlign: 'center', color: '#E80053', marginTop: 50, marginBottom: 50}}>No behind task found.</div>}
{behindTasks && behindTasks.length > 0 && behindTasks.map((item, idx) =>
<BehindTaskItem key={idx} name={item.name} message={item.message} division={item.division} />
)}
</div>
)
}, [behindTasks])
return (
<div style={{ marginLeft: -25, marginRight: -25 }}>
<NotificationContainer />
<Row>
<Col span={18}>
<Row>
@ -177,7 +325,9 @@ const DashboardCustomer = () => {
<Row>
<Col span={24}>
<div style={{maxHeight: '57vh'}}>
{ activeTabIdx === 0 && <div style={{height: '56vh', width: '100%'}}>{RenderGantt}</div> }
{/* { activeTabIdx === 0 && <div style={{height: '56vh', width: '100%'}}>{RenderGantt}</div> }
{ activeTabIdx === 1 && <div id="map-area" style={{height: '56vh'}} ref={mapRef}></div> } */}
<div style={{height: '56vh', width: '100%', display: activeTabIdx === 0 ? 'block' : 'none'}}>{RenderGantt}</div>
{ activeTabIdx === 1 && <div id="map-area" style={{height: '56vh'}} ref={mapRef}></div> }
</div>
</Col>
@ -225,11 +375,8 @@ const DashboardCustomer = () => {
</Col>
</Row>
<div className='custom-scroll' style={{maxHeight: '52vh', overflow: 'auto'}}>
<Comment name="Dani" division="Interior Office" message="Overdue by 3 days"/>
<Comment name="Roland" division="Interior Office" message="Overdue by 3 days"/>
<Comment name="John" division="Interior Office" message="Overdue by 3 days"/>
<Comment name="Logan" division="Interior Office" message="Overdue by 3 days"/>
<Comment name="Doe" division="Interior Office" message="Overdue by 3 days"/>
{activeTabCommentIdx === 0 && RenderBehindTasks}
{activeTabCommentIdx === 1 && RenderComments}
</div>
</div>
</Col>

177
src/views/Dashboard/DashboardProject.js
Unescape View File

@ -1,6 +1,6 @@
import React, { useEffect, useMemo, useRef, useState } from 'react';
import axios from 'axios'
import { Row, Col } from 'antd';
import { Row, Col, Button, Input } from 'antd';
import { CardDashboard, CardExpenditure, CardScheduleHealthPerDivision } from '../../components/CardDashboard/CardDashboard';
import L from 'leaflet';
import { useParams } from 'react-router-dom';
@ -8,6 +8,9 @@ import '../../assets/css/customscroll.css'
import moment from 'moment';
import { renderFormatRupiah } from '../../const/CustomFunc';
import { BASE_OSPRO } from '../../const/ApiConst';
import { SendOutlined } from '@ant-design/icons';
import { NotificationContainer, NotificationManager } from 'react-notifications';
const { TextArea } = Input;
const styles = {
cardContainer: { backgroundColor: '#F8F8F8', margin: 2, paddingLeft: 20, paddingRight: 20, paddingTop: 10 },
@ -57,11 +60,16 @@ const DashboardProject = () => {
const [totalInvoice, setTotalInvoice] = useState("10000000000");
const [cashIn, setCashIn] = useState("8000000000");
const [outstandingBalance, setOutstandingBalance] = useState("2000000000");
const [comment, setComment] = useState('');
const [comments, setComments] = useState([]);
const [isReadyComments, setIsReadyComments] = useState(false);
const [isSendingComment, setIsSendingComment] = useState(false);
const [behindTasks, setBehindTasks] = useState([]);
useEffect(() => {
console.log('URL_GANTT', URL_GANTT);
// console.log('URL_GANTT', URL_GANTT);
getComments();
getBehindTasks();
return () => {
console.log('unmount RenderMap');
}
@ -73,11 +81,111 @@ const DashboardProject = () => {
}
}, [activeTabIdx]);
const getComments = async () => {
setIsReadyComments(false);
const URL = `${BASE_OSPRO}/api/project-comment/search`;
const payload = {
columns: [
{
name: "project_id",
logic_operator: "=",
value: PROJECT_ID.toString(),
operator: "AND",
},
],
joins: [
{
name: "m_users",
column_join: "sender_id",
column_results: ["name", "username"],
}
],
orders: { columns: ["created_at"], ascending: false },
paging: { start: 0, length: -1 },
};
const result = await axios.post(URL, payload, HEADER).then(res => res).catch(err => err.response)
console.log('getComments', result);
if (!result) {
NotificationManager.error(`Could not connect to internet.`, "Failed");
setIsReadyComments(true);
return;
}
if (result.status !== 200) {
NotificationManager.error(`Post comment failed, ${result.data.message}`, "Failed");
setIsReadyComments(true);
return;
}
else if (result.status == 200 && result.data.data) {
console.log(result.data.data);
setComments(result.data.data);
setIsReadyComments(true);
}
}
const handleSendComment = async () => {
console.log('handleSendComment', comment);
setIsSendingComment(true);
if (comment === '') {
NotificationManager.error("Please leave a comment before you send it.", "Failed");
setIsSendingComment(false);
return;
}
const URL = `${BASE_OSPRO}/api/project-comment/add`;
const payload = {
"sender_id": localStorage.getItem('user_id'),
"project_id": PROJECT_ID,
"comment": comment
}
const result = await axios.post(URL, payload, HEADER).then(res => res).catch(err => err.response)
if (!result) {
NotificationManager.error(`Could not connect to internet.`, "Failed");
setIsSendingComment(false);
return;
}
if (result.status !== 200) {
NotificationManager.error(`Post comment failed, ${result.data.message}`, "Failed");
setIsSendingComment(false);
return;
}
else if (result.status === 200) {
NotificationManager.success(`Post comment success`, "Success");
resetInputComment();
getComments();
}
}
const resetInputComment = () => {
setComment('');
setIsSendingComment(false);
}
const getBehindTasks = () => {
setBehindTasks([
{
id: 1,
name: "Tom",
message: "Overdue by 5 days",
division: "IT"
},
{
id: 1,
name: "Jerry",
message: "Overdue by 3 days",
division: "Finance"
}
])
}
const initMap = () => {
let mymap = L.map('map-area', {
center: center,
zoom: 13
})
});
setMymap(mymap);
@ -98,16 +206,56 @@ const DashboardProject = () => {
></iframe>
), [activeTabIdx])
const Comment = ({name, division, message}) => (
const Comment = ({name, comment, created_at}) => (
<div style={{backgroundColor: '#EEEEEE', border: 'solid', borderWidth: 1, borderColor: '#DDDDDD', padding: 5, marginBottom: 5, marginRight: 2, marginLeft: 2}}>
<div style={{fontWeight: 'bold'}}>{name}</div>
<div>{division}</div>
<div style={{color: '#E80053', textAlign: 'right', fontWeight: 500, fontSize: 12}}>{message}</div>
<div style={{color: '#E80053', fontWeight: 100, fontSize: 10}}>{created_at ? moment(created_at).format('D MMMM YYYY HH:mm:ss') : '-'}</div>
<div>{comment}</div>
</div>
)
const BehindTaskItem = ({name, message, division}) => (
<div style={{backgroundColor: '#EEEEEE', border: 'solid', borderWidth: 1, borderColor: '#DDDDDD', padding: 5, marginBottom: 5, marginRight: 2, marginLeft: 2}}>
<div style={{fontWeight: 'bold'}}>{name}</div>
<div>{message}</div>
<div style={{color: '#E80053', textAlign: 'right', fontWeight: 500, fontSize: 12}}>{division}</div>
</div>
)
const RenderComments = useMemo(() => {
return (
<>
<div style={{padding: 5, marginBottom: 5, marginRight: 2, marginLeft: 2}}>
<TextArea value={comment} onChange={(e) => setComment(e.target.value)} rows={3} placeholder="Write comment here" disabled={isSendingComment} />
<div style={{float: 'right', marginTop: -40, marginRight: 10}}>
<Button title='Send' type="primary" shape="circle" icon={<SendOutlined />} size={20} onClick={handleSendComment} disabled={isSendingComment} />
</div>
</div>
<div>
{!isReadyComments && <div style={{color: 'grey', flex: 1, textAlign: 'center', marginTop: 50, marginBottom: 50}}>Loading comments...</div>}
{isReadyComments && comments && comments.length < 1 && <div style={{flex: 1, textAlign: 'center', color: '#E80053', marginTop: 50, marginBottom: 50}}>No comments found.</div>}
{comments && comments.length > 0 && comments.map((item, idx) =>
<Comment key={idx} name={item.join_first_name} comment={item.comment} created_at={item.created_at} />
)}
</div>
</>
)
}, [comment, comments, isSendingComment, isReadyComments])
const RenderBehindTasks = useMemo(() => {
return (
<div>
{behindTasks && behindTasks.length < 1 && <div style={{flex: 1, textAlign: 'center', color: '#E80053', marginTop: 50, marginBottom: 50}}>No behind task found.</div>}
{behindTasks && behindTasks.length > 0 && behindTasks.map((item, idx) =>
<BehindTaskItem key={idx} name={item.name} message={item.message} division={item.division} />
)}
</div>
)
}, [behindTasks])
return (
<div style={{ marginLeft: -25, marginRight: -25 }}>
<NotificationContainer />
<Row>
<Col span={18}>
<Row>
@ -225,8 +373,10 @@ const DashboardProject = () => {
<Row>
<Col span={24}>
<div style={{maxHeight: '55vh'}}>
{ activeTabIdx === 0 && <div style={{height: '52vh', width: '100%'}}>{RenderGantt}</div> }
{ activeTabIdx === 1 && <div id="map-area" style={{height: '52vh'}} ref={mapRef}></div> }
{/* { activeTabIdx === 0 && <div style={{height: '52vh', width: '100%'}}>{RenderGantt}</div> }
{ activeTabIdx === 1 && <div id="map-area" style={{height: '52vh'}} ref={mapRef}></div> } */}
<div style={{height: '56vh', width: '100%', display: activeTabIdx === 0 ? 'block' : 'none'}}>{RenderGantt}</div>
{ activeTabIdx === 1 && <div id="map-area" style={{height: '56vh'}} ref={mapRef}></div> }
</div>
</Col>
</Row>
@ -306,11 +456,8 @@ const DashboardProject = () => {
</Col>
</Row>
<div className='custom-scroll' style={{maxHeight: '37vh', overflow: 'auto'}}>
<Comment name="Dani" division="Interior Office" message="Overdue by 3 days"/>
<Comment name="Roland" division="Interior Office" message="Overdue by 3 days"/>
<Comment name="John" division="Interior Office" message="Overdue by 3 days"/>
<Comment name="Logan" division="Interior Office" message="Overdue by 3 days"/>
<Comment name="Doe" division="Interior Office" message="Overdue by 3 days"/>
{activeTabCommentIdx === 0 && RenderBehindTasks}
{activeTabCommentIdx === 1 && RenderComments}
</div>
</div>
</Col>

Write Preview
Loading…
Cancel
Save