🔀Merge branch 'feature/accordion' into develop

package.json

@@ -90,7 +90,7 @@
   "dependencies": {
     "@sentry/browser": "^6.13.2",
     "@sentry/integrations": "^6.13.2",
-    "@vue-unistra/formbuilder": "^3.0.18",
+    "@vue-unistra/formbuilder": "^3.0.19",
     "axios": "^0.21.4",
     "core-js": "^3.18.1",
     "hammerjs": "^2.0.8",

src/components/renderer/metadata/AccordionLayout.vue

+<template>
+  <v-expansion-panels tile flat>
+    <component
+        v-for="field in root.fields"
+        :key="field.id"
+        :is="field.component"
+        :root="field.data"
+    />
+  </v-expansion-panels>
+</template>
+
+<script>
+
+export default {
+  name: "AccordionRenderer",
+  props: {
+    root: Object
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/renderer/metadata/ColLayout.vue

@@ -20,6 +20,8 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+  dl {
+    padding-left: 24px;
+  }
 </style>

src/components/renderer/metadata/PanelLayout.vue

+<template>
+  <v-expansion-panel>
+    <v-expansion-panel-header>
+      <h3>{{ root.content }}</h3>
+    </v-expansion-panel-header>
+    <v-expansion-panel-content>
+      <component
+          v-for="field in root.fields"
+          :key="field.id"
+          :is="field.component"
+          :root="field.data"
+      />
+    </v-expansion-panel-content>
+  </v-expansion-panel>
+</template>
+
+<script>
+
+
+export default {
+  name: "PanelRenderer",
+  props: {
+    root: Object
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+  .v-expansion-panel-header {
+    padding: 0;
+  }
+</style>

src/components/renderer/metadata/Root.vue

@@ -10,17 +10,20 @@
 </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'
 import ContentLayout from '@/components/renderer/metadata/ContentLayout'
 import RowLayout from '@/components/renderer/metadata/RowLayout'
+import AccordionLayout from '@/components/renderer/metadata/AccordionLayout'
+import PanelLayout from '@/components/renderer/metadata/PanelLayout'
 
 const UsfToRendererMap = {
+  UsfAccordion: AccordionLayout,
   UsfCol: ColLayout,
-  UsfRow: RowLayout,
   UsfContent: ContentLayout,
+  UsfPanel: PanelLayout,
+  UsfRow: RowLayout,
 }
 
 export default {
@@ -30,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)
     },
@@ -112,6 +129,8 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+  dl {
+    padding-left: 24px;
+  }
 </style>

src/components/template/TemplateForm.vue

@@ -53,3 +53,12 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+
+#usf--builder::v-deep {
+  .v-expansion-panel-header {
+    padding: 0 0 0 8px;
+  }
+}
+</style>

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/store/template.js

@@ -53,9 +53,11 @@ const TEMPLATE_SCOPE = Object.freeze({
 })
 
 const LAYOUT_COMPONENTS = [
+  'Accordion',
   'Col',
+  'Content',
+  'Panel',
   'Row',
-  'Content'
 ].map(s => `Usf${s}`)
 
 const getPrivateFields = (fields, privateParent=false) => {

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) {

tests/unit/store/community.spec.js

@@ -49,17 +49,28 @@ describe('store/community', () => {
         })
       })
       describe('loadItem', () => {
-        beforeEach(async () => {
-          getStub.resolves({data: { id: objectId }})
-          await store.dispatch('community/loadItem', objectId)
-        })
-        it('should get item detail', () => {
+        it('should get item detail', async () => {
+          getStub.resolves({data: { id: objectId}})
+          await store.dispatch('community/loadItem', { itemId: objectId, withTemplate: false})
           expect(getStub.calledOnce, 'api call').to.be.true
           expect(getStub.firstCall.args[0]).to.equal(`items/${objectId}/`, 'url check')
         })
-        it('should load item with received data', () => {
+        it('should load item with received data', async () => {
+          getStub.resolves({data: { id: objectId}})
+          await store.dispatch('community/loadItem', { itemId: objectId, withTemplate: false})
           expect(store.getters['community/currentItem'].id).to.equal(objectId)
         })
+        it('should load template with received templateId if not specify', async () => {
+          const templateId = "xx"
+          const dispatchSpy = sinon.spy(store, 'dispatch')
+          getStub.resolves({data: { id: objectId, set: { templateId } }})
+          await store.dispatch('community/loadItem', { itemId: objectId})
+          expect(dispatchSpy.calledTwice, 'extra dispatch').to.be.true
+          const [action, param] = dispatchSpy.secondCall.args
+          dispatchSpy.restore()
+          expect(action).to.equal('community/loadTemplate', 'action check')
+          expect(param).to.equal(templateId, 'payload check')
+        })
       })
     })
     describe('lists', () => {