ZeenBlockCreateTable

Компонент ZeenBlockCreateTable

Примеры:

• 

  Комнаты для общения со спикерами

  На платформе вы можете проводить небольшие митапы со спикерами, делиться полезной информацией и получать обратную связь

  • Комната 1 Заголовок

    0 / 100 зрителей

  • Комната 2 Заголовок

    30 / 100 зрителей

    • Ivan Ivan Ivan Ivan Ivan Ivan Ivan Ivan Ivan Ivan
    • Ivan Ivan Ivan Ivan Ivan Ivan Ivan Ivan Ivan Ivan
    • Ivan Ivan Ivan Ivan Ivan Ivan Ivan Ivan Ivan Ivan
    • Ivan Ivan Ivan Ivan Ivan Ivan Ivan Ivan Ivan Ivan
    • Ivan Ivan Ivan Ivan Ivan Ivan Ivan Ivan Ivan Ivan

  • Комната 3 Заголовок

    100 / 100 зрителей

    • Ivan
    • Ivan Mitrofanov
    • Ivan Mitrofanov
    • Ivan Mitrofanov
    • Ivan Mitrofanov
    • Ivan Mitrofanov
    • Ivan Mitrofanov
    • Ivan Mitrofanov
    • Ivan Mitrofanov
    • Ivan Mitrofanov Fvfvfffvf
    • Ivan Mitrofanov

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

<template>
  <section class="create-table">
    <ZeenContainer class="create-table__container">
      <img v-if="src" class="create-table__bg" :src="src" />

      <div class="create-table__header">
        <ZeenHeadline class="create-table__title">
          <slot name="title">
            {{ title }}
          </slot>
        </ZeenHeadline>

        <ZeenText class="create-table__description" v-if="description">
          <slot name="description">
            {{ description }}
          </slot></ZeenText
        >
      </div>

      <ul class="create-table__list-items">
        <li class="create-table__item" v-for="(table, index) in dataTable" :key="table.table_id">
          <ZeenListTableItem
            ref="item"
            :index="index"
            :title="table.title"
            :button="buttonJoin"
            :table="table"
            v-bind="attrListTableItem"
            @join="joinTable"
          />
        </li>
      </ul>
      <ZeenButton v-if="accessButton" @click.prevent="openModal" size="parentWidth">
        <template v-slot:leftIcon>
          <slot name="left-icon" />
        </template>
        <slot name="button">
          {{ button }}
        </slot>
      </ZeenButton>
    </ZeenContainer>

    <client-only>
      <ZeenModal class="modal" name="create-table-modal">
        <template #title>
          <slot name="modal-title">
            {{ modalTitle }}
          </slot>
        </template>
        <ZeenTextInput
          class="modal__input"
          v-model="fieldNameTable"
          :error="fieldNameTableError"
          :required="isNameTableRequired"
          :placeholder="placeholderNameTable"
        />
        <template #footer>
          <ZeenButton
            class="modal__button"
            :is-loading="modalButton.isLoading"
            @click.prevent="createTable"
            size="parentWidth"
          >
            <slot name="modal-button">
              {{ modalButton.button }}
            </slot>
          </ZeenButton>
        </template>
      </ZeenModal>
    </client-only>
  </section>
</template>

<script>
import ZeenHeadline from '../../components/ZeenHeadline/ZeenHeadline'
import ZeenButton from '../../components/ZeenButton/ZeenButton'
import ZeenContainer from '../../components/ZeenContainer/ZeenContainer'
import ZeenModal from '../../components/ZeenModal/ZeenModal'
import ZeenTextInput from '../../components/inputs/ZeenTextInput/ZeenTextInput'
import ZeenListTableItem from '../../components/ZeenListTableItem/ZeenListTableItem'

