Moved all the gd-pame stuff over (except css)

Loosely speaking works - ready for FE fixing, I have resolved/swept
under the carpet all the js console errors

to import, run rails c and
> PameEvaluation.import 'pame_data-2019-08-30.csv'

(headers need to change slightly to work with wcmc_components gem and
this is the only csv I have updated....)

view the page at
http://localhost:3000/en/pame

Gemfile

@@ -5,7 +5,7 @@ gem 'rails', '5.2.0'
 gem 'webpacker', '~> 4.0.2'
 
 #gem 'wcmc-components', path: "../web-components/gems/wcmc_components"
-gem 'wcmc-components', '~>0.0.3'
+gem 'wcmc-components', '~>0.0.4'
 
 
 gem 'bourbon'

Gemfile.lock

@@ -1365,7 +1365,7 @@ DEPENDENCIES
   turnout (~> 2.5.0)
   uglifier (~> 4.1.17)
   vuejs-rails (~> 2.3.2)
-  wcmc-components (~> 0.0.3)
+  wcmc-components (~> 0.0.4)
   webmock (~> 1.22.0)
   webpacker (~> 4.0.2)
   whenever

app/controllers/pame_controller.rb

@@ -1,4 +1,32 @@
 class PameController < ApplicationController
+  DEFAULT_PARAMS =
+  {
+    requested_page: 1,
+    filters: []
+  }.to_json
+
+  # Format for this date is: Month and Year (4 digits)
+  UPDATED_AT = "July 2019".freeze
+
   def index
+    @table_attributes = PameEvaluation::TABLE_ATTRIBUTES.to_json
+    @filters = PameEvaluation.filters_to_json
+    @sources = PameEvaluation.sources_to_json
+    @json = PameEvaluation.paginate_evaluations(DEFAULT_PARAMS).to_json
+    @updated_at = UPDATED_AT
   end
-end
+
+  def list
+    @evaluations = PameEvaluation.paginate_evaluations(params.to_json)
+
+    render json: @evaluations
+  end
+
+  def download
+    send_data PameEvaluation.to_csv(params.to_json), {
+                type: "text/csv; charset=utf-8; header=present",
+                disposition: "attachment",
+                filename: "protectedplanet-pame.csv" }
+  end
+end
+

app/helpers/application_helper.rb

@@ -1,3 +1,4 @@
+# coding: utf-8
 module ApplicationHelper
   include BemHelper
 

app/javascript/components/FilteredTable.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="filtered-table relative">
+    <filters :filters="filters" :total-items="totalItems"></filters>
+
+    <table class="table table--head">
+      <pame-table-head :filters="attributes">
+      </pame-table-head>
+    </table>
+
+    <table class="table table--body">
+      <tbody>
+        <row v-for="item, key in items"
+          :key="key"
+          :item="item">
+        </row>
+      </tbody>
+    </table>
+
+    <pame-pagination :current-page="currentPage" :items-per-page="itemsPerPage" :total-items="totalItems" :total-pages="totalPages"></pame-pagination>
+  </div>
+</template>
+
+<script>
+  import axios from 'axios'
+  import { eventHub } from '../vue.js'
+  import Filters from './pame-filters/Filters.vue'
+  import PameTableHead from './table/PameTableHead.vue'
+  import Row from './table/Row.vue'
+  import PamePagination from './pagination/PamePagination.vue'
+
+  export default {
+    name: 'filtered-table',
+
+    components: { Filters, PameTableHead, Row, PamePagination },
+
+    props: {
+      filters: { type: Array },
+      attributes: { type: Array },
+      json: { type: Object }
+    },
+
+    data () {
+      return {
+        currentPage: 1,
+        itemsPerPage: 0,
+        totalItems: 0,
+        totalPages: 0,
+        items: [],
+        sortDirection: 1
+      }
+    },
+
+    created () {
+      this.updateProperties(this.json)
+    },
+
+    mounted () {
+      eventHub.$on('getNewItems', this.getNewItems)
+    },
+
+    methods: {
+      updateProperties (data) {
+        this.currentPage = data.current_page
+        this.itemsPerPage = data.per_page
+        this.totalItems = data.total_entries
+        this.totalPages = data.total_pages
+        this.items = data.items
+      },
+
+      getNewItems () {
+        let data = {
+          requested_page: this.$store.state.requestedPage,
+          filters: this.$store.state.selectedFilterOptions
+        }
+
+        const csrf = document.querySelectorAll('meta[name="csrf-token"]')[0].getAttribute('content')
+        axios.defaults.headers.common['X-CSRF-Token'] = csrf
+        axios.defaults.headers.common['Accept'] = 'application/json'
+
+        axios.post('/list', data)
+        .then(response => {
+          this.updateProperties(response.data)
+        })
+        .catch(function (error) {
+          console.log(error)
+        })
+      }
+    }
+  }
+</script>

app/javascript/components/forms/DownloadCsv.vue

