super-productivity/src/app/features/tasks/task/task.component.html

619 lines
20 KiB
HTML

<ng-container *ngIf="IS_TOUCH_PRIMARY">
<div
#blockLeftEl
class="block-left bg-400"
>
<mat-icon *ngIf="!task.isDone">check</mat-icon>
<mat-icon *ngIf="task.isDone">undo</mat-icon>
</div>
<div
#blockRightEl
class="block-right bg-400"
>
<!--NOTE: non observable should be enough as we only need the initial value-->
<ng-container *ngIf="workContextService.isToday">
<mat-icon *ngIf="!(task.repeatCfgId)">alarm</mat-icon>
<mat-icon
*ngIf="(task.repeatCfgId)"
svgIcon="repeat"
></mat-icon>
</ng-container>
<ng-container *ngIf="!workContextService.isToday">
<mat-icon *ngIf="!isTodayTag">wb_sunny</mat-icon>
<mat-icon
*ngIf="isTodayTag && (task.projectId || task.tagIds?.length > 1)"
svgIcon="remove_today"
></mat-icon>
</ng-container>
</div>
</ng-container>
<div
#innerWrapperEl
class="inner-wrapper"
>
<div
#contextMenuTriggerEl
[matMenuTriggerFor]="contextMenu"
[style.left]="contextMenuPosition.x"
[style.top]="contextMenuPosition.y"
style="visibility: hidden; position: fixed"
></div>
<div
#projectMenuTriggerEl
[matMenuTriggerFor]="projectMenu"
style="visibility: hidden"
></div>
<div class="box"></div>
<!-- TODO only bind pan, longPress etc when touch is available-->
<div
(longPressIOS)="openContextMenu($event)"
(contextmenu)="openContextMenu($event)"
(panend)="onPanEnd()"
(panleft)="onPanLeft($event)"
(panright)="onPanRight($event)"
(panstart)="onPanStart($event)"
(mouseenter)="isFirstLineHover=true"
(mouseleave)="isFirstLineHover=false"
[class.isPreventPointerEventsWhilePanning]="isPreventPointerEventsWhilePanning"
class="first-line"
>
<button
(click)="toggleTaskDone()"
*ngIf="task.isDone"
[title]="T.F.TASK.CMP.TOGGLE_DONE|translate"
class="check-done"
mat-icon-button
>
<mat-icon
@swirl
class="undo"
>undo
</mat-icon>
<mat-icon
@swirl
class="check"
>check
</mat-icon>
</button>
<div class="title-and-left-btns-wrapper">
<div
(click)="focusSelf()"
[class.handle-par]="!isInSubTaskList"
[class.handle-sub]="isInSubTaskList"
class="drag-handle"
>
<mat-icon
class="drag-handle-ico"
svgIcon="drag_handle"
></mat-icon>
<mat-icon
*ngIf="isCurrent"
class="play-icon-indicator"
>play_arrow
</mat-icon>
<div class="type-ico-wrapper">
<div *ngIf="task.repeatCfgId">
<div
class="repeat-date-badge"
*ngIf="!isRepeatTaskCreatedToday"
>
{{ task.created|date:'d.M' }}
</div>
<mat-icon
*ngIf="task.repeatCfgId"
[style.transform]="isCurrent ? 'scale(1.4)': ''"
svgIcon="repeat"
>
</mat-icon>
</div>
<div *ngIf="task.issueId">
<div
*ngIf="task.issuePoints"
class="mini-badge bgc-primary"
>
{{ task.issuePoints }}
</div>
<mat-icon [svgIcon]="task.issueType|issueIcon"></mat-icon>
</div>
</div>
</div>
<div
(click)="IS_TOUCH_PRIMARY && (task.title.length ? toggleShowDetailPanel($event) : focusTitleForEdit())"
class="title-and-tags-wrapper"
>
<div
class="parent-title"
*ngIf="!isInSubTaskList && task.parentId"
>
<div class="title">{{ parentTitle$|async }}</div>
</div>
<inline-multiline-input
[resetToLastExternalValueTrigger]="task"
[style.pointer-events]="IS_TOUCH_PRIMARY && (task.title.length) ? 'none' : 'auto'"
#taskTitleEditEl
(valueEdited)="updateTaskTitleIfChanged($event)"
[value]="task.title"
class="task-title"
></inline-multiline-input>
<tag-list
[task]="task"
[isShowProjectTagNever]="isInSubTaskList"
></tag-list>
</div>
</div>
<div class="all-controls-wrapper">
<div
(click)="estimateTime()"
[class.hasNoTimeSpentOrEstimate]="!task.timeSpent && !task.timeEstimate"
[class.isEditable]="!task.subTasks?.length"
class="time-wrapper"
>
<div
*ngIf="!task.subTasks?.length"
class="time"
>
<div class="time-val">
<span [innerHTML]="task.timeSpent|msToString"></span>
</div>
<div class="separator">/</div>
<div
[innerHTML]="task.timeEstimate|msToString"
class="time-val"
></div>
</div>
<div
*ngIf="task.subTasks?.length"
class="time"
>
<div class="time-val">
<mat-icon
inline="true"
style="margin-top: -6px"
>functions
</mat-icon>
<span [innerHTML]="task.subTasks|subTaskTotalTimeSpent|msToString"></span>
</div>
<div class="separator">/</div>
<div class="time-val">
<mat-icon
svgIcon="estimate_remaining"
inline="true"
></mat-icon>
{{ task.timeEstimate|msToString }}
</div>
</div>
</div>
<div class="controls">
<div
*ngIf="isFirstLineHover && !IS_TOUCH_PRIMARY"
class="hover-controls"
>
<button
(click)="startTask()"
*ngIf="!task.isDone && !isCurrent && !task.subTasks?.length"
title="{{T.F.TASK.CMP.TRACK_TIME|translate}} {{kb.togglePlay?'['+kb.togglePlay+']':''}}"
class="ico-btn start-task-btn"
color=""
mat-icon-button
>
<mat-icon
class="play-icon"
svgIcon="play"
></mat-icon>
</button>
<button
(click)="pauseTask()"
*ngIf="!task.isDone && isCurrent && !task.subTasks?.length"
title="{{T.F.TASK.CMP.TRACK_TIME_STOP|translate}} {{kb.togglePlay?'['+kb.togglePlay+']':''}}"
class="ico-btn"
color="accent"
mat-icon-button
>
<mat-icon>pause</mat-icon>
</button>
<button
(click)="addToMyDay()"
*ngIf="isShowAddToToday"
title="{{T.F.TASK.CMP.ADD_TO_MY_DAY|translate}} {{kb.moveToTodaysTasks?'['+kb.moveToTodaysTasks+']':''}}"
class="ico-btn"
color=""
mat-icon-button
>
<mat-icon>wb_sunny</mat-icon>
</button>
<button
(click)="removeFromMyDay()"
*ngIf="isShowRemoveFromToday"
[title]="T.F.TASK.CMP.REMOVE_FROM_MY_DAY|translate"
class="ico-btn"
color=""
mat-icon-button
>
<mat-icon svgIcon="remove_today"></mat-icon>
</button>
<button
*ngIf="!task.isDone"
(click)="toggleTaskDone()"
title="{{T.F.TASK.CMP.TOGGLE_DONE|translate}} {{kb.taskToggleDone?'['+kb.taskToggleDone+']':''}}"
class="ico-btn task-done-btn"
color=""
mat-icon-button
>
<mat-icon>check</mat-icon>
</button>
<button
(click)="toggleShowDetailPanel()"
*ngIf="!task.notes && (!task.issueId||task.issueType==='CALENDAR') && !isSelected"
title="{{T.F.TASK.CMP.TOGGLE_DETAIL_PANEL|translate}} {{kb.taskToggleDetailPanelOpen?'['+kb.taskToggleDetailPanelOpen+']':''}}"
class="ico-btn show-additional-info-btn"
color=""
mat-icon-button
>
<mat-icon *ngIf="!task.issueWasUpdated">&#xe949;</mat-icon>
<!-- <mat-icon *ngIf="!task.issueWasUpdated">toc</mat-icon>-->
<!-- <mat-icon *ngIf="!task.issueWasUpdated">chevron_right</mat-icon>-->
<mat-icon
*ngIf="task.issueWasUpdated"
color="accent"
>update
</mat-icon>
</button>
</div>
<button
(click)="toggleShowAttachments()"
*ngIf="task.attachments?.length || task.issueAttachmentNr"
[title]="T.F.TASK.CMP.TOGGLE_ATTACHMENTS|translate"
class="ico-btn attachment-btn"
color=""
mat-icon-button
>
<mat-icon>attach_file</mat-icon>
</button>
<button
(click)="scheduleTask()"
*ngIf="task.reminderId"
[title]="T.F.TASK.CMP.EDIT_SCHEDULED|translate"
class="ico-btn schedule-btn"
color=""
mat-icon-button
>
<mat-icon>alarm</mat-icon>
<div class="time-badge">{{ task.plannedAt|shortPlannedAt }}</div>
</button>
<button
(click)="scheduleTask()"
*ngIf="((plannerService.plannedTaskDayMap$|async)||{})[task.id] as plannedAtDay"
[title]="T.F.TASK.CMP.SCHEDULE|translate"
class="ico-btn schedule-btn"
color=""
mat-icon-button
>
<mat-icon>today</mat-icon>
<div class="time-badge">{{ plannedAtDay|localDateStr }}</div>
</button>
<div>
<button
(click)="toggleShowDetailPanel()"
*ngIf="task.notes|| (task.issueId&&task.issueType!=='CALENDAR') || isSelected"
title="{{T.F.TASK.CMP.TOGGLE_DETAIL_PANEL|translate}} {{kb.taskToggleDetailPanelOpen?'['+kb.taskToggleDetailPanelOpen+']':''}}"
[class.closeBtn]="!task.issueWasUpdated && isSelected"
class="ico-btn show-additional-info-btn"
color=""
mat-icon-button
>
<mat-icon *ngIf="!task.issueWasUpdated && !isSelected">chat</mat-icon>
<mat-icon *ngIf="!task.issueWasUpdated && isSelected">close</mat-icon>
<mat-icon
*ngIf="task.issueWasUpdated"
class="updated-icon"
color="accent"
>update
</mat-icon>
</button>
</div>
<mat-menu
#contextMenu="matMenu"
(close)="focusSelf()"
>
<ng-template matMenuContent>
<button
(click)="startTask()"
*ngIf="IS_TOUCH_PRIMARY && !task.isDone && !isCurrent && !task.subTasks?.length"
mat-menu-item
>
<span class="menuItemLeft">
<mat-icon
class="play-icon"
svgIcon="play"
></mat-icon>
{{ T.F.TASK.CMP.TRACK_TIME|translate }}
</span>
<span class="key-i">{{ kb.togglePlay }}</span>
</button>
<button
(click)="pauseTask()"
*ngIf="IS_TOUCH_PRIMARY && !task.isDone && isCurrent && !task.subTasks?.length"
mat-menu-item
>
<span class="menuItemLeft">
<mat-icon>pause</mat-icon>
{{ T.F.TASK.CMP.TRACK_TIME_STOP|translate }}
</span>
<span class="key-i">{{ kb.togglePlay }}</span>
</button>
<button
(click)="toggleTaskDone()"
*ngIf="IS_TOUCH_PRIMARY"
mat-menu-item
>
<span class="menuItemLeft">
@if (task.isDone) {
<mat-icon>undo</mat-icon>
} @else {
<mat-icon>check</mat-icon>
} {{ (task.isDone ? T.F.TASK.CMP.MARK_DONE :
T.F.TASK.CMP.MARK_DONE)|translate }}
</span>
<span class="key-i">{{ kb.taskToggleDone }}</span>
</button>
<button
(click)="removeFromMyDay()"
*ngIf="IS_TOUCH_PRIMARY && !task.parentId && !task.isDone && isTodayTag && (task.projectId || task.tagIds?.length > 1)"
mat-menu-item
>
<mat-icon svgIcon="remove_today"></mat-icon>
{{ T.F.TASK.CMP.REMOVE_FROM_MY_DAY|translate }}
</button>
<button
(click)="estimateTime()"
*ngIf="!task.subTasks?.length"
class="hide-xs"
mat-menu-item
>
<span class="menuItemLeft">
<mat-icon>timer</mat-icon>
{{ T.F.TASK.CMP.OPEN_TIME|translate }}
</span>
<span class="key-i">{{ kb.taskOpenEstimationDialog }}</span>
</button>
<button
(click)="scheduleTask()"
mat-menu-item
>
<ng-container *ngIf="!task.reminderId">
<span>
<mat-icon>alarm_add</mat-icon>
{{ T.F.TASK.CMP.SCHEDULE|translate }}
</span>
<span class="key-i">{{ kb.taskSchedule }}</span>
</ng-container>
<ng-container *ngIf="task.reminderId">
<span>
<mat-icon>alarm</mat-icon>
{{ T.F.TASK.CMP.EDIT_SCHEDULED|translate }}
</span>
<span class="key-i">{{ kb.taskSchedule }}</span>
</ng-container>
</button>
<button
(click)="addSubTask();"
*ngIf="!task.parentId&&!task.isDone"
mat-menu-item
>
<span class="menuItemLeft">
<mat-icon>playlist_add</mat-icon>
{{ T.F.TASK.CMP.ADD_SUB_TASK|translate }}
</span>
<span class="key-i">{{ kb.taskAddSubTask }}</span>
</button>
<button
(click)="addAttachment();"
class="hide-xs"
mat-menu-item
>
<span class="menuItemLeft">
<mat-icon>attachment</mat-icon>
{{ T.F.TASK.CMP.OPEN_ATTACH|translate }}
</span>
<span class="key-i">{{ kb.taskAddAttachment }}</span>
</button>
<!--TODO maybe handle dynamically -->
<a
*ngIf="task.issueId && task.issueType !=='CALENDAR'"
[href]="issueUrl$|async"
mat-menu-item
style="color: inherit"
target="_blank"
>
<mat-icon [svgIcon]="task.issueType|issueIcon"></mat-icon>
{{ T.F.TASK.CMP.OPEN_ISSUE|translate }}
</a>
<button
(click)="updateIssueData()"
*ngIf="task.issueId && task.issueType !=='CALENDAR'"
mat-menu-item
>
<mat-icon [svgIcon]="task.issueType|issueIcon"></mat-icon>
{{ T.F.TASK.CMP.UPDATE_ISSUE_DATA|translate }}
</button>
<button
(click)="moveToBacklog();"
*ngIf="!task.parentId && !isBacklog && task.projectId && (isShowMoveFromAndToBacklogBtns$|async)"
mat-menu-item
>
<span class="menuItemLeft">
<mat-icon>arrow_downward</mat-icon>
{{ T.F.TASK.CMP.MOVE_TO_BACKLOG|translate }}
</span>
<span class="key-i">{{ kb.moveToBacklog }}</span>
</button>
<!-- <mat-menu-item> -->
<!-- <mat-icon class="play-icon" svgIcon="play"></mat-icon> -->
<!-- <span>Whatever</span> -->
<!-- <div style="display: flex; justify-content: space-between;"> -->
<!-- <span style="text-align: left;">Left-aligned text</span> -->
<!-- <span style="text-align: right;">Right-aligned text</span> -->
<!-- </div> -->
<!-- </mat-menu-item> -->
<button
(click)="moveToToday();"
*ngIf="!task.parentId && isBacklog && task.projectId && (isShowMoveFromAndToBacklogBtns$|async)"
mat-menu-item
>
<span class="menuItemLeft">
<mat-icon>arrow_upward</mat-icon>
{{ T.F.TASK.CMP.MOVE_TO_TODAY|translate }}
</span>
<span class="key-i">{{ kb.moveToTodaysTasks }}</span>
</button>
<button
(click)="editTags();"
*ngIf="!task.parentId"
mat-menu-item
>
<span class="menuItemLeft">
<mat-icon>style</mat-icon>
{{ T.F.TASK.CMP.EDIT_TAGS|translate }}
</span>
<span class="key-i">{{ kb.taskEditTags }}</span>
</button>
<button
*ngIf="!task.parentId && (!task.issueId || task.issueType ==='CALENDAR') && !task.repeatCfgId && (moveToProjectList$|async)?.length > 0"
[matMenuTriggerFor]="projectMenu"
mat-menu-item
>
<span class="menuItemLeft">
<mat-icon>forward</mat-icon>
{{ (task.projectId ? T.F.TASK.CMP.MOVE_TO_OTHER_PROJECT :
T.F.TASK.CMP.ADD_TO_PROJECT)|translate }}
</span>
<span class="key-i">{{ kb.taskMoveToProject }}</span>
</button>
<button
*ngIf="task.parentId"
(click)="convertToMainTask()"
mat-menu-item
>
<mat-icon>subdirectory_arrow_left</mat-icon>
{{ (T.F.TASK.CMP.CONVERT_TO_PARENT_TASK)|translate }}
</button>
<button
(click)="deleteTask(true)"
class="color-warn"
mat-menu-item
>
<span class="menuItemLeft">
<mat-icon class="color-warn-i">delete_forever</mat-icon>
{{ (task.repeatCfgId ? T.F.TASK.CMP.DELETE_REPEAT_INSTANCE :
T.F.TASK.CMP.DELETE)|translate }}
</span>
<span class="key-i">{{ kb.taskDelete }}</span>
</button>
</ng-template>
</mat-menu>
<mat-menu
#projectMenu="matMenu"
(closed)="focusSelf()"
>
<ng-template matMenuContent>
<button
(click)="moveTaskToProject(project.id)"
*ngFor="let project of (moveToProjectList$|async); trackBy:trackByProjectId;"
mat-menu-item
>
{{ project.title }}
</button>
</ng-template>
</mat-menu>
</div>
</div>
</div>
<progress-bar
*ngIf="isCurrent"
[cssClass]="'bg-accent'"
[progress]="progress"
></progress-bar>
<div
*ngIf="task.subTasks?.length"
class="sub-tasks"
>
<button
(click)="toggleSubTaskMode()"
*ngIf="task.subTasks?.length"
[title]="T.F.TASK.CMP.TOGGLE_SUB_TASK_VISIBILITY|translate"
class="toggle-sub-tasks-btn ico-btn mat-elevation-z2"
color=""
mat-mini-fab
>
<mat-icon *ngIf="(task._showSubTasksMode===ShowSubTasksMode.HideAll)"
>add
</mat-icon>
<mat-icon
*ngIf="(task._showSubTasksMode!==ShowSubTasksMode.HideAll)"
[class.isHideDoneTasks]="(task._showSubTasksMode===ShowSubTasksMode.HideDone)"
>remove
</mat-icon>
</button>
<task-list
*ngIf="task.subTasks?.length"
[@expand]
[isHideAll]="(task._showSubTasksMode!==ShowSubTasksMode.Show)"
[isHideDone]="(task._showSubTasksMode===ShowSubTasksMode.HideDone)"
[isSubTaskList]="true"
[listModelId]="task.id"
[parentId]="task.id"
[tasks]="task.subTasks"
listId="SUB"
></task-list>
</div>
<div
*ngIf="isDragOver"
class="bgc-accent drag-over-msg"
>
<mat-icon>add</mat-icon>
{{ T.F.TASK.CMP.DROP_ATTACHMENT|translate:{ title: task.title } }}
</div>
</div>