mirror of
https://github.com/hcengineering/platform.git
synced 2025-04-23 08:48:01 +00:00
306 lines
9.4 KiB
Svelte
306 lines
9.4 KiB
Svelte
<!--
|
|
// 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 core, { AnyAttribute, ArrOf, Class, Doc, Ref, Type } from '@hcengineering/core'
|
|
import { Asset, IntlString } from '@hcengineering/platform'
|
|
import preferencePlugin from '@hcengineering/preference'
|
|
import { createQuery, getAttributePresenterClass, getClient, hasResource } from '@hcengineering/presentation'
|
|
import { Button, Loading, ToggleWithLabel } from '@hcengineering/ui'
|
|
import { BuildModelKey, Viewlet, ViewletPreference } from '@hcengineering/view'
|
|
import { deepEqual } from 'fast-equals'
|
|
import view from '../plugin'
|
|
import { buildConfigLookup, getKeyLabel } from '../utils'
|
|
|
|
export let viewlet: Viewlet
|
|
|
|
let preference: ViewletPreference | undefined
|
|
const preferenceQuery = createQuery()
|
|
|
|
$: if (viewlet) {
|
|
preferenceQuery.query(
|
|
view.class.ViewletPreference,
|
|
{
|
|
attachedTo: viewlet._id
|
|
},
|
|
(res) => {
|
|
preference = res[0]
|
|
items = getConfig(viewlet, preference)
|
|
loading = false
|
|
},
|
|
{ limit: 1 }
|
|
)
|
|
} else {
|
|
preferenceQuery.unsubscribe()
|
|
}
|
|
|
|
const client = getClient()
|
|
const hierarchy = client.getHierarchy()
|
|
let items: AttributeConfig[] = []
|
|
let loading = true
|
|
|
|
interface AttributeConfig {
|
|
enabled: boolean
|
|
label: IntlString
|
|
value: string | BuildModelKey
|
|
_class: Ref<Class<Doc>>
|
|
icon: Asset | undefined
|
|
order?: number
|
|
}
|
|
|
|
function getObjectConfig (_class: Ref<Class<Doc>>, param: string): AttributeConfig {
|
|
const clazz = hierarchy.getClass(_class)
|
|
return {
|
|
value: param,
|
|
label: clazz.label,
|
|
enabled: true,
|
|
icon: clazz.icon,
|
|
_class
|
|
}
|
|
}
|
|
|
|
function getBaseConfig (viewlet: Viewlet): AttributeConfig[] {
|
|
const lookup = buildConfigLookup(hierarchy, viewlet.attachTo, viewlet.config, viewlet.options?.lookup)
|
|
const result: AttributeConfig[] = []
|
|
const clazz = hierarchy.getClass(viewlet.attachTo)
|
|
for (const param of viewlet.config) {
|
|
if (typeof param === 'string') {
|
|
if (viewlet.configOptions?.hiddenKeys?.includes(param)) continue
|
|
if (param.length === 0) {
|
|
result.push(getObjectConfig(viewlet.attachTo, param))
|
|
} else {
|
|
result.push({
|
|
value: param,
|
|
enabled: true,
|
|
label: getKeyLabel(client, viewlet.attachTo, param, lookup),
|
|
_class: viewlet.attachTo,
|
|
icon: clazz.icon
|
|
})
|
|
}
|
|
} else {
|
|
if (viewlet.configOptions?.hiddenKeys?.includes(param.key)) continue
|
|
result.push({
|
|
value: param,
|
|
label: param.label ?? getKeyLabel(client, viewlet.attachTo, param.key, lookup),
|
|
enabled: true,
|
|
_class: viewlet.attachTo,
|
|
icon: clazz.icon
|
|
})
|
|
}
|
|
}
|
|
return result
|
|
}
|
|
|
|
function getValue (name: string, type: Type<any>): string {
|
|
if (hierarchy.isDerived(type._class, core.class.RefTo)) {
|
|
return '$lookup.' + name
|
|
}
|
|
if (hierarchy.isDerived(type._class, core.class.ArrOf)) {
|
|
return getValue(name, (type as ArrOf<any>).of)
|
|
}
|
|
return name
|
|
}
|
|
|
|
function processAttribute (attribute: AnyAttribute, result: AttributeConfig[], useMixinProxy = false): void {
|
|
if (attribute.hidden === true || attribute.label === undefined) return
|
|
if (viewlet.configOptions?.hiddenKeys?.includes(attribute.name)) return
|
|
if (hierarchy.isDerived(attribute.type._class, core.class.Collection)) return
|
|
const value = getValue(attribute.name, attribute.type)
|
|
for (const res of result) {
|
|
const key = typeof res.value === 'string' ? res.value : res.value.key
|
|
if (key === attribute.name) return
|
|
if (key === value) return
|
|
}
|
|
const { attrClass, category } = getAttributePresenterClass(hierarchy, attribute)
|
|
const mixin =
|
|
category === 'object'
|
|
? view.mixin.ObjectPresenter
|
|
: category === 'collection'
|
|
? view.mixin.CollectionPresenter
|
|
: view.mixin.AttributePresenter
|
|
const presenter = hierarchy.classHierarchyMixin(attrClass, mixin, (m) => hasResource(m.presenter))?.presenter
|
|
if (presenter === undefined) return
|
|
const clazz = hierarchy.getClass(attribute.attributeOf)
|
|
const extraProps = viewlet.configOptions?.extraProps
|
|
if (useMixinProxy) {
|
|
const newValue = {
|
|
value: attribute.attributeOf + '.' + attribute.name,
|
|
label: attribute.label,
|
|
enabled: false,
|
|
_class: attribute.attributeOf,
|
|
icon: clazz.icon
|
|
}
|
|
if (!isExist(result, newValue)) {
|
|
result.push(newValue)
|
|
}
|
|
} else {
|
|
const newValue = {
|
|
value: extraProps ? { ...extraProps, key: value } : value,
|
|
label: attribute.label,
|
|
enabled: false,
|
|
_class: attribute.attributeOf,
|
|
icon: clazz.icon
|
|
}
|
|
if (!isExist(result, newValue)) {
|
|
result.push(newValue)
|
|
}
|
|
}
|
|
}
|
|
|
|
function isExist (result: AttributeConfig[], newValue: AttributeConfig): boolean {
|
|
for (const res of result) {
|
|
if (res._class !== newValue._class) continue
|
|
if (typeof res.value === 'string') {
|
|
if (res.value === newValue.value) return true
|
|
}
|
|
}
|
|
return false
|
|
}
|
|
|
|
function getConfig (viewlet: Viewlet, preference: ViewletPreference | undefined): AttributeConfig[] {
|
|
const result = getBaseConfig(viewlet)
|
|
|
|
if (viewlet.configOptions?.strict !== true) {
|
|
const allAttributes = hierarchy.getAllAttributes(viewlet.attachTo)
|
|
for (const [, attribute] of allAttributes) {
|
|
processAttribute(attribute, result)
|
|
}
|
|
|
|
hierarchy.getDescendants(viewlet.attachTo).forEach((it) => {
|
|
hierarchy.getOwnAttributes(it).forEach((attr) => {
|
|
processAttribute(attr, result, true)
|
|
})
|
|
})
|
|
|
|
const ancestors = new Set(hierarchy.getAncestors(viewlet.attachTo))
|
|
const parent = hierarchy.getParentClass(viewlet.attachTo)
|
|
const parentMixins = hierarchy
|
|
.getDescendants(parent)
|
|
.map((p) => hierarchy.getClass(p))
|
|
.filter((p) => hierarchy.isMixin(p._id) && p.extends && ancestors.has(p.extends))
|
|
|
|
parentMixins.forEach((it) => {
|
|
hierarchy.getOwnAttributes(it._id).forEach((attr) => {
|
|
processAttribute(attr, result, true)
|
|
})
|
|
})
|
|
}
|
|
|
|
return preference === undefined ? result : setStatus(result, preference)
|
|
}
|
|
|
|
async function save (): Promise<void> {
|
|
const config = items.filter((p) => p.enabled).map((p) => p.value)
|
|
if (preference !== undefined) {
|
|
await client.update(preference, {
|
|
config
|
|
})
|
|
} else {
|
|
await client.createDoc(view.class.ViewletPreference, preferencePlugin.space.Preference, {
|
|
attachedTo: viewlet._id,
|
|
config
|
|
})
|
|
}
|
|
}
|
|
|
|
function restoreDefault (): void {
|
|
items = getConfig(viewlet, undefined)
|
|
save()
|
|
}
|
|
|
|
function setStatus (result: AttributeConfig[], preference: ViewletPreference): AttributeConfig[] {
|
|
for (const key of result) {
|
|
const index = preference.config.findIndex((p) => deepEqual(p, key.value))
|
|
key.enabled = index !== -1
|
|
key.order = index !== -1 ? index : undefined
|
|
}
|
|
result.sort((a, b) => {
|
|
if (a.order === undefined && b.order === undefined) return 0
|
|
if (a.order === undefined) return 1
|
|
if (b.order === undefined) return -1
|
|
return a.order - b.order
|
|
})
|
|
return result
|
|
}
|
|
|
|
function dragEnd () {
|
|
selected = undefined
|
|
save()
|
|
}
|
|
|
|
function dragOver (e: DragEvent, i: number) {
|
|
const s = selected as number
|
|
if (dragswap(e, i, s)) {
|
|
;[items[i], items[s]] = [items[s], items[i]]
|
|
selected = i
|
|
}
|
|
}
|
|
|
|
const elements: HTMLElement[] = []
|
|
|
|
function dragswap (ev: MouseEvent, i: number, s: number): boolean {
|
|
if (i < s) {
|
|
return ev.offsetY < elements[i].offsetHeight / 2
|
|
} else if (i > s) {
|
|
return ev.offsetY > elements[i].offsetHeight / 2
|
|
}
|
|
return false
|
|
}
|
|
|
|
let selected: number | undefined
|
|
</script>
|
|
|
|
<div class="selectPopup p-2">
|
|
<div class="scroll">
|
|
{#if loading}
|
|
<Loading />
|
|
{:else}
|
|
<div class="flex-row-reverse">
|
|
<Button on:click={restoreDefault} label={view.string.RestoreDefaults} size={'x-small'} kind={'link'} noFocus />
|
|
</div>
|
|
{#each items as item, i}
|
|
<div
|
|
class="item"
|
|
bind:this={elements[i]}
|
|
draggable={viewlet.configOptions?.sortable}
|
|
on:dragstart={() => {
|
|
selected = i
|
|
}}
|
|
on:dragover|preventDefault={(e) => dragOver(e, i)}
|
|
on:dragend={dragEnd}
|
|
>
|
|
<ToggleWithLabel
|
|
on={item.enabled}
|
|
label={item.label}
|
|
on:change={(e) => {
|
|
item.enabled = e.detail
|
|
save()
|
|
}}
|
|
/>
|
|
</div>
|
|
{/each}
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.item {
|
|
padding: 0.5rem;
|
|
border-radius: 0.25rem;
|
|
&:hover {
|
|
background-color: var(--theme-button-hovered);
|
|
}
|
|
}
|
|
</style>
|