@worksafevictoria/wcl7.5 1.0.0

package/src/components/SubComponents/ResourceGroup/index.stories.js

@@ -0,0 +1,268 @@
+import ResourceGroup from './index.vue'
+
+const bundleContent = ['Document', 'Presentation', 'Spreadsheet', 'Resource']
+
+export default {
+  title: 'SubComponents/ResourceGroup',
+  component: { ResourceGroup },
+  argTypes: {
+    background: {
+      control: 'select',
+      options: ['grey', 'white', 'yellow']
+    },
+    titleTag: {
+      control: 'select',
+      options: ['h2', 'h3']
+    },
+    columns: {
+      control: 'select',
+      options: [4, 3, 2, 1]
+    },
+    fetchContent: {
+      control: 'function',
+      table: { disable: true }
+    },
+    type: {
+      control: 'text',
+      table: { disable: true }
+    },
+     rows: {
+      control: 'select',
+      options: [3, 2, 1]
+    },
+    resourceType: {
+      control: 'text',
+      table: { disable: true }
+    }
+  },
+  args: {
+    background: 'white',
+    collectionTitle: 'Resource Group with Loader',
+    titleTag: 'h2',
+    bundle: bundleContent,
+    columns: 3,
+    initialDisplyLimit: 3,
+    fetchContent: null,
+    enableBundleFilter: false,
+    showFilter: true,
+    rows: 3,
+    hasPreselectedFilters: false,
+    totalResults: 10,
+    filterResults: 1,
+    showLoadMore: true,
+    resourceType: 'resource-group',
+    type: 'auto'
+  }
+}
+
+const DefaultContent = (args) => ({
+  components: { ResourceGroup },
+  setup() {
+    return { args }
+  },
+  data: () => {
+    return {
+      rerenderKey: 0,
+      loading: true,
+      title: [
+        'Card title 1',
+        'Card title goes here. long text long text long text',
+        'No description and no image',
+        'القوانين والأنظمة',
+        'Card title 2',
+        'Card title 2 goes here. long text long text long text',
+        'No description and no image 2',
+        'القوانين والأنظمة 2',
+        'Card title 3',
+        'Card title 3 goes here. long text long text long text'
+      ],
+      size: [
+        '149.5 kB',
+        '555.23 kB',
+        '12.5 kB',
+        '321.59',
+        '149.5 kB',
+        '555.23 kB',
+        '12.5 kB',
+        '321.59',
+        '555.23 kB',
+        '12.5 kB'
+      ],
+      types: [
+        'PDF',
+        'DOC',
+        'XLS',
+        'PPT',
+        'PDF',
+        'DOC',
+        'XLS',
+        'PPT',
+        'PDF',
+        'DOC'
+      ],
+      length: [
+        '2 pages',
+        '3 pages',
+        '2 sheets',
+        '4 slides',
+        '2 pages',
+        '3 pages',
+        '2 sheets',
+        '4 slides',
+        '4 slides',
+        '2 pages'
+      ],
+      level: [
+        'Medium',
+        'Easy',
+        'Medium',
+        'Hard',
+        'Medium',
+        'Easy',
+        'Medium',
+        'Hard',
+        'Easy',
+        'Medium'
+      ],
+      pillText: [
+        'Resource',
+        'Document',
+        'Resource',
+        'Presentation',
+        'Resource',
+        'Document',
+        'Resource',
+        'Spreadsheet',
+        'Document',
+        'Presentation'
+      ]
+    }
+  },
+  mounted() {
+    this.reset()
+    setTimeout(() => {
+      this.loading = false
+    }, 1000)
+  },
+  computed: {
+    searchResults() {
+      return (bundle) => {
+        const cardItem = {
+          title: undefined,
+          fileLink: null,
+          pillText: null,
+          date: null,
+          fileSize: null,
+          fileType: null,
+          fileLength: null,
+          fileName: null,
+          readingLevel: null,
+          itemId: null
+        }
+
+        return {
+          results: Array(args.totalResults)
+            .fill(cardItem)
+            .map((card) => JSON.parse(JSON.stringify(card)))
+            .map((card, index) => {
+              card.itemId = 'resource - ' + index
+              card.title = this.title[index]
+              card.fileLength = this.length[index]
+              card.fileSize = this.size[index]
+              card.fileType = this.types[index]
+              card.readingLevel = this.level[index]
+              card.pillText = bundle
+              card.date = '12 Aug 2020'
+              card.fileLink =
+                '/sites/default/files/2022-08/ISBN-Support-coordination-program_person-centered-plan-2022-08.pdf'
+              card.fileName =
+                'ISBN-Support-coordination-program_person-centered-plan-2022-08.pdf'
+              card.resourseType = 'resource-group'
+              card.dateTitle = 'Published'
+              card.fileTypeTitle = 'File type'
+              card.fileSizeTitle = 'File size'
+              card.fileLengthTitle = 'Length'
+              card.readingLevelTitle = 'Reading level'
+              card.dropdownTitle = 'File information'
+              card.ctaTitle = `Download ${card.fileType}`
+              card.ctaAlt = `Download ${card.fileType}`
+
+              return card
+            }),
+            numFound: args.totalResults
+        }
+      } 
+    }
+  },
+  methods: {
+    reset() {
+      this.rerenderKey += 1
+      setTimeout(() => {
+        this.$refs.resourcegroup.loadFiltersAndContent()
+      })
+    },
+    fetchCards(qs, filters, bundleIndex) {
+
+      const hasFilters = Object.values(filters).some(
+        (filter) => filter.filter((item) => !item.preselected).length > 0
+      )
+
+      const data = JSON.parse(JSON.stringify(this.searchResults(qs?.bundle)))
+
+      data.results = hasFilters
+        ? data.results.slice(0, this.filterResults)
+        : data.results.slice(qs.start, qs.start + qs.rows)
+      data.numFound = hasFilters ? this.filterResults : data.numFound
+
+      return Promise.resolve(data)
+    },
+    fetchFilters() {
+      return Promise.resolve([])
+    },
+    getBundleAlias(string) {
+      return string.charAt(0).toUpperCase() + string.slice(1)
+    }
+  },
+  watch: {
+    showFilter: {
+      handler: function() {
+        this.reset()
+      }
+    },
+    rows: {
+      handler: function() {
+        this.reset()
+      }
+    },
+    totalResults: {
+      handler: function() {
+        this.reset()
+      }
+    },
+    filterResults: {
+      handler: function() {
+        this.reset()
+      }
+    },
+    hasPreselectedFilters: {
+      handler: function() {
+        this.reset()
+      }
+    }
+  },
+  template: `
+  <resource-group
+    v-bind="args"
+    ref="resourcegroup"
+    :key="rerenderKey"
+    :loading="loading"
+    :fetch-content="fetchCards"
+    :get-bundle-alias="getBundleAlias"
+    :fetch-filters="fetchFilters"
+    :title="args.collectionTitle"
+    :initial-disply-limit="args.rows * 3"
+  />
+  `
+})
+
+export const Group = DefaultContent.bind({})