enfrancais-app/src/pages/library/LibraryOptions.vue

<template>
  <div v-if="show" class="library-options">
    <b-form-group
      class="mode-select-group"
      :label="$t('options.display.title')"
      v-slot="{ ariaDescribedby }"
    >
      <b-form-radio-group
        id="mode-select"
        v-model="activeMode" :options="modes"
        name="mode-select" :aria-describedby="ariaDescribedby"
        buttons button-variant="outline-dark"
      />
    </b-form-group>

    <!-- LIST + MAP ONLY -->
    <b-form-group
      class="filters-group"
      v-if="mode !== 'tree'"
      :label="$t('options.filters.title')"
    >
      <b-form-group
        :label="$t('options.filters.choices.tags')"
        label-for="tags-select"
      >
        <multiple-tags-select
          id="tags-select" :button-text="$t('options.filters.add')"
          v-model="activeTags" :options="tagsOptions"
        />
      </b-form-group>

      <b-form-group
        :label="$t('options.filters.choices.strangeness')"
        label-for="strangeness-input"
      >
        <div class="strangeness-input-wrapper">
          <b-form-input
          id="strangeness-input"
          type="range" min="0" max="5"
          v-model="strangeness"
          />
        </div>
      </b-form-group>
    </b-form-group>

    <!-- LIST + MAP ONLY -->
    <b-form-group
      v-if="mode !== 'tree'"
      :label="$t('options.search.title')"
    >
      <b-input-group append="search-icon">
        <b-form-input
          v-model="activeSearch" id="search-input" trim
        />
      </b-input-group>
    </b-form-group>

    <!-- TREE ONLY -->
    <b-form-group
      v-else
      label="Texte de départ :"
      label-for="text-depart-select"
    >
      <b-form-select
        id="text-depart-select"
        v-model="activeNodeId"
        :options="nodesDepartsOptions"
        class="border"
      />
    </b-form-group>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import MultipleTagsSelect from '@/components/formItems/MultipleTagsSelect'

export default {
  name: 'LibraryOptions',

  components: {
    MultipleTagsSelect
  },

  data () {
    return {
      modes: [
        { text: this.$t('options.display.choices.tree-map'), value: 'tree' },
        { text: this.$t('options.display.choices.card-map'), value: 'map' },
        { text: this.$t('options.display.choices.card-list'), value: 'list' }
      ],
      selectedTags: [],
      strangeness: 0
    }
  },

  computed: {
    ...mapGetters([
      'nodesDepartsOptions',
      'tagsOptions',
      'nodebook',
      'mode',
      'nodeDepartId',
      'search',
      'tags'
    ]),

    show () {
      return this.nodebook.length === 0
    },

    activeNodeId: {
      get () { return this.nodeDepartId },
      set (value) {
        this.$store.dispatch('SET_NODE_DEPART_ID', value)
      }
    },

    activeMode: {
      get () { return this.mode },
      set (value) {
        this.$store.dispatch('UPDATE_QUERY_MODE', value)
      }
    },

    activeSearch: {
      get () { return this.search },
      set (value) {
        this.$store.commit('SET_SEARCH', value)
      }
    },

    activeTags: {
      get () { return this.tags },
      set (value) {
        this.$store.commit('UPDATE_TAGS', value)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.library-options {
  padding: 0 $header-spacer-sm $header-spacer-sm;
  background-color: $body-bg;
  width: 100%;


  @include media-breakpoint-down(tb) {
    font-size: 0.9rem;

    ::v-deep {
      .btn, .form-control, .input-group-text {
        font-size: inherit;
      }
    }
  }

  @include media-breakpoint-up(md) {
    padding: 0 $header-spacer $header-spacer;
    display: flex;
    justify-content: space-between;
  }


  ::v-deep {
    @include media-breakpoint-up(md) {
      flex-wrap: wrap;

      fieldset {
        margin-bottom: 0;*
        &:last-child {
          flex-shrink: 2;
        }
      }
    }

    > :last-child {
      margin-bottom: 0;
    }

    .mode-select-group {
      label {
        border-color: transparent;

        &:not(:disabled):not(.disabled):active,
        &:not(:disabled):not(.disabled).active {
          background-color: transparent;
          color: $black;
        }
      }
    }

    .filters-group {
      margin: 0;
      label {
        margin-right: .5rem;
      }

      .form-group {
        display: flex;
      }

      > div {
        :last-child {
          position: relative;

          label {
            white-space: nowrap;
          }

          .strangeness-input-wrapper {
            min-width: 150px;
            &::before,
            &::after {
              content: '';
              display: inline-block;
              width: 3px;
              height: 20px;
              background-color: $black;
              position: absolute;
            }

            &::after {
              margin-left: -2px;
            }
          }
        }
      }

      @include media-breakpoint-up(md) {
        min-width: 450px;

        .form-group {
          margin-bottom: 0;
        }

        > div {
          display: flex;
          justify-content: space-between;

          > :first-child {
            margin-right: 1rem;
          }
        }
      }
    }

    .form-control[type='text'] {
      border-color: $black;
      border-right: 0;
      height: calc(1.75em + #{2 * $border-width});
    }

    .input-group-text {
      border-color: $black;
      background-color: transparent;
    }
  }
}
</style>