Allow to create new team (#2375)

Signed-off-by: muhtimur <timur.mukhamedishin@xored.com>

plugins/tracker-resources/src/components/teams/CreateTeam.svelte

@@ -0,0 +1,84 @@
+<!--
+// 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 { createEventDispatcher } from 'svelte'
+  import { Button, EditBox, eventToHTMLElement, Label, showPopup, ToggleWithLabel } from '@hcengineering/ui'
+  import { getClient, SpaceCreateCard } from '@hcengineering/presentation'
+  import core, { getCurrentAccount, Ref } from '@hcengineering/core'
+  import { IssueStatus } from '@hcengineering/tracker'
+  import { StyledTextBox } from '@hcengineering/text-editor'
+  import { Asset } from '@hcengineering/platform'
+  import tracker from '../../plugin'
+  import TeamIconChooser from './TeamIconChooser.svelte'
+
+  let name: string = ''
+  let description: string = ''
+  let isPrivate: boolean = false
+  let icon: Asset | undefined = undefined
+
+  const dispatch = createEventDispatcher()
+  const client = getClient()
+
+  async function createTeam () {
+    await client.createDoc(tracker.class.Team, core.space.Space, {
+      name,
+      description,
+      private: isPrivate,
+      members: [getCurrentAccount()._id],
+      archived: false,
+      identifier: name.toUpperCase().replaceAll(' ', '_'),
+      sequence: 0,
+      issueStatuses: 0,
+      defaultIssueStatus: '' as Ref<IssueStatus>,
+      icon
+    })
+  }
+
+  function chooseIcon (ev: MouseEvent) {
+    showPopup(TeamIconChooser, { icon }, eventToHTMLElement(ev), (result) => {
+      if (result !== undefined && result !== null) {
+        icon = result
+      }
+    })
+  }
+</script>
+
+<SpaceCreateCard
+  label={tracker.string.NewTeam}
+  okAction={createTeam}
+  canSave={name.length > 0}
+  on:close={() => {
+    dispatch('close')
+  }}
+>
+  <EditBox bind:value={name} placeholder={tracker.string.TeamTitlePlaceholder} kind={'large-style'} focus />
+  <StyledTextBox
+    alwaysEdit
+    showButtons={false}
+    bind:content={description}
+    placeholder={tracker.string.IssueDescriptionPlaceholder}
+  />
+  <ToggleWithLabel
+    label={tracker.string.MakePrivate}
+    description={tracker.string.MakePrivateDescription}
+    bind:on={isPrivate}
+  />
+  <div class="flex-between">
+    <div class="caption">
+      <Label label={tracker.string.ChooseIcon} />
+    </div>
+    <Button icon={icon ?? tracker.icon.Home} kind="no-border" size="medium" on:click={chooseIcon} />
+  </div>
+</SpaceCreateCard>

plugins/tracker-resources/src/components/teams/TeamIconChooser.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { Metadata } from '@hcengineering/platform'
+  import presentation, { Card } from '@hcengineering/presentation'
+  import { Button } from '@hcengineering/ui'
+  import tracker from '../../plugin'
+  import { createEventDispatcher } from 'svelte'
+
+  export let icon: Metadata<string> | undefined = undefined
+
+  const dispatch = createEventDispatcher()
+  const icons = [tracker.icon.Home, tracker.icon.RedCircle]
+
+  function save () {
+    dispatch('close', icon)
+  }
+</script>
+
+<Card
+  label={tracker.string.ChooseIcon}
+  okLabel={presentation.string.Save}
+  okAction={save}
+  canSave={icon !== undefined}
+  on:close={() => {
+    dispatch('close')
+  }}
+>
+  <div class="float-left-box">
+    {#each icons as obj}
+      <div class="float-left p-2">
+        <Button
+          icon={obj}
+          size="medium"
+          kind={obj === icon ? 'primary' : 'transparent'}
+          on:click={() => {
+            icon = obj
+          }}
+        />
+      </div>
+    {/each}
+  </div>
+</Card>

plugins/tracker-resources/src/components/teams/TeamPresenter.svelte

@@ -0,0 +1,47 @@
+<!--
+// 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, Space } from '@hcengineering/core'
+  import { Team } from '@hcengineering/tracker'
+  import { SpacesNavModel } from '@hcengineering/workbench'
+  import { TreeNode, SpecialElement } from '@hcengineering/workbench-resources'
+  import { createEventDispatcher } from 'svelte'
+
+  export let space: Team
+  export let model: SpacesNavModel
+  export let currentSpace: Ref<Space> | undefined
+  export let currentSpecial: string | undefined
+  export let selectSpace: Function
+  export let getActions: Function
+
+  const dispatch = createEventDispatcher()
+</script>
+
+{#if model.specials}
+  <TreeNode icon={space?.icon ?? model.icon} title={space.name} indent={'ml-2'} actions={() => getActions(space)}>
+    {#each model.specials as special}
+      <SpecialElement
+        indent={'ml-4'}
+        label={special.label}
+        icon={special.icon}
+        on:click={() => dispatch('special', special.id)}
+        selected={currentSpace === space._id && special.id === currentSpecial}
+        on:click={() => {
+          selectSpace(space._id, special.id)
+        }}
+      />
+    {/each}
+  </TreeNode>
+{/if}

plugins/tracker-resources/src/index.ts

@@ -94,6 +94,9 @@ import IssueTemplates from './components/templates/IssueTemplates.svelte'
 import EditIssueTemplate from './components/templates/EditIssueTemplate.svelte'
 import TemplateEstimationEditor from './components/templates/EstimationEditor.svelte'
 
+import CreateTeam from './components/teams/CreateTeam.svelte'
+import TeamPresenter from './components/teams/TeamPresenter.svelte'
+
 export async function queryIssue<D extends Issue> (
   _class: Ref<Class<D>>,
   client: Client,
@@ -216,7 +219,9 @@ export default async (): Promise<Resources> => ({
     IssueTemplates,
     IssueTemplatePresenter,
     EditIssueTemplate,
-    TemplateEstimationEditor
+    TemplateEstimationEditor,
+    CreateTeam,
+    TeamPresenter
   },
   completion: {
     IssueQuery: async (client: Client, query: string, filter?: { in?: RelatedDocument[], nin?: RelatedDocument[] }) =>

plugins/tracker-resources/src/plugin.ts

@@ -60,6 +60,11 @@ export default mergeIds(trackerId, tracker, {
     Completed: '' as IntlString,
     Canceled: '' as IntlString,
     CreateTeam: '' as IntlString,
+    NewTeam: '' as IntlString,
+    TeamTitlePlaceholder: '' as IntlString,
+    MakePrivate: '' as IntlString,
+    MakePrivateDescription: '' as IntlString,
+    ChooseIcon: '' as IntlString,
     AddIssue: '' as IntlString,
     NewIssue: '' as IntlString,
     ResumeDraft: '' as IntlString,
@@ -273,6 +278,7 @@ export default mergeIds(trackerId, tracker, {
     DueDatePresenter: '' as AnyComponent,
     EditIssueTemplate: '' as AnyComponent,
     CreateTeam: '' as AnyComponent,
+    TeamPresenter: '' as AnyComponent,
     NewIssueHeader: '' as AnyComponent,
     IconPresenter: '' as AnyComponent,
     LeadPresenter: '' as AnyComponent,