Skip to content

Instantly share code, notes, and snippets.

@evan4

evan4/RightMenu

Last active January 29, 2019 13:29
Show Gist options
  • Save evan4/e25197c1d8108459b52358ad11226dac to your computer and use it in GitHub Desktop.
Save evan4/e25197c1d8108459b52358ad11226dac to your computer and use it in GitHub Desktop.
Download ZIP
Raw
RightMenu
<template>
<div v-if="drawerChild">
<v-navigation-drawer class="right-menu" right
v-model="drawerChild"
temporary
absolute
style="z-index: 9"
>
<v-list id="right-menu-resume" style="text-align: center">
<v-list-group class="resume_field_activity" no-action sub-group>
<v-list-tile slot="activator">
<v-list-tile-title>Настройки фильтров</v-list-tile-title>
</v-list-tile>
<div class="search-filtrs pl-4 pr-4 pt-4 pb-0" style="width: 100%">
<v-layout style="width: 100%" row>
<div style="width: 100%">
<v-text-field label="Поиск" prepend-inner-icon="search"></v-text-field>
</div>
<div class="btn_right_menu">
<v-btn style="width: 130px;">Показать</v-btn>
</div>
</v-layout>
</div>
<v-list class="pa-4 height-between-checkbox-with-tree-no-drop">
<v-radio-group v-model="radios_3" :mandatory="false">
<v-radio label="Пользовательская настройка №1" :value="0"></v-radio>
<v-radio label="Пользовательская настройка №2" :value="1"></v-radio>
<v-radio label="Пользовательская настройка №3" :value="2"></v-radio>
</v-radio-group>
</v-list>
</v-list-group>
<!-- ! сферы д-сти -->
<!-- TODO + -->
<!-- + -->
<v-list-group v-if="getRightMenuFilters('field_of_activity')" class="resume_field_activity" no-action sub-group @click="field_of_activity = !field_of_activity">
<v-list-tile slot="activator">
<v-list-tile-title>Сферы деятельности</v-list-tile-title>
</v-list-tile>
<div class="search-filtrs pl-4 pr-4 pt-4 pb-0" style="width: 100%">
<v-layout style="width: 100%" row>
<div style="width: 100%">
<v-text-field label="Поиск" prepend-inner-icon="search"></v-text-field>
</div>
<div class="btn_right_menu">
<v-btn style="width: 130px;">Показать</v-btn>
</div>
</v-layout>
</div>
<check-list v-if="field_of_activity" :filter="getRightMenuItems('field_of_activity')"></check-list>
</v-list-group>
<!-- ! профессии -->
<!-- TODO + -->
<!-- - многоуровневая вложенность -->
<v-list-group v-if="getRightMenuFilters('profession')" class="resume_proffesions" no-action sub-group>
<v-list-tile slot="activator">
<v-list-tile-title>Профессии, компетенции и уровни владения </v-list-tile-title>
</v-list-tile>
<div class="pl-4 pr-4 pt-4 pb-0" style="width: 100%">
<v-layout style="width: 100%" row>
<div style="width: 100%">
<v-text-field label="Поиск" prepend-inner-icon="search"></v-text-field>
</div>
<div>
<v-btn class="mr-0" style="width: 130px">Показать</v-btn>
</div>
</v-layout>
</div>
<v-list class="pa-4 height-between-checkbox-with-tree">
<v-list-group no-action sub-group v-for="profession in getRightMenuItems('profession')">
<v-list-group no-action sub-group v-for="competence in getRightMenuItems('competence')">
<v-list-tile slot="activator">
<v-checkbox :label="competence.name"></v-checkbox>
</v-list-tile>
<v-list-tile v-for="level_of_proficiency in getRightMenuItems('level_of_proficiency')">
<v-checkbox :label="level_of_proficiency.name" :v-model="level_of_proficiency.value"></v-checkbox>
</v-list-tile>
</v-list-group>
</v-list-group>
</v-list>
</v-list-group>
<!-- ! возраст -->
<!-- TODO + -->
<!-- + -->
<v-list-group @click="age = !age" v-if="getRightMenuFilters('age')" no-action sub-group>
<v-list-tile slot="activator">
<v-list-tile-title>Возраст</v-list-tile-title>
</v-list-tile>
<range v-if="age" :min="getRightMenuItems('age').min" :max="getRightMenuItems('age').max" label="Возраст"> </range>
{{getRightMenuItems('age').min}}
</v-list-group>
<!-- ! занятость -->
<!-- TODO + -->
<!-- + -->
<v-list-group @click="employment = !employment" v-if="getRightMenuFilters('employment')" no-action sub-group>
<v-list-tile slot="activator">
<v-list-tile-title>Занятость</v-list-tile-title>
</v-list-tile>
<check-list v-if="employment" :filter="getRightMenuItems('employment')"></check-list>
</v-list-group>
<!-- ! формат работы -->
<!-- TODO + -->
<!-- + -->
<v-list-group @click="format_of_work = !format_of_work" v-if="getRightMenuFilters('format_of_work')" no-action sub-group>
<v-list-tile slot="activator">
<v-list-tile-title>Форматы работы</v-list-tile-title>
</v-list-tile>
<check-list v-if="format_of_work" :filter="getRightMenuItems('format_of_work')"></check-list>
</v-list-group>
<!-- ! зарплата -->
<!-- TODO + -->
<!-- + -->
<v-list-group @click="salary = !salary" v-if="getRightMenuFilters('desired_salary_level_newbie') || getRightMenuFilters('desired_salary_level_experienced')"
no-action sub-group>
<v-list-tile slot="activator">
<v-list-tile-title>Зарплата</v-list-tile-title>
</v-list-tile>
<template v-if="salary">
<range :min="getRightMenuItems('desired_salary_level_newbie').min" :max="getRightMenuItems('desired_salary_level_newbie').max" label="'H'"> </range>
<range :min="getRightMenuItems('desired_salary_level_newbie').min" :max="getRightMenuItems('desired_salary_level_newbie').max" label="'O'"> </range>
</template>
</v-list-group>
<!-- ! языки -->
<!-- TODO + -->
<!-- - многоуровневая вложенность -->
<v-list-group v-if="getRightMenuFilters('language')" no-action sub-group>
<v-list-tile slot="activator">
<v-list-tile-title>Языки</v-list-tile-title>
</v-list-tile>
<div class="search-filtrs pl-4 pr-4 pt-4 pb-0" style="width: 100%">
<v-layout style="width: 100%" row>
<div style="width: 100%">
<v-text-field label="Поиск" prepend-inner-icon="search"></v-text-field>
</div>
<div class="btn_right_menu">
<v-btn style="width: 130px;">Показать</v-btn>
</div>
</v-layout>
</div>
<v-list class="pa-4 height-between-checkbox-with-tree" v-for="language in getRightMenuItems('language')">
<v-list-group no-action sub-group>
<v-list-tile slot="activator">
<v-checkbox :label="language.name"></v-checkbox>
</v-list-tile>
<v-list-tile v-for="level_of_proficiency in getRightMenuItems('level_of_proficiency')">
<v-checkbox :label="level_of_proficiency.name" v-model="level_of_proficiency.value"></v-checkbox>
</v-list-tile>
</v-list-group>
</v-list>
</v-list-group>
<!-- ! область -->
<!-- TODO + -->
<v-list-group v-if="getRightMenuFilters('region')" no-action sub-group @click="region = !region">
<v-list-tile slot="activator">
<v-list-tile-title>Область</v-list-tile-title>
</v-list-tile>
<div class="search-filtrs pl-4 pr-4 pt-4 pb-0" style="width: 100%">
<v-layout style="width: 100%" row>
<div style="width: 100%">
<v-text-field label="Поиск" prepend-inner-icon="search"></v-text-field>
</div>
<div class="btn_right_menu">
<v-btn style="width: 130px">Показать</v-btn>
</div>
</v-layout>
</div>
<!-- <template v-for="region in getRightMenuItems('region')">
<v-list-tile>
<v-checkbox :label="region.name"></v-checkbox>
</v-list-tile>
</template> -->
<check-list v-if="region" :filter="getRightMenuItems('region')"></check-list>
</v-list-group>
<!-- ! район -->
<!-- TODO + -->
<v-list-group v-if="getRightMenuFilters('district')" no-action sub-group @click="district = !district">
<v-list-tile slot="activator">
<v-list-tile-title>Район</v-list-tile-title>
</v-list-tile>
<div class="search-filtrs pl-4 pr-4 pt-4 pb-0" style="width: 100%">
<v-layout style="width: 100%" row>
<div style="width: 100%">
<v-text-field label="Поиск" prepend-inner-icon="search"></v-text-field>
</div>
<div class="btn_right_menu">
<v-btn style="width: 130px">Показать</v-btn>
</div>
</v-layout>
<check-list v-if="district" :filter="getRightMenuItems('district')"></check-list>
</div>
</v-list-group>
<!-- ! автомобиль -->
<!-- TODO + -->
<v-list-group @click="car = !car" v-if="getRightMenuFilters('district')" no-action sub-group>
<v-list-tile slot="activator">
<v-list-tile-title>Автомобиль</v-list-tile-title>
</v-list-tile>
<div v-if="car" class="search-filtrs pl-4 pr-4 pt-4 pb-0" style="width: 100%">
<v-layout row class="pa-4">
<span>Категория</span>
<check-list :filter="getRightMenuItems('car_driver_license_categories')"></check-list>
</v-layout>
<v-layout row class="pa-4">
<span>Год производства</span>
<range :min="getRightMenuItems('year_of_manufacture').min" :max="getRightMenuItems('year_of_manufacture').max" label=""> </range>
</v-layout>
<v-layout row class="pa-4">
<span>Вид топлива</span>
<radio-list :filters="getRightMenuItems('fuel_type')" :model="radios_1"> </radio-list>
</v-layout>
<v-layout row class="pa-4">
<span>Тип кузова</span>
<radio-list :filters="getRightMenuItems('body_type')" :model="radios_2"> </radio-list>
</v-layout>
<v-layout row class="pa-4">
<span>Расход топлива (город)</span>
<range :min="getRightMenuItems('fuel_consumption_city').min" :max="getRightMenuItems('fuel_consumption_city').max" label=""> </range>
</v-layout>
<v-layout row class="pa-4">
<span>Расход топлива (трасса)</span>
<range :min="getRightMenuItems('fuel_consumption_highway').min" :max="getRightMenuItems('fuel_consumption_highway').max" label=""></range> </range>
</v-layout>
<v-layout row class="pa-4">
<span>Грузоподъёмность</span>
<range :min="getRightMenuItems('cargo_capacity').min" :max="getRightMenuItems('cargo_capacity').max" label=""> </range>
</v-layout>
<v-layout row class="pa-4">
<span>Пассажиры</span>
<range :min="getRightMenuItems('capacity_of_people').min" :max="getRightMenuItems('capacity_of_people').max" label=""> </range>
</v-layout>
</div>
</v-list-group>
</v-list>
</v-navigation-drawer>
</div>
</template>
<script>
import router from '../../router'
import range from '@/components/right_menu/items/range'
import CheckList from '@/components/right_menu/items/list'
import RadioList from '@/components/right_menu/items/radio'
export default {
props: ['drawer'],
data: () => ({
drawerChild: false,
field_of_activity: false,
age: false,
employment: false,
format_of_work: false,
salary: false,
car: false,
region: false,
district: false,
drawer_right_menu: true,
MyArray: {
'name': 'name 1',
'name2': 'name 2'
},
radios_1: 0,
radios_2: 0,
radios_3: 0,
GetFilters: {
0: [
'field_of_activity',
'profession',
'language',
'employment',
'format_of_work',
'desired_salary_level_newbie',
'desired_salary_level_experienced',
'age',
'car_driver_license_categories',
'body_type',
'year_of_manufacture',
'fuel_type',
'fuel_consumption_city',
'fuel_consumption_highway',
'cargo_capacity',
'capacity_liters',
'capacity_of_people',
'district',
'region'
],
1: [
'field_of_activity',
'profession',
'language',
'employment',
'format_of_work',
'desired_salary_level_newbie',
'desired_salary_level_experienced',
'age',
'car_driver_license_categories'
],
2: [
'fuel_consumption_city',
'fuel_consumption_highway',
'cargo_capacity',
'capacity_liters',
'capacity_of_people',
'district',
'region'
]
},
RightMenuFilters: [
'field_of_activity',
'profession',
'language',
'employment',
'format_of_work',
'desired_salary_level_newbie',
'desired_salary_level_experienced',
'age',
'car_driver_license_categories',
'body_type',
'year_of_manufacture',
'fuel_type',
'fuel_consumption_city',
'fuel_consumption_highway',
'cargo_capacity',
'capacity_liters',
'capacity_of_people',
'district',
'region'
]
}),
components: {
range,
CheckList,
RadioList
},
watch: {
drawer (value) {
this.drawerChild = value;
},
drawerChild (value) {
this.$emit('drawerStatusR', value)
},
radios_3: function (value) {
this.$store.dispatch('SET_RIGHT_MENU_FILTERS', this.GetFilters[value])
},
Visible: function (val) {
router.push({ path: '/' })
//router.go(-1)
}
},
methods: {
mmm () {
this.MyArray['newkey'] = 'rrrrrrr'
},
setVisibleRightMenu () {
this.$store.dispatch('SET_V_RIGHT_MENU')
},
draw_vacansy () {
this.$store.dispatch('card_set_is_own', false)
this.$store.dispatch('card_set_is_archive', false)
},
get_vacansy_from_worker () {
this.$store.dispatch('vacansy_card_set_is_own', false)
},
parse_cards_company () {
this.$store.dispatch('company_card_set_card', this.cards_logo)
this.$store.dispatch('company_card_set_what_is_card', 1)
},
getRightMenuItems (Key) {
return this.$store.getters.GET_RIGHT_MENU_ITEMS(Key)
},
getRightMenuFilters (Key) {
return this.$store.getters.GET_RIGHT_MENU_FILTERS(Key)
}
},
computed: {
Visible () {
return this.$store.getters.GET_V_RIGHT_MENU
}
},
mounted () {
console.log(this.drawer);
// console.log(this.$route.path)
// this.drawer_right_menu = true
},
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment