Zeen Component Library

# ZeenPreviewQuestions

Компонент блока с вопросами спикерам до начала конференции

# Примеры:

[slot#form_topBlock]

form.askQuestionTitle

form.askQuestionDescription

list.title

list.description

list.notFound

# Slots

Название Описание Обязательный По умолчанию
startHeader Верхний блок стартового окна - -
endHeader Верхний блок окна результата - -
subTitle Подзаголовок (принимает объект #subTitle='{question}' для фильтрации по типу вопроса question.type: rates, multiple_rates, checkboxes, radio, input) - -

# Props

Название Тип Обязательный По умолчанию Описание
isFormDisplay Boolean + Отображать ли форму с отправкой вопроса
isListDisplay Boolean + Отображать ли список вопросов
userId String + ID юзера, который задает вопрос
chatId String + ID чата (с типом questions)
speakers Array + Список спикеров
questions Array + Список вопросов
text Object - {form: {...}, list: {item: {}, ...}} Объект текстов

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

<template lang="pug">
  section.zeen-preview-questions
    ZeenContainer
      ZeenPreviewQuestionsForm.zeen-preview-questions__form(
        v-if='isFormDisplay'
        v-bind='formProps'
        v-on='questionFormEvents'
      )
        template(v-for="(slot, slotName) in questionFormSlots" v-slot:[slotName]="params")
          slot(:name="`${questionFormPrefix}${slotName}`" v-bind="params")

      ZeenPreviewQuestionsList.zeen-preview-questions__list(
        :class='isDisplayLineBetween'
        v-if='isListDisplay'
        v-bind='listProps'
        v-on='questionListEvents'
      )
        template(v-for="(slot, slotName) in questionListSlots" v-slot:[slotName]="params")
          slot(:name="`${questionListPrefix}${slotName}`" v-bind="params")
</template>

<script>
import ZeenPreviewQuestionsForm from './ZeenPreviewQuestionsForm'
import ZeenPreviewQuestionsList from './ZeenPreviewQuestionsList'
import {createEventsFor, createSlotsFor} from '../../helpers/createBlockData'

export default {
  name: 'ZeenPreviewQuestions',
  components: {ZeenPreviewQuestionsForm, ZeenPreviewQuestionsList},
  props: {
    isFormDisplay: {
      type: Boolean,
      default: true,
    },
    isListDisplay: {
      type: Boolean,
      default: true,
    },
    userId: {
      type: String,
      required: true,
    },
    chatId: {
      type: String,
      required: true,
    },
    speakers: {
      type: Array,
      required: true,
    },
    questions: {
      type: Array,
      required: true,
    },
    text: {
      type: Object,
      default: () => {
        return {
          form: {
            anonymous: 'form.anonymous',
            askQuestionButton: 'form.askQuestionButton',
            askQuestionDescription: 'form.askQuestionDescription',
            askQuestionTitle: 'form.askQuestionTitle',
            messagePlaceholder: 'form.messagePlaceholder',
            modalSuccessButton: 'form.modalSuccessButton',
            modalSuccessSending: 'form.modalSuccessSending',
            sendButton: 'form.sendButton',
            speakerButton: 'form.speakerButton',
            speakerButtonForWho: 'form.speakerButtonForWho',
            speakerGeneral: 'form.speakerGeneral',
            speakerTitle: 'form.speakerTitle',
            title: 'form.title',
          },
          list: {
            title: 'list.title',
            description: 'list.description',
            latest: 'list.latest',
            oldest: 'list.oldest',
            popular: 'list.popular',
            all: 'list.all',
            general: 'list.general',
            notFound: 'list.notFound',
            item: {
              question: 'list.item.question',
              general: 'list.item.general',
              author: 'list.item.author',
            },
          },
        }
      },
    },
  },
  computed: {
    formProps() {
      return {
        chatId: this.chatId,
        text: this.text.form,
        speakers: this.speakers,
      }
    },
    listProps() {
      return {
        userId: this.userId,
        chatId: this.chatId,
        text: this.text.list,
        speakers: this.speakers,
        questions: this.questions,
      }
    },
    questionFormPrefix() {
      return 'form_'
    },
    questionFormEvents() {
      return createEventsFor(this, this.questionFormPrefix)
    },
    questionFormSlots() {
      return createSlotsFor(this, this.questionFormPrefix)
    },
    questionListPrefix() {
      return 'question_'
    },
    questionListEvents() {
      return createEventsFor(this, this.questionListPrefix)
    },
    questionListSlots() {
      return createSlotsFor(this, this.questionListPrefix)
    },
    isAllDisplay() {
      return this.isFormDisplay && this.isListDisplay
    },
    isDisplayLineBetween() {
      return {'zeen-preview-questions__list_line': this.isAllDisplay && this.questions.length}
    },
  },
}
</script>

<style lang="scss">
:root {
  /* Цвета */
  --zeen-preview-questions-line-between-color: var(--main-border-color);

  /* Размеры */
  --zeen-preview-questions-line-between-width: var(--main-input-border-width);
}
</style>

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

.zeen-preview-questions {
  &__list {
    &_line {
      border-top: var(--zeen-preview-questions-line-between-width) solid
        var(--zeen-preview-questions-line-between-color);
    }
  }
}
</style>

← ZeenLeaderboard →