· 6 years ago · Feb 11, 2020, 01:04 PM
1<template>
2 <div>
3 <div id="board_view_list" @click="HideDetails">
4 <div style="padding-left: 2%">
5 <div class="col-12 action-task" id="board_title">
6 <h2 class="p-t-10" v-if="list.type !== null">
7 {{list.name}}
8 </h2>
9 <p class="compltit-p" v-if="list.description != null">{{list.description}}</p>
10 </div>
11 </div>
12 <div class="col-12" id="col10" style="border: none">
13 <div class="card-scene">
14 <Container
15 :drop-placeholder="upperDropPlaceholderOptions"
16 @drag-start="dragStart"
17 @drag-end="dragEnd"
18 @drop="onColumnDrop($event)"
19 drag-handle-selector=".column-drag-handle"
20 orientation="horizontal">
21 <Draggable :key="column.id" v-for="(column , index ) in scene.children">
22 <div class="hidden-column" v-if="column.hidden">
23 <div class="card-column-header">
24 <span @click="showColumn(index, column.boardId)"
25 class="column-drag-handle">⇛</span>
26
27 </div>
28 </div>
29 <div :class="[column.props.className, column.props.className+'-'+column.boardId ]"
30 @click="selectColumn(column.boardId)" v-else>
31 <div class="card-column-header">
32 <div class="row" style="position: relative;">
33 <div class="col-md-3" style="margin: 0px; padding : 0px;">
34 <span class="column-drag-handle"> ☰</span>
35 <img :src="baseUrl+'/img/'+column.progress+'.png'" height="40" width="40"/>
36 </div>
37 <div class="col-md-6 " style="margin: 0px; padding : 0px;word-break: break-all">
38 <span class="col_name"
39 style="word-break: break-all; max-height: 71px; display: block; height: 42px; overflow: hidden;"
40 :title="column.name" data-placement="bottom" data-toggle="tooltip">
41 {{ (column.name && column.name.length > 38)? column.name.substring(0,38)+ " .." : column.name }}
42 </span>
43 </div>
44 <div style="margin: 0px; padding : 0px;">
45 <span class="total-task">{{column.children.length}}</span>
46 </div>
47 <div class="col-md-1"
48 style="position: absolute; display: inline; right: 10px; top: 9px">
49 <span class="pull-right" style="display: inline-flex;">
50
51 <span class="dropdown-toggle-split opacity"
52 data-toggle="dropdown" style="padding: 0px;">
53 <i class="fal fa-ellipsis-h" style="font-size:22px"></i>
54 </span>
55 <div class="dropdown-menu card-option-dropdown">
56 <diV class="collapse show switchToggle">
57 <a @click="addExistingTask(index,column.boardId)"
58 class="dropdown-item"
59 href="javascript:void(0)"
60 v-if="column.moveToCol == false || column.ruleType === 'asnUser'">
61 <i class="fal fa-layer-plus mr-2"></i>
62 Add existing tasks
63 </a>
64 <a @click="addCard(index,column.boardId)"
65 class="dropdown-item"
66 href="javascript:void(0)"
67 v-if="column.moveToCol == false || column.ruleType === 'asnUser'">
68 <i class="fal fa-plus-square mr-2"></i>
69 Create new tasks
70 </a>
71 <div class="dropdown-divider"
72 v-if="column.moveToCol == false || column.ruleType === 'asnUser'"></div>
73 <a @click="updateColumSow(index)" class="dropdown-item"
74 href="#">
75 <i class="fal fa-edit mr-2"></i>
76 Edit column
77 </a>
78 <a @click="hideColumn(index, column.boardId)"
79 class="dropdown-item" href="#">
80 <i class="far fa-eye-slash mr-2"></i>
81 Hide column
82 </a>
83 <div class="dropdown-divider"></div>
84 <a @click="transferColumnToOtherBoard(index, column.boardId)"
85 class="dropdown-item" href="#">
86 <i class="fad fa-exchange-alt mr-2"></i>
87 Transfer Column to another board
88 </a>
89 <a @click="showLinkModel(index, column.boardId)"
90 class="dropdown-item" href="#"
91 v-if="column.moveToCol == false || column.ruleType === 'asnUser'">
92 <i class="fas fa-link mr-2"></i>
93 Link to List
94 </a>
95 <li class="dropdown-submenu"
96 v-if="column.linkToList.length > 0">
97 <a class="dropdown-item" href="#">
98 <i class="fas fa-unlink mr-2"></i>
99 Unlink Lists
100 </a>
101 <ul class="dropdown-menu">
102 <li v-for="unlinks in column.linkToList"
103 class="dropdown-item"
104 @click="unlinklistToCol(index, column.boardId, unlinks.id)">
105 <a href="#"><img
106 :src="baseUrl+'/img/task-icon/unlink.png'"
107 height="18" width="18">
108 {{(unlinks.link_to_list_column !== null && unlinks.link_to_list_column !== undefined) ? unlinks.link_to_list_column.list_title : ''}}
109 </a>
110 </li>
111 </ul>
112 </li>
113 <!-- <a v-if="column.linkToList.length > 0" @click="unlinklistToCol(index, column.boardId)" class="dropdown-item"
114 href="#"><img :src="baseUrl+'/img/task-icon/unlink.png'" height="18" width="18" > Unlink Lists
115 </a> -->
116 <div class="dropdown-divider"></div>
117 <a @click="deleteColumn(index,column.boardId)"
118 class="dropdown-item"
119 href="#">
120 <i data-v-0ca4b43b="" class="fal fa-trash-alt mr-2"
121 aria-hidden="true"></i>
122 Delete column</a>
123 </diV>
124 </div>
125 </span>
126 </span>
127 </div>
128 <div v-if="column.moveToCol === true || column.ruleType === 'asnUser'"
129 :id="column.boardId+'rulesCard'"
130 style="float: left; position: absolute; top: 55px; padding: 0px 9px;">
131 <div class="card-list card">
132 <span v-if="column.ruleStatus === 0"
133 v-html="'<strong>Rule is paused</strong>'"
134 class="text-warning"></span>
135 <span v-if="column.ruleType === 'mvCard'"
136 v-html="'This column has rule <strong>'+column.ruleName+'</strong> and moves cards to <strong>'+column.boardName+'</strong> Board in Column <strong>'+column.moveToColName+'</strong>'"></span>
137 <span v-if="column.ruleType === 'asnUser'"
138 v-html="'This column has rule <strong>'+column.ruleName+',</strong> assign to <strong>'+ column.usersName +'</strong>'"></span>
139 </div>
140 </div>
141 </div>
142 </div>
143
144 <Container
145 :style="{'padding-top': ruleAlertHeight(column.boardId+'rulesCard', 'coll'+column.boardId)}"
146 :drop-placeholder="dropPlaceholderOptions"
147 :get-child-payload="getCardPayload(column.id)"
148 :id="'coll'+column.boardId"
149
150 @drop="(e) => onCardDrop(column.id, column.boardId, index, e)"
151 drag-class="card-ghost"
152 drop-class="card-ghost-drop"
153 group-name="col"
154 >
155 <Draggable :key="card.id" v-for="(card , key) in column.children">
156 <div
157 :class="[card.props.className,(card.priority_label !== null) ? 'pc-'+card.priority_label : '']"
158 :style="card.props.style"
159 class="card-list"
160 @contextmenu="makeItClick($event, card,column.children, index, key, column.boardId)"
161 @click="makeItClick($event, card, column.children, index, key, column.boardId)"
162 :id="'card_'+card.cardId"
163 v-on:dblclick="showLog(card)"
164 v-if="card.data !== 'Dont Forget Section'">
165 <div :id="'titleUserMention'+card.cardId" class="dropdowns-card-user"
166 style="z-index: 1;">
167 <diV class="collapse show switchToggle">
168 <ul id="myUL-user" class="myUL-user-card"
169 style="background: #f3f3f3; border-radius: 5px; border: 1px solid #d4d4d4; ">
170 <template v-for="user in projectUsers"
171 v-if="projectUsers !== null && projectUsers.length > 0">
172 <li @click="SearchTaskByAssignedUsers(user.id, user.name, card, user)">
173 <a href="javascript:void(0)">
174 <span class="assignUser-suggest-photo">
175 <!-- {{(user.name !== null) ? user.name.substring(0,2) : ''}} -->
176 <span v-if="user.photo_url === null"> {{(user.name !== null) ? user.name.substring(0,2) : ''}} </span>
177 <span v-if="user.photo_url !== null"> <img
178 class="assignUser-photo-for-card"
179 :src="user.photo_url" :alt="user.name"
180 style="margin-top: -3px;"/> </span>
181 </span>
182 {{user.name}}
183 </a>
184 </li>
185 </template>
186 <template v-for="(user, tagIndx) in card.existing_tags"
187 v-if="card.existing_tags !== null && card.existing_tags.length > 0 && projectUsers === null ">
188 <li @click="tagMention(card, user, index , tagIndx, key)"
189 class="users-select row">
190 <!--addExistingTag(index , tagIndx, key, card.cardId, '') -->
191 <div class="col-md-9 add-tag-to-selected">
192 <span
193 class="badge badge-default tag-color-custom-contextmenu"
194 :style="{'background' : user.color}">.</span>
195 <h5>{{user.title}}</h5>
196 </div>
197 </li>
198 </template>
199 <!-- <template v-else>
200 <li>
201 <a href="javascript:void(0)">
202 No user found!
203 </a>
204 </li>
205 </template> -->
206 </ul>
207 </diV>
208 </div>
209 <!-- @click="selectCard(card)" -->
210 <span
211 :class="[(card.priority_label !== null) ? 'pch-'+card.priority_label : 'ch-option']"
212 > <!-- v-if="card.textareaShow === true" -->
213 <span class="dropdown-toggle-split opacity"
214 data-toggle="dropdown">
215 <i class="fal fa-ellipsis-h"
216 :class="[(card.priority_label !== null) ? 'ch-option-icon' : '']"
217 style="color: #272757; font-size:22px;"></i>
218 </span>
219 <div class="dropdown-menu card-option-dropdown">
220 <diV class="collapse show switchToggle">
221
222 <a @click="showTransferModel(index, key, card.cardId, column.boardId)"
223 class="dropdown-item" href="#"
224 title="Transfer To Other Board Or Column">
225 <i class="fad fa-sort-alt mr-2"></i> Transfer task to another board
226 </a>
227
228 <div class="dropdown-divider"
229 v-if="card.types === 'task'"></div>
230 <a @click="deleteTask(index, key, card.cardId)"
231 class="dropdown-item" title="Remove Task"
232 href="#" v-if="card.types === 'task'">
233 <i class="fal fa-minus-octagon mr-2"></i>
234 Remove task from <strong> This Board </strong>
235 </a>
236 <div class="dropdown-divider"></div>
237 <a @click="RemoveNodeAndChildren()" class="dropdown-item"
238 href="#">
239 <i class="fad fa-trash-alt mr-2"></i>
240 Delete the task
241 </a>
242 </diV>
243 </div>
244 </span>
245
246 <div :id="'title'+card.cardId" contenteditable="true"
247 class="card-title-blur card-title-show"
248 @click="makeInput($event,card.cardId)"
249 @blur="showItem($event,card,index,key)"
250 @keypress="preventEnter($event)"
251 @keyup="cardTitlePress($event,card,index,key)"
252 v-html="card.data">
253 </div>
254 <div>
255 <a class="calender clickHide" v-if="card.date === null">
256 <i class="fal fa-calendar-plus icon-image-preview" data-toggle
257 title="toggle"></i>
258 </a>
259 <datepicker
260 :disabled-dates="disabledDates"
261 @selected="updateDate"
262 calendar-button-icon='<i class="outline-event icon-image-preview"></i>'
263 format='dd MMM'
264 input-class="dateCal"
265 title="Due Date" data-toggle="tooltip" style="width: 40px;"
266 v-model="card.date">
267 </datepicker>
268 <!-- <flatPickr
269 :class="{
270 dateCal:true,
271 'flatpickr-input': true,
272 'flatpickr-input1': card.date != null ? false : true,
273 active: true,
274 dateCal1: card.date != null ? true : false
275 }"
276 style="width: 40px;"
277 :config="date_config"
278
279 name="date"
280 v-model="card.date">
281 </flatPickr> -->
282 <!-- @on-change="updateDate(card)" data-placement="left" -->
283 </div>
284 <div class="card-delete-icon">
285 <a @click="deleteCard(index, key, card.cardId)"
286 v-if="card.types == 'card'">
287 <!-- <i class="baseline-playlist_delete icon-image-preview"></i> -->
288 <i class="fal fa-trash-alt icon-image-preview"></i>
289 </a>
290 <a @click="deleteTask(index, key, card.cardId)"
291 v-if="card.types == 'task'">
292 <!-- <i class="baseline-playlist_delete icon-image-preview"></i> -->
293 <i class="fal fa-trash-alt icon-image-preview"></i>
294 </a>
295 </div>
296 <a class="user-assign-card">
297 <template v-if="card.assigned_user.length > 0">
298 <span class="assigned_user-card "
299 data-toggle="dropdown"
300 v-for="(assign,keyId) in card.assigned_user">
301 <p :title="assign.name" style="margin-right: 1px;"
302 class="assignUser-photo-for-card text-uppercase"
303 data-placement="bottom" data-toggle="tooltip"
304 v-if="keyId <= 1">
305 <span v-if="assign.photo_url === null"> {{(assign.name !== null) ? assign.name.substring(0,2) : ''}} </span>
306 <span v-if="assign.photo_url !== null"> <img
307 class="assignUser-photo-for-card" :src="assign.photo_url"
308 :alt="assign.name" style="margin-top: -3px;"/> </span>
309 </p>
310 </span>
311 </template>
312 <span data-toggle="dropdown" class=" dropdown-toggle-split" v-else>
313 <i class="fal fa-user-plus icon-image-preview "
314 data-toggle="tooltip"
315 title="Assignee"></i>
316 </span>
317
318 <div class="dropdown-menu dropdown-menu-right" style="z-index: 1;">
319 <diV class="collapse show switchToggle">
320 <li class="assignUser">
321 <input class="input-group searchUser"
322 @keyup="suggestUsers(index, key)"
323 placeholder="Assign by name and email"
324 style="width: 90%; padding: 12px 20px; margin: 10px;
325 display: inline-block; border: 1px solid #ccc;
326 border-radius: 4px; box-sizing: border-box; "
327 type="text"
328 v-model="userSeggistion">
329 <label class="pl-2 label-text">
330 <span class="assign-user-drop-down-text">
331 Or invite a new member by email address
332 </span>
333 </label>
334 </li>
335 <li class="assignUser">
336 <!-- card.users -->
337 <template v-for="user in allTeamsUsers">
338 <div
339 @click="(card.assigned_user_ids.includes(user.id)) ? '' : assignUserToTask(user, index, key, card) "
340 :class="(card.assigned_user_ids.includes(user.id)) ? 'active-user disabled' : 'users-select'"
341 class="row"
342 v-bind:disabled="(card.assigned_user_ids.includes(user.id)) ? true : false">
343 <div class="col-md-2 pt-1 pl-2">
344 <p class="assignUser-photo"
345 v-if="user.photo_url === null">
346 {{(user.name !== null) ?
347 user.name.substring(0,2) : ''}}
348 </p>
349 <p class="assignUser-photo"
350 v-if="user.photo_url !== null">
351 <!-- {{(user.name !== null) ? user.name.substring(0,2) : ''}} -->
352 <img class="assignUser-photo-for-card"
353 :src="user.photo_url" :alt="user.name"
354 style="margin-top: -3px; width: 28px; height: 28px;"/>
355 </p>
356
357 </div>
358 <div class="col-md-10 assign-user-name-email"
359 style="word-break: break-all;">
360 <h5 style=" width: 85%;">{{user.name}}<br>
361 <small>{{user.email}}</small>
362 </h5>
363 </div>
364 <a :id="'remove-assign-user'+user.id"
365 v-if="card.assigned_user_ids.includes(user.id)"
366 @click="removeAssignedUser(user, card)"
367 data-toggle="tooltip"
368 title="Remove user from assigned !"
369 class="remove-assign-user badge badge-danger"
370 href="javascript:void(0)">
371 <i class="fal fa-user-times"></i>
372 </a>
373 <a :id="'remove-assign-user'+user.id" v-else
374 data-toggle="tooltip"
375 title="Assign user to task!"
376 class="remove-assign-user badge badge-success"
377 href="javascript:void(0)">
378 <i class="fal fa-user"></i>
379 </a>
380 </div>
381 </template>
382 </li>
383 </diV>
384 </div>
385 </a>
386 <a class="tag-icon">
387 <div v-if="card.tags && card.tags.length !== 0">
388 <div style="float: left;" v-for="(item, tagIndex) in card.tags">
389 <div class="dropdown-toggle-split "
390 data-toggle="dropdown"
391 style="padding-right: 0px; padding-left: 1px;"
392 v-if="tagIndex < 2">
393 <span class="badge badge-danger "
394 v-if='item == "Dont Forget"'>
395 {{item.text.substring(0,12)}}
396 </span>
397 <span :title="card.tagTooltip"
398 class="badge badge-success "
399 data-placement="bottom"
400 data-toggle="tooltip"
401 v-bind:style="[{'background': item.color },{'margin-left' : 1 +'px'}]"
402 style="height: 18px;line-height: 14px;"
403 v-else>
404 {{item.text.substring(0,5)}}
405 <span v-if="item.text.length > 5">.</span>
406 </span>
407 </div>
408
409 <div :id="'dropdown1'+card.cardId"
410 class="dropdown-menu dropdown-menu1">
411
412 <diV class="collapse show switchToggle" style="">
413 <div class="container-fluid">
414 <vue-tags-input
415 :allow-edit-tags="true"
416 :tags="card.tags"
417 @before-deleting-tag="deleteTag => deleteCardTag(deleteTag,card,index,key)"
418 @tags-changed="newTags => (changeTag(newTags,card,index,key))"
419 v-model="tag"/>
420 <div class="row">
421 <div class="col-12">
422 <template
423 v-for="(tag, tagIndx) in card.existing_tags">
424 <li class="badge-pill tags"
425 @click="addExistingTag(index , tagIndx, key, card, '')"
426 v-bind:style="[{'background': tag.color },{'margin-left' : 1 +'px'}]"
427 v-if="tag.text !== 'Dont Forget'">
428 {{(tag.title !== undefined) ?
429 tag.title.substring(0,12) : ''}}
430 </li>
431 </template>
432 <li @click="addExistingTag(index , 0, key, card, 'Dont Forget')"
433 class="badge-pill tags"
434 style="background: #FB8678;height: 17px;line-height: 14px;">
435 Dont Forget
436 </li>
437 </div>
438 </div>
439 <hr>
440 <div class="col-xs-12"
441 style="margin-top:10px;width: 100%;">
442 <button @click="showTagManageModel"
443 class="btn btn-small btn-primary pull-right"
444 type="submit">
445 Manage Tag
446 </button>
447 </div>
448 </div>
449
450 </diV>
451 </div>
452 </div>
453 </div>
454 <i class="fal fa-tags icon-image-preview" data-toggle="dropdown"
455 title="Add Tag" v-else></i>
456 <div class="dropdown-menu dropdown-menu1 ">
457
458 <diV class="collapse show switchToggle" style="">
459 <div class="container-fluid">
460 <vue-tags-input
461 :allow-edit-tags="true"
462 :tags="tag1"
463 @before-deleting-tag="deleteTag => deleteCardTag(deleteTag,card,index,key)"
464 @tags-changed="newTags => (changeTag(newTags,card,index,key))"
465 v-model="tag"
466 />
467 <div class="row">
468 <div class="col-12">
469 <template
470 v-for="(tag, tagIndx) in card.existing_tags">
471 <li class="badge-pill tags"
472 @click="addExistingTag(index , tagIndx, key, card ,'')"
473 v-bind:style="[{'background': tag.color },{'margin-left' : 1 +'px'}]"
474 v-if="tag.text !== 'Dont Forget'">
475 {{(tag.title !== undefined)
476 ?tag.title.substring(0,12) : ''}}
477 </li>
478 </template>
479 <li @click="addExistingTag(index , 0, key, card, 'Dont Forget')"
480 class="badge-pill tags"
481 style="background: #FB8678"> Dont Forget
482 </li>
483 </div>
484 </div>
485 <hr>
486 <div class="col-xs-12"
487 style="margin-top:10px;width: 100%;">
488 <button @click="showTagManageModel"
489 class="btn btn-small btn-primary pull-right"
490 type="submit">
491 Manage Tag
492 </button>
493 </div>
494 </div>
495 </diV>
496 </div>
497 </a>
498 <a class="priority-icon-card" data-toggle="tooltip" title="Priority">
499 <span class="priority-icon dropdown-toggle-split"
500 v-if="card.priority_label !== null"
501 style="top: 12px;"
502 data-toggle="dropdown">
503 <span title="" data-placement="bottom" data-toggle="tooltip"
504 v-if="card.priority_label === 'high'"
505 class="badge badge-warning text-capitalize "
506 style="background: #e25858;height: 18px; line-height: 13px;color:#ffffff "
507 data-original-title="">
508 {{card.priority_label}}
509 </span>
510 <span title="" data-placement="bottom" data-toggle="tooltip"
511 v-if="card.priority_label === 'low'"
512 class="badge badge-warning text-capitalize "
513 style="background: #5987d1;height: 18px; line-height: 13px; "
514 data-original-title="">
515 {{card.priority_label}}
516 </span>
517 <span title="" data-placement="bottom" data-toggle="tooltip"
518 v-if="card.priority_label === 'medium'"
519 class="badge badge-warning text-capitalize "
520 style="background: #e58c62;height: 18px; line-height: 13px;"
521 data-original-title="">
522 {{card.priority_label}}
523 </span>
524 </span>
525 <i class="fal fa-exclamation-triangle icon-image-preview" v-else
526 style="margin-bottom: -2px"
527 data-toggle="dropdown" title="Add Priority"></i>
528
529 <div class="dropdown-menu dropdown-menu-right"
530 style="z-index: 1;width: 185px;">
531 <div class="collapse show switchToggle">
532 <ul>
533 <li class="assignUser">
534 <label class="pl-2 label-text">
535 <span class="assign-user-drop-down-text">
536 Select Task Priority
537 </span>
538 </label>
539 </li>
540 <li class="assignUser">
541
542 <div class="users-select row">
543 <div class="col-md-9 add-tag-to-selected"
544 @click="Add_Priority('3',card)">
545 <span
546 class="badge badge-default tag-color-custom-contextmenu"
547 style="background: #e25858;">.</span>
548 <h5 class="text-capitalize"> high</h5>
549 </div>
550 <div @click="RemovePriority(card)"
551 style=" width: 20%; text-align: right;padding-top: 4px;font-size: 16px"
552 v-if="card.priority_label === 'high'">
553 <span>
554 <i class="far fa-minus-octagon"></i>
555 </span>
556 </div>
557 </div>
558 <div class="users-select row">
559 <div class="col-md-9 add-tag-to-selected"
560 @click="Add_Priority('2',card)">
561 <span
562 class="badge badge-default tag-color-custom-contextmenu"
563 style="background: #e58c62;">.</span>
564 <h5 class="text-capitalize">medium</h5>
565 </div>
566 <div @click="RemovePriority(card)"
567 style=" width: 20%; text-align: right;padding-top: 4px;font-size: 16px"
568 v-if="card.priority_label === 'medium'">
569 <i class="far fa-minus-octagon"></i>
570 </div>
571 </div>
572 <div class="users-select row">
573 <div class="col-md-9 add-tag-to-selected"
574 @click="Add_Priority('1',card)">
575 <span
576 class="badge badge-default tag-color-custom-contextmenu"
577 style="background: #5987d1;">.</span>
578 <h5>Low</h5>
579 </div>
580 <div @click="RemovePriority(card)"
581 style=" width: 20%; text-align: right;padding-top: 4px;font-size: 16px"
582 v-if="card.priority_label === 'low'">
583 <i class="far fa-minus-octagon"></i>
584 </div>
585 </div>
586 </li>
587 </ul>
588 </div>
589 </div>
590 </a>
591 <div
592 :class="[(card.priority_label !== null) ? 'pch-total-child' : 'total-child']">
593 <span @click="hideChilds(card.cardId)" v-if="card.child > 0 ">
594 <i v-if="card.open === 0" class="fal fa-layer-minus"
595 style="font-size: 14px;"></i>
596 <i v-if="card.open === 1" class="fal fa-layer-plus"
597 style="font-size: 14px;"></i>
598 <i v-if="card.open === null" class="fal fa-layer-minus"
599 style="font-size: 14px;"></i>
600 <strong>
601 {{ card.child }}
602 </strong>
603 </span>
604 <span v-if="card.comment.length > 0" title="Comments">
605 <i class="fal fa-comments"></i>
606 </span>
607 <span v-if="card.description !== ''" title="Description">
608 <!-- <i class="fal fa-clipboard-prescription"></i> -->
609 <i class="fal fa-align-justify"></i>
610 </span>
611 <span style="margin-left: 5px;" v-if="card.list_data !== null"
612 :title="card.list_data.list_title">
613 {{ card.list_data.list_title.substring(0,15)}}<span
614 v-if="card.list_data.list_title.length > 15">...</span>
615 </span>
616 </div>
617 </div>
618 </Draggable>
619 </Container>
620 </div>
621 </Draggable>
622 <div>
623 <p @click="addColumn" class="add-column" v-if="board_id">
624 <i class="fa fa-plus"></i>
625 add column
626 </p>
627 </div>
628 </Container>
629 <div class="jquery-accordion-menu" id="jquery-accordion-menu" v-click-outside="HideCustomMenu">
630 <ul>
631 <li>
632 <a href="javascript:void(0)"
633 data-toggle="dropdown" class="dropdown-toggle-split ">
634 <i class="fal fa-user-plus " aria-hidden="true"></i>
635 Assign User to Selected
636 </a>
637 <span class="contex-menu-sortcut">
638 <span class="badge-pill badge-default">Ctrl</span>+<span
639 class="badge-pill badge-default">U</span>
640 </span>
641 <div class="dropdown-menu dropdown-menu-right">
642 <div class="collapse show switchToggle">
643 <ul>
644 <li class="assignUser">
645 <input class="input-group searchUser"
646 @keyup="suggestUsers(index, key)"
647 placeholder="Assign by name and email"
648 style="width: 90%; padding: 12px 20px; margin: 10px;
649 display: inline-block; border: 1px solid #ccc;
650 border-radius: 4px; box-sizing: border-box; "
651 type="text"
652 v-model="userSeggistion">
653 <label class="pl-2 label-text">
654 <span class="assign-user-drop-down-text">
655 Or invite a new member by email address
656 </span>
657 </label>
658 </li>
659 <li class="assignUser">
660 <!-- {{ scene.children[0].children[0].users }} -->
661 <!-- v-for="user in scene.children[0].children[0].users" -->
662 <template v-for="user in allTeamsUsers">
663 <div @click="ActionToSelectedTask(user.id,'user')"
664 class="users-select row">
665 <div class="col-md-2 pt-1 pl-2">
666 <p class="assignUser-photo" v-if="user.photo_url === null">
667 {{(user.name !== null) ? user.name.substring(0,2) : ''}}
668 </p>
669 <p class="assignUser-photo" v-if="user.photo_url !== null">
670 <img class="assignUser-photo-for-card"
671 :src="user.photo_url" :alt="user.name"
672 style="margin-top: -3px; width: 28px; height: 28px;"/>
673 <!-- {{(user.name !== null) ? user.name.substring(0,2) : ''}} -->
674 </p>
675 </div>
676 <div class="col-md-10 assign-user-name-email">
677 <h5 style="width: 95%; word-break: break-all;">{{user.name}}<br>
678 <small>{{user.email}}</small>
679 </h5>
680 </div>
681 </div>
682 </template>
683 </li>
684 </ul>
685 </div>
686 </div>
687 </li>
688 <li>
689
690 <a @click="deleteSelectedTask" href="javascript:void(0)">
691 <i class="fal fa-trash-alt"></i>
692 Delete Selected
693 <span class="badge-pill badge-default contex-menu-sortcut">Delete</span>
694 </a>
695 </li>
696 <li>
697 <a href="javascript:void(0)" data-toggle="dropdown" class="dropdown-toggle-split ">
698 <i class="fal fa-tags contex-menu-icon" aria-hidden="true"></i>
699 Add Tags
700 </a>
701 <span class="contex-menu-sortcut">
702 <span class="badge-pill badge-default">Shift</span>+
703 <span class="badge-pill badge-default">#</span>
704 </span>
705 <div class="dropdown-menu dropdown-menu-right" style="width: 240px;">
706 <div class="collapse show switchToggle">
707 <ul>
708 <li class="assignUser">
709 <label class="pl-2 label-text">
710 <span class="assign-user-drop-down-text">
711 Select Tag
712 </span>
713 </label>
714 </li>
715 <li class="assignUser">
716 <template v-for="user in allTags">
717 <div @click="ActionToSelectedTask(user.id,'tag')"
718 class="users-select row">
719 <div class="col-md-9 add-tag-to-selected">
720 <span
721 class="badge badge-default tag-color-custom-contextmenu"
722 :style="{'background' : user.color}">.</span>
723 <h5>{{user.title}}</h5>
724 </div>
725 </div>
726 </template>
727 </li>
728 </ul>
729 </div>
730 </div>
731 </li>
732 <li>
733 <a @click="showTransferModel(this.currentColumn , '' , '', this.currentColumnIndex)">
734 <i class="far fa-compress"></i>
735 Move to another column or Board
736 </a>
737 <span class="contex-menu-sortcut">
738 <span class="badge-pill badge-default">Ctrl</span>+
739 <span class="badge-pill badge-default">M</span>
740 </span>
741 </li>
742 <li>
743 <a href="javascript:void(0)" class="dropdown-toggle-split " data-toggle="dropdown">
744 <i class="fal fa-exclamation-triangle contex-menu-icon"></i>
745 Add Priority
746 </a>
747 <!-- <span class="contex-menu-sortcut">-->
748 <!-- <span class="badge-pill badge-default">Shift</span>+<span-->
749 <!-- class="badge-pill badge-default">#</span>-->
750 <!-- </span>-->
751 <div class="dropdown-menu dropdown-menu-right">
752 <div class="collapse show switchToggle">
753 <ul>
754 <li class="assignUser">
755 <label class="pl-2 label-text">
756 <span class="assign-user-drop-down-text">
757 Select Task Priority
758 </span>
759 </label>
760 </li>
761 <li class="assignUser">
762 <div class="users-select row"
763 @click="Add_Priority('3',null)">
764 <div class="col-md-9 add-tag-to-selected">
765 <span
766 class="badge badge-default tag-color-custom-contextmenu"
767 style="background: #e25858;">.</span>
768 <h5 class="text-capitalize"> high</h5>
769 </div>
770 </div>
771 <div class="users-select row"
772 @click="Add_Priority('2',null)">
773 <div class="col-md-9 add-tag-to-selected">
774 <span
775 class="badge badge-default tag-color-custom-contextmenu"
776 style="background: #e58c62;">.</span>
777 <h5 class="text-capitalize">medium</h5>
778 </div>
779 </div>
780 <div class="users-select row"
781 @click="Add_Priority('1',null)">
782 <div class="col-md-9 add-tag-to-selected">
783 <span
784 class="badge badge-default tag-color-custom-contextmenu"
785 style="background: #5987d1;">.</span>
786 <h5>Low</h5>
787 </div>
788 </div>
789 </li>
790 </ul>
791 </div>
792 </div>
793 </li>
794 <li v-if="selectedCards.types == 'task'">
795 <a @click="deleteAllTasks(currentColumnIndex, currentColumnKey, selectedCards.cardId)"
796 href="javascript:void(0)">
797 <i class="fad fa-eraser"></i>
798 Remove Tasks From This Column
799 <!-- <span class="badge-pill badge-default contex-menu-sortcut">Delete</span> -->
800 </a>
801 </li>
802 <!-- <li>
803 <a href="javascript:void(0)"><img src="/img/task-icon/move.png" class="contex-menu-icon"> Move Selected
804 </a> <span class="contex-menu-sortcut"><span class="badge-pill badge-default">Ctrl</span>+<span class="badge-pill badge-default">M</span></span>
805 </li> -->
806
807 <li style="position: relative" @click="openPicker()">
808 <datepicker
809 :disabled-dates="disabledDates"
810 v-model="date_for_selected"
811 @selected="ActionToSelectedTask('','date')"
812 calendar-button-icon='<i class="outline-event icon-image-preview"></i>'
813 format='dd MMM'
814 input-class="dateCal-selected">
815 </datepicker>
816 <a class="calender li-opacity clickHide">
817 <i class="fal fa-calendar-plus contex-menu-icon"></i>
818 Set Due Date
819 </a>
820 </li>
821 <!-- <li>
822 <a href="javascript:void(0)"><img src="/img/task-icon/move-1.png" class="contex-menu-icon"> Move To Dont Forget Section </a>
823 </li> -->
824 </ul>
825 </div>
826 </div>
827 </div>
828 </div>
829
830 <div aria-hidden="true" aria-labelledby="exampleModalLabel" class="modal fade" id="addModal" role="dialog"
831 tabindex="-1">
832 <div class="modal-dialog" role="document">
833 <div class="modal-content">
834 <div class="modal-header" style="border-radius: 13px;">
835 <h5 class="modal-title">Add column</h5>
836 <button aria-label="Close" class="close" data-dismiss="modal" type="button">
837 <span aria-hidden="true">×</span>
838 </button>
839 </div>
840 <div class="modal-body">
841 <p>You need to set a name and progress color for the new column.</p>
842 <div class="form-group row">
843 <label class="col-sm-2 col-form-label">Name</label>
844 <div class="col-sm-10">
845 <input class="form-control" type="text" v-model="addField.name">
846 </div>
847 </div>
848 <div class="form-group row">
849 <label class="col-sm-4 col-form-label">Percent Complete </label>
850 <div class="col-sm-8">
851 <select class="form-control" v-model="addField.progress">
852 <option style="background-image:url('/images/0.png');" value="0">0% Complete
853 </option>
854 <option style="background-image:url('/images/125.png');" value="125">12.5%
855 Complete
856 </option>
857 <option style="background-image:url('/images/25.png');" value="25">25% Complete
858 </option>
859 <option style="background-image:url('/images/375.png');" value="375">37.5%
860 Complete
861 </option>
862 <option style="background-image:url('/images/50.png');" value="50">50% Complete
863 </option>
864 <option style="background-image:url('/images/625.png');" value="625">62.5%
865 Complete
866 </option>
867 <option style="background-image:url('/images/75.png');" value="75">75% Complete
868 </option>
869 <option style="background-image:url('/images/875.png');" value="875">87.5%
870 Complete
871 </option>
872 <option style="background-image:url('/images/100.png');" value="100">100% Complete
873 </option>
874 </select>
875 </div>
876 </div>
877 <p class="text-danger" v-if="addField.error">{{addField.error}}</p>
878 </div>
879 <div class="modal-footer">
880 <button @click="setColumn()" class="btn save-all" type="button">Add Column</button>
881 <button @click="clearInputFeild()" class="btn btn-secondary ml-2" type="button">Cancel</button>
882 </div>
883 </div>
884 </div>
885 </div>
886 <div aria-hidden="true" aria-labelledby="exampleModalLabel" class="modal fade" id="EditModal" role="dialog"
887 tabindex="-1">
888 <div class="modal-dialog" role="document">
889 <div class="modal-content">
890 <div class="modal-header" style="border-radius: 13px;">
891 <h5 class="modal-title">Update column</h5>
892 <button aria-label="Close" class="close" data-dismiss="modal" type="button">
893 <span aria-hidden="true">×</span>
894 </button>
895 </div>
896 <div class="modal-body">
897 <p>You need to set a progress and color for the new column.</p>
898 <div class="form-group row">
899 <label class="col-sm-2 col-form-label">Name</label>
900 <div class="col-sm-10">
901 <input class="form-control" type="text" v-model="editField.name">
902 </div>
903 </div>
904 <div class="form-group row">
905 <label class="col-sm-4 col-form-label">Percent Complete</label>
906 <div class="col-sm-8">
907 <select class="form-control" v-model="editField.progress">
908 <option style="background-image:url('/images/0.png');" value="0">0% Complete
909 </option>
910 <option style="background-image:url('/images/125.png');" value="125">12.5%
911 Complete
912 </option>
913 <option style="background-image:url('/images/25.png');" value="25">25% Complete
914 </option>
915 <option style="background-image:url('/images/375.png');" value="375">37.5%
916 Complete
917 </option>
918 <option style="background-image:url('/images/50.png');" value="50">50% Complete
919 </option>
920 <option style="background-image:url('/images/625.png');" value="625">62.5%
921 Complete
922 </option>
923 <option style="background-image:url('/images/75.png');" value="75">75% Complete
924 </option>
925 <option style="background-image:url('/images/875.png');" value="875">87.5%
926 Complete
927 </option>
928 <option style="background-image:url('/images/100.png');" value="100">100% Complete
929 </option>
930 </select>
931 </div>
932 </div>
933 <p class="text-danger" v-if="editField.error">{{editField.error}}</p>
934 </div>
935 <div class="modal-footer">
936 <button @click="updateColumn" class="btn save-all" type="button">Update</button>
937 <button @click="clearInputFeild" class="btn btn-secondary ml-2" type="button">Cancel</button>
938 </div>
939 </div>
940 </div>
941 </div>
942 <div aria-hidden="true" aria-labelledby="exampleModalLabel" class="modal fade" id="TagManage" role="dialog"
943 tabindex="-1">
944 <div class="modal-dialog" role="document">
945 <div class="modal-content">
946 <div class="modal-header" style="border-radius: 13px;">
947 <h3 class="text-center text-uppercase">Manage All Tag</h3>
948 <button aria-label="Close" class="close" data-dismiss="modal" type="button">
949 <span aria-hidden="true">×</span>
950 </button>
951 </div>
952 <div class="modal-body">
953 <div class="table-responsive" id="table">
954 <table class="table" data-v-095ab3dc="">
955 <thead data-v-095ab3dc="">
956 <tr data-v-095ab3dc="">
957 <th>Tag Title</th>
958 <th>Color</th>
959 <th>Action</th>
960 </tr>
961 </thead>
962 <tbody>
963 <template v-for="tag in manageTag">
964 <tr>
965 <td class="pt-3-half" v-if="tag.title === 'Dont Forget'">{{tag.title}}</td>
966 <td @keydown="newLineoff($event)" @keyup="updateTagName($event,tag)"
967 class="pt-3-half"
968 contenteditable="true" v-else>
969 {{tag.title}}
970 </td>
971 <td class="pt-3-half">
972 <input :value="tag.color" @change="updateTagColor($event,tag)"
973 style="cursor: pointer;background-color: #fff;border: none;"
974 type="color">
975 </td>
976 <td>
977 <a @click="DeleteTagFromModal(tag)"
978 class="compltit-blue-a badge badge-danger"
979 href="javascript:void(0)">
980 Delete
981 </a>
982 </td>
983 </tr>
984 </template>
985 </tbody>
986 </table>
987 </div>
988 </div>
989 <div class="modal-footer">
990 <button aria-label="Close" class="btn btn-secondary " data-dismiss="modal" type="button">Cancel
991 </button>
992 </div>
993 </div>
994 </div>
995 </div>
996
997 <div aria-hidden="true" aria-labelledby="exampleModalLabel" class="modal fade" id="transferCard" role="dialog"
998 tabindex="-1">
999 <div class="modal-dialog" role="document">
1000 <div class="modal-content">
1001 <div class="modal-header" style="border-radius: 13px;">
1002 <h4 class="text-center ">Transfer Task To Another Board</h4>
1003 <button aria-label="Close" class="close" data-dismiss="modal" type="button">
1004 <span aria-hidden="true">×</span>
1005 </button>
1006 </div>
1007 <div class="modal-body">
1008 <div class="form-group row">
1009 <label class="col-sm-4 col-form-label">Select Board :</label>
1010 <div class="col-sm-8">
1011 <!-- {{ selectedBoard }} -->
1012 <select @change="showSubBoard()" class="form-control" v-model="selectedBoard">
1013 <option disabled>Select Board</option>
1014 <option :key="index" v-bind:value="navs.id" v-for="(navs, index) in board"
1015 v-if="navs.type === 'board'"> {{navs.title}}
1016 </option>
1017 </select>
1018 </div>
1019 </div>
1020 <div class="form-group row" v-if="subBoard.length > 0">
1021 <label class="col-sm-4 col-form-label">Select Board List :</label>
1022 <div class="col-sm-8">
1023 <select @change="getColumn()" class="form-control" v-model="selectedSubBoard">
1024 <option disabled>Select Board List</option>
1025 <option :key="index" v-bind:value="navList.id" v-for="(navList, index) in subBoard">
1026 {{navList.board_title}}
1027 </option>
1028 </select>
1029 </div>
1030 </div>
1031 <div class="form-group row" v-if="boardColumn.length > 0">
1032 <label class="col-sm-4 col-form-label">Select Board Column :</label>
1033 <div class="col-sm-8">
1034 <select @change="getBttn()" class="form-control" v-model="selectedBoardColumn">
1035 <option disabled>Select Board Column</option>
1036 <option :key="index" v-bind:value="navList.id"
1037 v-for="(navList, index) in boardColumn">
1038 {{navList.title}}
1039 </option>
1040 </select>
1041 </div>
1042 </div>
1043 </div>
1044 <div class="modal-footer">
1045 <button v-if="transferBtn" aria-label="Close" @click="transferCardToOtherBoard"
1046 class="btn save-all" data-dismiss="modal" type="button">Transfer
1047 </button>
1048 <button aria-label="Close" class="btn btn-secondary ml-2" data-dismiss="modal" type="button">
1049 Cancel
1050 </button>
1051 </div>
1052 </div>
1053 </div>
1054 </div>
1055 <div aria-hidden="true" aria-labelledby="exampleModalLabel" class="modal fade" id="transferColumn" role="dialog"
1056 tabindex="-1">
1057 <div class="modal-dialog" role="document">
1058 <div class="modal-content">
1059 <div class="modal-header" style="border-radius: 13px;">
1060 <h4 class="text-center ">Transfer Column To Another Board </h4>
1061 <button aria-label="Close" class="close" data-dismiss="modal" type="button">
1062 <span aria-hidden="true">×</span>
1063 </button>
1064 </div>
1065 <div class="modal-body">
1066 <div class="form-group row">
1067 <label class="col-sm-4 col-form-label">Select Board :</label>
1068 <div class="col-sm-8">
1069 <!-- {{ selectedBoard }} -->
1070 <select @change="showSubBoard()" class="form-control" v-model="selectedBoard">
1071 <option disabled>Select Board</option>
1072 <option :key="index" v-bind:value="navs.id" v-for="(navs, index) in board"
1073 v-if="navs.type === 'board'">{{navs.title}}
1074 </option>
1075 </select>
1076 </div>
1077 </div>
1078 <div class="form-group row" v-if="subBoard.length > 0">
1079 <label class="col-sm-4 col-form-label">Select Board List :</label>
1080 <div class="col-sm-8">
1081 <select @change="getBttn()" class="form-control" v-model="selectedSubBoard">
1082 <option disabled>Select Board List</option>
1083 <option :key="index" v-bind:value="navList.id" v-for="(navList, index) in subBoard">
1084 {{navList.board_title}}
1085 </option>
1086 </select>
1087 </div>
1088 </div>
1089 <!-- <div class="form-group row" v-if="boardColumn.length > 0">
1090 <label class="col-sm-4 col-form-label">Select Board Column :</label>
1091 <div class="col-sm-8">
1092 <select @change="getBttn()" class="form-control" v-model="selectedBoardColumn">
1093 <option disabled>Select Board Column</option>
1094 <option :key="index" v-bind:value="navList.id" v-for="(navList, index) in boardColumn">
1095 {{navList.title}}
1096 </option>
1097 </select>
1098 </div>
1099 </div> -->
1100 </div>
1101 <div class="modal-footer">
1102 <button v-if="transferBtn" aria-label="Close" @click="transferColumnToOtherBoardSave"
1103 class="btn save-all" data-dismiss="modal" type="button">Transfer
1104 </button>
1105 <button aria-label="Close" class="btn btn-secondary ml-2" data-dismiss="modal" type="button">
1106 Cancel
1107 </button>
1108 </div>
1109 </div>
1110 </div>
1111 </div>
1112 <div aria-hidden="true" aria-labelledby="exampleModalLabel" class="modal fade" id="listLinkColumn" role="dialog"
1113 tabindex="-1">
1114 <div class="modal-dialog" role="document">
1115 <div class="modal-content">
1116 <div class="modal-header" style="border-radius: 13px;">
1117 <h4 class="text-center ">Link List To Column </h4>
1118 <button aria-label="Close" class="close" data-dismiss="modal" type="button">
1119 <span aria-hidden="true">×</span>
1120 </button>
1121 </div>
1122 <div class="modal-body">
1123 <div class="form-group row">
1124 <label class="col-sm-3 col-form-label">Select Nav :</label>
1125 <div class="col-sm-9">
1126 <select @change="showSubNav()" class="form-control" v-model="selectedNav">
1127 <option disabled>Select Nav</option>
1128 <option :key="index" v-bind:value="navs.id" v-for="(navs, index) in nav"
1129 v-if="navs.type === 'list'">{{navs.title}}
1130 </option>
1131 </select>
1132 </div>
1133 </div>
1134 <div class="form-group row" v-if="subNav.length > 0">
1135 <label class="col-sm-4 col-form-label">Select Nav List :</label>
1136 <div class="col-sm-8">
1137 <select @change="linkToCol()" class="form-control" v-model="selectedSubNav">
1138 <option disabled>Select Nav List</option>
1139 <option :key="index" v-bind:value="navList.id" v-for="(navList, index) in subNav">
1140 {{navList.list_title}}
1141 </option>
1142 </select>
1143 </div>
1144 </div>
1145 <!-- <div class="form-group row" v-if="boardColumn.length > 0">
1146 <label class="col-sm-4 col-form-label">Select Board Column :</label>
1147 <div class="col-sm-8">
1148 <select @change="getBttn()" class="form-control" v-model="selectedBoardColumn">
1149 <option disabled>Select Board Column</option>
1150 <option :key="index" v-bind:value="navList.id" v-for="(navList, index) in boardColumn">
1151 {{navList.title}}
1152 </option>
1153 </select>
1154 </div>
1155 </div> -->
1156 </div>
1157 <div class="modal-footer">
1158 <button v-if="linkBtn" aria-label="Close" @click="listLinkToCol" class="btn save-all"
1159 data-dismiss="modal" type="button">Link
1160 </button>
1161 <button aria-label="Close" class="btn btn-secondary ml-2" data-dismiss="modal" type="button">
1162 Cancel
1163 </button>
1164 </div>
1165 </div>
1166 </div>
1167 </div>
1168 <div aria-hidden="true" aria-labelledby="exampleModalLabel" class="modal fade" id="loader" role="dialog"
1169 tabindex="-1">
1170 <div class="modal-dialog " role="document">
1171 <div>
1172 </div>
1173 </div>
1174 </div>
1175 <div aria-hidden="true" aria-labelledby="exampleModalLabel" class="modal fade" id="user_list" role="dialog"
1176 tabindex="-1">
1177 <div class="modal-dialog " role="document">
1178 <div class="modal-content">
1179 <div class="modal-header" style="border-radius: 13px;">
1180 <h5 class="modal-title">User List</h5>
1181 <button aria-label="Close" class="close" data-dismiss="modal" type="button">
1182 <span aria-hidden="true">×</span>
1183 </button>
1184 </div>
1185 <div class="modal-body list-model">
1186 <div class="form-group row">
1187 <div class="col-sm-9">
1188 <ul class="list-group list-group-flush">
1189 <li class="list-group-item">
1190 <label class="checkbox_cus_mini">
1191 <input @click="checkedAllUser(allUsers)" type="checkbox"
1192 class="checkedAllUser"> All
1193 <span class="checkmark"></span>
1194 </label>
1195 </li>
1196 <li class="list-group-item" v-for="user in allUsers">
1197 <label class="checkbox_cus_mini">
1198 <input v-model="userIdList" :value="user.id"
1199 @click="addUserToFilter(user.id)" type="checkbox" name="side_dav"> {{
1200 user.name }}
1201 <span class="checkmark"></span>
1202 </label>
1203 </li>
1204 </ul>
1205 </div>
1206 </div>
1207 </div>
1208 <div class="modal-footer">
1209 <!-- {{ selectedExistedTask }} -->
1210 <button class="btn save-all" @click="userFilter()" type="button">Filter User</button>
1211 <!-- <button @click="clearInputFeild" class="btn btn-secondary" type="button">Cancel</button> -->
1212 </div>
1213 </div>
1214 </div>
1215 </div>
1216 <div aria-hidden="true" aria-labelledby="exampleModalLabel" class="modal fade" id="priority_list_modal"
1217 role="dialog"
1218 tabindex="-1">
1219 <div class="modal-dialog " role="document">
1220 <div class="modal-content">
1221 <div class="modal-header" style="border-radius: 13px;">
1222 <h5 class="modal-title">Priority List </h5>
1223 <button aria-label="Close" class="close" data-dismiss="modal" type="button">
1224 <span aria-hidden="true">×</span>
1225 </button>
1226 </div>
1227 <div class="modal-body list-model">
1228 <div class="form-group row">
1229 <div class="col-sm-9">
1230 <ul class="list-group list-group-flush">
1231 <!-- <li class="list-group-item" >-->
1232 <!-- <label class="checkbox_cus_mini">-->
1233 <!-- <input type="checkbox" class="checkedUser"> All-->
1234 <!-- <span class="checkmark"></span>-->
1235 <!-- </label>-->
1236 <!-- </li>-->
1237 <li class="list-group-item">
1238 <label class="checkbox_cus_mini">
1239 <input @click="addFilterToFilter('3')" type="checkbox" class="checkedUser">
1240 High
1241 <span class="checkmark"></span>
1242 </label>
1243 </li>
1244 <li class="list-group-item">
1245 <label class="checkbox_cus_mini">
1246 <input @click="addFilterToFilter('2')" type="checkbox" class="checkedUser">
1247 Medium
1248 <span class="checkmark"></span>
1249 </label>
1250 </li>
1251 <li class="list-group-item">
1252 <label class="checkbox_cus_mini">
1253 <input @click="addFilterToFilter('1')" type="checkbox" class="checkedUser">
1254 Low
1255 <span class="checkmark"></span>
1256 </label>
1257 </li>
1258 <li class="list-group-item">
1259 <label class="checkbox_cus_mini">
1260 <input @click="addFilterToFilter('0')" type="checkbox" class="checkedUser">
1261 No Priority
1262 <span class="checkmark"></span>
1263 </label>
1264 </li>
1265 </ul>
1266 </div>
1267 </div>
1268 </div>
1269 <div class="modal-footer">
1270 <!-- {{ selectedExistedTask }} -->
1271 <button class="btn btn-primary" @click="priorityHide()" type="button">Hide</button>
1272 <button class="btn btn-primary ml-2" @click="priorityShow() " type="button">Show</button>
1273 <!-- <button @click="clearInputFeild" class="btn btn-secondary" type="button">Cancel</button> -->
1274 </div>
1275 </div>
1276 </div>
1277 </div>
1278 <div aria-hidden="true" aria-labelledby="exampleModalCenterTitle" class="modal fade" id="addExistingTask"
1279 role="dialog"
1280 tabindex="-1">
1281 <div class="modal-dialog modal-dialog-centered" role="document">
1282 <div class="modal-content">
1283 <div class="modal-header" style="border-radius: 13px;">
1284 <h5 class="modal-title">Add Existing Task</h5>
1285 <button aria-label="Close" class="close" data-dismiss="modal" type="button">
1286 <span aria-hidden="true">×</span>
1287 </button>
1288 </div>
1289 <div class="modal-body list-model">
1290 <div class="form-group row">
1291 <label class="col-sm-3 col-form-label">Select Nav :</label>
1292 <div class="col-sm-9">
1293 <select @change="showSubNav()" class="form-control" v-model="selectedNav">
1294 <option disabled>Select Nav</option>
1295 <option :key="index" v-bind:value="navs.id" v-for="(navs, index) in nav"
1296 v-if="navs.type === 'list'">{{navs.title}}
1297 </option>
1298 </select>
1299 </div>
1300 </div>
1301 <div class="form-group row" v-if="subNav.length > 0">
1302 <label class="col-sm-4 col-form-label">Select Nav List :</label>
1303 <div class="col-sm-8">
1304 <select @change="getAllTask()" class="form-control" v-model="selectedSubNav">
1305 <option disabled>Select Nav List</option>
1306 <option :key="index" v-bind:value="navList.id" v-for="(navList, index) in subNav">
1307 {{navList.list_title}}
1308 </option>
1309 </select>
1310 </div>
1311 </div>
1312 <ul class="list-group list-group-flush">
1313 <div v-if="tree4data.length > 0">
1314 <label class="checkbox_cus_mini">
1315 <input type="checkbox" @change="selectAll()" class="checkedAll" name="side_dav"> All
1316 <span class="checkmark"></span>
1317 </label>
1318 <!-- <input type="checkbox" @change="selectAll()" class="checkedAll"> All <br> -->
1319 </div>
1320 <div v-for="tree in tree4data">
1321 <li class="list-group-item"
1322 :class="(tree.board_parent_id !== null && tree.children.length <= 0) ? 'list-group-item-hide' : ''">
1323 <label
1324 :class="{'checkbox_cus_mini' : true, '_pen_disable' : true,'disabledTask': tree.board_parent_id !== null}"
1325 v-if="tree.text !== '' && tree.text !== 'Dont Forget Section' && tree.board_parent_id !== null && tree.children.length > 0"
1326 v-html="tree.text">
1327 <!-- <input :id="tree.id" :value="tree.id" type="checkbox"
1328 v-if="tree.text !== '' && tree.board_parent_id !== null"
1329 checked disable> -->
1330
1331 <!-- <span class="checkmark"></span>-->
1332 </label>
1333 <label class="checkbox_cus_mini"
1334 v-if="tree.text !== '' && tree.text !== 'Dont Forget Section' && tree.board_parent_id == null">
1335 <input :id="tree.id" :value="tree.id" type="checkbox"
1336 v-model="selectedExistedTask"
1337 :class="{'selectAll': true}" @change="selectChild(tree.id)"
1338 v-if="tree.text !== '' && tree.board_parent_id === null">
1339 <span v-html="tree.text"></span>
1340 <span class="checkmark"></span>
1341 </label>
1342 <ul class="list-group list-group-flush" v-if="tree.children">
1343 <div v-for="child in tree.children"
1344 :class="(child.board_parent_id !== null && child.children.length <= 0) ? 'list-group-item-hide' : ''">
1345 <li class="list-group-item">
1346 <label
1347 :class="{'checkbox_cus_mini' : true, '_pen_disable' : true,'disabledTask': child.board_parent_id !== null}"
1348 v-if="child.text !== '' && child.text !== 'Dont Forget Section' && child.board_parent_id !== null && child.children.length > 0">
1349 <input :id="child.id" class="tree-child" :value="child.id"
1350 type="checkbox"
1351 checked disable> <span v-html="child.text"></span>
1352 <!--<span class="checkmark"></span>-->
1353 </label>
1354 <label class="checkbox_cus_mini"
1355 v-if="child.text !== '' && child.text !== 'Dont Forget Section' && child.board_parent_id == null">
1356 <input :id="child.id" class="tree-child selectAll" :value="child.id"
1357 type="checkbox" v-model="selectedExistedTask"
1358 @change="selectChild(child.id)"> <span
1359 v-html="child.text"></span>
1360 <span class="checkmark"></span>
1361 </label>
1362
1363 <ul class="list-group list-group-flush" v-if="child.children">
1364 <div v-for="child1 in child.children"
1365 :class="(child1.board_parent_id !== null && child1.children.length <= 0) ? 'list-group-item-hide' : ''">
1366 <li class="list-group-item">
1367 <label
1368 :class="{'checkbox_cus_mini' : true, '_pen_disable' : true,'disabledTask': child1.board_parent_id !== null}"
1369 v-if="child1.text !== '' && child1.text !== 'Dont Forget Section' && child1.board_parent_id !== null && child1.children.length > 0">
1370 <input :id="child1.id" :value="child1.id"
1371 class="tree-child"
1372 type="checkbox"
1373 checked disable> <span
1374 v-html="child1.text"></span>
1375 <!-- <span class="checkmark"></span>-->
1376 </label>
1377
1378 <label class="checkbox_cus_mini"
1379 v-if="child1.text !== '' && child1.text !== 'Dont Forget Section' && child1.board_parent_id == null">
1380 <input :id="child1.id" :value="child1.id"
1381 class="tree-child selectAll"
1382 type="checkbox" v-model="selectedExistedTask"
1383 @change="selectChild(child1.id)"><span
1384 v-html="child1.text"></span>
1385 <span class="checkmark"></span>
1386 </label>
1387 <ul class="list-group list-group-flush"
1388 v-if="child1.children">
1389 <div v-for="child2 in child1.children"
1390 :class="(child2.board_parent_id !== null && child2.children.length <= 0) ? 'list-group-item-hide' : ''">
1391 <li class="list-group-item">
1392 <label
1393 :class="{'checkbox_cus_mini' : true, '_pen_disable' : true,'disabledTask': child2.board_parent_id !== null}"
1394 v-if="child2.text !== '' && child2.text !== 'Dont Forget Section' && child2.board_parent_id !== null && child2.children.length > 0">
1395 <input :id="child2.id" :value="child2.id"
1396 class="tree-child"
1397 type="checkbox"
1398 checked disable> <span
1399 v-html="child2.text"></span>
1400 <!-- <input type="checkbox" @change="selectAll()" class="checkedAll" name="side_dav" > All -->
1401 <!-- <span class="checkmark"></span>-->
1402 </label>
1403
1404 <label class="checkbox_cus_mini"
1405 v-if="child2.text !== '' && child2.text !== 'Dont Forget Section' && child2.board_parent_id == null">
1406 <input :id="child2.id" :value="child2.id"
1407 class="tree-child selectAll"
1408 type="checkbox"
1409 v-model="selectedExistedTask"
1410 @change="selectChild(child2.id)">
1411 <span v-html="child2.text"></span>
1412 <!-- <input type="checkbox" @change="selectAll()" class="checkedAll" name="side_dav" > All -->
1413 <span class="checkmark"></span>
1414 </label>
1415
1416 <ul class="list-group list-group-flush"
1417 v-if="child2.children">
1418 <div v-for="child3 in child2.children"
1419 :class="(child3.board_parent_id !== null && child3.children.length <= 0) ? 'list-group-item-hide' : ''">
1420 <li class="list-group-item">
1421 <label
1422 :class="{'checkbox_cus_mini' : true, '_pen_disable' : true,'disabledTask': child2.board_parent_id !== null}"
1423 v-if="child3.text !== '' && child3.text !== 'Dont Forget Section' && child3.board_parent_id !== null && child3.children.length > 0">
1424 <input :id="child3.id"
1425 :value="child3.id"
1426 class="tree-child"
1427 type="checkbox"
1428 checked disable>
1429 <span
1430 v-html="child3.text"></span>
1431 <!-- <input type="checkbox" @change="selectAll()" class="checkedAll" name="side_dav" > All -->
1432 <!-- <span class="checkmark"></span>-->
1433 </label>
1434
1435 <label class="checkbox_cus_mini"
1436 v-if="child3.text !== '' && child3.text !== 'Dont Forget Section' && child3.board_parent_id == null">
1437 <input :id="child3.id"
1438 :value="child3.id"
1439 class="tree-child selectAll"
1440 type="checkbox"
1441 v-model="selectedExistedTask"
1442 @change="selectChild(child3.id)">
1443 <span
1444 v-html="child3.text"></span>
1445 <!-- <input type="checkbox" @change="selectAll()" class="checkedAll" name="side_dav" > All -->
1446 <span class="checkmark"></span>
1447 </label>
1448 </li>
1449 </div>
1450 </ul>
1451 </li>
1452 </div>
1453 </ul>
1454 </li>
1455 </div>
1456 </ul>
1457 </li>
1458 </div>
1459 </ul>
1460 </li>
1461 </div>
1462 </ul>
1463 </div>
1464 <div class="modal-footer">
1465 <!-- {{ selectedExistedTask }} -->
1466 <button @click="AddExistingTasks" class="btn save-all" type="button">Add Tasks</button>
1467 <button @click="clearInputFeild" class="btn btn-secondary ml-2" type="button">Cancel</button>
1468 </div>
1469 </div>
1470 </div>
1471 </div>
1472 <div class="detailsShowFull" id="details">
1473 <TaskDetails v-if="Object.keys(selectedData).length > 0"
1474 :selectedData="selectedData"
1475 @textArea="ShowTextArea">
1476 </TaskDetails>
1477 </div>
1478
1479 </div>
1480
1481</template>
1482<script>
1483 import flatPickr from 'vue-flatpickr-component';
1484 import 'flatpickr/dist/flatpickr.css';
1485 import switches from 'vue-switches';
1486 import hotkeys from 'hotkeys-js';
1487 import ClickOutside from 'vue-click-outside';
1488 import Datepicker from 'vuejs-datepicker';
1489 import {Container, Draggable} from 'vue-smooth-dnd';
1490 import {applyDrag, generateItems} from '../../../../assets/plugins/utils/helpers';
1491 import VueTagsInput from '@johmun/vue-tags-input';
1492 import TaskDetails from "../boardCardDetails";
1493 // import VueFroala from 'vue-froala-wysiwyg';
1494 // import Folder from './recurLi.vue';
1495 import Swal from 'sweetalert2';
1496
1497 export default {
1498 // props: ['nav_id', 'board_id', 'projectId', 'filter_type'],
1499 components: {Container, Draggable, flatPickr, switches, VueTagsInput, Datepicker, TaskDetails},
1500 data() {
1501 return {
1502 baseUrl: window.location.origin,
1503 id: 0,
1504 tags: [],
1505 addField: {
1506 name: null,
1507 color: null,
1508 error: null,
1509 progress: null
1510 },
1511 editField: {
1512 name: null,
1513 color: null,
1514 boardId: null,
1515 error: null,
1516 progress: null
1517 },
1518 date_config: {
1519 enableTime: false,
1520 wrap: true,
1521 disableMobile: true,
1522 altFormat: 'd M Y',
1523 dateFormat: 'd M Y',
1524 // minDate: "today"
1525 },
1526 date_for_selected: null,
1527 nav: [],
1528 board: [],
1529 subNav: [],
1530 subBoard: [],
1531 boardColumn: [],
1532 selectedBoard: 'Select Board',
1533 selectedNav: 'Select Nav',
1534 selectedSubNav: 'Select Nav List',
1535 selectedSubBoard: 'Select Board List',
1536 selectedBoardColumn: 'Select Board Column',
1537 transferBtn: false,
1538 linkBtn: false,
1539 project: null,
1540 tree4data: [],
1541 currentColumn: null,
1542 currentColumnIndex: null,
1543 currentColumnKey: null,
1544 cards: [],
1545 selectedCards: [],
1546 scene: {},
1547 upperDropPlaceholderOptions: {
1548 className: 'cards-drop-preview',
1549 animationDuration: '150',
1550 showOnTop: true
1551 },
1552 dropPlaceholderOptions: {
1553 className: 'drop-preview',
1554 animationDuration: '150',
1555 showOnTop: true
1556 },
1557 updateIndex: null,
1558 tag: '',
1559 tag1: [],
1560 selectedExistedTask: [],
1561 multiple_list: null,
1562 list: {
1563 name: null,
1564 description: null,
1565 nav_id: null,
1566 type: 'board'
1567 },
1568 navItem: {
1569 title: null,
1570 type: null,
1571 sort_id: null,
1572 project_id: null,
1573 },
1574 selectedData: {},
1575 selectedIds: [],
1576 selectedColumn: null,
1577 task_logs: null,
1578 check_uncheck_child: null,
1579 manageTag: null,
1580 allUsers: null,
1581 allTags: null,
1582 disabledDates: {
1583 id: null,
1584 },
1585 shift_first: null,
1586 triggers: null,
1587 tagTriggers: null,
1588 userNames: '',
1589 projectUsers: null,
1590 commentsData: null,
1591 filter_types: null,
1592 selectedPriorites: [],
1593 userIdList: [],
1594 Socket: null,
1595 authUser: null,
1596 userSeggistion: null,
1597 copyOrCut: null,
1598 allTeamsUsers: [],
1599 copySelectedId: [],
1600 auth_user: null,
1601 filter_type: null,
1602 nav_id: null,
1603 board_id: null,
1604 projectId: null
1605
1606 }
1607 },
1608 mounted() {
1609 var _this = this;
1610 _this.authUser = _this.auth_user;
1611 _this.$toastr.defaultTimeout = 1000;
1612 _this.projectId = _this.$route.params.projectId;
1613 _this.board_id = _this.$route.params.id;
1614 _this.nav_id = _this.$route.params.nav_id;
1615 var nav_type = JSON.parse(localStorage.selected_nav);
1616 _this.list.name = (_this.$route.params.title !== undefined) ? _this.$route.params.title : nav_type.title
1617 _this.list.description = (_this.$route.params.description !== undefined) ? _this.$route.params.description : nav_type.description
1618 _this.list.nav_id = (_this.$route.params.nav_id !== undefined) ? _this.$route.params.nav_id : nav_type.nav_id
1619
1620 $('#header-item').text('Project / Task Board');
1621 $(document)
1622 .one('focus.autoExpand', 'textarea.autoExpand', function () {
1623 var savedValue = this.value;
1624 this.value = '';
1625 this.baseScrollHeight = this.scrollHeight;
1626 this.value = savedValue;
1627 })
1628 .on('input.autoExpand', 'textarea.autoExpand', function () {
1629 var minRows = this.getAttribute('data-min-rows') | 0, rows;
1630 this.rows = minRows;
1631 rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
1632 this.rows = minRows + rows;
1633 });
1634
1635 $(document).ready(function () {
1636 $(function () {
1637 $('[data-toggle="popover"]').popover()
1638 });
1639 $("#popoverData").popover({trigger: "hover"});
1640 });
1641 $('#loder-hide').fadeIn();
1642 $(document).ready(function () {
1643 $('.searchList').hide();
1644 });
1645 Bus.$on('detailsUpdate', function (data) {
1646 _this.selectedData.description = data.description;
1647 _this.getBoardTask();
1648 })
1649
1650 Bus.$emit('AddedFilterSuccess');
1651 _this.getBoardTask();
1652 _this.getAuthUser();
1653 _this.allTeamUsers();
1654 _this.connectSocket();
1655
1656 },
1657 created() {
1658 let _this = this;
1659 hotkeys('tab,shift+tab,up,down,left,right,ctrl+c,ctrl+x,ctrl+v,ctrl+m,delete,ctrl+u,ctrl+b,ctrl+s,ctrl+i,shift+3', function (event, handler) {
1660 event.preventDefault();
1661 switch (handler.key) {
1662 // case "enter" :
1663 // // _this.addNode(_this.selectedData);
1664 // break;
1665 // case "tab" :
1666 // // _this.makeChild(_this.selectedData);
1667 // break;
1668 // case "shift+tab":
1669 // // _this.unMakeChild(_this.selectedData);
1670 // break;
1671 case "up" :
1672 _this.selectedCardMoveUp();
1673 break;
1674 case "down" :
1675 _this.selectedCardMoveDown();
1676 break;
1677 case "left" :
1678 _this.HideDetails();
1679 break;
1680 case "right" :
1681 _this.showLog(_this.selectedData);
1682 // _this.task_logs = null;
1683 // _this.ShowDetails(_this.selectedData);
1684
1685 break;
1686 case "ctrl+c":
1687 _this.copySelectedId = _this.selectedIds;
1688 _this.copyOrCut = 'copy';
1689 _this.$toastr.s("Copy Task success !");
1690 // _this.selectedCut = null;
1691 break;
1692 case "ctrl+x":
1693 _this.copySelectedId = _this.selectedIds;
1694 _this.copyOrCut = 'cut';
1695 _this.$toastr.s("Cut Task success !");
1696 break;
1697 case "ctrl+v":
1698 _this.pastCopyAndCut();
1699 break;
1700 case "delete":
1701 var nav_type = JSON.parse(localStorage.selected_nav);
1702 if (nav_type.type === 'board' && _this.selectedIds.length > 0) {
1703 _this.deleteSelectedTask();
1704 }
1705 break;
1706 case "ctrl+u":
1707 _this.shwAssignUserDropDown();
1708 // if (nav_type.type === 'board' && _this.selectedIds.length > 0) {
1709 // }
1710 break;
1711 case "ctrl+m":
1712 if (_this.selectedIds.length > 0) {
1713 _this.showTransferModel(_this.currentColumn, '', '', _this.currentColumnIndex);
1714 }
1715 break;
1716 case "ctrl+b":
1717 // _this.AddDontForgetTagToSelectedIds();//add DON'T FORGET SECTION
1718 break;
1719 case "ctrl+s":
1720 // _this.showSearchInputField();
1721 break;
1722 case "ctrl+i":
1723 // _this.addAttachment(_this.selectedData);
1724 break;
1725 case "shift+3":
1726 _this.showtagBox();
1727 // $('#dropdown1' + _this.selectedData.cardId).click();
1728 // console.log(_this.selectedData.cardId);
1729 break;
1730 }
1731 });
1732 },
1733 methods: {
1734 connectSocket: function () {
1735 let app = this;
1736 if (app.Socket == null) {
1737 app.Socket = io.connect(window.socket_url);
1738
1739 app.Socket.on('CardMoved', function (res) {
1740 // if (res.project_id == app.projectId && res.user_id != app.authUser.id){
1741 if (res.project_id == app.projectId) {
1742 app.getBoardTask();
1743 // swal('Card moved','You assign on a task!', 'success');
1744 }
1745 })
1746 app.Socket.on('taskUpdateSocket', function (res) {
1747 if (res.board_id == app.board_id && res.project_id == app.projectId && res.user_id != app.authUser.id) { // && res.user_id != app.authUser.id
1748 // if (res.list_id == app.list.id && res.project_id == app.projectId) {
1749 // swal('Updated', 'Task Update!', 'success');
1750 app.getBoardTask();
1751 }
1752 })
1753 app.Socket.on('cardUpdatedSocket', function (res) {
1754 if (res.board_id == app.board_id && res.project_id == app.projectId && res.user_id != app.authUser.id) {
1755 // if (res.list_id == app.list.id && res.project_id == app.projectId) {
1756 // swal('Updated', 'Task Update!', 'success');
1757 }
1758 app.getBoardTask();
1759 })
1760 }
1761 },
1762 getAuthUser() {
1763 // auth-user
1764 var _this = this;
1765 axios.get('/api/auth-user')
1766 .then(response => response.data)
1767 .then(response => {
1768 _this.authUser = response.user;
1769 })
1770 .catch(error => {
1771
1772 });
1773 },
1774 grow: function (text, options) {
1775 var height = options.height || '100px';
1776 var maxHeight = options.maxHeight || '500px';
1777 text.style.height = 'auto';
1778 var curHeight = text.scrollHeight;
1779 if (curHeight > maxHeight) {
1780 curHeight = maxHeight;
1781 text.style.overflow = 'auto';
1782 } else {
1783 text.style.overflow = 'hidden';
1784 }
1785 if (curHeight < height) {
1786 curHeight = height;
1787 }
1788 text.style.height = curHeight + 'px';
1789 },
1790 growInit: function (options) {
1791 let _this = this;
1792 var locInputs = document.querySelectorAll('[data-grow="auto"]');
1793 for (var i = 0; i < locInputs.length; i++) {
1794 var target = locInputs[i];
1795 var height = options.height || '100px';
1796 var maxHeight = options.maxHeight || '500px';
1797 target.style.overflow = 'hidden';
1798 target.style.resize = 'none';
1799 target.style.height = height + 'px';
1800 target.style.maxHeight = maxHeight + 'px';
1801
1802 target.onkeydown = function () {
1803 _this.grow(this, options);
1804 };
1805 target.onkeyup = function () {
1806 _this.grow(this, options);
1807 };
1808 }
1809 },
1810 getData() {
1811 this.HideDetails();
1812 this.scene = {
1813 type: 'container',
1814 props: {
1815 orientation: 'horizontal'
1816 },
1817 children: generateItems(this.cards.length, i => ({
1818 id: `column${i}`,
1819 boardId: this.cards[i].id,
1820 type: 'container',
1821 name: this.cards[i].column,
1822 ruleType: this.cards[i].type,
1823 ruleStatus: this.cards[i].status,
1824 usersName: this.cards[i].users,
1825 moveToCol: this.cards[i].moveToCol,
1826 ruleName: this.cards[i].ruleName,
1827 boardName: this.cards[i].boardName,
1828 moveToColName: this.cards[i].colName,
1829 progress: this.cards[i].progress,
1830 linkToList: this.cards[i].linkToList,
1831 props: {
1832 orientation: 'vertical',
1833 className: 'card-container'
1834 },
1835 hidden: this.cards[i].hidden,
1836 children: generateItems(this.cards[i].task.length, j => ({
1837 type: 'draggable',
1838 id: `${i}${j}`,
1839 cardId: this.cards[i].task[j].id,
1840 types: this.cards[i].task[j].type,
1841 assigned_user: this.cards[i].task[j].assigned_user,
1842 assigned_user_ids: this.cards[i].task[j].assigned_user_ids,
1843 users: this.cards[i].task[j].users,
1844 existing_tags: this.cards[i].task[j].existing_tags,
1845 props: {
1846 className: 'card',
1847 style: {backgroundColor: 'white'}
1848 },
1849 type: 'card',
1850 child: this.cards[i].task[j].child,
1851 childrens: this.cards[i].task[j].children,
1852 parents: this.cards[i].task[j].parents,
1853 comment: this.cards[i].task[j].comment,
1854 files: '',
1855 userName: this.cards[i].task[j].userName,
1856 data: this.cards[i].task[j].name,
1857 list_data: this.cards[i].task[j].list,
1858 open: this.cards[i].task[j].cardOpen,
1859 textareaShow: this.cards[i].task[j].textareaShow,
1860 description: this.cards[i].task[j].description,
1861 list_id: this.cards[i].task[j].list_id,
1862 board_id: this.cards[i].task[j].multiple_board_id,
1863 date: this.cards[i].task[j].date,
1864 parent_id: this.cards[i].task[j].parent_id,
1865 progress: this.cards[i].task[j].progress,
1866 tags: this.cards[i].task[j].tags,
1867 tagTooltip: this.cards[i].task[j].tagTooltip,
1868 delete: this.cards[i].task[j].name,
1869 priority_label: this.cards[i].task[j].priority_label
1870 }))
1871 })),
1872 };
1873 $('[data-toggle="tooltip"]').tooltip('dispose');
1874 $('#loder-hide').fadeOut()
1875 setTimeout(function () {
1876 $('[data-toggle="tooltip"]').tooltip();
1877 }, 1000)
1878 },
1879 selectChild(id) {
1880 var _this = this;
1881 _this.findChild(id, _this.tree4data)
1882 var is_checked = _this.selectedExistedTask.indexOf(id);
1883 if (is_checked > -1) {
1884 _this.CheckWithChild(id, _this.check_uncheck_child);
1885 } else {
1886 _this.UncheckWithChild(id, _this.check_uncheck_child);
1887 }
1888 },
1889 findChild(id, data) {
1890 if (data.length > 0) {
1891 for (let index = 0; index < data.length; index++) {
1892 if (index !== undefined && data[index].id === id) {
1893 if (data[index].board_parent_id === null) {
1894 this.check_uncheck_child = data[index].children;
1895 }
1896 return true;
1897 } else {
1898 this.findChild(id, data[index].children);
1899 }
1900 }
1901 }
1902
1903 },
1904 CheckWithChild(id, child) {
1905 var _this = this;
1906 if (id !== 0 && _this.selectedExistedTask.indexOf(id) === -1) {
1907 _this.selectedExistedTask.push(id);
1908 }
1909 if (child.length > 0) {
1910 for (let index = 0; index < child.length; index++) {
1911 if (child[index].board_parent_id === null) {
1912 _this.CheckWithChild(child[index].id, child[index].children);
1913 } else {
1914 _this.CheckWithChild(0, child[index].children);
1915 }
1916 }
1917 }
1918 },
1919 UncheckWithChild(id, child) {
1920 var _this = this;
1921 var key = _this.selectedExistedTask.indexOf(id);
1922 if (key !== -1) {
1923 _this.selectedExistedTask.splice(key, 1);
1924 }
1925
1926 if (child.length > 0) {
1927 for (let index = 0; index < child.length; index++) {
1928 _this.UncheckWithChild(child[index].id, child[index].children);
1929 }
1930 }
1931
1932 },
1933 hideChilds(cardId) {
1934 let _this = this;
1935 let data = {
1936 'parent_id': cardId
1937 };
1938 axios.post('/api/hideChildes', data)
1939 .then(response => response.data)
1940 .then(response => {
1941 // _this.$toastr.s("Successfully hide child ! ");
1942 _this.getBoardTask();
1943 _this.boardSocketCall();
1944 })
1945 .catch(error => {
1946
1947 })
1948 },
1949 selectAll() {
1950 if ($('.checkedAll').prop('checked') === false) {
1951 $('.selectAll').prop('checked', false);
1952 this.selectedExistedTask = [];
1953 } else {
1954 $('.selectAll').prop('checked', true);
1955
1956 for (let index = 0; index < this.tree4data.length; index++) {
1957 if (this.tree4data[index].board_parent_id === null) {
1958 this.selectedExistedTask.push(this.tree4data[index].id);
1959 }
1960 this.recursive(this.tree4data[index].children, this.tree4data[index].id);
1961 }
1962 }
1963
1964 },
1965 recursive(child, parent_id) {
1966 for (let index = 0; index < child.length; index++) {
1967 let key = this.selectedExistedTask.indexOf(child[index].id);
1968 let parentKey = this.selectedExistedTask.indexOf(parent_id);
1969 if (key !== -1 && parentKey === -1) {
1970 this.selectedExistedTask.splice(key, 1);
1971 } else {
1972 if (key === -1 && child[index].board_parent_id === null) {
1973 this.selectedExistedTask.push(child[index].id);
1974 }
1975 }
1976 if (child[index].children.length > 0) {
1977 this.recursive(child[index].children, child[index].id);
1978 }
1979 }
1980 },
1981 onColumnDrop(dropResult) {
1982 const scene = Object.assign({}, this.scene);
1983 scene.children = applyDrag(scene.children, dropResult);
1984 this.scene = scene
1985 let data = scene;
1986 $('#loader').modal('show');
1987 axios.post('/api/column-sort', data)
1988 .then(response => response.data)
1989 .then(response => {
1990 setTimeout(() => {
1991 $('#loader').modal('hide');
1992 }, 500);
1993 })
1994 .catch(error => {
1995 setTimeout(() => {
1996 $('#loader').modal('hide');
1997 }, 500);
1998 console.log('sorting failed');
1999 });
2000 this.boardSocketCall();
2001 },
2002 onCardDrop(columnId, boardId, index, dropResult) {
2003 // index = index+1;
2004 let _this = this;
2005 if (dropResult.removedIndex !== null || dropResult.addedIndex !== null) {
2006 // console.log(this.scene.children[index]);
2007 // console.log(this.scene, dropResult);
2008 const scene = Object.assign({}, this.scene);
2009 const column = scene.children.filter(p => p.id === columnId)[0];
2010 const columnIndex = scene.children.indexOf(column);
2011 const newColumn = Object.assign({}, column);
2012 // console.log('col',column);
2013 newColumn.children = applyDrag(newColumn.children, dropResult);
2014 scene.children.splice(columnIndex, 1, newColumn);
2015 // console.log(this.scene.children[index]);
2016 this.scene = scene;
2017 let data = this.scene.children[index];
2018 // console.log("sort",data);
2019 axios.post('/api/card-sort', data)
2020 .then(response => response.data)
2021 .then(response => {
2022 _this.getBoardTask();
2023 setTimeout(() => {
2024 }, 500);
2025 // console.log('sorted');
2026 // _this.$toastr.s("Card successfully Moved ");
2027 })
2028 .catch(error => {
2029 // console.log('sorting failed');
2030 });
2031
2032 if (dropResult.removedIndex === null && dropResult.addedIndex !== null) {
2033 // console.log("Drag started",columnId, boardId, index, dropResult);
2034 let data = {
2035 'id': dropResult.payload.cardId,
2036 'board_parent_id': boardId
2037 }
2038 if (_this.selectedIds.length > 0) {
2039 data.id = _this.selectedIds;
2040 }
2041 // console.log(_this.selectedIds);
2042
2043 $('#loader').modal('show');
2044 axios.post('/api/change-board-parent', data)
2045 .then(response => response.data)
2046 .then(response => {
2047 setTimeout(() => {
2048 $('#loader').modal('hide');
2049
2050 }, 500);
2051
2052 _this.$toastr.s("Card successfully Moved ");
2053 _this.Socket.emit('notification-update', response.users)
2054 })
2055 .catch(error => {
2056 setTimeout(() => {
2057 $('#loader').modal('hide');
2058 }, 500);
2059 });
2060 } else {
2061 // _this.$toastr.s("Card successfully Sorted ");
2062 }
2063 _this.boardSocketCall();
2064 }
2065 },
2066 onDragStart(columnId, boardId, index, dropResult) {
2067 if (dropResult.addedIndex != null) {
2068 }
2069 },
2070 getCardPayload(columnId) {
2071 return index => {
2072 return this.scene.children.filter(p => p.id === columnId)[0].children[index]
2073 }
2074 },
2075 dragStart(dragResult) {
2076 let _this = this;
2077 let dragCardId = dragResult.payload.cardId;
2078 if (!_this.selectedIds.includes(dragCardId)) {
2079 $('.card-list').removeClass('selected-card');
2080 $('#card_' + dragCardId).addClass('selected-card');
2081 _this.selectedIds = [dragCardId];
2082 }
2083
2084 },
2085 dragEnd(dragResult) {
2086 // console.log(dragResult);
2087 },
2088 log(...params) {
2089 // console.log(...params)
2090 },
2091 addColumn() {
2092 $("#addModal").modal('show');
2093 },
2094 setColumn() {
2095
2096 if (!this.addField.name) {
2097 this.addField.error = 'Name is required!';
2098 } else if (!this.nav_id || !this.board_id) {
2099 this.addField.error = 'select board';
2100 } else {
2101 $("#addModal").modal('hide');
2102 let data = {
2103 title: this.addField.name,
2104 color: this.addField.color,
2105 progress: this.addField.progress,
2106 project_id: this.projectId,
2107 nav_id: this.nav_id,
2108 multiple_board_id: this.board_id,
2109 task: [{name: '', date: '', tags: [], clicked: 0}]
2110 };
2111 this.saveBoard(data);
2112
2113 this.getData();
2114 this.addField = {};
2115 }
2116 },
2117 saveBoard(data) {
2118 let _this = this;
2119 axios.post('/api/board-save', data)
2120 .then(response => response.data)
2121 .then(response => {
2122 if (response.success == true) {
2123 _this.editField.progress = response.data.progress;
2124 _this.cards.push({
2125 id: response.data.id,
2126 column: response.data.title,
2127 progress: response.data.progress,
2128 hidden: response.data.hidden,
2129 task: []
2130 });
2131 _this.getBoardTask();
2132 _this.$toastr.s("Board successfully created ");
2133 setTimeout(() => {
2134 swal.close();
2135 }, 1000);
2136 }
2137 _this.boardSocketCall();
2138 })
2139 .catch(error => {
2140 });
2141 },
2142 updateColumSow(index) {
2143 this.updateIndex = index;
2144 this.editField.name = this.cards[index].column;
2145 this.editField.boardId = this.cards[index].id;
2146 this.editField.progress = this.cards[index].progress;
2147 this.editField.color = this.cards[index].color;
2148 this.editField.error = '';
2149
2150 setTimeout(function () {
2151 $("#EditModal").modal('show');
2152 }, 100);
2153 },
2154 updateColumn() {
2155 let _this = this;
2156 if (!this.editField.name || this.editField.name === '') {
2157 this.editField.error = 'Name is required!';
2158 } else {
2159 let data = this.editField;
2160 $("#EditModal").modal('hide');
2161 axios.post('/api/board-modify', data)
2162 .then(response => response.data)
2163 .then(response => {
2164 if (response.success === true) {
2165 _this.cards[_this.updateIndex].column = _this.editField.name;
2166 _this.cards[_this.updateIndex].progress = _this.editField.progress;
2167 _this.$toastr.s("Column successfully updated ");
2168 }
2169 })
2170 .catch(error => {
2171 });
2172 setTimeout(function () {
2173 _this.getBoardTask();
2174 _this.boardSocketCall();
2175 // _this.getData();
2176 // _this.editField = {};
2177 // $("#EditModal").modal('show');
2178 }, 300);
2179 }
2180 },
2181 addExistingTask(index, id) {
2182 this.tree4data = [];
2183 this.subNav = [];
2184 this.selectedNav = 'Select Nav';
2185 this.selectedSubNav = 'Select Nav List';
2186 this.selectedExistedTask = [];
2187 this.currentColumn = id;
2188 this.currentColumnIndex = index;
2189 let _this = this;
2190 axios.get('/api/nav-item/' + this.projectId)
2191 .then(response => response.data)
2192 .then(response => {
2193 _this.nav = response.success;
2194 // _this.$toastr.s("Existing task successfully added ");
2195 })
2196 .catch(error => {
2197 });
2198 this.updateIndex = index;
2199 // this.getAllTask();
2200 $("#addExistingTask").modal('show');
2201 },
2202 showSubNav() {
2203 this.tree4data = [];
2204 let _this = this;
2205 let data = {
2206 'projectId': this.projectId,
2207 'navId': this.selectedNav
2208 };
2209 axios.post('/api/nav-list', data)
2210 .then(response => response.data)
2211 .then(response => {
2212 _this.subNav = response.success;
2213 })
2214 .catch(error => {
2215 });
2216 },
2217 showTransferModel(index, key, cardId, id) {
2218 $('.jquery-accordion-menu').hide();
2219 this.board = [];
2220 this.subBoard = [];
2221 this.boardColumn = [];
2222 this.selectedBoard = 'Select Board';
2223 this.selectedSubBoard = 'Select Board List';
2224 this.selectedExistedTask = [];
2225 this.transferBtn = false;
2226 this.currentColumn = id;
2227 this.currentColumnIndex = index;
2228 let _this = this;
2229 axios.get('/api/nav-item/' + this.projectId)
2230 .then(response => response.data)
2231 .then(response => {
2232
2233 _this.board = response.success;
2234
2235 setTimeout(() => {
2236 $('#transferCard').modal('show');
2237 }, 500);
2238 })
2239 .catch(error => {
2240
2241 });
2242 this.updateIndex = index;
2243 // this.getAllTask();
2244 },
2245 showLinkModel(index, boardId) {
2246 this.nav = [];
2247 this.subNav = [];
2248 this.selectedNav = 'Select Nav';
2249 this.selectedSubNav = 'Select Nav List';
2250 this.selectedExistedTask = [];
2251 this.currentColumn = boardId;
2252 this.currentColumnIndex = index;
2253 let _this = this;
2254 this.linkBtn = false;
2255 axios.get('/api/nav-item/' + this.projectId)
2256 .then(response => response.data)
2257 .then(response => {
2258
2259 _this.nav = response.success;
2260
2261 setTimeout(() => {
2262 $('#listLinkColumn').modal('show');
2263 }, 500);
2264 })
2265 .catch(error => {
2266
2267 });
2268 this.updateIndex = index;
2269
2270 },
2271 linkToCol() {
2272 let _this = this;
2273 let data = {
2274 'projectId': this.projectId,
2275 'columnId': this.currentColumn,
2276 'multiple_list': this.selectedSubNav
2277 }
2278 axios.post('/api/is-linked', data)
2279 .then(response => response.data)
2280 .then(response => {
2281 if (response.success === false) {
2282 this.linkBtn = true;
2283 } else {
2284 //swal('Warning!!', 'That list is already linked. Need to unlink first', 'warning');
2285 _this.$toastr.w("This list is already linked. Need to unlink first");
2286 setTimeout(() => {
2287 swal.close();
2288 }, 1000);
2289 }
2290
2291
2292 })
2293 .catch(error => {
2294 console.log('not added');
2295 });
2296 },
2297 listLinkToCol() {
2298 let _this = this;
2299
2300 let data = {
2301 'projectId': this.projectId,
2302 'columnId': this.currentColumn,
2303 'multiple_list': this.selectedSubNav
2304 }
2305 axios.post('/api/link-list-to-column', data)
2306 .then(response => response.data)
2307 .then(response => {
2308
2309 _this.getBoardTask();
2310 _this.boardSocketCall();
2311
2312 _this.$toastr.s("List successfully linked!");
2313 })
2314 .catch(error => {
2315 // console.log('not added');
2316 });
2317 // swal('Warning!!','Work in progress','warning');
2318 },
2319 unlinklistToCol(index, boardId, linkListId) {
2320 let _this = this;
2321 Swal.fire({
2322 title: 'Are you sure to unlink?',
2323 text: "",
2324 type: 'warning',
2325 icon: 'warning',
2326 showCancelButton: true,
2327 confirmButtonColor: '#3085d6',
2328 cancelButtonColor: '#d33',
2329 confirmButtonText: "Yes, unlink it!"
2330 }).then((result) => {
2331 if (result.value) {
2332 let data = {
2333 'linkListId': linkListId,
2334 'projectId': _this.projectId,
2335 'columnId': boardId,
2336 'multiple_list': _this.selectedSubNav
2337 }
2338 axios.post('/api/unlink-list-to-column', data)
2339 .then(response => response.data)
2340 .then(response => {
2341 _this.getBoardTask();
2342 _this.boardSocketCall();
2343 // swal("Unlinked!", "Successfully Unlinked", "success");
2344 _this.$toastr.s("Successfully Unlinked");
2345 setTimeout(() => {
2346 swal.close();
2347 }, 1000);
2348 })
2349 .catch(error => {
2350 console.log('not added');
2351 });
2352 }
2353 })
2354 },
2355 showSubBoard() {
2356 let _this = this;
2357 this.subBoard = [];
2358 this.boardColumn = [];
2359 this.transferBtn = false;
2360 this.selectedSubBoard = 'Select Board List';
2361 let data = {
2362 'projectId': this.projectId,
2363 'boardId': this.selectedBoard
2364 };
2365 axios.post('/api/board-list', data)
2366 .then(response => response.data)
2367 .then(response => {
2368 _this.subBoard = response.success;
2369
2370 })
2371 .catch(error => {
2372 });
2373 },
2374 getColumn() {
2375 let _this = this;
2376 this.selectedBoardColumn = 'Select Board Column';
2377 this.transferBtn = false;
2378 let data = {
2379 id: this.projectId,
2380 nav_id: this.selectedBoard,
2381 list_id: this.selectedSubBoard,
2382 };
2383
2384 axios.post('/api/board-column', data)
2385 .then(response => response.data)
2386 .then(response => {
2387 // console.log(selectedBoard,selectedSubBoard,selectedBoardColumn);
2388 _this.boardColumn = response.data;
2389 })
2390 .catch(error => {
2391
2392 });
2393
2394 },
2395 getBttn() {
2396 this.transferBtn = true;
2397 },
2398 transferCardToOtherBoard() {
2399 var _this = this;
2400 // return 0;
2401 let data = {
2402 'cardId': this.selectedIds,
2403 'board_parent_id': this.selectedBoardColumn,
2404 };
2405 axios.post('/api/Transfer-to-board', data)
2406 .then(response => response.data)
2407 .then(response => {
2408 if (response.success) {
2409 _this.getBoardTask();
2410 _this.boardSocketCall();
2411 $('#transferCard').modal('hide');
2412 _this.$toastr.s("Card Successfully Transferred");
2413 } else {
2414 $('#transferCard').modal('hide');
2415 }
2416 // _this.boardColumn = response.data;
2417 })
2418 .catch(error => {
2419
2420 });
2421 },
2422 transferColumnToOtherBoard(index, id) {
2423
2424 this.board = [];
2425 this.subBoard = [];
2426 this.boardColumn = [];
2427 this.selectedBoard = 'Select Board';
2428 this.selectedSubBoard = 'Select Board List';
2429 this.selectedExistedTask = [];
2430 this.transferBtn = false;
2431 this.currentColumn = id;
2432 this.currentColumnIndex = index;
2433 let _this = this;
2434 axios.get('/api/nav-item/' + this.projectId)
2435 .then(response => response.data)
2436 .then(response => {
2437 _this.board = response.success;
2438 _this.$toastr.s("Column Successfully Transferred");
2439 setTimeout(() => {
2440 $('#transferColumn').modal('show');
2441 }, 500);
2442 })
2443 .catch(error => {
2444
2445 });
2446 this.updateIndex = index;
2447 },
2448 transferColumnToOtherBoardSave() {
2449 var _this = this;
2450
2451 let data = {
2452 'columnId': this.currentColumn,
2453 'multiple_board_id': this.selectedSubBoard,
2454 };
2455 axios.post('/api/Transfer-column-to-board', data)
2456 .then(response => response.data)
2457 .then(response => {
2458
2459 if (response.success) {
2460 _this.getBoardTask();
2461 _this.boardSocketCall();
2462 $('#transferColumn').modal('hide');
2463 _this.$toastr.s("Column Successfully Transferred");
2464 } else {
2465 $('#transferColumn').modal('hide');
2466 }
2467 // _this.boardColumn = response.data;
2468 })
2469 .catch(error => {
2470
2471 });
2472 },
2473 RemoveNodeAndChildren() {
2474 var _this = this;
2475 var postData = {
2476 id: this.selectedData.cardId,
2477 text: this.selectedData.data
2478 };
2479 Swal.fire({
2480 title: "Are you sure",
2481 text: "You want to delete this task?",
2482 type: "warning",
2483 showCancelButton: true,
2484 confirmButtonColor: '#3085d6',
2485 cancelButtonColor: '#d33',
2486 confirmButtonText: "Yes, delete it!"
2487
2488 }).then((result) => {
2489 if (result.value) {
2490 axios.post('/api/task-list/delete-task', postData)
2491 .then(response => response.data)
2492 .then(response => {
2493 _this.getBoardTask();
2494 _this.boardSocketCall();
2495 // swal("Deleted!", "Successfully deleted task", "success");
2496 _this.$toastr.w("Card Successfully Deleted !");
2497 setTimeout(() => {
2498 swal.close();
2499 }, 1000);
2500 })
2501 .catch(error => {
2502 console.log('Api for delete task not Working !!!')
2503 });
2504 }
2505 })
2506
2507 },
2508 getBoardTask() {
2509 var _this = this;
2510 // $('#loder-hide').fadeIn();
2511 // this.scene = {};
2512
2513 var datePicker = new Date();
2514 datePicker.setDate(datePicker.getDate() - 1);
2515 _this.disabledDates = {
2516 to: datePicker, // Disable all dates up to specific date
2517 };
2518 var tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
2519 let data = {
2520 projectId: this.projectId,
2521 board_id: this.board_id,
2522 nav_id: this.nav_id,
2523 tz :tz
2524 };
2525 axios.post('/api/board-task', data)
2526 .then(response => response.data)
2527 .then(response => {
2528 if (response.checkEmptyColumn === 0){
2529 Swal.fire({
2530 title: "Your Filter Has 0 Results",
2531 type: "warning",
2532 icon: 'warning',
2533 showCancelButton: true,
2534 confirmButtonColor: '#3085d6',
2535 cancelButtonColor: '#d33',
2536 confirmButtonText: "Reset Filter"
2537 }).then((result) => {
2538 if (result.value) {
2539 _this.getBoardTaskFilter('all');
2540 swal.close();
2541 }
2542 })
2543
2544 }else {
2545 _this.allCardIds = response.allCardIds;
2546 _this.cards = response.success;
2547 _this.allUsers = response.allUsers;
2548 _this.allTags = response.allTags;
2549 _this.getData();
2550 Bus.$emit('AddedFilterSuccess');
2551 }
2552 })
2553 .catch(error => {
2554 });
2555 },
2556 getBoardTaskFilter(type) {
2557 var _this = this;
2558 var tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
2559 let data = {
2560 projectId: this.projectId,
2561 board_id: this.board_id,
2562 nav_id: this.nav_id,
2563 type: type,
2564 users: [],
2565 filter : this.selectedPriorites,
2566 tz :tz
2567 };
2568 if (this.userIdList.length > 0) {
2569 data.users = this.userIdList;
2570 }
2571 axios.post('/api/board-task-filter', data)
2572 .then(response => response.data)
2573 .then(response => {
2574 if (response.checkEmptyColumn === 0){
2575 Swal.fire({
2576 title: "Your Filter Has 0 Results",
2577 type: "warning",
2578 icon: 'warning',
2579 showCancelButton: true,
2580 confirmButtonColor: '#3085d6',
2581 cancelButtonColor: '#d33',
2582 confirmButtonText: 'Reset Filter'
2583
2584 }).then((result) => {
2585 if (result.value) {
2586 _this.getBoardTaskFilter('all');
2587 Swal.close();
2588 }
2589 })
2590 }else {
2591 _this.allCardIds = response.allCardIds;
2592 _this.cards = response.success;
2593 _this.allUsers = response.allUsers;
2594 _this.allTags = response.allTags;
2595 _this.getData();
2596 Bus.$emit('AddedFilterSuccess');
2597 }
2598 })
2599 .catch(error => {
2600 });
2601 this.filter_types = null;
2602 },
2603 clearInputFeild() {
2604 $("#EditModal").modal('hide');
2605 $("#addModal").modal('hide');
2606 $("#addExistingTask").modal('hide');
2607 this.addField = {};
2608 },
2609 AddExistingTasks() {
2610 let _this = this;
2611 let total = this.selectedExistedTask.length;
2612 if (total <= 0) {
2613 swal('Warning!', 'No Task To Add', 'warning');
2614 setTimeout(() => {
2615 swal.close();
2616 }, 1000);
2617 return false;
2618 }
2619 let data = {
2620 'multiple_board_id': this.selectedSubBoard,
2621 'tasks': this.selectedExistedTask,
2622 'id': this.currentColumn
2623 };
2624 axios.post('/api/add-existing-tasks', data)
2625 .then(response => response.data)
2626 .then(response => {
2627 for (var i = 0; i < response.data.length; i++) {
2628 _this.cards[_this.currentColumnIndex].task.push({
2629 id: response.data[i].id,
2630 name: response.data[i].title,
2631 date: response.data[i].date,
2632 tags: response.data[i].tag,
2633 types: 'task',
2634 clicked: 0
2635 });
2636 // _this.cards[_this.updateIndex].task.push({name: _this.selectedExistedTask[i], date: '', tags: [], clicked: 0})
2637 }
2638 // _this.getData()
2639 _this.getBoardTask();
2640 _this.boardSocketCall();
2641 })
2642 .catch(error => {
2643 });
2644
2645 this.updateIndex = null;
2646 this.selectedExistedTask = [];
2647 $("#addExistingTask").modal('hide');
2648 },
2649 makeInput(e, id) {
2650 let _this = this;
2651 $('#title' + id).removeClass('card-title-blur');
2652 $('#title' + id).addClass('card-title-focus');
2653 $('.dropdowns-card-user').hide();
2654
2655 // $('.inp').addClass('input-hide');
2656 // $('.inp').removeClass('form-control');
2657 // $(e.target).removeClass('input-hide');
2658 // $(e.target).addClass('form-control');
2659 //
2660 // var option = {
2661 // height: 50,
2662 // maxHeight: 200
2663 // };
2664 // _this.growInit(option);
2665 },
2666 addCard(index, id) {
2667 let _this = this;
2668 axios.post('/api/card-add', {'id': id})
2669 .then(response => response.data)
2670 .then(response => {
2671 if (response.success == true) {
2672 let data = response.data;
2673 _this.cards[index].task.unshift({
2674 id: data.id,
2675 name: data.title,
2676 date: data.date,
2677 tags: [],
2678 assigned_user: [],
2679 users: [],
2680 clicked: 0,
2681 textareaShow: true
2682 });
2683 let keys = _this.cards[index].task.length - 1;
2684 _this.getBoardTask();
2685 _this.$toastr.s("Card Successfully added !");
2686 setTimeout(function () {
2687 $('#title' + data.id).click();
2688 $('#title' + data.id).focus();
2689 }, 1000)
2690 }
2691 _this.boardSocketCall();
2692 })
2693 .catch(error => {
2694 });
2695 },
2696 deleteCard(index, cardIndex, id) {
2697 let _this = this;
2698 Swal.fire({
2699 title: 'Are you sure you want to delete this card?',
2700 text: "",
2701 icon: 'warning',
2702 showCancelButton: true,
2703 confirmButtonColor: '#3085d6',
2704 cancelButtonColor: '#d33',
2705 confirmButtonText: 'Yes, delete it!'
2706
2707 }).then((result) => {
2708 if (result.value) {
2709 if (_this.cards[index].task[cardIndex].id == id) {
2710 axios.get('/api/card-delete/' + id)
2711 .then(response => response.data)
2712 .then(response => {
2713 if (response.success == true) {
2714 let keys = _this.cards[index].task.length - 1;
2715 _this.getBoardTask();
2716 _this.getData();
2717 _this.boardSocketCall();
2718 setTimeout(function () {
2719 $('#id' + index + keys).click();
2720 $('#id' + index + keys).focus();
2721 }, 100)
2722 _this.$toastr.s("Card Successfully deleted !");
2723 setTimeout(() => {
2724 swal.close();
2725 }, 1000);
2726 }
2727 })
2728 .catch(error => {
2729 // console.log('error => ' + error);
2730 });
2731 }
2732 }
2733 })
2734
2735 },
2736 deleteTask(index, cardIndex, id) {
2737 let _this = this;
2738 Swal.fire({
2739 title: 'Are you sure',
2740 text: "You want to remove this task?",
2741 type: 'warning',
2742 icon: 'warning',
2743 showCancelButton: true,
2744 confirmButtonColor: '#3085d6',
2745 cancelButtonColor: '#d33',
2746 confirmButtonText: "Yes, remove it"
2747 }).then((result) => {
2748 if (result.value) {
2749 if (_this.cards[index].task[cardIndex].id === id) {
2750 axios.get('/api/board-task-delete/' + id)
2751 .then(response => response.data)
2752 .then(response => {
2753 _this.cards[index].task.splice(cardIndex, 1);
2754 _this.getData();
2755 _this.boardSocketCall();
2756 _this.$toastr.w("Card Successfully removed !");
2757 setTimeout(() => {
2758 swal.close();
2759 }, 1000);
2760 })
2761 .catch(error => {
2762 });
2763 } else {
2764 // alert("couden't delete");
2765 }
2766 }
2767 })
2768
2769 },
2770 deleteAllTasks(index, cardIndex, id) {
2771 let _this = this;
2772 id = {
2773 'id' : this.selectedIds
2774 };
2775 Swal.fire({
2776 title: 'Are you sure',
2777 text: "You want to remove this task?",
2778 type: 'warning',
2779 icon: 'warning',
2780 showCancelButton: true,
2781 confirmButtonColor: '#3085d6',
2782 cancelButtonColor: '#d33',
2783 confirmButtonText: "Yes, remove it"
2784 }).then((result) => {
2785 if (result.value) {
2786 axios.post('/api/board-task-delete/', id)
2787 .then(response => response.data)
2788 .then(response => {
2789 _this.cards[index].task.splice(cardIndex, 1);
2790 _this.getBoardTask();
2791 _this.boardSocketCall();
2792 _this.selectedIds = [];
2793 $('.card-list').removeClass('selected-card');
2794 _this.$toastr.w("Card Successfully removed !");
2795 setTimeout(() => {
2796 Swal.close();
2797 }, 1000);
2798 })
2799 .catch(error => {
2800
2801 });
2802 }
2803 })
2804
2805 },
2806 addTag(e, index, key) {
2807 if (e.which === 13) {
2808 this.cards[index].task[key].tags.splice(0, 1, this.tag);
2809 this.tag = null;
2810 }
2811 },
2812 addExistingTag(index, tagIndx, key, card, dntfrgt = '') {
2813 let _this = this;
2814 if (dntfrgt !== '') {
2815 var postData = {
2816 id: card.cardId,
2817 tags: "Dont Forget",
2818 color: "#FF0000",
2819 type: 'task',
2820 };
2821 } else {
2822 var postData = {
2823 id: card.cardId,
2824 tags: this.cards[index].task[key].existing_tags[tagIndx].title,
2825 color: this.cards[index].task[key].existing_tags[tagIndx].color,
2826 type: 'task',
2827 };
2828 }
2829 axios.post('/api/task-list/add-tag', postData)
2830 .then(response => response.data)
2831 .then(response => {
2832 // _this.cards[index].task[key].tags.push(data);
2833 // _this.cards[index].task[key].existing_tags.splice(tagIndx, 1);
2834 // $('#dropdown' + cardId).toggle();
2835 _this.$toastr.s("Tag Successfully Added !");
2836 setTimeout(function () {
2837 _this.getBoardTask();
2838 _this.listSocketCall(card.list_id);
2839 }, 100);
2840 })
2841 .catch(error => {
2842 console.log("1st error =>" + error)
2843 });
2844 },
2845 deleteColumn(index, id) {
2846 let _this = this;
2847 Swal.fire({
2848 title: "Are you sure?",
2849 text: "",
2850 type: "warning",
2851 icon: 'warning',
2852 showCancelButton: true,
2853 confirmButtonColor: '#3085d6',
2854 cancelButtonColor: '#d33',
2855 confirmButtonText: "Yes, delete it!"
2856 }).then((result) => {
2857 if (result.value) {
2858 axios.get('/api/board-delete/' + id)
2859 .then(response => response.data)
2860 .then(response => {
2861 if (response.success) {
2862 _this.cards.splice(index, 1);
2863 _this.getData();
2864 _this.boardSocketCall();
2865 // swal("Deleted!", "Your imaginary file has been deleted.", "success");
2866 _this.$toastr.s("Column Successfully Deleted !");
2867
2868 setTimeout(() => {
2869 swal.close();
2870 }, 1000);
2871 }
2872 })
2873 .catch(error => {
2874 });
2875 }
2876 })
2877
2878 },
2879 hideItem(index) {
2880
2881 },
2882 hideColumn(index, id) {
2883 let _this = this;
2884 let ishide = {
2885 "hide": 1
2886 };
2887 axios.post('/api/board-hide/' + id, ishide)
2888 .then(response => response.data)
2889 .then(response => {
2890 _this.cards[index].hidden = 1;
2891 _this.getData();
2892 _this.boardSocketCall();
2893 })
2894 .catch(error => {
2895 });
2896 },
2897 showColumn(index, id) {
2898 let _this = this;
2899 let ishide = {
2900 "hide": 0
2901 };
2902 axios.post('/api/board-hide/' + id, ishide)
2903 .then(response => response.data)
2904 .then(response => {
2905 _this.cards[index].hidden = 0;
2906 _this.getData();
2907 _this.boardSocketCall();
2908 })
2909 .catch(error => {
2910 });
2911 },
2912 preventEnter(e) {
2913 if (e.which == 13) {
2914 e.preventDefault();
2915 // alert('Enter pressed');
2916 }
2917 },
2918 cardTitlePress(e, card, index, key) {
2919 $('.dropdowns-card-user').hide();
2920 let _this = this;
2921 let title = $('#title' + card.cardId).text();
2922 if (e.which === 13 ) {
2923 _this.addCard(0,_this.selectedColumn);
2924 }
2925 if (e.which === 32 || e.which === 13) {
2926 // || e.which === 8
2927 _this.triggers = false;
2928 _this.userNames = '';
2929 _this.projectUsers = null;
2930 $('.dropdowns-card-user').hide();
2931 }
2932 if (_this.triggers == true && e.which !== 16 && e.which !== 50) {
2933 var lastIndex = title.lastIndexOf(" ");
2934
2935 let str = title.substring(lastIndex);
2936 if (str.includes('@')) {
2937 let notKeys = ["Backspace", "ScrollLock", "null", "NumLock", "Tab", "ArrowLeft", "ArrowDown", "ArrowRight", "ArrowUp"];
2938 if (notKeys.includes(e.key) === false) {
2939 _this.userNames += e.key;
2940 }
2941 if (e.key === "Backspace") {
2942 _this.userNames = _this.userNames.slice(0, -1);
2943 }
2944 axios.post('/api/task-list/search-result', {'user_name': _this.userNames})
2945 .then(response => response.data)
2946 .then(response => {
2947 _this.projectUsers = response.search_user;
2948 $('.dropdowns-card-user').hide();
2949 if (_this.projectUsers.length > 0) {
2950 $('#titleUserMention' + card.cardId).show();
2951 }
2952 })
2953 .catch(error => {
2954 console.log('search user is not Working !!!')
2955 });
2956 }
2957 }
2958
2959 if (e.shiftKey && e.which == 50) {
2960 _this.allTags = null;
2961 _this.triggers = true;
2962 _this.commentsData = $('#title' + card.cardId).text();
2963 axios.get('/api/task-list/all-suggest-user')
2964 .then(response => response.data)
2965 .then(response => {
2966 // _this.projectUsers = response.search_user;
2967 $('.dropdowns-card-user').hide();
2968 // $('#titleUserMention' + card.cardId).show();
2969 })
2970 .catch(error => {
2971 console.log('All suggest user api not working')
2972 })
2973 }
2974 if (e.shiftKey && e.which == 51) {
2975 _this.projectUsers = null;
2976 _this.tagTriggers = true;
2977 _this.commentsData = $('#title' + card.cardId).text();
2978 axios.get('/api/task-list/all-tag-for-manage')
2979 .then(response => response.data)
2980 .then(response => {
2981 _this.allTags = response.tags;
2982 $('.dropdowns-card-user').hide();
2983 $('#titleUserMention' + card.cardId).show();
2984 })
2985 .catch(error => {
2986 console.log('All suggest user api not working')
2987 })
2988 }
2989 },
2990 SearchTaskByAssignedUsers(id, name, card, user) {
2991 let _this = this;
2992 $('#title' + card.cardId).focus();
2993 _this.assignUserToTask(user, 0, 0, card);
2994 $('#title' + card.cardId).html(_this.commentsData + '' + name + ' ');
2995 _this.projectUsers = null;
2996 $('.dropdowns-card-user').hide();
2997 },
2998 tagMention(card, tag, index, tagIndx, key) {
2999 let _this = this;
3000 $('#title' + card.cardId).focus();
3001 $('#title' + card.cardId).html(_this.commentsData + '' + tag.title + ' ');
3002 _this.addExistingTag(index, tagIndx, key, card, '');
3003 _this.allTags = null;
3004 $('.dropdowns-card-user').hide();
3005 },
3006 showItem(e, data, index, child_key) {
3007
3008 $('#title' + data.cardId).addClass('card-title-blur');
3009 $('#title' + data.cardId).removeClass('card-title-focus');
3010 // let attData = $(e.target).attr('data-text');
3011 // let attDataNew = e.target.value;
3012 // $('.dropdowns-card-user').hide();
3013 setTimeout(() => {
3014 $('.dropdowns-card-user').hide();
3015 }, 300);
3016 let attDataNew = $('#title' + data.cardId).text();
3017 data.data = attDataNew;
3018 this.saveData(data, index, child_key);
3019 },
3020 showHideTextarea(id) {
3021 let _this = this;
3022
3023 $('.inp').addClass('input-hide');
3024 $('.inp').removeClass('form-control');
3025 $(id).removeClass('input-hide');
3026 $(id).addClass('form-control');
3027 setTimeout(() => {
3028 $(id).click();
3029 $(id).focus();
3030 }, 100);
3031 var option = {
3032 height: 50,
3033 maxHeight: 200
3034 };
3035 _this.growInit(option);
3036 },
3037 saveData(data, index, child_key) {
3038 let _this = this;
3039 if (data.data === "") {
3040 _this.getBoardTask();
3041 // swal('Blank!', 'Title is required!', 'warning');
3042 _this.$toastr.e("Title is required! !");
3043 _this.deleteCard(index, child_key, data.cardId);
3044
3045 } else {
3046 let title = {
3047 'title': data.data
3048 };
3049 axios.post('/api/card-update/' + data.cardId, title)
3050 .then(response => response.data)
3051 .then(response => {
3052 _this.cards[index].task[child_key].name = data.data;
3053 _this.getData();
3054 _this.listSocketCall(data.list_id);
3055 _this.Socket.emit('notification-update',response.users)
3056 })
3057 .catch(error => {
3058 });
3059 }
3060 },
3061 saveCardData(e, data) {
3062 if (e.which === 13) {
3063 $('.inp').addClass('input-hide');
3064 $('.inp').removeClass('form-control');
3065 }
3066 },
3067 // dateClose(card){
3068 // this.selectedCard = card;
3069 // console.log(this.selectedCard);
3070
3071 // },
3072 updateDate(date) {
3073 var _this = this;
3074 date = new Date(date);
3075 var month = (parseFloat(date.getMonth() + 1) > 9) ? parseFloat(date.getMonth() + 1) : '0' + parseFloat(date.getMonth() + 1);
3076 var formatedDate = date.getFullYear() + '-' + month + '-' + date.getDate() + ' 23:59:00';
3077
3078 var tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
3079 setTimeout(function () {
3080 let data = {
3081 'date' : formatedDate,
3082 'tz' : tz,
3083 };
3084 axios.post('/api/card-update/' + _this.selectedCard, data)
3085 .then(response => response.data)
3086 .then(response => {
3087 _this.listSocketCall(card.list_id);
3088 _this.Socket.emit('notification-update',response.users)
3089 _this.$toastr.e("Date Successfully updated!");
3090 })
3091 .catch(error => {
3092 });
3093 }, 300)
3094 },
3095 generateColor() {
3096 var myColor = '#000000';
3097 myColor = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
3098 return myColor;
3099 },
3100 changeTag(tags, card, columnIndex, cardIndex) {
3101 var _this = this;
3102 var old = this.cards[columnIndex].task[cardIndex].tags.length;
3103 var newl = tags.length;
3104 let cardTags = null;
3105 if (newl > old) {
3106 this.tags = tags;
3107
3108 var color = (this.tags[newl - 1].text === 'Dont Forget') ? '#ff0000' : _this.generateColor();
3109 var postData = {
3110 id: card.cardId,
3111 tags: _this.tags[newl - 1].text,
3112 color: color,
3113 type: 'task',
3114 };
3115 axios.post('/api/task-list/add-tag', postData)
3116 .then(response => response.data)
3117 .then(response => {
3118 _this.$toastr.s("Tag Successfully Changed!");
3119 setTimeout(function () {
3120 _this.getBoardTask();
3121 _this.listSocketCall(card.list_id)
3122 $('.dropdown-menu').removeClass('show');
3123 // _this.getData();
3124 }, 100);
3125 })
3126 .catch(error => {
3127 console.log("2nd error =>" + error)
3128 });
3129 }
3130 },
3131 deleteCardTag(obj, card, columnIndex, cardIndex) {
3132 var _this = this;
3133 var postData = {
3134 assign_id: obj.tag.assign_id,
3135 // id: obj.tag.id,
3136 };
3137 if (obj.tag.text !== 'Dont Forget') {
3138 axios.post('/api/task-list/delete-tag', postData)
3139 .then(response => response.data)
3140 .then(response => {
3141 _this.cards[columnIndex].task[cardIndex].tags.splice(obj.index, 1);
3142 setTimeout(function () {
3143 _this.getBoardTask();
3144 _this.listSocketCall(card.list_id);
3145 _this.$toastr.w("Tag Successfully deleted!");
3146 }, 100);
3147 _this.tags = [];
3148 })
3149 .catch(error => {
3150 console.log('Api for delete tag not Working !!!')
3151 });
3152 }
3153
3154 },
3155 getAllTask() {
3156 this.tree4data = [];
3157 let data = {
3158 id: this.projectId,
3159 nav_id: this.selectedNav,
3160 list_id: this.selectedSubNav,
3161 };
3162 axios.post('/api/all-task-list', data)
3163 .then(response => response.data)
3164 .then(response => {
3165 this.tree4data = response.task_list;
3166 })
3167 .catch(error => {
3168
3169 });
3170 },
3171 showLog(card) {
3172 var _this = this;
3173 $('#title' + card.cardId).blur();
3174
3175 setTimeout(function () {
3176 _this.ShowDetails();
3177 $('#_file').click();
3178 $('#_details').click();
3179 }, 300)
3180
3181 },
3182 selectCard(card, child) {
3183 this.selectedData = card;
3184 this.selectedCard = card.cardId;
3185 this.task_logs = null;
3186 this.HideDetails();
3187 $('.card-list').css("background-color", "#ffffff");
3188 $('#card_' + this.selectedCard).css("background-color", "#ddf3fd");
3189 },
3190 ShowDetails() {
3191 var _this = this;
3192 if (_this.selectedData != null && _this.selectedData.sort_id !== -2) {
3193 $('#task_width').removeClass('task_width');
3194 $('#task_width').addClass('task_widthNormal');
3195 // $('#details').removeClass('details');
3196 // $('#details').addClass('detailsShow');
3197 $('#details').addClass('details-show');
3198 }
3199 },
3200 Add_Priority(priority, card) {
3201 var _this = this;
3202 var data = {
3203 ids: (card == null) ? _this.selectedIds : [card.cardId],
3204 priority: priority
3205 }
3206 axios.post('/api/task-list/add-priority', data)
3207 .then(response => response.data)
3208 .then(response => {
3209 _this.getBoardTask();
3210 (card == null) ? _this.boardSocketCall() : _this.listSocketCall(card.list_id);
3211 _this.selectedIds = [];
3212 $('.card-list').removeClass('selected-card');
3213 $('.jquery-accordion-menu').hide();
3214 _this.$toastr.s("Priority Successfully Added!");
3215 })
3216 .catch(error => {
3217 console.log('Api for task add priority not Working !!!')
3218 });
3219 },
3220 RemovePriority(card) {
3221 var _this = this;
3222 var data = {
3223 ids: (card == null) ? _this.selectedIds : [card.cardId],
3224 priority: null
3225 }
3226 axios.post('/api/task-list/add-priority', data)
3227 .then(response => response.data)
3228 .then(response => {
3229 _this.getBoardTask();
3230 (card == null) ? _this.boardSocketCall() : _this.listSocketCall(card.list_id);
3231 _this.selectedIds = [];
3232 $('.card-list').removeClass('selected-card');
3233 $('.jquery-accordion-menu').hide();
3234 _this.$toastr.w("Priority Successfully Removed!");
3235 })
3236 .catch(error => {
3237 console.log('Api for task add priority not Working !!!')
3238 });
3239 },
3240 HideDetails() {
3241 // this.getBoardTask();
3242 $('#task_width').addClass('task_width');
3243 $('#task_width').removeClass('task_widthNormal');
3244 // $('#details').addClass('details');
3245 // $('#details').removeClass('detailsShow');
3246 $('#details').removeClass('details-show');
3247 },
3248 ShowTextArea(data) {
3249 var _this = this;
3250 $('.SubmitButton').show();
3251 var option = {
3252 height: 50,
3253 maxHeight: 200
3254 };
3255 _this.growInit(option);
3256 },
3257 showAssignedUserRemoveButton(data) {
3258
3259 $('[data-toggle="tooltip"]').tooltip('hide');
3260
3261 setTimeout(function () {
3262 $('#remove-assign-user' + data.cardId).toggleClass('remove-assign-user');
3263 $('#remove-assign-user' + data.cardId).removeClass('remove-assigned');
3264 }, 500)
3265
3266 },
3267 HideCustomMenu() {
3268 $('.jquery-accordion-menu').hide();
3269 },
3270 makeItClick(e, card, child, index, key, boardId) {
3271 this.currentColumn = boardId;
3272 this.currentColumnIndex = index;
3273 this.currentColumnKey = key;
3274 this.selectedCards = card;
3275 var _this = this;
3276 if (e.ctrlKey && e.which === 1) {
3277 if (_this.selectedIds.includes(card.cardId)) {
3278 var indexs = _this.selectedIds.indexOf(card.cardId);
3279 if (indexs > -1) {
3280 $('#card_' + _this.selectedIds[indexs]).removeClass('selected-card');
3281 _this.selectedIds.splice(indexs, 1);
3282 }
3283 } else {
3284 _this.selectedIds.push(card.cardId);
3285 }
3286 for (let index = 0; index < _this.selectedIds.length; index++) {
3287 $('#card_' + _this.selectedIds[index]).addClass('selected-card');
3288 }
3289 } else if (e.shiftKey && e.which === 1) {
3290 var first = _this.shift_first;
3291 var last = card.cardId;
3292 var flag = 0;
3293 var flag1 = 0;
3294 var index_last = _this.allCardIds.indexOf(last);
3295 var index_first = _this.allCardIds.indexOf(first);
3296 if (index_first > index_last) {
3297 first = card.cardId;
3298 index_first = _this.allCardIds.indexOf(first);
3299 last = _this.shift_first;
3300 }
3301 _this.selectedIds = [];
3302 $('.card-list').removeClass('selected-card');
3303 for (var i = index_first; i <= _this.allCardIds.length; i++) {
3304 if (_this.allCardIds[i] === first) {
3305 flag = 1;
3306 flag1 = 1;
3307 }
3308 if (flag === 1) {
3309 _this.selectedIds.push(_this.allCardIds[i]);
3310 // $('#click' + _this.allCardIds[i]).addClass('clicked');
3311 $('#card_' + _this.allCardIds[i]).addClass('selected-card');
3312 }
3313 if (flag1 === 1 && _this.allCardIds[i] === last) {
3314 flag = 0;
3315 flag1 = 0;
3316 break;
3317 }
3318 }
3319 } else if (e.which === 1) {
3320 _this.selectedIds = [];
3321 _this.selectedIds.push(card.cardId);
3322 _this.shift_first = card.cardId;
3323
3324 this.selectedData = card;
3325 this.selectedCard = card.cardId;
3326 this.task_logs = null;
3327 this.HideDetails();
3328 $('.card-list').removeClass('selected-card');
3329 $('#card_' + this.selectedCard).addClass('selected-card');
3330
3331
3332 } else if (e.which === 3) {
3333 e.preventDefault();
3334 e.stopPropagation();
3335 if (_this.context_menu_flag !== 1) {
3336 $('#rmenu').addClass('menu-show');
3337 let target = $(e.target);
3338 let w = target.closest('#board_view_list').width();
3339 let h = target.closest('#board_view_list').height();
3340 let p = target.closest('#board_view_list').offset();
3341 let left = e.clientX - p.left;
3342 let top = e.clientY - p.top;
3343
3344 let clickH = $('.jquery-accordion-menu').height();
3345 clickH = clickH < 150 ? 400 : clickH;
3346 if ((w - left) < 230) {
3347 left = w - 250;
3348 }
3349 if (h < top + clickH) {
3350 top = top - (top + clickH - h);
3351 }
3352 if (top < 10) {
3353 top = 10;
3354 }
3355
3356 let ttarget = target.closest('#board_view_list').find('.jquery-accordion-menu');
3357
3358 if (_this.selectedIds.length > 0) {
3359 var index = _this.selectedIds.indexOf(card.cardId);
3360 if (index > -1) {
3361 ttarget.css({
3362 top: top,
3363 left: left,
3364 }).fadeIn();
3365 } else {
3366 $('.eachItemRow').removeClass('clicked');
3367
3368 $('.jquery-accordion-menu').hide();
3369 _this.selectedIds = [];
3370 $('.card-list').removeClass('selected-card');
3371 }
3372 }
3373 }
3374 } else if (e.ctrlKey && e.which === 65) {
3375 // e.target.setSelectionRange(0, card.text.length);
3376 }
3377 },
3378 removeAssignedUser(user, card) {
3379 var _this = this;
3380 var postData = {
3381 user_id: user.id,
3382 task_id: card.cardId
3383 };
3384 axios.post('/api/task-list/assign-user-remove', postData)
3385 .then(response => response.data)
3386 .then(response => {
3387 if (response === 'success') {
3388 // _this.cards[index].task[key].assigned_user.splice(0,1);
3389 // _this.cards[index].task[key].assigned_user_ids.splice(0,1);
3390 _this.getBoardTask();
3391 _this.listSocketCall(card.list_id);
3392 // let mailData = {
3393 // subject : "Removed from a card",
3394 // body : "You are removed from a card that you are assigned on.",
3395 // email : "email_whenRemovedFromTask",
3396 // generalBody : user.name+" is removed from a card ("+card.data+") ",
3397 // user_id : user.id
3398 // };
3399 // _this.sendMail(mailData);
3400 _this.Socket.emit('notification-update',response.users);
3401 _this.$toastr.w("Assign-User Successfully Removed!");
3402
3403 }
3404 })
3405 .catch(error => {
3406 console.log('Api assign-user-remove is not Working !!!')
3407 });
3408 },
3409 assignUserToTask(user, index, key, data) {
3410 var _this = this;
3411 var postData = {
3412 task_id: data.cardId,
3413 user_id: user.id
3414 };
3415 axios.post('/api/task-list/assign-user', postData)
3416 .then(response => response.data)
3417 .then(response => {
3418 if (response.success === 'success') {
3419 _this.$toastr.s("Successfully Assign user to task !");
3420 setTimeout(function () {
3421 _this.getBoardTask();
3422 _this.listSocketCall(data.list_id);
3423 // let mailData = {
3424 // subject : "Added to a card",
3425 // body : "You are assigned on a card",
3426 // email : "email_whenAddedToTask",
3427 // generalBody : "A Card ( "+data.data+" ) is assigned to "+user.name,
3428 // user_id : user.id
3429 // };
3430 // _this.sendMail(mailData);
3431 _this.Socket.emit('notification-update', response.users);
3432 }, 100);
3433 }
3434 })
3435 .catch(error => {
3436 _this.$toastr.e("Api is not Working !!!");
3437 });
3438 },
3439 showTagManageModel() {
3440 var _this = this;
3441 axios.get('/api/task-list/all-tag-for-manage')
3442 .then(response => response.data)
3443 .then(response => {
3444 _this.manageTag = response.tags;
3445 $('#TagManage').modal('show');
3446 })
3447 .catch(error => {
3448
3449 });
3450 },
3451 updateTagColor(e, tag) {
3452 var color = e.target.value;
3453 var _this = this;
3454 var postData = {
3455 id: tag.id,
3456 color: color,
3457 };
3458 axios.post('/api/task-list/update-tag', postData)
3459 .then(response => response.data)
3460 .then(response => {
3461 _this.manageTag = response.tags;
3462 // _this.showTagManageModel();
3463 _this.getBoardTask();
3464 // _this.getData();
3465 // $('#dropdown' + data._id).toggle();
3466 // _this.selectedData = data
3467 // _this.tag = null
3468 _this.$toastr.s("Tag Successfully Updated!");
3469 })
3470 .catch(error => {
3471 console.log('Api for update color of tag not Working !!!')
3472 });
3473
3474 },
3475 DeleteTagFromModal(tag) {
3476 var _this = this;
3477 Swal.fire({
3478 title: 'Are you sure you want to delete the tag?',
3479 text: "",
3480 type: 'warning',
3481 icon: 'warning',
3482 showCancelButton: true,
3483 confirmButtonColor: '#3085d6',
3484 cancelButtonColor: '#d33',
3485 confirmButtonText: 'Yes, delete it!'
3486 }).then((result) => {
3487 if (result.value) {
3488 var postData = {
3489 id: tag.id,
3490 title: tag.title,
3491 };
3492 axios.post('/api/task-list/delete-tag', postData)
3493 .then(response => response.data)
3494 .then(response => {
3495 _this.getBoardTask();
3496 _this.$toastr.w("Tag Successfully Deleted!");
3497 setTimeout(() => {
3498 swal.close();
3499 }, 1000);
3500 })
3501 .catch(error => {
3502 console.log('Api for delete tag not Working !!!');
3503 });
3504 }
3505 })
3506
3507 },
3508 ruleAlertHeight: function (obj, trigger) {
3509 setTimeout(function () {
3510 let target = $('#' + obj);
3511 let h = 0;
3512 if (target.length > 0) {
3513 h = $('#' + obj).height();
3514 }
3515 $('#' + trigger).css({top: h + 'px'});
3516 }, 400)
3517 },
3518 updateTagName(e, tag) {
3519 var newTag = e.target.innerText;
3520 if (e.which == 13) {
3521 var _this = this;
3522 var postData = {
3523 id: tag.id,
3524 tag: newTag,
3525 };
3526 axios.post('/api/task-list/update-tag', postData)
3527 .then(response => response.data)
3528 .then(response => {
3529 _this.manageTag = response.tags;
3530 _this.getBoardTask();
3531 // _this.tag = null
3532 _this.$toastr.w("Tag Successfully Update!");
3533 })
3534 .catch(error => {
3535 console.log('Api for update tag not Working !!!')
3536 });
3537 }
3538 },
3539 newLineoff(e) {
3540 if (e.which == 13) {
3541 e.preventDefault();
3542 }
3543 },
3544 switchEvent(e) {
3545 $(e.target).closest('.eachItemRow').find('.switchToggle').collapse('toggle');
3546 },
3547 ActionToSelectedTask(value, type) {
3548 var _this = this;
3549 setTimeout(function () {
3550 if (type === 'date') {
3551 var date = new Date(_this.date_for_selected)
3552 var month = (parseFloat(date.getMonth() + 1) > 9) ? parseFloat(date.getMonth() + 1) : '0' + parseFloat(date.getMonth() + 1);
3553 var day = (parseFloat(date.getDate() + 1) > 9) ? parseFloat(date.getDate()) : '0' + parseFloat(date.getDate());
3554 var date_for_selected = date.getFullYear() + '-' + month + '-' + day;
3555 }
3556 var postData = {
3557 ids: _this.selectedIds,
3558 type: type,
3559 value: type === 'date' ? date_for_selected : value,
3560 };
3561
3562 axios.post('/api/task-list/assign-user-add-tag', postData)
3563 .then(response => response.data)
3564 .then(response => {
3565 _this.getBoardTask();
3566 $('.jquery-accordion-menu').hide();
3567 _this.selectedIds = [];
3568 $('.card-list').removeClass('selected-card');
3569 // _this.$toastr.w("Action Successfully to card!");
3570 })
3571 .catch(error => {
3572 // _this.$toastr.w("Api for delete task not Working !!!");
3573 console.log('Api for delete task not Working !!!')
3574 });
3575 }, 500)
3576 },
3577 openPicker: function () {
3578 let _this = this;
3579 setTimeout(function () {
3580 let target = $('.vdp-datepicker__calendar:visible');
3581 let wH = window.innerHeight + 140;
3582 let position = target.offset();
3583 let tH = target.height();
3584 let cH = wH - position.top;
3585 if (cH < tH) {
3586 target.css({bottom: 0 + 'px'});
3587 }
3588 }, 200)
3589 },
3590 deleteSelectedTask() {
3591 var _this = this;
3592 _this.delete_popup = 1;
3593 var postData = {
3594 ids: _this.selectedIds,
3595 };
3596 $('.jquery-accordion-menu').hide();
3597 Swal.fire({
3598 title: "Are you sure",
3599 text: "You want to delete all selected tasks?",
3600 type: "warning",
3601 icon: 'warning',
3602 showCancelButton: true,
3603 confirmButtonColor: '#3085d6',
3604 cancelButtonColor: '#d33',
3605 confirmButtonText: "Yes, delete them",
3606
3607 }).then((result) => {
3608 if (result.value) {
3609 axios.post('/api/task-list/delete-task', postData)
3610 .then(response => response.data)
3611 .then(response => {
3612 _this.getBoardTask();
3613 _this.boardSocketCall();
3614 $('.jquery-accordion-menu').hide();
3615 _this.delete_popup = 0;
3616 // swal("Deleted!", "Successfully deleted selected tasks", "success");
3617 _this.$toastr.w("Selected Task Successfully Deleted");
3618 setTimeout(() => {
3619 swal.close();
3620 }, 1000);
3621 })
3622 .catch(error => {
3623 console.log('Api for delete task not Working !!!')
3624 });
3625 }
3626 })
3627
3628 },
3629 addUserToFilter(userId) {
3630 if (this.userIdList.includes(userId)) {
3631 var indexs = this.userIdList.indexOf(userId);
3632 if (indexs > -1) {
3633 this.userIdList.splice(indexs, 1);
3634 }
3635 } else {
3636 this.userIdList.push(userId);
3637 }
3638 },
3639 userFilter() {
3640 if (this.userIdList.length < 1) {
3641 swal('Warning!!', "No user is selected ", "warning");
3642 } else {
3643 this.getBoardTaskFilter(this.filter_types);
3644 $('#user_list').modal('hide');
3645 }
3646
3647 },
3648 checkedAllUser(allUsers) {
3649 if ($('.checkedAllUser').prop('checked') === false) {
3650 this.userIdList = [];
3651 } else {
3652 for (let i = 0; allUsers.length > i; i++) {
3653 this.userIdList.push(allUsers[i].id);
3654 }
3655 }
3656 },
3657 priorityHide() {
3658 if (this.selectedPriorites.length <= 0) {
3659 swal('Warning!!','Nothing selected','warning');
3660 return false;
3661 }
3662 this.getBoardTaskFilter('p_hide');
3663 $('#priority_list_modal').modal('hide');
3664 },
3665 priorityShow() {
3666 if (this.selectedPriorites.length <= 0) {
3667 swal('Warning!!','Nothing selected','warning');
3668 return false;
3669 }
3670 this.getBoardTaskFilter('p_show');
3671 $('#priority_list_modal').modal('hide');
3672 },
3673 addFilterToFilter(type) {
3674 if (this.selectedPriorites.includes(type)) {
3675 var indexs = this.selectedPriorites.indexOf(type);
3676 if (indexs > -1) {
3677 this.selectedPriorites.splice(indexs, 1);
3678 }
3679 } else {
3680 this.selectedPriorites.push(type);
3681 }
3682 },
3683 boardSocketCall(list_id = null){
3684 let _this = this;
3685 _this.Socket.emit('cardUpdated',{
3686 // user_id : _this.auth_user.id,
3687 // project_id : _this.projectId
3688 project_id: _this.projectId,
3689 board_id : _this.board_id,
3690 list_id : list_id,
3691 user_id : _this.authUser.id,
3692 });
3693 },
3694 listSocketCall(list_id = null){
3695 let _this = this;
3696 _this.Socket.emit('taskUpdate',{
3697 // user_id : _this.auth_user.id,
3698 // project_id : _this.projectId
3699 project_id: _this.projectId,
3700 board_id : _this.board_id,
3701 list_id : list_id,
3702 user_id : _this.authUser.id,
3703 });
3704 },
3705 sendMail(data){
3706 // axios.post('/api/send-mail/',data)
3707 // .then(response => response.data)
3708 // .then(response => {
3709 // console.log(response);
3710 // })
3711 // .catch(error => {
3712
3713 // });
3714 },
3715 allTeamUsers(){
3716 let _this = this;
3717 // console.log(this.userSeggistion);
3718 let data = {
3719 project_id: _this.projectId,
3720 }
3721
3722 axios.post('/api/project-users',data)
3723 .then(response => response.data)
3724 .then(response => {
3725 _this.allTeamsUsers = response.users;
3726 })
3727 .catch(error => {
3728
3729 });
3730 },
3731 suggestUsers(index,key){
3732 let _this = this;
3733 // console.log(this.userSeggistion);
3734 let data = {
3735 project_id: _this.projectId,
3736 name : _this.userSeggistion
3737 }
3738
3739 axios.post('/api/project-users', data)
3740 .then(response => response.data)
3741 .then(response => {
3742 _this.allTeamsUsers = response.users;
3743 })
3744 .catch(error => {
3745
3746 });
3747 },
3748 selectColumn(id) {
3749 let _this = this;
3750 _this.selectedColumn = id;
3751 $('.card-container').removeClass('columnSelected');
3752 if (_this.selectedIds.length > 0) {
3753 $('.card-container-' + id).addClass('columnSelected');
3754 }
3755 },
3756 pastCopyAndCut() {
3757 let _this = this;
3758 var data = _this.selectedColumn;
3759 var postData = {
3760 target_id: _this.selectedColumn,
3761 copy_ids: _this.copySelectedId,
3762 type: _this.copyOrCut,
3763 nav_id: _this.nav_id
3764 };
3765 if (_this.copyOrCut !== null) {
3766 axios.post('/api/board-card/copy-cut-past', postData)
3767 .then(response => response.data)
3768 .then(response => {
3769 _this.getBoardTask();
3770 setTimeout(() => {
3771 _this.$toastr.s("Paste successfull");
3772 }, 500);
3773 _this.copySelectedId = [];
3774 _this.copyOrCut = null;
3775 // _this.getTaskList();
3776 // $('.jquery-accordion-menu').hide();
3777 // _this.selectedIds = [];
3778 // _this.selectedCopy = null;
3779 // _this.selectedCut = null;
3780 // _this.Socket.emit('task-list-Update', {
3781 // project_id: _this.projectId,
3782 // list_id: response.list_id,
3783 // nav_id: postData.nav_id,
3784 // user_id: _this.authUser.id,
3785 // type: 'past copy - cut'
3786 // })
3787 })
3788 .catch(error => {
3789 console.log('Api is copy and cut not Working !!!')
3790 });
3791 }
3792
3793 },
3794 shwAssignUserDropDown() {
3795 // alert('s');
3796 let _this = this;
3797 let target = null;
3798 for (let index = 0; index < _this.selectedIds.length; index++) {
3799 target = $('#card_' + _this.selectedIds[index]).find('a.user-assign-card > span.dropdown-toggle-split');
3800 if (target.length > 0) {
3801 $(target[0]).click();
3802 } else {
3803 target = $('#card_' + _this.selectedIds[index]).find('a.user-assign-card > span.assigned_user-card');
3804 if (target.length > 0) {
3805 $(target[0]).click();
3806 }
3807 }
3808 }
3809 },
3810 showtagBox() {
3811 let _this = this;
3812 let target = null;
3813 for (let index = 0; index < _this.selectedIds.length; index++) {
3814 target = $('#card_' + _this.selectedIds[index]).find('a.tag-icon > i.icon-image-preview');
3815
3816 if (target.length > 0) {
3817 $(target[0]).click();
3818 } else {
3819 target = $('#card_' + _this.selectedIds[index]).find('a.tag-icon > div > div > div.dropdown-toggle-split');
3820 // console.log(target);
3821 if (target.length > 0) {
3822 $(target[0]).click();
3823 }
3824 }
3825 }
3826 },
3827 selectedCardMoveUp() {
3828 let _this = this;
3829 let selectedindexs = _this.allCardIds.indexOf(_this.selectedIds[0]);
3830 let downData = _this.allCardIds[selectedindexs];
3831 let upData = _this.allCardIds[selectedindexs - 1];
3832
3833 let postData = {
3834 column: _this.selectedColumn,
3835 ids: {downData, upData},
3836 }
3837
3838 axios.post('/api/board-card/move-up-down', postData)
3839 .then(response => response.data)
3840 .then(response => {
3841 _this.getBoardTask();
3842 _this.selectedIds = [];
3843 $('.card-list').removeClass('selected-card');
3844 })
3845 .catch(error => {
3846 console.log('Api is move up not Working !!!')
3847 });
3848
3849 },
3850 selectedCardMoveDown() {
3851 let _this = this;
3852 let selectedindexs = _this.allCardIds.indexOf(_this.selectedIds[0]);
3853 let downData = _this.allCardIds[selectedindexs];
3854 let upData = _this.allCardIds[selectedindexs + 1];
3855
3856 let postData = {
3857 column: _this.selectedColumn,
3858 ids: {downData, upData},
3859 }
3860
3861 axios.post('/api/board-card/move-up-down', postData)
3862 .then(response => response.data)
3863 .then(response => {
3864 _this.getBoardTask();
3865 _this.selectedIds = [];
3866 $('.card-list').removeClass('selected-card');
3867 })
3868 .catch(error => {
3869 console.log('Api is move down not Working !!!')
3870 });
3871
3872 }
3873 },
3874 directives: {
3875 ClickOutside
3876 },
3877 watch: {
3878 filter_type: function (val) {
3879 this.filter_types = val;
3880 // console.log(val)
3881 if (val === 'my') {
3882 this.userIdList = [];
3883 this.getBoardTaskFilter(val);
3884 } else if (val === 'users_task') {
3885 $('#user_list').modal('show');
3886 } else if (val === 'all') {
3887 this.getBoardTaskFilter(val);
3888 } else if (val === 'not_assign') {
3889 this.getBoardTaskFilter(val);
3890 } else if (val === 'priority') {
3891 this.getBoardTaskFilter(val);
3892 } else if (val === 'asc' || val === 'desc') {
3893 this.getBoardTaskFilter(val);
3894 } else if (val === 'date-asc') {
3895 this.getBoardTaskFilter(val);
3896 } else if (val === 'date') {
3897 this.getBoardTaskFilter(val);
3898 } else if (val === 'priority_based') {
3899 $('#priority_list_modal').modal('show');
3900 }
3901 // this.filter_type = null;
3902 },
3903 '$route.params.id': {
3904 handler: function(id) {
3905 var _this = this;
3906 _this.projectId = _this.$route.params.projectId;
3907 _this.board_id = _this.$route.params.id;
3908 _this.nav_id = _this.$route.params.nav_id;
3909 _this.list.name = _this.$route.params.title;
3910 _this.list.description = _this.$route.params.description;
3911 console.log(_this.list)
3912 _this.getBoardTask();
3913 },
3914 deep: true,
3915 immediate: true
3916 }
3917 }
3918 }
3919</script>