@abi-software/flatmapvuer 0.3.16 → 0.4.0-beta-1

package/src/components/SelectionsGroup.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="selections-container">
+    <el-row>
+      <el-col :span="12">
+        <div class="checkall-display-text">{{title}}</div>
+      </el-col>
+      <el-col :span="12">
+        <el-checkbox
+          v-if="selections && selections.length > 1"
+          class="all-checkbox"
+          :indeterminate="isIndeterminate"
+          v-model="checkAll"
+          @change="handleCheckAllChange"
+        >Display all</el-checkbox>
+      </el-col>
+    </el-row>
+    <el-checkbox-group
+      v-model="checkedItems"
+      size="small"
+      class="checkbox-group"
+      @change="handleCheckedItemsChange"
+    >
+      <div class="checkbox-group-inner">
+        <el-row v-for="item in selections" :key="item[identifierKey]" :label="item[identifierKey]">
+          <div class="checkbox-container">
+            <el-checkbox
+              class="my-checkbox"
+              :label="item[identifierKey]"
+              @change="visibilityToggle(item[identifierKey], $event)"
+              :checked="!(('enable' in item) && item.enable === false)">
+              <div class="path-visual" :style="getVisualStyles(item)"></div>
+              {{item[labelKey]}}
+            </el-checkbox>
+          </div>
+        </el-row>
+      </div>
+    </el-checkbox-group>
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import Vue from "vue";
+import {
+  Checkbox,
+  CheckboxGroup,
+  Col,
+  Row
+} from "element-ui";
+import lang from "element-ui/lib/locale/lang/en";
+import locale from "element-ui/lib/locale";
+
+locale.use(lang);
+Vue.use(Checkbox);
+Vue.use(CheckboxGroup);
+Vue.use(Col);
+Vue.use(Row);
+
+
+export default {
+  name: "SelectionsGroup",
+  methods: {
+    /**
+     * Function to toggle paths to default.
+     * Also called when the associated button is pressed.
+     */
+    reset: function() {
+      this.checkAll = true;
+      this.checkedItems = [];
+      this.selections.forEach(item => {
+        if (!(('enable' in item) && item.enable === false)) {
+          this.checkedItems.push(item[this.identifierKey]);
+        } else {
+          this.checkAll = false;
+        }
+      });
+    },
+    visibilityToggle: function(key, value) {
+      this.$emit("changed", {key, value});
+    },
+    handleCheckedItemsChange: function(value) {
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.selections.length;
+    },
+    handleCheckAllChange(val) {
+      this.checkedItems = val ? this.selections.map(a => a[this.identifierKey]) : [];
+      this.$emit("checkAll",
+      {
+        keys: this.selections.map(a => a[this.identifierKey]),
+        value: val
+      });
+    },
+    getVisualStyles(item) {
+      if ('colour' in item) {
+        if (('dashed' in item) && (item.dashed === true)) {
+          const background = `repeating-linear-gradient(90deg,${item.colour},${item.colour} 6px,transparent 0,transparent 9px)`;
+          return {'background':background};
+        }
+        else {
+          const background = item.colour;
+          return {background};
+        }
+      }
+      return {};
+    }
+  },
+  props: {
+    identifierKey: {
+      type: String,
+      default: "id"
+    },
+    labelKey: {
+      type: String,
+      default: "label"
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    selections: {
+      type: Array,
+      default: function() {
+        return [];
+      },
+    },
+  },
+  computed: {
+    isIndeterminate: function() {
+      const count = this.checkedItems.length;
+      if ((count === 0) || this.checkAll){
+        return false;
+      }
+      return true;
+    }
+  },
+  data: function() {
+    return {
+      checkedItems: [],
+      checkAll: true,
+    };
+  },
+  mounted: function() {
+    this.reset();
+  }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+@import "~element-ui/packages/theme-chalk/src/checkbox";
+@import "~element-ui/packages/theme-chalk/src/checkbox-group";
+@import "~element-ui/packages/theme-chalk/src/row";
+
+.selection-container {
+  margin-top:5px;
+}
+
+.path-visual {
+  margin: 3px 0;
+  height: 3px;
+  width: 25px;
+  margin-right: 5px;
+  display: inline-block;
+}
+
+.checkall-display-text {
+  width: 59px;
+  height: 20px;
+  color: rgb(48, 49, 51);
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 20px;
+  margin-left: 8px;
+}
+
+.all-checkbox {
+  float: right;
+}
+
+.checkbox-container {
+  display: flex;
+  cursor: pointer;
+}
+
+.checkbox-group {
+  width: 260px;
+  border: 1px solid rgb(144, 147, 153);
+  border-radius: 4px;
+  background: #ffffff;
+}
+
+.my-checkbox {
+  background-color: #fff;
+  width: 100%;
+}
+
+.checkbox-group-inner {
+  padding: 18px;
+}
+
+::v-deep .el-checkbox__label {
+  padding-left: 5px;
+  color: $app-primary-color;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0px;
+  line-height: 14px;
+}
+
+::v-deep .el-checkbox__input {
+  &.is-indeterminate,
+  &.is-checked {
+    .el-checkbox__inner {
+      background-color: $app-primary-color;
+      border-color: $app-primary-color;
+    }
+  }
+}
+
+::v-deep .el-checkbox__label {
+  color: $app-primary-color !important;
+}
+
+</style>
+

package/src/components/legends/DynamicLegends.vue

@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="12">
+        <div class="title-display-text">{{ title }}</div>
+      </el-col>
+    </el-row>
+    <div class="legends-group">
+      <el-row
+        v-for="item in lists"
+        :key="item[identifierKey]"
+        :label="item[identifierKey]"
+      >
+        <div class="legends-container">
+          <div
+            class="legends-visual"
+            :style="{ background: item[colourKey] }"
+          ></div>
+          <div class="label">
+            {{ capitalise(item[identifierKey]) }}
+          </div>
+        </div>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import Vue from "vue";
+import { Col, Row } from "element-ui";
+import lang from "element-ui/lib/locale/lang/en";
+import locale from "element-ui/lib/locale";
+
+locale.use(lang);
+Vue.use(Col);
+Vue.use(Row);
+
+export default {
+  name: "DynamicLegends",
+  props: {
+    identifierKey: {
+      type: String,
+      default: "id",
+    },
+    colourKey: {
+      type: String,
+      default: "colour",
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    lists: {
+      type: Array,
+      default: function () {
+        return [];
+      },
+    },
+  },
+  methods: {
+    capitalise: function (label) {
+      return label.charAt(0).toUpperCase() + label.slice(1).toLowerCase();
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+@import "~element-ui/packages/theme-chalk/src/row";
+
+.legends-visual {
+  margin: 2px;
+  width: 11px;
+  margin-right: 5px;
+  display: inline-block;
+}
+
+.title-display-text {
+  width: 59px;
+  height: 20px;
+  color: rgb(48, 49, 51);
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 20px;
+  margin-left: 8px;
+}
+
+.label {
+  padding-left: 35px;
+  color: $app-primary-color;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0px;
+  line-height: 14px;
+}
+
+.legends-container {
+  display: flex;
+  cursor: pointer;
+}
+
+.legends-group {
+  width: 224;
+  border: 1px solid rgb(144, 147, 153);
+  border-radius: 4px;
+  background: #ffffff;
+  padding: 18px;
+}
+</style>
+