ZeenHowGetCoins

Блочный компонент с прогресс-баром и перечнем задач, за которые выдаются баллы.

Примеры:

Как заработать коины

11 из 20

55%

• Посмотреть спонсорский стенд
  3 / 5
• Посмотреть спонсорский стенд
  8 / 10
• Пройти всю гранд викторину
  0 / 5

props

Название	Тип	Обязательный	По умолчанию	Описание
tasks	object	-	{}	объект с задачами и баллами
for	string	-	из	предлог для выделения выполненных заданий из общего количества
byPoints	boolean	-	true	если false, то считает по количеству заданий, если true, то по количеству баллов

slots

Название	Описание
title	заголовок блока

Source Code - исходный код компонента

<template lang="pug">
  section.zeen-how-get-coins
    ZeenContainer
      slot(name="title")
      .zeen-pb
        .zeen-pb__text
          .zeen-pb__how
            span.zeen-pb__done {{ numberOfDone }}
            span.zeen-pb__total  {{ from }} {{ numberOfTotal }}
          .zeen-pb__percent {{ progressPercent }}%
        .zeen-pb__wrapper
          .zeen-pb__width(:style='styleObjectProgressBarPercent')
      ul.zeen-how-get-coins__list
        li.zeen-how-get-coins__item(
          :class='{"zeen-how-get-coins__item_zero": !hasPoints(task)}'
          v-for='(task, i) in sortedTasksByStatus'
          :key='"task_" + i'
        )
          .zeen-how-get-coins__title {{ task.title }}
          .zeen-how-get-coins__coins
            span.zeen-how-get-coins__done {{ task.points_earned + '' }}
            span.zeen-how-get-coins__full  / {{ task.max_points }}
</template>

<script>
import ZeenContainer from '../../components/ZeenContainer/ZeenContainer'

export default {
  name: 'ZeenHowGetCoins',
  components: {ZeenContainer},
  props: {
    tasks: {
      type: Array,
      default: () => [],
    },
    from: {
      type: String,
      default: 'из',
    },
    byPoints: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    isDone(task) {
      return task.max_points - task.points_earned === 0
    },
    hasPoints(task) {
      return task.points_earned > 0
    },
  },
  computed: {
    sortedTasksByStatus() {
      const sortedTasks = this.tasks.slice()
      return sortedTasks.sort((a) => {
        if (this.isDone(a)) {
          return -1
        }
        if (+a.points_earned > 0) {
          return -1
        }
        if (+a.points_earned === 0) {
          return 1
        }
      })
    },
    numberOfDone() {
      const availablePoints = this.tasks.filter((task) => {
        return task.points_earned > 0
      })

      if (this.byPoints) {
        return availablePoints.reduce((acc, task) => {
          acc += task.points_earned
          return acc
        }, 0)
      }

      return availablePoints.length
    },
    numberOfTotal() {
      if (this.byPoints) {
        return this.tasks.reduce((acc, task) => {
          acc += task.max_points
          return acc
        }, 0)
      }

      return this.tasks.length
    },
    progressPercent() {
      const progress = Math.round((this.numberOfDone / this.numberOfTotal) * 100)
      if (isNaN(progress)) {
        return '0'
      } else {
        return progress
      }
    },
    styleObjectProgressBarPercent() {
      return {
        width: this.progressPercent + '%',
      }
    },
  },
}
</script>

<style lang="scss">
@import 'src/styles/mixins';

:root {
  /* Размеры */
  --zeen-progress-bar-wrapper-height: 12px;
  --zeen-progress-bar-wrapper-border-radius: 5px;
  --zeen-progress-bar-font-size: var(--main-larger-size);
  --zeen-progress-bar-font-weight: 600;
  --zeen-pb-font-size: var(--main-large-size);
  --zeen-pb-font-weight: 600;
  --zeen-pb-margin-top: 15px;
  --zeen-pb-margin-bottom: -15px;
  --zeen-pb-margin-horizontal: 0;
  --zeen-pb-padding-vertical: 15px;
  --zeen-pb-padding-horizontal: 0;

  /* Цвета */
  --zeen-progress-bar-wrapper-background: var(--gray-3);
  --zeen-progress-bar-percent-background: var(--main-color);
  --zeen-progress-title-done-color: var(--main-color);
  --zeen-progress-title-percent-color: var(--main-color);
  --zeen-progress-title-total-color: var(--main-negative-color);
  --zeen-pb-title-done-color: var(--main-negative-color);
  --zeen-pb-number-done-color: var(--main-color);
  --zeen-pb-not-started: var(--gray-2);

  @include tablets {
    --zeen-progress-bar-font-size: var(--main-large-size);
  }

  @include phones {
    --zeen-progress-bar-wrapper-height: 9px;
    --zeen-pb-font-size: var(--main-smallest-text);
    --zeen-pb-padding-vertical: 10px;
    --zeen-pb-padding-horizontal: 0;
    --zeen-pb-margin-top: 10px;
    --zeen-pb-margin-bottom: -10px;
    --zeen-pb-margin-horizontal: 0;
  }
}
</style>

<style lang="scss" scoped>
@import 'src/styles/mixins';

.zeen-how-get-coins {
  &__list {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: var(--zeen-pb-margin-top) var(--zeen-pb-margin-horizontal) var(--zeen-pb-margin-bottom);
  }

  &__item {
    display: flex;
    justify-content: space-between;
    list-style-type: none;
    padding: var(--zeen-pb-padding-vertical) var(--zeen-pb-padding-horizontal);

    &_zero {
      & .zeen-how-get-coins {
        &__title,
        &__done,
        &__full {
          color: var(--zeen-pb-not-started);
        }
      }
    }
  }

  &__done {
    color: var(--zeen-pb-number-done-color);
  }

  &__title,
  &__full {
    color: var(--zeen-pb-title-done-color);
  }

  &__title,
  &__coins {
    line-height: 1.3;
    font-weight: var(--zeen-pb-font-weight);
    font-size: var(--zeen-pb-font-size);
  }
}

.zeen-pb {
  &__text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }

  &__done {
    color: var(--zeen-progress-title-done-color);
  }

  &__percent {
    color: var(--zeen-progress-title-percent-color);
  }

  &__total {
    color: var(--zeen-progress-title-total-color);
  }

  &__percent,
  &__how {
    line-height: 1.3;
    font-weight: var(--zeen-progress-bar-font-weight);
    font-size: var(--zeen-progress-bar-font-size);
  }

  &__wrapper {
    width: 100%;
    overflow: hidden;
    height: var(--zeen-progress-bar-wrapper-height);
    background-color: var(--zeen-progress-bar-wrapper-background);
    border-radius: var(--zeen-progress-bar-wrapper-border-radius);
  }

  &__width {
    width: 100%;
    height: 100%;
    background-color: var(--zeen-progress-bar-percent-background);
    border-radius: var(--zeen-progress-bar-wrapper-border-radius);
  }
}
</style>