mirror of
https://github.com/hcengineering/platform.git
synced 2026-09-11 12:17:44 +02:00
Tracker: split "edit issue" dialog to preview / edit (#1731)
This commit is contained in:
Sergei Ogorelkov
@@ -0,0 +1,53 @@
|
||||
<!--
|
||||
// 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">
|
||||
import { Employee } from '@anticrm/contact'
|
||||
import { Ref } from '@anticrm/core'
|
||||
import { getClient, UserBox } from '@anticrm/presentation'
|
||||
import { Issue } from '@anticrm/tracker'
|
||||
import { Tooltip } from '@anticrm/ui'
|
||||
import contact from '@anticrm/contact'
|
||||
import tracker from '../../plugin'
|
||||
|
||||
export let value: Issue
|
||||
|
||||
const client = getClient()
|
||||
|
||||
const handleAssigneeChanged = async (newAssignee: Ref<Employee> | undefined) => {
|
||||
if (newAssignee === undefined || value.assignee === newAssignee) {
|
||||
return
|
||||
}
|
||||
|
||||
await client.update(value, { assignee: newAssignee })
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if value}
|
||||
<Tooltip label={tracker.string.AssignTo} fill>
|
||||
<UserBox
|
||||
_class={contact.class.Employee}
|
||||
label={tracker.string.Assignee}
|
||||
placeholder={tracker.string.Assignee}
|
||||
value={value.assignee}
|
||||
allowDeselect
|
||||
titleDeselect={tracker.string.Unassigned}
|
||||
size="large"
|
||||
kind="link"
|
||||
width="100%"
|
||||
justify="left"
|
||||
on:change={({ detail }) => handleAssigneeChanged(detail)}
|
||||
/>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
@@ -0,0 +1,49 @@
|
||||
<!--
|
||||
// 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">
|
||||
import { getClient } from '@anticrm/presentation'
|
||||
import { Issue } from '@anticrm/tracker'
|
||||
import { DatePresenter, getDaysDifference } from '@anticrm/ui'
|
||||
import { getDueDateIconModifier } from '../../utils'
|
||||
|
||||
export let value: Issue
|
||||
|
||||
const client = getClient()
|
||||
|
||||
const handleDueDateChanged = async (newDueDate: number | undefined) => {
|
||||
if (newDueDate === undefined || value.dueDate === newDueDate) {
|
||||
return
|
||||
}
|
||||
|
||||
await client.update(value, { dueDate: newDueDate })
|
||||
}
|
||||
|
||||
$: today = new Date(new Date(Date.now()).setHours(0, 0, 0, 0))
|
||||
$: isOverdue = value.dueDate !== null && value.dueDate < today.getTime()
|
||||
$: dueDate = value.dueDate === null ? null : new Date(value.dueDate)
|
||||
$: daysDifference = dueDate === null ? null : getDaysDifference(today, dueDate)
|
||||
$: iconModifier = getDueDateIconModifier(isOverdue, daysDifference)
|
||||
</script>
|
||||
|
||||
{#if value}
|
||||
<!-- TODO: fix button style and alignment -->
|
||||
<DatePresenter
|
||||
kind="transparent"
|
||||
value={value.dueDate}
|
||||
icon={iconModifier}
|
||||
editable
|
||||
on:change={({ detail }) => handleDueDateChanged(detail)}
|
||||
/>
|
||||
{/if}
|
||||
@@ -19,10 +19,10 @@
|
||||
import { getClient } from '@anticrm/presentation'
|
||||
import DueDatePopup from './DueDatePopup.svelte'
|
||||
import tracker from '../../plugin'
|
||||
import { getDueDateIconModifier } from '../../utils'
|
||||
|
||||
export let value: WithLookup<Issue>
|
||||
|
||||
const WARNING_DAYS = 7
|
||||
const client = getClient()
|
||||
|
||||
$: today = new Date(new Date(Date.now()).setHours(0, 0, 0, 0))
|
||||
@@ -30,7 +30,7 @@
|
||||
$: isOverdue = dueDateMs !== null && dueDateMs < today.getTime()
|
||||
$: dueDate = dueDateMs === null ? null : new Date(dueDateMs)
|
||||
$: daysDifference = dueDate === null ? null : getDaysDifference(today, dueDate)
|
||||
$: iconModifier = getIconModifier(isOverdue, daysDifference)
|
||||
$: iconModifier = getDueDateIconModifier(isOverdue, daysDifference)
|
||||
$: formattedDate = !dueDateMs ? '' : new Date(dueDateMs).toLocaleString('default', { month: 'short', day: 'numeric' })
|
||||
|
||||
const handleDueDateChanged = async (event: CustomEvent<Timestamp>) => {
|
||||
@@ -43,20 +43,6 @@
|
||||
await client.update(value, { dueDate: newDate })
|
||||
}
|
||||
|
||||
const getIconModifier = (isOverdue: boolean, daysDifference: number | null) => {
|
||||
if (isOverdue) {
|
||||
return 'overdue' as 'overdue' // Fixes `DatePresenter` icon type issue
|
||||
}
|
||||
|
||||
if (daysDifference === 0) {
|
||||
return 'critical' as 'critical'
|
||||
}
|
||||
|
||||
if (daysDifference !== null && daysDifference <= WARNING_DAYS) {
|
||||
return 'warning' as 'warning'
|
||||
}
|
||||
}
|
||||
|
||||
$: shouldRenderPresenter =
|
||||
dueDateMs &&
|
||||
value.$lookup?.status?.category !== tracker.issueStatusCategory.Completed &&
|
||||
|
||||
@@ -1,258 +0,0 @@
|
||||
<!--
|
||||
// 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">
|
||||
import contact from '@anticrm/contact'
|
||||
import { Class, Ref, SortingOrder, WithLookup } from '@anticrm/core'
|
||||
import { Panel } from '@anticrm/panel'
|
||||
import { createQuery, getClient, UserBox } from '@anticrm/presentation'
|
||||
import { StyledTextBox } from '@anticrm/text-editor'
|
||||
import type { Issue, IssueStatus, Team } from '@anticrm/tracker'
|
||||
import {
|
||||
Button,
|
||||
DatePresenter,
|
||||
EditBox,
|
||||
IconDownOutline,
|
||||
IconEdit,
|
||||
IconMoreH,
|
||||
IconUpOutline,
|
||||
Label
|
||||
} from '@anticrm/ui'
|
||||
import { createEventDispatcher, onMount } from 'svelte'
|
||||
import tracker from '../../plugin'
|
||||
import IssuePresenter from './IssuePresenter.svelte'
|
||||
import PriorityEditor from './PriorityEditor.svelte'
|
||||
import ProjectEditor from './ProjectEditor.svelte'
|
||||
import StatusEditor from './StatusEditor.svelte'
|
||||
|
||||
export let _id: Ref<Issue>
|
||||
export let _class: Ref<Class<Issue>>
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
const client = getClient()
|
||||
const query = createQuery()
|
||||
const statusesQuery = createQuery()
|
||||
|
||||
let issue: Issue | undefined
|
||||
let currentTeam: Team | undefined
|
||||
let issueStatuses: WithLookup<IssueStatus>[] | undefined
|
||||
let innerWidth: number
|
||||
|
||||
$: _id &&
|
||||
_class &&
|
||||
query.query(_class, { _id }, async (result) => {
|
||||
issue = result[0]
|
||||
})
|
||||
|
||||
$: if (issue !== undefined) {
|
||||
client.findOne(tracker.class.Team, { _id: issue.space }).then((r) => {
|
||||
currentTeam = r
|
||||
})
|
||||
}
|
||||
|
||||
$: currentTeam &&
|
||||
statusesQuery.query(
|
||||
tracker.class.IssueStatus,
|
||||
{ attachedTo: currentTeam._id },
|
||||
(statuses) => {
|
||||
issueStatuses = statuses
|
||||
},
|
||||
{
|
||||
lookup: { category: tracker.class.IssueStatusCategory },
|
||||
sort: { rank: SortingOrder.Ascending }
|
||||
}
|
||||
)
|
||||
|
||||
$: issueLabel = currentTeam && issue && `${currentTeam.identifier}-${issue.number}`
|
||||
|
||||
function change (field: string, value: any) {
|
||||
if (issue !== undefined) {
|
||||
client.update(issue, { [field]: value })
|
||||
}
|
||||
}
|
||||
|
||||
function copy (text: string): void {
|
||||
navigator.clipboard.writeText(text)
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
dispatch('open', { ignoreKeys: ['comments', 'name', 'description', 'number'] })
|
||||
})
|
||||
</script>
|
||||
|
||||
{#if issue !== undefined}
|
||||
<Panel
|
||||
object={issue}
|
||||
isHeader
|
||||
isAside={true}
|
||||
isSub={false}
|
||||
bind:innerWidth
|
||||
on:close={() => {
|
||||
dispatch('close')
|
||||
}}
|
||||
>
|
||||
<svelte:fragment slot="custom-title">Custom Title</svelte:fragment>
|
||||
<svelte:fragment slot="subtitle">
|
||||
<div class="flex-between flex-grow">
|
||||
{#if currentTeam}
|
||||
<IssuePresenter value={issue} {currentTeam} />
|
||||
{/if}
|
||||
<div class="buttons-group xsmall-gap">
|
||||
<Button icon={IconEdit} kind={'transparent'} size={'medium'} />
|
||||
{#if innerWidth < 900}
|
||||
<Button icon={IconMoreH} kind={'transparent'} size={'medium'} />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="navigator">
|
||||
<Button icon={IconDownOutline} kind={'secondary'} size={'medium'} />
|
||||
<Button icon={IconUpOutline} kind={'secondary'} size={'medium'} />
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="header">
|
||||
<span class="fs-title">{issueLabel}</span>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="tools">
|
||||
<Button icon={IconEdit} kind={'transparent'} size={'medium'} />
|
||||
<Button icon={IconMoreH} kind={'transparent'} size={'medium'} />
|
||||
</svelte:fragment>
|
||||
|
||||
<div class="mt-6">
|
||||
<EditBox
|
||||
label={tracker.string.Title}
|
||||
bind:value={issue.title}
|
||||
placeholder={tracker.string.IssueTitlePlaceholder}
|
||||
maxWidth={'16rem'}
|
||||
focus
|
||||
on:change={() => change('title', issue?.title)}
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-6 mb-6">
|
||||
<StyledTextBox
|
||||
alwaysEdit
|
||||
bind:content={issue.description}
|
||||
placeholder={tracker.string.IssueDescriptionPlaceholder}
|
||||
on:value={(evt) => evt.detail !== issue?.description && change('description', evt.detail)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span slot="actions-label">{issueLabel}</span>
|
||||
<svelte:fragment slot="actions">
|
||||
<Button
|
||||
icon={tracker.icon.Issue}
|
||||
title={tracker.string.CopyIssueUrl}
|
||||
width="min-content"
|
||||
size="small"
|
||||
kind="transparent"
|
||||
on:click={() => copy(window.location.href)}
|
||||
/>
|
||||
<Button
|
||||
icon={tracker.icon.Views}
|
||||
title={tracker.string.CopyIssueId}
|
||||
width="min-content"
|
||||
size="small"
|
||||
kind="transparent"
|
||||
on:click={() => issueLabel && copy(issueLabel)}
|
||||
/>
|
||||
</svelte:fragment>
|
||||
|
||||
<svelte:fragment slot="custom-attributes" let:direction>
|
||||
{#if issue && currentTeam && issueStatuses && direction === 'column'}
|
||||
<div class="content">
|
||||
<span class="label">
|
||||
<Label label={tracker.string.Status} />
|
||||
</span>
|
||||
<StatusEditor value={issue} statuses={issueStatuses} shouldShowLabel />
|
||||
<span class="label">
|
||||
<Label label={tracker.string.Priority} />
|
||||
</span>
|
||||
<PriorityEditor value={issue} shouldShowLabel />
|
||||
<span class="label">
|
||||
<Label label={tracker.string.Assignee} />
|
||||
</span>
|
||||
<UserBox
|
||||
_class={contact.class.Employee}
|
||||
label={tracker.string.Assignee}
|
||||
placeholder={tracker.string.Assignee}
|
||||
bind:value={issue.assignee}
|
||||
allowDeselect
|
||||
titleDeselect={tracker.string.Unassigned}
|
||||
size={'large'}
|
||||
kind={'link'}
|
||||
width={'100%'}
|
||||
justify={'left'}
|
||||
on:change={() => change('assignee', issue?.assignee)}
|
||||
/>
|
||||
|
||||
<span class="label">
|
||||
<Label label={tracker.string.Labels} />
|
||||
</span>
|
||||
<Button
|
||||
label={tracker.string.Labels}
|
||||
icon={tracker.icon.Labels}
|
||||
size={'large'}
|
||||
kind={'link'}
|
||||
width={'100%'}
|
||||
justify={'left'}
|
||||
/>
|
||||
|
||||
<div class="divider" />
|
||||
|
||||
<span class="label">
|
||||
<Label label={tracker.string.Project} />
|
||||
</span>
|
||||
<ProjectEditor value={issue} />
|
||||
{#if issue.dueDate !== null}
|
||||
<div class="divider" />
|
||||
<span class="label">
|
||||
<Label label={tracker.string.DueDate} />
|
||||
</span>
|
||||
<DatePresenter bind:value={issue.dueDate} editable on:change={({ detail }) => change('dueDate', detail)} />
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="buttons-group small-gap">
|
||||
<Button
|
||||
label={tracker.string.Labels}
|
||||
icon={tracker.icon.Labels}
|
||||
width="min-content"
|
||||
size="small"
|
||||
kind="no-border"
|
||||
/>
|
||||
<ProjectEditor value={issue} size={'small'} kind={'no-border'} width={'min-content'} />
|
||||
</div>
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
</Panel>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.5fr;
|
||||
grid-auto-flow: row;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
width: 100%;
|
||||
height: min-content;
|
||||
}
|
||||
|
||||
.divider {
|
||||
grid-column: 1 / 3;
|
||||
height: 1px;
|
||||
background-color: var(--divider-color);
|
||||
}
|
||||
</style>
|
||||
@@ -27,13 +27,13 @@
|
||||
|
||||
$: issueName = `${currentTeam.identifier}-${value.number}`
|
||||
|
||||
const handleIssueEditorOpened = () => {
|
||||
const handleIssuePreviewOpened = () => {
|
||||
showPanel(tracker.component.EditIssue, value._id, value._class, 'content')
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if value && shortLabel}
|
||||
<div class="flex-presenter issuePresenterRoot" class:inline-presenter={inline} on:click={handleIssueEditorOpened}>
|
||||
<div class="flex-presenter issuePresenterRoot" class:inline-presenter={inline} on:click={handleIssuePreviewOpened}>
|
||||
<div class="icon">
|
||||
<Icon icon={tracker.icon.Issue} size={'small'} />
|
||||
</div>
|
||||
|
||||
@@ -1,59 +0,0 @@
|
||||
<!--
|
||||
// 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">
|
||||
import { Ref } from '@anticrm/core'
|
||||
import { Issue, Project } from '@anticrm/tracker'
|
||||
import { getClient } from '@anticrm/presentation'
|
||||
import type { ButtonKind, ButtonShape, ButtonSize } from '@anticrm/ui'
|
||||
import tracker from '../../plugin'
|
||||
import ProjectSelector from '../ProjectSelector.svelte'
|
||||
import { IntlString } from '@anticrm/platform'
|
||||
|
||||
export let value: Issue
|
||||
export let isEditable: boolean = true
|
||||
export let shouldShowLabel: boolean = true
|
||||
export let popupPlaceholder: IntlString = tracker.string.MoveToProject
|
||||
export let shouldShowPlaceholder = true
|
||||
export let kind: ButtonKind = 'link'
|
||||
export let size: ButtonSize = 'large'
|
||||
export let shape: ButtonShape = undefined
|
||||
export let justify: 'left' | 'center' = 'left'
|
||||
export let width: string | undefined = '100%'
|
||||
|
||||
const client = getClient()
|
||||
|
||||
const handleProjectIdChanged = async (newProjectId: Ref<Project> | null | undefined) => {
|
||||
if (!isEditable || newProjectId === undefined || value.project === newProjectId) {
|
||||
return
|
||||
}
|
||||
|
||||
await client.update(value, { project: newProjectId })
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if value.project || shouldShowPlaceholder}
|
||||
<ProjectSelector
|
||||
{kind}
|
||||
{size}
|
||||
{shape}
|
||||
{width}
|
||||
{justify}
|
||||
{isEditable}
|
||||
{shouldShowLabel}
|
||||
{popupPlaceholder}
|
||||
value={value.project}
|
||||
onProjectIdChange={handleProjectIdChanged}
|
||||
/>
|
||||
{/if}
|
||||
@@ -0,0 +1,93 @@
|
||||
<!--
|
||||
// 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">
|
||||
import { WithLookup } from '@anticrm/core'
|
||||
import type { Issue, IssueStatus } from '@anticrm/tracker'
|
||||
import { Button, Label } from '@anticrm/ui'
|
||||
import tracker from '../../../plugin'
|
||||
import PriorityEditor from '../PriorityEditor.svelte'
|
||||
import StatusEditor from '../StatusEditor.svelte'
|
||||
import ProjectEditor from '../../projects/ProjectEditor.svelte'
|
||||
import AssigneeEditor from '../AssigneeEditor.svelte'
|
||||
import DueDateEditor from '../DueDateEditor.svelte'
|
||||
|
||||
export let issue: Issue
|
||||
export let issueStatuses: WithLookup<IssueStatus>[]
|
||||
</script>
|
||||
|
||||
<div class="content">
|
||||
<span class="label">
|
||||
<Label label={tracker.string.Status} />
|
||||
</span>
|
||||
<StatusEditor value={issue} statuses={issueStatuses} shouldShowLabel />
|
||||
|
||||
<span class="label">
|
||||
<Label label={tracker.string.Priority} />
|
||||
</span>
|
||||
<PriorityEditor value={issue} shouldShowLabel />
|
||||
|
||||
<span class="label">
|
||||
<Label label={tracker.string.Assignee} />
|
||||
</span>
|
||||
<AssigneeEditor value={issue} />
|
||||
|
||||
<span class="label">
|
||||
<Label label={tracker.string.Labels} />
|
||||
</span>
|
||||
<Button
|
||||
label={tracker.string.Labels}
|
||||
icon={tracker.icon.Labels}
|
||||
size={'large'}
|
||||
kind={'link'}
|
||||
width={'100%'}
|
||||
justify={'left'}
|
||||
/>
|
||||
|
||||
<div class="divider" />
|
||||
|
||||
<span class="label">
|
||||
<Label label={tracker.string.Project} />
|
||||
</span>
|
||||
<ProjectEditor value={issue} />
|
||||
|
||||
{#if issue.dueDate !== null}
|
||||
<div class="divider" />
|
||||
|
||||
<span class="label">
|
||||
<Label label={tracker.string.DueDate} />
|
||||
</span>
|
||||
<DueDateEditor value={issue} />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.5fr;
|
||||
grid-auto-flow: row;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
width: 100%;
|
||||
height: min-content;
|
||||
}
|
||||
|
||||
.divider {
|
||||
grid-column: 1 / 3;
|
||||
height: 1px;
|
||||
background-color: var(--divider-color);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,61 @@
|
||||
<!--
|
||||
// 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">
|
||||
import { Button } from '@anticrm/ui'
|
||||
import tracker from '../../../plugin'
|
||||
|
||||
export let issueUrl: string | undefined = undefined
|
||||
export let issueId: string | undefined = undefined
|
||||
export let issueBranch: string | undefined = undefined
|
||||
|
||||
function copy (text?: string): void {
|
||||
if (text) {
|
||||
navigator.clipboard.writeText(text)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if issueUrl}
|
||||
<Button
|
||||
icon={tracker.icon.Issue}
|
||||
title={tracker.string.CopyIssueUrl}
|
||||
width="min-content"
|
||||
size="small"
|
||||
kind="transparent"
|
||||
on:click={() => copy(issueUrl)}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if issueId}
|
||||
<Button
|
||||
icon={tracker.icon.Views}
|
||||
title={tracker.string.CopyIssueId}
|
||||
width="min-content"
|
||||
size="small"
|
||||
kind="transparent"
|
||||
on:click={() => copy(issueId)}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if issueBranch}
|
||||
<Button
|
||||
icon={tracker.icon.TrackerApplication}
|
||||
title={tracker.string.CopyIssueBranch}
|
||||
width="min-content"
|
||||
size="small"
|
||||
kind="transparent"
|
||||
on:click={() => issueBranch}
|
||||
/>
|
||||
{/if}
|
||||
@@ -0,0 +1,197 @@
|
||||
<!--
|
||||
// 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">
|
||||
import { Class, Data, Ref, SortingOrder, WithLookup } from '@anticrm/core'
|
||||
import { AttachmentDocList } from '@anticrm/attachment-resources'
|
||||
import { Panel } from '@anticrm/panel'
|
||||
import presentation, { createQuery, getClient, MessageViewer } from '@anticrm/presentation'
|
||||
import type { Issue, IssueStatus, Team } from '@anticrm/tracker'
|
||||
import { Button, EditBox, IconDownOutline, IconEdit, IconMoreH, IconUpOutline, Scroller } from '@anticrm/ui'
|
||||
import { StyledTextArea } from '@anticrm/text-editor'
|
||||
import { createEventDispatcher, onMount } from 'svelte'
|
||||
import tracker from '../../../plugin'
|
||||
import ControlPanel from './ControlPanel.svelte'
|
||||
import CopyToClipboard from './CopyToClipboard.svelte'
|
||||
|
||||
export let _id: Ref<Issue>
|
||||
export let _class: Ref<Class<Issue>>
|
||||
|
||||
const query = createQuery()
|
||||
const statusesQuery = createQuery()
|
||||
const dispatch = createEventDispatcher()
|
||||
const client = getClient()
|
||||
|
||||
let issue: Issue | undefined
|
||||
let currentTeam: Team | undefined
|
||||
let issueStatuses: WithLookup<IssueStatus>[] | undefined
|
||||
let title = ''
|
||||
let description = ''
|
||||
let innerWidth: number
|
||||
let isEditing = false
|
||||
|
||||
$: _id &&
|
||||
_class &&
|
||||
query.query(_class, { _id }, async (result) => {
|
||||
;[issue] = result
|
||||
title = issue.title
|
||||
description = issue.description
|
||||
})
|
||||
|
||||
$: if (issue) {
|
||||
client.findOne(tracker.class.Team, { _id: issue.space }).then((r) => (currentTeam = r))
|
||||
}
|
||||
|
||||
$: currentTeam &&
|
||||
statusesQuery.query(
|
||||
tracker.class.IssueStatus,
|
||||
{ attachedTo: currentTeam._id },
|
||||
(statuses) => (issueStatuses = statuses),
|
||||
{
|
||||
lookup: { category: tracker.class.IssueStatusCategory },
|
||||
sort: { rank: SortingOrder.Ascending }
|
||||
}
|
||||
)
|
||||
|
||||
$: issueId = currentTeam && issue && `${currentTeam.identifier}-${issue.number}`
|
||||
$: canSave = title.trim().length > 0
|
||||
|
||||
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) {
|
||||
await client.update(issue, updates)
|
||||
}
|
||||
|
||||
isEditing = false
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
dispatch('open', { ignoreKeys: ['comments', 'name', 'description', 'number'] })
|
||||
})
|
||||
</script>
|
||||
|
||||
{#if issue !== undefined}
|
||||
<Panel
|
||||
object={issue}
|
||||
isHeader
|
||||
isAside={true}
|
||||
isSub={false}
|
||||
withoutActivity={isEditing}
|
||||
bind:innerWidth
|
||||
on:close={() => dispatch('close')}
|
||||
>
|
||||
<svelte:fragment slot="subtitle">
|
||||
<div class="flex-between flex-grow">
|
||||
<div class="buttons-group xsmall-gap">
|
||||
<Button icon={IconEdit} kind={'transparent'} size="medium" on:click={edit} />
|
||||
{#if innerWidth < 900}
|
||||
<Button icon={IconMoreH} kind={'transparent'} size="medium" />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="navigator">
|
||||
<Button icon={IconDownOutline} kind="secondary" size="medium" />
|
||||
<Button icon={IconUpOutline} kind="secondary" size="medium" />
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="header">
|
||||
<span class="fs-title">
|
||||
{#if issueId}{issueId}{/if}
|
||||
</span>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="tools">
|
||||
{#if isEditing}
|
||||
<Button kind="transparent" label={presentation.string.Cancel} on:click={cancelEditing} />
|
||||
<Button disabled={!canSave} label={presentation.string.Save} on:click={save} />
|
||||
{:else}
|
||||
<Button icon={IconEdit} kind="transparent" size="medium" on:click={edit} />
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
|
||||
{#if isEditing}
|
||||
<Scroller>
|
||||
<div class="popupPanel-body__main-content py-10 clear-mins content">
|
||||
<EditBox bind:value={title} placeholder={tracker.string.IssueTitlePlaceholder} kind="large-style" />
|
||||
<div class="mt-6">
|
||||
<StyledTextArea bind:content={description} placeholder={tracker.string.IssueDescriptionPlaceholder} focus />
|
||||
</div>
|
||||
</div>
|
||||
</Scroller>
|
||||
{:else}
|
||||
<span class="title">{title}</span>
|
||||
<div class="mt-6">
|
||||
<MessageViewer message={issue.description} />
|
||||
</div>
|
||||
{/if}
|
||||
<AttachmentDocList value={issue} />
|
||||
|
||||
<span slot="actions-label">
|
||||
{#if issueId}{issueId}{/if}
|
||||
</span>
|
||||
<svelte:fragment slot="actions">
|
||||
<CopyToClipboard issueUrl={window.location.href} {issueId} />
|
||||
</svelte:fragment>
|
||||
|
||||
<svelte:fragment slot="custom-attributes">
|
||||
{#if issue && currentTeam && issueStatuses}
|
||||
<ControlPanel {issue} {issueStatuses} />
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
</Panel>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
.title {
|
||||
font-weight: 500;
|
||||
font-size: 1.125rem;
|
||||
color: var(--theme-caption-color);
|
||||
}
|
||||
|
||||
.content {
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user