ShowEasyFrontEnd/FrontEnd/components/exhibition/Categories.vue

<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>