mirror of
https://github.com/hcengineering/platform.git
synced 2025-01-08 21:27:45 +03:00
Tracker: Project - Project status buttons (#1793)
Signed-off-by: Artyom Grigorovich <grigorovichartyom@gmail.com>
This commit is contained in:
Artyom Grigorovich
GitHub
parent
f138f8d6a1
commit
4824d911e5
@ -85,8 +85,6 @@
|
||||
selectedObjects = Array.from(selectedElements)
|
||||
|
||||
dispatch('update', selectedObjects)
|
||||
|
||||
selectedElements = selectedElements
|
||||
}
|
||||
|
||||
const client = getClient()
|
||||
|
||||
@ -110,4 +110,39 @@
|
||||
<path d="M1 3C1 1.89543 1.89543 1 3 1H9C10.1046 1 11 1.89543 11 3V3.5H6C4.61929 3.5 3.5 4.61929 3.5 6V11H3C1.89543 11 1 10.1046 1 9V3Z" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C5.89543 5 5 5.89543 5 7V13C5 14.1046 5.89543 15 7 15H13C14.1046 15 15 14.1046 15 13V7C15 5.89543 14.1046 5 13 5H7ZM10 10C10.9665 10 11.5 9.2165 11.5 8.25C11.5 7.2835 10.9665 6.5 10 6.5C9.0335 6.5 8.5 7.2835 8.5 8.25C8.5 9.2165 9.0335 10 10 10ZM7 12.5616C7 11.5144 7.9841 10.746 9 11C9.47572 11.7136 10.5243 11.7136 11 11C12.0159 10.746 13 11.5144 13 12.5616V13.0101C13 13.2806 12.7806 13.5 12.5101 13.5H7.48995C7.21936 13.5 7 13.2806 7 13.0101V12.5616Z" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="project-status-backlog" viewBox="1 1 14 14" fill="#F2994A">
|
||||
<path d="M2 4.74695C2 4.68722 2.01039 4.62899 2.02989 4.57451L2.11601 4.42269C2.15266 4.37819 2.19711 4.33975 2.24806 4.30966L3.16473 3.76824L3.92054 5.08013L3.5 5.32852V5.8313H2V4.74695Z" />
|
||||
<path d="M4.8372 4.53871L4.0814 3.22682L5.91473 2.14398L6.67054 3.45588L4.8372 4.53871Z" />
|
||||
<path d="M7.5872 2.91446L6.8314 1.60257L7.74806 1.06115C7.7997 1.03065 7.85539 1.01027 7.91244 1H8.08756C8.14461 1.01027 8.2003 1.03065 8.25194 1.06115L9.1686 1.60257L8.4128 2.91446L8 2.67065L7.5872 2.91446Z" />
|
||||
<path d="M9.32946 3.45588L10.0853 2.14398L11.9186 3.22682L11.1628 4.53871L9.32946 3.45588Z" />
|
||||
<path d="M12.0795 5.08013L12.8353 3.76824L13.7519 4.30966C13.8029 4.33975 13.8473 4.37819 13.884 4.42269L13.9701 4.57451C13.9896 4.62899 14 4.68722 14 4.74695V5.8313H12.5V5.32852L12.0795 5.08013Z" />
|
||||
<path d="M12.5 6.91565H14V9.08435H12.5V6.91565Z" />
|
||||
<path d="M12.5 10.1687H14V11.253C14 11.3128 13.9896 11.371 13.9701 11.4255L13.884 11.5773C13.8473 11.6218 13.8029 11.6602 13.7519 11.6903L12.8353 12.2318L12.0795 10.9199L12.5 10.6715V10.1687Z" />
|
||||
<path d="M11.1628 11.4613L11.9186 12.7732L10.0853 13.856L9.32946 12.5441L11.1628 11.4613Z" />
|
||||
<path d="M8.4128 13.0855L9.1686 14.3974L8.25194 14.9389C8.2003 14.9694 8.14461 14.9897 8.08756 15H7.91244C7.85539 14.9897 7.7997 14.9694 7.74806 14.9389L6.8314 14.3974L7.5872 13.0855L8 13.3294L8.4128 13.0855Z" />
|
||||
<path d="M6.67054 12.5441L5.91473 13.856L4.0814 12.7732L4.8372 11.4613L6.67054 12.5441Z" />
|
||||
<path d="M3.92054 10.9199L3.16473 12.2318L2.24806 11.6903C2.19711 11.6602 2.15266 11.6218 2.11601 11.5773L2.02989 11.4255C2.01039 11.371 2 11.3128 2 11.253V10.1687H3.5V10.6715L3.92054 10.9199Z" />
|
||||
<path d="M3.5 9.08435H2V6.91565H3.5V9.08435Z" />
|
||||
</symbol>
|
||||
<symbol id="project-status-planned" viewBox="1 1 14 14" fill="#D7D8DB">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 5.36133L8 2.73633L3.5 5.36133L3.5 10.6382L8 13.2632L12.5 10.6382L12.5 5.36133ZM8.75581 1.44066C8.28876 1.16822 7.71124 1.16822 7.24419 1.44066L2.74419 4.06566C2.28337 4.33448 2 4.82783 2 5.36133V10.6382C2 11.1717 2.28337 11.6651 2.74419 11.9339L7.24419 14.5589C7.71124 14.8313 8.28876 14.8313 8.75581 14.5589L13.2558 11.9339C13.7166 11.6651 14 11.1717 14 10.6382V5.36133C14 4.82783 13.7166 4.33448 13.2558 4.06566L8.75581 1.44066Z" />
|
||||
</symbol>
|
||||
<symbol id="project-status-in-progress" viewBox="1 1 14 14" fill="#F2C94C">
|
||||
<path d="M8.3779 4.74233C8.14438 4.60607 7.85562 4.60607 7.6221 4.74233L5.37209 6.05513C5.14168 6.18957 5 6.4363 5 6.70311V9.34216C5 9.60897 5.14168 9.85573 5.37209 9.99016L7.6221 11.303C7.85562 11.4392 8.14438 11.4392 8.3779 11.303L10.6279 9.99016C10.8583 9.85573 11 9.60897 11 9.34216V6.70311C11 6.4363 10.8583 6.18957 10.6279 6.05513L8.3779 4.74233Z" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.24419 1.44066C7.71124 1.16822 8.28876 1.16822 8.75581 1.44066L13.2558 4.06566C13.7166 4.33448 14 4.82783 14 5.36133V10.6382C14 11.1717 13.7166 11.6651 13.2558 11.9339L8.75581 14.5589C8.28876 14.8313 7.71124 14.8313 7.24419 14.5589L2.74419 11.9339C2.28337 11.6651 2 11.1717 2 10.6382V5.36133C2 4.82783 2.28337 4.33448 2.74419 4.06566L7.24419 1.44066ZM8 2.73633L12.5 5.36133V10.6382L8 13.2632L3.5 10.6382V5.36133L8 2.73633Z" />
|
||||
</symbol>
|
||||
<symbol id="project-status-paused" viewBox="1 1 14 14" fill="#8A8F98">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.75581 1.21148C8.28876 0.929507 7.71124 0.929507 7.24419 1.21148L2.74419 3.92829C2.28337 4.20651 2 4.71711 2 5.26927V10.7307C2 11.2829 2.28337 11.7935 2.74419 12.0717L7.24419 14.7885C7.71124 15.0705 8.28876 15.0705 8.75581 14.7885L13.2558 12.0717C13.7166 11.7935 14 11.2829 14 10.7307V5.26927C14 4.71711 13.7166 4.20651 13.2558 3.92829L8.75581 1.21148ZM12.5 5.26928L8 2.55246L3.5 5.26927L3.5 10.7307L8 13.4475L12.5 10.7307L12.5 5.26928Z" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 5.75C6.91421 5.75 7.25 6.08579 7.25 6.5V9.5C7.25 9.91421 6.91421 10.25 6.5 10.25C6.08579 10.25 5.75 9.91421 5.75 9.5V6.5C5.75 6.08579 6.08579 5.75 6.5 5.75Z" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 5.75C9.91421 5.75 10.25 6.08579 10.25 6.5V9.5C10.25 9.91421 9.91421 10.25 9.5 10.25C9.08579 10.25 8.75 9.91421 8.75 9.5V6.5C8.75 6.08579 9.08579 5.75 9.5 5.75Z" />
|
||||
</symbol>
|
||||
<symbol id="project-status-completed" viewBox="1 1 14 14" fill="#5E6AD2">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 5.125L8 2.5L3.5 5.125L3.5 10.4019L8 13.0269L12.5 10.4019L12.5 5.125ZM8.75581 1.20433C8.28876 0.93189 7.71124 0.931889 7.24419 1.20433L2.74419 3.82933C2.28337 4.09815 2 4.5915 2 5.125V10.4019C2 10.9354 2.28337 11.4287 2.74419 11.6976L7.24419 14.3226C7.71124 14.595 8.28876 14.595 8.75581 14.3226L13.2558 11.6976C13.7166 11.4287 14 10.9354 14 10.4019V5.125C14 4.5915 13.7166 4.09815 13.2558 3.82933L8.75581 1.20433Z" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7381 5.69424C11.0526 5.96381 11.089 6.43728 10.8194 6.75178L7.81944 10.2518C7.68349 10.4104 7.48754 10.5051 7.27878 10.5131C7.07003 10.5212 6.86739 10.4417 6.71967 10.294L5.21967 8.79402C4.92678 8.50112 4.92678 8.02625 5.21967 7.73336C5.51256 7.44046 5.98744 7.44046 6.28033 7.73336L7.20764 8.66066L9.68056 5.77559C9.95012 5.4611 10.4236 5.42468 10.7381 5.69424Z" />
|
||||
</symbol>
|
||||
<symbol id="project-status-canceled" viewBox="1 1 14 14" fill="#8A8F98">
|
||||
<path d="M5.96967 5.96967C6.26256 5.67678 6.73744 5.67678 7.03033 5.96967L8 6.93934L8.96967 5.96967C9.26256 5.67678 9.73744 5.67678 10.0303 5.96967C10.3232 6.26256 10.3232 6.73744 10.0303 7.03033L9.06066 8L10.0303 8.96967C10.3232 9.26256 10.3232 9.73744 10.0303 10.0303C9.73744 10.3232 9.26256 10.3232 8.96967 10.0303L8 9.06066L7.03033 10.0303C6.73744 10.3232 6.26256 10.3232 5.96967 10.0303C5.67678 9.73744 5.67678 9.26256 5.96967 8.96967L6.93934 8L5.96967 7.03033C5.67678 6.73744 5.67678 6.26256 5.96967 5.96967Z" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.75581 1.21148C8.28876 0.929507 7.71124 0.929507 7.24419 1.21148L2.74419 3.92829C2.28337 4.20651 2 4.71711 2 5.26927V10.7307C2 11.2829 2.28337 11.7935 2.74419 12.0717L7.24419 14.7885C7.71124 15.0705 8.28876 15.0705 8.75581 14.7885L13.2558 12.0717C13.7166 11.7935 14 11.2829 14 10.7307V5.26927C14 4.71711 13.7166 4.20651 13.2558 3.92829L8.75581 1.21148ZM12.5 5.26928L8 2.55246L3.5 5.26927L3.5 10.7307L8 13.4475L12.5 10.7307L12.5 5.26928Z" />
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 25 KiB |
@ -49,7 +49,14 @@ loadMetadata(tracker.icon, {
|
||||
|
||||
ProjectsList: `${icons}#list`,
|
||||
ProjectsTimeline: `${icons}#timeline`,
|
||||
ProjectMembers: `${icons}#projectMembers`
|
||||
ProjectMembers: `${icons}#projectMembers`,
|
||||
|
||||
ProjectStatusBacklog: `${icons}#project-status-backlog`,
|
||||
ProjectStatusPlanned: `${icons}#project-status-planned`,
|
||||
ProjectStatusInProgress: `${icons}#project-status-in-progress`,
|
||||
ProjectStatusPaused: `${icons}#project-status-paused`,
|
||||
ProjectStatusCompleted: `${icons}#project-status-completed`,
|
||||
ProjectStatusCanceled: `${icons}#project-status-canceled`
|
||||
})
|
||||
|
||||
addStringsLoader(trackerId, async (lang: string) => await import(`../lang/${lang}.json`))
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
label: '' as IntlString,
|
||||
description: '',
|
||||
icon: tracker.icon.Projects,
|
||||
status: ProjectStatus.Planned,
|
||||
status: ProjectStatus.Backlog,
|
||||
lead: null,
|
||||
members: [],
|
||||
comments: 0,
|
||||
|
||||
@ -41,7 +41,16 @@
|
||||
return
|
||||
}
|
||||
|
||||
await client.update(value, { members: result })
|
||||
const memberToPull = value.members.filter((x) => !result.includes(x))[0]
|
||||
const memberToPush = result.filter((x) => !value.members.includes(x))[0]
|
||||
|
||||
if (memberToPull) {
|
||||
await client.update(value, { $pull: { members: memberToPull } })
|
||||
}
|
||||
|
||||
if (memberToPush) {
|
||||
await client.update(value, { $push: { members: memberToPush } })
|
||||
}
|
||||
}
|
||||
|
||||
const handleProjectMembersEditorOpened = async (event: MouseEvent) => {
|
||||
|
||||
@ -31,12 +31,12 @@
|
||||
|
||||
$: selectedStatusIcon = selectedProjectStatus
|
||||
? projectStatusAssets[selectedProjectStatus].icon
|
||||
: tracker.icon.CategoryBacklog
|
||||
: tracker.icon.ProjectStatusBacklog
|
||||
|
||||
$: selectedStatusLabel = shouldShowLabel
|
||||
? selectedProjectStatus
|
||||
? projectStatusAssets[selectedProjectStatus].label
|
||||
: tracker.string.Planned
|
||||
: tracker.string.Backlog
|
||||
: undefined
|
||||
|
||||
$: statusesInfo = defaultProjectStatuses.map((s) => ({ id: s, ...projectStatusAssets[s] }))
|
||||
@ -55,12 +55,12 @@
|
||||
</script>
|
||||
|
||||
<Button
|
||||
{kind}
|
||||
{size}
|
||||
{width}
|
||||
{justify}
|
||||
disabled={!isEditable}
|
||||
icon={selectedStatusIcon}
|
||||
label={selectedStatusLabel}
|
||||
{justify}
|
||||
{width}
|
||||
{size}
|
||||
{kind}
|
||||
disabled={!isEditable}
|
||||
on:click={handleProjectStatusEditorOpened}
|
||||
/>
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
import { Button, IconAdd, IconOptions, Label, showPopup } from '@anticrm/ui'
|
||||
|
||||
import tracker from '../../plugin'
|
||||
import { getIncludedProjectStatuses, ProjectsViewMode } from '../../utils'
|
||||
import NewProject from './NewProject.svelte'
|
||||
import ProjectsListBrowser from './ProjectsListBrowser.svelte'
|
||||
|
||||
@ -28,6 +29,7 @@
|
||||
export let title: IntlString = tracker.string.AllProjects
|
||||
export let query: DocumentQuery<Project> = {}
|
||||
export let search: string = ''
|
||||
export let mode: ProjectsViewMode = 'all'
|
||||
|
||||
const ENTRIES_LIMIT = 200
|
||||
const resultProjectsQuery = createQuery()
|
||||
@ -40,8 +42,12 @@
|
||||
|
||||
let resultProjects: Project[] = []
|
||||
|
||||
$: includedProjectStatuses = getIncludedProjectStatuses(mode)
|
||||
$: includedProjectsQuery = { status: { $in: includedProjectStatuses } }
|
||||
|
||||
$: baseQuery = {
|
||||
space: currentSpace,
|
||||
...includedProjectsQuery,
|
||||
...query
|
||||
}
|
||||
|
||||
@ -59,6 +65,14 @@
|
||||
const showCreateDialog = async () => {
|
||||
showPopup(NewProject, { space: currentSpace, targetElement: null }, null)
|
||||
}
|
||||
|
||||
const handleViewModeChanged = (newMode: ProjectsViewMode) => {
|
||||
if (newMode === undefined || newMode === mode) {
|
||||
return
|
||||
}
|
||||
|
||||
mode = newMode
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
@ -75,16 +89,40 @@
|
||||
<div class="flex-center">
|
||||
<div class="flex-center">
|
||||
<div class="buttonWrapper">
|
||||
<Button selected size="small" shape="rectangle-right" label={tracker.string.AllProjects} />
|
||||
<Button
|
||||
size="small"
|
||||
shape="rectangle-right"
|
||||
selected={mode === 'all'}
|
||||
label={tracker.string.AllProjects}
|
||||
on:click={() => handleViewModeChanged('all')}
|
||||
/>
|
||||
</div>
|
||||
<div class="buttonWrapper">
|
||||
<Button size="small" shape="rectangle" label={tracker.string.BacklogProjects} />
|
||||
<Button
|
||||
size="small"
|
||||
shape="rectangle"
|
||||
selected={mode === 'backlog'}
|
||||
label={tracker.string.BacklogProjects}
|
||||
on:click={() => handleViewModeChanged('backlog')}
|
||||
/>
|
||||
</div>
|
||||
<div class="buttonWrapper">
|
||||
<Button size="small" shape="rectangle" label={tracker.string.ActiveProjects} />
|
||||
<Button
|
||||
size="small"
|
||||
shape="rectangle"
|
||||
selected={mode === 'active'}
|
||||
label={tracker.string.ActiveProjects}
|
||||
on:click={() => handleViewModeChanged('active')}
|
||||
/>
|
||||
</div>
|
||||
<div class="buttonWrapper">
|
||||
<Button size="small" shape="rectangle-left" label={tracker.string.ClosedProjects} />
|
||||
<Button
|
||||
size="small"
|
||||
shape="rectangle-left"
|
||||
selected={mode === 'closed'}
|
||||
label={tracker.string.ClosedProjects}
|
||||
on:click={() => handleViewModeChanged('closed')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-3 filterButton">
|
||||
@ -108,7 +146,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<Button size="small" icon={IconOptions} on:click={() => {}} />
|
||||
<Button size="small" icon={IconOptions} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -134,7 +172,7 @@
|
||||
.header {
|
||||
min-height: 3.5rem;
|
||||
padding-left: 2.25rem;
|
||||
padding-right: 0.5rem;
|
||||
padding-right: 1.35rem;
|
||||
border-bottom: 1px solid var(--theme-button-border-hovered);
|
||||
}
|
||||
|
||||
|
||||
@ -115,6 +115,7 @@ export const getIssuesModificationDatePeriodTime = (period: IssuesDateModificati
|
||||
}
|
||||
|
||||
export const defaultProjectStatuses = [
|
||||
ProjectStatus.Backlog,
|
||||
ProjectStatus.Planned,
|
||||
ProjectStatus.InProgress,
|
||||
ProjectStatus.Paused,
|
||||
@ -122,13 +123,13 @@ export const defaultProjectStatuses = [
|
||||
ProjectStatus.Canceled
|
||||
]
|
||||
|
||||
// TODO: update icons
|
||||
export const projectStatusAssets: Record<ProjectStatus, { icon: Asset, label: IntlString }> = {
|
||||
[ProjectStatus.Planned]: { icon: tracker.icon.CategoryBacklog, label: tracker.string.Planned },
|
||||
[ProjectStatus.InProgress]: { icon: tracker.icon.CategoryStarted, label: tracker.string.InProgress },
|
||||
[ProjectStatus.Paused]: { icon: tracker.icon.CategoryUnstarted, label: tracker.string.Paused },
|
||||
[ProjectStatus.Completed]: { icon: tracker.icon.CategoryCompleted, label: tracker.string.Completed },
|
||||
[ProjectStatus.Canceled]: { icon: tracker.icon.CategoryCanceled, label: tracker.string.Canceled }
|
||||
[ProjectStatus.Backlog]: { icon: tracker.icon.ProjectStatusBacklog, label: tracker.string.Backlog },
|
||||
[ProjectStatus.Planned]: { icon: tracker.icon.ProjectStatusPlanned, label: tracker.string.Planned },
|
||||
[ProjectStatus.InProgress]: { icon: tracker.icon.ProjectStatusInProgress, label: tracker.string.InProgress },
|
||||
[ProjectStatus.Paused]: { icon: tracker.icon.ProjectStatusPaused, label: tracker.string.Paused },
|
||||
[ProjectStatus.Completed]: { icon: tracker.icon.ProjectStatusCompleted, label: tracker.string.Completed },
|
||||
[ProjectStatus.Canceled]: { icon: tracker.icon.ProjectStatusCanceled, label: tracker.string.Canceled }
|
||||
}
|
||||
|
||||
export const groupBy = (data: any, key: any): { [key: string]: any[] } => {
|
||||
@ -255,3 +256,25 @@ export const getDueDateIconModifier = (
|
||||
return 'warning'
|
||||
}
|
||||
}
|
||||
|
||||
export type ProjectsViewMode = 'all' | 'backlog' | 'active' | 'closed'
|
||||
|
||||
export const getIncludedProjectStatuses = (mode: ProjectsViewMode): ProjectStatus[] => {
|
||||
switch (mode) {
|
||||
case 'all': {
|
||||
return defaultProjectStatuses
|
||||
}
|
||||
case 'active': {
|
||||
return [ProjectStatus.Planned, ProjectStatus.InProgress, ProjectStatus.Paused]
|
||||
}
|
||||
case 'backlog': {
|
||||
return [ProjectStatus.Backlog]
|
||||
}
|
||||
case 'closed': {
|
||||
return [ProjectStatus.Completed, ProjectStatus.Canceled]
|
||||
}
|
||||
default: {
|
||||
return []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -137,6 +137,7 @@ export interface Document extends Doc {
|
||||
* @public
|
||||
*/
|
||||
export enum ProjectStatus {
|
||||
Backlog,
|
||||
Planned,
|
||||
InProgress,
|
||||
Paused,
|
||||
@ -230,6 +231,13 @@ export default plugin(trackerId, {
|
||||
|
||||
ProjectsList: '' as Asset,
|
||||
ProjectsTimeline: '' as Asset,
|
||||
ProjectMembers: '' as Asset
|
||||
ProjectMembers: '' as Asset,
|
||||
|
||||
ProjectStatusBacklog: '' as Asset,
|
||||
ProjectStatusPlanned: '' as Asset,
|
||||
ProjectStatusInProgress: '' as Asset,
|
||||
ProjectStatusPaused: '' as Asset,
|
||||
ProjectStatusCompleted: '' as Asset,
|
||||
ProjectStatusCanceled: '' as Asset
|
||||
}
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user