@worksafevictoria/wcl7.5 1.0.0

package/src/components/Paragraphs/Directory/index.vue

@@ -0,0 +1,334 @@
+<template>
+  <section-group class="paragraph--directory">
+    <template v-slot:preContent>
+      <directory-filters
+        v-if="showFilters"
+        :bundle="options.field_directory_type"
+        :filters="filters"
+        :results="total"
+        @onSearch="updateSearch($event)"
+        @onLocation="updateLocation($event)"
+        @onFilter="updateFilters($event)"
+        @onSort="updateSort($event)"
+        @locationCleared="resetSortLabels()"
+        @onReset="resetSearchFilters()"
+      />
+    </template>
+    <template v-slot:content>
+      <div v-if="!loading || qs.start > 0" ref="records">
+        <records
+          v-if="records.length > 0"
+          :items="records"
+          :taxonomies="filters.taxonomies"
+          :base-location="baseLocation"
+        />
+      </div>
+      <div v-else class="paragraph--directory__loading-container">
+        <loading />
+      </div>
+      <div v-if="showPagination" align="center">
+        <pagination
+          align="center"
+          aria-label="Page navigation to load more records"
+          :rows="qs.rows"
+          :offset="qs.start"
+          :total="total"
+          :max-pages="5"
+          @prev="loadPrevPage()"
+          @next="loadNextPage()"
+          @pageClicked="loadByPageNumber($event)"
+        />
+      </div>
+      <div v-if="noResultsFound" align="center">
+        <div>
+          <p>No records found, please try a different search.</p>
+        </div>
+      </div>
+    </template>
+  </section-group>
+</template>
+<script>
+import { DIR_CONFIG } from './constants'
+import DirectoryFilters from '../../Global/DirectoryFilters'
+import Records from './Records/'
+import Pagination from '../../SubComponents/Pagination'
+import Loading from '../../SubComponents/Loading'
+import SectionGroup from '../../Containers/SectionGroup/index.vue'
+
+export default {
+  name: 'Directory',
+  components: {
+    DirectoryFilters,
+    Records,
+    Pagination,
+    Loading,
+    SectionGroup
+  },
+  props: {
+    options: {
+      type: Object,
+      default: () => {}
+    },
+    fetchFilters: {
+      type: Function,
+      required: true
+    },
+    fetchRecords: {
+      type: Function,
+      required: true
+    }
+  },
+  async fetch() {
+    await this.loadFilters(
+      this.DIR_CONFIG[this.options.field_directory_type].taxonomies
+    )
+    this.loadSortOptions(
+      this.DIR_CONFIG[this.options.field_directory_type].sorting
+    )
+  },
+  fetchOnServer: true,
+  fetchKey: 'ws-directory',
+  data() {
+    return {
+      DIR_CONFIG,
+      filters: {
+        taxonomies: [],
+        sorting: []
+      },
+      selectedFilters: {},
+      qs: {
+        record_type: this.options.field_directory_type,
+        rows: this.options.field_directory_rows,
+        start: 0,
+        ...this.defaultSortOrderOption(this.options.field_directory_type)
+      },
+      records: [],
+      total: 0,
+      loading: true
+    }
+  },
+  computed: {
+    apiUrl() {
+      return Object.keys(this.qs)
+        .map(
+          (k) => `${encodeURIComponent(k)}=${encodeURIComponent(this.qs[k])}`
+        )
+        .join('&')
+    },
+    hasMorePages() {
+      return (
+        !this.loading &&
+        this.total !== 0 &&
+        this.total > this.qs.start + this.qs.rows
+      )
+    },
+    noResultsFound() {
+      return this.records.length === 0 && !this.loading
+    },
+    showFilters() {
+      return this.options?.field_directory_exposefilters === 'full'
+        ? true
+        : false
+    },
+    showPagination() {
+      return !this.noResultsFound && this.total > this.qs.rows
+    },
+    baseLocation() {
+      return this.qs.lat && this.qs.lon
+        ? { lat: this.qs.lat, lng: this.qs.lon }
+        : false
+    }
+  },
+  watch: {
+    apiUrl: {
+      immediate: true,
+      deep: false,
+      handler() {
+        this.getData()
+      }
+    },
+    selectedFilters: {
+      immediate: false,
+      deep: true,
+      handler() {
+        //
+        // Set page number to 0
+        //
+        this.qs.start = 0
+        //
+        // Check for search
+        //
+        if (this.selectedFilters.query) {
+          this.$set(this.qs, 'query', this.selectedFilters.query)
+        } else {
+          this.$delete(this.qs, 'query')
+        }
+        //
+        // Sort by Date and AZ
+        //
+        if (this.selectedFilters?.sorting?.order) {
+          this.qs.sort = this.selectedFilters.sorting.order.field
+          this.qs.order = this.selectedFilters.sorting.order.value
+        } else {
+          const sortOrderDefaults = this.defaultSortOrderOption(
+            this.qs.record_type
+          )
+          this.qs.sort = sortOrderDefaults.sort
+          this.qs.order = sortOrderDefaults.order
+        }
+        //
+        // Filter by taxonomies
+        //
+        if (this.selectedFilters.filters) {
+          Object.keys(this.selectedFilters.filters).forEach((filterName) => {
+            if (Array.isArray(this.selectedFilters.filters[filterName])) {
+              if (this.selectedFilters.filters[filterName]) {
+                this.$set(this.qs, filterName, [])
+                this.selectedFilters.filters[filterName].forEach((item) => {
+                  if (item.tid) {
+                    this.qs[filterName].push(item.tid)
+                  }
+                })
+              }
+            }
+          })
+        }
+        //
+        // Search by Location - wait a tick for it to be updated
+        //
+        if (this.selectedFilters.location?.location) {
+          this.qs.sort = 'distance'
+          this.$set(this.qs, 'lat', this.selectedFilters.location.location.lat)
+          this.$set(this.qs, 'lon', this.selectedFilters.location.location.lng)
+        } else {
+          this.$delete(this.qs, 'lat')
+          this.$delete(this.qs, 'lon')
+        }
+      }
+    }
+  },
+  methods: {
+    async getData() {
+      this.loading = true
+      const data = await this.fetchRecords(this.qs)
+      if (data) {
+        this.records = data.results
+        this.loading = false
+        this.total = data.numFound
+      }
+    },
+    async loadFilters(taxonomyList) {
+      return Promise.all(
+        taxonomyList.map(async (taxonomy) => {
+          const taxonomies = await this.fetchFilters(
+            taxonomy.id,
+            taxonomy.record_id,
+            taxonomy.name
+          )
+          this.filters.taxonomies.push(taxonomies)
+          return Promise.resolve(taxonomies)
+        })
+      )
+    },
+    loadSortOptions(sortingList) {
+      let opts = {
+        name: 'order',
+        title: 'Sort by',
+        terms: []
+      }
+      sortingList.forEach((sortOption) => {
+        opts.terms.push({
+          title: sortOption.label,
+          value: sortOption.order,
+          field: sortOption.field,
+          parent: sortOption.type
+        })
+      })
+      this.filters.sorting.push(opts)
+    },
+    defaultSortOrderOption(bundle) {
+      if (bundle === 'prs') {
+        return { sort: 'record_prs_dateoutcome', order: 'desc' }
+      } else {
+        return {
+          sort: 'record_title',
+          order: 'asc'
+        }
+      }
+    },
+    updateFilters(opts) {
+      this.$set(this.selectedFilters, 'filters', opts)
+    },
+    updateSort(opts) {
+      this.$set(this.selectedFilters, 'sorting', opts)
+    },
+    updateSearch(opts) {
+      this.$set(this.selectedFilters, 'query', opts)
+    },
+    updateLocation(opts) {
+      this.filters.sorting[0].terms[0].title = 'Nearest'
+      this.filters.sorting[0].terms[1].title = 'Farthest'
+      this.$set(this.selectedFilters, 'location', opts)
+    },
+    loadMore() {
+      this.qs.start += this.qs.rows
+    },
+    loadPrevPage() {
+      this.qs.start -= this.qs.rows
+      this.scrollToRecords()
+    },
+    loadNextPage() {
+      this.qs.start += this.qs.rows
+      this.scrollToRecords()
+    },
+    loadByPageNumber(page) {
+      this.qs.start = page.startIndex
+      this.scrollToRecords()
+    },
+    scrollToRecords() {
+      if (this.$refs.records) {
+        const element = this.$refs.records
+        const top = element.offsetTop
+
+        const buttons = [...element.querySelectorAll('button')]
+        if (Array.isArray(buttons) && buttons.length > 0) {
+          buttons
+            .filter((button) => button.getAttribute('aria-expanded') === 'true')
+            .forEach((button) => button.click())
+
+          buttons[0].focus()
+        }
+
+        window.scrollTo({
+          top,
+          behavior: 'smooth'
+        })
+      }
+    },
+    resetSortLabels() {
+      this.filters.sorting = []
+      this.loadSortOptions(
+        this.DIR_CONFIG[this.options.field_directory_type].sorting
+      )
+    },
+    resetSearchFilters() {
+      this.selectedFilters = {}
+      this.qs = {
+        record_type: this.options.field_directory_type,
+        rows: this.options.field_directory_rows,
+        start: 0,
+        ...this.defaultSortOrderOption(this.options.field_directory_type)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+.paragraph--directory {
+  &__loading-container {
+    min-height: 250px;
+  }
+}
+</style>

package/src/components/Paragraphs/ListGroup/Constants.js

@@ -0,0 +1,72 @@
+const storyData = {
+  title: 'Laws and regulations',
+  subHeading:
+    'As an employer you must provide and maintain a healthy and safe working environment for your employees, including independent contractors, that is safe and without risks to their health so far as reasonably.',
+  footer:
+    'As an employer you must provide and maintain a healthy and safe working environment for your employees, including independent contractors, that is safe and without risks to their health so far as reasonably.',
+  links: [
+    {
+      title: 'External Link 1',
+      description:
+        'Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.',
+      link: '/sites/dummy'
+    },
+    {
+      title: 'External Link 2',
+      description:
+        'Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.',
+      link: 'http://www.google.com'
+    },
+    {
+      title: 'External Link 3',
+      description:
+        'Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.',
+      link: 'https://www.google.com'
+    },
+    {
+      title: 'Internal Link short 1',
+      description:
+        'Donec id elit non mi porta gravida at eget metus. Maecenas sed diam egett.',
+      link: '/?path=/story/containers-container--default'
+    },
+    {
+      title:
+        'Metal fabrication: Improving safety through housekeeping (indoor and outdoor) layout and design',
+      description:
+        'Metal fabrication: Improving safety through housekeeping (indoor and outdoor) layout and design',
+      link:
+        '/resources/metal-fabrication-improving-safety-through-housekeeping-indoor-and-outdoor-layout-and'
+    }
+  ]
+}
+
+const storyDataAr = {
+  title: 'القوانين والأنظمة',
+  subHeading:
+    'As an employer you must provide and maintain a healthy and safe working environment for your employees, including independent contractors, that is safe and without risks to their health so far as reasonably.',
+  footer:
+    'As an employer you must provide and maintain a healthy and safe working environment for your employees, including independent contractors, that is safe and without risks to their health so far as reasonably.',
+  rtl: 'true',
+  links: [
+    {
+      title: 'قائمة عنصر المجموعة',
+      description:
+        'بعض الأمثلة السريعة للنص الذي سيتم بناؤه على علامة التبويب 1 وتشكيل الجزء الأكبر من محتوى البطاقة.',
+      link: 'www.google.com'
+    },
+    {
+      title: 'قائمة عنصر المجموعة',
+      description:
+        'بعض الأمثلة السريعة للنص الذي سيتم بناؤه على علامة التبويب 1 وتشكيل الجزء الأكبر من محتوى البطاقة.',
+      link: '/?path=/story/containers-container--default'
+    },
+    {
+      title: 'قائمة عنصر المجموعة',
+      description:
+        'بعض الأمثلة السريعة للنص الذي سيتم بناؤه على علامة التبويب 1 وتشكيل الجزء الأكبر من محتوى البطاقة.',
+      link: '/?path=/story/containers-container--default'
+    }
+  ]
+}
+
+export { storyData, storyDataAr }

package/src/components/Paragraphs/ListGroup/Link/list-link.stories.js

@@ -0,0 +1,71 @@
+import ListGroup from './../index.vue'
+import { storyData, storyDataAr } from './../Constants'
+
+export default {
+  title: 'Paragraphs/ListGroup',
+  component: ListGroup,
+  argTypes: {
+    darkBackground: {
+      control: 'boolean',
+      defaultValue: false
+    },
+    items: {
+      control: 'object',
+      defaultValue: storyData.links
+    },
+    rtlItems: {
+      control: 'object',
+      defaultValue: storyDataAr.links
+    },
+    rtl: {
+      control: 'boolean',
+      defaultValue: false
+    },
+    titleTag: {
+      control: 'text',
+      defaultValue: 'h3'
+    },
+    showListItemNavigationArrow: {
+      control: 'boolean',
+      defaultValue: true
+    },
+    showLargeSpacing: {
+      control: 'boolean',
+      defaultValue: false
+    },
+    list: {
+      table: {
+        disable: true
+      }
+    },
+    showListLink: {
+      control: 'boolean',
+      defaultValue: true
+    },
+    title: {
+      table: {
+        disable: true
+      }
+    }
+  }
+}
+
+const Template = (args, { argTypes }) => ({
+  components: { ListGroup },
+  data() {
+    return {
+      storyData,
+      storyDataAr
+    }
+  },
+  props: Object.keys(argTypes),
+  template: `<list-group
+    v-bind="$props"
+    :list="rtl ? rtlItems : items"
+    :title="(rtl ? storyDataAr.title : storyData.title)"
+    :sub-heading="(rtl ? storyDataAr.subHeading : storyData.subHeading)"
+    :footer-heading="(rtl ? storyDataAr.footer : storyDataAr.footer)"
+    :show-list-link="showListLink"  />`
+})
+
+export const Link = Template.bind({})