platform/plugins/document-resources/src/components/CreateDocument.svelte
Kristina 4ec2d56303
[Part-1]: New analytics events (#6319)
Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>
2024-08-14 14:37:52 +07:00

154 lines
4.3 KiB
Svelte

<!--
//
// Copyright © 2022, 2023, 2024 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 { AttachedData, Ref, generateId } from '@hcengineering/core'
import { Document, Teamspace, DocumentEvents } from '@hcengineering/document'
import { Card, SpaceSelector, getClient } from '@hcengineering/presentation'
import {
Button,
createFocusManager,
EditBox,
FocusHandler,
getPlatformColorDef,
IconWithEmoji,
showPopup,
themeStore
} from '@hcengineering/ui'
import view from '@hcengineering/view'
import { IconPicker, ObjectBox } from '@hcengineering/view-resources'
import { createEventDispatcher } from 'svelte'
import { Analytics } from '@hcengineering/analytics'
import document from '../plugin'
import { createEmptyDocument } from '../utils'
import TeamspacePresenter from './teamspace/TeamspacePresenter.svelte'
export function canClose (): boolean {
return object.name === ''
}
export let space: Ref<Teamspace>
export let parent: Ref<Document> | undefined
const id: Ref<Document> = generateId()
const object: Omit<AttachedData<Document>, 'content'> = {
name: '',
attachments: 0,
labels: 0,
comments: 0,
references: 0
}
const dispatch = createEventDispatcher()
const client = getClient()
let _space = space
let _parent = parent
$: if (_space !== space) _parent = undefined
$: canSave = getTitle(object.name).length > 0 && _space !== undefined
function chooseIcon (): void {
const { icon, color } = object
const icons = [document.icon.Document, document.icon.Teamspace]
showPopup(IconPicker, { icon, color, icons }, 'top', (result) => {
if (result !== undefined && result !== null) {
object.icon = result.icon
object.color = result.color
}
})
}
function getTitle (value: string): string {
return value.trim()
}
async function create (): Promise<void> {
await createEmptyDocument(client, id, _space, _parent ?? document.ids.NoParent, object)
Analytics.handleEvent(DocumentEvents.DocumentCreated, { id, parent: _parent })
dispatch('close', id)
}
const manager = createFocusManager()
</script>
<FocusHandler {manager} />
<Card
label={document.string.CreateDocument}
okAction={create}
{canSave}
on:close={() => {
dispatch('close')
}}
on:changeContent
>
<svelte:fragment slot="header">
<SpaceSelector
_class={document.class.Teamspace}
label={document.string.Teamspace}
bind:space={_space}
kind={'regular'}
size={'small'}
component={TeamspacePresenter}
iconWithEmoji={view.ids.IconWithEmoji}
defaultIcon={document.icon.Teamspace}
/>
<ObjectBox
_class={document.class.Document}
bind:value={_parent}
docQuery={{
space: _space
}}
kind={'regular'}
size={'small'}
label={document.string.NoParentDocument}
searchField={'name'}
allowDeselect={true}
showNavigate={false}
docProps={{ disabled: true, noUnderline: true }}
focusIndex={20000}
/>
</svelte:fragment>
<div class="flex-row-center clear-mins">
<div class="mr-3">
<Button
size={'medium'}
kind={'link-bordered'}
noFocus
icon={object.icon === view.ids.IconWithEmoji ? IconWithEmoji : object.icon ?? document.icon.Document}
iconProps={object.icon === view.ids.IconWithEmoji
? { icon: object.color }
: {
fill:
object.color !== undefined ? getPlatformColorDef(object.color, $themeStore.dark).icon : 'currentColor'
}}
on:click={chooseIcon}
/>
</div>
<EditBox
placeholder={document.string.DocumentNamePlaceholder}
bind:value={object.name}
kind={'large-style'}
autoFocus
focusIndex={1}
/>
</div>
</Card>