vue-intergrall-plugins 0.0.290 → 0.0.292
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,22 @@
|
|
|
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
|
+
<hr />
|
|
133
|
+
</li>
|
|
134
|
+
</ul>
|
|
135
|
+
</div>
|
|
77
136
|
<div class="card-footer" v-if="anexos && anexos.length">
|
|
78
137
|
<div class="card-anexo" v-for="(anexo, index) in anexos" :key="`${index}`">
|
|
79
138
|
<CardAttachment :anexo="anexo" :dictionary="dictionary" :dominio="dominio" />
|
|
@@ -84,98 +143,103 @@
|
|
|
84
143
|
</template>
|
|
85
144
|
|
|
86
145
|
<script>
|
|
87
|
-
import { textoLongo } from "@/mixins/formatarTexto"
|
|
88
|
-
import { formataTimezoneData, formataDataHora } from "../../services/textFormatting"
|
|
89
|
-
import CardAttachment from "./CardAttachment"
|
|
146
|
+
import { textoLongo } from "@/mixins/formatarTexto";
|
|
147
|
+
import { formataTimezoneData, formataDataHora } from "../../services/textFormatting";
|
|
148
|
+
import CardAttachment from "./CardAttachment";
|
|
90
149
|
|
|
91
150
|
export default {
|
|
92
151
|
components: { CardAttachment },
|
|
93
152
|
props: {
|
|
94
153
|
dictionary: {
|
|
95
154
|
type: Object,
|
|
96
|
-
required: true
|
|
155
|
+
required: true,
|
|
97
156
|
},
|
|
98
157
|
messageIndex: {
|
|
99
158
|
type: [Number, String],
|
|
100
|
-
required: true
|
|
159
|
+
required: true,
|
|
101
160
|
},
|
|
102
161
|
dominio: {
|
|
103
162
|
type: String,
|
|
104
|
-
required: true
|
|
163
|
+
required: true,
|
|
105
164
|
},
|
|
106
165
|
hasExpand: {
|
|
107
166
|
type: Boolean,
|
|
108
167
|
required: false,
|
|
109
|
-
default: true
|
|
168
|
+
default: true,
|
|
110
169
|
},
|
|
111
170
|
origem: {
|
|
112
171
|
type: String,
|
|
113
|
-
required: true
|
|
172
|
+
required: true,
|
|
114
173
|
},
|
|
115
174
|
autor: {
|
|
116
|
-
type: String
|
|
175
|
+
type: String,
|
|
117
176
|
},
|
|
118
177
|
login: {
|
|
119
|
-
type: String
|
|
178
|
+
type: String,
|
|
120
179
|
},
|
|
121
180
|
mensagem: {
|
|
122
|
-
type: String
|
|
181
|
+
type: String,
|
|
123
182
|
},
|
|
124
183
|
anexos: {
|
|
125
|
-
type: Array
|
|
184
|
+
type: Array,
|
|
126
185
|
},
|
|
127
186
|
data_cri: {
|
|
128
|
-
type: String
|
|
187
|
+
type: String,
|
|
129
188
|
},
|
|
130
189
|
data_mod: {
|
|
131
|
-
type: String
|
|
190
|
+
type: String,
|
|
132
191
|
},
|
|
133
192
|
ticket_id: {
|
|
134
|
-
type: Object
|
|
193
|
+
type: Object,
|
|
135
194
|
},
|
|
136
195
|
ticket_name: {
|
|
137
|
-
type: String
|
|
196
|
+
type: String,
|
|
138
197
|
},
|
|
139
198
|
msgNova: {
|
|
140
|
-
type: Boolean
|
|
199
|
+
type: Boolean,
|
|
141
200
|
},
|
|
142
201
|
origemExterna: {
|
|
143
|
-
type: String
|
|
144
|
-
}
|
|
202
|
+
type: String,
|
|
203
|
+
},
|
|
204
|
+
interatividade: {
|
|
205
|
+
type: Array,
|
|
206
|
+
required: false,
|
|
207
|
+
default: () => [],
|
|
208
|
+
},
|
|
145
209
|
},
|
|
146
210
|
mixins: [textoLongo],
|
|
147
211
|
computed: {
|
|
148
212
|
randomizeValue() {
|
|
149
|
-
return `${
|
|
213
|
+
return `${Math.floor(Math.random() * 7770)}${Date.now()}`;
|
|
150
214
|
},
|
|
151
215
|
mensagemFormatada() {
|
|
152
|
-
if(this.mensagem) {
|
|
153
|
-
const regex = /(\n| )/g
|
|
154
|
-
if(regex.test(this.mensagem)) return this.mensagem.replace(regex, "<br>")
|
|
216
|
+
if (this.mensagem) {
|
|
217
|
+
const regex = /(\n| )/g;
|
|
218
|
+
if (regex.test(this.mensagem)) return this.mensagem.replace(regex, "<br>");
|
|
155
219
|
}
|
|
156
|
-
return this.mensagem
|
|
220
|
+
return this.mensagem;
|
|
157
221
|
},
|
|
158
222
|
iconAutor() {
|
|
159
|
-
return this.origem === "outros" ? [
|
|
223
|
+
return this.origem === "outros" ? ["fas", "user"] : ["fas", "headset"];
|
|
160
224
|
},
|
|
161
225
|
ticketClassCod() {
|
|
162
|
-
if(!this.ticket_id || !this.ticket_id.cod) return ""
|
|
163
|
-
const { cod } = this.ticket_id
|
|
164
|
-
switch(cod) {
|
|
226
|
+
if (!this.ticket_id || !this.ticket_id.cod) return "";
|
|
227
|
+
const { cod } = this.ticket_id;
|
|
228
|
+
switch (cod) {
|
|
165
229
|
case 17:
|
|
166
230
|
case "17":
|
|
167
231
|
case 9:
|
|
168
232
|
case "9":
|
|
169
233
|
case 8:
|
|
170
234
|
case "8":
|
|
171
|
-
return "red"
|
|
235
|
+
return "red";
|
|
172
236
|
case 3:
|
|
173
237
|
case "3":
|
|
174
238
|
case 6:
|
|
175
239
|
case "6":
|
|
176
|
-
return "yellow"
|
|
240
|
+
return "yellow";
|
|
177
241
|
default:
|
|
178
|
-
return ""
|
|
242
|
+
return "";
|
|
179
243
|
}
|
|
180
244
|
},
|
|
181
245
|
isNumberBiggerThanSix() {
|
|
@@ -185,22 +249,74 @@ export default {
|
|
|
185
249
|
} catch (err) {
|
|
186
250
|
return false;
|
|
187
251
|
}
|
|
188
|
-
}
|
|
252
|
+
},
|
|
253
|
+
filteredInteratividadeData() {
|
|
254
|
+
if (!this.interatividade || !this.interatividade.length) return [];
|
|
255
|
+
const finalData = [];
|
|
256
|
+
const validKeys = [
|
|
257
|
+
"name",
|
|
258
|
+
"value",
|
|
259
|
+
"ticket_detail_id",
|
|
260
|
+
"ticket_detail_type_id",
|
|
261
|
+
"creation_date",
|
|
262
|
+
"modification_date",
|
|
263
|
+
];
|
|
264
|
+
this.interatividade.forEach((values) => {
|
|
265
|
+
const currentKeys = Object.keys(values);
|
|
266
|
+
const formattedValues = {};
|
|
267
|
+
if (values.name && values.value) {
|
|
268
|
+
formattedValues[values.name] = values.value;
|
|
269
|
+
}
|
|
270
|
+
currentKeys.forEach((key) => {
|
|
271
|
+
if (validKeys.includes(key)) {
|
|
272
|
+
let formattedKey = "";
|
|
273
|
+
if (key === "ticket_detail_id") {
|
|
274
|
+
formattedKey = this.dictionary.ra_ticket_detail_id_title;
|
|
275
|
+
} else if (key === "ticket_detail_type_id") {
|
|
276
|
+
formattedKey = this.dictionary.ra_ticket_detail_type_id_title;
|
|
277
|
+
} else if (key === "creation_date") {
|
|
278
|
+
formattedKey = this.dictionary.ra_creation_date_title;
|
|
279
|
+
} else if (key === "modification_date") {
|
|
280
|
+
formattedKey = this.dictionary.ra_creation_modification_title;
|
|
281
|
+
}
|
|
282
|
+
if (formattedKey) {
|
|
283
|
+
formattedValues[formattedKey] = values[key];
|
|
284
|
+
}
|
|
285
|
+
}
|
|
286
|
+
});
|
|
287
|
+
finalData.push(formattedValues);
|
|
288
|
+
});
|
|
289
|
+
return finalData;
|
|
290
|
+
},
|
|
189
291
|
},
|
|
190
292
|
methods: {
|
|
191
293
|
formataTimezoneData(timezoneData) {
|
|
192
|
-
return formataTimezoneData(timezoneData)
|
|
294
|
+
return formataTimezoneData(timezoneData);
|
|
193
295
|
},
|
|
194
296
|
returnFormataDataHora(dataHora) {
|
|
195
|
-
return formataDataHora(dataHora, false, false, this.dictionary)
|
|
297
|
+
return formataDataHora(dataHora, false, false, this.dictionary);
|
|
196
298
|
},
|
|
197
299
|
expandirCard() {
|
|
198
|
-
this.$emit("expand-card", this.$props)
|
|
300
|
+
this.$emit("expand-card", this.$props);
|
|
199
301
|
// this.$store.dispatch("informacoesCardExpandido", this.$props)
|
|
200
302
|
// this.$store.dispatch("toggleBlocker", { state: true, origin: "expandir-card-reclamacao"})
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
}
|
|
303
|
+
},
|
|
304
|
+
formatInteratividadeValue(key, value) {
|
|
305
|
+
const regexISO8601 = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/;
|
|
306
|
+
if (regexISO8601.test(value)) {
|
|
307
|
+
const data = new Date(value);
|
|
308
|
+
const dia = String(data.getDate()).padStart(2, "0");
|
|
309
|
+
const mes = String(data.getMonth() + 1).padStart(2, "0");
|
|
310
|
+
const ano = data.getFullYear();
|
|
311
|
+
const horas = String(data.getHours()).padStart(2, "0");
|
|
312
|
+
const minutos = String(data.getMinutes()).padStart(2, "0");
|
|
313
|
+
|
|
314
|
+
value = `${dia}/${mes}/${ano} ${horas}:${minutos}`;
|
|
315
|
+
}
|
|
316
|
+
return `<strong>${key}:</strong> ${value || "---"}`;
|
|
317
|
+
},
|
|
318
|
+
},
|
|
319
|
+
};
|
|
204
320
|
</script>
|
|
205
321
|
|
|
206
322
|
<style scoped>
|
|
@@ -212,14 +328,16 @@ export default {
|
|
|
212
328
|
.fade-leave-to {
|
|
213
329
|
opacity: 0;
|
|
214
330
|
}
|
|
215
|
-
|
|
216
|
-
.card-cli,
|
|
331
|
+
|
|
332
|
+
.card-cli,
|
|
333
|
+
.card-ope {
|
|
217
334
|
display: flex;
|
|
218
335
|
width: 95%;
|
|
219
336
|
margin: 5px 0;
|
|
220
337
|
position: relative;
|
|
221
338
|
}
|
|
222
|
-
.card-cli.msgNova,
|
|
339
|
+
.card-cli.msgNova,
|
|
340
|
+
.card-ope.msgNova {
|
|
223
341
|
margin-top: 30px;
|
|
224
342
|
}
|
|
225
343
|
|
|
@@ -231,14 +349,13 @@ export default {
|
|
|
231
349
|
justify-content: center;
|
|
232
350
|
align-items: center;
|
|
233
351
|
margin: 2.5px 0;
|
|
234
|
-
background-color: lighten(#
|
|
352
|
+
background-color: lighten(#fff249, 15);
|
|
235
353
|
}
|
|
236
354
|
|
|
237
355
|
.card-cli .card {
|
|
238
|
-
border-left: 3px solid #
|
|
356
|
+
border-left: 3px solid #90b823;
|
|
239
357
|
}
|
|
240
358
|
|
|
241
|
-
|
|
242
359
|
.card-ope {
|
|
243
360
|
align-self: flex-end;
|
|
244
361
|
background-color: lighten(#007535, 72);
|
|
@@ -248,7 +365,7 @@ export default {
|
|
|
248
365
|
}
|
|
249
366
|
|
|
250
367
|
.card {
|
|
251
|
-
background-color: rgba(255, 255, 255, .9);
|
|
368
|
+
background-color: rgba(255, 255, 255, 0.9);
|
|
252
369
|
overflow: hidden;
|
|
253
370
|
width: 100%;
|
|
254
371
|
padding: 2.5px 5px;
|
|
@@ -265,7 +382,7 @@ export default {
|
|
|
265
382
|
justify-content: space-between;
|
|
266
383
|
}
|
|
267
384
|
.card-header svg {
|
|
268
|
-
font-size: 1rem
|
|
385
|
+
font-size: 1rem;
|
|
269
386
|
}
|
|
270
387
|
|
|
271
388
|
.card-canal {
|
|
@@ -300,7 +417,7 @@ export default {
|
|
|
300
417
|
align-items: center;
|
|
301
418
|
margin: 2.5px;
|
|
302
419
|
cursor: pointer;
|
|
303
|
-
opacity: .8;
|
|
420
|
+
opacity: 0.8;
|
|
304
421
|
transition: opacity 150ms;
|
|
305
422
|
}
|
|
306
423
|
.card-expand:hover {
|
|
@@ -322,13 +439,13 @@ export default {
|
|
|
322
439
|
}
|
|
323
440
|
|
|
324
441
|
.card-chip {
|
|
325
|
-
font-size: .8rem;
|
|
442
|
+
font-size: 0.8rem;
|
|
326
443
|
width: fit-content;
|
|
327
444
|
border-radius: 15px;
|
|
328
445
|
transition: all 150ms ease-in-out;
|
|
329
446
|
padding: 2.5px 7px;
|
|
330
447
|
color: rgb(31, 105, 193);
|
|
331
|
-
background-color: rgba(207, 216, 244, .6);
|
|
448
|
+
background-color: rgba(207, 216, 244, 0.6);
|
|
332
449
|
margin-bottom: 5px;
|
|
333
450
|
}
|
|
334
451
|
.card-chip:hover {
|
|
@@ -336,28 +453,28 @@ export default {
|
|
|
336
453
|
}
|
|
337
454
|
.card-chip.orange {
|
|
338
455
|
color: #e14924;
|
|
339
|
-
background-color: rgba(228, 92, 58, .15);
|
|
456
|
+
background-color: rgba(228, 92, 58, 0.15);
|
|
340
457
|
}
|
|
341
458
|
.card-chip.orange:hover {
|
|
342
|
-
background-color: rgba(228, 92, 58, .2);
|
|
459
|
+
background-color: rgba(228, 92, 58, 0.2);
|
|
343
460
|
}
|
|
344
461
|
.card-chip.yellow {
|
|
345
462
|
color: #f4a304;
|
|
346
|
-
background-color: rgba(252, 191, 73, .15);
|
|
463
|
+
background-color: rgba(252, 191, 73, 0.15);
|
|
347
464
|
}
|
|
348
465
|
.card-chip.yellow:hover {
|
|
349
|
-
background-color: rgba(252, 191, 73, .2);
|
|
466
|
+
background-color: rgba(252, 191, 73, 0.2);
|
|
350
467
|
}
|
|
351
468
|
.card-chip.red {
|
|
352
469
|
color: rgb(231, 76, 60);
|
|
353
|
-
background-color: rgba(231, 76, 60, .2);
|
|
470
|
+
background-color: rgba(231, 76, 60, 0.2);
|
|
354
471
|
}
|
|
355
472
|
.card-chip.red:hover {
|
|
356
|
-
background-color: rgba(231, 76, 60, .25);
|
|
473
|
+
background-color: rgba(231, 76, 60, 0.25);
|
|
357
474
|
}
|
|
358
475
|
.card-chip.green {
|
|
359
476
|
color: #0e3213;
|
|
360
|
-
background-color: rgba(15,177,39,0.3);
|
|
477
|
+
background-color: rgba(15, 177, 39, 0.3);
|
|
361
478
|
}
|
|
362
479
|
.card-chip.green:hover {
|
|
363
480
|
background-color: rgba(15, 177, 39, 0.4);
|
|
@@ -394,7 +511,7 @@ export default {
|
|
|
394
511
|
}
|
|
395
512
|
|
|
396
513
|
.anexo-icone {
|
|
397
|
-
opacity: .9;
|
|
514
|
+
opacity: 0.9;
|
|
398
515
|
transition: opacity 200ms;
|
|
399
516
|
color: #222;
|
|
400
517
|
cursor: pointer;
|
|
@@ -403,7 +520,7 @@ export default {
|
|
|
403
520
|
align-items: center;
|
|
404
521
|
}
|
|
405
522
|
.anexo-icone:hover {
|
|
406
|
-
opacity: 1
|
|
523
|
+
opacity: 1;
|
|
407
524
|
}
|
|
408
525
|
.anexo-icone:visited {
|
|
409
526
|
color: inherit;
|
|
@@ -425,17 +542,17 @@ svg {
|
|
|
425
542
|
transform: translateY(2px);
|
|
426
543
|
width: 20px;
|
|
427
544
|
height: 20px;
|
|
428
|
-
background-color: #
|
|
545
|
+
background-color: #fff;
|
|
429
546
|
}
|
|
430
547
|
.anexo-icone.doc {
|
|
431
|
-
color: #
|
|
548
|
+
color: #15517f;
|
|
432
549
|
}
|
|
433
550
|
.anexo-icone.doc::after {
|
|
434
551
|
content: "";
|
|
435
552
|
position: absolute;
|
|
436
553
|
width: 20px;
|
|
437
554
|
height: 20px;
|
|
438
|
-
background-color: #
|
|
555
|
+
background-color: #fff;
|
|
439
556
|
}
|
|
440
557
|
.anexo-img {
|
|
441
558
|
display: flex;
|
|
@@ -444,10 +561,10 @@ svg {
|
|
|
444
561
|
width: 100%;
|
|
445
562
|
height: 100%;
|
|
446
563
|
overflow: hidden;
|
|
447
|
-
background-color: rgba(0, 0, 0, .2);
|
|
564
|
+
background-color: rgba(0, 0, 0, 0.2);
|
|
448
565
|
border-radius: 2.5px;
|
|
449
566
|
cursor: pointer;
|
|
450
|
-
opacity: .9;
|
|
567
|
+
opacity: 0.9;
|
|
451
568
|
transition: opacity 150ms;
|
|
452
569
|
}
|
|
453
570
|
|
|
@@ -458,4 +575,28 @@ svg {
|
|
|
458
575
|
width: 95%;
|
|
459
576
|
}
|
|
460
577
|
|
|
461
|
-
|
|
578
|
+
.card-interatividade {
|
|
579
|
+
display: flex;
|
|
580
|
+
flex-direction: column;
|
|
581
|
+
margin-top: 10px;
|
|
582
|
+
margin-bottom: 5px;
|
|
583
|
+
}
|
|
584
|
+
|
|
585
|
+
.card-interatividade-title {
|
|
586
|
+
font-weight: bold;
|
|
587
|
+
margin-bottom: 5px;
|
|
588
|
+
}
|
|
589
|
+
|
|
590
|
+
.card-interatividade-list {
|
|
591
|
+
margin: 0;
|
|
592
|
+
padding: 0;
|
|
593
|
+
font-size: 0.9rem;
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
.card-interatividade-list hr {
|
|
597
|
+
height: 1px;
|
|
598
|
+
background-color: #ccc;
|
|
599
|
+
width: 100%;
|
|
600
|
+
border: 0;
|
|
601
|
+
}
|
|
602
|
+
</style>
|