export default {
  name: 'ZeenBlockCreateTable',
  components: {ZeenListTableItem, ZeenTextInput, ZeenModal, ZeenContainer, ZeenButton, ZeenHeadline},
  props: {
    src: {
      type: String,
    },
    title: {
      type: String,
      default: 'Комнаты для общения со спикерами',
    },
    description: {
      type: String,
      default:
        'На платформе вы можете проводить небольшие митапы со спикерами, делиться полезной информацией и получать обратную связь',
    },
    button: {
      type: String,
      default: '+ Создать комнату',
    },
    accessButton: {
      type: Boolean,
      required: true,
    },
    modalTitle: {
      type: String,
      default: 'Создать комнату',
    },
    modalButton: {
      type: Object,
      require: true,
    },
    placeholderNameTable: {
      type: String,
      default: 'Введите название стола',
    },
    placeholderDescriptionTable: {
      type: String,
      default: 'Введите краткое описание стола',
    },
    isNameTableRequired: {
      type: Boolean,
      default: true,
    },
    isDescriptionTableRequired: {
      type: Boolean,
      default: true,
    },
    errorNameTable: {
      type: String,
      default: 'Поле не должно быть пустым',
    },
    errorDescriptionTable: {
      type: String,
      default: 'Поле не должно быть пустым',
    },
    attrListTableItem: {
      type: Object,
    },
    dataTable: {
      type: Array,
      require: true,
    },
    buttonJoin: {
      type: Object,
      default: () => ({
        fullTable: 'Стол переполнен',
        table: 'Присоединиться',
        loadingText: 'Загрузка...',
        isLoading: false,
      }),
    },
  },
  data() {
    return {
      fieldNameTable: '',
      fieldNameTableError: '',
    }
  },
  methods: {
    openModal() {
      this.$vfm.show('create-table-modal')
    },
    closeModal() {
      this.$vfm.hide('create-table-modal')
    },
    createTable() {
      this.fieldNameTableError = this.fieldNameTable ? '' : this.errorNameTable
      if (this.fieldNameTable) {
        this.$emit('create-table', this.fieldNameTable)
      }
    },
    joinTable(event) {
      this.$emit('join', event)
    },
    returnComponent() {
      //todo: Необходим для получения в родительском блоке доступ к методам компонента
      return this.$refs.item
    },
  },
}
</script>

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

.create-table {
  padding-top: var(--zeen-block-create-table-padding-top);
  padding-bottom: var(--zeen-block-create-table-padding-bottom);
  background: var(--zeen-block-create-table-background);

  &__container {
    position: relative;
  }

  &__bg {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
    width: var(--zeen-block-create-table-bg-width);
    height: auto;

    @include phones {
      display: none;
    }
  }

  &__header {
    width: var(--zeen-block-create-table-header-width);
    display: flex;
    flex-direction: column;
    gap: var(--zeen-block-create-table-header-title-gap);
  }

  &__title {
    font-weight: var(--zeen-block-create-table-title-weight);
    font-size: var(--zeen-block-create-table-title-size);
    line-height: var(--zeen-block-create-table-title-line-height);
    color: var(--zeen-block-create-table-title);
  }

  &__description {
    font-weight: var(--zeen-block-create-table-description-weight);
    font-size: var(--zeen-block-create-table-description-size);
    line-height: var(--zeen-block-create-table-description-line-height);
    color: var(--zeen-block-create-table-description);
  }

  &__list-items {
    padding: 0;
    position: relative;
    z-index: 1;
    list-style: none;
    margin-top: var(--zeen-block-create-table-list-items-margin-top);
    margin-bottom: var(--zeen-block-create-table-list-items-margin-bottom);
  }

  &__item {
    &:not(:last-child) {
      margin-bottom: var(--zeen-block-create-table-item-margin-bottom);
    }
  }
}

.modal {
  --modal-max-width-desktop: var(--zeen-block-create-table-modal-max-width);

  ::v-deep {
    .modal {
      &__content {
        padding: 0;
        padding-top: var(--zeen-block-create-table-modal-content-padding-top_size_xl);
        overflow: hidden;
      }

      &__title {
        text-align: center;
        font-size: var(--zeen-block-create-table-modal-title-size);
        line-height: var(--zeen-block-create-table-modal-title-line-height);
        margin-bottom: var(--zeen-block-create-table-modal-title-margin-bottom_size_xl);
      }

      &__description {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 0;
        padding: 0 var(--zeen-block-create-table-modal-content-padding-y_size_sm);
      }

      &__footer {
        margin-top: var(--zeen-block-create-table-modal-footer-margin-top_size_xl);
      }
    }
  }

  &__input {
    width: var(--zeen-block-create-table-modal-field_width_xl);
    margin-bottom: var(--zeen-block-create-table-modal-field-margin-bottom_size_xl);
    @include phones {
      width: var(--zeen-block-create-table-modal-field_width_sm);
    }
  }

  &__textarea {
    width: var(--zeen-block-create-table-modal-field_width_xl);
    @include phones {
      width: var(--zeen-block-create-table-modal-field_width_sm);
    }
  }

  &__button {
    border-radius: 0;
  }
}
</style>