💄plug metadata renderer on public

src/components/renderer/metadata/Root.vue

@@ -10,7 +10,6 @@
 </template>
 
 <script>
-import {mapGetters} from 'vuex'
 import { LAYOUT_COMPONENTS } from '@/store/template'
 import FieldRenderer from '@/components/renderer/metadata/FieldRenderer'
 import ColLayout from '@/components/renderer/metadata/ColLayout'
@@ -34,10 +33,24 @@ export default {
       type: Boolean,
       default: false
     },
+    onPublic: {
+      type: Boolean,
+      default: false
+    }
   },
   computed: {
-    ...mapGetters('item', {item: 'current'}),
-    ...mapGetters('template', { root: 'current' }),
+    item() {
+      return this.$store.getters[this.onPublic
+          ? 'community/currentItem'
+          : 'item/current'
+      ]
+    },
+    root() {
+      return this.$store.getters[this.onPublic
+          ? 'community/currentTemplate'
+          : 'template/current'
+      ]
+    },
     populatedTemplate() {
       return this.cleanFields(this.root.fields)
     },

src/store/community.js

@@ -16,6 +16,12 @@ export const initialPublicState = {
       l: null,
     },
   },
+  currentTemplate: {
+    id: '',
+    name: '',
+    fields: [],
+    messages: {}
+  },
   projectList: {
     pageContent: [],
     total: 0,
@@ -67,6 +73,7 @@ const Community = {
   state: cloneDeep(initialPublicState),
   getters: {
     currentProject: state => state.currentProject,
+    currentTemplate: state => state.currentTemplate,
     projectList: state => state.projectList,
     currentSet: state => state.currentSet,
     setList: state => state.setList,
@@ -95,6 +102,9 @@ const Community = {
     LOAD_ITEM_LIST(state, itemList) {
       state.itemList = itemList
     },
+    LOAD_TEMPLATE(state, template) {
+      state.currentTemplate = template
+    },
     RESET_STATE(state) {
       Object.assign(state, initialPublicState);
     },
@@ -134,10 +144,13 @@ const Community = {
             commit('LOAD_SET_LIST', {pageContent, pageCount, total})
           })
     },
-    loadItem({commit}, itemId) {
+    loadItem({commit, dispatch}, {itemId, withTemplate = true}) {
       return axios.get(`items/${itemId}/`)
           .then(response => {
             commit('LOAD_ITEM', response.data)
+            if (withTemplate) {
+              return dispatch('loadTemplate', response.data.set.templateId)
+            }
           })
     },
     loadItemList({commit}, {setId, item_ids, page=1, size=DEFAULT_PAGE_SIZE}) {
@@ -147,6 +160,12 @@ const Community = {
             commit('LOAD_ITEM_LIST', {pageContent, pageCount, total})
           })
     },
+    loadTemplate({commit}, templateId) {
+      return axios.get(`template/${templateId}`)
+          .then(response => {
+            commit('LOAD_TEMPLATE', response.data)
+          })
+    },
     resetPublicState({ commit }) {
       commit('RESET_STATE');
     },

src/views/items/ItemPublic.vue

@@ -53,28 +53,33 @@
               {{ $t('item.metadata') }}
             </v-toolbar-title>
           </v-toolbar>
-          <div class="pa-2">
-            <dl>
-              <template
-                v-for="data in item.metadata"
-              >
-                <dt :key="`metadata-title-${data.id}`">{{ data.name | capitalize }}</dt>
-                <dd :key="`metadata-value-${data.id}`">
-                  <ul v-if="Array.isArray(data.value) && data.value.length > 1">
-                    <li
-                      v-for="(value, index) in data.value"
-                      :key="`${data.name}-${index}`"
-                    >
-                      {{ value }}
-                    </li>
-                  </ul>
-                  <template v-else>
-                    {{ Array.isArray(data.value) ? data.value[0] : data.value }}
-                  </template>
-                </dd>
-              </template>
-            </dl>
-          </div>
+
+          <item-meta-data-renderer
+            class="pa-2"
+            :on-public="true"
+          />
+<!--          <div class="pa-2">-->
+<!--            <dl>-->
+<!--              <template-->
+<!--                v-for="data in item.metadata"-->
+<!--              >-->
+<!--                <dt :key="`metadata-title-${data.id}`">{{ data.name | capitalize }}</dt>-->
+<!--                <dd :key="`metadata-value-${data.id}`">-->
+<!--                  <ul v-if="Array.isArray(data.value) && data.value.length > 1">-->
+<!--                    <li-->
+<!--                      v-for="(value, index) in data.value"-->
+<!--                      :key="`${data.name}-${index}`"-->
+<!--                    >-->
+<!--                      {{ value }}-->
+<!--                    </li>-->
+<!--                  </ul>-->
+<!--                  <template v-else>-->
+<!--                    {{ Array.isArray(data.value) ? data.value[0] : data.value }}-->
+<!--                  </template>-->
+<!--                </dd>-->
+<!--              </template>-->
+<!--            </dl>-->
+<!--          </div>-->
         </v-col>
       </v-row>
     </v-sheet>
@@ -87,6 +92,7 @@ import store from '@/store';
 import { mapState, mapGetters, mapActions } from 'vuex';
 import MobileMixin from '@/mixins/MobileMixin';
 import CrudItemHeader from '@/components/crud/CrudItemHeader';
+import ItemMetaDataRenderer from '@/components/renderer/metadata/Root'
 
 export default {
   name: 'ItemPublic',
@@ -122,6 +128,7 @@ export default {
   components: {
     VContainer,
     CrudItemHeader,
+    ItemMetaDataRenderer,
   },
   computed: {
     ...mapState('community', ['currentItem']),
@@ -173,8 +180,11 @@ export default {
     ...mapActions('community', ['resetPublicState']),
   },
   beforeRouteEnter(to, from, next) {
-    store
-      .dispatch('community/loadItem', to.params.itemId)
+    store.dispatch(
+        'community/loadItem',
+        {
+          itemId: to.params.itemId,
+        })
       .then(() => next());
   },
   beforeRouteLeave(to, from, next) {