ProjectsMenu.vue

<template>
  <div id="filters-container">
    <div
      class="ui styled accordion"
      @click="displayFilters = !displayFilters"
    >
      <div
        id="filters"
        class="title collapsible-filters"
      >
        FILTRES
        <i
          :class="['ui icon customcaret', { 'collapsed': !displayFilters }]"
          aria-hidden="true"
        />
      </div>
    </div>
    <div :class="['full-width', { 'hidden': displayFilters }]">
      <div class="ui menu filters">
        <div class="item">
          <label>
            Niveau d'autorisation requis
          </label>
          <DropdownMenuItem
            :options="accessLevelOptions"
            v-on="$listeners"
          />
        </div>
        <div class="item">
          <label>
            Mon niveau d'autorisation
          </label>
          <DropdownMenuItem
            :options="userAccessLevelOptions"
            v-on="$listeners"
          />
        </div>
        <div class="item">
          <label>
            Modération
          </label>
          <DropdownMenuItem
            :options="moderationOptions"
            v-on="$listeners"
          />
        </div>
        <div class="item">
          <label>
            Recherche par nom
          </label>
          <search-projects
            :search-function="SEARCH_PROJECTS"
            v-on="$listeners"
          />
        </div>
      </div>
      <div class="ui menu filters">
        <div
          v-for="projectAttribute in displayedProjectAttributes"
          :key="projectAttribute.id"
          class="item"
        >
          <label>
            {{ projectAttribute.label }}
          </label>
          <!-- <FeatureExtraForm
            :options="projectAttribute.options"
            v-on="$listeners"
          /> -->
          <FeatureExtraForm
          :id="`attribute-value-for-${projectAttribute.name}`"
          ref="extraForm"
          name="attribute-value"
          :field="{ ...projectAttribute, value: projectAttribute.default_filter_value }"
          :use-value-only="true"
          @update:value="updateValue($event.toString(), projectAttribute.id)"
        />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

import DropdownMenuItem from '@/components/Projects/DropdownMenuItem.vue';
import SearchProjects from '@/components/Projects/SearchProjects.vue';
import FeatureExtraForm from '@/components/Feature/Edit/FeatureExtraForm';

export default {
  name: 'ProjectsMenu',

  components: {
    DropdownMenuItem,
    SearchProjects,
    FeatureExtraForm,
  },

  data() {
    return {
      displayFilters: false,
      moderationOptions: [
        {
          label: 'Tous',
          filter: 'moderation',
          value: null
        },
        {
          label: 'Projet modéré',
          filter: 'moderation',
          value: 'true'
        },
        {
          label: 'Projet non modéré',
          filter: 'moderation',
          value: 'false'
        },
      ],
      accessLevelOptions: [
        {
          label: 'Tous',
          filter: 'access_level',
          value: null
        },
        {
          label: 'Utilisateur anonyme',
          filter: 'access_level',
          value: 'anonymous'
        },
        {
          label: 'Utilisateur connecté',
          filter: 'access_level',
          value: 'logged_user'
        },
        {
          label: 'Contributeur',
          filter: 'access_level',
          value: 'contributor'
        },
      ],
      userAccessLevelOptions: [
        {
          label: 'Tous',
          filter: 'user_access_level',
          value: null
        },
        {
          label: 'Utilisateur connecté',
          filter: 'user_access_level',
          value: '1'
        },
        {
          label: 'Contributeur',
          filter: 'user_access_level',
          value: '2'
        },
        {
          label: 'Super contributeur',
          filter: 'user_access_level',
          value: '3'
        },
        {
          label: 'Modérateur',
          filter: 'user_access_level',
          value: '4'
        },
        {
          label: 'Administrateur projet',
          filter: 'user_access_level',
          value: '5'
        },
      ],
      projectAttributesFilter: {},
    };
  },

  computed: {
    ...mapState(['user', 'projectAttributes']),

    displayedProjectAttributes() {
      return this.projectAttributes.filter(el => el.display_filter);
    },
  },

  created() {
    if (!this.user) {
      this.userAccessLevelOptions.splice(1, 0, {
        label: 'Utilisateur anonyme',
        filter: 'user_access_level',
        value: '0'
      });
    }
  },

  methods: {
    ...mapActions('projects', [
      'SEARCH_PROJECTS'
    ]),
    updateValue(value, id) {
      // update the project attributes key/value object
      this.projectAttributesFilter[id] = value;
      // emit the new project attributes object to be set as a project filter in query
      this.$emit('filter', { filter: 'attributes', value: JSON.stringify(this.projectAttributesFilter) });
    }
  }
};
</script>

<style lang="less" scoped>
.transition-properties(...) {
  -webkit-transition: @arguments;
  -moz-transition: @arguments;
  -o-transition: @arguments;
  transition: @arguments;
}

#filters-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-end;
	.accordion {
		width: fit-content;
		.collapsible-filters {
			font-size: 1.25em;
			padding-right: 0;
      .customcaret{
        transition: transform .2s ease;
        &.collapsed {
          transform: rotate(180deg);
        }
        &::before{
          position: relative;
          right: 0;
          top: 65%;
          color: #999;
          margin-top: 4px;
          border-color: #999 transparent transparent;
          border-style: solid;
          border-width: 5px 5px 0;
          content: "";
        }
      }
		}
	}
	.filters {
		width: 100%;
		height:auto;
		min-height: 0;
		max-height:75px;
    opacity: 1;
		margin: 0 0 1em 0;
    border: none;
    box-shadow: none;
		.transition-properties(all 0.2s ease-out;);
		.item {
			display: flex;
			flex-direction: column;
			align-items: flex-start !important;
			padding: 0.5em;

			label {
				margin-bottom: 0.2em;
				font-size: 0.9em;
				font-weight: 600;
			}
		}
		.item {
			width: 25%;
		}
    .item::before {
			width: 0;
		}
    #search-projects {
      width: 100%;
    }
	}
	.filters.hidden {
		overflow: hidden;
    opacity: 0;
    max-height: 0;
	}
}

@media screen and (min-width: 701px) {
  .item {
    &:first-child {
      padding-left: 0;
    }
    &:last-child {
      padding-right: 0;
    }
  }
}

@media screen and (max-width: 700px) {
  #filters-container {

    .filters {
      display: flex;
      flex-direction: column;
      max-height: 275px;
      .transition-properties(all 0.2s ease-out;);

      .item {
        width: 100%;
        padding-right: 0;
        padding-left: 0;
      }
    }
  }
}
</style>