Skip to content

Instantly share code, notes, and snippets.

@pk936

pk936/share_task.js

Created July 28, 2017 05:44
Show Gist options
  • Save pk936/2200de483cd6d8b402a4394f2210cfb3 to your computer and use it in GitHub Desktop.
Save pk936/2200de483cd6d8b402a4394f2210cfb3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
share_task.js
import React from "react";
export default class ShareTask extends React.Component {
constructor(props) {
super(props);
this.state={
shareWithUsers:[],
showUsers:false
}
this.selectUser=this.selectUser.bind(this);
this.share_task=this.share_task.bind(this);
this.removeUser=this.removeUser.bind(this);
this.trackUserId=[];
}
componentDidMount(prop,state){
// $('.chips').material_chip();
let _this=this;
$('body').on('click', '.task_people_list li', _this.selectUser)
$('body').on('click', '#shareTask', _this.share_task)
$('body').on('click','.sharedwithBlock .chip .close',_this.removeUser)
// console.log(this.props)
// console.log(this.props.activeTask.data.attributes.shared)
// let userName = jwt_decode(localStorage.getItem('jwt')).name;
let taskid = _this.props.activeTask.data.id;
let shareWithUsers=[];
// console.log(this.props.activeTask.data.attributes.shared)
//$('body').on('click','.task_people_list li',function(){
// if(!$(this).hasClass('already_added'))
// {
// $(this).addClass('already_added');
// // console.log($(this).attr('id'))
// let _tname = $(this).find('.task_people_name').text();
// // let id =
//
// shareWithUsers=[...shareWithUsers, <div class="chip inline-block ml-md" >
// <img src="/assets/images/demo_pic.gif" alt="Contact Person"/>
// {_tname}
// <i class="close material-icons np">close</i>
// </div>];
// _this.setState({shareWithUsers:shareWithUsers})
// // console.log(shareWithUsers);
//
// // $('.sharedwithBlock').append('' +
// // '<div class="chip inline-block ml-md mt">' +
// // '<img src="/assets/images/user_pic.jpg" alt="Contact Person"/>'+_tname+'<i class="close material-icons np">close</i>' +
// // '</div>');
// }
//})
// $('body').on('click','.sharedwithBlock .chip .close',function(){
// $(this).parents('.chip').remove();
// console.log($(this).parents('.chip').attr('id'))
// let temp = _this.trackUserId.filter(u=>u!==$(this).parents('.chip').attr('id'))
// this.trackUserId=temp;
// // console.log(this.trackUserId,temp)
// });
// $('body').on('click','#shareTask',function(){
// console.log("SHARING...")
// $('#sharedWith').append($('.sharedwithBlock')[0].innerHTML);
// // _this.setState({shareWithUsers:shareWith}, console.log(_this.state.shareWithUsers))
// // _this.props.updateTask(_this.props.activeTask.data.id, shareWithUsers);
// })
$('body').on('keyup','.search_task_people',function(){
var _val = $(this).val();
$(this).parents('.floating_add_peopleList').find('.task_people_list').find('.task_people_name').each(function(){
if ($(this).text().search(new RegExp(_val, "i")) < 0) {
$(this).closest('.task_people').fadeOut('fast');
} else {
$(this).closest('.task_people').show('fast');
}
});
});
$('body').on('click','.addlist',function(){
$(this).siblings('.floating_add_peopleList').show();
$(this).find('.arrow-right').show();
return false;
});
$('body').on('click','.floating_add_peopleList',function(){return false;})
}
removeUser(e){
let _this=this;
$(e.target).parents('.chip').remove();
let userid=($(e.target).parents('.chip').attr('id'))
console.log("userid", userid)
let temp = this.trackUserId.filter(u=>u!==userid)
this.trackUserId=temp;
let temArray = this.state.shareWithUsers.filter(swu=>swu.id!==userid)
this.setState({shareWithUsers:temArray})
console.log(this.trackUserId,temp, temArray)
}
selectUser(e){
// console.log(e.currentTarget.id, e.currentTarget.title);
this.trackUserId.push(e.currentTarget.id)
//
// console.log("e.currentTarget.disabled", e.currentTarget.hasAttribute('disabled'))
// let temp = new Set([...this.trackUserId]);
// // temp.add(e.currentTarget.id);
// console.log("temp", temp)
// console.log("shareWithUsers", temp.has(e.currentTarget.id))
if(!e.currentTarget.hasAttribute('disabled')) {
let shareWithUsers = [...this.state.shareWithUsers,
{
id: e.currentTarget.id,
data: <div class="chip inline-block ml-md" id={e.currentTarget.id} key={e.currentTarget.id}>
<img src="/assets/images/demo_pic.gif" alt="Contact Person"/>
{e.currentTarget.title}
<i class="close material-icons np">close</i>
</div>
}
];
this.setState({
shareWithUsers: shareWithUsers,
showUsers:false
})
}
}
share_task(){
let _this=this;
// $('#sharedWith').append(_this.state.shareWithUsers);
_this.setState({showUsers:true})
let allSharedUsers = this.state.shareWithUsers.map(swu=>swu.id)
// this.props.updateTask(this.props.activeTask.data.id, allSharedUsers);
}
render() {
// console.log("PROPS", this.props)
// console.log(this.props)
let temp = new Set([...this.trackUserId]);
let row_arr = [], shareTaskWith=[],_taskSharedWithUsers=[];
let taskSharedWithUsers=[];
if(!!this.props.activeTask.data.attributes.shared) {
if (this.props.activeTask.data.attributes.shared.length != 0) {
taskSharedWithUsers=this.props.activeTask.data.attributes.shared
this.props.activeTask.data.attributes.shared.map(sharedPeople=>{
temp.add(sharedPeople)
})
}
}
if (this.props.people && this.props.people.data.length != 0) {
this.props.people.data.map(function (people, index) {
taskSharedWithUsers.map(su => {
if (people.id == su) {
// _taskSharedWithUsers.push({name: people.attributes.name, id: people.id, email: people.attributes.email});
_taskSharedWithUsers.push(
<div class="chip inline-block ml-md" key={people.id}>
<img src="/assets/images/demo_pic.gif" alt="Contact Person"/>
{people.attributes.name}
<i class="close material-icons np">close</i>
</div>
)
}
})
shareTaskWith.push({name: people.attributes.name, id: people.id, email: people.attributes.email});
});
shareTaskWith.map(function (value, i) {
let opt={};
if(temp.has(value.id)){
opt['disabled'] = 'disabled'
}
// console.log(opt);
row_arr.push(
<li class="valign-wrapper p npb pointer task_people" title={value.name} id={value.id} {...opt} key={value.id}>
<div class="inline-block mr-md">
<img src="/assets/images/demo_pic.gif" class="responsive dimension circle"/>
</div>
<div class="inline-block">
<div class="task_people_name truncate">{value.name}</div>
<div class="truncate label_sm">{value.email}</div>
</div>
</li>
)
});
}
console.log("this.state.shareWithUsers", this.state.shareWithUsers)
return (
<div>
<div class="inline-block mr" id="sharedWith">Shared with :</div>
{/*{_taskSharedWithUsers}*/}
{this.state.showUsers ? this.state.shareWithUsers.map(swu=>swu.data) : null}
<div class="addlist pointer">
<i class="material-icons f-md">add</i>
<div class="arrow-right h"></div>
</div>
<div class="floating_add_peopleList">
<div class="p">
<span>Shared With</span>
<span id="shareTask" class="pull-right taskSharedWith pointer"><i
style={{fontSize: "20px"}} class="material-icons">send</i></span>
<div class="sharedwithBlock">
{this.state.shareWithUsers.map(swu=>swu.data)}
</div>
</div>
<div class="mb-md mt-md">
<input type="text" results="10" placeholder="Search"
class="nm search_task_people nbs searchbox"/>
</div>
<ul class="task_people_list">
{row_arr}
</ul>
</div>
</div>
)
}
}
Raw
task_details.js
import React, {Component} from "react";
import Select from "../../common/ui/select";
import axios from "axios";
import appUrl from "../../../constants/api_constants";
import shortid from "shortid";
import Close_Task_Modal from "./close_task_modal";
import jwt_decode from "jwt-decode";
import { getTaskActivity, updateTask, appendTaskActivity } from './tasks_actions';
import store from '../../../store';
let socket = require('../../../sockets.js').socket();
import ShareTask from './share_task';
export default class TaskDetail extends Component {
constructor(props){
super(props);
this.state = {
fieldValue: null,
sharewith: [],
taskStatus: null,
actionButtonGreen: "",
actionButtonRed: "",
TempTemplate: null,
field_values: [],
enableFields: false,
closeTask:null,
comments:[],
taskActivity:[],
shareWithUsers:[]
}
// this.share_task = this.share_task.bind(this);
this.closeTask = this.closeTask.bind(this);
this.initializeNUpdateComments = this.initializeNUpdateComments.bind(this);
socket.on('activity', function(activity){
store.dispatch(appendTaskActivity(activity.activity));
});
}
initializeNUpdateComments(nxtprops){
let userName = jwt_decode(localStorage.getItem('jwt')).name;
let allComments = []
if(!Array.isArray(nxtprops.data.Comments.comments)){
allComments = nxtprops.data.Comments.comments.data
}
let comments=[], _comments=[];
let primaryColors=["red","deep-purple darken-4","pink"," purple darken-4","pink darken-1","teal darken-4","light-blue darken-4","cyan","teal","black","green","orange","light-green accent-3"," deep-orange darken-1","orange accent-3","grey darken-4","light-blue accent-3","red accent-3","lime","lime accent-3"];
if (allComments.length > 0) {
allComments.map((cmnt) => {
comments.push(cmnt)
})
comments.map((cmnt,i) => {
let _name = [];
_name = cmnt.relationships.author.data.name.split(" ");
if ($(_name).length > 1) _name = _name[0][0].toUpperCase() + _name[1][0].toUpperCase();
else _name = _name[0][0].toUpperCase();
let clr = primaryColors[2];
let hrs = moment(cmnt.attributes.posted).format('DD/MM hh:mm A');
_comments.push(<div key={shortid.generate()} class="receiver relative">
<div class="dimension inline-block" style={{verticalAlign: "top"}}>
<div class={"fw fh center f-sm p txt-white circle " + clr}>{_name}</div>
</div>
<div class="inline-block" style={{width:"90%"}}>
<div class="inline-block ml">
<b>{cmnt.relationships.author.data.name}</b>
</div>
<div class="ml">{cmnt.attributes.comment}</div>
</div>
<div class="comment_time label_sm">{hrs}</div>
</div>);
})
}
this.setState({
comments:_comments.reverse(),
taskActivity:nxtprops.data.TaskActivity.activity
})
}
componentWillReceiveProps(nxtprops){
this.initializeNUpdateComments(nxtprops)
}
componentWillUnmount(){
this.setState({
fieldValue: null,
sharewith: [],
taskStatus: null,
actionButtonGreen: "",
actionButtonRed: "",
TempTemplate: null,
field_values: [],
enableFields: false,
closeTask:null,
comments:[],
taskActivity:[]
})
}
componentWillMount(){
let _this = this;
if(!!this.props.data.ActiveTask.task) {
this.props.data.getTaskActivity(this.props.data.ActiveTask.task.data.id);
this.setState({TempTemplate: _this.props.data.Templates.templates.data[45]});
let status;
this.setState({taskStatus: this.props.data.ActiveTask.task.data.attributes.status})
status = this.props.data.ActiveTask.task.data.attributes.status;
switch (status) {
case "Assigned":
this.setState({actionButtonGreen: "Accept", actionButtonRed: "Decline"});
break;
case "Declined":
this.setState({actionButtonRed: "Declined"});
break;
case "Accepted":
this.setState({actionButtonGreen: "Start", actionButtonRed: "Fail"});
break;
case "Started":
this.setState({actionButtonGreen: "Close", actionButtonRed: "Fail"});
break;
case "Failed":
this.setState({actionButtonRed: "Failed"});
break;
case "Closed":
this.setState({actionButtonGreen: "Closed"});
break;
default:
console.log("Status not found");
break;
}
}
}
componentDidMount(prop,state){
let shareWithUsers=[];
console.log(this.props.data.ActiveTask.task.data.attributes.shared)
//fetching current task timeline on click
$('.timeline').on('click', function(){
let id = this.props.data.ActiveTask.task.data.id;
const request = axios({
method: 'GET',
url: appUrl.TASK_URL+'/'+id+'/activities',
headers: {'Authorization': 'Bearer '+localStorage.getItem('jwt')}
});
return false;
});
let _this=this;
let userName = jwt_decode(localStorage.getItem('jwt')).name;
let taskid = _this.props.data.ActiveTask.task.data.id;
$('#loadComments').html(`<div class="preloader-wrapper small active">
<div class="spinner-layer spinner-green-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>`)
_this.props.data.fetchComments(taskid).then((res)=>{
$('#loadComments').html(``)
})
setTimeout(function(){$('ul.tabs').tabs()},100);
// $('body').on('click','.task_people_list li',function(){
// if(!$(this).hasClass('already_added'))
// {
// $(this).addClass('already_added');
// // console.log($(this).attr('id'))
//
// shareWithUsers=[...shareWithUsers, $(this).attr('id')];
//
// console.log(shareWithUsers);
//
// let _tname = $(this).find('.task_people_name').text();
// $('.sharedwithBlock').append('' +
// '<div class="chip inline-block ml-md mt">' +
// '<img src="/assets/images/user_pic.jpg" alt="Contact Person"/>'+_tname+'<i class="close material-icons np">close</i>' +
// '</div>');
// }
// }).on('click','.sharedwithBlock .chip .close',function(){
// $(this).parents('.chip').remove();
// });
//
// $('body').on('click','#shareTask',function(){
// console.log("SHARING...")
// $('#sharedWith').append($('.sharedwithBlock')[0].innerHTML);
// // _this.setState({shareWithUsers:shareWith}, console.log(_this.state.shareWithUsers))
// _this.props.data.updateTask(_this.props.data.ActiveTask.task.data.id, shareWithUsers);
// })
//
// $('body').on('keyup','.search_task_people',function(){
// var _val = $(this).val();
// $(this).parents('.floating_add_peopleList').find('.task_people_list').find('.task_people_name').each(function(){
// if ($(this).text().search(new RegExp(_val, "i")) < 0) {
// $(this).closest('.task_people').fadeOut('fast');
// } else {
// $(this).closest('.task_people').show('fast');
// }
// });
// });
//
// $('body').on('click','.addlist',function(){
// $(this).siblings('.floating_add_peopleList').show();
// $(this).find('.arrow-right').show();
// return false;
// });
//
// $('body').on('click','.floating_add_peopleList',function(){return false;})
$('body').on('click','.chatbox_content .close-remove',function(){
$(this).parent().remove();
});
$('#task_modal').modal();
}
handleSelectShare(e){
this.state.sharewith.push(e.target.value);
}
updateTaskStatus(id, statusDescription, updatedFields, manualTasks=null){
let _this = this;
let _template = {id: _this.props.data.ActiveTask.task.data.attributes.template.id, fields: updatedFields};
const request = axios({
method: 'put',
url: appUrl.TASK_URL + '/'+id+'/update-status',
data: {data:{attributes:{status_description: statusDescription, template: _template, manualExecList:manualTasks}}},
headers: {'Authorization': 'Bearer '+localStorage.getItem('jwt')}
}).then((res)=>{
res ? swal('Task '+ statusDescription,'','success') : swal('Oops!', 'There is some problem please try again or contact to technical team', 'error')
})
}
closeTask(manualTasks){
this.updateTaskStatus(this.props.data.ActiveTask.task.data.id,"Closed",this.state.field_values,manualTasks)
}
handleSubmit_green(e){
e.preventDefault();
let _this=this;
let fields = [];
switch(this.state.actionButtonGreen){
case "Accept": _this.updateTaskStatus(_this.props.data.ActiveTask.task.data.id, "Accepted", _this.props.data.ActiveTask.task.data.attributes.template.fields);
_this.setState({actionButtonGreen: "Start", actionButtonRed:"Fail", taskStatus: "Accepted"});
break;
case "Start": _this.updateTaskStatus(_this.props.data.ActiveTask.task.data.id, "Started", _this.props.data.ActiveTask.task.data.attributes.template.fields);
_this.setState({actionButtonGreen: "Close", actionButtonRed: "Fail", taskStatus: "Started"});
break;
case "Close":
if(this.props.data.ActiveTask.task.data.attributes.workflowId){
$('#task_modal').modal('open');
}else {
let all = $.map(_this.refs, function (refs) {
return [refs]
});
let template = this.props.data.ActiveTask.task.data.attributes.template;
let fields = [];
let checkId = "", missedField = false;
template.fields.map((f, i) => {
let tempCheck = "|";
all.map((a, i) => {
if (all[i].title == f.fid) {
if (all[i].type == "checkbox" || all[i].type == "radio") {
if (all[i].checked) {
checkId = all[i].title;
tempCheck += all[i].nextElementSibling.innerText + "|"
}
} else {
fields.push({
fid: f.fid,
value: all[i].value!=="" ? all[i].value : all[i].placeholder
})
}
if (f.mandatory == true && all[i].value == "") {
missedField = true;
}
}
})
if (!!checkId) {
fields.push({
fid: checkId,
value: tempCheck
})
}
})
fields = fields.filter((f) => {
return f.value !== "|";
})
if (missedField == false) {
_this.updateTaskStatus(_this.props.data.ActiveTask.task.data.id, "Closed", _this.state.field_values);
this.setState({
field_values: fields,
actionButtonGreen: "Closed", actionButtonRed: null, taskStatus: "Closed",
});
} else {
swal('Oops', 'You have missed some fields. Please check!', 'error')
}
}
break;
default: console.log("Status not found");
}
}
handleSubmit_red(e){
e.preventDefault();
let _this=this;
switch(this.state.actionButtonRed){
case "Decline": _this.updateTaskStatus(_this.props.data.ActiveTask.task.data.id, "Declined", _this.props.data.ActiveTask.task.data.attributes.template.fields);
_this.setState({actionButtonGreen: null, actionButtonRed: "Declined", taskStatus: "Declined"});
break;
case "Fail": _this.updateTaskStatus(_this.props.data.ActiveTask.task.data.id, "Failed", _this.props.data.ActiveTask.task.data.attributes.template.fields);
_this.setState({actionButtonGreen: null, actionButtonRed: "Failed", taskStatus: "Failed"});
break;
default: console.log("Status not found");
}
}
validateField(e, _keys){
var _event = $(e.target);
_event.parents().siblings('.sendDataFields').find('.done').hide();
_event.parents().siblings('.sendDataFields').find('.priority').hide();
if(e.target.value.trim()===""){
e.target.className="validate invalid nm";
}else{
let _this = this;
e.target.className="validate";
let id = this.props.data.ActiveTask.task.data.id;
let task_attributes = this.props.data.ActiveTask.task.data.attributes;
let template = this.props.data.ActiveTask.task.data.attributes.template;
let fields = [];
let new_task;
fields.push({fid: e.target.title,
value: e.target.value
});
template.fields = fields;
new_task = {template:template};
let new_task_obj = {id: id, attributes: new_task};
//emitting data
socket.emit('customFields', new_task_obj, _this.props.data.fetchTask(id));
// _event.parents().siblings('.sendDataFields').show();
_event.parents().siblings('.sendDataFields').find('.loading').show();
//verifying data
// _this.props.data.fetchTask(id)
// socket.on('tasks', function(task){
// if(task.meta.status == 200){
// _event.parents().siblings('.sendDataFields').find('.loading').hide();
// _event.parents().siblings('.sendDataFields').find('.done').show();
// _event.parents().siblings('.sendDataFields').find('.priority').hide();
// }else{
// _event.parents().siblings('.sendDataFields').find('.loading').hide();
// _event.parents().siblings('.sendDataFields').find('.priority').show();
// _event.parents().siblings('.sendDataFields').find('.done').hide();
// }
// });
}
}
typingComment(e){
if(e.key==='Enter'){
e.preventDefault();
axios({
method: 'post',
url: appUrl.TASK_URL+'/'+this.props.data.ActiveTask.task.data.id+'/comments',
data: {data:{attributes:{comment: e.target.value} }},
headers: {'Authorization': 'Bearer '+localStorage.getItem('jwt')}
});
e.target.value=""
}
}
componentDidUpdate(){
$('ul.tabs').tabs();
$('#task_modal').modal();
let node = this.refs.commentBox;
node.scrollTop = node.scrollHeight;
}
// submitShareWithUsers(){
// console.log("SHARING...")
// let shareWith=$('.sharedwithBlock').innerHTML;
// this.setState({shareWithUsers:shareWith})
// }
// share_task(e){
// e.preventDefault();
// console.log("SHARING...")
// let shareWith=$('.sharedwithBlock').innerHTML;
// this.setState({shareWithUsers:shareWith})
// // this.props.data.updateTask(this.props.data.ActiveTask.task.data.id, this.state.sharewith);
// }
render(){
let _this = this;
let ActiveTask = this.props.data.ActiveTask.task ? this.props.data.ActiveTask.task.data : null;
let _modifiedAt = new Date(ActiveTask.attributes.modifiedAt).toLocaleString("en-US");
let createdAt = new Date(ActiveTask.attributes.createdAt).toLocaleString("en-US");
let members = this.props.data.People.people.data;
let submit_button;
if(this.state.taskStatus == "Declined" || this.state.taskStatus == "Failed"){
submit_button=
<div class="center mt-lg">
<button type="button" class="btn" >{_this.state.actionButtonRed}</button>
</div>
}
else if(this.state.taskStatus == "Closed"){
submit_button=
<div class="center mt-lg">
<button type="button" class="btn red">{_this.state.actionButtonGreen}</button>
</div>
}
else {
submit_button=
<div class="center mt-lg">
<button type="button" class="btn mr" onClick={_this.handleSubmit_green.bind(_this)}>{_this.state.actionButtonGreen}</button>
<button type="button" class="btn red ml" onClick={_this.handleSubmit_red.bind(_this)}>{_this.state.actionButtonRed}</button>
</div>
}
//active task timeline
let activeTimelineData=[];
let activeTaskTimeline;
if(this.state.taskActivity.length !== 0) {
activeTaskTimeline = this.state.taskActivity.data;
if (activeTaskTimeline !== null || activeTaskTimeline !== undefined || activeTaskTimeline.length !== 0) {
activeTaskTimeline.map((data) => {
let time = new Date(data.attributes.timestamp).toLocaleString("en-US");
activeTimelineData.push(
<div key={shortid.generate()} class="timeline_item">
<div class="timeline_icon timeline_icon_success"><i class="material-icons">info_outline</i></div>
<div class="timeline_date">
<span>{time}</span>
</div>
<div class="timeline_content">
{data.attributes.activity}
<a href="#"></a>
</div>
</div>
)
});
}
}
/////////////////////////////////////////////////////
let row1 = []; // template fields in task description
let rows_checkbox = [],
rows_textbox=[],
rows_select=[],
rows_file=[],
row_image=[],
hidden_fields=[];
let pointerEvents;
if(ActiveTask.attributes.template!=null){
ActiveTask.attributes.template.fields.map(function (_keys, index) {
let i=0, j=1000;
//let hidden = false;
if(!!_keys && !_keys.is_hidden){
let row1key = Math.random() + _keys.fid;
switch(_keys.read_only){
case true:
switch(_keys.type){
case "date":
case "email":
case "url":
case "number":
case "text":
case "tel":
let id = shortid.generate();
rows_textbox.push(
<div class="valign-wrapper" key={row1key} style={{'display': _keys.is_hidden == true ? "none" : ""}}>
<div class="inline-block txtWidth truncate">{_keys.label}</div>
<div class="inline-block txtboxWidth">
<div type={_keys.type} id={id}>{_keys.value}</div>
</div>
</div>
)
break;
}
break;
// ************* ReadOnly = False *************
case false:
// ************* Mandatory = True *************
if(_keys.mandatory){
switch(_keys.type){
case "date":
case "email":
case "url":
case "number":
case "text":
case "tel":
let textid = shortid.generate();
rows_textbox.push(
<div class="valign-wrapper" key={row1key} style={{'display': _keys.is_hidden == true ? "none" : ""}}>
<div class="inline-block txtWidth truncate">{_keys.label}
<sup style={{color:'red'}}><i style={{fontSize:"8px"}} class="material-icons">star</i></sup>
</div>
<div class="inline-block txtboxWidth">
<input class="nm" type={_keys.type} id={textid} onBlur={(e)=>_this.validateField(e)} title={_keys.fid} ref={'textEditableReq' + Math.random()} required={true} placeholder={_keys.value} />
</div>
<div class="sendDataFields">
<img src="../../../../assets/images/loading-2.gif" class="h loading" style={{height:'24px',width:'24px'}} />
<i class="h tiny material-icons green-text done">done_all</i>
<a href="#"><i class="h tiny material-icons red-text priority">priority_high</i></a>
</div>
</div>
)
break;
case "radio":
case "checkbox":
let boxid = shortid.generate();
let valuearr = [];
valuearr = _keys.options.split('|');
let newValues = valuearr.filter((val) => {
return val !== ""
})
let _rows = [];
newValues.map((val, index) => {
_rows.push(
<div class="m" key={index}>
<input name={'group'+_keys.fid} title={_keys.fid} type={_keys.type} id={boxid+index} ref={_keys.type + 'Req' + Math.random()}/>
<label name={'group'+_keys.fid} class="labels" for={boxid+index}>{val}</label>
</div>
)
})
rows_checkbox.push(
<div class="valign-wrapper" key={row1key} style={{'display': _keys.is_hidden == true ? "none" : ""}}>
<div class="inline-block txtWidth truncate">{_keys.label}
<sup style={{color:'red'}}><i style={{fontSize:"8px"}} class="material-icons">star</i></sup>
</div>
<div class="inline-block txtboxWidth">
{_rows}
</div>
<div class="sendDataFields">
<img src="../../../../assets/images/loading-2.gif" class="h loading" style={{height:'24px',width:'24px'}} />
<i class="h tiny material-icons green-text done">done_all</i>
<a href="#"><i class="h tiny material-icons red-text priority">priority_high</i></a>
</div>
</div>
)
break;
case "select":
let selectid = shortid.generate();
let dropdownarray = [];
dropdownarray = _keys.options.split('|');
let rows_sel=[], values;
values = dropdownarray.filter((val) => {
return val !== ""
}).map(function(l, i){
return <option key={i} value={l}>{l}</option>;
})
rows_select.push(
<div class="valign-wrapper" key={row1key} style={{'display': _keys.is_hidden == true ? "none" : ""}}>
<div class="inline-block txtWidth truncate">{_keys.label}
<sup style={{color:'red'}}><i style={{fontSize:"8px"}} class="material-icons">star</i></sup>
</div>
<div class="inline-block txtboxWidth">
<div class="input-field nm">
<select id={selectid} title={_keys.fid} ref={'drpDownReq' + Math.random()} >
<option value="">Select...</option>
{values}
</select>
</div>
</div>
<div class="sendDataFields">
<img src="../../../../assets/images/loading-2.gif" class="h loading" style={{height:'24px',width:'24px'}} />
<i class="h tiny material-icons green-text done">done_all</i>
<a href="#"><i class="h tiny material-icons red-text priority">priority_high</i></a>
</div>
</div>
)
break;
case "file":
let fileid = shortid.generate();
rows_file.push(
<div key={row1key} style={{'display': _keys.is_hidden == true ? "none" : ""}}>
<div>
<div class="file-field input-field" id={fileid}>
<div class="btn upload_btn">
<span>File</span>
<input type="file" />
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" required={true}/>
</div>
</div>
</div>
<div class="sendDataFields">
<img src="../../../../assets/images/loading-2.gif" class="h loading" style={{height:'24px',width:'24px'}} />
<i class="h tiny material-icons green-text done">done_all</i>
<a href="#"><i class="h tiny material-icons red-text priority">priority_high</i></a>
</div>
</div>
)
break;
}
}
// ************* Mandatory = False *************
else{
switch(_keys.type){
case "date":
case "email":
case "url":
case "number":
case "text":
case "tel":
let textNotReqid = shortid.generate();
rows_textbox.push(
<div class="valign-wrapper" key={row1key} style={{'display': _keys.is_hidden == true ? "none" : ""}}>
<div class="inline-block txtWidth truncate">{_keys.label}</div>
<div class="inline-block txtboxWidth"><input type={_keys.type} id={textNotReqid} onBlur={(e)=>_this.validateField(e, _keys)} title={_keys.fid} ref={'inputEditableNotReq' + Math.random()} format="text" class="nm validate" placeholder={_keys.value} /></div>
<div class="sendDataFields">
<img src="../../../../assets/images/loading-2.gif" class="h loading" style={{height:'24px',width:'24px'}} />
<i class="h tiny material-icons green-text done">done_all</i>
<a href="#"><i class="h tiny material-icons red-text priority">priority_high</i></a>
</div>
</div>
);
break;
case "radio":
case "checkbox":
let boxNotReqid = shortid.generate();
let valuearr = [];
valuearr = _keys.options.split('|');
let newValues = valuearr.filter((val) => {
return val !== ""
})
let _rows = [];
newValues.map((val, index) => {
_rows.push(
<div class="m" key={index}>
<input name={'group'+_keys.fid} title={_keys.fid} type={_keys.type} id={boxNotReqid+index} ref={_keys.type + 'NotReq' + Math.random()} />
<label name={'group'+_keys.fid} class="labels" for={boxNotReqid+index}>{val}</label>
</div>
)
})
rows_checkbox.push(
<div class="valign-wrapper" key={row1key} style={{'display': _keys.is_hidden == true ? "none" : ""}}>
<div class="inline-block txtWidth truncate">{_keys.label}</div>
<div class="inline-block txtboxWidth">
{_rows}
</div>
<div class="sendDataFields">
<img src="../../../../assets/images/loading-2.gif" class="h loading" style={{height:'24px',width:'24px'}} />
<i class="h tiny material-icons green-text done">done_all</i>
<a href="#"><i class="h tiny material-icons red-text priority">priority_high</i></a>
</div>
</div>
)
break;
case "select":
let selectNotReqid = shortid.generate();
let dropdownarray = [];
dropdownarray = _keys.options.split('|');
let rows_sel = [], values;
values = dropdownarray.filter((val) => {
return val !== ""
}).map(function(l, i){
return <option key={i} value={l}>{l}</option>;
})
let j=0;
rows_select.push(
<div class="valign-wrapper" key={row1key} style={{'display': _keys.is_hidden == true ? "none" : ""}}>
<div class="inline-block txtWidth truncate">{_keys.label}</div>
<div class="inline-block txtboxWidth">
<div class="input-field nm">
<select id={selectNotReqid} title={_keys.fid} ref={'drpDwnNotReq'+Math.random()} > //_select_temp
<option value="">Select...</option>
{values}
</select>
</div>
</div>
<div class="sendDataFields">
<img src="../../../../assets/images/loading-2.gif" class="h loading" style={{height:'24px',width:'24px'}} />
<i class="h tiny material-icons green-text done">done_all</i>
<a href="#"><i class="h tiny material-icons red-text priority">priority_high</i></a>
</div>
</div>
)
break;
case "file":
let fileNotReqid = shortid.generate();
rows_file.push(
<div class="valign-wrapper" key={row1key} style={{'display': _keys.is_hidden == true ? "none" : ""}}>
<div class="inline-block txtWidth truncate">{_keys.label}</div>
<div class="inline-block txtboxWidth">
<div class="file-field input-field" id={fileNotReqid}>
<div class="btn upload_btn">
<span>File</span>
<input type="file" />
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" />
</div>
</div>
</div>
<div class="sendDataFields">
<img src="../../../../assets/images/loading-2.gif" class="h loading" style={{height:'24px',width:'24px'}} />
<i class="h tiny material-icons green-text done">done_all</i>
<a href="#"><i class="h tiny material-icons red-text priority">priority_high</i></a>
</div>
</div>
)
break;
case "image":
let imgNotReqid = shortid.generate();
row_image.push(
<div class="valign-wrapper" key={row1key} style={{'display': _keys.is_hidden == true ? "none" : ""}}>
<div class="inline-block txtWidth truncate">{_keys.label}</div>
<div class="inline-block txtboxWidth">
<img src="" class="responsive-img" alt="" id={imgNotReqid} />
</div>
<div class="sendDataFields">
<img src="../../../../assets/images/loading-2.gif" class="h loading" style={{height:'24px',width:'24px'}} />
<i class="h tiny material-icons green-text done">done_all</i>
<a href="#"><i class="h tiny material-icons red-text priority">priority_high</i></a>
</div>
</div>
)
break;
}
}
break;
default: console.log('No case found', _keys);
}
}
})
let activityTimeline = [];
if(this.state.taskStatus=="Closed"||this.state.taskStatus=="Assigned"||this.state.taskStatus=="Failed"||this.state.taskStatus=="Finished"||this.state.taskStatus=="Accepted"){
pointerEvents="none";
}else{
pointerEvents=null
};
}
let shareTaskWith = []; //array of people
let row_arr = [];
if(this.props.data.People.people && this.props.data.People.people.data.length!=0){
this.props.data.People.people.data.map(function(people, index){
shareTaskWith.push({name: people.attributes.name, id: people.id, email: people.attributes.email});
});
shareTaskWith.map(function(value, i){
row_arr.push(
<li class="valign-wrapper p npb pointer task_people" id={value.id} key={i}>
<div class="inline-block mr-md">
<img src="/assets/images/demo_pic.gif" class="responsive dimension circle" />
</div>
<div class="inline-block">
<div class="task_people_name truncate">{value.name}</div>
<div class="truncate label_sm">{value.email}</div>
</div>
</li>
)
});
}
return(
<div class="row nmb">
<div class="row col m12 np">
<div class="col m8 line-clamp">
Description : {ActiveTask.attributes.description} {ActiveTask.attributes.status}
</div>
<div class="col m4 np relative">
<div>Assigned To :&nbsp;
<div class="chip inline-block ml-md">
<img src="/assets/images/demo_pic.gif" alt="Contact Person"/>
{ActiveTask.relationships.assigned_user.data.name}
</div>
</div>
<ShareTask people={this.props.data.People.people} activeTask={this.props.data.ActiveTask.task}
sharedWithUsers={this.props.data.ActiveTask.task.data.attributes.shared}
updateTask={this.props.data.updateTask}
/>
{/*<div class="inline-block mr" id="sharedWith">Shared with : </div>*/}
{/*/!*<div class="chip inline-block ml-md">*!/*/}
{/*/!*<img src="/assets/images/demo_pic.gif" alt="Contact Person"/>*!/*/}
{/*/!*Jane Doe*!/*/}
{/*/!*<i class="close material-icons np">close</i>*!/*/}
{/*/!*</div>*!/*/}
{/*<div class="addlist pointer">*/}
{/*<i class="material-icons f-md">add</i>*/}
{/*<div class="arrow-right h"></div>*/}
{/*</div>*/}
{/*<div class="floating_add_peopleList">*/}
{/*<div class="p">*/}
{/*<span>Shared With</span>*/}
{/*<span id="shareTask" class="pull-right taskSharedWith pointer" onClick={this.share_task}><i style={{fontSize:"20px"}} class="material-icons">send</i></span>*/}
{/*<div class="sharedwithBlock">*/}
{/*/!*<div class="chip inline-block ml-md mt">*!/*/}
{/*/!*<img src="/assets/images/demo_pic.gif" alt="Contact Person"/>*!/*/}
{/*/!*Jane Doe*!/*/}
{/*/!*<i class="close material-icons np">close</i>*!/*/}
{/*/!*</div>*!/*/}
{/*</div>*/}
{/*</div>*/}
{/*<div class="mb-md mt-md">*/}
{/*<input type="text" results="10" placeholder="Search" class="nm search_task_people nbs searchbox" />*/}
{/*</div>*/}
{/*<ul class="task_people_list">*/}
{/*{row_arr}*/}
{/*</ul>*/}
{/*</div>*/}
</div>
</div>
<div class="col s12 m8 npl">
<div class="row nmb">
{/*<div class="col s12 m6 npl auto_overflow h" style={{height: "472px"}}>*/}
{/*<div class="AssignDetails">*/}
{/*<div class="row">*/}
{/*<div class="col s12 m12 npr">*/}
{/*<div class="success-clr failure-clr nmt">*/}
{/*<div class="card-title">*/}
{/*Assignment Description*/}
{/*</div>*/}
{/*<div class="card-description mb-md">*/}
{/*{ActiveTask.attributes.description}*/}
{/*</div>*/}
{/*<div class="card-title">*/}
{/*Assignment Details*/}
{/*</div>*/}
{/*<div class="card-description">*/}
{/*<table class="striped">*/}
{/*<tbody>*/}
{/*<tr>*/}
{/*<td>Assigned By:</td>*/}
{/*<td>{ActiveTask.relationships.createdBy.data.name}</td>*/}
{/*</tr>*/}
{/*<tr>*/}
{/*<td>Assigned To:</td>*/}
{/*<td>{ActiveTask.relationships.assigned_user.data.name}</td>*/}
{/*</tr>*/}
{/*<tr>*/}
{/*<td>Created At:</td>*/}
{/*<td>{createdAt}</td>*/}
{/*</tr>*/}
{/*<tr>*/}
{/*<td>Updated At:</td>*/}
{/*<td>{_modifiedAt}</td>*/}
{/*</tr>*/}
{/*<tr>*/}
{/*<td>Status:</td>*/}
{/*<td>{ActiveTask.attributes.status}</td>*/}
{/*</tr>*/}
{/*<tr>*/}
{/*<td>Priority</td>*/}
{/*<td>Normal</td>*/}
{/*</tr>*/}
{/*<tr>*/}
{/*<td>Attachment</td>*/}
{/*<td></td>*/}
{/*</tr>*/}
{/*</tbody>*/}
{/*</table>*/}
{/*<hr style={{opacity:"0.05",height: "1px",background:"#000"}} />*/}
{/*<p>People Involved</p>*/}
{/*<div class="row people-involved pr pl">*/}
{/*<div class="dimension relative inline-block mr ml">*/}
{/*<span class="close-remove">x</span>*/}
{/*<img src="https://media.licdn.com/mpr/mpr/shrink_100_100/AAEAAQAAAAAAAAUlAAAAJDc0MmM1NmFiLTA1YjAtNGYyZS1iODJkLWQ4YjBhZDJlZTBlNQ.jpg" class="circle responsive-img" alt="" />*/}
{/*</div>*/}
{/*<div class="dimension relative inline-block mr ml">*/}
{/*<span class="close-remove">x</span>*/}
{/*<img src="https://cdn5.f-cdn.com/ppic/28637795/logo/9062038/profile_logo_9062038.jpg" class="circle responsive-img" alt="" />*/}
{/*</div>*/}
{/*</div>*/}
{/*<p>Invite to view by email</p>*/}
{/*<div class="row">*/}
{/*<Select id="select_people_1" div_id="input-field" style={{paddingLeft: "0"}} multiple="multiple" data={members} class="pull-left col m7 np" onFieldChange={(e)=>this.handleSelectShare(e)} />*/}
{/*<i class="material-icons pull-left mt pointer " onClick={this.share_task}>send</i>*/}
{/*</div>*/}
{/*</div>*/}
{/*</div>*/}
{/*</div>*/}
{/*</div>*/}
{/*</div>*/}
{/*</div>*/}
{/*rendering template*/}
<div class="col s12 m12">
<div class="neutral-clr reportQc nm relative">
<div class="card-title">
<p class="nmt inline-block">Report QC</p>
<div class="inline-block pull-right" style={{fontSize:"10px"}}>Updated At : {_modifiedAt}</div>
</div>
<div class="card-description auto_overflow" style={{height: "378px"}}>
<div class="row np" style={{pointerEvents: pointerEvents}}>
<div>
<div class="allControls">
{rows_textbox}
{rows_select}
{rows_checkbox}
</div>
</div>
</div>
<div id="task_modal" class="modal">
<div class="modal-header">
<div class="modal-heading">Task</div>
<div class="close-modal modal-action modal-close">X</div>
</div>
<div class="modal-content np" style={{height:'88%'}}>
<Close_Task_Modal activeTask={this.props.data.ActiveTask}
teams={this.props.data.Teams}
workflows={this.props.data.Workflows}
closeTask={this.closeTask}
/>
</div>
</div>
</div>
{submit_button}
</div>
</div>
</div>
</div>
{/*Comments and time-line*/}
<div class="col s12 m4 npr" style={{height: "378px"}}>
<div>
<ul class="tabs">
<li class="tab col s6">
<a class="active" href={'#swipe1'+ActiveTask.id}>Comments</a>
</li>
<li class="tab col s6">
<a href={'#swipe2'+ActiveTask.id}>Timeline</a>
</li>
</ul>
</div>
<div id={'swipe1'+ActiveTask.id} class="col s12 m12 np fh">
<div class="task-desc fh">
<div class="comments fh">
<div class="row nmb fh">
<div class="chatbox_content" ref="commentBox">
<div id="loadComments"></div>
{
this.state.comments
}
{/*<div class="boxcmnt mt-lg">
<div class="user_pic dimension inline-block mr pull-left" style={{verticalAlign:"5px"}}>
<img src="/assets/images/demo_pic.gif" class="circle responsive-img" />
</div>
</div>*/}
</div>
<div class="inline-block input-field col m12 nm np pull-left">
<textarea name="comment_txt" class="materialize-textarea comment_txt nmb" placeholder="Enter Comments here..." onKeyUp={(e)=>this.typingComment(e)}></textarea>
{/*{}
removed tis prperty frm textarea id={ActiveTask.id}*/}
</div>
</div>
</div>
</div>
</div>
<div id={'swipe2'+ActiveTask.id} class="col s12 m12 np fh ">
<div id="timeline" class="p auto_overflow fh">
<div class="timeline timeline_small uk-margin-bottom ">
{activeTimelineData}
</div>
</div>
</div>
</div>
</div>
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment