@burh/nuxt-core 1.1.8 → 1.1.10
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/.vscode/settings.json +10 -10
- package/components/burh-ds/Curriculum/UserCurriculum/CvRight/NoteBaloon.vue +156 -0
- package/components/burh-ds/Curriculum/UserCurriculum/UserCvMiddle.vue +30 -1
- package/components/burh-ds/Curriculum/UserCurriculum/UserCvRightSide.vue +18 -58
- package/components/burh-ds/Curriculum/UserCurriculum/UserCvRightSideNotAuth.vue +55 -30
- package/components/burh-ds/Img/ImageWithFallback.vue +73 -73
- package/package.json +1 -1
package/.vscode/settings.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
{
|
|
2
|
-
"editor.rulers": [120, 140],
|
|
3
|
-
"editor.formatOnSave": false,
|
|
4
|
-
|
|
5
|
-
"eslint.packageManager": "yarn",
|
|
6
|
-
|
|
7
|
-
"editor.codeActionsOnSave": {
|
|
8
|
-
"source.fixAll.eslint": "explicit"
|
|
9
|
-
},
|
|
10
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"editor.rulers": [120, 140],
|
|
3
|
+
"editor.formatOnSave": false,
|
|
4
|
+
|
|
5
|
+
"eslint.packageManager": "yarn",
|
|
6
|
+
|
|
7
|
+
"editor.codeActionsOnSave": {
|
|
8
|
+
"source.fixAll.eslint": "explicit"
|
|
9
|
+
},
|
|
10
|
+
}
|
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="user__note__baloon">
|
|
3
|
+
<div class="notes-baloon fullsize">
|
|
4
|
+
<div class="notes-text mx-3 pt-1">
|
|
5
|
+
<p class="mt-3">{{ comment.comment }}</p>
|
|
6
|
+
</div>
|
|
7
|
+
|
|
8
|
+
<div
|
|
9
|
+
class="d-flex justify-content-between align-items-center mx-3"
|
|
10
|
+
>
|
|
11
|
+
<p v-if="hasAction" @click.prevent="hasCommentRemove = !hasCommentRemove" class="notes-date remove-baloon">
|
|
12
|
+
Excluir
|
|
13
|
+
</p>
|
|
14
|
+
|
|
15
|
+
<p class="notes-date">
|
|
16
|
+
{{ comment.created_at | convertDate }}
|
|
17
|
+
</p>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
<div v-if="hasAction && hasCommentRemove" class="archive-remove">
|
|
22
|
+
<p>Você tem certeza que deseja apagar este comentário?</p>
|
|
23
|
+
<div class="d-flex">
|
|
24
|
+
<base-button
|
|
25
|
+
@click="removeComment(comment.id)"
|
|
26
|
+
size="sm"
|
|
27
|
+
class="btn-outline-primary col-6 p-1"
|
|
28
|
+
>
|
|
29
|
+
Apagar
|
|
30
|
+
</base-button>
|
|
31
|
+
<base-button
|
|
32
|
+
@click="hasCommentRemove = false"
|
|
33
|
+
size="sm"
|
|
34
|
+
class="btn-outline-danger col-6 p-1"
|
|
35
|
+
>
|
|
36
|
+
Cancelar
|
|
37
|
+
</base-button>
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
<div class="notes-owner d-flex mt-2">
|
|
42
|
+
<avatar
|
|
43
|
+
:src="userData.urlAvatar"
|
|
44
|
+
:alt="userData.name"
|
|
45
|
+
:fallbackText="userData.name"
|
|
46
|
+
/>
|
|
47
|
+
|
|
48
|
+
<p class="ml-1">
|
|
49
|
+
{{ userData.name }}
|
|
50
|
+
</p>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
</template>
|
|
54
|
+
|
|
55
|
+
<script>
|
|
56
|
+
import Avatar from '../../../Img/ImageWithFallback.vue';
|
|
57
|
+
|
|
58
|
+
export default {
|
|
59
|
+
name: 'user-note-baloon',
|
|
60
|
+
components: {
|
|
61
|
+
Avatar
|
|
62
|
+
},
|
|
63
|
+
props: {
|
|
64
|
+
comment: {
|
|
65
|
+
type: Object,
|
|
66
|
+
default: () => ({})
|
|
67
|
+
},
|
|
68
|
+
hasAction: {
|
|
69
|
+
type: Boolean,
|
|
70
|
+
default: true
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
data() {
|
|
74
|
+
return {
|
|
75
|
+
hasCommentRemove: false
|
|
76
|
+
};
|
|
77
|
+
},
|
|
78
|
+
computed: {
|
|
79
|
+
userData() {
|
|
80
|
+
if (this.comment.user) {
|
|
81
|
+
return this.comment.user;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
return {
|
|
85
|
+
urlAvatar: null,
|
|
86
|
+
name: 'Anônimo'
|
|
87
|
+
};
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
filters: {
|
|
91
|
+
convertDate(data) {
|
|
92
|
+
if (typeof data !== 'string') {
|
|
93
|
+
data = '2020-01-01 12:00:00';
|
|
94
|
+
}
|
|
95
|
+
let d = new Date(data);
|
|
96
|
+
let options = { hour: '2-digit', minute: '2-digit' };
|
|
97
|
+
return d.toLocaleDateString('pt-BR', options);
|
|
98
|
+
}
|
|
99
|
+
},
|
|
100
|
+
methods: {
|
|
101
|
+
removeComment(commentId) {
|
|
102
|
+
this.$emit('remove-comment', commentId);
|
|
103
|
+
this.hasCommentRemove = false;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
};
|
|
107
|
+
</script>
|
|
108
|
+
|
|
109
|
+
<style lang="scss" scoped>
|
|
110
|
+
.user__note__baloon {
|
|
111
|
+
margin-bottom: 16px;
|
|
112
|
+
|
|
113
|
+
.notes {
|
|
114
|
+
&-baloon {
|
|
115
|
+
width: 231px;
|
|
116
|
+
height: auto;
|
|
117
|
+
border-radius: 10px 10px 10px 0;
|
|
118
|
+
background: #eff5fd;
|
|
119
|
+
&.fullsize {
|
|
120
|
+
width: 80%!important;
|
|
121
|
+
min-width: 280px;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
&-text {
|
|
125
|
+
p {
|
|
126
|
+
font-size: 13px;
|
|
127
|
+
color: #62778c;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
&-date {
|
|
131
|
+
font-size: 11px;
|
|
132
|
+
text-align: right;
|
|
133
|
+
color: #8da2b5;
|
|
134
|
+
top: calc(50% - 17px / 2 - 444.5px);
|
|
135
|
+
}
|
|
136
|
+
&-owner {
|
|
137
|
+
img {
|
|
138
|
+
width: 23px;
|
|
139
|
+
height: 23px;
|
|
140
|
+
border-radius: 50%;
|
|
141
|
+
}
|
|
142
|
+
p {
|
|
143
|
+
font-size: 13px;
|
|
144
|
+
font-weight: 600;
|
|
145
|
+
text-transform: uppercase;
|
|
146
|
+
|
|
147
|
+
color: #62778c;
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.remove-baloon{
|
|
153
|
+
cursor: pointer;
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
</style>
|
|
@@ -112,6 +112,22 @@
|
|
|
112
112
|
Nenhuma informação adicionada
|
|
113
113
|
</p>
|
|
114
114
|
</div>
|
|
115
|
+
<!-- VÍDEO DE APRESENTAÇÃO -->
|
|
116
|
+
<div
|
|
117
|
+
v-if="
|
|
118
|
+
userData &&
|
|
119
|
+
userData.user_complementary_information &&
|
|
120
|
+
userData.user_complementary_information.presentation_video"
|
|
121
|
+
class="about content-block mt-5 ml-3 mr-3"
|
|
122
|
+
>
|
|
123
|
+
<h5 class="font-weight-bold">Vídeo de Apresentação</h5>
|
|
124
|
+
|
|
125
|
+
<div class="mux__video">
|
|
126
|
+
<MuxVideo
|
|
127
|
+
:src="userData.user_complementary_information.presentation_video"
|
|
128
|
+
/>
|
|
129
|
+
</div>
|
|
130
|
+
</div>
|
|
115
131
|
<!-- CONTATO -->
|
|
116
132
|
<h5 class="font-weight-bold mt-4 ml-3">Contatos</h5>
|
|
117
133
|
<div class="ml-3 info-text">
|
|
@@ -238,6 +254,7 @@ import getPrefixes from '~/util/getPrefixes.js';
|
|
|
238
254
|
import { mask } from 'vue-the-mask';
|
|
239
255
|
import { Dropdown, DropdownMenu, DropdownItem } from 'element-ui';
|
|
240
256
|
import { parsePhoneNumber } from 'awesome-phonenumber';
|
|
257
|
+
import MuxVideo from '../../Video/MuxVideo.vue';
|
|
241
258
|
|
|
242
259
|
import swal from 'sweetalert2';
|
|
243
260
|
import axios from 'axios';
|
|
@@ -299,7 +316,8 @@ export default {
|
|
|
299
316
|
components: {
|
|
300
317
|
ElDropdown: Dropdown,
|
|
301
318
|
ElDropdownMenu: DropdownMenu,
|
|
302
|
-
ElDropdownItem: DropdownItem
|
|
319
|
+
ElDropdownItem: DropdownItem,
|
|
320
|
+
MuxVideo
|
|
303
321
|
},
|
|
304
322
|
data() {
|
|
305
323
|
return {
|
|
@@ -544,6 +562,17 @@ export default {
|
|
|
544
562
|
<style lang="scss" scoped>
|
|
545
563
|
@import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
|
|
546
564
|
|
|
565
|
+
.mux__video {
|
|
566
|
+
width: 100%;
|
|
567
|
+
margin-top: 16px;
|
|
568
|
+
|
|
569
|
+
video {
|
|
570
|
+
width: 100% !important;
|
|
571
|
+
border-radius: 8px !important;
|
|
572
|
+
display: block !important;
|
|
573
|
+
}
|
|
574
|
+
}
|
|
575
|
+
|
|
547
576
|
.cv__box {
|
|
548
577
|
cursor: pointer;
|
|
549
578
|
margin: 0;
|
|
@@ -470,60 +470,17 @@
|
|
|
470
470
|
<div class="line mb-3"></div>
|
|
471
471
|
|
|
472
472
|
<template v-if="!isLocked">
|
|
473
|
-
<div v-if="userReportData.
|
|
474
|
-
<
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
>
|
|
481
|
-
<p @click.prevent="hasCommentRemove = !hasCommentRemove" class="notes-date remove-baloon">
|
|
482
|
-
Excluir
|
|
483
|
-
</p>
|
|
484
|
-
|
|
485
|
-
<p class="notes-date">
|
|
486
|
-
{{ userReportData.comment.created_at | convertDate }}
|
|
487
|
-
</p>
|
|
488
|
-
</div>
|
|
489
|
-
</div>
|
|
490
|
-
<div v-if="hasCommentRemove" class="archive-remove">
|
|
491
|
-
<p>Você tem certeza que deseja apagar este comentário?</p>
|
|
492
|
-
<div class="d-flex">
|
|
493
|
-
<base-button
|
|
494
|
-
@click="removeComment(userReportData.comment.id)"
|
|
495
|
-
size="sm"
|
|
496
|
-
class="btn-outline-primary col-6 p-1"
|
|
497
|
-
>
|
|
498
|
-
Apagar
|
|
499
|
-
</base-button>
|
|
500
|
-
<base-button
|
|
501
|
-
@click="hasCommentRemove = false"
|
|
502
|
-
size="sm"
|
|
503
|
-
class="btn-outline-danger col-6 p-1"
|
|
504
|
-
>
|
|
505
|
-
Cancelar
|
|
506
|
-
</base-button>
|
|
507
|
-
</div>
|
|
508
|
-
</div>
|
|
509
|
-
<div class="notes-owner d-flex mt-2">
|
|
510
|
-
<img
|
|
511
|
-
v-if="userReportData.comment.user.urlAvatar"
|
|
512
|
-
:src="userReportData.comment.user.urlAvatar"
|
|
513
|
-
:alt="userReportData.comment.user.name"
|
|
514
|
-
/>
|
|
515
|
-
<div
|
|
516
|
-
v-else
|
|
517
|
-
class="notes-avatar"
|
|
518
|
-
></div>
|
|
519
|
-
<p class="ml-1">
|
|
520
|
-
{{ userReportData.comment.user.name }}
|
|
521
|
-
</p>
|
|
522
|
-
</div>
|
|
473
|
+
<div v-if="userReportData.comments && userReportData.comments.length > 0">
|
|
474
|
+
<note-baloon
|
|
475
|
+
v-for="comment in userReportData.comments"
|
|
476
|
+
:key="comment.id"
|
|
477
|
+
:comment="comment"
|
|
478
|
+
@remove-comment="removeComment"
|
|
479
|
+
/>
|
|
523
480
|
</div>
|
|
524
481
|
</template>
|
|
525
482
|
|
|
526
|
-
<div class="input-container" v-if="!isLocked
|
|
483
|
+
<div class="input-container" v-if="!isLocked">
|
|
527
484
|
<input
|
|
528
485
|
class="notes-new pl-4 mt-3 mb-3 form-rounded"
|
|
529
486
|
type="text"
|
|
@@ -549,6 +506,7 @@ import swal from 'sweetalert2';
|
|
|
549
506
|
import UpgradePlan from './UpgradePlan.vue';
|
|
550
507
|
import like from '../../../organismos/atomos/Like.vue';
|
|
551
508
|
import deslike from '../../../organismos/atomos/Deslike.vue';
|
|
509
|
+
import NoteBaloon from './CvRight/NoteBaloon.vue';
|
|
552
510
|
|
|
553
511
|
export default {
|
|
554
512
|
name: 'user-cv-right-side',
|
|
@@ -583,7 +541,8 @@ export default {
|
|
|
583
541
|
DropzoneFileUpload,
|
|
584
542
|
UpgradePlan,
|
|
585
543
|
like,
|
|
586
|
-
deslike
|
|
544
|
+
deslike,
|
|
545
|
+
NoteBaloon
|
|
587
546
|
},
|
|
588
547
|
data(){
|
|
589
548
|
return {
|
|
@@ -655,10 +614,11 @@ export default {
|
|
|
655
614
|
|
|
656
615
|
this.notes = this.notes.filter(n => n.id !== note.id);
|
|
657
616
|
},
|
|
658
|
-
removeComment(
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
this.
|
|
617
|
+
removeComment(commentId){
|
|
618
|
+
console.log('call', commentId);
|
|
619
|
+
|
|
620
|
+
this.userReportData.comments = this.userReportData.comments.filter(comment => comment.id != commentId);
|
|
621
|
+
this.$emit('remove-comment', commentId);
|
|
662
622
|
},
|
|
663
623
|
handleNewReportNoteSubmit() {
|
|
664
624
|
if (this.newReportNote.length > 3) {
|
|
@@ -867,11 +827,11 @@ export default {
|
|
|
867
827
|
|
|
868
828
|
mountUserReport(userData) {
|
|
869
829
|
const annex = userData.annex[0] || undefined;
|
|
870
|
-
const
|
|
830
|
+
const comments = userData.comments || [];
|
|
871
831
|
|
|
872
832
|
this.userReportData = {
|
|
873
833
|
annex,
|
|
874
|
-
|
|
834
|
+
comments
|
|
875
835
|
};
|
|
876
836
|
},
|
|
877
837
|
haveAnswers(){
|
|
@@ -78,37 +78,32 @@
|
|
|
78
78
|
<p class="notes-title mb-0">Comentários Recrutador</p>
|
|
79
79
|
<div class="line mb-3"></div>
|
|
80
80
|
|
|
81
|
-
<p v-show="!userReportData.
|
|
81
|
+
<p v-show="!userReportData.comments || userReportData.comments && userReportData.comments.length <= 0" class="history-text">
|
|
82
82
|
Nenhum comentário vinculado a este usuário.
|
|
83
83
|
</p>
|
|
84
84
|
|
|
85
|
-
<div v-if="userReportData.
|
|
86
|
-
<
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
></div>
|
|
108
|
-
<p class="ml-1">
|
|
109
|
-
{{ userReportData.comment.user.name }}
|
|
110
|
-
</p>
|
|
111
|
-
</div>
|
|
85
|
+
<div v-if="userReportData.comments && userReportData.comments.length > 0">
|
|
86
|
+
<note-baloon
|
|
87
|
+
v-for="comment in userReportData.comments"
|
|
88
|
+
:key="comment.id"
|
|
89
|
+
:comment="comment"
|
|
90
|
+
:hasAction="false"
|
|
91
|
+
/>
|
|
92
|
+
</div>
|
|
93
|
+
|
|
94
|
+
<div class="input-container">
|
|
95
|
+
<input
|
|
96
|
+
class="notes-new pl-4 mt-3 mb-3 form-rounded"
|
|
97
|
+
type="text"
|
|
98
|
+
placeholder="Escrever anotação"
|
|
99
|
+
v-model="newReportNote"
|
|
100
|
+
@change="handleNewReportNoteSubmit"
|
|
101
|
+
v-on:change="cleatInput()"
|
|
102
|
+
/>
|
|
103
|
+
<i
|
|
104
|
+
@click="handleNewReportNoteSubmit"
|
|
105
|
+
class="fas fa-paper-plane input-icon"
|
|
106
|
+
></i>
|
|
112
107
|
</div>
|
|
113
108
|
</el-tab-pane>
|
|
114
109
|
</el-tabs>
|
|
@@ -119,6 +114,7 @@
|
|
|
119
114
|
import { Tabs, TabPane } from 'element-ui';
|
|
120
115
|
import like from '../../../organismos/atomos/Like.vue';
|
|
121
116
|
import deslike from '../../../organismos/atomos/Deslike.vue';
|
|
117
|
+
import NoteBaloon from './CvRight/NoteBaloon.vue';
|
|
122
118
|
|
|
123
119
|
export default {
|
|
124
120
|
name: 'user-cv-right-side',
|
|
@@ -137,6 +133,7 @@ export default {
|
|
|
137
133
|
[TabPane.name]: TabPane,
|
|
138
134
|
like,
|
|
139
135
|
deslike,
|
|
136
|
+
NoteBaloon
|
|
140
137
|
},
|
|
141
138
|
data(){
|
|
142
139
|
return {
|
|
@@ -152,6 +149,14 @@ export default {
|
|
|
152
149
|
return this.liked;
|
|
153
150
|
}
|
|
154
151
|
},
|
|
152
|
+
watch: {
|
|
153
|
+
userData: {
|
|
154
|
+
deep: true,
|
|
155
|
+
handler() {
|
|
156
|
+
this.getUserFolderData();
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
},
|
|
155
160
|
props: {
|
|
156
161
|
userData: Object,
|
|
157
162
|
userFolderId: String,
|
|
@@ -160,6 +165,15 @@ export default {
|
|
|
160
165
|
await this.getUserFolderData();
|
|
161
166
|
},
|
|
162
167
|
methods: {
|
|
168
|
+
cleatInput() {
|
|
169
|
+
this.newNote = '';
|
|
170
|
+
},
|
|
171
|
+
handleNewReportNoteSubmit() {
|
|
172
|
+
if (this.newReportNote.length > 3) {
|
|
173
|
+
this.$emit('new-report-note', this.newReportNote, this.userFolderId, this.userData.id);
|
|
174
|
+
this.newReportNote = '';
|
|
175
|
+
}
|
|
176
|
+
},
|
|
163
177
|
async getUserFolderData() {
|
|
164
178
|
const apiUrl = `${process.env.baseApiUrlV2}/company/buffer/folder/user/${this.userFolderId}`;
|
|
165
179
|
|
|
@@ -197,11 +211,11 @@ export default {
|
|
|
197
211
|
|
|
198
212
|
mountUserReport(userData) {
|
|
199
213
|
const annex = userData.annex[0] || undefined;
|
|
200
|
-
const
|
|
214
|
+
const comments = userData.comments || [];
|
|
201
215
|
|
|
202
216
|
this.userReportData = {
|
|
203
217
|
annex,
|
|
204
|
-
|
|
218
|
+
comments
|
|
205
219
|
};
|
|
206
220
|
}
|
|
207
221
|
},
|
|
@@ -355,6 +369,17 @@ export default {
|
|
|
355
369
|
}
|
|
356
370
|
}
|
|
357
371
|
|
|
372
|
+
.notes-new {
|
|
373
|
+
width: 95%;
|
|
374
|
+
height: 33px;
|
|
375
|
+
|
|
376
|
+
background: #f5f5f5;
|
|
377
|
+
border-radius: 16.5px;
|
|
378
|
+
border: none;
|
|
379
|
+
|
|
380
|
+
outline: 0;
|
|
381
|
+
}
|
|
382
|
+
|
|
358
383
|
.readmore {
|
|
359
384
|
overflow: hidden;
|
|
360
385
|
text-overflow: ellipsis;
|
|
@@ -1,73 +1,73 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<img
|
|
3
|
-
:src="(this.src) ? this.src : getAvatarUrl()"
|
|
4
|
-
:alt="this.alt"
|
|
5
|
-
@error="img => getImageFallback(img)"
|
|
6
|
-
>
|
|
7
|
-
</template>
|
|
8
|
-
|
|
9
|
-
<script>
|
|
10
|
-
export default {
|
|
11
|
-
name: 'image-with-fallback',
|
|
12
|
-
props: {
|
|
13
|
-
src: {
|
|
14
|
-
type: [String, Boolean],
|
|
15
|
-
default: null
|
|
16
|
-
},
|
|
17
|
-
alt: {
|
|
18
|
-
type: String,
|
|
19
|
-
required: true
|
|
20
|
-
},
|
|
21
|
-
fallbackSize: {
|
|
22
|
-
type: String,
|
|
23
|
-
default: '512'
|
|
24
|
-
},
|
|
25
|
-
fallbackBackground: {
|
|
26
|
-
type: [String, Boolean],
|
|
27
|
-
default: null
|
|
28
|
-
},
|
|
29
|
-
fallbackText: {
|
|
30
|
-
type: String,
|
|
31
|
-
required: true
|
|
32
|
-
},
|
|
33
|
-
fallbackSingle: {
|
|
34
|
-
type: Boolean,
|
|
35
|
-
default: true
|
|
36
|
-
}
|
|
37
|
-
},
|
|
38
|
-
methods: {
|
|
39
|
-
getAvatarUrl() {
|
|
40
|
-
let size = this.fallbackSize;
|
|
41
|
-
let text = this.getNameInitials();
|
|
42
|
-
// let background = this.fallbackBackground;
|
|
43
|
-
|
|
44
|
-
const url = new URL('https://api.dicebear.com/7.x/initials/svg');
|
|
45
|
-
|
|
46
|
-
url.searchParams.append('seed', text);
|
|
47
|
-
url.searchParams.append('backgroundColor', '8DA2B5');
|
|
48
|
-
url.searchParams.append('size', size);
|
|
49
|
-
url.searchParams.append('fontSize', '40');
|
|
50
|
-
|
|
51
|
-
return url.toString();
|
|
52
|
-
},
|
|
53
|
-
getImageFallback(img) {
|
|
54
|
-
img.target.src = this.getAvatarUrl();
|
|
55
|
-
},
|
|
56
|
-
getNameInitials() {
|
|
57
|
-
let userAvatarName;
|
|
58
|
-
|
|
59
|
-
if (this.fallbackText) {
|
|
60
|
-
if (this.fallbackSingle) {
|
|
61
|
-
userAvatarName = this.fallbackText.slice(0, 1).toUpperCase();
|
|
62
|
-
} else {
|
|
63
|
-
userAvatarName = this.fallbackText;
|
|
64
|
-
}
|
|
65
|
-
} else {
|
|
66
|
-
userAvatarName = 'BURH';
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
return userAvatarName;
|
|
70
|
-
},
|
|
71
|
-
}
|
|
72
|
-
};
|
|
73
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<img
|
|
3
|
+
:src="(this.src) ? this.src : getAvatarUrl()"
|
|
4
|
+
:alt="this.alt"
|
|
5
|
+
@error="img => getImageFallback(img)"
|
|
6
|
+
>
|
|
7
|
+
</template>
|
|
8
|
+
|
|
9
|
+
<script>
|
|
10
|
+
export default {
|
|
11
|
+
name: 'image-with-fallback',
|
|
12
|
+
props: {
|
|
13
|
+
src: {
|
|
14
|
+
type: [String, Boolean],
|
|
15
|
+
default: null
|
|
16
|
+
},
|
|
17
|
+
alt: {
|
|
18
|
+
type: String,
|
|
19
|
+
required: true
|
|
20
|
+
},
|
|
21
|
+
fallbackSize: {
|
|
22
|
+
type: String,
|
|
23
|
+
default: '512'
|
|
24
|
+
},
|
|
25
|
+
fallbackBackground: {
|
|
26
|
+
type: [String, Boolean],
|
|
27
|
+
default: null
|
|
28
|
+
},
|
|
29
|
+
fallbackText: {
|
|
30
|
+
type: String,
|
|
31
|
+
required: true
|
|
32
|
+
},
|
|
33
|
+
fallbackSingle: {
|
|
34
|
+
type: Boolean,
|
|
35
|
+
default: true
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
methods: {
|
|
39
|
+
getAvatarUrl() {
|
|
40
|
+
let size = this.fallbackSize;
|
|
41
|
+
let text = this.getNameInitials();
|
|
42
|
+
// let background = this.fallbackBackground;
|
|
43
|
+
|
|
44
|
+
const url = new URL('https://api.dicebear.com/7.x/initials/svg');
|
|
45
|
+
|
|
46
|
+
url.searchParams.append('seed', text);
|
|
47
|
+
url.searchParams.append('backgroundColor', '8DA2B5');
|
|
48
|
+
url.searchParams.append('size', size);
|
|
49
|
+
url.searchParams.append('fontSize', '40');
|
|
50
|
+
|
|
51
|
+
return url.toString();
|
|
52
|
+
},
|
|
53
|
+
getImageFallback(img) {
|
|
54
|
+
img.target.src = this.getAvatarUrl();
|
|
55
|
+
},
|
|
56
|
+
getNameInitials() {
|
|
57
|
+
let userAvatarName;
|
|
58
|
+
|
|
59
|
+
if (this.fallbackText) {
|
|
60
|
+
if (this.fallbackSingle) {
|
|
61
|
+
userAvatarName = this.fallbackText.slice(0, 1).toUpperCase();
|
|
62
|
+
} else {
|
|
63
|
+
userAvatarName = this.fallbackText;
|
|
64
|
+
}
|
|
65
|
+
} else {
|
|
66
|
+
userAvatarName = 'BURH';
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
return userAvatarName;
|
|
70
|
+
},
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
</script>
|