· 5 years ago · Sep 27, 2020, 03:10 PM
1<script>
2import appConfig from '@src/app.config.json'
3import Axios from 'axios'
4import Layout from '@layouts/main.vue'
5import Hero from '@components/ui/hero-jumbotron.vue'
6import DataCenterCard from '@components/ui/cards/data-center-card.vue'
7import PlainCard from '@components/ui/cards/plain-card.vue'
8import Pagination from '@components/ui/basic-pagination.vue'
9import ButtonSliding from '@components/ui/button-slides.vue'
10
11export default {
12 page: {
13 title: 'Data Center',
14 meta: [{ name: 'description', content: 'The Data Center page.' }],
15 },
16 components: {
17 Layout,
18 Hero,
19 DataCenterCard,
20 Pagination,
21 ButtonSliding,
22 PlainCard,
23 },
24 data() {
25 return {
26 DataCenter: [],
27 pageLength: null,
28 page: this.$route.query.page ? this.$route.query.page : 0, // this will be dynamic
29 limit: 3, // we should ask client for this
30 activeDataCenter: 'laws-and-regulations',
31 LPFilterSelected: [],
32 LPFilterOptions: [],
33 TPFilterSelected: [],
34 TPFilterOptions: [],
35 StatusFilterSelected: [],
36 StatusFilterOptions: [],
37 }
38 },
39 mounted() {
40 this.getDataCenter(this.activeDataCenter)
41 },
42 watch: {
43 StatusFilterSelected: function() {
44 this.getDataCenter(this.activeDataCenter, {
45 attribute: {
46 status: this.StatusFilterSelected,
47 },
48 })
49 },
50 },
51 methods: {
52 /**
53 * Get each data center
54 * @param key
55 * @param params{}
56 */
57 getDataCenter: function(key, param = {}) {
58 /** define ANY API prequisite */
59 var params = {
60 klaster_slug: key,
61 simple: true,
62 page: this.page,
63 limit: this.limit,
64 }
65 /** loop param then push to params */
66 if (Object.keys(param).length > 0) {
67 Object.keys(param).forEach((each) => {
68 // attribute[tanggal_ditetapkan][]
69 params[each] = param[each]
70 })
71 }
72 /** params need to encoded from object to url params */
73 var attr = ``
74 params = Object.keys(params)
75 .map(function(key) {
76 if (key === 'attribute' && Object.keys(param).length > 0) {
77 Object.keys(param[key]).forEach((each) => {
78 attr += `attribute[${each}][]=${param[key][each]}`
79 })
80 return attr
81 } else {
82 return key + '=' + params[key]
83 }
84 })
85 .join('&')
86 console.log(params)
87
88 /** token required for getting data from backend */
89 const getOptions = {
90 headers: {
91 Authorization: appConfig.default_token,
92 'Access-Control-Allow-Origin': '*',
93 },
94 }
95 /** define endpoint */
96 var endpoint = `${appConfig.endpoint}/klaster-by-member-relation?${params}`
97 /**
98 * Do API Request
99 */
100 Axios.get(endpoint, getOptions).then((response) => {
101 const data = response.data.data
102 this.DataCenter = data
103 this.activeDataCenter = key
104 /** Pagination */
105 this.pageLength = response.data.page_total
106
107 /** Reset filter data */
108 // this.LPFilterOptions = []
109 // this.TPFilterOptions = []
110 // this.StatusFilterOptions = []
111 /**
112 * Loop the data for filtering
113 */
114 data.forEach((element) => {
115 /** Lembaga Pengadilan Filter */
116 if (element.atribut.lembaga_pengadilan) {
117 const options = {
118 text: element.atribut.lembaga_pengadilan.data[0].content,
119 value: element.atribut.lembaga_pengadilan.data[0].content,
120 }
121 this.LPFilterOptions.push(options)
122 }
123 /** Status Filter */
124 if (element.atribut.status) {
125 const options = {
126 text: element.atribut.status.data[0].content,
127 value: element.atribut.status.data[0].content,
128 }
129 this.StatusFilterOptions.push(options)
130 }
131 })
132 })
133 },
134 noDuplicate: function(array) {
135 var uniques = []
136 var itemsFound = {}
137 for (var i = 0, l = array.length; i < l; i++) {
138 var stringified = JSON.stringify(array[i])
139 if (itemsFound[stringified]) {
140 continue
141 }
142 uniques.push(array[i])
143 itemsFound[stringified] = true
144 }
145 return uniques
146 },
147 },
148}
149</script>