Mercurial > gemma

comparison client/src/components/ui/UITableHeader.vue @ 2408:02d30251d594

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: table component for unified style
author Markus Kottlaender <markus@intevation.de>
date Thu, 28 Feb 2019 11:25:50 +0100
parents
children 7ac90c4db14a
comparison
equal deleted inserted replaced
2407:8fc546b03822 2408:02d30251d594
1 <template>
2 <div
3 :class="['table-header row no-gutters bg-light', { sortable: sortable }]"
4 >
5 <a
6 v-for="column in columns"
7 @click.prevent="sortBy(column.id)"
8 :key="column.id"
9 :class="[
10 'd-flex py-2 align-items-center justify-content-center small col ' +
11 column.class,
12 { active: sortColumn === column.id }
13 ]"
14 >
15 <span
16 :style="'opacity: ' + (sortColumn === column.id ? '1' : '0.3')"
17 v-if="sortable"
18 >
19 <font-awesome-icon
20 :icon="sortIcon(column.id)"
21 class="ml-1"
22 fixed-width
23 />
24 </span>
25 {{ $gettext(column.title) }}
26 </a>
27 <div v-if="extraColumnForButtons" class="col"></div>
28 </div>
29 </template>
30
31 <style lang="sass">
32 .table-header
33 > a
34 border-right: solid 1px #e7e8e9
35 background-color: #f8f9fa
36 a
37 outline: none
38 &:hover
39 text-decoration: none
40 background-color: #f8f9fa
41 &.sortable
42 a
43 cursor: pointer
44 &:hover,
45 &.active
46 background: #e7e8e9
47 </style>
48
49 <script>
50 /* This is Free Software under GNU Affero General Public License v >= 3.0
51 * without warranty, see README.md and license for details.
52 *
53 * SPDX-License-Identifier: AGPL-3.0-or-later
54 * License-Filename: LICENSES/AGPL-3.0.txt
55 *
56 * Copyright (C) 2018 by via donau
57 * – Österreichische Wasserstraßen-Gesellschaft mbH
58 * Software engineering by Intevation GmbH
59 *
60 * Author(s):
61 * Markus Kottländer <markus.kottlaender@intevation.de>
62 */
63 export default {
64 props: {
65 columns: { type: Array },
66 sortable: { type: Boolean, default: true },
67 extraColumnForButtons: { type: Boolean, default: true }
68 },
69 data() {
70 return {
71 sortColumn: null,
72 sortDirection: "ASC"
73 };
74 },
75 methods: {
76 sortIcon(id) {
77 if (this.sortColumn === id) {
78 return "sort-" + (this.sortDirection === "ASC" ? "down" : "up");
79 }
80 return "sort";
81 },
82 sortBy(id) {
83 if (this.sortable) {
84 this.sortColumn = id;
85 this.sortDirection = this.sortDirection === "ASC" ? "DESC" : "ASC";
86 this.$emit("sortingChanged", {
87 sortColumn: this.sortColumn,
88 sortDirection: this.sortDirection
89 });
90 }
91 }
92 }
93 };
94 </script>