Update applications/candidate (#1074)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>

models/attachment/src/plugin.ts

@@ -23,12 +23,10 @@ import type { TxViewlet } from '@anticrm/activity'
 
 export default mergeIds(attachmentId, attachment, {
   component: {
-    AttachmentsPresenter: '' as AnyComponent,
     AttachmentPresenter: '' as AnyComponent
   },
   string: {
     AddAttachment: '' as IntlString,
-    Files: '' as IntlString,
     File: '' as IntlString,
     Name: '' as IntlString,
     Size: '' as IntlString,

models/chunter/src/plugin.ts

@@ -24,7 +24,6 @@ import type { ViewletDescriptor } from '@anticrm/view'
 
 export default mergeIds(chunterId, chunter, {
   component: {
-    CommentsPresenter: '' as AnyComponent,
     CommentPresenter: '' as AnyComponent,
     ChannelPresenter: '' as AnyComponent
   },

packages/theme/styles/_layouts.scss

@@ -95,6 +95,10 @@ p:last-child { margin-block-end: 0; }
   line-height: 150%;
 }
 
+.inline-height2 {
+  line-height: 200%;
+}
+
 /* Flex */
 .flex { display: flex; }
 .inline-flex { display: inline-flex; }

plugins/attachment-resources/src/components/AttachmentsPresenter.svelte

@@ -21,13 +21,17 @@
   import attachment from '../plugin'
 
   export let value: Doc & { attachments?: number }
-
+  export let size: 'small' | 'medium' | 'large' = 'small'
+  export let showCounter = true
 </script>
 
 {#if value && value.attachments && value.attachments > 0}
   <Tooltip label={attachment.string.Attachments} component={AttachmentPopup} props={{ objectId: value._id, attachments: value.attachments }}>
-    <div class="sm-tool-icon">
-      <span class="icon"><IconAttachment size="small"/></span>&nbsp;{value.attachments}
+    <div class="sm-tool-icon ml-1 mr-1">
+      <span class="icon"><IconAttachment {size}/></span>
+      {#if showCounter}
+        &nbsp;{value.attachments}
+      {/if}
     </div>
   </Tooltip>
 {/if}

plugins/attachment/src/index.ts

@@ -14,9 +14,9 @@
 // limitations under the License.
 //
 
-import type { Ref, Class, AttachedDoc, Space, Doc } from '@anticrm/core'
-import { plugin, Resource } from '@anticrm/platform'
+import type { AttachedDoc, Class, Doc, Ref, Space } from '@anticrm/core'
 import type { Asset, Plugin } from '@anticrm/platform'
+import { IntlString, plugin, Resource } from '@anticrm/platform'
 import { AnyComponent } from '@anticrm/ui'
 
 /**
@@ -43,7 +43,8 @@ export const attachmentId = 'attachment' as Plugin
 export default plugin(attachmentId, {
   component: {
     Attachments: '' as AnyComponent,
-    Photos: '' as AnyComponent
+    Photos: '' as AnyComponent,
+    AttachmentsPresenter: '' as AnyComponent
   },
   icon: {
     Attachment: '' as Asset
@@ -55,5 +56,8 @@ export default plugin(attachmentId, {
   helper: {
     UploadFile: '' as Resource<(file: File, opts?: { space: Ref<Space>, attachedTo: Ref<Doc> }) => Promise<string>>,
     DeleteFile: '' as Resource<(id: string) => Promise<void>>
+  },
+  string: {
+    Files: '' as IntlString
   }
 })

plugins/chunter-resources/src/components/CommentsPresenter.svelte

@@ -21,12 +21,17 @@
   import chunter from '@anticrm/chunter'
 
   export let value: Doc & { comments?: number }
+  export let size: 'small' | 'medium' | 'large' = 'small'
+  export let showCounter = true
 </script>
 
 {#if value && value.comments && value.comments > 0}
   <Tooltip label={chunter.string.Comments} component={CommentPopup} props={{ objectId: value._id }}>
-    <div class="sm-tool-icon">
-      <span class="icon"><IconThread size="small"/></span>&nbsp;{value.comments}
+    <div class="sm-tool-icon ml-1 mr-1">
+      <span class="icon"><IconThread {size}/></span>
+      {#if showCounter}
+      &nbsp;{value.comments}
+      {/if}
     </div>
   </Tooltip>
 {/if}

plugins/chunter/src/index.ts

@@ -66,7 +66,8 @@ export default plugin(chunterId, {
     Lock: '' as Asset
   },
   component: {
-    CommentInput: '' as AnyComponent
+    CommentInput: '' as AnyComponent,
+    CommentsPresenter: '' as AnyComponent
   },
   class: {
     Message: '' as Ref<Class<Message>>,

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

@@ -99,7 +99,7 @@
 
 <div
   bind:this={divHTML}
-  class="flex-row-center"
+  class="flex-row-center flex-wrap"
   class:gap-1={size === 'small'}
   class:gap-2={size !== 'small'}
   class:reverse

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

@@ -22,6 +22,8 @@
   import recruit from '../plugin'
   import CreateApplication from './CreateApplication.svelte'
   import FileDuo from './icons/FileDuo.svelte'
+  import chunter from '@anticrm/chunter'
+  import attachment from '@anticrm/attachment'
 
   export let objectId: Ref<Doc>
   // export let space: Ref<Space>
@@ -42,7 +44,14 @@
   {#if applications > 0}
     <Table 
       _class={recruit.class.Applicant}
-      config={['', '$lookup.space.name', '$lookup.state', '$lookup.doneState']}
+      config={[
+        '',
+        '$lookup.space.name',
+        { key: '', presenter: chunter.component.CommentsPresenter, label: chunter.string.Comments, sortingKey: 'comments' },
+        { key: '', presenter: attachment.component.AttachmentsPresenter, label: attachment.string.Files, sortingKey: 'attachments' },
+       '$lookup.state',
+       '$lookup.doneState'
+       ]}
       options={
         {
           lookup: {

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

@@ -18,8 +18,10 @@
   import { ChannelsView } from '@anticrm/contact-resources'
   import { Avatar, createQuery } from '@anticrm/presentation'
   import type { Candidate } from '@anticrm/recruit'
-  import { showPanel } from '@anticrm/ui'
+  import { Component, showPanel } from '@anticrm/ui'
   import view from '@anticrm/view'
+  import chunter from '@anticrm/chunter'
+  import attachment from '@anticrm/attachment'
 
   export let candidate: Candidate
 
@@ -45,7 +47,15 @@
     <div class="name lines-limit-2">{formatName(candidate.name)}</div>
     <div class="description lines-limit-2">{candidate.title ?? ''}</div>
     <div class="description overflow-label">{candidate.city ?? ''}</div>
-    <div class="footer"><ChannelsView value={channels} size={'small'} on:click /></div>
+    <div class="footer flex flex-reverse flex-grow">
+      <div class='flex-center flex-wrap'>
+        <Component is={chunter.component.CommentsPresenter} props={{ value: candidate, size: 'medium', showCounter: true }}/>
+        <Component is={attachment.component.AttachmentsPresenter} props={{ value: candidate, size: 'medium', showCounter: true }}/>
+      </div>
+      <div class='flex flex-grow'>
+        <ChannelsView value={channels} size={'small'} on:click />
+      </div>
+    </div>
   {/if}
 </div>
 
@@ -80,6 +90,9 @@
       font-size: .75rem;
       color: var(--theme-content-dark-color);
     }
-    .footer { margin-top: 1.5rem; }
+    .footer { 
+      margin-top: 1.5rem;
+      overflow: hidden;
+    }
   }
 </style>

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

@@ -129,20 +129,18 @@
     <thead class="scroller-thead">
       <tr class="tr-head scroller-thead__tr">
         {#if enableChecking}
-          <th>
-            <div class="checkCell" class:checkall={checked.size > 0}>
-              <CheckBox
-                symbol={'minus'}
-                checked={objects?.length === checked.size && objects?.length > 0}
-                on:change={(e) => {
-                  objects.map((o) => check(o._id, e))
-                }}
-              />
-            </div>
+          <th class="checkCell" class:checkall={checked.size > 0}>
+            <CheckBox
+              symbol={'minus'}
+              checked={objects?.length === checked.size && objects?.length > 0}
+              on:change={(e) => {
+                objects.map((o) => check(o._id, e))
+              }}
+            />
           </th>
         {/if}
         {#if showNotification}
-          <th></th>
+          <th />
         {/if}
         {#each model as attribute}
           <th
@@ -194,7 +192,8 @@
                     <svelte:component
                       this={attribute.presenter}
                       value={getValue(object, attribute.key)}
-                      {...attribute.props}/>
+                      {...attribute.props}
+                    />
                     <div class="menuRow" on:click={(ev) => showMenu(ev, object, row)}><MoreV size={'small'} /></div>
                   </div>
                 </td>
@@ -220,15 +219,13 @@
                 {#if enableChecking}
                   <td>
                     <div class="checkCell">
-                      <CheckBox
-                        checked={false}                        
-                      />
+                      <CheckBox checked={false} />
                     </div>
                   </td>
                 {/if}
                 <td>
                   <Spinner size="small" />
-                </td>              
+                </td>
               {/if}
             {/each}
           </tr>
@@ -239,7 +236,7 @@
 {/await}
 
 {#if loading}
-  <Loading/>
+  <Loading />
 {/if}
 
 <style lang="scss">
@@ -259,11 +256,13 @@
     align-items: center;
     .menuRow {
       visibility: hidden;
-      margin-left: .5rem;
-      opacity: .6;
+      margin-left: 0.5rem;
+      opacity: 0.6;
       cursor: pointer;
-      
-      &:hover { opacity: 1; }
+
+      &:hover {
+        opacity: 1;
+      }
     }
   }
   .checkCell {
@@ -284,7 +283,8 @@
     }
   }
 
-  .enableChecking, .showNotification {
+  .enableChecking,
+  .showNotification {
     th,
     td {
       &:first-child {