@nixweb/nixloc-ui 1.15.0 → 1.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/component/forms/Modal.vue +10 -3
- package/src/component/shared/actions/ActionFooter.vue +72 -34
- package/src/component/shared/actions/ActionItemList.vue +95 -73
- package/src/component/shared/actions/ActionsOptions.vue +158 -122
- package/src/component/shared/actions/ActionsSelected.vue +225 -174
- package/src/component/template/ViewTemplateReportPreview.vue +129 -40
package/package.json
CHANGED
|
@@ -1,7 +1,15 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div>
|
|
3
|
-
<vodal
|
|
4
|
-
:
|
|
3
|
+
<vodal
|
|
4
|
+
:duration="80"
|
|
5
|
+
:show="modal.open"
|
|
6
|
+
@hide="hide()"
|
|
7
|
+
:width="width"
|
|
8
|
+
:height="height"
|
|
9
|
+
:closeOnEsc="closeOnEsc"
|
|
10
|
+
:closeButton="closeButton"
|
|
11
|
+
:closeOnClickMask="false"
|
|
12
|
+
>
|
|
5
13
|
<div class="d-block text-left">
|
|
6
14
|
<Messages v-if="!vodal.open && showValidation" />
|
|
7
15
|
<div class="modal-title title">
|
|
@@ -75,5 +83,4 @@ export default {
|
|
|
75
83
|
margin: 0;
|
|
76
84
|
font-size: 16px;
|
|
77
85
|
}
|
|
78
|
-
|
|
79
86
|
</style>
|
|
@@ -1,55 +1,93 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
2
|
+
<div>
|
|
3
|
+
<div
|
|
4
|
+
v-if="!isFinished"
|
|
5
|
+
class="actions"
|
|
6
|
+
>
|
|
7
|
+
<div class="side-by-side">
|
|
8
|
+
<Button
|
|
9
|
+
key="cancel"
|
|
10
|
+
title="Cancelar"
|
|
11
|
+
type="danger"
|
|
12
|
+
size="small"
|
|
13
|
+
:disabled="processing || selected.length === 0"
|
|
14
|
+
:clicked="hideModal"
|
|
15
|
+
/>
|
|
16
|
+
<Button
|
|
17
|
+
key="ok"
|
|
18
|
+
title="Processar"
|
|
19
|
+
color="white"
|
|
20
|
+
classIcon="fa-solid fa-play"
|
|
21
|
+
backGroundColor="#007BFF"
|
|
22
|
+
size="large"
|
|
23
|
+
:disabled="processing || selected.length === 0"
|
|
24
|
+
:clicked="ok"
|
|
25
|
+
/>
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
11
28
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
29
|
+
<div
|
|
30
|
+
v-else
|
|
31
|
+
class="text-center"
|
|
32
|
+
>
|
|
33
|
+
<Timer
|
|
34
|
+
v-if="errorCount === 0"
|
|
35
|
+
:title="'Fechando em'"
|
|
36
|
+
:initialTimer="2"
|
|
37
|
+
:endTime="autoFinished"
|
|
38
|
+
/>
|
|
39
|
+
<Button
|
|
40
|
+
key="finish"
|
|
41
|
+
title="Fechar"
|
|
42
|
+
classIcon="fa-solid fa-circle-xmark"
|
|
43
|
+
color="white"
|
|
44
|
+
backGroundColor="#6D757B"
|
|
45
|
+
size="medium"
|
|
46
|
+
:clicked="finished"
|
|
47
|
+
/>
|
|
16
48
|
</div>
|
|
49
|
+
</div>
|
|
17
50
|
</template>
|
|
18
51
|
|
|
19
52
|
<script>
|
|
20
53
|
import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
|
|
54
|
+
import Timer from "@nixweb/nixloc-ui/src/component/shared/Timer";
|
|
21
55
|
|
|
22
56
|
export default {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
57
|
+
name: "ActionFooter",
|
|
58
|
+
components: { Button, Timer },
|
|
59
|
+
props: {
|
|
60
|
+
isFinished: { type: Boolean, default: false },
|
|
61
|
+
processing: { type: Boolean, default: false },
|
|
62
|
+
selected: { type: Array, default: () => [] },
|
|
63
|
+
errorCount: { type: Number, default: 0 },
|
|
64
|
+
},
|
|
65
|
+
emits: ["ok", "cancel", "finish"],
|
|
66
|
+
methods: {
|
|
67
|
+
ok() {
|
|
68
|
+
this.$emit("ok");
|
|
69
|
+
},
|
|
70
|
+
hideModal() {
|
|
71
|
+
this.$emit("cancel");
|
|
72
|
+
},
|
|
73
|
+
autoFinished() {
|
|
74
|
+
this.finished();
|
|
29
75
|
},
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
ok() {
|
|
33
|
-
this.$emit("ok");
|
|
34
|
-
},
|
|
35
|
-
hideModal() {
|
|
36
|
-
this.$emit("cancel");
|
|
37
|
-
},
|
|
38
|
-
finished() {
|
|
39
|
-
this.$emit("finish");
|
|
40
|
-
},
|
|
76
|
+
finished() {
|
|
77
|
+
this.$emit("finish");
|
|
41
78
|
},
|
|
79
|
+
},
|
|
42
80
|
};
|
|
43
81
|
</script>
|
|
44
82
|
|
|
45
83
|
<style scoped>
|
|
46
84
|
.actions {
|
|
47
|
-
|
|
85
|
+
text-align: center;
|
|
48
86
|
}
|
|
49
87
|
|
|
50
88
|
.side-by-side {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
89
|
+
display: inline-flex;
|
|
90
|
+
align-items: center;
|
|
91
|
+
gap: 8px;
|
|
54
92
|
}
|
|
55
93
|
</style>
|
|
@@ -1,121 +1,143 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
2
|
+
<ScrollBar
|
|
3
|
+
:minHeight="300"
|
|
4
|
+
:maxHeight="300"
|
|
5
|
+
>
|
|
6
|
+
<div
|
|
7
|
+
v-for="(id, index) in selected"
|
|
8
|
+
:key="id"
|
|
9
|
+
class="item-row"
|
|
10
|
+
>
|
|
11
|
+
<div class="item-left title">Item {{ index + 1 }}</div>
|
|
12
|
+
<div class="item-right">
|
|
13
|
+
<span
|
|
14
|
+
v-if="status[id] === 'waiting'"
|
|
15
|
+
class="waiting"
|
|
16
|
+
>
|
|
17
|
+
<i class="fas fa-hourglass-half"></i>
|
|
18
|
+
</span>
|
|
19
|
+
|
|
20
|
+
<span
|
|
21
|
+
v-else-if="status[id] === 'running'"
|
|
22
|
+
class="loading"
|
|
23
|
+
>
|
|
24
|
+
<span class="spinner"></span> Processando...
|
|
25
|
+
</span>
|
|
26
|
+
|
|
27
|
+
<span
|
|
28
|
+
v-else-if="status[id] === 'done'"
|
|
29
|
+
class="done"
|
|
30
|
+
>
|
|
31
|
+
<i class="fas fa-check-circle done-icon"></i> Sucesso!
|
|
32
|
+
</span>
|
|
33
|
+
|
|
34
|
+
<span
|
|
35
|
+
v-else-if="status[id] === 'error'"
|
|
36
|
+
class="error"
|
|
37
|
+
>
|
|
38
|
+
<i class="fas fa-times-circle"></i> Falhou!
|
|
39
|
+
<button
|
|
40
|
+
class="error-link"
|
|
41
|
+
@click="$emit('show-error', { id, index })"
|
|
42
|
+
><span class="title">Ver
|
|
43
|
+
detalhes</span></button>
|
|
44
|
+
</span>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
</ScrollBar>
|
|
26
48
|
</template>
|
|
27
49
|
|
|
28
50
|
<script>
|
|
29
51
|
import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
|
|
30
52
|
|
|
31
53
|
export default {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
54
|
+
name: "ActionItemList",
|
|
55
|
+
components: { ScrollBar },
|
|
56
|
+
props: { selected: Array, status: Object, errorsMap: Object },
|
|
35
57
|
};
|
|
36
58
|
</script>
|
|
37
59
|
|
|
38
60
|
<style scoped>
|
|
39
61
|
.item-row {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
62
|
+
display: flex;
|
|
63
|
+
align-items: center;
|
|
64
|
+
justify-content: space-between;
|
|
65
|
+
padding: 8px 10px;
|
|
66
|
+
border: 1px solid #eee;
|
|
67
|
+
border-radius: 8px;
|
|
68
|
+
background: #fafafa;
|
|
69
|
+
margin: 6px 0;
|
|
48
70
|
}
|
|
49
71
|
|
|
50
72
|
.item-left {
|
|
51
|
-
|
|
52
|
-
|
|
73
|
+
font-weight: 500;
|
|
74
|
+
color: #334155;
|
|
53
75
|
}
|
|
54
76
|
|
|
55
77
|
.item-right {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
78
|
+
display: flex;
|
|
79
|
+
align-items: center;
|
|
80
|
+
gap: 8px;
|
|
81
|
+
font-size: 13px;
|
|
60
82
|
}
|
|
61
83
|
|
|
62
84
|
.waiting {
|
|
63
|
-
|
|
85
|
+
color: #6b7280;
|
|
64
86
|
}
|
|
65
87
|
|
|
66
88
|
.loading {
|
|
67
|
-
|
|
89
|
+
color: #007bff;
|
|
68
90
|
}
|
|
69
91
|
|
|
70
92
|
.done {
|
|
71
|
-
|
|
72
|
-
|
|
93
|
+
color: #16a34a;
|
|
94
|
+
font-weight: 500;
|
|
73
95
|
}
|
|
74
96
|
|
|
75
97
|
.done-icon {
|
|
76
|
-
|
|
77
|
-
|
|
98
|
+
color: #22c55e;
|
|
99
|
+
font-size: 14px;
|
|
78
100
|
}
|
|
79
101
|
|
|
80
102
|
.error {
|
|
81
|
-
|
|
82
|
-
|
|
103
|
+
color: #dc2626;
|
|
104
|
+
font-weight: 500;
|
|
83
105
|
}
|
|
84
106
|
|
|
85
107
|
.error-link {
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
108
|
+
margin-left: 10px;
|
|
109
|
+
background: transparent;
|
|
110
|
+
border: none;
|
|
111
|
+
padding: 0;
|
|
112
|
+
font-size: 13px;
|
|
113
|
+
text-decoration: underline;
|
|
114
|
+
cursor: pointer;
|
|
115
|
+
color: #1f2937;
|
|
94
116
|
}
|
|
95
117
|
|
|
96
118
|
.error-link:hover {
|
|
97
|
-
|
|
119
|
+
opacity: 0.9;
|
|
98
120
|
}
|
|
99
121
|
|
|
100
122
|
.spinner {
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
123
|
+
display: inline-block;
|
|
124
|
+
width: 14px;
|
|
125
|
+
height: 14px;
|
|
126
|
+
border: 2px solid #007bff;
|
|
127
|
+
border-top: 2px solid transparent;
|
|
128
|
+
border-radius: 50%;
|
|
129
|
+
animation: spin 0.8s linear infinite;
|
|
130
|
+
vertical-align: middle;
|
|
131
|
+
margin-right: 6px;
|
|
110
132
|
}
|
|
111
133
|
|
|
112
134
|
@keyframes spin {
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
135
|
+
0% {
|
|
136
|
+
transform: rotate(0deg);
|
|
137
|
+
}
|
|
116
138
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
139
|
+
100% {
|
|
140
|
+
transform: rotate(360deg);
|
|
141
|
+
}
|
|
120
142
|
}
|
|
121
143
|
</style>
|