@eturnity/eturnity_reusable_components 8.7.4--EPDM-12729.4 → 8.7.4

package/src/components/projectMarker/index.vue

@@ -1,300 +1,300 @@
-<template>
-  <PageContainer>
-    <MarkerContainer
-      v-if="markerData && markerData.translations[activeLanguage]"
-      :background-color="markerData.color"
-      :cursor="cursor"
-      :has-border-radius="hasBorderRadius"
-      :has-icon="!!iconName"
-      :is-active="activated"
-      :is-edition-allowed="editionAllowed"
-      :with-date="!!date"
-      @click="editionAllowed ? (activated = !activated) : ''"
-    >
-      <Icon
-        v-if="!!iconName"
-        color="white"
-        :cursor="cursor"
-        :name="iconName"
-        size="10px"
-      />
-      <span>{{
-        markerData.translations[activeLanguage]
-          ? markerData.translations[activeLanguage].name
-          : '-'
-      }}</span>
-      <DotWrapper v-if="editionAllowed" class="dotContainer">
-        <DotIcon />
-        <DotIcon />
-        <DotIcon />
-      </DotWrapper>
-      <EditContainer
-        v-if="activated"
-        v-click-outside="clickOutsideActionHandler"
-      >
-        <EditItem @click="deleteModalOpened = !deleteModalOpened">
-          <DeleteIcon />
-          <div>{{ $gettext('Delete') }}</div>
-        </EditItem>
-        <EditItem @click="onEditClick">
-          <IconContainer>
-            <Icon name="edit_button" size="14px" />
-          </IconContainer>
-          <div>{{ $gettext('Edit') }}</div>
-        </EditItem>
-      </EditContainer>
-    </MarkerContainer>
-    <Date v-if="!!date">
-      {{ date }}
-    </Date>
-    <Modal
-      :is-open="deleteModalOpened"
-      :prevent-outside-close="true"
-      @on-close="closeDeleteModal"
-    >
-      <ModalContainer>
-        <PageTitle :text="$gettext('delete_confirm_text')" />
-        <PageSubtitle :text="$gettext('delete_confirm_subtext')" />
-        <CtaContainer>
-          <MainButton :text="$gettext('Delete')" @click="onDelete" />
-          <MainButton
-            :text="$gettext('Cancel')"
-            type="cancel"
-            @click="closeDeleteModal"
-          />
-        </CtaContainer>
-      </ModalContainer>
-    </Modal>
-  </PageContainer>
-</template>
-
-<script>
-  // import ProjectMarker 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 'vue3-styled-components'
-  import vClickOutside from 'click-outside-vue3'
-  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: 'ProjectMarker',
-    directives: {
-      clickOutside: vClickOutside.directive,
-    },
-    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>
+  <PageContainer>
+    <MarkerContainer
+      v-if="markerData && markerData.translations[activeLanguage]"
+      :background-color="markerData.color"
+      :cursor="cursor"
+      :has-border-radius="hasBorderRadius"
+      :has-icon="!!iconName"
+      :is-active="activated"
+      :is-edition-allowed="editionAllowed"
+      :with-date="!!date"
+      @click="editionAllowed ? (activated = !activated) : ''"
+    >
+      <Icon
+        v-if="!!iconName"
+        color="white"
+        :cursor="cursor"
+        :name="iconName"
+        size="10px"
+      />
+      <span>{{
+        markerData.translations[activeLanguage]
+          ? markerData.translations[activeLanguage].name
+          : '-'
+      }}</span>
+      <DotWrapper v-if="editionAllowed" class="dotContainer">
+        <DotIcon />
+        <DotIcon />
+        <DotIcon />
+      </DotWrapper>
+      <EditContainer
+        v-if="activated"
+        v-click-outside="clickOutsideActionHandler"
+      >
+        <EditItem @click="deleteModalOpened = !deleteModalOpened">
+          <DeleteIcon />
+          <div>{{ $gettext('Delete') }}</div>
+        </EditItem>
+        <EditItem @click="onEditClick">
+          <IconContainer>
+            <Icon name="edit_button" size="14px" />
+          </IconContainer>
+          <div>{{ $gettext('Edit') }}</div>
+        </EditItem>
+      </EditContainer>
+    </MarkerContainer>
+    <Date v-if="!!date">
+      {{ date }}
+    </Date>
+    <Modal
+      :is-open="deleteModalOpened"
+      :prevent-outside-close="true"
+      @on-close="closeDeleteModal"
+    >
+      <ModalContainer>
+        <PageTitle :text="$gettext('delete_confirm_text')" />
+        <PageSubtitle :text="$gettext('delete_confirm_subtext')" />
+        <CtaContainer>
+          <MainButton :text="$gettext('Delete')" @click="onDelete" />
+          <MainButton
+            :text="$gettext('Cancel')"
+            type="cancel"
+            @click="closeDeleteModal"
+          />
+        </CtaContainer>
+      </ModalContainer>
+    </Modal>
+  </PageContainer>
+</template>
+
+<script>
+  // import ProjectMarker 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 'vue3-styled-components'
+  import vClickOutside from 'click-outside-vue3'
+  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: 'ProjectMarker',
+    directives: {
+      clickOutside: vClickOutside.directive,
+    },
+    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>