mirror of
https://github.com/hcengineering/platform.git
synced 2025-06-11 12:57:59 +00:00
Fix space security (#3016)
Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>
This commit is contained in:
parent
46cf3cc93a
commit
f3ff78843d
285
packages/presentation/src/components/DocPopup.svelte
Normal file
285
packages/presentation/src/components/DocPopup.svelte
Normal file
@ -0,0 +1,285 @@
|
|||||||
|
<!--
|
||||||
|
// 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 type { Class, Doc, Ref } from '@hcengineering/core'
|
||||||
|
import type { IntlString } from '@hcengineering/platform'
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
CheckBox,
|
||||||
|
EditBox,
|
||||||
|
FocusHandler,
|
||||||
|
Icon,
|
||||||
|
IconAdd,
|
||||||
|
IconCheck,
|
||||||
|
ListView,
|
||||||
|
createFocusManager,
|
||||||
|
deviceOptionsStore,
|
||||||
|
resizeObserver,
|
||||||
|
showPopup,
|
||||||
|
tooltip
|
||||||
|
} from '@hcengineering/ui'
|
||||||
|
import { createEventDispatcher } from 'svelte'
|
||||||
|
import presentation from '..'
|
||||||
|
import { ObjectCreate } from '../types'
|
||||||
|
import { getClient } from '../utils'
|
||||||
|
|
||||||
|
export let _class: Ref<Class<Doc>>
|
||||||
|
export let objects: Doc[] = []
|
||||||
|
export let selected: Ref<Doc> | undefined = undefined
|
||||||
|
|
||||||
|
export let multiSelect: boolean = false
|
||||||
|
export let closeAfterSelect: boolean = true
|
||||||
|
export let allowDeselect: boolean = false
|
||||||
|
export let titleDeselect: IntlString | undefined = undefined
|
||||||
|
export let placeholder: IntlString = presentation.string.Search
|
||||||
|
export let selectedObjects: Ref<Doc>[] = []
|
||||||
|
export let ignoreObjects: Ref<Doc>[] = []
|
||||||
|
export let shadows: boolean = true
|
||||||
|
export let width: 'medium' | 'large' | 'full' = 'medium'
|
||||||
|
export let size: 'small' | 'medium' | 'large' = 'small'
|
||||||
|
|
||||||
|
export let searchField: string = 'name'
|
||||||
|
export let noSearchField: boolean = false
|
||||||
|
export let groupBy = '_class'
|
||||||
|
|
||||||
|
export let create: ObjectCreate | undefined = undefined
|
||||||
|
export let readonly = false
|
||||||
|
export let disallowDeselect: Ref<Doc>[] | undefined = undefined
|
||||||
|
|
||||||
|
let search: string = ''
|
||||||
|
|
||||||
|
$: selectedElements = new Set(selectedObjects)
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher()
|
||||||
|
|
||||||
|
$: showCategories =
|
||||||
|
objects.map((it) => (it as any)[groupBy]).filter((it, index, arr) => arr.indexOf(it) === index).length > 1
|
||||||
|
|
||||||
|
const checkSelected = (item: Doc): void => {
|
||||||
|
if (selectedElements.has(item._id)) {
|
||||||
|
selectedElements.delete(item._id)
|
||||||
|
} else {
|
||||||
|
selectedElements.add(item._id)
|
||||||
|
}
|
||||||
|
|
||||||
|
selectedObjects = Array.from(selectedElements)
|
||||||
|
|
||||||
|
dispatch('update', selectedObjects)
|
||||||
|
}
|
||||||
|
|
||||||
|
const client = getClient()
|
||||||
|
|
||||||
|
let selection = 0
|
||||||
|
let list: ListView
|
||||||
|
|
||||||
|
async function handleSelection (evt: Event | undefined, objects: Doc[], selection: number): Promise<void> {
|
||||||
|
const item = objects[selection]
|
||||||
|
|
||||||
|
if (!multiSelect) {
|
||||||
|
if (allowDeselect) {
|
||||||
|
selected = item._id === selected ? undefined : item._id
|
||||||
|
} else {
|
||||||
|
selected = item._id
|
||||||
|
}
|
||||||
|
dispatch(closeAfterSelect ? 'close' : 'update', selected !== undefined ? item : undefined)
|
||||||
|
} else {
|
||||||
|
checkSelected(item)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onKeydown (key: KeyboardEvent): void {
|
||||||
|
if (key.code === 'ArrowUp') {
|
||||||
|
key.stopPropagation()
|
||||||
|
key.preventDefault()
|
||||||
|
list.select(selection - 1)
|
||||||
|
}
|
||||||
|
if (key.code === 'ArrowDown') {
|
||||||
|
key.stopPropagation()
|
||||||
|
key.preventDefault()
|
||||||
|
list.select(selection + 1)
|
||||||
|
}
|
||||||
|
if (key.code === 'Enter') {
|
||||||
|
key.preventDefault()
|
||||||
|
key.stopPropagation()
|
||||||
|
handleSelection(key, objects, selection)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const manager = createFocusManager()
|
||||||
|
|
||||||
|
function onCreate (): void {
|
||||||
|
if (create === undefined) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const c = create
|
||||||
|
showPopup(c.component, c.props ?? {}, 'top', async (res) => {
|
||||||
|
if (res != null) {
|
||||||
|
// We expect reference to new object.
|
||||||
|
const newPerson = await client.findOne(_class, { _id: res })
|
||||||
|
if (newPerson !== undefined) {
|
||||||
|
search = c.update?.(newPerson) ?? ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
function toAny (obj: any): any {
|
||||||
|
return obj
|
||||||
|
}
|
||||||
|
|
||||||
|
let selectedDiv: HTMLElement | undefined
|
||||||
|
let scrollDiv: HTMLElement | undefined
|
||||||
|
let cHeight = 0
|
||||||
|
|
||||||
|
const updateLocation = (scrollDiv?: HTMLElement, selectedDiv?: HTMLElement, objects?: Doc[], selected?: Ref<Doc>) => {
|
||||||
|
const objIt = objects?.find((it) => it._id === selected)
|
||||||
|
if (objIt === undefined) {
|
||||||
|
cHeight = 0
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (scrollDiv && selectedDiv) {
|
||||||
|
const r = selectedDiv.getBoundingClientRect()
|
||||||
|
const r2 = scrollDiv.getBoundingClientRect()
|
||||||
|
if (r && r2) {
|
||||||
|
if (r.top > r2.top && r.bottom < r2.bottom) {
|
||||||
|
cHeight = 0
|
||||||
|
} else {
|
||||||
|
if (r.bottom < r2.bottom) {
|
||||||
|
cHeight = 1
|
||||||
|
} else {
|
||||||
|
cHeight = -1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$: updateLocation(scrollDiv, selectedDiv, objects, selected)
|
||||||
|
|
||||||
|
const forbiddenDeselectItemIds = new Set(disallowDeselect)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<FocusHandler {manager} />
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="selectPopup"
|
||||||
|
class:full-width={width === 'full'}
|
||||||
|
class:plainContainer={!shadows}
|
||||||
|
class:width-40={width === 'large'}
|
||||||
|
on:keydown={onKeydown}
|
||||||
|
use:resizeObserver={() => {
|
||||||
|
dispatch('changeContent')
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div class="header flex-between">
|
||||||
|
<EditBox
|
||||||
|
kind={'search-style'}
|
||||||
|
focusIndex={1}
|
||||||
|
focus={!$deviceOptionsStore.isMobile}
|
||||||
|
bind:value={search}
|
||||||
|
on:change={() => dispatch('search', search)}
|
||||||
|
on:input={() => dispatch('search', search)}
|
||||||
|
{placeholder}
|
||||||
|
/>
|
||||||
|
{#if create !== undefined}
|
||||||
|
<div class="mx-2">
|
||||||
|
<Button
|
||||||
|
focusIndex={2}
|
||||||
|
kind={'transparent'}
|
||||||
|
{size}
|
||||||
|
icon={IconAdd}
|
||||||
|
showTooltip={{ label: create.label }}
|
||||||
|
on:click={onCreate}
|
||||||
|
disabled={readonly}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{#if cHeight === 1}
|
||||||
|
<div class="background-content-accent-color" style:height={'2px'} />
|
||||||
|
{/if}
|
||||||
|
<div class="scroll" on:scroll={() => updateLocation(scrollDiv, selectedDiv, objects, selected)} bind:this={scrollDiv}>
|
||||||
|
<div class="box">
|
||||||
|
<ListView bind:this={list} count={objects.length} bind:selection>
|
||||||
|
<svelte:fragment slot="category" let:item>
|
||||||
|
{#if showCategories}
|
||||||
|
{@const obj = toAny(objects[item])}
|
||||||
|
{#if item === 0 || (item > 0 && toAny(objects[item - 1])[groupBy] !== obj[groupBy])}
|
||||||
|
<!--Category for first item-->
|
||||||
|
<div class="category-box">
|
||||||
|
<slot name="category" item={obj} />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
</svelte:fragment>
|
||||||
|
<svelte:fragment slot="item" let:item>
|
||||||
|
{@const obj = objects[item]}
|
||||||
|
{@const isDeselectDisabled = selectedElements.has(obj._id) && forbiddenDeselectItemIds.has(obj._id)}
|
||||||
|
<button
|
||||||
|
class="menu-item w-full flex-row-center"
|
||||||
|
class:background-button-bg-color={!allowDeselect && obj._id === selected}
|
||||||
|
class:border-radius-1={!allowDeselect && obj._id === selected}
|
||||||
|
disabled={readonly || isDeselectDisabled}
|
||||||
|
on:click={() => {
|
||||||
|
handleSelection(undefined, objects, item)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{#if allowDeselect && selected}
|
||||||
|
<div class="icon" class:disabled={readonly}>
|
||||||
|
{#if obj._id === selected}
|
||||||
|
<div bind:this={selectedDiv}>
|
||||||
|
{#if titleDeselect}
|
||||||
|
<div class="clear-mins" use:tooltip={{ label: titleDeselect ?? presentation.string.Deselect }}>
|
||||||
|
<Icon icon={IconCheck} {size} />
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<Icon icon={IconCheck} {size} />
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<span class="label" class:disabled={readonly || isDeselectDisabled}>
|
||||||
|
{#if obj._id === selected}
|
||||||
|
<div bind:this={selectedDiv}>
|
||||||
|
<slot name="item" item={obj} />
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<slot name="item" item={obj} />
|
||||||
|
{/if}
|
||||||
|
</span>
|
||||||
|
{#if multiSelect}
|
||||||
|
<div class="check-right pointer-events-none">
|
||||||
|
<CheckBox checked={selectedElements.has(obj._id)} primary readonly={readonly || isDeselectDisabled} />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
|
</svelte:fragment>
|
||||||
|
</ListView>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{#if cHeight === -1}
|
||||||
|
<div class="background-content-accent-color" style:height={'2px'} />
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.plainContainer {
|
||||||
|
color: var(--caption-color);
|
||||||
|
background-color: var(--body-color);
|
||||||
|
border: 1px solid var(--button-border-color);
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
</style>
|
@ -15,25 +15,10 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { Class, Doc, DocumentQuery, FindOptions, Ref } from '@hcengineering/core'
|
import type { Class, Doc, DocumentQuery, FindOptions, Ref } from '@hcengineering/core'
|
||||||
import type { IntlString } from '@hcengineering/platform'
|
import type { IntlString } from '@hcengineering/platform'
|
||||||
import {
|
|
||||||
Button,
|
|
||||||
CheckBox,
|
|
||||||
createFocusManager,
|
|
||||||
EditBox,
|
|
||||||
FocusHandler,
|
|
||||||
Icon,
|
|
||||||
IconAdd,
|
|
||||||
IconCheck,
|
|
||||||
ListView,
|
|
||||||
showPopup,
|
|
||||||
tooltip,
|
|
||||||
resizeObserver,
|
|
||||||
deviceOptionsStore
|
|
||||||
} from '@hcengineering/ui'
|
|
||||||
import { createEventDispatcher } from 'svelte'
|
|
||||||
import presentation from '..'
|
import presentation from '..'
|
||||||
import { ObjectCreate } from '../types'
|
import { ObjectCreate } from '../types'
|
||||||
import { createQuery, getClient } from '../utils'
|
import { createQuery } from '../utils'
|
||||||
|
import DocPopup from './DocPopup.svelte'
|
||||||
|
|
||||||
export let _class: Ref<Class<Doc>>
|
export let _class: Ref<Class<Doc>>
|
||||||
export let options: FindOptions<Doc> | undefined = undefined
|
export let options: FindOptions<Doc> | undefined = undefined
|
||||||
@ -63,9 +48,6 @@
|
|||||||
let search: string = ''
|
let search: string = ''
|
||||||
let objects: Doc[] = []
|
let objects: Doc[] = []
|
||||||
|
|
||||||
$: selectedElements = new Set(selectedObjects)
|
|
||||||
|
|
||||||
const dispatch = createEventDispatcher()
|
|
||||||
const query = createQuery()
|
const query = createQuery()
|
||||||
|
|
||||||
$: _idExtra = typeof docQuery?._id === 'object' ? docQuery?._id : {}
|
$: _idExtra = typeof docQuery?._id === 'object' ? docQuery?._id : {}
|
||||||
@ -90,221 +72,41 @@
|
|||||||
},
|
},
|
||||||
{ ...(options ?? {}), limit: 200 }
|
{ ...(options ?? {}), limit: 200 }
|
||||||
)
|
)
|
||||||
|
|
||||||
$: showCategories =
|
|
||||||
objects.map((it) => (it as any)[groupBy]).filter((it, index, arr) => arr.indexOf(it) === index).length > 1
|
|
||||||
|
|
||||||
const checkSelected = (item: Doc): void => {
|
|
||||||
if (selectedElements.has(item._id)) {
|
|
||||||
selectedElements.delete(item._id)
|
|
||||||
} else {
|
|
||||||
selectedElements.add(item._id)
|
|
||||||
}
|
|
||||||
|
|
||||||
selectedObjects = Array.from(selectedElements)
|
|
||||||
|
|
||||||
dispatch('update', selectedObjects)
|
|
||||||
}
|
|
||||||
|
|
||||||
const client = getClient()
|
|
||||||
|
|
||||||
let selection = 0
|
|
||||||
let list: ListView
|
|
||||||
|
|
||||||
async function handleSelection (evt: Event | undefined, objects: Doc[], selection: number): Promise<void> {
|
|
||||||
const item = objects[selection]
|
|
||||||
|
|
||||||
if (!multiSelect) {
|
|
||||||
if (allowDeselect) {
|
|
||||||
selected = item._id === selected ? undefined : item._id
|
|
||||||
} else {
|
|
||||||
selected = item._id
|
|
||||||
}
|
|
||||||
dispatch(closeAfterSelect ? 'close' : 'update', selected !== undefined ? item : undefined)
|
|
||||||
} else {
|
|
||||||
checkSelected(item)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function onKeydown (key: KeyboardEvent): void {
|
|
||||||
if (key.code === 'ArrowUp') {
|
|
||||||
key.stopPropagation()
|
|
||||||
key.preventDefault()
|
|
||||||
list.select(selection - 1)
|
|
||||||
}
|
|
||||||
if (key.code === 'ArrowDown') {
|
|
||||||
key.stopPropagation()
|
|
||||||
key.preventDefault()
|
|
||||||
list.select(selection + 1)
|
|
||||||
}
|
|
||||||
if (key.code === 'Enter') {
|
|
||||||
key.preventDefault()
|
|
||||||
key.stopPropagation()
|
|
||||||
handleSelection(key, objects, selection)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const manager = createFocusManager()
|
|
||||||
|
|
||||||
function onCreate (): void {
|
|
||||||
if (create === undefined) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const c = create
|
|
||||||
showPopup(c.component, c.props ?? {}, 'top', async (res) => {
|
|
||||||
if (res != null) {
|
|
||||||
// We expect reference to new object.
|
|
||||||
const newPerson = await client.findOne(_class, { _id: res })
|
|
||||||
if (newPerson !== undefined) {
|
|
||||||
search = c.update?.(newPerson) ?? ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
function toAny (obj: any): any {
|
|
||||||
return obj
|
|
||||||
}
|
|
||||||
|
|
||||||
let selectedDiv: HTMLElement | undefined
|
|
||||||
let scrollDiv: HTMLElement | undefined
|
|
||||||
let cHeight = 0
|
|
||||||
|
|
||||||
const updateLocation = (scrollDiv?: HTMLElement, selectedDiv?: HTMLElement, objects?: Doc[], selected?: Ref<Doc>) => {
|
|
||||||
const objIt = objects?.find((it) => it._id === selected)
|
|
||||||
if (objIt === undefined) {
|
|
||||||
cHeight = 0
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (scrollDiv && selectedDiv) {
|
|
||||||
const r = selectedDiv.getBoundingClientRect()
|
|
||||||
const r2 = scrollDiv.getBoundingClientRect()
|
|
||||||
if (r && r2) {
|
|
||||||
if (r.top > r2.top && r.bottom < r2.bottom) {
|
|
||||||
cHeight = 0
|
|
||||||
} else {
|
|
||||||
if (r.bottom < r2.bottom) {
|
|
||||||
cHeight = 1
|
|
||||||
} else {
|
|
||||||
cHeight = -1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$: updateLocation(scrollDiv, selectedDiv, objects, selected)
|
|
||||||
|
|
||||||
const forbiddenDeselectItemIds = new Set(disallowDeselect)
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<FocusHandler {manager} />
|
<DocPopup
|
||||||
|
{_class}
|
||||||
<div
|
{objects}
|
||||||
class="selectPopup"
|
{selected}
|
||||||
class:full-width={width === 'full'}
|
{multiSelect}
|
||||||
class:plainContainer={!shadows}
|
{closeAfterSelect}
|
||||||
class:width-40={width === 'large'}
|
{allowDeselect}
|
||||||
on:keydown={onKeydown}
|
{titleDeselect}
|
||||||
use:resizeObserver={() => {
|
{placeholder}
|
||||||
dispatch('changeContent')
|
{selectedObjects}
|
||||||
}}
|
{ignoreObjects}
|
||||||
|
{shadows}
|
||||||
|
{width}
|
||||||
|
{size}
|
||||||
|
{searchField}
|
||||||
|
{noSearchField}
|
||||||
|
{groupBy}
|
||||||
|
{create}
|
||||||
|
{readonly}
|
||||||
|
{disallowDeselect}
|
||||||
|
on:update
|
||||||
|
on:close
|
||||||
|
on:changeContent
|
||||||
|
on:search={(e) => (search = e.detail)}
|
||||||
>
|
>
|
||||||
<div class="header flex-between">
|
<svelte:fragment slot="item" let:item>
|
||||||
<EditBox
|
{#if $$slots.item}
|
||||||
kind={'search-style'}
|
<slot name="item" {item} />
|
||||||
focusIndex={1}
|
|
||||||
focus={!$deviceOptionsStore.isMobile}
|
|
||||||
bind:value={search}
|
|
||||||
{placeholder}
|
|
||||||
/>
|
|
||||||
{#if create !== undefined}
|
|
||||||
<div class="mx-2">
|
|
||||||
<Button
|
|
||||||
focusIndex={2}
|
|
||||||
kind={'transparent'}
|
|
||||||
{size}
|
|
||||||
icon={IconAdd}
|
|
||||||
showTooltip={{ label: create.label }}
|
|
||||||
on:click={onCreate}
|
|
||||||
disabled={readonly}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</svelte:fragment>
|
||||||
{#if cHeight === 1}
|
<svelte:fragment slot="category" let:item>
|
||||||
<div class="background-content-accent-color" style:height={'2px'} />
|
{#if $$slots.category}
|
||||||
{/if}
|
<slot name="category" {item} />
|
||||||
<div class="scroll" on:scroll={() => updateLocation(scrollDiv, selectedDiv, objects, selected)} bind:this={scrollDiv}>
|
{/if}
|
||||||
<div class="box">
|
</svelte:fragment>
|
||||||
<ListView bind:this={list} count={objects.length} bind:selection>
|
</DocPopup>
|
||||||
<svelte:fragment slot="category" let:item>
|
|
||||||
{#if showCategories}
|
|
||||||
{@const obj = toAny(objects[item])}
|
|
||||||
{#if item === 0 || (item > 0 && toAny(objects[item - 1])[groupBy] !== obj[groupBy])}
|
|
||||||
<!--Category for first item-->
|
|
||||||
<div class="category-box">
|
|
||||||
<slot name="category" item={obj} />
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
{/if}
|
|
||||||
</svelte:fragment>
|
|
||||||
<svelte:fragment slot="item" let:item>
|
|
||||||
{@const obj = objects[item]}
|
|
||||||
{@const isDeselectDisabled = selectedElements.has(obj._id) && forbiddenDeselectItemIds.has(obj._id)}
|
|
||||||
<button
|
|
||||||
class="menu-item w-full flex-row-center"
|
|
||||||
class:background-button-bg-color={!allowDeselect && obj._id === selected}
|
|
||||||
class:border-radius-1={!allowDeselect && obj._id === selected}
|
|
||||||
disabled={readonly || isDeselectDisabled}
|
|
||||||
on:click={() => {
|
|
||||||
handleSelection(undefined, objects, item)
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{#if allowDeselect && selected}
|
|
||||||
<div class="icon" class:disabled={readonly}>
|
|
||||||
{#if obj._id === selected}
|
|
||||||
<div bind:this={selectedDiv}>
|
|
||||||
{#if titleDeselect}
|
|
||||||
<div class="clear-mins" use:tooltip={{ label: titleDeselect ?? presentation.string.Deselect }}>
|
|
||||||
<Icon icon={IconCheck} {size} />
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<Icon icon={IconCheck} {size} />
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<span class="label" class:disabled={readonly || isDeselectDisabled}>
|
|
||||||
{#if obj._id === selected}
|
|
||||||
<div bind:this={selectedDiv}>
|
|
||||||
<slot name="item" item={obj} />
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<slot name="item" item={obj} />
|
|
||||||
{/if}
|
|
||||||
</span>
|
|
||||||
{#if multiSelect}
|
|
||||||
<div class="check-right pointer-events-none">
|
|
||||||
<CheckBox checked={selectedElements.has(obj._id)} primary readonly={readonly || isDeselectDisabled} />
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</button>
|
|
||||||
</svelte:fragment>
|
|
||||||
</ListView>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{#if cHeight === -1}
|
|
||||||
<div class="background-content-accent-color" style:height={'2px'} />
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.plainContainer {
|
|
||||||
color: var(--caption-color);
|
|
||||||
background-color: var(--body-color);
|
|
||||||
border: 1px solid var(--button-border-color);
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
@ -13,13 +13,13 @@
|
|||||||
// limitations under the License.
|
// limitations under the License.
|
||||||
-->
|
-->
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import core, { Class, Ref, Space } from '@hcengineering/core'
|
||||||
import type { IntlString } from '@hcengineering/platform'
|
import type { IntlString } from '@hcengineering/platform'
|
||||||
import { translate } from '@hcengineering/platform'
|
import { translate } from '@hcengineering/platform'
|
||||||
|
import { CheckBox, deviceOptionsStore, resizeObserver, tooltip } from '@hcengineering/ui'
|
||||||
import { createEventDispatcher, onMount } from 'svelte'
|
import { createEventDispatcher, onMount } from 'svelte'
|
||||||
import core, { Class, getCurrentAccount, Ref, Space } from '@hcengineering/core'
|
|
||||||
import { tooltip, CheckBox, resizeObserver, deviceOptionsStore } from '@hcengineering/ui'
|
|
||||||
import { createQuery } from '../utils'
|
|
||||||
import presentation from '..'
|
import presentation from '..'
|
||||||
|
import { createQuery } from '../utils'
|
||||||
import SpaceInfo from './SpaceInfo.svelte'
|
import SpaceInfo from './SpaceInfo.svelte'
|
||||||
|
|
||||||
export let _classes: Ref<Class<Space>>[] = []
|
export let _classes: Ref<Class<Space>>[] = []
|
||||||
@ -36,7 +36,6 @@
|
|||||||
|
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
const query = createQuery()
|
const query = createQuery()
|
||||||
const myAccId = getCurrentAccount()._id
|
|
||||||
|
|
||||||
$: query.query<Space>(
|
$: query.query<Space>(
|
||||||
core.class.Space,
|
core.class.Space,
|
||||||
@ -54,11 +53,7 @@
|
|||||||
const update = (spaces_: Space[]) => {
|
const update = (spaces_: Space[]) => {
|
||||||
shownSpaces = spaces_.filter((sp) => {
|
shownSpaces = spaces_.filter((sp) => {
|
||||||
// don't show archived unless search is specified or this space is selected
|
// don't show archived unless search is specified or this space is selected
|
||||||
// show private only if it includes the current user
|
return !sp.archived || searchQuery || selectedSpaces.includes(sp._id)
|
||||||
return (
|
|
||||||
(!sp.archived || searchQuery || selectedSpaces.includes(sp._id)) &&
|
|
||||||
(!sp.private || sp.members.includes(myAccId))
|
|
||||||
)
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -13,15 +13,16 @@
|
|||||||
// limitations under the License.
|
// limitations under the License.
|
||||||
-->
|
-->
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { Class, Doc, DocumentQuery, FindOptions, Ref, Space } from '@hcengineering/core'
|
import { Class, Doc, DocumentQuery, FindOptions, Ref, Space, getCurrentAccount } from '@hcengineering/core'
|
||||||
import { AnySvelteComponent, ButtonSize } from '@hcengineering/ui'
|
import { AnySvelteComponent, ButtonSize } from '@hcengineering/ui'
|
||||||
import { ObjectCreate } from '../types'
|
import { ObjectCreate } from '../types'
|
||||||
import ObjectPopup from './ObjectPopup.svelte'
|
import { createQuery } from '../utils'
|
||||||
|
import DocPopup from './DocPopup.svelte'
|
||||||
import SpaceInfo from './SpaceInfo.svelte'
|
import SpaceInfo from './SpaceInfo.svelte'
|
||||||
|
|
||||||
export let _class: Ref<Class<Space>>
|
export let _class: Ref<Class<Space>>
|
||||||
export let selected: Ref<Space> | undefined
|
export let selected: Ref<Space> | undefined
|
||||||
export let spaceQuery: DocumentQuery<Space> | undefined
|
export let spaceQuery: DocumentQuery<Space> | undefined = {}
|
||||||
export let spaceOptions: FindOptions<Space> | undefined = {}
|
export let spaceOptions: FindOptions<Space> | undefined = {}
|
||||||
export let create: ObjectCreate | undefined = undefined
|
export let create: ObjectCreate | undefined = undefined
|
||||||
export let size: ButtonSize = 'large'
|
export let size: ButtonSize = 'large'
|
||||||
@ -29,6 +30,8 @@
|
|||||||
export let component: AnySvelteComponent | undefined = undefined
|
export let component: AnySvelteComponent | undefined = undefined
|
||||||
export let componentProps: any | undefined = undefined
|
export let componentProps: any | undefined = undefined
|
||||||
|
|
||||||
|
let search: string | undefined = undefined
|
||||||
|
|
||||||
$: _create =
|
$: _create =
|
||||||
create !== undefined
|
create !== undefined
|
||||||
? {
|
? {
|
||||||
@ -36,19 +39,40 @@
|
|||||||
update: (doc: Doc) => (doc as Space).name
|
update: (doc: Doc) => (doc as Space).name
|
||||||
}
|
}
|
||||||
: undefined
|
: undefined
|
||||||
|
|
||||||
|
const me = getCurrentAccount()._id
|
||||||
|
|
||||||
|
const query = createQuery()
|
||||||
|
$: query.query(
|
||||||
|
_class,
|
||||||
|
{
|
||||||
|
...(spaceQuery ?? {}),
|
||||||
|
...(search !== undefined && search !== ''
|
||||||
|
? {
|
||||||
|
name: { $like: `%${search}%` }
|
||||||
|
}
|
||||||
|
: {})
|
||||||
|
},
|
||||||
|
(res) => {
|
||||||
|
spaces = res.filter((p) => !p.private || p.members.includes(me))
|
||||||
|
},
|
||||||
|
spaceOptions
|
||||||
|
)
|
||||||
|
|
||||||
|
let spaces: Space[] = []
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ObjectPopup
|
<DocPopup
|
||||||
{_class}
|
{_class}
|
||||||
options={spaceOptions}
|
objects={spaces}
|
||||||
{selected}
|
{selected}
|
||||||
bind:docQuery={spaceQuery}
|
|
||||||
multiSelect={false}
|
multiSelect={false}
|
||||||
{allowDeselect}
|
{allowDeselect}
|
||||||
shadows={true}
|
shadows={true}
|
||||||
create={_create}
|
create={_create}
|
||||||
on:update
|
on:update
|
||||||
on:close
|
on:close
|
||||||
|
on:search={(e) => (search = e.detail)}
|
||||||
>
|
>
|
||||||
<svelte:fragment slot="item" let:item={space}>
|
<svelte:fragment slot="item" let:item={space}>
|
||||||
{#if component}
|
{#if component}
|
||||||
@ -57,4 +81,4 @@
|
|||||||
<SpaceInfo {size} value={space} />
|
<SpaceInfo {size} value={space} />
|
||||||
{/if}
|
{/if}
|
||||||
</svelte:fragment>
|
</svelte:fragment>
|
||||||
</ObjectPopup>
|
</DocPopup>
|
||||||
|
@ -26,6 +26,7 @@ export { default as Card } from './components/Card.svelte'
|
|||||||
export { default as MessageBox } from './components/MessageBox.svelte'
|
export { default as MessageBox } from './components/MessageBox.svelte'
|
||||||
export { default as MessageViewer } from './components/MessageViewer.svelte'
|
export { default as MessageViewer } from './components/MessageViewer.svelte'
|
||||||
export { default as ObjectPopup } from './components/ObjectPopup.svelte'
|
export { default as ObjectPopup } from './components/ObjectPopup.svelte'
|
||||||
|
export { default as DocPopup } from './components/DocPopup.svelte'
|
||||||
export { default as PDFViewer } from './components/PDFViewer.svelte'
|
export { default as PDFViewer } from './components/PDFViewer.svelte'
|
||||||
export { default as SpaceCreateCard } from './components/SpaceCreateCard.svelte'
|
export { default as SpaceCreateCard } from './components/SpaceCreateCard.svelte'
|
||||||
export { default as SpaceMultiBoxList } from './components/SpaceMultiBoxList.svelte'
|
export { default as SpaceMultiBoxList } from './components/SpaceMultiBoxList.svelte'
|
||||||
|
@ -78,9 +78,7 @@
|
|||||||
archived: false,
|
archived: false,
|
||||||
_class: { $in: requestedSpaceClasses }
|
_class: { $in: requestedSpaceClasses }
|
||||||
})
|
})
|
||||||
const availableSpaces = allSpaces
|
const availableSpaces = allSpaces.map((sp) => sp._id)
|
||||||
.filter((sp) => !sp.private || sp.members.includes(currentUser._id))
|
|
||||||
.map((sp) => sp._id)
|
|
||||||
spaceQuery = { space: { $in: availableSpaces } }
|
spaceQuery = { space: { $in: availableSpaces } }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -13,7 +13,7 @@
|
|||||||
// limitations under the License.
|
// limitations under the License.
|
||||||
-->
|
-->
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import core, { Doc, getCurrentAccount, Ref, SortingOrder, Space } from '@hcengineering/core'
|
import core, { Doc, Ref, SortingOrder, Space } from '@hcengineering/core'
|
||||||
import { getResource } from '@hcengineering/platform'
|
import { getResource } from '@hcengineering/platform'
|
||||||
import preference, { SpacePreference } from '@hcengineering/preference'
|
import preference, { SpacePreference } from '@hcengineering/preference'
|
||||||
import { createQuery, getClient } from '@hcengineering/presentation'
|
import { createQuery, getClient } from '@hcengineering/presentation'
|
||||||
@ -38,7 +38,6 @@
|
|||||||
const client = getClient()
|
const client = getClient()
|
||||||
const hierarchy = client.getHierarchy()
|
const hierarchy = client.getHierarchy()
|
||||||
const query = createQuery()
|
const query = createQuery()
|
||||||
const myAccId = getCurrentAccount()._id
|
|
||||||
|
|
||||||
let spaces: Space[] = []
|
let spaces: Space[] = []
|
||||||
let starred: Space[] = []
|
let starred: Space[] = []
|
||||||
@ -75,9 +74,7 @@
|
|||||||
|
|
||||||
let requestIndex = 0
|
let requestIndex = 0
|
||||||
async function update (model: NavigatorModel, spaces: Space[], preferences: Map<Ref<Doc>, SpacePreference>) {
|
async function update (model: NavigatorModel, spaces: Space[], preferences: Map<Ref<Doc>, SpacePreference>) {
|
||||||
shownSpaces = spaces.filter(
|
shownSpaces = spaces.filter((sp) => !sp.archived && !preferences.has(sp._id))
|
||||||
(sp) => !sp.archived && !preferences.has(sp._id) && (!sp.private || sp.members.includes(myAccId))
|
|
||||||
)
|
|
||||||
starred = spaces.filter((sp) => preferences.has(sp._id))
|
starred = spaces.filter((sp) => preferences.has(sp._id))
|
||||||
if (model.specials !== undefined) {
|
if (model.specials !== undefined) {
|
||||||
const [sp, resIndex] = await updateSpecials(model.specials, spaces, ++requestIndex)
|
const [sp, resIndex] = await updateSpecials(model.specials, spaces, ++requestIndex)
|
||||||
|
@ -73,7 +73,7 @@
|
|||||||
...resultQuery
|
...resultQuery
|
||||||
},
|
},
|
||||||
(res) => {
|
(res) => {
|
||||||
spaces = res.filter((p) => !p.private || p.members.includes(me))
|
spaces = res
|
||||||
},
|
},
|
||||||
options
|
options
|
||||||
)
|
)
|
||||||
|
@ -296,7 +296,11 @@ export class SpaceSecurityMiddleware extends BaseMiddleware implements Middlewar
|
|||||||
}
|
}
|
||||||
|
|
||||||
private getKey<T extends Doc>(_class: Ref<Class<T>>): string {
|
private getKey<T extends Doc>(_class: Ref<Class<T>>): string {
|
||||||
return this.storage.hierarchy.isDerived(_class, core.class.Tx) ? 'objectSpace' : 'space'
|
return this.storage.hierarchy.isDerived(_class, core.class.Tx)
|
||||||
|
? 'objectSpace'
|
||||||
|
: this.storage.hierarchy.isDerived(_class, core.class.Space)
|
||||||
|
? '_id'
|
||||||
|
: 'space'
|
||||||
}
|
}
|
||||||
|
|
||||||
override async findAll<T extends Doc>(
|
override async findAll<T extends Doc>(
|
||||||
|
Loading…
Reference in New Issue
Block a user