@@ -0,0 +1,99 @@
+<template>
+  <button
+    @click="download"
+    title="Download CSV file of filtered protected area management effectiveness evaluations"
+    class="button button--download button--green"
+    :class="{ 'button--disabled' : noResults }"
+    v-bind="{ 'disabled' : noResults }">
+    CSV
+  </button>
+</template>
+
+<script>
+  import axios from 'axios'
+
+  export default {
+    name: 'download-csv',
+
+    props: {
+      totalItems: {
+        required: true,
+        type: Number
+      }
+    },
+
+    computed: {
+      noResults () {
+        return this.totalItems == 0
+      }
+    },
+
+    methods: {
+      download () {
+        console.log('download')
+        const csrf = document.querySelectorAll('meta[name="csrf-token"]')[0].getAttribute('content'),
+          data = this.$store.state.selectedFilterOptions,
+          config = {
+            headers: {
+              'X-CSRF-Token': csrf,
+              'Accept': 'text/csv',
+              'responseType': 'blob'
+            }
+          }
+
+        axios.post('/download', data, config)
+          .then((response) => {
+            console.log('post successful')
+            const date = new Date().toJSON().slice(0,10),
+              filename = `protectedplanet-pame-${date}.csv`
+
+            this.createBlob(filename, response.data)
+          })
+          .catch(function (error) {
+            console.log(error)
+          })
+      },
+
+      createBlob (filename, data) {
+        let blob = new Blob([data])
+        console.log('blob')
+
+        if (typeof window.navigator.msSaveBlob !== 'undefined') {
+          // IE workaround for "HTML7007: One or more blob URLs were 
+          // revoked by closing the blob for which they were created. 
+          // These URLs will no longer resolve as the data backing 
+          // the URL has been freed."
+          window.navigator.msSaveBlob(blob, filename)
+
+        } else {
+          const blobURL = window.URL.createObjectURL(blob),
+            tempLink = document.createElement('a')
+
+          // Safari thinks _blank anchor are pop ups. We only want to set _blank
+          // target if the browser does not support the HTML5 download attribute.
+          // This allows you to download files in desktop safari if pop up blocking 
+          // is enabled.
+          if (typeof tempLink.download === 'undefined') {
+              tempLink.setAttribute('target', '_blank')
+          }
+          
+          tempLink.href = blobURL
+          tempLink.setAttribute('download', filename)
+          this.simulateClick(tempLink)
+          window.URL.revokeObjectURL(blobURL)
+        }
+      },
+
+      simulateClick (element) {
+        // created because standard .click() doesn't work in Firefox
+        const event = new MouseEvent('click', {
+          bubbles: true,
+          cancelable: true,
+          view: window
+        })
+        // If cancelled, don't dispatch our event
+        var canceled = !element.dispatchEvent(event)
+      }
+    }
+  }
+</script>

app/javascript/components/pagination/PamePagination.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="right">
+    <div v-if="haveResults">
+      <span class="bold">{{ firstItem }} - {{ lastItem }} of {{ totalItems }}</span>
+
+      <button
+        v-bind="{ 'disabled' : !previousIsActive }"
+        @click="changePage(previousIsActive, 'previous')"
+        class="button button--previous"
+        :class="{ 'button--disabled' : !previousIsActive }">
+      </button>
+
+      <button
+        v-bind="{ 'disabled' : !nextIsActive }"
+        @click="changePage(nextIsActive, 'next')"
+        class="button button--next"
+        :class="{ 'button--disabled' : !nextIsActive }">
+      </button>
+    </div>
+
+    <div v-else class="left">
+      <p>There are no evaluations matching the selected filters options.</p>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { eventHub } from '../../vue.js'
+
+  export default {
+    name: "pame-pagination",
+
+    props: {
+      currentPage: {
+        required: true,
+        type: Number
+      },
+      itemsPerPage: {
+        required: true,
+        type: Number
+      },
+      totalItems: {
+        required: true,
+        type: Number
+      },
+      totalPages: {
+        required: true,
+        type: Number
+      }
+    },
+
+    computed: {
+      nextIsActive () {
+        return  this.currentPage < this.totalPages
+      },
+
+      previousIsActive () {
+        return this.currentPage > 1
+      },
+
+      firstItem () {
+        let first
+
+        if(this.totalItems == 0) {
+          first = 0
+
+        } else if (this.totalItems < this.itemsPerPage) {
+          first = 1
+
+        } else {
+          first = this.itemsPerPage * (this.currentPage - 1) + 1
+        }
+
+        return first
+      },
+
+      lastItem () {
+        let lastItem = this.itemsPerPage * this.currentPage
+
+        if (lastItem > this.totalItems) {
+          lastItem = this.totalItems
+        }
+
+        return lastItem
+      },
+
+      haveResults () {
+        return this.totalItems > 0
+      }
+
+
+    },
+
+    methods: {
+      changePage (isActive, direction) {
+        // only change the page if the button is active
+        if (isActive) {
+          const newPage = direction == 'next' ? this.currentPage + 1 : this.currentPage - 1
+
+          this.$store.commit('updateRequestedPage', newPage)
+          eventHub.$emit('getNewItems')
+        }
+      }
+    }
+  }
+</script>