start locking ability for properties

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

@@ -34,7 +34,7 @@
 
     data: () => ({
       dirty: false,
-      loadingState: 'default',
+      loadingState: 'loading',
       loadingError: null,
       state: 'default',
       errors: [],
@@ -106,8 +106,6 @@
             .then(
               response =>
               {
-                this.loadingState = 'default';
-
                 if (response.meta && typeof response.meta.canEdit === 'boolean')
                 {
                   this.canEdit = response.meta.canEdit;
@@ -124,6 +122,12 @@
                 }
 
                 resolve(response);
+
+                this.loadingState = 'default';
+                this.$nextTick(() =>
+                {
+                  this.$emit('loaded', this);
+                });
               },
               (error) =>
               {

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="ui-property" :class="{'is-vertical': vertical, 'is-text': isText, 'hide-label': hideLabel }">
+  <div class="ui-property" :class="{'is-vertical': vertical, 'is-text': isText, 'hide-label': hideLabel, 'is-locked': locked }">
     <label v-if="label && !hideLabel" class="ui-property-label" :for="field">
       <span v-localize="label"></span>
       <strong class="ui-property-required" v-if="required">*</strong>
@@ -7,11 +7,12 @@
       <small v-if="description" v-localize="description"></small>
     </label>
 
-    <div class="ui-property-content">    
+    <div class="ui-property-content">
       <slot></slot>
       <ui-error v-if="field" :field="field" />
     </div>
 
+    <button type="button" class="ui-property-lock" v-if="locked"></button>
   </div>
 </template>
 
@@ -28,6 +29,17 @@
       required: Boolean,
       vertical: Boolean,
       isText: Boolean
+    },
+
+    data: () => ({
+      locked: false
+    }),
+
+    methods: {
+      setLocked(isLocked)
+      {
+        this.locked = isLocked;
+      }
     }
   }
 </script>
@@ -184,4 +196,28 @@
       margin-left: 50px;
     }
   }
+
+  /*.ui-property.is-locked
+  {
+
+  }*/
+
+  /*.ui-property-lock
+  {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 3;
+    background: transparent;
+    width: 100%;
+    cursor: default;
+    border-right: 3px solid var(--color-primary);
+
+    &:after
+    {
+      content: ''
+    }
+  }*/
 </style>

zero.Web.UI/App/editor/editor-aside.vue

@@ -4,7 +4,7 @@
     <slot name="info-boxes"></slot>
     <div class="ui-box editor-active-toggle" v-if="activeToggle" :class="{'is-active': value.isActive }">
       <slot name="settings">
-        <ui-property v-if="activeToggle" label="@ui.active" :is-text="true" class="is-toggle">
+        <ui-property v-if="activeToggle" field="isActive" label="@ui.active" :is-text="true" class="is-toggle">
           <ui-toggle v-model="value.isActive" class="is-primary" :disabled="disabled" />
         </ui-property>
       </slot>
@@ -12,10 +12,10 @@
     </div>
     <div class="ui-box is-light" v-if="value.id">
       <slot name="infos">
-        <ui-property v-if="value.id && value.lastModifiedDate" label="@ui.modifiedDate" :is-text="true">
+        <ui-property v-if="value.id && value.lastModifiedDate"  field="lastModifiedDate" label="@ui.modifiedDate" :is-text="true">
           <ui-date v-model="value.lastModifiedDate" />
         </ui-property>
-        <ui-property v-if="value.id" label="@ui.createdDate" :is-text="true">
+        <ui-property v-if="value.id" label="@ui.createdDate" field="createdDate" :is-text="true">
           <ui-date v-model="value.createdDate" />
         </ui-property>
         <slot name="infos-more"></slot>