@eturnity/eturnity_reusable_components 1.0.68 → 1.0.72

package/package.json

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

package/src/components/deleteIcon/index.vue

@@ -34,8 +34,6 @@ const Icon = styled("span", iconAttrs)`
       : `url(${require("../../assets/icons/delete_icon.svg")})`};
 
   &:hover {
-    box-shadow: 0px 4px 9px 1px rgb(0 0 0 / 20%);
-    border-radius: 4px;
     background-image: ${() =>
       `url(${require("../../assets/icons/delete_icon.svg")})`};
   }

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.png')"
+            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

@@ -91,6 +91,7 @@ const TableContainer = styled.table`
   th {
     padding: 11px 15px;
     background-color: ${(props) => props.theme.colors.blue1};
+    cursor: auto;
 
     .ordering {
       display: grid;