Edit attribute fixes (#1894)

Signed-off-by: Denis Bykhov <80476319+BykhovDenis@users.noreply.github.com>

plugins/setting-resources/src/components/ClassAttributes.svelte

@@ -128,7 +128,15 @@
   <tbody>
     {#each attributes as attr}
       {@const attrType = attr.type._class === core.class.RefTo ? getRefClassTo(attr.type) : undefined}
-      <tr class="antiTable-body__row" on:contextmenu|preventDefault={(ev) => showMenu(ev, attr)}>
+      <tr
+        class="antiTable-body__row"
+        on:contextmenu={(ev) => {
+          if (attr.isCustom) {
+            ev.preventDefault()
+            showMenu(ev, attr)
+          }
+        }}
+      >
         <td>
           <div class="antiTable-cells__firstCell">
             <Label label={attr.label} />

plugins/setting-resources/src/components/EditAttribute.svelte

@@ -24,8 +24,8 @@
   export let attribute: AnyAttribute
   export let exist: boolean
   let name: string
-  let type: Type<PropertyType> | undefined
-  let index: IndexKind | undefined
+  let type: Type<PropertyType> | undefined = attribute.type
+  let index: IndexKind | undefined = attribute.index
   let is: AnyComponent | undefined
 
   const client = getClient()
@@ -94,34 +94,34 @@
   <div class="flex-col mb-2">
     <div class="flex-row-center flex-grow">
       <Label label={setting.string.Type} />
-    </div>
-    <div class="flex-col mb-2">
-      {#if exist}
-        <Label label={attribute.type.label} />
-      {:else}
-        <div class="flex-row-center flex-grow">
-          <div class="ml-4">
-            <DropdownLabelsIntl
-              label={setting.string.Type}
-              {items}
-              width="8rem"
-              bind:selected={selectedType}
-              on:selected={(e) => selectType(e.detail)}
-            />
-          </div>
-        </div>
-        {#if is}
-          <div class="flex mt-4">
-            <Component
-              {is}
-              on:change={(e) => {
-                type = e.detail?.type
-                index = e.detail?.index
-              }}
-            />
-          </div>
+      <div class="ml-4">
+        {#if exist}
+          <Label label={attribute.type.label} />
+        {:else}
+          <DropdownLabelsIntl
+            label={setting.string.Type}
+            {items}
+            width="8rem"
+            bind:selected={selectedType}
+            on:selected={(e) => selectType(e.detail)}
+          />
         {/if}
-      {/if}
+      </div>
     </div>
+    {#if is}
+      <div class="flex mt-4">
+        <Component
+          {is}
+          props={{
+            type,
+            editable: !exist
+          }}
+          on:change={(e) => {
+            type = e.detail?.type
+            index = e.detail?.index
+          }}
+        />
+      </div>
+    {/if}
   </div>
 </Card>

plugins/setting-resources/src/components/typeEditors/DateTypeEditor.svelte

@@ -13,30 +13,40 @@
 // limitations under the License.
 -->
 <script lang="ts">
+  import { TypeDate as DateType } from '@anticrm/core'
   import { TypeDate } from '@anticrm/model'
   import { Label } from '@anticrm/ui'
   import { createEventDispatcher, onMount } from 'svelte'
   import setting from '../../plugin'
   import BooleanEditor from '@anticrm/view-resources/src/components/BooleanEditor.svelte'
+  import BooleanPresenter from '@anticrm/view-resources/src/components/BooleanPresenter.svelte'
 
+  export let type: DateType | undefined
+  export let editable: boolean = true
   const dispatch = createEventDispatcher()
 
-  let withTime: boolean = false
+  let withTime: boolean = type?.withTime ?? false
 
   onMount(() => {
-    dispatch('change', { type: TypeDate(withTime) })
+    if (type === undefined) {
+      dispatch('change', { type: TypeDate(withTime) })
+    }
   })
 </script>
 
 <div class="flex-row-center">
   <Label label={setting.string.WithTime} />
   <div class="ml-2">
-    <BooleanEditor
-      withoutUndefined
-      bind:value={withTime}
-      onChange={(e) => {
-        dispatch('change', { type: TypeDate(e) })
-      }}
-    />
+    {#if editable}
+      <BooleanEditor
+        withoutUndefined
+        bind:value={withTime}
+        onChange={(e) => {
+          dispatch('change', { type: TypeDate(e) })
+        }}
+      />
+    {:else}
+      <BooleanPresenter value={withTime} />
+    {/if}
   </div>
 </div>

plugins/setting-resources/src/components/typeEditors/RefEditor.svelte

@@ -13,7 +13,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import core, { Class, Doc, Ref } from '@anticrm/core'
+  import core, { Class, Doc, Ref, RefTo } from '@anticrm/core'
   import { TypeRef } from '@anticrm/model'
   import { getClient } from '@anticrm/presentation'
   import { DOMAIN_STATE } from '@anticrm/task'
@@ -21,6 +21,9 @@
   import view from '@anticrm/view-resources/src/plugin'
   import { createEventDispatcher } from 'svelte'
 
+  export let type: RefTo<Doc> | undefined
+  export let editable: boolean = true
+
   const dispatch = createEventDispatcher()
   const client = getClient()
   const hierarchy = client.getHierarchy()
@@ -39,14 +42,20 @@
       return { id: p._id, label: p.label }
     })
 
-  let refClass: Ref<Class<Doc>>
+  let refClass: Ref<Class<Doc>> | undefined = type?.to
 
-  $: dispatch('change', { type: TypeRef(refClass) })
+  $: selected = classes.find((p) => p.id === refClass)
+
+  $: refClass && dispatch('change', { type: TypeRef(refClass) })
 </script>
 
 <div class="flex-row-center flex-grow">
   <Label label={core.string.Class} />
   <div class="ml-4">
-    <DropdownLabelsIntl label={core.string.Class} items={classes} width="8rem" bind:selected={refClass} />
+    {#if editable}
+      <DropdownLabelsIntl label={core.string.Class} items={classes} width="8rem" bind:selected={refClass} />
+    {:else if selected}
+      <Label label={selected.label} />
+    {/if}
   </div>
 </div>