Allow to add tabs to Contacts App (#2599)

Signed-off-by: Denis Bunakalya <denis.bunakalya@xored.com>

models/contact/src/index.ts

@@ -28,7 +28,8 @@ import {
   Organizations,
   Person,
   Persons,
-  Status
+  Status,
+  ContactsTab
 } from '@hcengineering/contact'
 import { Class, DateRangeMode, Domain, DOMAIN_MODEL, IndexKind, Ref, Timestamp } from '@hcengineering/core'
 import {
@@ -53,6 +54,7 @@ import view, { createAction, ViewAction, Viewlet } from '@hcengineering/model-vi
 import workbench from '@hcengineering/model-workbench'
 import type { Asset, IntlString, Resource } from '@hcengineering/platform'
 import setting from '@hcengineering/setting'
+import { AnyComponent } from '@hcengineering/ui'
 import contact from './plugin'
 
 export const DOMAIN_CONTACT = 'contact' as Domain
@@ -169,6 +171,13 @@ export class TOrganizations extends TSpace implements Organizations {}
 @UX(contact.string.PersonsFolder, contact.icon.Person)
 export class TPersons extends TSpace implements Persons {}
 
+@Model(contact.class.ContactsTab, core.class.Doc, DOMAIN_MODEL)
+export class TContactsTab extends TDoc implements ContactsTab {
+  label!: IntlString
+  component!: AnyComponent
+  index!: number
+}
+
 export function createModel (builder: Builder): void {
   builder.createModel(
     TAvatarProvider,
@@ -182,7 +191,8 @@ export function createModel (builder: Builder): void {
     TEmployeeAccount,
     TChannel,
     TStatus,
-    TMember
+    TMember,
+    TContactsTab
   )
 
   builder.mixin(contact.class.Employee, core.class.Class, view.mixin.ObjectFactory, {
@@ -205,11 +215,17 @@ export function createModel (builder: Builder): void {
       icon: contact.icon.ContactApplication,
       alias: contactId,
       hidden: false,
-      component: contact.component.Contacts
+      component: contact.component.ContactsTabs
     },
     contact.app.Contacts
   )
 
+  builder.createDoc(contact.class.ContactsTab, core.space.Model, {
+    component: contact.component.Contacts,
+    label: contact.string.Contacts,
+    index: 100
+  })
+
   builder.createDoc<Viewlet>(
     view.class.Viewlet,
     core.space.Model,

models/contact/src/plugin.ts

@@ -33,6 +33,7 @@ export default mergeIds(contactId, contact, {
     CreateOrganizations: '' as AnyComponent,
     OrganizationPresenter: '' as AnyComponent,
     Contacts: '' as AnyComponent,
+    ContactsTabs: '' as AnyComponent,
     EmployeeAccountPresenter: '' as AnyComponent,
     OrganizationEditor: '' as AnyComponent,
     EmployeePresenter: '' as AnyComponent,

plugins/contact-resources/src/components/ContactsTabs.svelte

@@ -0,0 +1,41 @@
+<!--
+// Copyright © 2023 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 { getClient } from '@hcengineering/presentation'
+  import { Tabs, Component, AnyComponent } from '@hcengineering/ui'
+  import contact from '@hcengineering/contact'
+  import { IntlString } from '@hcengineering/platform'
+
+  const client = getClient()
+
+  let tabs: { component: AnyComponent; label: IntlString; props: any }[] | undefined
+
+  client
+    .findAll(contact.class.ContactsTab, {})
+    .then(
+      (ts) =>
+        (tabs = ts
+          .sort((a, b) => (a.index > b.index ? 1 : (a.index < b.index && -1) || 0))
+          .map((t) => ({ component: t.component, label: t.label, props: {} })))
+    )
+</script>
+
+{#if tabs && tabs.length > 1}
+  <div class="pl-2">
+    <Tabs model={tabs} />
+  </div>
+{:else if tabs?.[0]}
+  <Component is={tabs[0].component} />
+{/if}

plugins/contact-resources/src/index.ts

@@ -27,6 +27,7 @@ import ChannelsPresenter from './components/ChannelsPresenter.svelte'
 import ChannelsView from './components/ChannelsView.svelte'
 import ContactPresenter from './components/ContactPresenter.svelte'
 import Contacts from './components/Contacts.svelte'
+import ContactsTabs from './components/ContactsTabs.svelte'
 import CreateEmployee from './components/CreateEmployee.svelte'
 import CreateOrganization from './components/CreateOrganization.svelte'
 import CreateOrganizations from './components/CreateOrganizations.svelte'
@@ -156,6 +157,7 @@ export default async (): Promise<Resources> => ({
     CreateOrganizations,
     SocialEditor,
     Contacts,
+    ContactsTabs,
     EmployeeAccountPresenter,
     EmployeePresenter,
     EmployeeRefPresenter,

plugins/contact/src/index.ts

@@ -152,6 +152,15 @@ export interface EmployeeAccount extends Account {
   name: string
 }
 
+/**
+ * @public
+ */
+export interface ContactsTab extends Doc {
+  label: IntlString
+  component: AnyComponent
+  index: number
+}
+
 const SEP = ','
 
 /**
@@ -203,7 +212,8 @@ const contactPlugin = plugin(contactId, {
     Organizations: '' as Ref<Class<Organizations>>,
     Employee: '' as Ref<Class<Employee>>,
     EmployeeAccount: '' as Ref<Class<EmployeeAccount>>,
-    Status: '' as Ref<Class<Status>>
+    Status: '' as Ref<Class<Status>>,
+    ContactsTab: '' as Ref<Class<ContactsTab>>
   },
   component: {
     SocialEditor: '' as AnyComponent,