Fix edit employee (#7609)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

models/contact/src/index.ts

@@ -518,11 +518,6 @@ export function createModel (builder: Builder): void {
     grouppingManager: contact.aggregation.GrouppingPersonManager
   })
 
-  builder.mixin(contact.mixin.Employee, core.class.Class, view.mixin.ObjectEditor, {
-    editor: contact.component.EditEmployee,
-    pinned: true
-  })
-
   builder.mixin(contact.class.Organization, core.class.Class, view.mixin.ObjectEditor, {
     editor: contact.component.EditOrganization,
     pinned: true

models/contact/src/plugin.ts

@@ -35,7 +35,6 @@ export default mergeIds(contactId, contact, {
     ContactRefPresenter: '' as AnyComponent,
     ContactPresenter: '' as AnyComponent,
     EditPerson: '' as AnyComponent,
-    EditEmployee: '' as AnyComponent,
     EditOrganization: '' as AnyComponent,
     OrganizationPresenter: '' as AnyComponent,
     Contacts: '' as AnyComponent,

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

@@ -1,193 +0,0 @@
-<!--
-// Copyright © 2020, 2021 Anticrm Platform Contributors.
-// Copyright © 2021 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 {
-    Channel,
-    Employee,
-    Person,
-    PersonAccount,
-    combineName,
-    getFirstName,
-    getLastName
-  } from '@hcengineering/contact'
-  import { AccountRole, Ref, getCurrentAccount, hasAccountRole } from '@hcengineering/core'
-  import { AttributeEditor, createQuery, getClient } from '@hcengineering/presentation'
-  import setting, { IntegrationType } from '@hcengineering/setting'
-  import { EditBox, FocusHandler, Scroller, createFocusManager } from '@hcengineering/ui'
-  import { createEventDispatcher, onMount } from 'svelte'
-  import { ChannelsDropdown } from '..'
-  import contact from '../plugin'
-  import Avatar from './Avatar.svelte'
-  import ChannelsEditor from './ChannelsEditor.svelte'
-  import EditableAvatar from './EditableAvatar.svelte'
-
-  export let object: Person
-  export let readonly = false
-
-  export let channels: Channel[] | undefined = undefined
-
-  const client = getClient()
-
-  const account = getCurrentAccount() as PersonAccount
-
-  let avatarEditor: EditableAvatar
-
-  $: owner = account.person === object._id
-  $: editable = !readonly && (hasAccountRole(account, AccountRole.Maintainer) || owner)
-  let firstName = getFirstName(object.name)
-  let lastName = getLastName(object.name)
-
-  $: setName(object)
-
-  let email: string | undefined
-  $: if (editable) {
-    client.findOne(contact.class.PersonAccount, { person: (object as Employee)._id }).then((acc) => {
-      email = acc?.email
-    })
-  }
-
-  function setName (object: Person) {
-    firstName = getFirstName(object.name)
-    lastName = getLastName(object.name)
-  }
-
-  const dispatch = createEventDispatcher()
-
-  async function firstNameChange () {
-    await client.update(object, {
-      name: combineName(firstName, getLastName(object.name))
-    })
-  }
-
-  async function lastNameChange () {
-    await client.update(object, {
-      name: combineName(getFirstName(object.name), lastName)
-    })
-  }
-
-  let integrations: Set<Ref<IntegrationType>> = new Set<Ref<IntegrationType>>()
-  const settingsQuery = createQuery()
-  $: settingsQuery.query(setting.class.Integration, { createdBy: account._id, disabled: false }, (res) => {
-    integrations = new Set(res.map((p) => p.type))
-  })
-
-  const sendOpen = () => dispatch('open', { ignoreKeys: ['comments', 'name', 'channels', 'city'] })
-  onMount(sendOpen)
-
-  async function onAvatarDone () {
-    if (object.avatar != null) {
-      await avatarEditor.removeAvatar(object.avatar)
-    }
-    const avatar = await avatarEditor.createAvatar()
-    await client.diffUpdate(object, avatar)
-  }
-
-  const manager = createFocusManager()
-</script>
-
-<FocusHandler {manager} />
-
-{#if object !== undefined}
-  <div class="flex-row-stretch flex-grow">
-    <div class="flex-no-shrink mr-8">
-      {#key object}
-        {#if editable}
-          <EditableAvatar
-            person={object}
-            {email}
-            size={'x-large'}
-            name={object.name}
-            bind:this={avatarEditor}
-            on:done={onAvatarDone}
-          />
-        {:else}
-          <Avatar person={object} size={'x-large'} name={object.name} />
-        {/if}
-      {/key}
-    </div>
-    <div class="flex-grow flex-col">
-      <div class="name select-text">
-        {#if owner}
-          <EditBox
-            placeholder={contact.string.PersonFirstNamePlaceholder}
-            bind:value={firstName}
-            disabled={!editable}
-            on:change={firstNameChange}
-            focusIndex={1}
-          />
-        {:else}
-          {firstName}
-        {/if}
-      </div>
-      <div class="name select-text">
-        {#if owner}
-          <EditBox
-            placeholder={contact.string.PersonLastNamePlaceholder}
-            bind:value={lastName}
-            on:change={lastNameChange}
-            disabled={!editable}
-            focusIndex={2}
-          />
-        {:else}
-          {lastName}
-        {/if}
-      </div>
-      <div class="location">
-        <AttributeEditor maxWidth="20rem" _class={contact.class.Person} {editable} {object} key="city" focusIndex={3} />
-      </div>
-      <div class="separator" />
-      <Scroller contentDirection={'horizontal'} padding={'.125rem .125rem .5rem'} stickedScrollBars thinScrollBars>
-        {#if channels === undefined}
-          <ChannelsEditor
-            attachedTo={object._id}
-            attachedClass={object._class}
-            {editable}
-            bind:integrations
-            shape={'circle'}
-            focusIndex={10}
-          />
-        {:else}
-          <ChannelsDropdown
-            value={channels}
-            editable={false}
-            kind={'link-bordered'}
-            size={'small'}
-            length={'full'}
-            shape={'circle'}
-          />
-        {/if}
-      </Scroller>
-    </div>
-  </div>
-{/if}
-
-<style lang="scss">
-  .name {
-    font-weight: 500;
-    font-size: 1.25rem;
-    color: var(--caption-color);
-  }
-  .location {
-    margin-top: 0.25rem;
-    font-size: 0.75rem;
-  }
-
-  .separator {
-    margin: 1rem 0;
-    height: 1px;
-    background-color: var(--divider-color);
-  }
-</style>

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

@@ -14,8 +14,8 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Person, PersonAccount, combineName, getFirstName, getLastName } from '@hcengineering/contact'
-  import { Ref, getCurrentAccount } from '@hcengineering/core'
+  import { Channel, Person, PersonAccount, combineName, getFirstName, getLastName } from '@hcengineering/contact'
+  import { AccountRole, Ref, getCurrentAccount, hasAccountRole } from '@hcengineering/core'
   import { AttributeEditor, createQuery, getClient } from '@hcengineering/presentation'
   import setting, { IntegrationType } from '@hcengineering/setting'
   import { EditBox, FocusHandler, Scroller, createFocusManager } from '@hcengineering/ui'
@@ -23,12 +23,25 @@
   import contact from '../plugin'
   import ChannelsEditor from './ChannelsEditor.svelte'
   import EditableAvatar from './EditableAvatar.svelte'
+  import Avatar from './Avatar.svelte'
+  import ChannelsDropdown from './ChannelsDropdown.svelte'
 
   export let object: Person
   export let readonly: boolean = false
+  export let channels: Channel[] | undefined = undefined
+
   const client = getClient()
+  const h = client.getHierarchy()
 
   const account = getCurrentAccount() as PersonAccount
+  $: owner = account.person === object._id
+
+  function isEditable (owner: boolean, object: Person): boolean {
+    if (owner) return true
+    if (!h.hasMixin(object, contact.mixin.Employee)) return true
+    return hasAccountRole(account, AccountRole.Maintainer) && !h.as(object, contact.mixin.Employee).active
+  }
+  $: editable = !readonly && isEditable(owner, object)
 
   let avatarEditor: EditableAvatar
 
@@ -37,21 +50,21 @@
 
   $: setName(object)
 
-  function setName (object: Person) {
+  function setName (object: Person): void {
     firstName = getFirstName(object.name)
     lastName = getLastName(object.name)
   }
 
   const dispatch = createEventDispatcher()
 
-  function firstNameChange () {
-    client.update(object, {
+  async function firstNameChange (): Promise<void> {
+    await client.update(object, {
       name: combineName(firstName, getLastName(object.name))
     })
   }
 
-  function lastNameChange () {
-    client.update(object, {
+  async function lastNameChange (): Promise<void> {
+    await client.update(object, {
       name: combineName(getFirstName(object.name), lastName)
     })
   }
@@ -65,7 +78,7 @@
   const sendOpen = () => dispatch('open', { ignoreKeys: ['comments', 'name', 'channels', 'city'] })
   onMount(sendOpen)
 
-  async function onAvatarDone () {
+  async function onAvatarDone (): Promise<void> {
     if (object.avatar != null) {
       await avatarEditor.removeAvatar(object.avatar)
     }
@@ -82,21 +95,24 @@
   <div class="flex-row-stretch flex-grow">
     <div class="flex-no-shrink mr-8">
       {#key object}
-        <EditableAvatar
-          disabled={readonly}
-          person={object}
-          size={'x-large'}
-          name={object.name}
-          bind:this={avatarEditor}
-          on:done={onAvatarDone}
-        />
+        {#if editable}
+          <EditableAvatar
+            person={object}
+            size={'x-large'}
+            name={object.name}
+            bind:this={avatarEditor}
+            on:done={onAvatarDone}
+          />
+        {:else}
+          <Avatar person={object} size={'x-large'} name={object.name} />
+        {/if}
       {/key}
     </div>
     <div class="flex-grow flex-col">
       <div class="name">
         <EditBox
-          disabled={readonly}
           placeholder={contact.string.PersonFirstNamePlaceholder}
+          disabled={!editable}
           bind:value={firstName}
           on:change={firstNameChange}
           focusIndex={1}
@@ -104,7 +120,7 @@
       </div>
       <div class="name">
         <EditBox
-          disabled={readonly}
+          disabled={!editable}
           placeholder={contact.string.PersonLastNamePlaceholder}
           bind:value={lastName}
           on:change={lastNameChange}
@@ -112,14 +128,7 @@
         />
       </div>
       <div class="location">
-        <AttributeEditor
-          maxWidth="20rem"
-          _class={contact.class.Person}
-          {object}
-          editable={!readonly}
-          key="city"
-          focusIndex={3}
-        />
+        <AttributeEditor maxWidth="20rem" _class={contact.class.Person} {object} {editable} key="city" focusIndex={3} />
       </div>
 
       <div class="separator" />
@@ -130,14 +139,25 @@
         stickedScrollBars
         thinScrollBars
       >
-        <ChannelsEditor
-          attachedTo={object._id}
-          attachedClass={object._class}
-          editable={!readonly}
-          bind:integrations
-          shape={'circle'}
-          focusIndex={10}
-        />
+        {#if channels === undefined}
+          <ChannelsEditor
+            attachedTo={object._id}
+            attachedClass={object._class}
+            {editable}
+            bind:integrations
+            shape={'circle'}
+            focusIndex={10}
+          />
+        {:else}
+          <ChannelsDropdown
+            value={channels}
+            editable={false}
+            kind={'link-bordered'}
+            size={'small'}
+            length={'full'}
+            shape={'circle'}
+          />
+        {/if}
       </Scroller>
     </div>
   </div>

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

@@ -2,6 +2,7 @@
   import { Employee, Person } from '@hcengineering/contact'
   import { Ref, WithLookup } from '@hcengineering/core'
   import { IntlString } from '@hcengineering/platform'
+  import { getClient } from '@hcengineering/presentation'
   import ui, { IconSize, LabelAndProps } from '@hcengineering/ui'
   import { PersonLabelTooltip, employeeByIdStore, personByIdStore } from '..'
   import PersonPresenter from '../components/PersonPresenter.svelte'
@@ -26,9 +27,14 @@
   export let compact: boolean = false
   export let showStatus: boolean = false
 
-  $: employeeValue = typeof value === 'string' ? ($personByIdStore.get(value) as Employee) : (value as Employee)
+  const client = getClient()
+  const h = client.getHierarchy()
 
-  $: active = employeeValue !== undefined ? $employeeByIdStore.get(employeeValue?._id)?.active ?? false : false
+  $: person = typeof value === 'string' ? ($personByIdStore.get(value) as Person) : (value as Person)
+
+  $: employeeValue = person != null ? h.as(person, contact.mixin.Employee) : undefined
+
+  $: active = employeeValue?.active ?? false
 
   function getPreviewPopup (active: boolean, value: Employee | undefined): LabelAndProps | undefined {
     if (!active || value === undefined || !showPopup) {

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

@@ -34,10 +34,10 @@
   import Avatar from './Avatar.svelte'
   import ChannelPresenter from './ChannelPresenter.svelte'
   import ChannelsDropdown from './ChannelsDropdown.svelte'
-  import EditEmployee from './EditEmployee.svelte'
   import MergeAttributeComparer from './MergeAttributeComparer.svelte'
   import MergeComparer from './MergeComparer.svelte'
   import UserBox from './UserBox.svelte'
+  import EditPerson from './EditPerson.svelte'
 
   export let value: Person
   const dispatch = createEventDispatcher()
@@ -434,7 +434,7 @@
         {/each}
       </div>
       <div class="flex-col-center antiPopup p-4">
-        <EditEmployee object={result} readonly channels={resultChannels} />
+        <EditPerson object={result} readonly channels={resultChannels} />
       </div>
     {/if}
   {/key}

plugins/contact-resources/src/index.ts

@@ -77,7 +77,6 @@ import CreateGuest from './components/CreateGuest.svelte'
 import CreateOrganization from './components/CreateOrganization.svelte'
 import CreatePerson from './components/CreatePerson.svelte'
 import DeleteConfirmationPopup from './components/DeleteConfirmationPopup.svelte'
-import EditEmployee from './components/EditEmployee.svelte'
 import EditMember from './components/EditMember.svelte'
 import EditOrganization from './components/EditOrganization.svelte'
 import EditOrganizationPanel from './components/EditOrganizationPanel.svelte'
@@ -365,7 +364,6 @@ export default async (): Promise<Resources> => ({
     CollaborationUserAvatar,
     CreateOrganization,
     EditPerson,
-    EditEmployee,
     EditOrganization,
     SocialEditor,
     Contacts,

plugins/contact-resources/src/utils.ts

@@ -275,11 +275,12 @@ async function generateLocation (loc: Location, id: Ref<Contact>): Promise<Resol
     console.error(`Could not find contact ${id}.`)
     return undefined
   }
+  const isEmployee = client.getHierarchy().hasMixin(doc, contact.mixin.Employee)
   const appComponent = loc.path[0] ?? ''
   const workspace = loc.path[1] ?? ''
   const special = client.getHierarchy().isDerived(doc._class, contact.class.Organization)
     ? 'companies'
-    : client.getHierarchy().isDerived(doc._class, contact.mixin.Employee)
+    : isEmployee
       ? 'employees'
       : 'persons'
 
@@ -289,11 +290,11 @@ async function generateLocation (loc: Location, id: Ref<Contact>): Promise<Resol
   return {
     loc: {
       path: [appComponent, workspace],
-      fragment: getPanelURI(component, doc._id, doc._class, 'content')
+      fragment: getPanelURI(component, doc._id, isEmployee ? contact.mixin.Employee : doc._class, 'content')
     },
     defaultLocation: {
       path: [appComponent, workspace, contactId, special],
-      fragment: getPanelURI(component, doc._id, doc._class, 'content')
+      fragment: getPanelURI(component, doc._id, isEmployee ? contact.mixin.Employee : doc._class, 'content')
     }
   }
 }

plugins/recruit-resources/src/components/CreateApplication.svelte

@@ -307,7 +307,7 @@
         id={'vacancy.talant.selector'}
         focusIndex={1}
         readonly={preserveCandidate}
-        _class={recruit.mixin.Candidate}
+        _class={contact.class.Person}
         options={{ sort: { modifiedOn: -1 } }}
         excluded={existingApplicants}
         label={recruit.string.Talent}

plugins/view-resources/src/components/EditDoc.svelte

@@ -14,7 +14,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Class, Doc, Mixin, Ref } from '@hcengineering/core'
+  import { Class, Doc, Hierarchy, Mixin, Ref } from '@hcengineering/core'
   import notification from '@hcengineering/notification'
   import { Panel } from '@hcengineering/panel'
   import { getResource } from '@hcengineering/platform'
@@ -86,7 +86,7 @@
       query.query(_class, { _id }, (result) => {
         object = result[0]
         if (object != null) {
-          realObjectClass = object._class
+          realObjectClass = Hierarchy.mixinOrClass(object)
         }
       })
     } else {