You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
226 lines
7.8 KiB
226 lines
7.8 KiB
<template>
|
|
<v-card outlined class="rounded-xl px-3">
|
|
<v-card-title> {{ $t("Categories") }} </v-card-title>
|
|
<v-card-subtitle class="mt-0">
|
|
<v-card outlined class="d-flex flex-row justify-space-between align-center px-3" style="border-radius: 12px"
|
|
height="36" width="100%" :ripple="false" @click="dialog = true">
|
|
<div style="color: #9c9c9c">{{ $t(searchBarTitle) }}</div>
|
|
<v-img height="25" max-width="25" contain :src="require('~/assets/svg/search.svg')"></v-img>
|
|
</v-card>
|
|
</v-card-subtitle>
|
|
<v-card-text class="ml-n4 mt-n3">
|
|
<v-list>
|
|
<v-list-group :value="categoryExpend[i]" v-for="(category, i) in categories.slice(0, 8)" :key="'category-' + i"
|
|
:ref="'category-' + i" no-action class="my-n3">
|
|
<template v-slot:activator>
|
|
<v-list-item-title>{{ category.category }}</v-list-item-title>
|
|
</template>
|
|
|
|
<template v-slot:prependIcon>
|
|
<v-checkbox dense hide-details v-model="categoryChecked" :value="category.id" @click.stop="
|
|
() => {
|
|
clickCategory(category.id);
|
|
}
|
|
"></v-checkbox>
|
|
</template>
|
|
<v-list-item v-for="(subcategory, j) in category.subcategories" :key="'category-' + i + 'subcategory-' + j">
|
|
<v-list-item-icon>
|
|
<v-checkbox dense hide-details v-model="subcategoryChecked" :value="subcategory.id" @click.stop="">
|
|
</v-checkbox>
|
|
</v-list-item-icon>
|
|
<v-list-item-title v-text="subcategory.subcategory"></v-list-item-title>
|
|
</v-list-item>
|
|
</v-list-group>
|
|
</v-list>
|
|
</v-card-text>
|
|
<v-card-text>
|
|
<v-btn outlined class="rounded-xl remove-upper tw-border-primary-2 tw-text-primary-1 mt-n10"
|
|
style="padding: 10px auto" width="100%" @click="dialog = true">
|
|
{{ $t("See more") }}
|
|
</v-btn>
|
|
</v-card-text>
|
|
|
|
<v-dialog @click:outside="text = ''" v-model="dialog" width="644" height="618" class="rounded-xl">
|
|
<v-card class="rounded-xl pa-4" width="100%" height="100%">
|
|
<v-card-title>
|
|
<v-row no-gutters class="d-flex justify-space-between">
|
|
<div class="ml-n3">{{ $t("Select Exhibition Categories") }}</div>
|
|
<v-img :src="require('~/assets/svg/X.svg')" max-width="24" max-height="24" contain @click="dialog = false">
|
|
</v-img>
|
|
</v-row>
|
|
</v-card-title>
|
|
<v-card-subtitle class="mt-5">
|
|
<v-text-field outlined dense v-model="text" class="rounded-xl" :label="$t('Find Exhibition categories ...')">
|
|
<template v-slot:append>
|
|
<v-img height="25" width="25" class="mt-n1" contain :src="require('~/assets/svg/search.svg')"></v-img>
|
|
</template>
|
|
</v-text-field>
|
|
</v-card-subtitle>
|
|
<v-card-text>
|
|
<v-expansion-panels v-model="categoryDialogExpend" :key="updateExpand" class="elevation-0" flat multiple>
|
|
<template v-for="(category, i) in categories">
|
|
<v-expansion-panel :key="'category-' + i"
|
|
v-if="categoryChild[i] > 0 || text === ''" flat class="mt-0">
|
|
<v-expansion-panel-header class="py-0">
|
|
<div class="checkbox-wrap d-flex align-center">
|
|
<v-checkbox class="mt-0 pt-0" dense hide-details v-model="categoryChecked" :value="category.id"
|
|
@click.stop="
|
|
() => {
|
|
clickCategory(category.id);
|
|
}
|
|
"></v-checkbox>
|
|
</div>
|
|
<span class="ms-5">{{ category.category }}</span>
|
|
</v-expansion-panel-header>
|
|
<v-expansion-panel-content class="pb-0">
|
|
<template>
|
|
<v-spacer :key="'category-' + i + 'subcategory-' + j"
|
|
class="d-flex align-center panel-content-wrap" v-if="
|
|
subcategory.subcategory
|
|
.toLowerCase()
|
|
.includes(text.toLowerCase()) || text == ''
|
|
">
|
|
<div class="checkbox-wrap ms-9 me-5">
|
|
<v-checkbox dense hide-details class="mt-0 pt-0" v-model="subcategoryChecked"
|
|
:value="subcategory.id" @click.stop=""></v-checkbox>
|
|
</div>
|
|
<div class="mt-1">
|
|
{{ subcategory.subcategory }}
|
|
</div>
|
|
</v-spacer>
|
|
</template>
|
|
</v-expansion-panel-content>
|
|
</v-expansion-panel>
|
|
</template>
|
|
</v-expansion-panels>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-dialog>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: ["categories", "searchBarWidth", "searchBarTitle"],
|
|
|
|
data() {
|
|
return {
|
|
categoryExpend: Array(100).fill(false),
|
|
categoryDialogExpend: [],
|
|
categoryChecked: [],
|
|
subcategoryChecked: [],
|
|
category2subcategory: {},
|
|
categoryChild: [],
|
|
dialog: false,
|
|
updateExpand: false,
|
|
text: "",
|
|
};
|
|
},
|
|
created() {
|
|
for (let i = 0; i < this.categories.length; i++) {
|
|
this.category2subcategory[this.categories[i].id] = [];
|
|
if (this.categories[i].subcategories != null) {
|
|
this.categoryChild[i] = this.categories[i].subcategories.length;
|
|
for (let j = 0; j < this.categories[i].subcategories.length; j++) {
|
|
this.category2subcategory[this.categories[i].id].push(
|
|
this.categories[i].subcategories[j].id
|
|
);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
categoryChecked() {
|
|
this.$emit("selectCategory", this.categoryChecked);
|
|
},
|
|
subcategoryChecked() {
|
|
this.$emit("selectSubcategory", this.subcategoryChecked);
|
|
},
|
|
text() {
|
|
this.categoryDialogExpend = [];
|
|
let findCount = 0;
|
|
for (let i = 0; i < this.$props.categories.length; i++) {
|
|
let num = 0;
|
|
for (
|
|
let j = 0;
|
|
j < this.$props.categories[i].subcategories.length;
|
|
j++
|
|
) {
|
|
if (
|
|
this.$props.categories[i].subcategories[j].subcategory
|
|
.toLowerCase()
|
|
.includes(this.text.toLowerCase()) &&
|
|
this.text !== ""
|
|
) {
|
|
num++;
|
|
}
|
|
}
|
|
this.categoryChild[i] = num;
|
|
if (this.categoryChild[i] > 0) {
|
|
findCount++;
|
|
}
|
|
}
|
|
this.updateExpand = !this.updateExpand;
|
|
this.categoryDialogExpend = [...Array(findCount).keys()];
|
|
this.$forceUpdate();
|
|
},
|
|
},
|
|
methods: {
|
|
clickCategory(clickCategoryId) {
|
|
if (this.categoryChecked.includes(clickCategoryId)) {
|
|
// add
|
|
let subCategoryList = this.category2subcategory[clickCategoryId];
|
|
for (let i = 0; i < subCategoryList.length; i++) {
|
|
let subCategoryId = subCategoryList[i];
|
|
if (!this.subcategoryChecked.includes(subCategoryId))
|
|
this.subcategoryChecked.push(subCategoryId);
|
|
}
|
|
} else {
|
|
// delete
|
|
let subCategoryList = this.category2subcategory[clickCategoryId];
|
|
for (let i = 0; i < subCategoryList.length; i++) {
|
|
let subCategoryId = subCategoryList[i];
|
|
let idx = this.subcategoryChecked.indexOf(subCategoryId);
|
|
if (idx > -1) this.subcategoryChecked.splice(idx, 1);
|
|
}
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
:deep() {
|
|
.v-text-field__details {
|
|
display: none !important;
|
|
}
|
|
|
|
.v-input__append-inner {
|
|
margin-top: 12px !important;
|
|
}
|
|
|
|
.v-input--selection-controls__input {
|
|
i {
|
|
color: #f5cda8 !important;
|
|
}
|
|
}
|
|
|
|
.v-label {
|
|
color: #232323 !important;
|
|
margin-left: 20px;
|
|
}
|
|
}
|
|
|
|
.checkbox-wrap {
|
|
max-width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.panel-content-wrap {
|
|
height: 40px;
|
|
}
|
|
|
|
.v-expansion-panel--active>.v-expansion-panel-header {
|
|
min-height: 40px;
|
|
}
|
|
</style>
|