TSK-810 Rename Team -> Project, Project -> Component (#2756)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>
2026-09-21 09:07:50 +02:00 · 2023-03-17 12:17:53 +06:00
parent 26adf14966
commit 0f24fe80d6
110 changed files with 1646 additions and 1324 deletions
@@ -0,0 +1,132 @@
+<!--
+// 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 { Ref, SortingOrder } from '@hcengineering/core'
+  import { getEmbeddedLabel, IntlString, translate } from '@hcengineering/platform'
+  import { createQuery } from '@hcengineering/presentation'
+  import { Component } from '@hcengineering/tracker'
+  import type { ButtonKind, ButtonSize } from '@hcengineering/ui'
+  import { Button, ButtonShape, eventToHTMLElement, SelectPopup, showPopup, Label } from '@hcengineering/ui'
+  import tracker from '../plugin'
+
+  export let value: Ref<Component> | null | undefined
+  export let shouldShowLabel: boolean = true
+  export let isEditable: boolean = true
+  export let onChange: ((newComponentId: Ref<Component> | undefined) => void) | undefined = undefined
+  export let popupPlaceholder: IntlString = tracker.string.AddToComponent
+  export let kind: ButtonKind = 'no-border'
+  export let size: ButtonSize = 'small'
+  export let shape: ButtonShape = undefined
+  export let justify: 'left' | 'center' = 'center'
+  export let width: string | undefined = 'min-content'
+  export let onlyIcon: boolean = false
+  export let enlargedText = false
+
+  let selectedComponent: Component | undefined
+  let defaultComponentLabel = ''
+
+  const query = createQuery()
+  let rawComponents: Component[] = []
+  let loading = true
+  query.query(
+    tracker.class.Component,
+    {},
+    (res) => {
+      rawComponents = res
+      loading = false
+    },
+    {
+      sort: { modifiedOn: SortingOrder.Ascending }
+    }
+  )
+
+  $: handleSelectedComponentIdUpdated(value, rawComponents)
+
+  $: translate(tracker.string.Component, {}).then((result) => (defaultComponentLabel = result))
+  $: componentIcon = selectedComponent?.icon ?? tracker.icon.Components
+  $: componentText = shouldShowLabel ? selectedComponent?.label ?? defaultComponentLabel : undefined
+
+  const handleSelectedComponentIdUpdated = async (
+    newComponentId: Ref<Component> | null | undefined,
+    components: Component[]
+  ) => {
+    if (newComponentId === null || newComponentId === undefined) {
+      selectedComponent = undefined
+
+      return
+    }
+
+    selectedComponent = components.find((it) => it._id === newComponentId)
+  }
+
+  const handleComponentEditorOpened = async (event: MouseEvent): Promise<void> => {
+    event.stopPropagation()
+    if (!isEditable) {
+      return
+    }
+
+    const componentsInfo = [
+      { id: null, icon: tracker.icon.Components, label: tracker.string.NoComponent, isSelected: !selectedComponent },
+      ...rawComponents.map((p) => ({
+        id: p._id,
+        icon: p.icon,
+        text: p.label,
+        isSelected: selectedComponent ? p._id === selectedComponent._id : false
+      }))
+    ]
+
+    showPopup(
+      SelectPopup,
+      { value: componentsInfo, placeholder: popupPlaceholder, searchable: true },
+      eventToHTMLElement(event),
+      onChange
+    )
+  }
+</script>
+
+{#if onlyIcon || componentText === undefined}
+  <Button
+    {kind}
+    {size}
+    {shape}
+    {width}
+    {justify}
+    icon={componentIcon}
+    disabled={!isEditable}
+    {loading}
+    on:click={handleComponentEditorOpened}
+  />
+{:else}
+  <Button
+    {kind}
+    {size}
+    {shape}
+    {width}
+    {justify}
+    icon={componentIcon}
+    disabled={!isEditable}
+    {loading}
+    on:click={handleComponentEditorOpened}
+    ><svelte:fragment slot="content">
+      <span
+        class="{enlargedText ? 'ml-1 text-base fs-bold' : 'text-md'} overflow-label {!value
+          ? 'content-color'
+          : 'content-accent-color'} pointer-events-none"
+      >
+        <Label label={getEmbeddedLabel(componentText)} />
+      </span>
+    </svelte:fragment></Button
+  >
+{/if}