wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-04-24 01:07:50 +00:00
Code Issues Actions3 Packages Projects Releases Wiki Activity

Add right panel to the EditIssue dialog () ()

Browse Source 
Signed-off-by: Sergei Ogorelkov <sergei.ogorelkov@xored.com>
This commit is contained in:
Sergei Ogorelkov 2022-04-26 18:19:26 +07:00 committed by GitHub
parent 69a8e50220
commit 034986627e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 226 additions and 60 deletions
packages/theme/styles
_layouts.scss
plugins
tracker-assets/lang
en.json
tracker-resources/src
components/issues
EditIssue.svelte
plugin.ts

5
packages/theme/styles/_layouts.scss
View File

@ -342,6 +342,7 @@ p:last-child { margin-block-end: 0; }
.mx-1 { margin: 0 .25rem; }
.mx-2 { margin: 0 .5rem; }
.mx-3 { margin: 0 .75rem; }
.mx-auto { margin: 0 auto; }
.my-4 { margin: 1rem 0; }
.pl-1 { padding-left: .25rem; }
@ -421,14 +422,16 @@ p:last-child { margin-block-end: 0; }
.w-9 { width: 2.25rem; }
.w-14 { width: 3.5rem; }
.w-16 { width: 4rem; }
.w-24 { width: 6rem; }
.w-60 { width: 15rem; }
.w-85 { width: 21.25rem; }
.w-165 { width: 41.25rem; }
.min-w-0 { min-width: 0; }
.min-w-4 { min-width: 1rem; }
.min-w-9 { min-width: 2.25rem; }
.min-h-0 { min-height: 0; }
.min-w-80 { min-width: 20rem; }
.min-w-min { min-width: min-content; }
.min-h-0 { min-height: 0; }
.max-h-125 { max-height: 31.25rem; }
.clear-mins {
min-width: 0;

4
plugins/tracker-assets/lang/en.json
View File

@ -78,7 +78,9 @@
"DueDate": "Due date",
"All": "All",
"PastWeek": "Past week",
"PastMonth": "Past month"
"PastMonth": "Past month",
"CopyIssueUrl": "Copy Issue URL to clipboard",
"CopyIssueId": "Copy Issue ID to clipboard"
},
"status": {}
}

272
plugins/tracker-resources/src/components/issues/EditIssue.svelte
View File

