annotate client/src/components/ui/UIBoxHeader.vue @ 5509:36cbf14b878a deactivate-users

Client: Add ability to list only active users * Adjust the "UIBoxHeader.vue" component to accept "checkbox" object which displays checkbox element in the header if it passed from the parent components. * Filter users according to the checked value from the checkbox. * Checkbox for hiding inactive users is only visible if there is at least one deactivated user.
author Fadi Abbud <fadi.abbud@intevation.de>
date Fri, 24 Sep 2021 13:10:25 +0200
parents c36940e53788
children ba014cc5f969
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>
3188
c36940e53788 client: ui box header: removed old unused functionality and added support for smaller fontsize and padding
Markus Kottlaender <markus@intevation.de>
parents: 3177
diff changeset
2 <h6 :class="['box-header', { small }]">
2408
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
3 <span class="box-title">
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
4 <font-awesome-icon
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
5 :icon="icon"
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
6 class="box-icon"
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
7 v-if="icon"
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
8 fixed-width
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
9 />
2754
d0f6c222f4f9 client:correct a set of strings marking
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2631
diff changeset
10 {{ title }}
2408
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
11 </span>
3026
619f03a0062a client: adjusted box control's style
Markus Kottlaender <markus@intevation.de>
parents: 2897
diff changeset
12 <div class="d-flex flex-row">
5509
36cbf14b878a Client: Add ability to list only active users
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3188
diff changeset
13 <span class="box-control" v-if="checkBox" style="cursor: default;">
36cbf14b878a Client: Add ability to list only active users
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3188
diff changeset
14 <input
36cbf14b878a Client: Add ability to list only active users
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3188
diff changeset
15 type="checkbox"
36cbf14b878a Client: Add ability to list only active users
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3188
diff changeset
16 style="cursor: pointer;"
36cbf14b878a Client: Add ability to list only active users
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3188
diff changeset
17 class="align-self-center"
36cbf14b878a Client: Add ability to list only active users
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3188
diff changeset
18 :checked="checkBox.value"
36cbf14b878a Client: Add ability to list only active users
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3188
diff changeset
19 @change="checkBox.callback"
36cbf14b878a Client: Add ability to list only active users
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3188
diff changeset
20 />
36cbf14b878a Client: Add ability to list only active users
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3188
diff changeset
21 <span class="ml-1 small">
36cbf14b878a Client: Add ability to list only active users
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3188
diff changeset
22 {{ checkBox.label }}
36cbf14b878a Client: Add ability to list only active users
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3188
diff changeset
23 </span>
36cbf14b878a Client: Add ability to list only active users
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3188
diff changeset
24 </span>
2631
7a0e468d3832 client: ui: allow additional (custom) actions/buttons in box header
Markus Kottlaender <markus@intevation.de>
parents: 2629
diff changeset
25 <span
2837
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2754
diff changeset
26 class="box-control"
2631
7a0e468d3832 client: ui: allow additional (custom) actions/buttons in box header
Markus Kottlaender <markus@intevation.de>
parents: 2629
diff changeset
27 v-for="(action, index) in actions"
7a0e468d3832 client: ui: allow additional (custom) actions/buttons in box header
Markus Kottlaender <markus@intevation.de>
parents: 2629
diff changeset
28 :key="index"
7a0e468d3832 client: ui: allow additional (custom) actions/buttons in box header
Markus Kottlaender <markus@intevation.de>
parents: 2629
diff changeset
29 @click="action.callback"
7a0e468d3832 client: ui: allow additional (custom) actions/buttons in box header
Markus Kottlaender <markus@intevation.de>
parents: 2629
diff changeset
30 >
3177
fc008b32c593 client: layers: loading animation for refreshing layer sources
Markus Kottlaender <markus@intevation.de>
parents: 3026
diff changeset
31 <font-awesome-icon
fc008b32c593 client: layers: loading animation for refreshing layer sources
Markus Kottlaender <markus@intevation.de>
parents: 3026
diff changeset
32 :icon="action.icon"
fc008b32c593 client: layers: loading animation for refreshing layer sources
Markus Kottlaender <markus@intevation.de>
parents: 3026
diff changeset
33 :spin="action.icon === 'spinner'"
fc008b32c593 client: layers: loading animation for refreshing layer sources
Markus Kottlaender <markus@intevation.de>
parents: 3026
diff changeset
34 />
2631
7a0e468d3832 client: ui: allow additional (custom) actions/buttons in box header
Markus Kottlaender <markus@intevation.de>
parents: 2629
diff changeset
35 </span>
2837
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2754
diff changeset
36 <span class="box-control" @click="closeCallback" v-if="closeCallback">
2549
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
37 <font-awesome-icon icon="times" />
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
38 </span>
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
39 </div>
2408
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
40 </h6>
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
41 </template>
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
42
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
43 <style lang="sass">
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
44 .box-header
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
45 display: flex
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
46 justify-content: space-between
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
47 align-items: center
2549
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
48 min-height: 34px
2408
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
49 padding-left: .5rem
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
50 border-bottom: 1px solid #dee2e6
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
51 color: $color-info
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
52 margin-bottom: 0
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
53 padding: 0.25rem
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
54 font-weight: bold
2566
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
55 background: white
2629
85927d27c84e client: box header: rounded corners style fix
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
56 border-top-left-radius: .25rem
85927d27c84e client: box header: rounded corners style fix
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
57 border-top-right-radius: .25rem
2408
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
58 .box-title
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
59 padding-left: 0.25rem
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60 .box-icon
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61 margin-right: 0.25rem
2897
b7cfbb21f252 client: removed margin from box controls, add margins individually where needed
Markus Kottlaender <markus@intevation.de>
parents: 2837
diff changeset
62 .box-control
b7cfbb21f252 client: removed margin from box controls, add margins individually where needed
Markus Kottlaender <markus@intevation.de>
parents: 2837
diff changeset
63 margin-left: 3px
3188
c36940e53788 client: ui box header: removed old unused functionality and added support for smaller fontsize and padding
Markus Kottlaender <markus@intevation.de>
parents: 3177
diff changeset
64 &.small
c36940e53788 client: ui box header: removed old unused functionality and added support for smaller fontsize and padding
Markus Kottlaender <markus@intevation.de>
parents: 3177
diff changeset
65 padding: 0.1rem 0.1rem 0.1rem 0.25rem
c36940e53788 client: ui box header: removed old unused functionality and added support for smaller fontsize and padding
Markus Kottlaender <markus@intevation.de>
parents: 3177
diff changeset
66 min-height: 27px
2408
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67 </style>
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 <script>
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
70 /* 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
71 * without warranty, see README.md and license for details.
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
72 *
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
73 * SPDX-License-Identifier: AGPL-3.0-or-later
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
74 * License-Filename: LICENSES/AGPL-3.0.txt
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
75 *
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
76 * Copyright (C) 2018 by via donau
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
77 * – Österreichische Wasserstraßen-Gesellschaft mbH
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
78 * Software engineering by Intevation GmbH
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 * Author(s):
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
81 * Markus Kottländer <markus.kottlaender@intevation.de>
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
82 */
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
83
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
84 export default {
3188
c36940e53788 client: ui box header: removed old unused functionality and added support for smaller fontsize and padding
Markus Kottlaender <markus@intevation.de>
parents: 3177
diff changeset
85 props: {
c36940e53788 client: ui box header: removed old unused functionality and added support for smaller fontsize and padding
Markus Kottlaender <markus@intevation.de>
parents: 3177
diff changeset
86 icon: String,
c36940e53788 client: ui box header: removed old unused functionality and added support for smaller fontsize and padding
Markus Kottlaender <markus@intevation.de>
parents: 3177
diff changeset
87 title: String,
c36940e53788 client: ui box header: removed old unused functionality and added support for smaller fontsize and padding
Markus Kottlaender <markus@intevation.de>
parents: 3177
diff changeset
88 closeCallback: Function,
c36940e53788 client: ui box header: removed old unused functionality and added support for smaller fontsize and padding
Markus Kottlaender <markus@intevation.de>
parents: 3177
diff changeset
89 actions: Array,
5509
36cbf14b878a Client: Add ability to list only active users
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3188
diff changeset
90 small: Boolean,
36cbf14b878a Client: Add ability to list only active users
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3188
diff changeset
91 checkBox: Object
3188
c36940e53788 client: ui box header: removed old unused functionality and added support for smaller fontsize and padding
Markus Kottlaender <markus@intevation.de>
parents: 3177
diff changeset
92 }
2408
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>