@eturnity/eturnity_reusable_components 7.12.7 → 7.16.0-qa-25.0

package/src/components/projectMarker/index.vue

@@ -1,291 +1,291 @@
-<template>
-  <page-container>
-    <marker-container
-      v-if="markerData"
-      :hasBorderRadius="hasBorderRadius"
-      :withDate="!!date"
-      :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 PageContainer = styled.div`
-  display: flex;
-  align-items: center;
-  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 = {
-  hasBorderRadius: Boolean,
-  backgroundColor: String,
-  withDate: Boolean,
-  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: 1px solid
-    ${(props) =>
-      props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
-  border-radius: ${(props) =>
-    props.hasBorderRadius ? (props.withDate ? '4px 0 0 4px' : '4px') : '0'};
-
-  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`
-  padding: 2px 5px;
-  border: 1px solid ${(props) => props.theme.colors.grey4};
-  border-left: none;
-  border-radius: 0 4px 4px 0;
-`
-
-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'
-    },
-    hasBorderRadius: {
-      required: false,
-      default: true
-    }
-  },
-  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>
+<template>
+  <page-container>
+    <marker-container
+      v-if="markerData"
+      :hasBorderRadius="hasBorderRadius"
+      :withDate="!!date"
+      :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 PageContainer = styled.div`
+  display: flex;
+  align-items: center;
+  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 = {
+  hasBorderRadius: Boolean,
+  backgroundColor: String,
+  withDate: Boolean,
+  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: 1px solid
+    ${(props) =>
+      props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
+  border-radius: ${(props) =>
+    props.hasBorderRadius ? (props.withDate ? '4px 0 0 4px' : '4px') : '0'};
+
+  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`
+  padding: 2px 5px;
+  border: 1px solid ${(props) => props.theme.colors.grey4};
+  border-left: none;
+  border-radius: 0 4px 4px 0;
+`
+
+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'
+    },
+    hasBorderRadius: {
+      required: false,
+      default: true
+    }
+  },
+  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>