@ -1,66 +1,88 @@
<!--
// Copyright © 2020, 2021 Anticrm Platform Contributors.
// Copyright © 2021 Hardcore Engineering Inc.
//
// 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 } from '@anticrm/core'
import { Class, Ref, SortingOrder, WithLookup } from '@anticrm/core'
import { createQuery, getClient, UserBox } from '@anticrm/presentation'
import { StyledTextBox } from '@anticrm/text-editor'
import type { Issue, Team } from '@anticrm/tracker'
import { AnyComponent, Button, EditBox, Grid, IconDownOutline, IconUpOutline } from '@anticrm/ui'
import type { Issue, IssueStatus, Team } from '@anticrm/tracker'
import { AnyComponent, Button, EditBox, IconDownOutline, IconUpOutline, Label, Scroller } from '@anticrm/ui'
import { createEventDispatcher, onMount } from 'svelte'
import tracker from '../../plugin'
// import Card from '../Card.svelte'
import { Panel } from '@anticrm/ui'
import IssuePresenter from './IssuePresenter.svelte'
import StatusPresenter from './StatusPresenter.svelte'
import PriorityPresenter from './PriorityPresenter.svelte'
export let _id: Ref<Issue>
export let _class: Ref<Class<Issue>>
export let rightSection: AnyComponent | undefined = undefined
let object: Issue | undefined
let currentTeam: Team | undefined
const query = createQuery()
$: _id &&
_class &&
query.query(_class, { _id }, async (result) => {
object = result[0]
})
$: if (object !== undefined) {
client.findOne(tracker.class.Team, { _id: object.space }).then((r) => {
currentTeam = r
})
}
const statusesQuery = createQuery()
const dispatch = createEventDispatcher()
const client = getClient()
let issue: Issue | undefined
let currentTeam: Team | undefined
let issueStatuses: WithLookup<IssueStatus>[] | undefined
$: _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 (object !== undefined) {
client.update(object, { [field]: value })
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 object !== undefined}
{#if issue !== undefined}
<Panel
reverseCommands={true}
rightSection={rightSection !== undefined}
@ -68,41 +90,177 @@
dispatch('close')
}}
>
<svelte:fragment slot="subtitle">
{#if currentTeam}
<IssuePresenter value={object} {currentTeam} />
{/if}
</svelte:fragment>
<svelte:fragment slot="navigate-actions">
<Button icon={IconDownOutline} kind={'secondary'} size={'medium'} />
<Button icon={IconUpOutline} kind={'secondary'} size={'medium'} />
</svelte:fragment>
<div class="p-10">
<Grid column={1} rowGap={1.5}>
<EditBox
label={tracker.string.Title}
bind:value={object.title}
placeholder={tracker.string.IssueTitlePlaceholder}
maxWidth={'16rem'}
focus
on:change={() => change('title', object?.title)}
/>
<StyledTextBox
alwaysEdit
bind:content={object.description}
placeholder={tracker.string.IssueDescriptionPlaceholder}
on:value={(evt) => change('description', evt.detail)}
/>
<UserBox
_class={contact.class.Employee}
label={tracker.string.Assignee}
placeholder={tracker.string.Assignee}
bind:value={object.assignee}
allowDeselect
titleDeselect={tracker.string.Unassigned}
on:change={() => change('assignee', object?.assignee)}
/>
</Grid>
<div class="flex w-full h-full">
<div class="flex-col main-panel">
<div class="ac-header short divide mx-auto header">
{#if currentTeam}
<IssuePresenter value={issue} {currentTeam} />
{/if}
</div>
<Scroller>
<div class="flex-col flex-grow flex-no-shrink h-full mx-auto content">
<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">
<StyledTextBox
alwaysEdit
bind:content={issue.description}
placeholder={tracker.string.IssueDescriptionPlaceholder}
on:value={(evt) => change('description', evt.detail)}
/>
</div>
</div>
</Scroller>
</div>
{#if issue && currentTeam && issueStatuses}
<div class="flex-grow relative min-w-80 right-panel">
<div class="ac-header short divide header">
<span class="w-24 overflow-label">{issueLabel}</span>
<div class="buttons-group">
<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)}
/>
</div>
</div>
<div class="content">
<div class="flex-row-center mb-4">
<span class="label w-24">
<Label label={tracker.string.Status} />
</span>
<StatusPresenter value={issue} statuses={issueStatuses} currentSpace={currentTeam._id} shouldShowLabel />
</div>
<div class="flex-row-center mb-4">
<span class="label w-24">
<Label label={tracker.string.Priority} />
</span>
<PriorityPresenter value={issue} currentSpace={currentTeam._id} shouldShowLabel />
</div>
<div class="flex-row-center mb-4">
<span class="label w-24">
<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}
on:change={() => change('assignee', issue?.assignee)}
/>
</div>
<div class="flex-row-center mb-4">
<span class="label w-24">
<Label label={tracker.string.Labels} />
</span>
<Button
label={tracker.string.Labels}
icon={tracker.icon.Labels}
width="min-content"
size="small"
kind="no-border"
/>
</div>
<div class="devider" />
<div class="flex-row-center mb-4">
<span class="label w-24">
<Label label={tracker.string.Project} />
</span>
<Button
label={tracker.string.Project}
icon={tracker.icon.Projects}
width="min-content"
size="small"
kind="no-border"
/>
</div>
</div>
</div>
{/if}
</div>
</Panel>
{/if}
<style lang="scss">
.main-panel {
flex-grow: 2;
flex-basis: 47.5rem;
.header {
max-width: 56.25rem;
width: calc(100% - 5rem);
justify-content: space-between;
padding: 0 1.25rem;
}
.content {
max-width: 53.75rem;
width: calc(100% - 7.5rem);
}
}
.right-panel {
.header {
padding: 1rem 0;
margin: 0 1.5rem;
}
.content {
position: absolute;
inset: 2.5rem 0 0;
padding: 1.5rem 0.5rem 1.5rem 1.5rem;
.label {
margin: 0.625rem 0;
}
}
.devider {
height: 1px;
border-bottom: 1px solid var(--divider-color);
margin: 0.75rem 1.5rem 1.25rem 0;
}
&::before {
content: '';
position: absolute;
border-left: 1px solid var(--divider-color);
top: 1.125rem;
bottom: 1.125rem;
width: 0px;
}
}
</style>

5
plugins/tracker-resources/src/plugin.ts
View File

@ -104,7 +104,10 @@ export default mergeIds(trackerId, tracker, {
IssueTitlePlaceholder: '' as IntlString,
IssueDescriptionPlaceholder: '' as IntlString,
Unassigned: '' as IntlString,
AddIssueTooltip: '' as IntlString
AddIssueTooltip: '' as IntlString,
CopyIssueUrl: '' as IntlString,
CopyIssueId: '' as IntlString
},
component: {
NopeComponent: '' as AnyComponent,