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

package/src/components/projectMarker/index.vue

@@ -1,80 +1,71 @@
 <template>
-  <PageContainer>
-    <MarkerContainer
+  <page-container>
+    <marker-container
       v-if="markerData && markerData.translations[activeLanguage]"
-      :background-color="markerData.color"
+      :hasBorderRadius="hasBorderRadius"
+      :withDate="!!date"
+      :backgroundColor="markerData.color"
+      :hasIcon="!!iconName"
+      :isEditionAllowed="editionAllowed"
+      :isActive="activated"
       :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"
-        color="white"
-        :cursor="cursor"
         :name="iconName"
+        color="white"
         size="10px"
+        :cursor="cursor"
       />
       <span>{{
         markerData.translations[activeLanguage]
           ? markerData.translations[activeLanguage].name
           : '-'
       }}</span>
-      <DotWrapper
-        v-if="editionAllowed"
-        class="dotContainer"
-      >
-        <DotIcon />
-        <DotIcon />
-        <DotIcon />
-      </DotWrapper>
-      <EditContainer
+      <dot-wrapper v-if="editionAllowed" class="dotContainer">
+        <dot-icon />
+        <dot-icon />
+        <dot-icon />
+      </dot-wrapper>
+      <edit-container
         v-if="activated"
         v-click-outside="clickOutsideActionHandler"
       >
-        <EditItem @click="deleteModalOpened = !deleteModalOpened">
-          <DeleteIcon />
+        <edit-item @click="deleteModalOpened = !deleteModalOpened">
+          <delete-icon />
           <div>{{ $gettext('Delete') }}</div>
-        </EditItem>
-        <EditItem @click="onEditClick">
-          <IconContainer>
-            <Icon
-              name="edit_button"
-              size="14px"
-            />
-          </IconContainer>
+        </edit-item>
+        <edit-item @click="onEditClick">
+          <icon-container>
+            <icon name="edit_button" size="14px" />
+          </icon-container>
           <div>{{ $gettext('Edit') }}</div>
-        </EditItem>
-      </EditContainer>
-    </MarkerContainer>
-    <Date v-if="!!date">
+        </edit-item>
+      </edit-container>
+    </marker-container>
+    <date v-if="!!date">
       {{ date }}
-    </Date>
-    <Modal
-      :is-open="deleteModalOpened"
-      :prevent-outside-close="true"
+    </date>
+    <modal
+      :isOpen="deleteModalOpened"
       @on-close="closeDeleteModal"
+      :preventOutsideClose="true"
     >
-      <ModalContainer>
-        <PageTitle :text="$gettext('delete_confirm_text')" />
-        <PageSubtitle :text="$gettext('delete_confirm_subtext')" />
-        <CtaContainer>
-          <MainButton
-            :text="$gettext('Delete')"
-            @click="onDelete"
-          />
-          <MainButton
-            :text="$gettext('Cancel')"
+      <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
             type="cancel"
             @click="closeDeleteModal"
+            :text="$gettext('Cancel')"
           />
-        </CtaContainer>
-      </ModalContainer>
-    </Modal>
-  </PageContainer>
+        </cta-container>
+      </modal-container>
+    </modal>
+  </page-container>
 </template>
 
 <script>
@@ -91,58 +82,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)};
 
@@ -157,20 +148,20 @@
   }
 `
 
-  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;
@@ -182,7 +173,7 @@
   overflow: hidden;
 `
 
-  const EditItem = styled.div`
+const EditItem = styled.div`
   display: flex;
   align-items: center;
   gap: 12px;
@@ -195,113 +186,113 @@
   }
 `
 
-  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: 'ProjectMarker',
-    directives: {
-      clickOutside: vClickOutside.directive
+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
     },
-    components: {
-      PageContainer,
-      MarkerContainer,
-      DotWrapper,
-      DotIcon,
-      EditContainer,
-      EditItem,
-      DeleteIcon,
-      IconContainer,
-      Icon,
-      Modal,
-      ModalContainer,
-      CtaContainer,
-      PageTitle,
-      PageSubtitle,
-      MainButton,
-      Date
+    activeLanguage: {
+      required: true
     },
-    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
-      }
+    date: {
+      required: false,
+      default: null
     },
-    data() {
-      return {
-        activated: false,
-        deleteModalOpened: false
-      }
+    isEditable: {
+      required: false,
+      default: 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 ''
-        }
-      }
+    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
+      )
     },
-    methods: {
-      clickOutsideActionHandler() {
-        this.activated = false
-      },
-      closeDeleteModal() {
-        this.deleteModalOpened = false
-      },
-      onEditClick() {
-        this.$emit('editHandler')
-      },
-      onDelete() {
-        this.closeDeleteModal()
-        this.$emit('deleteHandler')
+    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>