https://xn--ratija-ckb.lt/wp-content/themes/rastija/js/components/resource-list.js?ver=1633296364

1Vue.component('resource-list', {
2  data: function () {
3    return {
4      resources: [],
5      parsedFacets: {},
6    }
7  },
8  props: {
9    type: '',
10    modal: '',
11    selected: Array,
12		facets: '',
13  },
14  computed: {
15    options: {
16      get: function () {
17        return store.state.detailedSearch[this.type];
18      },
19      set: function (value) {
20        store.commit('setDetailedSearchParam', {type: this.type, options: value});
21      }
22    },
23    sortedResources() {
24      return this.resources.sort(
25         (a, b) => {
26          return this.findCount(a) < this.findCount(b) ? 1 : -1;
27        }
28      );
29    },
30  },
31	created() {
32    this.parsedFacets = JSON.parse(this.facets);
33  },
34  mounted: function () {
35    const $this = this;
36    jQuery.ajax({
37      type: "GET",
38      url: ajaxapi + 'search/resources?type=' + this.type,
39      success: function (data) {
40        data['hydra:member'].map(resource => {
41          if (!$this.resources.some(e => e.title === resource.title)) {
42            $this.resources.push({
43              'id': resource.id,
44              'title': resource.title,
45            });
46          }
47        });
48
49        $this.options = $this.selected;
50        store.commit('setDetailedSearchParam', {type: $this.type, options: $this.options});
51      }
52    });
53  },
54  methods: {
55    clear (e) {
56      this.options = [];
57      this.close();
58    },
59    close () {
60      store.commit('setDetailedSearchParam', {type: this.type, options: this.options});
61      jQuery(this.modal).modal('hide');
62    },
63    findCount(resource) {
64      const facetObj = this.parsedFacets.find(f => f.id === resource.id);
65
66      return facetObj ? facetObj.count : 0;
67    },
68  },
69  template: `
70  <div>
71		<div v-for="resource in this.sortedResources" v-if="resource.id" class="form-check">
72            <input 
73				v-model='options' 
74				:id="'side-' + type + '-' + resource.id" 
75				:name="type + '[]'" 
76				class="form-check-input" 
77				:disabled="!findCount(resource)"
78				type="checkbox" 
79				:value="resource.id">
80            <label :for="'side-' + type + '-' + resource.id" class="form-check-label">
81              {{ resource.title }} ({{ findCount(resource) }})
82            </label>
83          </div>
84  </div>
85	`,
86	watch: {
87		facets() {
88			console.log(this.facets);
89		},
90	},
91});