UBERF-8564 More readonly fields in guest mode (#7076)

Signed-off-by: Alexander Onnikov <Alexander.Onnikov@xored.com>

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

@@ -184,7 +184,7 @@
               {getName(client.getHierarchy(), selected)}
             {/if}
           {:else}
-            <div class="flex-presenter not-selected">
+            <div class="flex-presenter not-selected" class:cursor-default={readonly}>
               {#if icon}
                 <div class="icon w-4 flex-no-shrink" class:small-gap={size === 'inline' || size === 'small'}>
                   <Icon {icon} size={'small'} />

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

@@ -97,6 +97,7 @@
     on:close={() => {
       dispatch('close')
     }}
+    withoutInput={readonly}
   >
     <svelte:fragment slot="title">
       <DocNavLink noUnderline {object}>
@@ -106,7 +107,7 @@
 
     <svelte:fragment slot="attributes" let:direction={dir}>
       {#if dir === 'column'}
-        <DocAttributeBar {object} {mixins} {ignoreKeys} />
+        <DocAttributeBar {object} {mixins} {ignoreKeys} {readonly} />
       {/if}
     </svelte:fragment>
 
@@ -117,14 +118,16 @@
     </svelte:fragment>
 
     <svelte:fragment slot="utils">
-      <Button
+      {#if !readonly}
-        icon={IconMoreH}
+        <Button
-        iconProps={{ size: 'medium' }}
+          icon={IconMoreH}
-        kind={'icon'}
+          iconProps={{ size: 'medium' }}
-        on:click={(e) => {
+          kind={'icon'}
-          showMenu(e, { object, excludedActions: [view.action.Open] })
+          on:click={(e) => {
-        }}
+            showMenu(e, { object, excludedActions: [view.action.Open] })
-      />
+          }}
+        />
+      {/if}
       <Button
         icon={IconMixin}
         kind={'icon'}
@@ -137,7 +140,7 @@
     </svelte:fragment>
 
     <div class="flex-col flex-grow flex-no-shrink step-tb-6">
-      <EditOrganization {object} />
+      <EditOrganization {object} {readonly} />
       <div class="flex-col flex-grow w-full mt-6 relative">
         <AttachmentStyleBoxCollabEditor
           focusIndex={30}
@@ -145,6 +148,7 @@
           key={{ key: 'description', attr: descriptionKey }}
           placeholder={core.string.Description}
           enableAttachments={false}
+          {readonly}
           on:saved={(evt) => {
             saved = evt.detail
           }}

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

@@ -103,6 +103,7 @@
   {kind}
   {size}
   {justify}
+  disabled={readonly}
   showTooltip={label ? { label, direction: labelDirection } : undefined}
   on:click={addPerson}
 >

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

@@ -24,8 +24,8 @@
   import SectionEmpty from './SectionEmpty.svelte'
 
   export let objectId: Ref<Doc>
-
   export let applications: number
+  export let readonly: boolean = false
 
   const createApp = (ev: MouseEvent): void => {
     showPopup(CreateApplication, { candidate: objectId, preserveCandidate: true }, ev.target as HTMLElement)
@@ -46,7 +46,9 @@
         bind:loading
         bind:preference
       />
-      <Button id="appls.add" icon={IconAdd} kind={'ghost'} on:click={createApp} />
+      {#if !readonly}
+        <Button id="appls.add" icon={IconAdd} kind={'ghost'} on:click={createApp} />
+      {/if}
     </div>
   </svelte:fragment>
 
@@ -58,15 +60,18 @@
           config={preference?.config ?? viewlet.config}
           query={{ attachedTo: objectId, ...(viewlet?.baseQuery ?? {}) }}
           loadingProps={{ length: applications }}
+          {readonly}
         />
       </Scroller>
     {:else}
       <SectionEmpty icon={FileDuo} label={recruit.string.NoApplicationsForTalent}>
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        {#if !readonly}
-        <!-- svelte-ignore a11y-no-static-element-interactions -->
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <span class="over-underline content-color" on:click={createApp}>
+          <!-- svelte-ignore a11y-no-static-element-interactions -->
-          <Label label={recruit.string.CreateAnApplication} />
+          <span class="over-underline content-color" on:click={createApp}>
-        </span>
+            <Label label={recruit.string.CreateAnApplication} />
+          </span>
+        {/if}
       </SectionEmpty>
     {/if}
   </svelte:fragment>

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

@@ -31,6 +31,7 @@
 
   export let _id: Ref<Vacancy>
   export let embedded: boolean = false
+  export let readonly = false
 
   let object: Required<Vacancy>
   let rawName: string = ''
@@ -140,6 +141,7 @@
         <DocAttributeBar
           {object}
           {mixins}
+          {readonly}
           ignoreKeys={['name', 'fullDescription', 'private', 'archived', 'type', 'owners']}
         />
       {/if}
@@ -151,6 +153,7 @@
       kind={'large-style'}
       focusable
       autoFocus={!embedded}
+      disabled={readonly}
       on:blur={save}
     />
 
@@ -160,14 +163,16 @@
       {/if}
     </svelte:fragment>
     <svelte:fragment slot="utils">
-      <Button
+      {#if !readonly}
-        icon={IconMoreH}
+        <Button
-        iconProps={{ size: 'medium' }}
+          icon={IconMoreH}
-        kind={'icon'}
+          iconProps={{ size: 'medium' }}
-        on:click={(e) => {
+          kind={'icon'}
-          showMenu(e, { object, excludedActions: [view.action.Open] })
+          on:click={(e) => {
-        }}
+            showMenu(e, { object, excludedActions: [view.action.Open] })
-      />
+          }}
+        />
+      {/if}
       <Button
         icon={IconMixin}
         kind={'icon'}
@@ -187,6 +192,7 @@
         key={{ key: 'fullDescription', attr: descriptionKey }}
         bind:this={descriptionBox}
         placeholder={recruit.string.FullDescription}
+        {readonly}
         on:saved={(evt) => {
           saved = evt.detail
         }}
@@ -194,7 +200,7 @@
     </div>
 
     <div class="w-full mt-6">
-      <VacancyApplications objectId={object._id} />
+      <VacancyApplications objectId={object._id} {readonly} />
     </div>
     <div class="w-full mt-6">
       <Component is={tracker.component.RelatedIssuesSection} props={{ object, label: tracker.string.RelatedIssues }} />

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

@@ -26,6 +26,7 @@
   import SectionEmpty from './SectionEmpty.svelte'
 
   export let objectId: Ref<Vacancy>
+  export let readonly = false
   let applications: number
 
   const query = createQuery()
@@ -60,7 +61,9 @@
         bind:preference
         bind:loading
       />
-      <Button id="appls.add" icon={IconAdd} kind={'ghost'} on:click={createApp} />
+      {#if !readonly}
+        <Button id="appls.add" icon={IconAdd} kind={'ghost'} on:click={createApp} />
+      {/if}
     </div>
   </div>
   {#if applications > 0}
@@ -71,6 +74,7 @@
           config={preference?.config ?? viewlet.config}
           query={{ space: objectId }}
           loadingProps={{ length: applications }}
+          {readonly}
         />
       </Scroller>
     {:else}
@@ -80,9 +84,11 @@
     <SectionEmpty icon={FileDuo} label={recruit.string.NoApplicationsForVacancy}>
       <!-- svelte-ignore a11y-click-events-have-key-events -->
       <!-- svelte-ignore a11y-no-static-element-interactions -->
-      <span class="over-underline content-color" on:click={createApp}>
+      {#if !readonly}
-        <Label label={recruit.string.CreateAnApplication} />
+        <span class="over-underline content-color" on:click={createApp}>
-      </span>
+          <Label label={recruit.string.CreateAnApplication} />
+        </span>
+      {/if}
     </SectionEmpty>
   {/if}
 </div>

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

@@ -72,11 +72,13 @@
     </Scroller>
   {:else}
     <SectionEmpty icon={FileDuo} label={recruit.string.NoVacancies}>
-      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      {#if !readonly}
-      <!-- svelte-ignore a11y-no-static-element-interactions -->
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <span class="over-underline content-color" on:click={createApp}>
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
-        <Label label={recruit.string.CreateVacancy} />
+        <span class="over-underline content-color" on:click={createApp}>
-      </span>
+          <Label label={recruit.string.CreateVacancy} />
+        </span>
+      {/if}
     </SectionEmpty>
   {/if}
 </div>

plugins/tags-resources/src/components/Tags.svelte

@@ -22,6 +22,7 @@
   export let object: Doc
   export let _class: Ref<Class<Doc>>
   export let key: KeyedAttribute
+  export let readonly: boolean = false
 
   const client = getClient()
 
@@ -56,6 +57,7 @@
 
 <TagsEditor
   {key}
+  {readonly}
   bind:items
   targetClass={_class}
   on:open={(evt) => addRef(evt.detail)}

plugins/tags-resources/src/components/TagsEditor.svelte

@@ -46,6 +46,7 @@
   export let key: KeyedAttribute
   export let showTitle = true
   export let schema: '0' | '3' | '9' = key.attr.schema ?? '0'
+  export let readonly = false
 
   let elements: IdMap<TagElement> = new Map()
   const elementQuery = createQuery()
@@ -113,13 +114,15 @@
         <Label label={key.attr.label} />
       </span>
       <div class="buttons-group x-small">
-        <Button
+        {#if !readonly}
-          icon={IconAdd}
+          <Button
-          kind={'ghost'}
+            icon={IconAdd}
-          showTooltip={{ label: tags.string.AddTagTooltip, props: { word: keyLabel } }}
+            kind={'ghost'}
-          id={'add-tag'}
+            showTooltip={{ label: tags.string.AddTagTooltip, props: { word: keyLabel } }}
-          on:click={addTag}
+            id={'add-tag'}
-        />
+            on:click={addTag}
+          />
+        {/if}
       </div>
     </div>
   {/if}

plugins/tracker-resources/src/components/issues/timereport/ReportedTimeEditor.svelte

@@ -106,14 +106,15 @@
 
     &:not(.readonly) {
       cursor: pointer;
-    }
-    .add-action {
-      visibility: hidden;
-    }
 
-    &:hover {
       .add-action {
-        visibility: visible;
+        visibility: hidden;
+      }
+
+      &:hover {
+        .add-action {
+          visibility: visible;
+        }
       }
     }
   }