nuxt-frontend/components/Learning/ProductOverview/Organize.vue

<template>
  <accordion-card
    :title="$t('learning.product_overview.organize')"
    id="organize"
  >
    <v-row>
      <v-col cols="12" sm="12" md="3">
        <v-subheader class="txt--text font-weight-black">{{
          $t('learning.filters.type') | capitalize
        }}</v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6">
        <universalFilterSelector
          filterTitle="type"
          filterType="checkbox"
          :editMode="editMode"
        />
        <!-- v-if="isFilterTypeEmpty" -->
        <small class="error--text">Het type is verplicht</small>
        <br />
        <br />
      </v-col>
      <v-col cols="12" sm="12" md="3">
        <v-subheader v-if="editMode">
          {{ $t('learning.more_options_selectable') }}
        </v-subheader>
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" sm="12" md="3">
        <v-subheader class="txt--text font-weight-black">{{
          $t('learning.filters.product_type') | capitalize
        }}</v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6">
        <universalFilterSelector
          class="producttype"
          filterTitle="product_type"
          filterType="mixed"
          :editMode="editMode"
        />
      </v-col>
      <v-col cols="12" sm="12" md="3"> </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" sm="12" md="3">
        <v-subheader class="txt--text font-weight-black">{{
          $t('learning.filters.category') | capitalize
        }}</v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6">
        <universalFilterSelector
          filterTitle="category"
          :editMode="editMode"
          filterType="mixed"
        />
      </v-col>
      <v-col cols="12" sm="12" md="3"> </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" sm="12" md="3">
        <v-subheader class="txt--text font-weight-black">{{
          $t('learning.filters.theme') | capitalize
        }}</v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6">
        <universalFilterSelector
          filterTitle="theme"
          :editMode="editMode"
          filterType="mixed"
        />
      </v-col>
      <v-col cols="12" sm="12" md="3"> </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" sm="12" md="3">
        <v-subheader class="txt--text font-weight-black">{{
          $t('learning.filters.course') | capitalize
        }}</v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6">
        <universalFilterSelector
          filterTitle="course"
          :editMode="editMode"
          filterType="mixed"
        />
      </v-col>
      <v-col cols="12" sm="12" md="3"> </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" sm="12" md="3">
        <v-subheader class="txt--text font-weight-black">{{
          $t('learning.filters.audience') | capitalize
        }}</v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6">
        <universalFilterSelector
          filterTitle="audience"
          :editMode="editMode"
          filterType="mixed"
        />
      </v-col>
      <v-col cols="12" sm="12" md="3">
        <v-subheader v-if="editMode">
          {{ $t('learning.more_options_selectable') }}
        </v-subheader>
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" sm="12" md="3">
        <v-subheader class="txt--text font-weight-black">{{
          $t('learning.filters.quality_standards') | capitalize
        }}</v-subheader>
      </v-col>
      <v-col cols="12" sm="12" md="6">
        <universalFilterSelector
          filterTitle="quality_standards"
          :editMode="editMode"
          filterType="mixed"
        />
      </v-col>
      <v-col cols="12" sm="12" md="3">
        <v-subheader v-if="editMode">
          {{ $t('learning.more_options_selectable') }}
        </v-subheader>
      </v-col>
    </v-row>
  </accordion-card>
</template>

<script>
import accordionCard from '@/components/UI/AccordionCard/AccordionCard'
import universalFilterSelector from '@/components/UniversalFilterSelector/UniversalFilterSelector'
// import { mapGetters } from 'vuex'

export default {
  components: {
    accordionCard,
    universalFilterSelector,
  },
  props: {
    editMode: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    isFilterTypeEmpty() {
      return this.$store.getters.isFilterTypeEmpty
    },
  },
}
</script>

<style scoped>
#organize >>> .v-input__slot .v-select__slot {
  margin-left: -4px;
}
#organize >>> .producttype .v-input__slot .v-select__slot {
  margin-left: 0;
}
</style>