@eturnity/eturnity_reusable_components 1.2.20-3d-master.0 → 1.2.21

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/components/threeDots/index.vue

@@ -10,7 +10,8 @@
       @click.stop
       :top="getItemLocation('top')"
       :right="getItemLocation('right')"
-      :containerWidth="childOpen ? 420 : 220"
+      :containerWidth="childOpen ? 440 : 240"
+      ref="dropdownContainer"
     >
       <loading-container v-if="isLoading">
         <spinner />
@@ -26,13 +27,13 @@
           @click.stop="
             onSelect({
               item: child,
-              hasChildren: hasChildren(child),
+              hasChildren: hasChildren(child)
             })
           "
           @keyup.enter.stop="
             onSelect({
               item: child,
-              hasChildren: hasChildren(child),
+              hasChildren: hasChildren(child)
             })
           "
         >
@@ -51,7 +52,10 @@
           @mouseover="onItemHover({ index, item })"
           :isDisabled="item.disabled"
         >
-          <arrow-left :hasChildren="hasChildren(item)" />
+          <arrow-left
+            :hasChildren="hasChildren(item)"
+            v-if="hasChildren(item)"
+          />
           <span>
             {{ item.name }}
           </span>
@@ -117,8 +121,8 @@
 //         },
 //       ],
 
-import styled from "vue-styled-components"
-import Spinner from "../spinner"
+import styled from 'vue-styled-components'
+import Spinner from '../spinner'
 
 const PageContainer = styled.div`
   display: grid;
@@ -155,11 +159,11 @@ const DotItem = styled.div`
 `
 
 const dropdownAttrs = { top: Number, right: Number, containerWidth: Number }
-const DropdownContainer = styled("div", dropdownAttrs)`
+const DropdownContainer = styled('div', dropdownAttrs)`
   z-index: 99;
   height: 200px;
-  top: ${(props) => props.top + "px"};
-  left: ${(props) => props.right - props.containerWidth + "px"};
+  top: ${(props) => props.top + 'px'};
+  left: ${(props) => props.right - props.containerWidth + 'px'};
   position: absolute;
   display: grid;
   grid-template-columns: auto auto;
@@ -180,19 +184,21 @@ const OptionsContainer = styled.div`
   border: 1px solid ${(props) => props.theme.colors.grey3};
   display: grid;
   grid-template-columns: 1fr;
-  min-width: 200px;
+  min-width: 220px;
+  max-width: 220px;
   width: max-content;
   border-radius: 4px;
   background-color: #fff;
   max-height: 220px;
   overflow: auto;
   height: max-content;
+  white-space: normal;
 `
 
 const optionAttrs = { isDisabled: Boolean }
-const OptionItem = styled("div", optionAttrs)`
+const OptionItem = styled('div', optionAttrs)`
   padding: 12px;
-  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
   font-size: 13px;
   position: relative;
 
@@ -222,7 +228,7 @@ const OptionChild = styled.div`
 `
 
 const arrowAttrs = { hasChildren: Boolean }
-const ArrowLeft = styled("span", arrowAttrs)`
+const ArrowLeft = styled('span', arrowAttrs)`
   border: solid #9f9f9f;
   border-width: 0 1.5px 1.5px 0;
   display: inline-block;
@@ -230,16 +236,18 @@ const ArrowLeft = styled("span", arrowAttrs)`
   margin-bottom: 1px;
   transform: rotate(135deg);
   margin-right: 3px;
-  visibility: ${(props) => (props.hasChildren ? "visible" : "hidden")};
+  visibility: ${(props) => (props.hasChildren ? 'visible' : 'hidden')};
 `
 
 const childAttrs = { isOpen: Boolean }
-const ChildrenContainer = styled("div", childAttrs)`
+const ChildrenContainer = styled('div', childAttrs)`
   border: ${(props) =>
-    props.isOpen ? "1px solid" + props.theme.colors.grey3 : "none"};
+    props.isOpen ? '1px solid' + props.theme.colors.grey3 : 'none'};
   display: grid;
   grid-template-columns: 1fr;
   min-width: 200px;
+  max-width: 200px;
+  white-space: normal;
   width: max-content;
   border-radius: 4px;
   background-color: #fff;
@@ -250,7 +258,7 @@ const ChildrenContainer = styled("div", childAttrs)`
 `
 
 export default {
-  name: "three-dots",
+  name: 'three-dots',
   components: {
     PageContainer,
     ButtonContainer,
@@ -262,22 +270,23 @@ export default {
     ArrowLeft,
     DropdownContainer,
     Spinner,
-    LoadingContainer,
+    LoadingContainer
   },
   props: {
     options: {
-      required: true,
+      required: true
     },
     isLoading: {
       required: false,
-      default: false,
-    },
+      default: false
+    }
   },
   data() {
     return {
       isOpen: false,
       hoverItem: null,
       childOpen: null,
+      containerWidth: 16
     }
   },
   methods: {
@@ -285,15 +294,15 @@ export default {
       this.isOpen = !this.isOpen
 
       if (this.isOpen) {
-        document.addEventListener("click", this.clickOutside)
+        document.addEventListener('click', this.clickOutside)
       } else {
-        document.removeEventListener("click", this.clickOutside)
+        document.removeEventListener('click', this.clickOutside)
       }
     },
     getItemLocation(value) {
       let ref = this.$refs.dropdownItem
       let location = ref.$el.getBoundingClientRect()[value]
-      if (value === "top") {
+      if (value === 'top') {
         location = location + window.scrollY
       }
       return location
@@ -310,7 +319,7 @@ export default {
       if (hasChildren || item.disabled) {
         return
       }
-      this.$emit("on-select", item)
+      this.$emit('on-select', item)
       this.isOpen = false
     },
     clickOutside(event) {
@@ -318,7 +327,7 @@ export default {
         return
       }
       this.toggleButton()
-    },
-  },
+    }
+  }
 }
 </script>

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
@@ -94,7 +91,6 @@ export const numberToString = ({ value, numberPrecision }) => {
       ? 'fr-fr'
       : localStorage.getItem('lang')
     : 'en-US'
-  value=parseFloat(value)
   return value.toLocaleString(selectedLang, {
     minimumFractionDigits: numberPrecision,
     maximumFractionDigits: numberPrecision

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/base_layer.svg

@@ -1,3 +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"/>
-</svg>

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/roof_layer.svg

@@ -1,3 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M0 10 L7 0 L14 10" fill="none" stroke="white" stroke-width="1.5"/>
-</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: 10;
-  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>