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

finish implementing card layout

Browse source
This commit is contained in:
busti 2019-11-15 20:00:40 +01:00
parent 46be8e8629
commit becae553b8
7 changed files with 157 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/App.vue
View file

@ -1,8 +1,9 @@
<template>
<div id="app">
<Navbar/>
<div class="container mt-2">
<div class="container-fluid px-xl-5 mt-3">
<div class="row" v-if="layout === 'table'">
<div class="col-xl-8 offset-xl-2">
<Table
:columns="['uid', 'description', 'box', 'image']"
:items="loadedItems"
@ -10,17 +11,26 @@
/>
</div>
</div>
<Cards
v-if="layout === 'cards'"
:columns="['uid', 'description', 'box', 'image']"
:items="loadedItems"
:keyName="'uid'"
/>
</div>
</div>
</template>
<script>
import Table from '@/components/Table';
import Navbar from '@/components/Navbar';
import Cards from '@/components/Cards';
import { mapState } from 'vuex';
export default {
name: 'app',
components: { Navbar, Table },
computed: mapState(['loadedItems'])
components: { Navbar, Table, Cards },
computed: mapState(['loadedItems', 'layout'])
};
</script>

72
src/components/Cards.vue Normal file
View file

@ -0,0 +1,72 @@
<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="setFilter(column, $event.target.value)"
>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-9 col-xl-8">
<transition-group name="card-list" tag="div" class="card-columns">
<div class="card-list-item card bg-dark text-light" v-for="item in internalItems" :key="item.uid">
<img
:src="`https://picsum.photos/id/${item.uid + 50}/200/200`"
alt="item"
class="card-img-top img-fluid"
>
<div class="card-body">
<h6 class="card-title">{{ item.description }}</h6>
<h6 class="card-subtitle text-secondary">uid: {{ item.uid }} box: {{ item.box }}</h6>
</div>
</div>
</transition-group>
</div>
</div>
</template>
<script>
import DataContainer from '@/mixins/data-container';
export default {
name: 'Cards',
mixins: [DataContainer],
methods: {
random: () => Math.floor((Math.random() * 500) + 300)
}
};
</script>
<style>
.card-list-item {
transition: all 1s;
}
.card-list-enter, .card-list-leave-to {
opacity: 0;
}
.card-list-leave-active {
position: absolute;
}
</style>

16
src/components/Navbar.vue
View file

@ -15,6 +15,14 @@
<button type="button" class="btn mx-1 text-nowrap" v-for="(button, index) in buttons" v-bind:key="index" :class="['btn-' + button.color]">
<font-awesome-icon :icon="button.icon"/><span class="d-none d-md-inline">&nbsp;{{ button.title }}</span>
</button>
<div class="btn-group btn-group-toggle">
<button :class="['btn', 'btn-info', { active: layout === 'cards' }]" @click="setLayout('cards')">
<font-awesome-icon icon="th"/>
</button>
<button :class="['btn', 'btn-info', { active: layout === 'table' }]" @click="setLayout('table')">
<font-awesome-icon icon="list"/>
</button>
</div>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
@ -38,7 +46,7 @@
</template>
<script>
import { mapState, mapActions } from 'vuex';
import { mapState, mapActions, mapMutations } from 'vuex';
export default {
@ -48,14 +56,14 @@ export default {
buttons: [
{ title: 'Add', icon: 'plus', color: 'success' },
{ title: 'Refresh', icon: 'sync-alt', color: 'primary' },
{ title: 'Placeholder', icon: 'cat', color: 'warning' },
]
}),
computed: {
...mapState(['events', 'activeEvent'])
...mapState(['events', 'activeEvent', 'layout']),
},
methods: {
...mapActions(['changeEvent'])
...mapActions(['changeEvent']),
...mapMutations(['setLayout'])
}
};
</script>

31
src/components/Table.vue
View file

