start alias field

zero.Web.UI/App/components/forms/alias.vue

@@ -0,0 +1,135 @@
+ <template>
+  <div class="ui-alias" :class="{'is-disabled': disabled, 'is-locked': locked }">
+    <button type="button" class="ui-alias-lock" @click="toggleLock">
+      <i :class="locked ? 'fth-lock' : 'fth-unlock'"></i>
+    </button>
+    <input ref="input" :value="value" @input="onChange" type="text" class="ui-input" :maxlength="maxLength" :readonly="locked" :disabled="disabled" @blur="locked=true" />
+  </div>
+</template>
+
+
+<script>
+  import { map as _map } from 'underscore';
+  import UtilsApi from 'zero/resources/utils';
+
+  export default {
+    name: 'uiAlias',
+
+    props: {
+      value: {
+        type: String,
+        default: null
+      },
+      name: {
+        type: String,
+        required: true,
+        default: null
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      maxLength: {
+        type: Number,
+        default: 200
+      }
+    },
+
+
+    data: () => ({
+      custom: false,
+      locked: true
+    }),
+
+
+    watch: {
+      name: function(val)
+      {
+        this.updateAlias(val);
+      }
+    },
+
+
+    mounted()
+    {
+      this.updateAlias(this.name);
+    },
+
+
+    methods: {
+
+      onChange(ev)
+      {
+        let alias = ev.target.value;
+
+        this.custom = alias !== this.value;
+        this.updateAlias(alias);
+
+        this.$emit('input', alias);
+      },
+
+
+      toggleLock()
+      {
+        this.locked = !this.locked;
+
+        if (!this.locked)
+        {
+          this.$nextTick(() =>
+          {
+            this.$refs.input.focus();
+            this.$refs.input.select();
+          });
+        }
+      },
+
+
+      updateAlias(value)
+      {
+        UtilsApi.generateAlias(value).then(alias =>
+        {
+          this.custom = alias !== this.value;
+          this.$emit('input', alias);
+        });
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .ui-alias
+  {
+    display: flex;
+    align-items: center;
+
+    button
+    {
+      width: 24px;
+      height: 24px;
+      border-radius: var(--radius);
+      background: var(--color-box-nested);
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 13px;
+      margin-right: 10px;
+    }
+
+    input
+    {
+      background: transparent !important;
+      border: none !important;
+      box-shadow: none !important;
+      height: 24px !important;
+      padding: 0 !important;
+      outline: none !important;
+      min-width: 10px !important;
+      width: auto !important;
+    }
+
+    &:not(.is-locked) input
+    {
+      font-weight: bold;
+    }
+  }
+</style>

zero.Web.UI/App/components/forms/form-header.vue

@@ -3,6 +3,7 @@
     <template v-slot:title>
       <h2 class="ui-header-bar-title" :class="{'is-empty': title && !value.name}">
         <input class="ui-form-header-title-input" type="text" v-model="value.name" v-localize:placeholder="title" :readonly="titleDisabled || disabled" />
+        <!--<ui-alias class="ui-form-header-title-alias" v-if="hasAlias" v-model="value.alias" :name="value.name" :disabled="disabled" />-->
         <!--<span v-localize="value.name || title"></span>-->
       </h2>
     </template>
@@ -58,6 +59,10 @@
       activeToggle: {
         type: Boolean,
         default: false
+      },
+      hasAlias: {
+        type: Boolean,
+        default: true
       }
     },
 
@@ -118,6 +123,11 @@
     }
   }
 
+  .ui-header-bar-title
+  {
+    position: relative;
+  }
+
   input[type="text"].ui-form-header-title-input
   {
     font-family: var(--font);
@@ -132,4 +142,17 @@
       border: 1px dashed var(--color-text-dim-one);
     }*/
   }
+
+  .ui-form-header-title-alias
+  {
+    position: absolute;
+    right: 10px;
+    top: 11px;
+    z-index: 2;
+
+    .ui-alias-lock
+    {
+      background: none;
+    }
+  }
 </style>

zero.Web.UI/App/editor/fields/alias.vue

@@ -0,0 +1,31 @@
+<template>
+  <ui-alias :value="value" :name="entity.name" @input="$emit('input', $event)" :max-length="maxLength" :disabled="disabled" />
+</template>
+
+
+<script>
+  export default {
+    props: {
+      value: {
+        type: String,
+        default: null
+      },
+      entity: {
+        type: Object,
+        required: true
+      },
+      config: Object,
+      disabled: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    computed: {
+      maxLength()
+      {
+        return this.config.maxLength > 0 ? this.config.maxLength : null;
+      }
+    }
+  }
+</script>

zero.Web.UI/App/renderers/country.js

@@ -19,6 +19,12 @@
       required: true,
       maxLength: 120
     },
+    {
+      field: 'alias',
+      display: 'alias',
+      label: '@ui.alias',
+      required: true
+    },
     {
       field: 'code',
       display: 'text',

zero.Web.UI/App/resources/utils.js

@@ -0,0 +1,11 @@
+import Axios from 'axios';
+
+const base = 'utils/';
+
+export default {
+
+  generateAlias(name)
+  {
+    return Axios.get(base + 'generateAlias', { params: { name } }).then(res => Promise.resolve(res.data));
+  }
+};

zero.Web/Controllers/UtilsController.cs

@@ -0,0 +1,13 @@
+using Microsoft.AspNetCore.Mvc;
+using zero.Core.Api;
+
+namespace zero.Web.Controllers
+{
+  public class UtilsController : BackofficeController
+  {
+    /// <summary>
+    /// Generate alias from name
+    /// </summary>  
+    public IActionResult GenerateAlias([FromQuery] string name) => Json(Safenames.Alias(name));
+  }
+}

zero.Web/Resources/Localization/zero.en-us.json

@@ -22,6 +22,7 @@
     "delete": "Delete",
     "default": "Default",
     "remove": "Remove",
+    "alias": "Alias",
     "pagination": {
       "xofy": "Page {x} of {y}",
       "next": "Next page",