output details page for list spaces

zero.TestData/Lists/SocialContentRenderer.cs

@@ -15,11 +15,11 @@ namespace zero.TestData.Lists
       Field(x => x.IsVisible).Toggle();
       Field(x => x.xIconPicker).IconPicker();
       Field(x => x.xTextarea).Textarea();
-      Field(x => x.Addresses, required: true).Nested(new SocialAddressRenderer(), opts =>
-      {
-        opts.Limit = 5;
-        opts.AddLabel = "Add address";
-      });
+      //Field(x => x.Addresses, required: true).Nested(new SocialAddressRenderer(), opts =>
+      //{
+      //  opts.Limit = 5;
+      //  opts.AddLabel = "Add address";
+      //});
       Field(x => x.xRte).Rte();
       Field(x => x.xMedia).Media(opts => opts.Type = MediaOptionsType.Image);
       Field(x => x.xTextarea).Output();

zero.TestData/Lists/TeamMemberRenderer.cs

@@ -7,8 +7,8 @@ namespace zero.TestData.Lists
   {
     public TeamMemberRenderer()
     {
-      LabelTemplate = "@team.fields.{0}";
-      DescriptionTemplate = "@team.fields.{0}_text";
+      LabelTemplate = "@_test.fields.{0}";
+      DescriptionTemplate = "@_test.fields.{0}_text";
 
       Validator = new TeamMemberValidator();
 
@@ -30,15 +30,16 @@ namespace zero.TestData.Lists
   {
     public AddressRenderer()
     {
-      LabelTemplate = "@team.fields.address.{0}";
+      LabelTemplate = "@_test.fields.address.{0}";
+      DescriptionTemplate = "@{0}";
 
       Field(x => x.City, required: true).Text();
       Field(x => x.Street).Text();
       Field(x => x.No).Text(opts => opts.Classes.Add("is-short"));
-      Field(x => x.CountryId).Custom("plugins/countryPicker/countrypicker", () => new
-      {
-        startId = 107
-      });
+      //Field(x => x.CountryId).Custom("plugins/countryPicker/countrypicker", () => new
+      //{
+      //  startId = 107
+      //});
     }
   }
 

zero.Web/App/Components/Forms/form.vue

@@ -40,6 +40,10 @@
     }),
 
     watch: {
+      '$route': function ()
+      {
+        this.$emit('load', this);
+      },
       state(val)
       {
         this.slotProps.state = val;

zero.Web/App/Pages/spaces/routes.js

@@ -6,12 +6,12 @@ let routes = [];
 
 if (section)
 {
-  //routes.push({
-  //  path: 'edit/:id',
-  //  props: true,
-  //  name: 'spaceitem',
-  //  component: () => import('zero/pages/' + alias + '/item')
-  //});
+  routes.push({
+    path: ':alias/edit/:id',
+    props: true,
+    name: 'space-item',
+    component: () => import('zero/pages/' + alias + '/spaces')
+  });
 
   routes.push({
     path: ':alias',

zero.Web/App/Pages/spaces/spaces.vue

@@ -90,7 +90,7 @@
 
         this.space = _find(this.spaces, space => space.alias === this.$route.params.alias);
 
-        if (this.space.view === 'editor')
+        if (this.space.view === 'editor' || this.$route.params.id)
         {
           this.component = SpaceEditor;
         }

zero.Web/App/Pages/spaces/views/editor.vue

@@ -1,20 +1,21 @@
 <template>
   <ui-form ref="form" class="space-editor" v-slot="form" @submit="onSubmit" @load="onLoad">
-    <ui-header-bar :title="space.name" title-empty="Space">
-      <!--<ui-dropdown align="right" v-if="!disabled">
+    <ui-header-bar :back-button="isList" :title="title" title-empty="Space">
+      <ui-dropdown v-if="isList && !disabled" align="right">
         <template v-slot:button>
           <ui-button type="light" label="@ui.actions" caret="down" />
         </template>
         <ui-dropdown-list v-model="actions" />
-      </ui-dropdown>-->
+      </ui-dropdown>
       <ui-button :submit="true" label="@ui.save" icon="fth-check" :state="form.state" v-if="!disabled" />
     </ui-header-bar>
-    <ui-editor />
+    <ui-editor v-if="renderer" :config="renderer" />
   </ui-form>
 </template>
 
 
 <script>
+  import Axios from 'axios';
   import SpacesApi from 'zero/resources/spaces.js';
   import UiEditor from 'zero/editor/editor';
 
@@ -25,11 +26,19 @@
 
     data: () => ({
       disabled: false,
+      renderer: {},
       actions: []
     }),
 
-    watch: {
-      '$route': 'load'
+    computed: {
+      isList()
+      {
+        return !!this.$route.params.id;
+      },
+      title()
+      {
+        return this.isList ? 'My item' : this.space.name;
+      }
     },
 
     created()
@@ -45,7 +54,10 @@
 
       onLoad(form)
       {
-        
+        form.load(Axios.get('test/getRenderer', { params: { alias: this.$route.params.alias } })).then(response =>
+        {
+          this.renderer = response.data;
+        });
       },
 
 

zero.Web/App/Pages/spaces/views/list.vue

@@ -40,7 +40,15 @@
           columns: {
             name: {
               as: 'text',
-              label: '@ui.name'
+              label: '@ui.name',
+              bold: true,
+              link: item =>
+              {
+                return {
+                  name: 'space-item',
+                  params: { alias: this.space.alias, id: item.id }
+                };
+              }
             },
             createdDate: {
               as: 'date',

zero.Web/App/editor/editor.vue

@@ -3,7 +3,9 @@
     <ui-tab v-if="hasTabs" class="ui-box" :label="component.params.name" v-for="component in components">
       <editor-component v-for="child in component.components" v-model="model[child.params.field]" :component="child" />
     </ui-tab>
-    <editor-component v-if="!hasTabs" v-for="component in components" v-model="model[component.params.field]" :component="component" />
+    <div v-if="!hasTabs" class="ui-box">
+      <editor-component v-for="component in components" v-model="model[component.params.field]" :component="component" />
+    </div>
   </component>
 </template>
 
@@ -15,6 +17,13 @@
   export default {
     name: 'uiEditor',
 
+    props: {
+      config: {
+        type: Object,
+        required: true
+      }
+    },
+
     components: { EditorComponent },
 
     data: () => ({
@@ -34,25 +43,40 @@
     },
 
     watch: {
+      config: {
+        deep: true,
+        handler: function()
+        {
+          this.load();
+        }
+      },
       model: {
         deep: true,
         handler: function()
         {
-          console.info('change:editor')
-          console.table(JSON.parse(JSON.stringify(this.model)));
+          //console.info('change:editor')
+          //console.table(JSON.parse(JSON.stringify(this.model)));
         }
       }
     },  
 
     created()
     {
-      Axios.get('test/renderConfig').then(res =>
+      this.load(); 
+    },
+
+    methods: {
+
+      load()
       {
-        this.components = res.data.components;
+        if (!this.config.components)
+        {
+          return;
+        }
+        this.components = this.config.components;
         this.hasTabs = this.components.length > 0 && this.components[0].method === 'tab';
         this.loaded = true;
-        console.info(JSON.parse(JSON.stringify(this.components)));
-      });
+      }
     }
   }
 </script>

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

@@ -228,6 +228,11 @@
 
   "_test": {
     "fields": {
+      "name": "Name",
+      "position": "Position",
+      "image": "Image",
+      "email": "Email",
+      "videoUri": "Video URL",
       "isvisible": "Visible",
       "facebook": "Facebook",
       "facebook_text": "Link to facebook page",