@ -3,10 +3,10 @@
<thead>
<tr>
<th scope="col" v-for="(column, index) in columns" :key="index">
<button class="btn text-light" v-on:click="toggleSort(column)">
<button class="btn text-light" @click="toggleSort(column)">
{{ column }}
<span :class="{ 'text-info': column === sortBy }">
<font-awesome-icon :icon="sortIcon(column)"/>
<font-awesome-icon :icon="getSortIcon(column)"/>
</span>
</button>
</th>
@ -21,34 +21,11 @@
</template>
<script>
import * as R from 'ramda';
import DataContainer from '@/mixins/data-container';
export default {
name: 'Table',
props: ['columns', 'items', 'keyName'],
data: (self) => ({
sortBy: self.keyName,
ascend: true
}),
computed: {
internalItems() {
const sortByOrd = R.sortBy(R.prop(this.sortBy));
const sorted = sortByOrd(this.items, [this.sortBy]);
return this.ascend ? sorted : R.reverse(sorted);
}
},
methods: {
sortIcon(column) {
if (column !== this.sortBy) return 'sort';
if (this.ascend) return 'sort-up';
return 'sort-down';
},
toggleSort(column) {
if (column === this.sortBy)
this.ascend = !this.ascend;
this.sortBy = column;
}
}
mixins: [DataContainer]
};
</script>

4
src/main.js
View file

@ -9,10 +9,10 @@ import 'bootstrap/dist/js/bootstrap.min.js';
// fontawesome
import { library } from '@fortawesome/fontawesome-svg-core';
import { faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown } from '@fortawesome/free-solid-svg-icons';
import { faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown, faTh, faList } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
library.add(faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown);
library.add(faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown, faTh, faList);
Vue.component('font-awesome-icon', FontAwesomeIcon);

39
src/mixins/data-container.js Normal file
View file

@ -0,0 +1,39 @@
import * as R from 'ramda';
export default {
props: ['columns', 'items', 'keyName'],
data: (self) => ({
sortBy: self.keyName,
ascend: true,
filters: R.fromPairs(self.columns.map(column => [column, '']))
}),
computed: {
internalItems() {
const filtered = this.items.filter(item => this.columns
.map(column => {
const field = item[column] + '';
const filter = this.filters[column];
return field.includes(filter);
}).reduce((acc, nxt) => acc && nxt, true)
);
const sortByOrd = R.sortBy(R.prop(this.sortBy));
const sorted = sortByOrd(filtered, [this.sortBy]);
return this.ascend ? sorted : R.reverse(sorted);
}
},
methods: {
getSortIcon(column) {
if (column !== this.sortBy) return 'sort';
if (this.ascend) return 'sort-up';
return 'sort-down';
},
toggleSort(column) {
if (column === this.sortBy)
this.ascend = !this.ascend;
this.sortBy = column;
},
setFilter(column, filter) {
this.filters[column] = filter;
}
}
};

14
src/store/index.js
View file

@ -7,6 +7,7 @@ export default new Vuex.Store({
state: {
events: ['35c3', 'camp19', '36c3'],
activeEvent: '36c3',
layout: 'cards',
loadedItems: [
{ uid: 1, description: 'sleeping bag', box: 7, image: 41 },
{ uid: 2, description: 'tent', box: 7, image: 23 },
@ -14,16 +15,27 @@ export default new Vuex.Store({
{ uid: 4, description: 'power supply black', box: 5, image: 62 },
{ uid: 5, description: 'pullover yellow "pesthörnchen"', box: 5, image: 84 },
{ uid: 6, description: '"blue black second skin"', box: 6, image: 72 },
{ uid: 7, description: '"the bike blog" bottle orange', box: 6, image: 71 }
{ uid: 7, description: '"the bike blog" bottle orange', box: 6, image: 71 },
{ uid: 8, description: 'tshirt guad3c', box: 6, image: 26 },
{ uid: 9, description: 'power supply dell', box: 6, image: 74 },
{ uid: 10, description: 'blanket green blue', box: 6, image: 25 },
{ uid: 11, description: 'cap "ega"', box: 6, image: 71 },
{ uid: 12, description: 'water bottle blue "sistema"', box: 3, image: 12 },
{ uid: 13, description: 'sun hat black', box: 5, image: 1 },
{ uid: 14, description: 'toy truck', box: 6, image: 51 }
]
},
mutations: {
changeEvent(state, event) {
state.activeEvent = event;
},
setLayout(state, layout) {
state.layout = layout;
}
},
actions: {
changeEvent({ commit }, event) {
// todo: load items from server
// todo: load items from server
commit('changeEvent', event);
}