@eturnity/eturnity_reusable_components 1.2.19-dev03.2 → 1.2.19-v.5.45.0

package/src/components/projectMarker/index.vue

@@ -0,0 +1,285 @@
+<template>
+  <page-container :withDate="!!date">
+    <marker-container
+      v-if="markerData"
+      :backgroundColor="markerData.color"
+      :hasIcon="!!iconName"
+      :isEditionAllowed="editionAllowed"
+      :isActive="activated"
+      :cursor="cursor"
+      @click.native="editionAllowed
+        ? activated = !activated
+        : ''
+      "
+    >
+      <icon
+        v-if="!!iconName"
+        :name="iconName"
+        color="white"
+        size="10px"
+        :cursor="cursor"
+      />
+      <span>{{ markerData.translations[activeLanguage].name }}</span>
+      <dot-wrapper
+        v-if="editionAllowed"
+        class="dotContainer"
+      >
+        <dot-icon />
+        <dot-icon />
+        <dot-icon />
+      </dot-wrapper>
+      <edit-container
+        v-if="activated"
+        v-click-outside="clickOutsideActionHandler"
+      >
+        <edit-item @click.native="deleteModalOpened = !deleteModalOpened">
+          <delete-icon />
+          <div>{{ $gettext('Delete') }}</div>
+        </edit-item>
+        <edit-item @click.native="onEditClick">
+          <icon-container>
+            <icon
+              name="edit_button"
+              size="14px"
+            />
+          </icon-container>
+          <div>{{ $gettext('Edit') }}</div>
+        </edit-item>
+      </edit-container>
+    </marker-container>
+    <date v-if="!!date">
+      {{ date }}
+    </date>
+    <modal
+      :isOpen="deleteModalOpened"
+      @on-close="closeDeleteModal"
+      :preventOutsideClose="true"
+    >
+      <modal-container>
+        <page-title :text="$gettext('delete_confirm_text')" />
+        <page-subtitle :text="$gettext('delete_confirm_subtext')" />
+        <cta-container>
+          <main-button
+            @click.native="onDelete"
+            :text="$gettext('Delete')"
+          />
+          <main-button
+            type="cancel"
+            @click.native="closeDeleteModal"
+            :text="$gettext('Cancel')"
+          />
+        </cta-container>
+      </modal-container>
+    </modal>
+  </page-container>
+</template>
+
+<script>
+// import ThreeDots from "@eturnity/eturnity_reusable_components/src/components/projectMarker"
+// To use:
+// <project-marker
+//   :activeLanguage="'en-us'"
+//   :markerData="{"choice":"sold","translations":{"en-us":{"name":"Sold"}}","color":"#000"}"
+//   :isLimitedPartner="false"
+//   :isGroupSupport="false"
+//   :isEditable='false'
+//   :date="'23.07.2022'"
+//   @editHandler="onMarkerEdit($event)"
+//   @deleteHandler="onMarkerDelete($event)"
+// />
+
+import styled from "vue-styled-components"
+import Icon from "../icon"
+import Modal from '../modals/modal'
+import PageTitle from '../pageTitle'
+import DeleteIcon from '../deleteIcon'
+import PageSubtitle from '../pageSubtitle'
+import MainButton from '../buttons/mainButton'
+
+const PageContainerAttrs = {
+  withDate: Boolean
+}
+const PageContainer = styled('div', PageContainerAttrs)`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 12px;
+  line-height: 14px;
+`
+
+const ModalContainer = styled.div`
+  padding: 40px;
+  min-width: 500px;
+`
+
+const CtaContainer = styled.div`
+  display: flex;
+  gap: 20px;
+  margin-top: 30px;
+`
+
+const MarkerAttrs = {
+  backgroundColor: String,
+  hasIcon: Boolean,
+  isEditionAllowed: Boolean,
+  isActive: Boolean,
+  cursor: String
+}
+const MarkerContainer = styled('div', MarkerAttrs)`
+  display: grid;
+  grid-template-columns: ${(props) =>
+  props.hasIcon || props.isEditionAllowed ? 'auto 1fr' : '1fr'};
+  grid-gap: 5px;
+  position: relative;
+  align-items: center;
+  padding: 2px 7px;
+  color: ${(props) => props.theme.colors.white};
+  background-color: ${(props) =>
+  props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
+  border-radius: 4px;
+  white-space: nowrap;
+  cursor: ${(props) => props.isEditionAllowed ? 'pointer' : props.cursor};
+
+  .dotContainer {
+    display: ${(props) => (props.isActive ? 'flex' : 'none')};
+  }
+
+  &:hover {
+    .dotContainer {
+      display: flex;
+    }
+  }
+`
+
+const DotWrapper = styled.div`
+  display: flex;
+  gap: 2px;
+  cursor: pointer;
+`
+
+const DotIcon = styled.div`
+  width: 4px;
+  height: 4px;
+  border-radius: 100%;
+  background-color: ${(props) => props.theme.colors.white};
+`
+
+const EditContainer = styled.div`
+  position: absolute;
+  z-index: 99;
+  top: 22px;
+  display: grid;
+  background-color: ${(props) => props.theme.colors.white};
+  border: 1px solid ${(props) => props.theme.colors.grey4};
+  border-radius: 4px;
+  cursor: pointer;
+  overflow: hidden;
+`
+
+const EditItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: ${(props) => props.theme.colors.black};
+  font-size: 13px;
+  padding: 4px 18px;
+
+  &:hover {
+    background-color: ${(props) => props.theme.colors.grey5};
+  }
+`
+
+const IconContainer = styled.div`
+  padding: 8px;
+  line-height: 0;
+`
+
+const Date = styled.div``
+
+export default {
+  name: "project-marker",
+  components: {
+    PageContainer,
+    MarkerContainer,
+    DotWrapper,
+    DotIcon,
+    EditContainer,
+    EditItem,
+    DeleteIcon,
+    IconContainer,
+    Icon,
+    Modal,
+    ModalContainer,
+    CtaContainer,
+    PageTitle,
+    PageSubtitle,
+    MainButton,
+    Date
+  },
+  props: {
+    markerData: {
+      required: true
+    },
+    activeLanguage: {
+      required: true
+    },
+    date: {
+      required: false,
+      default: null
+    },
+    isEditable: {
+      required: false,
+      default: false
+    },
+    isGroupSupport: {
+      required: false,
+      default: false
+    },
+    isLimitedPartner: {
+      required: false,
+      default: false
+    },
+    cursor: {
+      required: false,
+      default: 'default'
+    }
+  },
+  data() {
+    return {
+      activated: false,
+      deleteModalOpened: false
+    }
+  },
+  computed: {
+    editionAllowed() {
+      return (this.markerData.can_be_deleted && (!this.isLimitedPartner || this.isGroupSupport)) && this.isEditable
+    },
+    iconName() {
+      if (this.markerData.choice === 'sold') {
+        return 'all_good'
+      } else if (this.markerData.choice === 'lost') {
+        return 'cross'
+      } else if (this.markerData.choice === 'transferred') {
+        return 'transfer'
+      } else {
+        return ''
+      }
+    }
+  },
+  methods: {
+    clickOutsideActionHandler() {
+      this.activated = false
+    },
+    closeDeleteModal() {
+      this.deleteModalOpened = false
+    },
+    onEditClick() {
+      this.$emit("editHandler")
+    },
+    onDelete() {
+      this.closeDeleteModal()
+      this.$emit("deleteHandler")
+    }
+  }
+}
+</script>

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

@@ -8,7 +8,7 @@
         <spinner-wrapper v-if="isLoading">
           <spinner />
         </spinner-wrapper>
-        <table-container v-else>
+        <table-container v-else :cellPaddings="cellPaddings">
           <slot />
         </table-container>
       </table-wrapper>
@@ -63,7 +63,8 @@ const SpinnerWrapper = styled.div`
   justify-items: center;
 `
 
-const TableContainer = styled.table`
+const containerAttrs = { cellPaddings: String }
+const TableContainer = styled("table", containerAttrs)`
   width: 100%;
   border-collapse: collapse;
   border: none;
@@ -114,7 +115,7 @@ const TableContainer = styled.table`
   }
 
   td {
-    padding: 6px 6px 7px 4px;
+    padding: ${(props) => props.cellPaddings ? props.cellPaddings : "6px 6px 7px 4px" };
     border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
 
     &.empty {
@@ -352,6 +353,10 @@ export default {
       required: false,
       default: true,
     },
+    cellPaddings: {
+      required: false,
+      default: '',
+    },
     isLoading: {
       required: false,
       default: false,

package/src/helpers/numberConverter.js

@@ -4,9 +4,6 @@ export const stringToNumber = ({
   allowNegative
 }) => {
   // This is for saving. It converts our input string to a readable number
-  if (value === undefined) {
-    value = ''
-  }
   let newVal = value.toString()
   const selectedLang = localStorage.getItem('lang')
   // The first replace will replace not allowed characters with a blank

package/src/main.js

@@ -1,10 +1,12 @@
 import Vue from "vue"
 import App from "./App.vue"
 import VueCompositionAPI from "@vue/composition-api"
+import vClickOutside from 'v-click-outside'
 
 Vue.config.productionTip = false
 
 Vue.use(VueCompositionAPI)
+Vue.use(vClickOutside)
 
 new Vue({
   render: (h) => h(App),

package/src/assets/svgIcons/margin_tool.svg

@@ -1,4 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.75" y="0.75" width="12.5" height="12.5" stroke="white" stroke-width="1.5"/>
-<rect x="4.5" y="4.5" width="5" height="5" stroke="white" stroke-width="1.5"/>
-</svg>

package/src/assets/svgIcons/redo.svg

@@ -1,6 +0,0 @@
-<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.51904 2H10.519V4H4.51904V2Z" fill="#555D61"/>
-<path d="M4.51904 8H8.51904V10H4.51904V8Z" fill="#555D61"/>
-<path d="M10.519 5.92321L13.4807 2.96161L10.519 0L10.519 5.92321Z" fill="#555D61"/>
-<path d="M7.98391 8C7.29229 9.1956 5.99961 10 4.51904 10C2.3099 10 0.519043 8.20914 0.519043 6C0.519043 3.79086 2.3099 2 4.51904 2C5.99961 2 7.2923 2.8044 7.98391 4H4.51904C3.41447 4 2.51904 4.89543 2.51904 6C2.51904 7.10457 3.41447 8 4.51904 8H7.98391Z" fill="#555D61"/>
-</svg>

package/src/assets/svgIcons/undo.svg

@@ -1,6 +0,0 @@
-<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.48096 2H3.48096V4H9.48096V2Z" fill="white"/>
-<path d="M9.48096 8H5.48096V10H9.48096V8Z" fill="white"/>
-<path d="M3.48096 5.92321L0.519349 2.96161L3.48096 0L3.48096 5.92321Z" fill="white"/>
-<path d="M6.01609 8C6.70771 9.1956 8.00039 10 9.48096 10C11.6901 10 13.481 8.20914 13.481 6C13.481 3.79086 11.6901 2 9.48096 2C8.00039 2 6.7077 2.8044 6.01609 4H9.48096C10.5855 4 11.481 4.89543 11.481 6C11.481 7.10457 10.5855 8 9.48096 8H6.01609Z" fill="white"/>
-</svg>

package/src/components/errorMessage/index.vue

@@ -1,62 +0,0 @@
-<template>
-  <component-wrapper>
-    <text-overlay>
-      <slot></slot>
-    </text-overlay>
-  </component-wrapper>
-</template>
-
-<script>
-// import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
-//To use:
-// <error-message
-//     alignText="right" // default is left
-// />
-
-import styled from 'vue-styled-components'
-
-const TextOverlay = styled.div`
-  position: absolute;
-  top: calc(100% + 13px);
-  background: ${(props) => props.theme.colors.red};
-  padding: 10px;
-  width: max-content;
-  max-width: 100%;
-  min-width: 200px;
-  font-size: 11px;
-  font-weight: 400;
-  border-radius: 4px;
-  font-family: 'Lato-Bold', Arial;
-  z-index: 99;
-  color: ${(props) => props.theme.colors.white};
-
-  :before {
-    content: '';
-    background-color: ${(props) => props.theme.colors.red};
-    position: absolute;
-    top: 2px;
-    left: 40px;
-    height: 11px;
-    width: 11px;
-    transform-origin: center center;
-    transform: translate(-2em, -0.5em) rotate(45deg);
-  }
-`
-
-const ComponentWrapper = styled.div`
-  display: block;
-`
-
-export default {
-  name: 'info-text',
-  components: {
-    TextOverlay,
-    ComponentWrapper
-  },
-  props: {},
-  methods: {},
-  data() {
-    return {}
-  }
-}
-</script>

package/src/components/iconWrapper/index.vue

@@ -1,111 +0,0 @@
-<template>
-    <Wrapper 
-    :disabled="disabled" 
-    :size="size" 
-    :backgroundColor="backgroundColor" 
-    :borderRadius="borderRadius"
-    :hoveredBackgroundColor="hoveredBackgroundColor">
-        <icon :disabled="disabled" 
-            :size="iconSize" 
-            :name="name" 
-            :color="iconColor" 
-            :hoveredColor="hoveredIconColor" />
-        <caret v-if="hasCaret">
-          <iconWrapper :disabled="disabled" 
-            size="8px" 
-            name="arrow_down" 
-            :iconColor="iconColor" 
-            :hoveredBackgroundColor="hoveredIconColor"
-            borderRadius="1px" 
-            />
-            
-        </caret>
-    </Wrapper>  
-  </template>
-  
-  <script>
-  // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
-  //  How to use:
-  //<icon
-  //   name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
-  //   color="red"
-  //   hoveredColor="blue"
-  //   size="60px" by default, this is 30px
-  // />
-  
-  import styled from 'vue-styled-components'
-  import icon from '../icon'
-  const wrapperAttrs = { borderRadius:String,disabled: Boolean, size: String,backgroundColor:String,hoveredBackgroundColor:String }
-  const Wrapper = styled('div', wrapperAttrs)`
-    position:relative;
-    display: inline-flex;
-    width: ${(props) => props.size};
-    height: ${(props) => props.size};
-    justify-content:center;
-    align-items:center;
-    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
-    background-color: ${(props)=>props.theme.colors[props.backgroundColor] || props.backgroundColor};
-    border-radius: ${(props) => props.borderRadius};
-
-    &:hover{
-        background-color:${(props)=>props.theme.colors[props.hoveredBackgroundColor] || props.hoveredBackgroundColor};
-    }
-  `
-  const caret=styled.div`
-  position:absolute;
-  bottom:3px;
-  right:2px;
-  height:10px;
-  `
-
-  export default {
-    name: 'iconWrapper',
-    components: {
-      Wrapper,
-      icon,
-      caret
-    },
-    props: {
-      disabled: {
-        required: false,
-        default: false
-      },
-      name: {
-        required: true
-      },
-      iconColor: {
-        required: false,
-        default: 'white'
-      },
-      hoveredIconColor: {
-        required: false
-      },
-      backgroundColor: {
-        required: false,
-      },
-      hoveredBackgroundColor: {
-        required: false,
-        default:"transparentWhite1"
-      },
-      size: {
-        required: false,
-        default: '32px'
-      },
-      iconSize:{
-        required: false,
-        default:'18px'
-      },
-      hasCaret:{
-        required: false,
-        default: false
-      },
-      borderRadius:{
-        required:false,
-        default:'6px'
-      }
-    },
-    data() {
-      return {}
-    }
-  }
-  </script>