CampaignCard.vue

<template>
  <c-card :class="classes">
    <campaign-tag
      class="tag"
      v-if="isExclusive"
      :is-exclusive="true"
    />
    <div class="tag-highlight" v-if="isHighlighted">
      destaque
    </div>

    <div class="content">
      <div class="section-left">
        <campaign-stamp
          :symbol="symbol"
          :value="value"
        />
      </div>

      <div class="section-right">
        <div class="description">
          <h4 class="partner-name">{{ partner }}</h4>
          <p class="title">{{ title }}</p>
        </div>

        <p
          class="expiry"
          v-if="expirationDate">
          <c-icon size="14" icon="clock" />
          {{ expirationDate }}
        </p>

        <div class="card-controls">
          <c-toggle
            v-if="isExclusive"
            :height="30"
            :width="100"
            :labels="{ checked: 'Ativo', unchecked: 'Inativo' }"
            :value="localStatus"
            @input="toggleStatus"
          />
          <c-button
            no-padding
            class="campaign-id-clipboard"
            :data-clipboard-text="id"
            @click="notify"
          >
            ID
          </c-button>
        </div>
      </div>
    </div>
  </c-card>
</template>

<script>
import CIcon from '@/components/CComponents/CIcon'
import CCard from '@/components/CComponents/CCard'
import CImage from '@/components/CComponents/CImage'
import CToggle from '@/components/CComponents/CToggle'
import CButton from '@/components/CComponents/CButton'

import CampaignTag from '@/components/Campaign/Listing/CampaignTag'
import CampaignStamp from '@/components/Campaign/Listing/CampaignStamp'

import { getDiff, DAY } from '@/modules/time'

export default {
  components: { CampaignStamp, CampaignTag, CIcon, CCard, CImage, CToggle, CButton },
  props: {
    square: Boolean,
    id: String,
    image: String,
    title: String,
    partner: String,
    value: Number,
    symbol: String,
    status: Boolean,
    isHighlighted: Boolean,
    expiryDate: [ String, Number ],
    isExclusive: Boolean,
    slug: String
  },
  computed: {
    classes () {
      const classes = [
        'campaign-card', {
        '-square': !!this.square,
        '-exclusive': this.isExclusive
      }]
      return classes
    },
    expirationDate() {
      if (!this.expiryDate || !this.expiry) return undefined

      if (this.expiry <= 3 && this.expiry >= 0)
        return `Expira em ${this.expiry} dias`
      else
        return `Válido até ${new Date(this.expiryDate * 1000).toLocaleDateString('pt-BR')}`
    }
  },
  data() {
    return {
      expiry: null,
      localStatus: this.status || false
    }
  },
  methods: {
    getExpiry () {
      if (!this.expiryDate) return
      const days = getDiff(this.expiryDate * 1000, new Date(), DAY)
      this.expiry = days
    },
    notify(ev) {
      const feedback = {
        title: 'Sucesso',
        text: 'O ID da campanha foi copiado',
        type: 'success'
      }

      const el = document.createElement('textarea');
      el.value = this.id;
      document.body.appendChild(el);
      el.select();
      document.execCommand('copy');
      document.body.removeChild(el);
      ev.stopPropagation()

      this.$emit('copy', feedback)
    },
    toggleStatus() {
      this.localStatus = !this.localStatus
      this.$emit('toggle-campaign-status', {
        slug: this.slug,
        title: this.title,
        status: this.localStatus
      })
    }
  },
  mounted () {
    this.getExpiry()
    this.localStatus = this.status
  }
}
</script>

<style lang="scss">
@import '~@/styles/reference';

$partner-name-color: rgba(#121E48, 0.5);
$campaign-title-color: rgba(#121E48, 0.8);

.campaign-card {
  position: relative;
  display: flex;
  justify-content: flex-start;
  cursor: pointer;
  height: 170px;

  & > .tag {
    position: absolute;
    top: 0;
    left: 75px;
    transform: translateX(-50%);
  }

  & > .tag-highlight {
    position: absolute;
    background-color: #F5A623;
    color: white;
    bottom: 0px;

    border-top-right-radius: 20px;
    border-bottom-left-radius: 3px;

    width: 70px;
    padding: 2px 5px;
    padding-top: 3px;

    font-size: 9.5px;
    text-transform: uppercase;
  }

  & > .content {
    display: flex;
  }

  .section-left {
    display: flex;
    align-items: center;

    margin-top: 19px;
    padding: 0 20px;

    @include desktop {
      padding: 0 30px;
    }
  }

  .section-right {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 10px;

    .description {
      margin-top: auto;
      margin-bottom: auto;

      .partner-name {
        overflow: hidden;
        white-space: nowrap;
        max-width: calc(100%);
        text-overflow: ellipsis ;

        font-size: 14px;
        color: $partner-name-color;
        font-weight: 400;

        margin-bottom: 3px;
      }

      .title {
        color: $campaign-title-color;
      }
    }

    .expiry {
      display: flex;
      align-items: center;
      font-size: 12px;

      line-height: 1.5;
      margin: auto 0;

      .c-icon { margin-right: 9px; }
    }

    .card-controls {
      display: flex;
      justify-content: space-between;
      margin-top: auto;

      & > .campaign-id-clipboard { margin-left: auto; }
    }
  }

  &.-exclusive > .content > .section-left {
     margin-top: 19px; padding: 0 20px;

    @include desktop {
      padding: 0 30px;
    }
  }
  &.-exclusive > .content > .section-right .description { margin-bottom: initial; }
}
</style>