vue-intergrall-plugins 0.0.289 → 0.0.291
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.
|
@@ -1,24 +1,67 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
2
|
+
<div
|
|
3
|
+
:class="{
|
|
4
|
+
'card-cli': origem === 'outros',
|
|
5
|
+
'card-ope': origem === 'principal',
|
|
6
|
+
msgNova: msgNova,
|
|
7
|
+
}"
|
|
8
|
+
v-if="origem"
|
|
9
|
+
:id="`a${messageIndex ? messageIndex : randomizeValue}`"
|
|
10
|
+
>
|
|
11
|
+
<transition name="fade">
|
|
12
|
+
<span v-if="msgNova" class="novas-mensagens"> Nova mensagem </span>
|
|
7
13
|
</transition>
|
|
8
14
|
<div class="card box-shadow">
|
|
9
15
|
<div class="card-header">
|
|
10
16
|
<div class="card-autor">
|
|
11
17
|
<fa-icon :icon="iconAutor" />
|
|
12
|
-
<p
|
|
13
|
-
|
|
18
|
+
<p
|
|
19
|
+
class="text-bold"
|
|
20
|
+
v-if="autor"
|
|
21
|
+
v-text="`${tratarTextoLongo(autor)}`"
|
|
22
|
+
:title="autor"
|
|
23
|
+
></p>
|
|
24
|
+
<p
|
|
25
|
+
v-if="origem === 'principal' && login"
|
|
26
|
+
v-text="`| ${login}`"
|
|
27
|
+
:title="login"
|
|
28
|
+
></p>
|
|
14
29
|
</div>
|
|
15
30
|
<div class="card-right">
|
|
16
31
|
<div class="card-datas">
|
|
17
|
-
<div
|
|
18
|
-
|
|
32
|
+
<div
|
|
33
|
+
v-if="data_cri"
|
|
34
|
+
class="card-data"
|
|
35
|
+
:title="`${dictionary.data_criacao}: ${
|
|
36
|
+
origem === 'outros'
|
|
37
|
+
? formataTimezoneData(data_cri)
|
|
38
|
+
: returnFormataDataHora(data_cri)
|
|
39
|
+
}`"
|
|
40
|
+
>
|
|
41
|
+
<span
|
|
42
|
+
v-text="
|
|
43
|
+
origem === 'outros'
|
|
44
|
+
? formataTimezoneData(data_cri)
|
|
45
|
+
: returnFormataDataHora(data_cri)
|
|
46
|
+
"
|
|
47
|
+
></span>
|
|
19
48
|
</div>
|
|
20
|
-
<div
|
|
21
|
-
|
|
49
|
+
<div
|
|
50
|
+
v-if="data_mod"
|
|
51
|
+
class="card-data"
|
|
52
|
+
:title="`${dictionary.data_mod}: ${
|
|
53
|
+
origem === 'outros'
|
|
54
|
+
? formataTimezoneData(data_mod)
|
|
55
|
+
: returnFormataDataHora(data_mod)
|
|
56
|
+
}`"
|
|
57
|
+
>
|
|
58
|
+
<span
|
|
59
|
+
v-text="
|
|
60
|
+
origem === 'outros'
|
|
61
|
+
? formataTimezoneData(data_mod)
|
|
62
|
+
: returnFormataDataHora(data_mod)
|
|
63
|
+
"
|
|
64
|
+
></span>
|
|
22
65
|
</div>
|
|
23
66
|
</div>
|
|
24
67
|
<div class="card-expand" @click="expandirCard()" v-if="hasExpand">
|
|
@@ -74,6 +117,21 @@
|
|
|
74
117
|
></p>
|
|
75
118
|
</div>
|
|
76
119
|
<p class="card-message" v-html="mensagemFormatada"></p>
|
|
120
|
+
<div
|
|
121
|
+
class="card-interatividade"
|
|
122
|
+
v-if="filteredInteratividadeData && filteredInteratividadeData.length"
|
|
123
|
+
>
|
|
124
|
+
<p class="card-interatividade-title">{{ dictionary.ra_infos_interatividade }}:</p>
|
|
125
|
+
<ul class="card-interatividade-list">
|
|
126
|
+
<li v-for="(values, index) in filteredInteratividadeData" :key="index">
|
|
127
|
+
<p
|
|
128
|
+
v-for="(value, key) in values"
|
|
129
|
+
:key="key"
|
|
130
|
+
v-html="formatInteratividadeValue(key, value)"
|
|
131
|
+
></p>
|
|
132
|
+
</li>
|
|
133
|
+
</ul>
|
|
134
|
+
</div>
|
|
77
135
|
<div class="card-footer" v-if="anexos && anexos.length">
|
|
78
136
|
<div class="card-anexo" v-for="(anexo, index) in anexos" :key="`${index}`">
|
|
79
137
|
<CardAttachment :anexo="anexo" :dictionary="dictionary" :dominio="dominio" />
|
|
@@ -84,98 +142,103 @@
|
|
|
84
142
|
</template>
|
|
85
143
|
|
|
86
144
|
<script>
|
|
87
|
-
import { textoLongo } from "@/mixins/formatarTexto"
|
|
88
|
-
import { formataTimezoneData, formataDataHora } from "../../services/textFormatting"
|
|
89
|
-
import CardAttachment from "./CardAttachment"
|
|
145
|
+
import { textoLongo } from "@/mixins/formatarTexto";
|
|
146
|
+
import { formataTimezoneData, formataDataHora } from "../../services/textFormatting";
|
|
147
|
+
import CardAttachment from "./CardAttachment";
|
|
90
148
|
|
|
91
149
|
export default {
|
|
92
150
|
components: { CardAttachment },
|
|
93
151
|
props: {
|
|
94
152
|
dictionary: {
|
|
95
153
|
type: Object,
|
|
96
|
-
required: true
|
|
154
|
+
required: true,
|
|
97
155
|
},
|
|
98
156
|
messageIndex: {
|
|
99
157
|
type: [Number, String],
|
|
100
|
-
required: true
|
|
158
|
+
required: true,
|
|
101
159
|
},
|
|
102
160
|
dominio: {
|
|
103
161
|
type: String,
|
|
104
|
-
required: true
|
|
162
|
+
required: true,
|
|
105
163
|
},
|
|
106
164
|
hasExpand: {
|
|
107
165
|
type: Boolean,
|
|
108
166
|
required: false,
|
|
109
|
-
default: true
|
|
167
|
+
default: true,
|
|
110
168
|
},
|
|
111
169
|
origem: {
|
|
112
170
|
type: String,
|
|
113
|
-
required: true
|
|
171
|
+
required: true,
|
|
114
172
|
},
|
|
115
173
|
autor: {
|
|
116
|
-
type: String
|
|
174
|
+
type: String,
|
|
117
175
|
},
|
|
118
176
|
login: {
|
|
119
|
-
type: String
|
|
177
|
+
type: String,
|
|
120
178
|
},
|
|
121
179
|
mensagem: {
|
|
122
|
-
type: String
|
|
180
|
+
type: String,
|
|
123
181
|
},
|
|
124
182
|
anexos: {
|
|
125
|
-
type: Array
|
|
183
|
+
type: Array,
|
|
126
184
|
},
|
|
127
185
|
data_cri: {
|
|
128
|
-
type: String
|
|
186
|
+
type: String,
|
|
129
187
|
},
|
|
130
188
|
data_mod: {
|
|
131
|
-
type: String
|
|
189
|
+
type: String,
|
|
132
190
|
},
|
|
133
191
|
ticket_id: {
|
|
134
|
-
type: Object
|
|
192
|
+
type: Object,
|
|
135
193
|
},
|
|
136
194
|
ticket_name: {
|
|
137
|
-
type: String
|
|
195
|
+
type: String,
|
|
138
196
|
},
|
|
139
197
|
msgNova: {
|
|
140
|
-
type: Boolean
|
|
198
|
+
type: Boolean,
|
|
141
199
|
},
|
|
142
200
|
origemExterna: {
|
|
143
|
-
type: String
|
|
144
|
-
}
|
|
201
|
+
type: String,
|
|
202
|
+
},
|
|
203
|
+
interatividade: {
|
|
204
|
+
type: Array,
|
|
205
|
+
required: false,
|
|
206
|
+
default: () => [],
|
|
207
|
+
},
|
|
145
208
|
},
|
|
146
209
|
mixins: [textoLongo],
|
|
147
210
|
computed: {
|
|
148
211
|
randomizeValue() {
|
|
149
|
-
return `${
|
|
212
|
+
return `${Math.floor(Math.random() * 7770)}${Date.now()}`;
|
|
150
213
|
},
|
|
151
214
|
mensagemFormatada() {
|
|
152
|
-
if(this.mensagem) {
|
|
153
|
-
const regex = /(\n| )/g
|
|
154
|
-
if(regex.test(this.mensagem)) return this.mensagem.replace(regex, "<br>")
|
|
215
|
+
if (this.mensagem) {
|
|
216
|
+
const regex = /(\n| )/g;
|
|
217
|
+
if (regex.test(this.mensagem)) return this.mensagem.replace(regex, "<br>");
|
|
155
218
|
}
|
|
156
|
-
return this.mensagem
|
|
219
|
+
return this.mensagem;
|
|
157
220
|
},
|
|
158
221
|
iconAutor() {
|
|
159
|
-
return this.origem === "outros" ? [
|
|
222
|
+
return this.origem === "outros" ? ["fas", "user"] : ["fas", "headset"];
|
|
160
223
|
},
|
|
161
224
|
ticketClassCod() {
|
|
162
|
-
if(!this.ticket_id || !this.ticket_id.cod) return ""
|
|
163
|
-
const { cod } = this.ticket_id
|
|
164
|
-
switch(cod) {
|
|
225
|
+
if (!this.ticket_id || !this.ticket_id.cod) return "";
|
|
226
|
+
const { cod } = this.ticket_id;
|
|
227
|
+
switch (cod) {
|
|
165
228
|
case 17:
|
|
166
229
|
case "17":
|
|
167
230
|
case 9:
|
|
168
231
|
case "9":
|
|
169
232
|
case 8:
|
|
170
233
|
case "8":
|
|
171
|
-
return "red"
|
|
234
|
+
return "red";
|
|
172
235
|
case 3:
|
|
173
236
|
case "3":
|
|
174
237
|
case 6:
|
|
175
238
|
case "6":
|
|
176
|
-
return "yellow"
|
|
239
|
+
return "yellow";
|
|
177
240
|
default:
|
|
178
|
-
return ""
|
|
241
|
+
return "";
|
|
179
242
|
}
|
|
180
243
|
},
|
|
181
244
|
isNumberBiggerThanSix() {
|
|
@@ -185,22 +248,65 @@ export default {
|
|
|
185
248
|
} catch (err) {
|
|
186
249
|
return false;
|
|
187
250
|
}
|
|
188
|
-
}
|
|
251
|
+
},
|
|
252
|
+
filteredInteratividadeData() {
|
|
253
|
+
if (!this.interatividade || !this.interatividade.length) return [];
|
|
254
|
+
const finalData = [];
|
|
255
|
+
const validKeys = [
|
|
256
|
+
"ticket_detail_id",
|
|
257
|
+
"ticket_detail_type_id",
|
|
258
|
+
"creation_date",
|
|
259
|
+
"modification_date",
|
|
260
|
+
];
|
|
261
|
+
this.interatividade.forEach((values) => {
|
|
262
|
+
const currentKeys = Object.keys(values);
|
|
263
|
+
currentKeys.forEach((key) => {
|
|
264
|
+
if (validKeys.includes(key)) {
|
|
265
|
+
let formattedKey = "";
|
|
266
|
+
if (key === "ticket_detail_id") {
|
|
267
|
+
formattedKey = this.dictionary.ra_ticket_detail_id_title;
|
|
268
|
+
} else if (key === "ticket_detail_type_id") {
|
|
269
|
+
formattedKey = this.dictionary.ra_ticket_detail_type_id_title;
|
|
270
|
+
} else if (key === "creation_date") {
|
|
271
|
+
formattedKey = this.dictionary.ra_creation_date_title;
|
|
272
|
+
} else if (key === "modification_date") {
|
|
273
|
+
formattedKey = this.dictionary.ra_creation_modification_title;
|
|
274
|
+
}
|
|
275
|
+
finalData.push({ [formattedKey || key]: values[key] });
|
|
276
|
+
}
|
|
277
|
+
});
|
|
278
|
+
});
|
|
279
|
+
return finalData;
|
|
280
|
+
},
|
|
189
281
|
},
|
|
190
282
|
methods: {
|
|
191
283
|
formataTimezoneData(timezoneData) {
|
|
192
|
-
return formataTimezoneData(timezoneData)
|
|
284
|
+
return formataTimezoneData(timezoneData);
|
|
193
285
|
},
|
|
194
286
|
returnFormataDataHora(dataHora) {
|
|
195
|
-
return formataDataHora(dataHora, false, false, this.dictionary)
|
|
287
|
+
return formataDataHora(dataHora, false, false, this.dictionary);
|
|
196
288
|
},
|
|
197
289
|
expandirCard() {
|
|
198
|
-
this.$emit("expand-card", this.$props)
|
|
290
|
+
this.$emit("expand-card", this.$props);
|
|
199
291
|
// this.$store.dispatch("informacoesCardExpandido", this.$props)
|
|
200
292
|
// this.$store.dispatch("toggleBlocker", { state: true, origin: "expandir-card-reclamacao"})
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
}
|
|
293
|
+
},
|
|
294
|
+
formatInteratividadeValue(key, value) {
|
|
295
|
+
const regexISO8601 = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/;
|
|
296
|
+
if (regexISO8601.test(value)) {
|
|
297
|
+
const data = new Date(value);
|
|
298
|
+
const dia = String(data.getDate()).padStart(2, "0");
|
|
299
|
+
const mes = String(data.getMonth() + 1).padStart(2, "0");
|
|
300
|
+
const ano = data.getFullYear();
|
|
301
|
+
const horas = String(data.getHours()).padStart(2, "0");
|
|
302
|
+
const minutos = String(data.getMinutes()).padStart(2, "0");
|
|
303
|
+
|
|
304
|
+
value = `${dia}/${mes}/${ano} ${horas}:${minutos}`;
|
|
305
|
+
}
|
|
306
|
+
return `<strong>${key}:</strong> ${value || "---"}`;
|
|
307
|
+
},
|
|
308
|
+
},
|
|
309
|
+
};
|
|
204
310
|
</script>
|
|
205
311
|
|
|
206
312
|
<style scoped>
|
|
@@ -212,14 +318,16 @@ export default {
|
|
|
212
318
|
.fade-leave-to {
|
|
213
319
|
opacity: 0;
|
|
214
320
|
}
|
|
215
|
-
|
|
216
|
-
.card-cli,
|
|
321
|
+
|
|
322
|
+
.card-cli,
|
|
323
|
+
.card-ope {
|
|
217
324
|
display: flex;
|
|
218
325
|
width: 95%;
|
|
219
326
|
margin: 5px 0;
|
|
220
327
|
position: relative;
|
|
221
328
|
}
|
|
222
|
-
.card-cli.msgNova,
|
|
329
|
+
.card-cli.msgNova,
|
|
330
|
+
.card-ope.msgNova {
|
|
223
331
|
margin-top: 30px;
|
|
224
332
|
}
|
|
225
333
|
|
|
@@ -231,14 +339,13 @@ export default {
|
|
|
231
339
|
justify-content: center;
|
|
232
340
|
align-items: center;
|
|
233
341
|
margin: 2.5px 0;
|
|
234
|
-
background-color: lighten(#
|
|
342
|
+
background-color: lighten(#fff249, 15);
|
|
235
343
|
}
|
|
236
344
|
|
|
237
345
|
.card-cli .card {
|
|
238
|
-
border-left: 3px solid #
|
|
346
|
+
border-left: 3px solid #90b823;
|
|
239
347
|
}
|
|
240
348
|
|
|
241
|
-
|
|
242
349
|
.card-ope {
|
|
243
350
|
align-self: flex-end;
|
|
244
351
|
background-color: lighten(#007535, 72);
|
|
@@ -248,7 +355,7 @@ export default {
|
|
|
248
355
|
}
|
|
249
356
|
|
|
250
357
|
.card {
|
|
251
|
-
background-color: rgba(255, 255, 255, .9);
|
|
358
|
+
background-color: rgba(255, 255, 255, 0.9);
|
|
252
359
|
overflow: hidden;
|
|
253
360
|
width: 100%;
|
|
254
361
|
padding: 2.5px 5px;
|
|
@@ -265,7 +372,7 @@ export default {
|
|
|
265
372
|
justify-content: space-between;
|
|
266
373
|
}
|
|
267
374
|
.card-header svg {
|
|
268
|
-
font-size: 1rem
|
|
375
|
+
font-size: 1rem;
|
|
269
376
|
}
|
|
270
377
|
|
|
271
378
|
.card-canal {
|
|
@@ -300,7 +407,7 @@ export default {
|
|
|
300
407
|
align-items: center;
|
|
301
408
|
margin: 2.5px;
|
|
302
409
|
cursor: pointer;
|
|
303
|
-
opacity: .8;
|
|
410
|
+
opacity: 0.8;
|
|
304
411
|
transition: opacity 150ms;
|
|
305
412
|
}
|
|
306
413
|
.card-expand:hover {
|
|
@@ -322,13 +429,13 @@ export default {
|
|
|
322
429
|
}
|
|
323
430
|
|
|
324
431
|
.card-chip {
|
|
325
|
-
font-size: .8rem;
|
|
432
|
+
font-size: 0.8rem;
|
|
326
433
|
width: fit-content;
|
|
327
434
|
border-radius: 15px;
|
|
328
435
|
transition: all 150ms ease-in-out;
|
|
329
436
|
padding: 2.5px 7px;
|
|
330
437
|
color: rgb(31, 105, 193);
|
|
331
|
-
background-color: rgba(207, 216, 244, .6);
|
|
438
|
+
background-color: rgba(207, 216, 244, 0.6);
|
|
332
439
|
margin-bottom: 5px;
|
|
333
440
|
}
|
|
334
441
|
.card-chip:hover {
|
|
@@ -336,28 +443,28 @@ export default {
|
|
|
336
443
|
}
|
|
337
444
|
.card-chip.orange {
|
|
338
445
|
color: #e14924;
|
|
339
|
-
background-color: rgba(228, 92, 58, .15);
|
|
446
|
+
background-color: rgba(228, 92, 58, 0.15);
|
|
340
447
|
}
|
|
341
448
|
.card-chip.orange:hover {
|
|
342
|
-
background-color: rgba(228, 92, 58, .2);
|
|
449
|
+
background-color: rgba(228, 92, 58, 0.2);
|
|
343
450
|
}
|
|
344
451
|
.card-chip.yellow {
|
|
345
452
|
color: #f4a304;
|
|
346
|
-
background-color: rgba(252, 191, 73, .15);
|
|
453
|
+
background-color: rgba(252, 191, 73, 0.15);
|
|
347
454
|
}
|
|
348
455
|
.card-chip.yellow:hover {
|
|
349
|
-
background-color: rgba(252, 191, 73, .2);
|
|
456
|
+
background-color: rgba(252, 191, 73, 0.2);
|
|
350
457
|
}
|
|
351
458
|
.card-chip.red {
|
|
352
459
|
color: rgb(231, 76, 60);
|
|
353
|
-
background-color: rgba(231, 76, 60, .2);
|
|
460
|
+
background-color: rgba(231, 76, 60, 0.2);
|
|
354
461
|
}
|
|
355
462
|
.card-chip.red:hover {
|
|
356
|
-
background-color: rgba(231, 76, 60, .25);
|
|
463
|
+
background-color: rgba(231, 76, 60, 0.25);
|
|
357
464
|
}
|
|
358
465
|
.card-chip.green {
|
|
359
466
|
color: #0e3213;
|
|
360
|
-
background-color: rgba(15,177,39,0.3);
|
|
467
|
+
background-color: rgba(15, 177, 39, 0.3);
|
|
361
468
|
}
|
|
362
469
|
.card-chip.green:hover {
|
|
363
470
|
background-color: rgba(15, 177, 39, 0.4);
|
|
@@ -394,7 +501,7 @@ export default {
|
|
|
394
501
|
}
|
|
395
502
|
|
|
396
503
|
.anexo-icone {
|
|
397
|
-
opacity: .9;
|
|
504
|
+
opacity: 0.9;
|
|
398
505
|
transition: opacity 200ms;
|
|
399
506
|
color: #222;
|
|
400
507
|
cursor: pointer;
|
|
@@ -403,7 +510,7 @@ export default {
|
|
|
403
510
|
align-items: center;
|
|
404
511
|
}
|
|
405
512
|
.anexo-icone:hover {
|
|
406
|
-
opacity: 1
|
|
513
|
+
opacity: 1;
|
|
407
514
|
}
|
|
408
515
|
.anexo-icone:visited {
|
|
409
516
|
color: inherit;
|
|
@@ -425,17 +532,17 @@ svg {
|
|
|
425
532
|
transform: translateY(2px);
|
|
426
533
|
width: 20px;
|
|
427
534
|
height: 20px;
|
|
428
|
-
background-color: #
|
|
535
|
+
background-color: #fff;
|
|
429
536
|
}
|
|
430
537
|
.anexo-icone.doc {
|
|
431
|
-
color: #
|
|
538
|
+
color: #15517f;
|
|
432
539
|
}
|
|
433
540
|
.anexo-icone.doc::after {
|
|
434
541
|
content: "";
|
|
435
542
|
position: absolute;
|
|
436
543
|
width: 20px;
|
|
437
544
|
height: 20px;
|
|
438
|
-
background-color: #
|
|
545
|
+
background-color: #fff;
|
|
439
546
|
}
|
|
440
547
|
.anexo-img {
|
|
441
548
|
display: flex;
|
|
@@ -444,10 +551,10 @@ svg {
|
|
|
444
551
|
width: 100%;
|
|
445
552
|
height: 100%;
|
|
446
553
|
overflow: hidden;
|
|
447
|
-
background-color: rgba(0, 0, 0, .2);
|
|
554
|
+
background-color: rgba(0, 0, 0, 0.2);
|
|
448
555
|
border-radius: 2.5px;
|
|
449
556
|
cursor: pointer;
|
|
450
|
-
opacity: .9;
|
|
557
|
+
opacity: 0.9;
|
|
451
558
|
transition: opacity 150ms;
|
|
452
559
|
}
|
|
453
560
|
|
|
@@ -458,4 +565,21 @@ svg {
|
|
|
458
565
|
width: 95%;
|
|
459
566
|
}
|
|
460
567
|
|
|
461
|
-
|
|
568
|
+
.card-interatividade {
|
|
569
|
+
display: flex;
|
|
570
|
+
flex-direction: column;
|
|
571
|
+
margin-top: 10px;
|
|
572
|
+
margin-bottom: 5px;
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
.card-interatividade-title {
|
|
576
|
+
font-weight: bold;
|
|
577
|
+
margin-bottom: 5px;
|
|
578
|
+
}
|
|
579
|
+
|
|
580
|
+
.card-interatividade-list {
|
|
581
|
+
margin: 0;
|
|
582
|
+
padding: 0;
|
|
583
|
+
font-size: 0.9rem;
|
|
584
|
+
}
|
|
585
|
+
</style>
|