Skip to content

Commit

Permalink
Add right panel to the EditIssue dialog (#1272) (#1546)
Browse files Browse the repository at this point in the history 
Signed-off-by: Sergei Ogorelkov <sergei.ogorelkov@xored.com>
  • Loading branch information
Sergei Ogorelkov authored Apr 26, 2022
1 parent 69a8e50 commit 0349866
Show file tree
Hide file tree
Showing 4 changed files with 219 additions and 53 deletions.
5 changes: 4 additions & 1 deletion packages/theme/styles/_layouts.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
Expand Down Expand Up @@ -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;
Expand Down
4 changes: 3 additions & 1 deletion plugins/tracker-assets/lang/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": {}
}
258 changes: 208 additions & 50 deletions plugins/tracker-resources/src/components/issues/EditIssue.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,108 +1,266 @@
<!--
// 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
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
const query = createQuery()
$: _id &&
_class &&
query.query(_class, { _id }, async (result) => {
object = result[0]
issue = result[0]
})
$: if (object !== undefined) {
client.findOne(tracker.class.Team, { _id: object.space }).then((r) => {
$: if (issue !== undefined) {
client.findOne(tracker.class.Team, { _id: issue.space }).then((r) => {
currentTeam = r
})
}
const dispatch = createEventDispatcher()
const client = getClient()
$: 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}
on:close={() => {
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 changes: 4 additions & 1 deletion plugins/tracker-resources/src/plugin.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down

0 comments on commit 0349866

Please sign in to comment.