accordian and basic listing

collective · Sep 24, 2024 · a3d8e50 · a3d8e50
1 parent 3b7d6a3
commit a3d8e50
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git a/examples/hydra-vue-f7/src/components/block.vue b/examples/hydra-vue-f7/src/components/block.vue
@@ -1,8 +1,11 @@
 <template>
-    <div v-if="block['@type']=='slate'" :data-block-uid="block_uid" data-editable-field="value">
+    <div v-if="block['@type']=='slate' || block['@type']=='introduction'" :data-block-uid="block_uid" data-editable-field="value">
         <RichText v-for="node in block['value']" :key="node" :node="node" />
     </div>
     <!-- <f7-block-title v-else-if="block['@type']=='title'" :data-block-uid="block_uid">{{ data.title}}</f7-block-title> -->
+    <template v-else-if="block['@type']=='title'" :data-block-uid="block_uid">
+        <!-- Hide titles for now -->
+    </template>
     <f7-block v-else-if="block['@type']=='image'" :data-block-uid="block_uid">
         <img v-for="props in [imageProps(block)]" :src="props.url" :class="['image-size-'+props.size, 'image-align-'+props.align]" />
     </f7-block>
@@ -46,15 +49,26 @@
       </swiper-slide >
     </swiper-container>
     <hr v-else-if="block['@type']=='separator'" :data-block-uid="block_uid"></hr>
-    <f7-list strong  inset-md accordion-list  v-else-if="block['@type']=='accordian'" :data-block-uid="block_uid">
-      <f7-list-item v-for="block in blocks" accordion-item :title="block.title" :data-block-uid="block_uid">
+    <f7-list v-else-if="block['@type']=='accordion'" strong outline-ios dividers-ios inset-md accordion-list  :data-block-uid="block_uid">
+      <f7-list-item v-for="panel_uid in block.data.blocks_layout.items" accordion-item :opened="!block['collapsed']" :title="block.data.blocks[panel_uid]?.title" :data-block-uid="panel_uid">
         <f7-accordion-content>
           <f7-block>
-            <div v-for="uid in block.blocks_layout.items"><Block :block_uid="uid" :block="block.blocks[uid]" :data="data"></Block></div>
+            <template v-for="uid in block.data.blocks[panel_uid]?.blocks_layout.items"><Block :block_uid="uid" :block="block.data.blocks[panel_uid].blocks[uid]" :data="data"></Block></template>
           </f7-block>
         </f7-accordion-content>
       </f7-list-item>
     </f7-list>
+    <f7-list v-else-if="block['@type']=='listing'" media-list dividers-ios strong-ios outline-ios>
+      <template  v-for="(item) in data['items']" >
+        <f7-list-item :title="item.title" :subtitle="item.description" :link="getUrl(item)"/>
+      </template>
+    </f7-list>
+
+    <f7-block v-else :data-block-uid="block_uid">
+      {{ 'Not implemented Block: @type=' + block['@type'] }}
+      <pre>{{ block }}</pre>
+    </f7-block>
+
 </template>
 <script>
   import RichText from './richtext.vue';

diff --git a/examples/hydra-vue-f7/src/js/routes.js b/examples/hydra-vue-f7/src/js/routes.js
@@ -26,7 +26,8 @@ var routes = [
       if (token) {
         headers = {'Authorization': 'Bearer '+token};
       };
-      const api = "https://hydra-api.pretagov.com/++api++"+path+"?expand=breadcrumbs,navroot,navigation&expand.navigation.depth=2"
+      const api = "https://hydra-api.pretagov.com/++api++"+path+"?expand=breadcrumbs,navroot,navigation&b_size=25&b_start=0&expand.navigation.depth=3"
+
       axios.get(api, {headers}).then((response) => {
         app.store.state.content = response.data;
         app.store.state.navigation = response.data["@components"].navigation.items;