sorting for nested items works now

2021-01-20 15:54:12 +01:00
parent e653c246ed
commit 8628d38689
9 changed files with 309 additions and 272 deletions
@@ -1,7 +1,7 @@
 <template>
  <button type="button" class="ui-icon-button" :disabled="disabled" :class="'type-' + type.split(' ').join(' type-')" @click="tryClick" :title="title | localize">
    <span class="sr-only" v-localize="title"></span>
-    <ui-icon class="ui-button-icon" :symbol="icon" :size="16" />
+    <ui-icon class="ui-button-icon" :symbol="icon" :size="size" />
  </button>
 </template>

@@ -27,6 +27,10 @@
        type: String,
        default: ''
      },
+      size: {
+        type: Number,
+        default: 16
+      },
      disabled: Boolean
    },

@@ -4,8 +4,8 @@
      <div v-for="item in previews" class="ui-mediapicker-preview">
        <div v-if="!item.error" class="ui-mediapicker-preview-image" :class="{'media-pattern': item.thumbnailSource }">
          <img v-if="item.thumbnailSource" :src="item.thumbnailSource" :alt="item.name" />
-          <button v-if="!disabled" type="button" class="ui-mediapicker-preview-image-delete" @click="remove(item)" v-localize:title="'@ui.remove'"><i class="fth-x"></i></button>
-          <button v-if="!disabled" type="button" class="ui-mediapicker-preview-image-edit" @click="edit(item)" v-localize:title="'@ui.edit'"><i class="fth-edit-2"></i></button>
+          <button v-if="!disabled" type="button" class="ui-mediapicker-preview-image-delete" @click="remove(item)" v-localize:title="'@ui.remove'"><ui-icon symbol="fth-x" :size="12" /></button>
+          <button v-if="!disabled" type="button" class="ui-mediapicker-preview-image-edit" @click="edit(item)" v-localize:title="'@ui.edit'"><ui-icon symbol="fth-edit-2" :size="12" /></button>
        </div>
        <div v-if="!item.error" class="ui-mediapicker-preview-text">
          <b :title="item.name">{{getFilename(item.name)}}</b>
@@ -312,7 +312,7 @@
    height: 80px;
    /*background: var(--color-bg);*/
    border: 1px solid var(--color-line);
-    padding: 3px;
+    padding: 0;
    border-radius: var(--radius);
    color: var(--color-text);
    position: relative;
@@ -2,10 +2,10 @@
  <div class="ui-pick" :class="{'is-disabled': disabled, 'is-combined': configuration.preview.combined }">
    
    <!-- previews -->
-    <div class="ui-pick-previews" v-if="configuration.preview.enabled && previews.length > 0 && !configuration.preview.combined">
+    <div class="ui-pick-previews" v-if="configuration.preview.enabled && previews.length > 0 && !configuration.preview.combined" v-sortable="{ onUpdate: onSortingUpdated, enabled: configuration.sortable }">
      <div v-for="preview in previews" class="ui-pick-preview">
        <ui-select-button :icon="getPreviewIcon(preview)" :icon-as-image="configuration.preview.iconAsImage" :label="preview[configuration.keys.name]" :description="getPreviewDescription(preview)" :disabled="disabled" @click="pick(preview[configuration.keys.id])" :tokens="preview" />
-        <ui-icon-button v-if="!disabled && configuration.preview.delete" @click="remove(preview[configuration.keys.id])" icon="fth-x" title="@ui.close" />
+        <ui-icon-button v-if="!disabled && configuration.preview.delete" @click="remove(preview[configuration.keys.id])" icon="fth-x" title="@ui.close" :size="14" />
      </div>
    </div>

@@ -68,6 +68,7 @@

 <script>
  import { extend as _extend, filter as _filter, debounce as _debounce, isArray as _isArray, clone as _clone, find as _find, map as _map } from 'underscore';
+  import Arrays from 'zero/helpers/arrays.js';

  const defaultConfig = {
    // picker items, can either be a static list or a promise
@@ -563,7 +564,15 @@
      getPreviewDescription(preview)
      {
        return this.configuration.preview.description ? preview[this.configuration.keys.description] : null;
-      }
+      },
+
+
+      onSortingUpdated(ev)
+      {
+        this.selected = Arrays.move(this.selected, ev.oldIndex, ev.newIndex);
+        //this.previews = Arrays.move(this.previews, ev.oldIndex, ev.newIndex);
+        //this.onChange(this.multiple ? this.selected : this.selected[0]);
+      },
    }
  }
 </script>
@@ -1,5 +1,5 @@
 <template>
-  <ui-mediapicker :config="{ limit }" :value="value" @input="$emit('input', $event)" :disabled="disabled" />
+  <ui-mediapicker :config="{ limit, disallowSelect, disallowUpload, fileExtensions, maxFileSize }" :value="value" @input="$emit('input', $event)" :disabled="disabled" />
 </template>


