Merge branch 'main' of github.com:unepwcmc/wcmc-components into main

unepwcmc · Jun 16, 2022 · 7bfbfed · 7bfbfed
2 parents db63313 + 66895c1
commit 7bfbfed
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 29 deletions.
diff --git a/CHANGELOG.MD b/CHANGELOG.MD
@@ -1,3 +1,24 @@
+### 2.1.1
+
+- Chore: run build and build-lib, update version in package.json
+
+### 2.1.0
+
+- Fix: Use getters in TableHeading and TableFilter components to properly read the state of the store
+- Feat: Allow customisable link icons using slots and portals
+
+### 2.0.1
+
+- Fix: Switch order of merged options to ensure options entered via prop take precedence
+
+### 2.0.0
+
+- Fix: fix item.value not displayed due to legend_on not having v-else.
+- Breaking change:
+  - $root.$on.openModal no longer emits tableId
+  - $root.$on.openModal emits an object with { row, rowIndex, tableId, tableColumns }
+  - Extract { tableId } in listeners of openModel to fix.
+
 ### 1.2.1
 
 - Hotfix: Correct broken import

diff --git a/dev/Serve.vue b/dev/Serve.vue
@@ -11,6 +11,10 @@
       <template #sort-icon>
         <span>This element is used as the sorting icon now!</span>
       </template>
+      
+      <template #row-link-icon>
+        <span>This element is used as the row link icon now!</span>
+      </template>
     -->
     </filterable-table>
   </div>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@unep-wcmc/wcmc-components",
-  "version": "1.2.1",
+  "version": "2.1.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/unepwcmc/wcmc-components.git"

diff --git a/src/components/filterable-table/FilterableTable.vue b/src/components/filterable-table/FilterableTable.vue
@@ -3,6 +3,10 @@
     <portal to="sort-icon">
       <slot name="sort-icon" />
     </portal>
+
+    <portal to="row-link-icon">
+      <slot name="row-link-icon" />
+    </portal>
 
     <table-filters
       :endpoint-download="endpointDownload"
@@ -241,9 +245,17 @@ export default {
     },
 
     importUserOptions () {
+      const providedOptions = typeof(this.options) == 'object' ? this.options : {}
+
+      const defaultOptionsWithoutColumns = JSON.parse(JSON.stringify(DEFAULT_OPTIONS));
+      delete defaultOptionsWithoutColumns.columns // remove default columns widths which was messing the vertical alignment
+
+      const defaultOptionsToMerge = Object.prototype.hasOwnProperty.call(providedOptions, 'columns') ? defaultOptionsWithoutColumns : DEFAULT_OPTIONS
+
+      const options = merge(defaultOptionsToMerge, providedOptions)
       const obj = {
         tableId: this.id,
-        options: typeof(this.options) == 'object' ? merge({}, DEFAULT_OPTIONS, this.options) : DEFAULT_OPTIONS
+        options
       }
 
       this.updateOptions(obj)

diff --git a/src/components/filterable-table/TableFilter.vue b/src/components/filterable-table/TableFilter.vue
@@ -56,8 +56,10 @@
 </template>
 
 <script>
-  import TableFilterOption from './TableFilterOption.vue'
-  import SvgChevron from './svgs/SvgChevron.vue'
+import TableFilterOption from './TableFilterOption.vue'
+import SvgChevron from './svgs/SvgChevron.vue'
+import { createNamespacedHelpers } from 'vuex'
+const { mapGetters } = createNamespacedHelpers('filterableTable')
 
   export default {
     name: 'TableFilter',
@@ -96,6 +98,10 @@
     },
 
     computed: {
+      ...mapGetters([
+        'getSelectedSort'
+      ]),
+
       cssVariables () {
         return {
           '--color-bg'                : this.config.trigger.colorBg,
@@ -240,9 +246,10 @@
             name: this.name,
             options: this.activeOptions
           },
+          sortObj: this.getSelectedSort(this.tableId),
           requestedPage: 1
         }
-        
+
         this.$store.dispatch('filterableTable/applyNewFilterOptions', obj)
         this.$root.$emit('getNewItems')
 

diff --git a/src/components/filterable-table/TableHeading.vue b/src/components/filterable-table/TableHeading.vue
@@ -9,7 +9,10 @@
         v-text="heading.title"
       />
 
-      <table-tooltip v-if="hasTooltip" :text="heading.tooltip" />
+      <table-tooltip 
+        v-if="hasTooltip" 
+        :text="heading.tooltip"
+      />
 
       <div
         v-if="tableIsSortable"
@@ -30,7 +33,7 @@ import { createNamespacedHelpers } from 'vuex'
 import TableTooltip from './TableTooltip.vue'
 import SvgSortIcon from './svgs/SvgSortIcon.vue'
 
-const { mapState, mapActions } = createNamespacedHelpers('filterableTable')
+const { mapGetters, mapState, mapActions } = createNamespacedHelpers('filterableTable')
 
 export default {
   name: 'TableHeading',
@@ -52,14 +55,16 @@ export default {
   },
 
   computed: {
+    ...mapGetters([
+      'getSelectedSort'
+    ]),
+
     ...mapState({
       tables (state) { 
         return state.tables
       },
     }),
 
-    columnUnsorted () { return this.currentSort.column !== this.heading.field },
-
     cssVariables () {
 
       const { bgColor, borderColor, borderStyle, borderWidth, fontFamily, fontWeight } = this.headings
@@ -74,29 +79,12 @@ export default {
       }
     },
 
-    currentSort () { return this.table.selectedSort },
-
-    currentSortIsDescending () { return !this.currentSort.ascending },
-
     hasTooltip () { return 'tooltip' in this.heading },
 
     headings () { return this.options.headings },
 
-    isNewSortAscending () { return this.columnUnsorted || this.currentSortIsDescending },
-
     options () { return this.table.options },
 
-    sortingPayload () {
-
-      return {
-        tableId: this.tableId,
-        sortObj: {
-          column: this.heading.field,
-          ascending: this.isNewSortAscending
-        }
-      }
-    },
-
     table () { return this.tables[this.tableId] },
 
     tableIsSortable () { return this.options.sortable },
@@ -107,8 +95,20 @@ export default {
       'updateSelectedSort'
     ]),
 
+    isNewSortAscending () { return this.columnUnsorted || this.currentSortIsDescending },
+
     sortColumn () {
-      this.updateSelectedSort(this.sortingPayload)
+      const currentSort = this.getSelectedSort(this.tableId)
+      const isNewSortAscending = currentSort.column !== this.heading.field || !currentSort.ascending
+      const sortingPayload = {
+        tableId: this.tableId,
+        sortObj: {
+          column: this.heading.field,
+          ascending: isNewSortAscending
+        }
+      }
+
+      this.updateSelectedSort(sortingPayload)
       this.$root.$emit('getNewItems')
     },
   }

diff --git a/src/components/filterable-table/TableRow.vue b/src/components/filterable-table/TableRow.vue
@@ -46,15 +46,19 @@
         class="button"
         :href="item.pageUrl"
       >
-        <svg-arrow class="button__svg" />
+        <portal-target name="row-link-icon">
+          <svg-arrow class="button__svg" />
+        </portal-target>
       </a>
 
       <button 
         v-else 
         class="button"
         @click="openModal"
       >
-        <svg-arrow class="button__svg" />
+        <portal-target name="row-link-icon">
+          <svg-arrow class="button__svg" />
+        </portal-target>
       </button>
     </p>
   </div>