@eturnity/eturnity_reusable_components 1.0.48 → 1.0.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.0.48",
+  "version": "1.0.52",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/assets/icons/collapse_arrow_icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 5"><g data-name="Layer 2"><path fill="#263238" d="M0 0h8L4 5 0 0z" data-name="Layer 1"/></g></svg>

package/src/components/tableDropdown/index.vue

@@ -0,0 +1,289 @@
+<template>
+  <dropdown-row :colspan="colSpan" @click="toggleOpen" ref="dropdownItem">
+    <component-container :colSpan="colSpan">
+      <component-item v-for="(item, index) in tableItems" :key="index">
+        {{ item.value }}
+      </component-item>
+      <et-popover
+        v-if="showArchived"
+        style="position: absolute; left: 5px; top: 13px; z-index: 99"
+        button-class="error"
+        :text="$gettext(`Component has been archived and shouldn't be used`)"
+        triggerType="hover"
+      ></et-popover>
+      <arrow-down
+        v-if="!isOpen"
+        class="arrow-dropdown"
+        :src="require('../../assets/icons/collapse_arrow_icon.svg')"
+      />
+      <arrow-up
+        v-else
+        :src="require('../../assets/icons/collapse_arrow_icon.svg')"
+      />
+    </component-container>
+    <options-container
+      v-if="isOpen"
+      :top="getItemLocation('top')"
+      :width="getItemLocation('width')"
+      ref="optionsContainer"
+    >
+      <options-wrapper @click.prevent.stop>
+        <search-container @click.prevent.stop>
+          <search-input
+            :value="inputText"
+            :placeholder="$gettext('Keyword') + '...'"
+            @click.prevent.stop
+            @on-change="onSearch($event)"
+            ref="searchInput"
+          />
+        </search-container>
+        <spinner v-if="optionsLoading" />
+        <empty-text v-else-if="!optionsLoading && !optionItems.length">
+          {{ emptyText ? emptyText : $gettext("No components found.") }}
+        </empty-text>
+        <options-item
+          v-else
+          :colSpan="colSpan"
+          v-for="(item, index) in optionItems"
+          :key="index"
+          @click="onItemClick(item)"
+          :tabindex="0"
+          @keyup.enter.native="onItemClick(item)"
+        >
+          <span v-for="(option, idx) in optionsDisplay" :key="idx">
+            {{ item[option] }}
+          </span>
+        </options-item>
+      </options-wrapper>
+    </options-container>
+  </dropdown-row>
+</template>
+
+<script>
+// import TableDropdown from "@eturnity/eturnity_reusable_components/src/components/tableDropdown"
+// To use:
+// <table-dropdown
+//   :colSpan="2"
+//   :tableItems="getDropdownValues(row)"
+//   :showArchived="
+//     row.selectedValue
+//       ? row.selectedValue.status_active === false
+//       : row.status_active === false
+//   "
+//   @toggle-dropdown-open="toggleDropdownOpen(row.id, $event)"
+//   @dropdown-search="onDropdownSearch($event)"
+//   @item-selected="onItemSelected({ item: $event, index })"
+//   :isOpen="isDropdownOpen(row)"
+//   :optionItems="groupComponents" // list of options
+//   :optionsLoading="dropdownOptionsLoading"
+//   :optionsDisplay="['display_name', 'company_item_number']" // Array. what should be displayed
+// />
+import styled from "vue-styled-components"
+import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
+import SearchInput from "@eturnity/eturnity_reusable_components/src/components/inputs/searchInput"
+
+const DropdownRow = styled.td``
+
+const ComponentItem = styled.div`
+  padding-left: 12px;
+
+  span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`
+
+const containerAttrs = { colSpan: Number }
+const ComponentContainer = styled("div", containerAttrs)`
+  display: grid;
+  grid-template-columns: repeat(${(props) => props.colSpan}, minmax(0, 1fr)) auto;
+  grid-gap: 12px;
+  align-items: center;
+  background-color: #fff;
+  border-radius: 4px;
+  padding: 5px 4px;
+`
+
+const ArrowDown = styled.img`
+  width: 8px;
+  transform: rotate(0deg);
+  transition: transform 150ms ease;
+`
+
+const ArrowUp = styled.img`
+  width: 8px;
+  transform: rotate(180deg);
+  transition: transform 150ms ease;
+`
+
+const optionsAttrs = { top: Number, width: Number }
+const OptionsContainer = styled("div", optionsAttrs)`
+  position: absolute;
+  display: grid;
+  top: ${(props) => props.top + "px"};
+  width: ${(props) => props.width + "px"};
+  max-height: 360px;
+  min-height: 200px;
+  overflow: auto;
+  border: 1px solid ${(props) => props.theme.colors.grey3};
+  z-index: 9999;
+  background: #fff;
+  border-radius: 4px;
+`
+
+const EmptyText = styled.div`
+  align-self: center;
+  justify-self: center;
+  height: 100px;
+  display: grid;
+  align-content: center;
+`
+
+const OptionsWrapper = styled.div`
+  display: grid;
+  position: relative;
+  padding: 12px;
+  grid-gap: 4px;
+  font-size: 14px;
+  grid-template-rows: max-content;
+  height: max-content;
+`
+
+const OptionsItem = styled("div", containerAttrs)`
+  display: grid;
+  grid-template-columns: repeat(${(props) => props.colSpan}, minmax(0, 1fr));
+  grid-gap: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 10px;
+  height: max-content;
+
+  &:hover {
+    background-color: ${(props) => props.theme.colors.grey5};
+  }
+`
+
+const SearchContainer = styled.div`
+  position: sticky;
+  top: 0;
+  padding-top: 6px;
+  background: #fff;
+  height: 40px;
+`
+
+export default {
+  name: "table-dropdown",
+  components: {
+    DropdownRow,
+    ComponentItem,
+    ComponentContainer,
+    ArrowDown,
+    ArrowUp,
+    OptionsContainer,
+    Spinner,
+    EmptyText,
+    SearchInput,
+    OptionsWrapper,
+    OptionsItem,
+    SearchContainer,
+  },
+  props: {
+    colSpan: {
+      required: false,
+      default: 1,
+    },
+    tableItems: {
+      required: true,
+    },
+    showArchived: {
+      required: false,
+      default: false,
+    },
+    isOpen: {
+      required: true,
+      default: false,
+    },
+    optionsLoading: {
+      required: false,
+      default: false,
+    },
+    emptyText: {
+      required: false,
+      default: null,
+    },
+    optionItems: {
+      required: true,
+    },
+    optionsDisplay: {
+      required: true,
+      default: [], // should be like ['display_name', 'company_item_number', 'description']
+    },
+  },
+  data() {
+    return {
+      inputText: "",
+    }
+  },
+  methods: {
+    toggleOpen() {
+      if (!this.isOpen) {
+        document.addEventListener("click", this.clickOutside)
+        this.$emit("dropdown-search", "")
+        this.$nextTick(() => {
+          this.scrollToItem()
+        })
+        this.$emit("toggle-dropdown-open", { close: false })
+        this.$nextTick(() => {
+          this.$refs.searchInput.$el.children[0].children[0].focus()
+        })
+      } else {
+        document.removeEventListener("click", this.clickOutside)
+        this.$emit("toggle-dropdown-open", { close: true })
+      }
+    },
+    scrollToItem() {
+      this.$refs.optionsContainer.$el.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      })
+    },
+    onItemClick(item) {
+      this.$emit("item-selected", item)
+    },
+    onSearch(value) {
+      this.$emit("dropdown-search", value)
+    },
+    getItemLocation(value) {
+      let ref = this.$refs.dropdownItem
+      let location = ref.$el.getBoundingClientRect()[value]
+      if (value === "top") {
+        location = location + window.scrollY + 40
+      }
+      return location
+    },
+    clickOutside(event) {
+      if (event.target === this.$el || this.$el.contains(event.target)) {
+        return
+      }
+      // 'close: true' is needed in case a box is open and another box is clicked on
+      // so this one will close properly
+      document.removeEventListener("click", this.clickOutside)
+      this.$emit("toggle-dropdown-open", { close: true })
+    },
+  },
+  watch: {
+    isOpen(newVal) {
+      if (newVal) {
+        document.addEventListener("click", this.clickOutside)
+        this.$emit("dropdown-search", "")
+        this.$nextTick(() => {
+          this.$refs.searchInput.$el.children[0].children[0].focus()
+        })
+        this.$nextTick(() => {
+          this.scrollToItem()
+        })
+      }
+    },
+  },
+}
+</script>