@eturnity/eturnity_reusable_components 7.24.3-EPDM-10576.1 → 7.24.3-EPDM-11320.0

package/src/components/projectMarker/index.vue

@@ -1,71 +1,80 @@
 <template>
-  <page-container>
-    <marker-container
+  <PageContainer>
+    <MarkerContainer
       v-if="markerData && markerData.translations[activeLanguage]"
-      :hasBorderRadius="hasBorderRadius"
-      :withDate="!!date"
-      :backgroundColor="markerData.color"
-      :hasIcon="!!iconName"
-      :isEditionAllowed="editionAllowed"
-      :isActive="activated"
+      :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
+      <Icon
         v-if="!!iconName"
-        :name="iconName"
         color="white"
-        size="10px"
         :cursor="cursor"
+        :name="iconName"
+        size="10px"
       />
       <span>{{
         markerData.translations[activeLanguage]
           ? markerData.translations[activeLanguage].name
           : '-'
       }}</span>
-      <dot-wrapper v-if="editionAllowed" class="dotContainer">
-        <dot-icon />
-        <dot-icon />
-        <dot-icon />
-      </dot-wrapper>
-      <edit-container
+      <DotWrapper
+        v-if="editionAllowed"
+        class="dotContainer"
+      >
+        <DotIcon />
+        <DotIcon />
+        <DotIcon />
+      </DotWrapper>
+      <EditContainer
         v-if="activated"
         v-click-outside="clickOutsideActionHandler"
       >
-        <edit-item @click="deleteModalOpened = !deleteModalOpened">
-          <delete-icon />
+        <EditItem @click="deleteModalOpened = !deleteModalOpened">
+          <DeleteIcon />
           <div>{{ $gettext('Delete') }}</div>
-        </edit-item>
-        <edit-item @click="onEditClick">
-          <icon-container>
-            <icon name="edit_button" size="14px" />
-          </icon-container>
+        </EditItem>
+        <EditItem @click="onEditClick">
+          <IconContainer>
+            <Icon
+              name="edit_button"
+              size="14px"
+            />
+          </IconContainer>
           <div>{{ $gettext('Edit') }}</div>
-        </edit-item>
-      </edit-container>
-    </marker-container>
-    <date v-if="!!date">
+        </EditItem>
+      </EditContainer>
+    </MarkerContainer>
+    <Date v-if="!!date">
       {{ date }}
-    </date>
-    <modal
-      :isOpen="deleteModalOpened"
+    </Date>
+    <Modal
+      :is-open="deleteModalOpened"
+      :prevent-outside-close="true"
       @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="onDelete" :text="$gettext('Delete')" />
-          <main-button
+      <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"
-            :text="$gettext('Cancel')"
           />
-        </cta-container>
-      </modal-container>
-    </modal>
-  </page-container>
+        </CtaContainer>
+      </ModalContainer>
+    </Modal>
+  </PageContainer>
 </template>
 
 <script>
@@ -82,58 +91,58 @@
 //   @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'
+  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`
+  const PageContainer = styled.div`
   display: flex;
   align-items: center;
   font-size: 12px;
   line-height: 14px;
 `
 
-const ModalContainer = styled.div`
+  const ModalContainer = styled.div`
   padding: 40px;
   min-width: 500px;
 `
 
-const CtaContainer = styled.div`
+  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)`
+  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'};
+  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};
+  props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
   border: 1px solid
     ${(props) =>
-      props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
+  props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
   border-radius: ${(props) =>
-    props.hasBorderRadius ? (props.withDate ? '4px 0 0 4px' : '4px') : '0'};
+  props.hasBorderRadius ? (props.withDate ? '4px 0 0 4px' : '4px') : '0'};
   white-space: nowrap;
   cursor: ${(props) => (props.isEditionAllowed ? 'pointer' : props.cursor)};
 
@@ -148,20 +157,20 @@ const MarkerContainer = styled('div', MarkerAttrs)`
   }
 `
 
-const DotWrapper = styled.div`
+  const DotWrapper = styled.div`
   display: flex;
   gap: 2px;
   cursor: pointer;
 `
 
-const DotIcon = styled.div`
+  const DotIcon = styled.div`
   width: 4px;
   height: 4px;
   border-radius: 100%;
   background-color: ${(props) => props.theme.colors.white};
 `
 
-const EditContainer = styled.div`
+  const EditContainer = styled.div`
   position: absolute;
   z-index: 99;
   top: 22px;
@@ -173,7 +182,7 @@ const EditContainer = styled.div`
   overflow: hidden;
 `
 
-const EditItem = styled.div`
+  const EditItem = styled.div`
   display: flex;
   align-items: center;
   gap: 12px;
@@ -186,113 +195,113 @@ const EditItem = styled.div`
   }
 `
 
-const IconContainer = styled.div`
+  const IconContainer = styled.div`
   padding: 8px;
   line-height: 0;
 `
 
-const Date = styled.div`
+  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',
-  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
+  export default {
+    name: 'ProjectMarker',
+    directives: {
+      clickOutside: vClickOutside.directive
     },
-    isEditable: {
-      required: false,
-      default: false
+    components: {
+      PageContainer,
+      MarkerContainer,
+      DotWrapper,
+      DotIcon,
+      EditContainer,
+      EditItem,
+      DeleteIcon,
+      IconContainer,
+      Icon,
+      Modal,
+      ModalContainer,
+      CtaContainer,
+      PageTitle,
+      PageSubtitle,
+      MainButton,
+      Date
     },
-    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 ''
+    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
       }
-    }
-  },
-  methods: {
-    clickOutsideActionHandler() {
-      this.activated = false
     },
-    closeDeleteModal() {
-      this.deleteModalOpened = false
+    data() {
+      return {
+        activated: false,
+        deleteModalOpened: false
+      }
     },
-    onEditClick() {
-      this.$emit('editHandler')
+    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 ''
+        }
+      }
     },
-    onDelete() {
-      this.closeDeleteModal()
-      this.$emit('deleteHandler')
+    methods: {
+      clickOutsideActionHandler() {
+        this.activated = false
+      },
+      closeDeleteModal() {
+        this.deleteModalOpened = false
+      },
+      onEditClick() {
+        this.$emit('editHandler')
+      },
+      onDelete() {
+        this.closeDeleteModal()
+        this.$emit('deleteHandler')
+      }
     }
   }
-}
 </script>