platform/plugins/notification-resources/src/components/NotificationCollaboratorsChanged.svelte
Kristina 2bf1a03907
UBERF-4632: refactor activity classes structure (#4190)
Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>
2023-12-13 22:59:11 +07:00

103 lines
2.9 KiB
Svelte

<!--
// Copyright © 2023 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 { IconAdd, IconDelete, Label } from '@hcengineering/ui'
import { personAccountByIdStore, PersonAccountRefPresenter } from '@hcengineering/contact-resources'
import { Person, PersonAccount } from '@hcengineering/contact'
import { Ref } from '@hcengineering/core'
import { DocAttributeUpdates } from '@hcengineering/activity'
import notification from '@hcengineering/notification'
export let value: DocAttributeUpdates
$: removed = getAccountRefs(value.removed)
$: added = getAccountRefs(value.added.length > 0 ? value.added : value.set)
function getAccountRefs (values: DocAttributeUpdates['removed' | 'added' | 'set']): Ref<PersonAccount>[] {
const persons = new Set<Ref<Person>>()
return values.filter((value) => {
const account = $personAccountByIdStore.get(value as Ref<PersonAccount>)
if (account === undefined) {
return false
}
if (persons.has(account.person)) {
return false
}
persons.add(account.person)
return true
}) as Ref<PersonAccount>[]
}
$: hasDifferentChanges = added.length > 0 && removed.length > 0
</script>
<div class="root">
<div class="label">
{#if hasDifferentChanges}
<Label label={notification.string.ChangedCollaborators} />:
{:else if added.length > 0}
<Label label={notification.string.NewCollaborators} />:
{:else if removed.length > 0}
<Label label={notification.string.RemovedCollaborators} />:
{/if}
</div>
{#if added.length > 0}
<div class="row">
{#if hasDifferentChanges}
<IconAdd size={'x-small'} fill={'var(--theme-trans-color)'} />
{/if}
{#each added as add}
<PersonAccountRefPresenter inline value={add} />
{/each}
</div>
{/if}
<div class="antiHSpacer"></div>
{#if removed.length > 0}
<div class="row">
{#if hasDifferentChanges}
<IconDelete size={'x-small'} fill={'var(--theme-trans-color)'} />
{/if}
{#each removed as remove}
<PersonAccountRefPresenter inline value={remove} />
{/each}
</div>
{/if}
</div>
<style lang="scss">
.root {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.label {
white-space: nowrap;
}
.row {
display: flex;
gap: 0.5rem;
align-items: center;
flex-wrap: wrap;
}
</style>