Merge remote-tracking branch 'origin/release-2.2.9' into main

Author: lucacug

CHANGELOG.MD

@@ -1,3 +1,22 @@
+### 2.2.9
+
+- Added:
+  - New record button at the top of the table
+  - Yalc instructions to README as an alternative to yarn link(buggy) for development
+- Fix:
+  - Archive functionality
+  - Archive icon style
+
+### 2.2.7 / 2.2.8
+- No change - We weren't sure if yarn link was broken or the library was broken
+
+### 2.2.6
+
+- Added:
+  - Edit and archive buttons to table rows
+  - Archived styling for rows that are archived
+  - Configure whether edit and archive columns are shown via keys in the options prop of the FilterableTable. See README.md for more details about table props.
+
 ### 2.2.5
 
 - Fix: add .node-version and .tool-version files
@@ -65,7 +84,7 @@
   - Enforce newline between computed properties, methods and props
   - Enforce newline between sibling elements in markdown
   - Enforce whitespace between `if` and `()`
-- Refactoring: 
+- Refactoring:
   - Use `mapGetters`, `mapState` & `mapActions` and `createNamespacedHelpers` instead of `this.$store.getters[]`
   - Use `const` for mutable object assignments
   - Use `v-text` instead of `{{}}` wherever possible
@@ -95,8 +114,8 @@
 - Fix the CSV Download
 ### 1.0.1
 
-- 
+-
 
 ### 1.0.0
 
-Initial version of the component library to test it works with npm.
+Initial version of the component library to test it works with npm.

README.md

@@ -33,11 +33,22 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
 ### Install local package
 - Clone this repo
 - Run `yarn build-lib` to create the library files in the dist folder
-- Run `yarn link` to enable you to sync this repo to another
+- Run either `yarn link` (not working well) to enable you to sync this repo to another OR `yalc push` (working well) to publish your library files to the local yalc repository
+  - **in order to use `yalc push` you need to first install yalc, run `yarn global add yalc` or `npm install -g yalc` in the terminal**
+  - if using `yalc` whenever you change something in the code and want to try it, you have to run `yarn build-lib` and `yalc push`
 
 In your **new project** do the following:
-- Add the following the the package.json `"@unep-wcmc/wcmc-components": "../wcmc-components",`
-- Run `yarn link "@unep-wcmc/wcmc-components"`
+- if using `yarn link`
+  - Add the following the the package.json `"@unep-wcmc/wcmc-components": "../wcmc-components",`
+  - Run `yarn link "@unep-wcmc/wcmc-components"`
+- if using `yalc push`
+  - Run `yalc add @unep-wcmc/wcmc-components && yalc link @unep-wcmc/wcmc-components && yarn install`
+  - Add the following to the .gitignore file
+    ```
+    # Yalc
+    /.yalc
+    yalc.lock
+    ````
 - In your js file add `import FilterableTable from "@unep-wcmc/wcmc-components"`
 - In your js file add `Vue.use(FilterableTable, { store })`
 

docs/components/filterable-table.md

@@ -14,6 +14,16 @@ sidebar: auto
 | `filter-array`      | `Array`  |             |
 | `options`           | `Object` |        |
 
+### Options
+
+| Name                    | Type      | Description |
+| ----------------------- | --------- | ----------- |
+| `columns`               | `Array`   | Array of column widths passed to css. Must equal the number of displayed columns. |
+| `showArchived`          | `Boolean` | Configures whether the archive button is displayed. Default is false. |
+| `showEdit`              | `Boolean` | Configures whether the edit button is displayed. Default is false. |
+| `hideMoreContentColumn` | `Boolean` | Configures whether the more content column/button is displayed. Default is false. |
+| `more...`               | `type`    | Continue to add to this...     |
+
 ## Data
 
 | Name            | Type      | Description | Initial value |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unep-wcmc/wcmc-components",
-  "version": "2.2.5",
+  "version": "2.2.9",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/unepwcmc/wcmc-components.git"

src/components/filterable-table/ArchiveButton.vue

@@ -0,0 +1,119 @@
+<template>
+  <div @click="archive" :class="`button button__svg-wrapper button--${archiveClass}`" >
+    <component
+      :is="`svg-${archiveClass}`"
+      class="button__svg"
+    />
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import { setAxiosHeaders } from '../../helpers/helpers-axios.js'
+import SvgArchive from './svgs/SvgArchive.vue'
+import SvgRestore from './svgs/SvgRestore.vue'
+
+export default {
+  name: 'ArchiveButton',
+
+  components: {
+    SvgArchive,
+    SvgRestore
+  },
+
+  props: {
+    archiveUrl: {
+      type: String,
+      required: true
+    },
+
+    archived: {
+      type: Boolean,
+      required: true
+    },
+
+    recordId: {
+      type: Number,
+      required: true
+    },
+  },
+
+  computed: {
+    archiveClass () {
+      return this.archived ? 'restore' : 'archive'
+    }
+  },
+
+  methods:{
+    archive () {
+      const data = {
+        id: this.recordId,
+        archived: this.archived ? 0 : 1
+      }
+
+      setAxiosHeaders(axios)
+
+      axios.post(this.archiveUrl, data)
+        .then(response => {
+          this.$emit('clicked', response.data.archived)
+        })
+        .catch(function (error) {
+            console.log(error)
+        })
+    }
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+.button.button--archive {
+  background: transparent;
+  border: none;
+  padding: 0;
+  width: 100%; height: 80px;
+  max-width: 80px; max-height: 80px;
+
+  &:hover {
+    cursor: pointer;
+
+    ::v-deep .svg-arrow .svg__circle {
+      fill: #009fe3; // IE11
+      fill: var(--button-hover-color);
+    }
+
+    ::v-deep .svg-arrow .svg__arrow {
+      fill: #fff; // IE11
+      fill: var(--button-hover-color-arrow);
+    }
+  }
+
+  &--restore {
+    position: relative;
+    z-index: 1;
+
+    &::before {
+      background-color: #fff;
+      border-radius: 100%;
+      content: '';
+      width: 100%; padding-top: 100%;
+
+      display: block;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      z-index: -1;
+
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  &__svg-wrapper {
+    width: 100%;
+  }
+
+  &__svg {
+    width: 56%; height: 56%;
+  }
+}
+</style>