Mercurial > gemma

annotate client/src/components/ui/UITableHeader.vue @ 2462:9ae2a2f758bb

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