Sortable enum (#2813)

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

packages/ui/src/index.ts

@@ -147,6 +147,7 @@ export { default as IconColStar } from './components/icons/ColStar.svelte'
 export { default as IconMinWidth } from './components/icons/MinWidth.svelte'
 export { default as IconMaxWidth } from './components/icons/MaxWidth.svelte'
 export { default as IconMixin } from './components/icons/Mixin.svelte'
+export { default as IconCircles } from './components/icons/Circles.svelte'
 
 export { default as PanelInstance } from './components/PanelInstance.svelte'
 export { default as Panel } from './components/Panel.svelte'

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

@@ -253,7 +253,7 @@
           {#if attrType !== undefined}
             : <Label label={attrType} />
           {/if}
-          {#if attr.type._class === core.class.Enum}
+          {#if attr.type._class === core.class.EnumOf}
             {#await getEnumName(attr.type) then name}
               {#if name}
                 : {name}

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

@@ -15,20 +15,12 @@
 <script lang="ts">
   import core, { Enum } from '@hcengineering/core'
   import presentation, { Card, getClient, MessageBox } from '@hcengineering/presentation'
-  import {
-    ActionIcon,
-    EditBox,
-    IconAdd,
-    IconAttachment,
-    IconDelete,
-    Label,
-    ListView,
-    showPopup
-  } from '@hcengineering/ui'
+  import { ActionIcon, EditBox, IconAdd, IconAttachment, IconDelete, ListView, showPopup } from '@hcengineering/ui'
+  import view from '@hcengineering/view-resources/src/plugin'
   import { createEventDispatcher } from 'svelte'
   import setting from '../plugin'
+  import EnumValuesList from './EnumValuesList.svelte'
   import Copy from './icons/Copy.svelte'
-  import view from '@hcengineering/view-resources/src/plugin'
 
   export let value: Enum | undefined
   export let name: string = value?.name ?? ''
@@ -123,7 +115,7 @@
     processText(text)
   }
   let dragover = false
-  let selection: number = 0
+  const selection: number = 0
 
   function onKeydown (key: KeyboardEvent): void {
     if (key.code === 'ArrowUp') {
@@ -208,25 +200,7 @@
     </div>
     <div class="scroll">
       <div class="box flex max-h-125">
-        <ListView bind:this={list} count={filtered.length} bind:selection>
-          <svelte:fragment slot="item" let:item>
-            {@const value = filtered[item]}
-            <div class="flex-between flex-nowrap mb-2">
-              <span class="overflow-label">{value}</span>
-              <ActionIcon
-                icon={IconDelete}
-                label={setting.string.Delete}
-                action={() => {
-                  remove(value)
-                }}
-                size={'small'}
-              />
-            </div>
-          </svelte:fragment>
-        </ListView>
-        {#if filtered.length === 0}
-          <Label label={presentation.string.NoMatchesFound} />
-        {/if}
+        <EnumValuesList bind:values bind:filtered on:remove={(e) => remove(e.detail)} />
       </div>
     </div>
   </div>

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

@@ -15,19 +15,11 @@
 <script lang="ts">
   import { Enum } from '@hcengineering/core'
   import presentation, { getClient, MessageBox } from '@hcengineering/presentation'
-  import {
-    ActionIcon,
-    EditBox,
-    IconAdd,
-    IconAttachment,
-    IconDelete,
-    Label,
-    ListView,
-    showPopup
-  } from '@hcengineering/ui'
-  import setting from '../plugin'
-  import Copy from './icons/Copy.svelte'
+  import { ActionIcon, EditBox, IconAdd, IconAttachment, IconDelete, showPopup } from '@hcengineering/ui'
   import view from '@hcengineering/view-resources/src/plugin'
+  import setting from '../plugin'
+  import EnumValuesList from './EnumValuesList.svelte'
+  import Copy from './icons/Copy.svelte'
 
   export let value: Enum
 
@@ -107,6 +99,10 @@
       }
     )
   }
+
+  async function onDrop () {
+    await client.update(value, { enumValues: value.enumValues })
+  }
 </script>
 
 <input
@@ -157,25 +153,12 @@
   </div>
   <div class="scroll">
     <div class="box">
-      <ListView count={filtered.length}>
-        <svelte:fragment slot="item" let:item>
-          {@const evalue = filtered[item]}
-          <div class="flex-between flex-nowrap mb-2">
-            <span class="overflow-label">{evalue}</span>
-            <ActionIcon
-              icon={IconDelete}
-              label={setting.string.Delete}
-              action={() => {
-                remove(evalue)
-              }}
-              size={'small'}
-            />
-          </div>
-        </svelte:fragment>
-      </ListView>
-      {#if filtered.length === 0}
-        <Label label={presentation.string.NoMatchesFound} />
-      {/if}
+      <EnumValuesList
+        bind:values={value.enumValues}
+        bind:filtered
+        on:remove={(e) => remove(e.detail)}
+        on:drop={onDrop}
+      />
     </div>
   </div>
 </div>

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

@@ -0,0 +1,117 @@
+<!--
+// Copyright © 2022 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 presentation from '@hcengineering/presentation'
+  import { ActionIcon, IconCircles, IconDelete, Label, Scroller } from '@hcengineering/ui'
+  import { createEventDispatcher } from 'svelte'
+  import setting from '../plugin'
+
+  export let values: string[]
+  export let filtered: string[]
+
+  let selected: string | undefined
+  const elements: HTMLElement[] = []
+
+  function dragswap (ev: MouseEvent, item: string): boolean {
+    const s = filtered.findIndex((p) => p === selected)
+    const i = filtered.findIndex((p) => p === item)
+    if (i < s) {
+      return ev.offsetY < elements[i].offsetHeight / 2
+    } else if (i > s) {
+      return ev.offsetY > elements[i].offsetHeight / 2
+    }
+    return false
+  }
+
+  function dragover (ev: MouseEvent, item: string) {
+    const s = values.findIndex((p) => p === selected)
+    const i = values.findIndex((p) => p === item)
+    if (dragswap(ev, item)) {
+      ;[values[i], values[s]] = [values[s], values[i]]
+    }
+  }
+
+  const dispatch = createEventDispatcher()
+
+  async function remove (target: string) {
+    dispatch('remove', target)
+  }
+
+  async function onDrop () {
+    dispatch('drop')
+  }
+</script>
+
+<Scroller>
+  {#each filtered as item, i}
+    <div
+      class="flex-between flex-nowrap item mb-2"
+      draggable={true}
+      bind:this={elements[i]}
+      on:dragover|preventDefault={(ev) => {
+        dragover(ev, item)
+      }}
+      on:drop|preventDefault={onDrop}
+      on:dragstart={() => {
+        selected = item
+      }}
+      on:dragend={() => {
+        selected = undefined
+      }}
+    >
+      <div class="flex">
+        <div class="circles-mark"><IconCircles /></div>
+        <span class="overflow-label">{item}</span>
+      </div>
+      <ActionIcon
+        icon={IconDelete}
+        label={setting.string.Delete}
+        action={() => {
+          remove(item)
+        }}
+        size={'small'}
+      />
+    </div>
+  {/each}
+</Scroller>
+{#if filtered.length === 0}
+  <Label label={presentation.string.NoMatchesFound} />
+{/if}
+
+<style lang="scss">
+  .item {
+    &:hover {
+      .circles-mark {
+        cursor: grab;
+        opacity: 1;
+      }
+    }
+  }
+  .circles-mark {
+    position: relative;
+    opacity: 0.4;
+    width: 0.375rem;
+    height: 1rem;
+    transition: opacity 0.1s;
+    margin-right: 0.5rem;
+    cursor: grab;
+
+    &::before {
+      position: absolute;
+      content: '';
+      inset: -0.5rem;
+    }
+  }
+</style>

plugins/task-resources/src/components/state/StatesEditor.svelte

@@ -25,11 +25,11 @@
     showPopup,
     getPlatformColor,
     eventToHTMLElement,
-    Component
+    Component,
+    IconCircles
   } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import { ColorsPopup } from '@hcengineering/view-resources'
-  import Circles from './Circles.svelte'
   import StatusesPopup from './StatusesPopup.svelte'
   import task from '../../plugin'
   import Won from '../icons/Won.svelte'
@@ -122,7 +122,7 @@
           selected = undefined
         }}
       >
-        <div class="bar"><Circles /></div>
+        <div class="bar"><IconCircles /></div>
         <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div
           class="color"

plugins/tracker-resources/src/components/icons/Circles.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-  const fill: string = 'var(--caption-color)'
-</script>
-
-<svg {fill} viewBox="0 0 6 16" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="1" cy="1" r="1" />
-  <circle cx="4.5" cy="1" r="1" />
-  <circle cx="1" cy="4.5" r="1" />
-  <circle cx="4.5" cy="4.5" r="1" />
-  <circle cx="1" cy="8" r="1" />
-  <circle cx="4.5" cy="8" r="1" />
-  <circle cx="1" cy="11.5" r="1" />
-  <circle cx="4.5" cy="11.5" r="1" />
-  <circle cx="1" cy="15" r="1" />
-  <circle cx="4.5" cy="15" r="1" />
-</svg>

plugins/tracker-resources/src/components/templates/DraftIssueChildList.svelte

@@ -16,11 +16,10 @@
   import { Ref } from '@hcengineering/core'
   import { createQuery } from '@hcengineering/presentation'
   import tracker, { Component, DraftIssueChild, IssueTemplateChild, Project, Sprint } from '@hcengineering/tracker'
-  import { eventToHTMLElement, showPopup } from '@hcengineering/ui'
+  import { eventToHTMLElement, IconCircles, showPopup } from '@hcengineering/ui'
   import { ActionContext, FixedColumn } from '@hcengineering/view-resources'
   import { createEventDispatcher } from 'svelte'
   import { flip } from 'svelte/animate'
-  import Circles from '../icons/Circles.svelte'
   import AssigneeEditor from '../issues/AssigneeEditor.svelte'
   import PriorityEditor from '../issues/PriorityEditor.svelte'
   import StatusEditor from '../issues/StatusEditor.svelte'
@@ -122,7 +121,7 @@
     on:dragend={resetDrag}
   >
     <div class="draggable-container">
-      <div class="draggable-mark"><Circles /></div>
+      <div class="draggable-mark"><IconCircles /></div>
     </div>
     <div class="flex-row-center ml-6 clear-mins gap-2">
       <StatusEditor

plugins/tracker-resources/src/components/templates/IssueTemplateChildList.svelte

@@ -16,11 +16,10 @@
   import { Ref } from '@hcengineering/core'
   import { createQuery } from '@hcengineering/presentation'
   import tracker, { IssueTemplateChild, Component, Sprint, Project } from '@hcengineering/tracker'
-  import { eventToHTMLElement, showPopup } from '@hcengineering/ui'
+  import { eventToHTMLElement, IconCircles, showPopup } from '@hcengineering/ui'
   import { ActionContext, FixedColumn } from '@hcengineering/view-resources'
   import { createEventDispatcher } from 'svelte'
   import { flip } from 'svelte/animate'
-  import Circles from '../icons/Circles.svelte'
   import AssigneeEditor from '../issues/AssigneeEditor.svelte'
   import PriorityEditor from '../issues/PriorityEditor.svelte'
   import EstimationEditor from './EstimationEditor.svelte'
@@ -121,7 +120,7 @@
     on:dragend={resetDrag}
   >
     <div class="draggable-container">
-      <div class="draggable-mark"><Circles /></div>
+      <div class="draggable-mark"><IconCircles /></div>
     </div>
     <div class="flex-row-center ml-6 clear-mins gap-2">
       <PriorityEditor

plugins/tracker-resources/src/components/workflow/StatusEditor.svelte

@@ -16,11 +16,10 @@
   import { createEventDispatcher } from 'svelte'
   import { Data } from '@hcengineering/core'
   import { IssueStatus } from '@hcengineering/tracker'
-  import { Button, eventToHTMLElement, getPlatformColor, showPopup } from '@hcengineering/ui'
+  import { Button, eventToHTMLElement, getPlatformColor, IconCircles, showPopup } from '@hcengineering/ui'
   import presentation from '@hcengineering/presentation'
   import { ColorsPopup } from '@hcengineering/view-resources'
   import tracker from '../../plugin'
-  import Circles from '../icons/Circles.svelte'
   import StatusInput from './StatusInput.svelte'
 
   export let value: Partial<Data<IssueStatus>>
@@ -44,7 +43,7 @@
 <div class="flex-between background-button-bg-color border-radius-1 p-2 root">
   <div class="flex flex-grow items-center clear-mins inputs">
     <div class="flex-no-shrink draggable-mark">
-      {#if !isSingle}<Circles />{/if}
+      {#if !isSingle}<IconCircles />{/if}
     </div>
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <div class="flex-no-shrink ml-2 color" on:click={pickColor}>

plugins/tracker-resources/src/components/workflow/StatusPresenter.svelte

@@ -14,10 +14,9 @@
 -->
 <script lang="ts">
   import { IssueStatus } from '@hcengineering/tracker'
-  import { Icon, IconClose, IconEdit, Label, tooltip } from '@hcengineering/ui'
+  import { Icon, IconCircles, IconClose, IconEdit, Label, tooltip } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import tracker from '../../plugin'
-  import Circles from '../icons/Circles.svelte'
   import IssueStatusIcon from '../issues/IssueStatusIcon.svelte'
 
   export let value: IssueStatus
@@ -34,7 +33,7 @@
 <div class="flex-between background-button-bg-color border-radius-1 p-2 root" on:dblclick|preventDefault={edit}>
   <div class="flex flex-grow items-center">
     <div class="flex-no-shrink draggable-mark" class:draggable={!isSingle}>
-      <Circles />
+      <IconCircles />
     </div>
     <div class="flex-no-shrink ml-2">
       <IssueStatusIcon {value} size="small" />

plugins/view-resources/src/components/icons/Circles.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-  const fill: string = 'var(--caption-color)'
-</script>
-
-<svg {fill} viewBox="0 0 6 16" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="1" cy="1" r="1" />
-  <circle cx="4.5" cy="1" r="1" />
-  <circle cx="1" cy="4.5" r="1" />
-  <circle cx="4.5" cy="4.5" r="1" />
-  <circle cx="1" cy="8" r="1" />
-  <circle cx="4.5" cy="8" r="1" />
-  <circle cx="1" cy="11.5" r="1" />
-  <circle cx="4.5" cy="11.5" r="1" />
-  <circle cx="1" cy="15" r="1" />
-  <circle cx="4.5" cy="15" r="1" />
-</svg>

plugins/view-resources/src/components/list/ListItem.svelte

@@ -16,12 +16,11 @@
   import core, { AnyAttribute, Doc, getObjectValue, Ref } from '@hcengineering/core'
   import notification from '@hcengineering/notification'
   import { getClient, updateAttribute } from '@hcengineering/presentation'
-  import { CheckBox, Component, deviceOptionsStore as deviceInfo, tooltip } from '@hcengineering/ui'
+  import { CheckBox, Component, deviceOptionsStore as deviceInfo, tooltip, IconCircles } from '@hcengineering/ui'
   import { AttributeModel } from '@hcengineering/view'
   import { createEventDispatcher } from 'svelte'
   import { FixedColumn } from '../..'
   import view from '../../plugin'
-  import Circles from '../icons/Circles.svelte'
 
   export let docObject: Doc
   export let index: number
@@ -103,7 +102,7 @@
   on:dragstart
 >
   <div class="draggable-container">
-    <div class="draggable-mark"><Circles /></div>
+    <div class="draggable-mark"><IconCircles /></div>
   </div>
   <div class="flex-center relative" use:tooltip={{ label: view.string.Select, direction: 'bottom' }}>
     <div class="antiList-cells__notifyCell">
@@ -151,15 +150,15 @@
   {/each}
   {#if compactMode}
     <div class="panel-trigger" tabindex="-1">
-      <Circles />
+      <IconCircles />
       <div class="space" />
-      <Circles />
+      <IconCircles />
     </div>
     <div class="hidden-panel" tabindex="-1">
       <div class="header">
-        <Circles />
+        <IconCircles />
         <div class="space" />
-        <Circles />
+        <IconCircles />
       </div>
       <div class="scroll-box gap-2">
         {#each model as attributeModel}

plugins/view-resources/src/components/list/SortableListItem.svelte

@@ -14,9 +14,8 @@
 -->
 <script lang="ts">
   import presentation from '@hcengineering/presentation'
-  import { Icon, IconEdit, IconClose, tooltip, Button } from '@hcengineering/ui'
+  import { Icon, IconEdit, IconClose, tooltip, Button, IconCircles } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
-  import Circles from '../icons/Circles.svelte'
 
   export let style = ''
   export let isDraggable = false
@@ -37,7 +36,7 @@
   on:dblclick|preventDefault={isEditable && !isEditing ? () => dispatch('edit') : undefined}
 >
   <div class="flex-center ml-2">
-    <div class="flex-no-shrink circles-mark" class:isDraggable><Circles /></div>
+    <div class="flex-no-shrink circles-mark" class:isDraggable><IconCircles /></div>
   </div>
 
   <div class="root flex flex-between items-center w-full p-2">