@eturnity/eturnity_reusable_components 1.0.65 → 1.0.69

package/package.json

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

package/src/assets/icons/file_icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="16" viewBox="0 0 12 16">
+  <image id="Vector_Smart_Object1" data-name="Vector Smart Object1" width="12" height="16" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAYAAAAiYZ4HAAAAqklEQVQokWNUNbT4z4Ab/GFgYOi8ff5EDUwFEx7FIMDCwMBQrWpo0UKsBhiAa2IhUgNME4qGWwwMDN+hbGkGBgYRLJrKkZ0Ufvv8CQMQZmBgWIrDFhZi/QAHJGtAjocvDAwMf6FsTgYGBjasbkJi8xBjA7KGzQwMDO9wqBNiYGDwRddQd/v8iQvYVKsaWoBCDkNDqaqhxWscNohic1IUEV4gPVhJ08DAwAAAIKIf0LAB5vMAAAAASUVORK5CYII="/>
+</svg>

package/src/components/inputs/checkbox/index.vue

@@ -28,6 +28,7 @@
 //     checkColor="blue"
 //     size="small"
 //     backgroundColor="red"
+//     :isDisabled="true"
 // />
 import styled from "vue-styled-components"
 

package/src/components/inputs/inputNumber/index.vue

@@ -297,7 +297,7 @@ export default {
       this.isFocused = true
     },
     formatWithCurrency(value) {
-      if (value && !this.isFocused) {
+      if ((value || value === 0) && !this.isFocused) {
         let input = numberToString({
           value: value,
           numberPrecision: this.numberPrecision,

package/src/components/inputs/toggle/index.vue

@@ -1,9 +1,12 @@
 <template>
   <container>
     <flex-wrapper :size="size">
-      <label-text v-if="labelAlign === 'left'" :size="size">{{
-        label
-      }}</label-text>
+      <label-text
+        v-if="labelAlign === 'left'"
+        :size="size"
+        @click="onToggleChange"
+        >{{ label }}</label-text
+      >
       <toggle-wrapper
         role="checkbox"
         :checked="isChecked"

package/src/components/tableDropdown/index.vue

@@ -2,7 +2,30 @@
   <dropdown-row :colspan="colSpan" @click="toggleOpen" ref="dropdownItem">
     <component-container :colSpan="colSpan">
       <component-item v-for="(item, index) in tableItems" :key="index">
-        {{ item.value }}
+        <template-button
+          @click.stop="onTemplateClick(item.row)"
+          v-if="item.type && item.type === 'template' && item.value === ''"
+          :key="idx"
+          >{{ $gettext("Use template...") }}</template-button
+        >
+        <template-link
+          v-else-if="item.type && item.type === 'template' && item.value !== ''"
+          @click.stop="onSelectedTemplateClick(item.row)"
+        >
+          <img
+            :src="require('../../assets/icons/file_icon.svg')"
+            alt="icon"
+            width="12"
+            height="16"
+          />
+          <div>{{ item.value }}</div>
+        </template-link>
+        <no-template v-else-if="item.type && item.type === 'no-template'">
+          {{ $gettext("No main component template") }}
+        </no-template>
+        <span v-else>
+          {{ item.value }}
+        </span>
       </component-item>
       <et-popover
         v-if="showArchived"
@@ -50,9 +73,23 @@
           :tabindex="0"
           @keyup.enter.native="onItemClick(item)"
         >
-          <span v-for="(option, idx) in optionsDisplay" :key="idx">
-            {{ item[option] }}
-          </span>
+          <template v-for="(option, idx) in optionsDisplay">
+            <span v-if="option !== 'template'" :key="idx">
+              {{ item[option] }}
+            </span>
+            <template-button
+              @click.stop="onTemplateClick(item)"
+              v-else-if="option === 'template' && item.has_template"
+              :key="idx"
+              >{{ $gettext("Use template...") }}</template-button
+            >
+            <no-template
+              v-else-if="option === 'template' && !item.has_template"
+              :key="idx"
+            >
+              {{ $gettext("No main component template") }}
+            </no-template>
+          </template>
         </options-item>
       </options-wrapper>
     </options-container>
@@ -96,7 +133,7 @@ const ComponentContainer = styled("div", containerAttrs)`
   grid-template-columns: repeat(${(props) => props.colSpan}, minmax(0, 1fr)) auto;
   grid-gap: 12px;
   align-items: center;
-  background-color: #fff;
+  background-color: ${(props) => props.theme.colors.white};
   border-radius: 4px;
   padding: 5px 4px;
 `
@@ -124,7 +161,7 @@ const OptionsContainer = styled("div", optionsAttrs)`
   overflow: auto;
   border: 1px solid ${(props) => props.theme.colors.grey3};
   z-index: 9999;
-  background: #fff;
+  background: ${(props) => props.theme.colors.white};
   border-radius: 4px;
 `
 
@@ -167,10 +204,35 @@ const SearchContainer = styled.div`
   position: sticky;
   top: 0;
   padding-top: 6px;
-  background: #fff;
+  background: ${(props) => props.theme.colors.white};
   height: 40px;
 `
 
+const TemplateButton = styled.div`
+  cursor: pointer;
+  background-color: #263238;
+  color: ${(props) => props.theme.colors.white};
+  padding: 4px 10px;
+  display: inline-block;
+  border-radius: 4px;
+  text-align: center;
+`
+
+const NoTemplate = styled.div`
+  color: ${(props) => props.theme.colors.gray1};
+  font-style: italic;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`
+
+const TemplateLink = styled.div`
+  color: ${(props) => props.theme.colors.purple};
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: 12px;
+`
+
 export default {
   name: "table-dropdown",
   components: {
@@ -186,6 +248,9 @@ export default {
     OptionsWrapper,
     OptionsItem,
     SearchContainer,
+    TemplateButton,
+    NoTemplate,
+    TemplateLink,
   },
   props: {
     colSpan: {
@@ -247,6 +312,12 @@ export default {
         block: "center",
       })
     },
+    onTemplateClick(item) {
+      this.$emit("on-template-click", item)
+    },
+    onSelectedTemplateClick(item) {
+      this.$emit("on-selected-template-click", item)
+    },
     onItemClick(item) {
       this.$emit("item-selected", item)
     },
@@ -285,5 +356,10 @@ export default {
       }
     },
   },
+  mounted() {
+    console.log("optionsDisplay", this.optionsDisplay)
+    console.log("optionItems", this.optionItems)
+    console.log("tableItems", this.tableItems)
+  },
 }
 </script>

package/src/components/tables/mainTable/index.vue

@@ -195,6 +195,7 @@ const TableContainer = styled.table`
     }
 
     .icons-container {
+      padding-right: 2px; // so that the icons are not cut off when hovering
       width: 1%; // necessary so it doesn't take up too much white space
       display: table-cell;
       flex-wrap: nowrap;