[SDPA-2727] Added support for custom modules (#437)

* [SDPA-2727] Added support for custom modules

* Added support fow allowing no tide folder in project

examples/vic-gov-au/components/examples/Button.vue

@@ -0,0 +1,18 @@
+<template>
+  <!-- Override the template if need-->
+  <button class="example-button"><slot></slot></button>
+</template>
+
+<script>
+// Extend Ripple component if need. https://vuejs.org/v2/api/#extends
+// Please be careful as extending will introduce complexity in maintenance.
+import RplButton from '@dpc-sdp/ripple-button'
+
+export default {
+  extends: RplButton,
+  name: 'ExampleButton',
+  created: function () {
+    console.log('Extending works.')
+  }
+}
+</script>

examples/vic-gov-au/components/examples/Message.vue

@@ -0,0 +1,12 @@
+<template>
+  <h1>{{text}}</h1>
+</template>
+
+<script>
+export default {
+  name: 'exampleMessage',
+  props: {
+    text: String
+  }
+}
+</script>

examples/vic-gov-au/example.env

@@ -22,5 +22,5 @@ SEARCH_AUTH_PASSWORD=
 # Disable basic auth in local env.
 BASIC_AUTH=1
 
-# Set root path to current directory for appDir alias
-APP_ROOT_PATH=.
+# Show tide debug log, please use it in local env only.
+TIDE_DEBUG=1

examples/vic-gov-au/nuxt.config.js

@@ -1,10 +1,7 @@
-// Custom tide config & filters.
-const tideConfig = require('./tide/tide.config')
-const tideFilters = require('./tide/tide.mapping-filters')
-
 require('dotenv').config()
 
 process.env.DEBUG = 'nuxt:*' // display nuxt.js logs
+process.env.APP_ROOT_PATH = '.' // Set the example app root path, for this example app config only.
 
 export default {
 
@@ -80,15 +77,13 @@ export default {
       password: process.env.CONTENT_API_AUTH_PASS
     },
     site: 4,
-    customConfig: tideConfig,
-    customFilters: tideFilters,
     // Tide submodules, 1 for enable, 0 for disable.
     modules: {
       site: 1,
       // Content types
       page: 1,
       landingPage: 1,
-      event: 1,
+      event: 0, // Disable for testing it in custom module.
       news: 1,
       grant: 1,
       profile: 1,
@@ -97,7 +92,6 @@ export default {
       media: 1,
       webform: 1,
       search: 1,
-      monsido: 0,
       authenticatedContent: 1,
       dataDrivenComponent: 1,
       alert: 1,

examples/vic-gov-au/pages/examples/extend-component.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <h1>Example for extending component</h1>
+    <example-button href="#" theme="primary" >Extending RplButton</example-button>
+  </div>
+</template>
+
+<script>
+import ExampleButton from './../../components/examples/Button'
+export default {
+  components: {
+    ExampleButton
+  },
+  layout: 'minimal'
+}
+</script>

examples/vic-gov-au/tide/modules/event/formdata.js

@@ -0,0 +1,115 @@
+export default {
+  getFormData: async setFilterOptions => {
+    const eventCategoryValues = await setFilterOptions({
+      fieldName: 'field_event_category_name'
+    })
+    const eventNameValues = await setFilterOptions({
+      fieldName: 'field_event_details_event_requirements_name'
+    })
+    return {
+      title: "What's on in Victoria",
+      searchPlaceholder: 'Search by keyword or location',
+      theme: 'light',
+      allowBlank: true,
+      filterForm: {
+        tideId: 'tide_search_form',
+        tag: 'rpl-fieldset',
+        model: {
+          // Multi-value fields should always be an array.
+          field_event_category_name: [],
+          field_event_date_end_value: '',
+          location: '',
+          field_event_details_event_requirements_name: []
+        },
+        schema: {
+          groups: [
+            {
+              fields: [
+                {
+                  type: 'rplchecklist',
+                  styleClasses: ['form-group--col-two'],
+                  label: 'Select an event category',
+                  model: 'field_event_category_name',
+                  values: eventCategoryValues,
+                  placeholder: 'Select a topic',
+                  // TODO: Update 'filter' key to 'query' to make purpose clearer.
+                  filter: {
+                    type: 'term',
+                    operator: ''
+                  }
+                },
+                {
+                  type: 'input',
+                  inputType: 'text',
+                  maxlength: 50,
+                  styleClasses: ['form-group--col-two'],
+                  label: 'Location',
+                  model: 'location',
+                  placeholder: 'Start typing suburb or postcode...',
+                  filter: {
+                    type: 'multiMatch',
+                    operator: '',
+                    fields: [
+                      'field_event_details_event_locality',
+                      'field_event_details_event_postal_code'
+                    ]
+                  }
+                }
+              ]
+            },
+            {
+              fields: [
+                {
+                  type: 'rpldatepicker',
+                  ranged: false,
+                  styleClasses: ['form-group--col-two'],
+                  label: 'Select an event date',
+                  model: 'field_event_date_end_value',
+                  placeholder: 'DD/MM/YYYY',
+                  filter: {
+                    type: 'date',
+                    operator: 'lte'
+                  }
+                },
+                {
+                  type: 'rplchecklist',
+                  label: 'Event requirements',
+                  styleClasses: ['form-group--col-two'],
+                  model: 'field_event_details_event_requirements_name',
+                  // TODO: There are no values for this field how can we programmactically hide a field in this instance.
+                  values: eventNameValues,
+                  placeholder: 'Please select',
+                  filter: {
+                    type: 'term',
+                    operator: ''
+                  }
+                }
+              ]
+            },
+            {
+              fields: [
+                {
+                  type: 'rplsubmitloader',
+                  buttonText: 'Apply change',
+                  loading: false,
+                  autoUpdate: true,
+                  styleClasses: ['form-group--inline']
+                },
+                {
+                  type: 'rplclearform',
+                  buttonText: 'Clear search filters',
+                  styleClasses: ['form-group--inline']
+                }
+              ]
+            }
+          ]
+        },
+        formOptions: {
+          validateAfterLoad: false,
+          validateAfterChanged: false
+        },
+        formState: {}
+      }
+    }
+  }
+}

examples/vic-gov-au/tide/modules/event/helpers.js

@@ -0,0 +1,18 @@
+import { latestEvents } from './mapping-fetchers'
+
+export const getCardCarouselEvents = async (mapping) => {
+  // A little hack here to change latst event query limit to 9 for card carousel.
+  latestEvents.args[3] = {
+    offset: 0,
+    limit: 9
+  }
+  return mapping.filter(mapping.fetch(latestEvents), ['eventLatestEvents']).then(cards => {
+    // Reassemble the data with a component name data structure so we can render them by vue dynamic components.
+    return cards.map(card => {
+      return {
+        name: 'rpl-card-event',
+        data: card
+      }
+    })
+  })
+}

examples/vic-gov-au/tide/modules/event/mapping-fetchers.js

@@ -0,0 +1,41 @@
+// This file provides fetcher objects for our mapping to fetch data from Tide API.
+// const moment = require('moment-timezone')
+
+module.exports = {
+  latestEvents: {
+    method: 'getContentList',
+    args: [
+      'event',
+      {
+        // TODO: https://digital-engagement.atlassian.net/browse/SDPA-1938
+        // 'date-filter': {
+        //   condition: {
+        //     path: 'field_event_details.0.field_paragraph_date_range.end_value',
+        //     operator: '>',
+        //     value: moment().tz('Australia/Melbourne').format()
+        //   }
+        // }
+      },
+      [
+        'field_event_details',
+        'field_featured_image',
+        'field_featured_image.field_media_image'
+      ],
+      {
+        offset: 0,
+        limit: 6
+      },
+      {
+        'sort-end': {
+          path: 'field_event_details.0.field_paragraph_date_range.end_value'
+        },
+        'sort-start': {
+          path: 'field_event_details.0.field_paragraph_date_range.value'
+        }
+      },
+      {
+        allPages: false
+      }
+    ]
+  }
+}

examples/vic-gov-au/tide/modules/event/mapping-filters.js

@@ -0,0 +1,48 @@
+// Filters for adding extra process on a mapping value
+
+// Create more filters if need.
+module.exports = {
+  eventLatestEvents: async (list, { mapping }) => {
+    try {
+      const latestEvents = await list
+      return latestEvents.map(item => {
+        const location = mapping.parseField(['field_event_details', 0, 'field_paragraph_location'], item)
+        return {
+          image: mapping.parseField(['field_featured_image', 'field_media_image', 'url'], item),
+          dateStart: mapping.parseField(['field_event_details', 0, 'field_paragraph_date_range', 'value'], item),
+          dateEnd: mapping.parseField(['field_event_details', 0, 'field_paragraph_date_range', 'end_value'], item),
+          location: mapping.filter(location, ['paragraphLocation']),
+          title: item.title,
+          summary: item.field_landing_page_summary,
+          link: { text: 'See event details', url: item.path.url }
+        }
+      })
+    } catch (err) {
+      // TODO: log error to log system when ops got it.
+      // console.log(err)
+      return []
+    }
+  },
+
+  eventCtaCard: (fieldParagraphCtaCardEvent, { mapping }) => {
+    if (!fieldParagraphCtaCardEvent.field_paragraph_cta) {
+      return null
+    }
+
+    let image = ''
+    if (fieldParagraphCtaCardEvent.field_paragraph_media) {
+      const media = fieldParagraphCtaCardEvent.field_paragraph_media
+      if (media.field_media_image) {
+        image = media.field_media_image.url || media.field_media_image.uri
+      }
+    }
+
+    const link = mapping.parseField('field_paragraph_cta', fieldParagraphCtaCardEvent)
+    return {
+      image: image,
+      title: fieldParagraphCtaCardEvent.field_paragraph_title,
+      summary: mapping.parseField(['field_paragraph_body', 'processed'], fieldParagraphCtaCardEvent),
+      link: mapping.filter(link, ['paragraphCta'])
+    }
+  }
+}

examples/vic-gov-au/tide/modules/event/module.js

@@ -0,0 +1,9 @@
+module.exports = function () {
+  this.extendRoutes((routes, resolve) => {
+    routes.push({
+      name: 'tidewhatson',
+      path: '/whatson',
+      component: '~/tide/modules/event/pages/search.vue'
+    })
+  })
+}