Mercurial > gemma
annotate client/src/components/ui/UITableHeader.vue @ 3787:f86220aa8a72 yworks-svg2pdf
Waterlevel: prefetch images of template and convert to dataURI
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 03 Jul 2019 16:42:38 +0200 |
parents | b9a6abef9f1c |
children | 84d01a536bec |
rev | line source |
---|---|
2408
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1 <template> |
2635
7ac90c4db14a
client: table headers: more compact / less padding
Markus Kottlaender <markus@intevation.de>
parents:
2408
diff
changeset
|
2 <div :class="['table-header row no-gutters bg-light', { sortable }]"> |
2408
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
3 <a |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
4 v-for="column in columns" |
2738
add2d47c2567
client: tables: implemented simple default sorting
Markus Kottlaender <markus@intevation.de>
parents:
2731
diff
changeset
|
5 @click.prevent="!column.disableSorting && sortTable(column.id)" |
2408
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
6 :key="column.id" |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
7 :class="[ |
2874
b9a6abef9f1c
client: more unified table layout
Markus Kottlaender <markus@intevation.de>
parents:
2779
diff
changeset
|
8 'd-inline-block py-1 text-center truncate small ' + |
2731
7e97337054b9
client: table header component: disable sorting for individual columns
Markus Kottlaender <markus@intevation.de>
parents:
2720
diff
changeset
|
9 (column.class || '') + |
7e97337054b9
client: table header component: disable sorting for individual columns
Markus Kottlaender <markus@intevation.de>
parents:
2720
diff
changeset
|
10 ' ' + |
7e97337054b9
client: table header component: disable sorting for individual columns
Markus Kottlaender <markus@intevation.de>
parents:
2720
diff
changeset
|
11 (column.disableSorting ? ' sorting-disabled' : ''), |
2408
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 ]" |
2720
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2635
diff
changeset
|
14 :style="`width: ${column.width};`" |
2408
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
15 > |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
16 <span |
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
17 :style="'opacity: ' + (sortColumn === column.id ? '1' : '0.3')" |
2731
7e97337054b9
client: table header component: disable sorting for individual columns
Markus Kottlaender <markus@intevation.de>
parents:
2720
diff
changeset
|
18 v-if="sortable && !column.disableSorting" |
2408
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
19 > |
2720
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2635
diff
changeset
|
20 <font-awesome-icon :icon="sortIcon(column.id)" fixed-width /> |
2408
02d30251d594
client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
21 </span> |
2720
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2635
diff
changeset
|
22 <font-awesome-icon v-if="column.icon" :icon="column.icon" fixed-width /> |
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2635
diff
changeset
|
23 <span v-if="column.title"> |
2779
21eb85cdfe45
Client: improve a set of strings marking for translations
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2738
diff
changeset
|
24 {{ column.title }} |
2720
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2635
diff
changeset
|
25 </span> |
2408
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 |
2731
7e97337054b9
client: table header component: disable sorting for individual columns
Markus Kottlaender <markus@intevation.de>
parents:
2720
diff
changeset
|
42 a:not(.sorting-disabled) |
2408
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 }, |
2738
add2d47c2567
client: tables: implemented simple default sorting
Markus Kottlaender <markus@intevation.de>
parents:
2731
diff
changeset
|
82 sortTable(id) { |
2408
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"; |
2738
add2d47c2567
client: tables: implemented simple default sorting
Markus Kottlaender <markus@intevation.de>
parents:
2731
diff
changeset
|
86 this.$parent.sortTable({ |
2408
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> |