@@ -17,6 +17,22 @@
      limit: {
        type: Number,
        default: 1
+      },
+      disallowSelect: {
+        type: Boolean,
+        default: false
+      },
+      disallowUpload: {
+        type: Boolean,
+        default: false
+      },
+      fileExtensions: {
+        type: Array,
+        default: null
+      },
+      maxFileSize: {
+        type: Number,
+        default: 10
      }
    }
  }
@@ -1,9 +1,9 @@
 <template>
  <div class="editor-nested" :depth="depth">
-    <div class="ui-pick-previews" v-if="items.length">
-      <div v-for="(item, index) in items" class="ui-pick-preview">
+    <div class="ui-pick-previews" v-if="items.length" v-sortable="{ onUpdate: onSortingUpdated }">
+      <div v-for="(item, index) in items" :key="item.id" class="ui-pick-preview">
        <ui-select-button :icon="getIcon(item)" :label="getName(item)" :description="getDescription(item)" :disabled="disabled" @click="editItem(item)" />
-        <ui-icon-button v-if="!disabled" icon="fth-x" title="@ui.close" @click="removeItem(index)" :disabled="disabled" />
+        <ui-icon-button v-if="!disabled" icon="fth-x" title="@ui.close" @click="removeItem(index)" :disabled="disabled" :size="14" />
      </div>
    </div>
    <ui-select-button v-if="limit > items.length" icon="fth-plus" :label="addLabel || '@ui.add'" @click="addItem" :disabled="disabled" />
@@ -16,6 +16,7 @@
  import Overlay from 'zero/helpers/overlay.js';
  import Editor from 'zero/core/editor.ts';
  import Strings from 'zero/helpers/strings.js';
+  import Arrays from 'zero/helpers/arrays.js';

  export default {

@@ -50,7 +51,7 @@
        deep: true,
        handler(val)
        {
-          this.setup();
+          this.setup(val);
        }
      }
    },
@@ -64,15 +65,15 @@

    mounted()
    {
-      this.setup();
+      this.setup(this.value);
    },


    methods: {

-      setup()
+      setup(value)
      {
-        this.items = JSON.parse(JSON.stringify(this.value)) || [];
+        this.items = JSON.parse(JSON.stringify(value)) || [];
        this.multiple = this.limit > 1;
        if (!this.multiple)
        {
@@ -152,7 +153,15 @@
      getIcon(item)
      {
        return typeof this.itemIcon === 'function' ? this.itemIcon(item) : this.itemIcon;
-      }
+      },
+
+
+      onSortingUpdated(ev)
+      {
+        this.items = Arrays.move(this.items, ev.oldIndex, ev.newIndex);
+        this.onChange();
+        //this.$emit('input', this.multiple ? result : (result.length > 0 ? result[0] : null));
+      },
    }
  }
 </script>
@@ -10,7 +10,7 @@ list.link = zero.alias.settings.countries + '-edit';

 list.onFetch(filter => CountriesApi.getByQuery(filter));

-list.column('flag', { width: 62, canSort: false, hideLabel: true }).custom((value, model) => `<i class="flag flag-${model.code.toLowerCase()}"></i>`, true, 'flag');
+list.column('flag', { width: 62, canSort: false, hideLabel: true }).custom((value, model) => `<i class="ui-icon" data-symbol="flag-${model.code.toLowerCase()}"></i>`, true, 'flag');
 list.column('name').name();
 list.column('code').text();
 list.column('isPreferred', { width: 200 }).boolean();
@@ -1,6 +1,6 @@
 <template>
-  <svg v-if="symbol" class="ui-icon" :width="size" :height="size" :stroke-width="strokeWidth">
-    <use :xlink:href="'#' + symbol.trim()" />
+  <svg v-if="symbol" class="ui-icon" :width="size" :height="size" :stroke-width="strokeWidth" :data-symbol="symbol">
+    <use v-if="!isFlag" :xlink:href="'#' + symbol.trim()" />
  </svg>
 </template>

@@ -22,6 +22,13 @@
        type: Number,
        default: 2
      }
+    },
+
+    computed: {
+      isFlag()
+      {
+        return this.symbol && this.symbol.indexOf('flag') === 0;
+      }
    }
  }
 </script>
@@ -12,7 +12,7 @@ namespace zero.Web.Controllers
    public CountriesController(ICountriesCollection collection) : base(collection)
    {
      DefaultQuery = q => q.OrderByDescending(x => x.IsPreferred).ThenBy(x => x.Name);
-      PreviewTransform = (item, model) => model.Icon = "flag flag-" + item.Code.ToLowerInvariant();
+      PreviewTransform = (item, model) => model.Icon = "flag-" + item.Code.ToLowerInvariant();
    }
  }
 }