2022-05-18 04:04:54 +00:00
|
|
|
<!--
|
|
|
|
// Copyright © 2022 Hardcore Engineering Inc.
|
|
|
|
//
|
|
|
|
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
|
|
|
|
// you may not use this file except in compliance with the License. You may
|
|
|
|
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
|
|
|
|
//
|
|
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
|
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
//
|
|
|
|
// See the License for the specific language governing permissions and
|
|
|
|
// limitations under the License.
|
|
|
|
-->
|
|
|
|
<script lang="ts">
|
2022-09-21 08:08:25 +00:00
|
|
|
import { AttachmentDocList, AttachmentStyledBox } from '@hcengineering/attachment-resources'
|
|
|
|
import { Class, Data, Doc, Ref, SortingOrder, WithLookup } from '@hcengineering/core'
|
|
|
|
import notification from '@hcengineering/notification'
|
|
|
|
import { Panel } from '@hcengineering/panel'
|
|
|
|
import { getResource } from '@hcengineering/platform'
|
|
|
|
import presentation, { createQuery, getClient, MessageViewer } from '@hcengineering/presentation'
|
|
|
|
import setting, { settingId } from '@hcengineering/setting'
|
2023-01-14 10:54:54 +00:00
|
|
|
import type { Issue, IssueStatus, Team } from '@hcengineering/tracker'
|
2022-05-18 15:58:06 +00:00
|
|
|
import {
|
|
|
|
Button,
|
|
|
|
EditBox,
|
2022-08-03 07:05:19 +00:00
|
|
|
getCurrentLocation,
|
2022-05-18 15:58:06 +00:00
|
|
|
IconEdit,
|
|
|
|
IconMoreH,
|
2022-05-20 07:21:18 +00:00
|
|
|
Label,
|
2022-08-03 07:05:19 +00:00
|
|
|
navigate,
|
2022-05-18 15:58:06 +00:00
|
|
|
Scroller,
|
2022-05-25 06:09:58 +00:00
|
|
|
showPopup,
|
|
|
|
Spinner
|
2022-09-21 08:08:25 +00:00
|
|
|
} from '@hcengineering/ui'
|
2023-01-14 10:54:54 +00:00
|
|
|
import { ContextMenu, UpDownNavigator } from '@hcengineering/view-resources'
|
2022-06-10 17:59:09 +00:00
|
|
|
import { createEventDispatcher, onDestroy, onMount } from 'svelte'
|
2022-06-30 03:46:46 +00:00
|
|
|
import { generateIssueShortLink, getIssueId } from '../../../issues'
|
2022-08-03 07:05:19 +00:00
|
|
|
import tracker from '../../../plugin'
|
2022-06-18 08:11:10 +00:00
|
|
|
import IssueStatusActivity from '../IssueStatusActivity.svelte'
|
2022-05-18 04:04:54 +00:00
|
|
|
import ControlPanel from './ControlPanel.svelte'
|
|
|
|
import CopyToClipboard from './CopyToClipboard.svelte'
|
2022-06-02 16:57:07 +00:00
|
|
|
import SubIssues from './SubIssues.svelte'
|
2022-06-18 08:11:10 +00:00
|
|
|
import SubIssueSelector from './SubIssueSelector.svelte'
|
2022-05-18 04:04:54 +00:00
|
|
|
|
|
|
|
export let _id: Ref<Issue>
|
|
|
|
export let _class: Ref<Class<Issue>>
|
|
|
|
|
2022-06-10 17:59:09 +00:00
|
|
|
let lastId: Ref<Doc> = _id
|
|
|
|
let lastClass: Ref<Class<Doc>> = _class
|
2022-11-12 05:52:16 +00:00
|
|
|
const queryClient = createQuery()
|
2022-05-18 04:04:54 +00:00
|
|
|
const statusesQuery = createQuery()
|
|
|
|
const dispatch = createEventDispatcher()
|
|
|
|
const client = getClient()
|
|
|
|
|
2022-06-02 02:42:44 +00:00
|
|
|
let issue: WithLookup<Issue> | undefined
|
2022-05-18 04:04:54 +00:00
|
|
|
let currentTeam: Team | undefined
|
|
|
|
let issueStatuses: WithLookup<IssueStatus>[] | undefined
|
|
|
|
let title = ''
|
|
|
|
let description = ''
|
|
|
|
let innerWidth: number
|
|
|
|
let isEditing = false
|
2022-07-01 15:31:08 +00:00
|
|
|
let descriptionBox: AttachmentStyledBox
|
2022-05-18 04:04:54 +00:00
|
|
|
|
2022-06-10 17:59:09 +00:00
|
|
|
const notificationClient = getResource(notification.function.GetNotificationClient).then((res) => res())
|
|
|
|
|
|
|
|
$: read(_id)
|
|
|
|
function read (_id: Ref<Doc>) {
|
|
|
|
if (lastId !== _id) {
|
|
|
|
const prev = lastId
|
|
|
|
const prevClass = lastClass
|
|
|
|
lastId = _id
|
|
|
|
lastClass = _class
|
|
|
|
notificationClient.then((client) => client.updateLastView(prev, prevClass))
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
onDestroy(async () => {
|
|
|
|
notificationClient.then((client) => client.updateLastView(_id, _class))
|
|
|
|
})
|
|
|
|
|
2022-05-18 04:04:54 +00:00
|
|
|
$: _id &&
|
|
|
|
_class &&
|
2022-11-12 05:52:16 +00:00
|
|
|
queryClient.query(
|
2022-05-25 06:09:58 +00:00
|
|
|
_class,
|
|
|
|
{ _id },
|
|
|
|
async (result) => {
|
|
|
|
;[issue] = result
|
|
|
|
title = issue.title
|
|
|
|
description = issue.description
|
2022-06-16 13:51:28 +00:00
|
|
|
currentTeam = issue.$lookup?.space
|
2022-05-25 06:09:58 +00:00
|
|
|
},
|
2022-06-16 13:51:28 +00:00
|
|
|
{ lookup: { attachedTo: tracker.class.Issue, space: tracker.class.Team } }
|
2022-05-25 06:09:58 +00:00
|
|
|
)
|
2022-05-18 04:04:54 +00:00
|
|
|
|
|
|
|
$: currentTeam &&
|
|
|
|
statusesQuery.query(
|
|
|
|
tracker.class.IssueStatus,
|
|
|
|
{ attachedTo: currentTeam._id },
|
|
|
|
(statuses) => (issueStatuses = statuses),
|
|
|
|
{
|
|
|
|
lookup: { category: tracker.class.IssueStatusCategory },
|
|
|
|
sort: { rank: SortingOrder.Ascending }
|
|
|
|
}
|
|
|
|
)
|
|
|
|
|
2022-06-09 14:49:57 +00:00
|
|
|
$: issueId = currentTeam && issue && getIssueId(currentTeam, issue)
|
2022-05-18 04:04:54 +00:00
|
|
|
$: canSave = title.trim().length > 0
|
2022-05-20 07:21:18 +00:00
|
|
|
$: isDescriptionEmpty = !new DOMParser().parseFromString(description, 'text/html').documentElement.innerText?.trim()
|
2022-10-18 06:33:11 +00:00
|
|
|
$: parentIssue = issue?.$lookup?.attachedTo
|
2022-05-18 04:04:54 +00:00
|
|
|
|
|
|
|
function edit (ev: MouseEvent) {
|
|
|
|
ev.preventDefault()
|
|
|
|
|
|
|
|
isEditing = true
|
|
|
|
}
|
|
|
|
|
|
|
|
function cancelEditing (ev: MouseEvent) {
|
|
|
|
ev.preventDefault()
|
|
|
|
|
|
|
|
isEditing = false
|
|
|
|
|
|
|
|
if (issue) {
|
|
|
|
title = issue.title
|
|
|
|
description = issue.description
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
async function save (ev: MouseEvent) {
|
|
|
|
ev.preventDefault()
|
|
|
|
|
|
|
|
if (!issue || !canSave) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
const updates: Partial<Data<Issue>> = {}
|
|
|
|
const trimmedTitle = title.trim()
|
|
|
|
|
|
|
|
if (trimmedTitle.length > 0 && trimmedTitle !== issue.title) {
|
|
|
|
updates.title = trimmedTitle
|
|
|
|
}
|
|
|
|
|
|
|
|
if (description !== issue.description) {
|
|
|
|
updates.description = description
|
|
|
|
}
|
|
|
|
|
|
|
|
if (Object.keys(updates).length > 0) {
|
2022-06-02 02:42:44 +00:00
|
|
|
await client.updateCollection(
|
|
|
|
issue._class,
|
|
|
|
issue.space,
|
|
|
|
issue._id,
|
|
|
|
issue.attachedTo,
|
|
|
|
issue.attachedToClass,
|
|
|
|
issue.collection,
|
|
|
|
updates
|
|
|
|
)
|
2022-05-18 04:04:54 +00:00
|
|
|
}
|
2022-07-01 15:31:08 +00:00
|
|
|
await descriptionBox.createAttachments()
|
2022-05-18 04:04:54 +00:00
|
|
|
isEditing = false
|
|
|
|
}
|
|
|
|
|
2022-05-18 15:58:06 +00:00
|
|
|
function showMenu (ev?: Event): void {
|
|
|
|
if (issue) {
|
|
|
|
showPopup(ContextMenu, { object: issue }, (ev as MouseEvent).target as HTMLElement)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-05-18 04:04:54 +00:00
|
|
|
onMount(() => {
|
|
|
|
dispatch('open', { ignoreKeys: ['comments', 'name', 'description', 'number'] })
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
|
|
|
|
{#if issue !== undefined}
|
|
|
|
<Panel
|
|
|
|
object={issue}
|
|
|
|
isHeader
|
|
|
|
isAside={true}
|
|
|
|
isSub={false}
|
|
|
|
withoutActivity={isEditing}
|
2022-10-27 03:56:21 +00:00
|
|
|
withoutTitle
|
2022-05-18 04:04:54 +00:00
|
|
|
bind:innerWidth
|
|
|
|
on:close={() => dispatch('close')}
|
|
|
|
>
|
|
|
|
<svelte:fragment slot="navigator">
|
2022-12-21 06:04:55 +00:00
|
|
|
<UpDownNavigator element={issue} />
|
2022-05-18 04:04:54 +00:00
|
|
|
</svelte:fragment>
|
|
|
|
<svelte:fragment slot="header">
|
|
|
|
<span class="fs-title">
|
|
|
|
{#if issueId}{issueId}{/if}
|
|
|
|
</span>
|
|
|
|
</svelte:fragment>
|
|
|
|
<svelte:fragment slot="tools">
|
|
|
|
{#if isEditing}
|
2022-06-16 01:25:49 +00:00
|
|
|
<Button kind={'transparent'} label={presentation.string.Cancel} on:click={cancelEditing} />
|
2022-05-18 04:04:54 +00:00
|
|
|
<Button disabled={!canSave} label={presentation.string.Save} on:click={save} />
|
|
|
|
{:else}
|
2022-06-16 01:25:49 +00:00
|
|
|
<Button icon={IconEdit} kind={'transparent'} size={'medium'} on:click={edit} />
|
|
|
|
<Button icon={IconMoreH} kind={'transparent'} size={'medium'} on:click={showMenu} />
|
2022-05-18 04:04:54 +00:00
|
|
|
{/if}
|
|
|
|
</svelte:fragment>
|
|
|
|
|
|
|
|
{#if isEditing}
|
|
|
|
<Scroller>
|
|
|
|
<div class="popupPanel-body__main-content py-10 clear-mins content">
|
2022-06-02 02:42:44 +00:00
|
|
|
{#if parentIssue}
|
2022-05-25 06:09:58 +00:00
|
|
|
<div class="mb-6">
|
|
|
|
{#if currentTeam && issueStatuses}
|
2022-07-05 05:00:54 +00:00
|
|
|
<SubIssueSelector {issue} />
|
2022-05-25 06:09:58 +00:00
|
|
|
{:else}
|
|
|
|
<Spinner />
|
|
|
|
{/if}
|
|
|
|
</div>
|
|
|
|
{/if}
|
2022-10-04 15:49:11 +00:00
|
|
|
<EditBox bind:value={title} placeholder={tracker.string.IssueTitlePlaceholder} kind="large-style" />
|
2022-11-18 06:45:30 +00:00
|
|
|
<div class="w-full mt-6">
|
|
|
|
<AttachmentStyledBox
|
|
|
|
bind:this={descriptionBox}
|
|
|
|
objectId={_id}
|
|
|
|
_class={tracker.class.Issue}
|
|
|
|
space={issue.space}
|
|
|
|
alwaysEdit
|
|
|
|
showButtons
|
|
|
|
maxHeight={'card'}
|
|
|
|
focusable
|
|
|
|
bind:content={description}
|
|
|
|
placeholder={tracker.string.IssueDescriptionPlaceholder}
|
|
|
|
/>
|
2022-05-18 04:04:54 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</Scroller>
|
|
|
|
{:else}
|
2022-06-02 02:42:44 +00:00
|
|
|
{#if parentIssue}
|
2022-05-25 06:09:58 +00:00
|
|
|
<div class="mb-6">
|
|
|
|
{#if currentTeam && issueStatuses}
|
2022-07-05 05:00:54 +00:00
|
|
|
<SubIssueSelector {issue} />
|
2022-05-25 06:09:58 +00:00
|
|
|
{:else}
|
|
|
|
<Spinner />
|
|
|
|
{/if}
|
|
|
|
</div>
|
|
|
|
{/if}
|
2022-06-22 06:48:39 +00:00
|
|
|
<span class="title select-text">{title}</span>
|
|
|
|
<div class="mt-6 description-preview select-text">
|
2022-05-20 07:21:18 +00:00
|
|
|
{#if isDescriptionEmpty}
|
|
|
|
<div class="placeholder" on:click={edit}>
|
|
|
|
<Label label={tracker.string.IssueDescriptionPlaceholder} />
|
|
|
|
</div>
|
|
|
|
{:else}
|
2022-05-25 06:09:58 +00:00
|
|
|
<MessageViewer message={description} />
|
2022-05-20 07:21:18 +00:00
|
|
|
{/if}
|
2022-05-18 04:04:54 +00:00
|
|
|
</div>
|
2022-06-02 16:57:07 +00:00
|
|
|
<div class="mt-6">
|
2022-09-14 04:53:48 +00:00
|
|
|
{#key issue._id && currentTeam !== undefined}
|
|
|
|
{#if currentTeam !== undefined && issueStatuses !== undefined}
|
|
|
|
<SubIssues
|
|
|
|
{issue}
|
|
|
|
issueStatuses={new Map([[currentTeam._id, issueStatuses]])}
|
|
|
|
teams={new Map([[currentTeam?._id, currentTeam]])}
|
|
|
|
/>
|
|
|
|
{/if}
|
2022-06-06 15:52:30 +00:00
|
|
|
{/key}
|
2022-06-02 16:57:07 +00:00
|
|
|
</div>
|
2022-08-22 01:03:32 +00:00
|
|
|
<div class="mt-6">
|
|
|
|
<AttachmentDocList value={issue} />
|
|
|
|
</div>
|
2022-05-18 04:04:54 +00:00
|
|
|
{/if}
|
|
|
|
|
|
|
|
<span slot="actions-label">
|
|
|
|
{#if issueId}{issueId}{/if}
|
|
|
|
</span>
|
|
|
|
<svelte:fragment slot="actions">
|
2022-08-03 07:05:19 +00:00
|
|
|
<div class="flex-grow" />
|
2022-07-07 02:16:20 +00:00
|
|
|
{#if issueId}
|
|
|
|
<CopyToClipboard issueUrl={generateIssueShortLink(issueId)} {issueId} />
|
|
|
|
{/if}
|
2022-08-03 07:05:19 +00:00
|
|
|
<Button
|
|
|
|
icon={setting.icon.Setting}
|
|
|
|
kind={'transparent'}
|
|
|
|
showTooltip={{ label: setting.string.ClassSetting }}
|
|
|
|
on:click={(ev) => {
|
|
|
|
ev.stopPropagation()
|
|
|
|
const loc = getCurrentLocation()
|
|
|
|
loc.path[2] = settingId
|
|
|
|
loc.path[3] = 'setting'
|
|
|
|
loc.path[4] = 'classes'
|
|
|
|
loc.path.length = 5
|
|
|
|
loc.query = { _class }
|
|
|
|
loc.fragment = undefined
|
|
|
|
navigate(loc)
|
|
|
|
}}
|
|
|
|
/>
|
2022-05-18 04:04:54 +00:00
|
|
|
</svelte:fragment>
|
|
|
|
|
|
|
|
<svelte:fragment slot="custom-attributes">
|
|
|
|
{#if issue && currentTeam && issueStatuses}
|
|
|
|
<ControlPanel {issue} {issueStatuses} />
|
|
|
|
{/if}
|
2022-06-18 08:11:10 +00:00
|
|
|
|
|
|
|
<div class="divider" />
|
|
|
|
<IssueStatusActivity {issue} />
|
2022-05-18 04:04:54 +00:00
|
|
|
</svelte:fragment>
|
|
|
|
</Panel>
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
.title {
|
|
|
|
font-weight: 500;
|
|
|
|
font-size: 1.125rem;
|
|
|
|
color: var(--theme-caption-color);
|
|
|
|
}
|
|
|
|
|
|
|
|
.content {
|
|
|
|
height: auto;
|
|
|
|
}
|
2022-05-20 07:21:18 +00:00
|
|
|
|
|
|
|
.description-preview {
|
|
|
|
color: var(--theme-content-color);
|
2022-06-02 02:42:44 +00:00
|
|
|
line-height: 150%;
|
2022-05-20 07:21:18 +00:00
|
|
|
|
|
|
|
.placeholder {
|
|
|
|
color: var(--theme-content-trans-color);
|
|
|
|
}
|
|
|
|
}
|
2022-06-18 08:11:10 +00:00
|
|
|
.divider {
|
|
|
|
margin-top: 1rem;
|
|
|
|
margin-bottom: 1rem;
|
|
|
|
grid-column: 1 / 3;
|
|
|
|
height: 1px;
|
|
|
|
background-color: var(--divider-color);
|
|
|
|
}
|
2022-05-18 04:04:54 +00:00
|
|
|
</style>
|