c3lf/c3lf-system-3
9
0
Fork 0
Code Issues 55 Pull requests Projects 2 Releases Wiki Activity Actions

migrate to vue 3

Browse source
This commit is contained in:
j3d1 2024-06-18 20:10:10 +02:00
parent bb07a6b641
commit bb71c44aa7
16 changed files with 318 additions and 432 deletions
Download patch file Download diff file Expand all files Collapse all files

45
web/src/components/CollapsableCards.vue
View file

@ -1,31 +1,6 @@
<template>
<div class="row">
<div class="col-lg-3 col-xl-2">
<!--div class="card bg-dark text-light mb-2" id="filters">
<div class="card-body">
<h5 class="card-title text-info">Sort & Filter</h5>
<div class="form-group" v-for="(column, index) in columns" :key="index">
<label>{{ column }}</label>
<div class="input-group">
<div class="input-group-prepend">
<button
:class="[ 'btn', column === sortBy ? 'btn-outline-info' : 'btn-outline-secondary' ]"
type="button"
@click="toggleSort(column)">
<font-awesome-icon :icon="getSortIcon(column)"/>
</button>
</div>
<input
type="text"
class="form-control"
placeholder="filter"
:value="filters[column]"
@input="changeFilter(column, $event.target.value)"
>
</div>
</div>
</div>
</div-->
</div>
<div class="col-lg-9 col-xl-8">
<div class="w-100"
@ -48,6 +23,8 @@
<script>
import {mapGetters} from "vuex";
export default {
name: 'CollapsableCards',
props: {
@ -75,25 +52,18 @@ export default {
};
},
created() {
const query = this.$router.currentRoute.query.collapsed;
const query = this.$router.currentRoute ? (this.$router.currentRoute.query ? this.$router.currentRoute.query.collapsed : null) : null;
if (query !== null && query !== undefined) {
this.collapsed = this.unpackInt(parseInt(query), this.sections.length);
} else {
this.collapsed = this.sections.map(() => true);
}
//this.$router.push({...this.$router.currentRoute, query: {...this.$router.currentRoute.query, layout}});
//this.collapsed = this.sections.map(() => true);
/*this.columns.map(e => ({
k: e,
v: this.$store.getters.getFilters[e]
})).filter(e => e.v).forEach(e => this.setFilter(e.k, e.v));*/
},
computed: {
grouped_items() {
return this.sections.map(section => this.items.filter(item => item[this.keyName] === section.slug));
},
...mapGetters(['route']),
},
methods: {
packInt(arr) {
@ -112,8 +82,11 @@ export default {
collapsed: {
handler() {
const encoded = this.packInt(this.collapsed).toString()
if (this.$router.currentRoute.query.collapsed !== encoded)
this.$router.push({...this.$router.currentRoute, query: {...this.$router.currentRoute.query, collapsed: encoded}});
if (this.route.query.collapsed !== encoded)
this.$router.push({
...this.$router.currentRoute,
query: {...this.$router.currentRoute.query, collapsed: encoded}
});
},
deep: true,
},