@burh/nuxt-core 1.1.9 → 1.1.11

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.
Files changed (2) hide show
  1. package/components/burh-ds/Curriculum/UserCurriculum/UserCvMiddle.vue +737 -707
  2. package/package.json +1 -1
package/components/burh-ds/Curriculum/UserCurriculum/UserCvMiddle.vue CHANGED
@@ -1,707 +1,737 @@
1
- <template>
2
- <div class="bg-white content-middle">
3
- <!-- FERRAMENTAS -->
4
- <div class="tools mt-3">
5
- <button
6
- v-for="(tool, index) in tools"
7
- :key="index"
8
- class="ml-3 burh-color"
9
- @click="
10
- isLocked && !unlockedButtons.includes(tool.event)
11
- ? $emit('open-contact')
12
- : tool.event !== 'moveTo' && $emit(tool.event)
13
- "
14
- >
15
- <template v-if="tool.event !== 'moveTo'">
16
- <diamond v-if="isLocked && tool.event !== 'share'" class="mr-1" :size="16" />
17
- {{ tool.name }}
18
- </template>
19
- <template v-else-if="tool.event === 'moveTo'">
20
- <el-dropdown trigger="click" class="dropdown__content">
21
- <span class="title__content icon">
22
- {{tool.name}}
23
- <i class="fas fa-angle-down dropdown__icon"></i>
24
- </span>
25
- <el-dropdown-menu slot="dropdown">
26
- <el-dropdown-item
27
- v-for="(tab, index) in moveToItems"
28
- :key="index"
29
- @click.native="$emit(tool.event, tab)"
30
- >
31
- <i class="fas fa-clipboard-list"></i>
32
- {{ tab.title }}
33
- </el-dropdown-item>
34
- </el-dropdown-menu>
35
- </el-dropdown>
36
- </template>
37
- </button>
38
- </div>
39
- <!-- CV -->
40
- <div class="about content-block mt-5 ml-3 mr-3" v-if="userData.user_curriculum && userData.user_curriculum.annex">
41
- <h5 class="font-weight-bold">
42
- Cadastro Simplificado
43
- <el-tooltip
44
- placement="top"
45
- >
46
- <div style="max-width: 300px" slot="content">
47
- O cadastro simplificado é uma solução criada pela Burh para facilitar a candidatura em vagas sem que seja necessário o preenchimento completo do perfil do candidato, apenas a importação do currículo.
48
- </div>
49
-
50
- <span class="text-primary ml-2">
51
- <i class="fas fa-info-circle"></i>
52
- </span>
53
- </el-tooltip>
54
-
55
- <button
56
- class="cv__box mt-2"
57
- :disabled="isCvDownloading"
58
- @click="() => !isCvDownloading && handleDownloadCv(userData.user_curriculum)"
59
- >
60
- <template v-if="!isCvDownloading">
61
- <span>
62
- <i class="fas fa-download"></i>
63
- </span>
64
-
65
- <span class="font-weight-bold">Baixar Currículo</span>
66
- </template>
67
-
68
- <template v-else>
69
- <span>
70
- <i class="fas fa-spinner spin"></i>
71
- </span>
72
-
73
- <span class="font-weight-bold">Baixando</span>
74
- </template>
75
- </button>
76
- </h5>
77
- </div>
78
- <!-- CV -->
79
- <!-- SOBRE -->
80
- <div class="about content-block mt-5 ml-3 mr-3">
81
- <h5 class="font-weight-bold">Sobre</h5>
82
- <p
83
- v-if="userData && userData.user_complementary_information && userData.user_complementary_information.about || false"
84
- id="USER_ABOUT"
85
- class="mb-0"
86
- :class="
87
- !wordIsLesserThan(
88
- userData.user_complementary_information.about
89
- ) && 'readmore'
90
- "
91
- v-html="
92
- highlightText(
93
- search,
94
- userData.user_complementary_information.about
95
- )
96
- "
97
- ></p>
98
- <a
99
- href="#"
100
- aria-label="expandir conteudo"
101
- v-if="
102
- userData && userData.user_complementary_information && userData.user_complementary_information.about &&
103
- !wordIsLesserThan(
104
- userData.user_complementary_information.about
105
- ) || false
106
- "
107
- @click.prevent.stop="toggleReadMore($event, 'USER_ABOUT')"
108
- >Ler mais</a
109
- >
110
-
111
- <p v-if="!(userData && userData.user_complementary_information && userData.user_complementary_information.about)" class="">
112
- Nenhuma informação adicionada
113
- </p>
114
- </div>
115
- <!-- CONTATO -->
116
- <h5 class="font-weight-bold mt-4 ml-3">Contatos</h5>
117
- <div class="ml-3 info-text">
118
- <span v-if="userData.email != null">Email: {{userData.email}}</span><br>
119
- <span v-if="userData.user_contact && userData.user_contact.cellphone != null && userData.user_contact.cellphone.length > 1 ">Celular: {{getPhoneFormatted(userData.user_contact.cellphone)}}</span><br>
120
- <span v-if="userData.user_contact && userData.user_contact.phone != null && userData.user_contact.phone.length > 1">Telefone: {{getPhoneFormatted(userData.user_contact.phone)}}</span>
121
- </div>
122
-
123
- <!-- EDUCAÇÃO -->
124
- <h5 class="font-weight-bold mt-4 ml-3">Educação</h5>
125
- <div
126
- class=" ml-3"
127
- v-show="userData.user_education.length > 0"
128
- v-for="(edu, index) in userData.user_education"
129
- :key="index"
130
- >
131
- <p
132
- class="sub-title"
133
- v-html="highlightText(search, edu.formation)"
134
- ></p>
135
- <p class="info-text">{{ edu.institution }}</p>
136
- <span class="info-text">
137
- {{ edu.start_month }}/{{ edu.start_year }} -
138
- {{ treatEndDate(edu.end_month, edu.end_year) }}
139
- {{ getTime(false, edu) }}
140
- {{
141
- edu.user_education_period
142
- ? '-' + edu.user_education_period.name
143
- : ''
144
- }} </span
145
- ><br />
146
- <span
147
- class="info-text"
148
- >
149
- {{edu.formation_level_id | formationLevel}}
150
- </span>
151
- </div>
152
-
153
- <!-- EXPERIÊNCIAS -->
154
- <h5 class="font-weight-bold mt-4 ml-3">Experiência</h5>
155
- <div
156
- class="no-info ml-3"
157
- v-show="userData.user_experience.length === 0"
158
- >
159
- <p>
160
- Nenhuma informação adicionada
161
- </p>
162
- </div>
163
- <div
164
- v-show="userData.user_experience.length > 0"
165
- class="experience ml-3 mr-3"
166
- v-for="(exp, index) in userData.user_experience"
167
- :key="`experience-${index}`"
168
- >
169
- <p
170
- class="sub-title"
171
- v-html="highlightText(search, exp.job_title)"
172
- ></p>
173
- <p
174
- class="info-text"
175
- v-html="
176
- highlightText(search, `${exp.company}, ${exp.location}`)
177
- "
178
- ></p>
179
- <span class="info-text">
180
- {{ exp.start_month }}/{{ exp.start_year }} -
181
- {{ treatEndDate(exp.end_month, exp.end_year) }}
182
- {{ getTime(true, exp) }}
183
- </span>
184
-
185
- <p
186
- :id="`USER_EXPERIENCE-${index}`"
187
- class="description mt-4 mb-0"
188
- :class="!wordIsLesserThan(exp.description) && 'readmore'"
189
- v-html="highlightText(search, exp.description)"
190
- ></p>
191
-
192
- <a
193
- href="#"
194
- aria-label="expandir conteudo"
195
- v-show="!wordIsLesserThan(exp.description)"
196
- @click.prevent.stop="
197
- toggleReadMore($event, `USER_EXPERIENCE-${index}`)
198
- "
199
- >Ler mais</a
200
- ><br /><br />
201
- </div>
202
-
203
- <!-- CURSOS -->
204
- <h5 class="font-weight-bold mt-1 ml-3">Cursos Complementares</h5>
205
- <div class="no-info ml-3" v-show="userData.user_course.length === 0">
206
- <p>
207
- Nenhuma informação adicionada
208
- </p>
209
- </div>
210
- <div
211
- v-show="userData.user_course.length > 0"
212
- class="courses ml-3"
213
- v-for="(cou, index) in userData.user_course"
214
- :key="`course-${index}`"
215
- >
216
- <p
217
- class="sub-title"
218
- v-html="highlightText(search, cou.institution)"
219
- ></p>
220
- <p
221
- class="info-text mb-3"
222
- v-html="
223
- highlightText(
224
- search,
225
- `${cou.name} - ${cou.end_year || ''} ${getTime(
226
- false,
227
- cou
228
- )}`
229
- )
230
- "
231
- />
232
- </div>
233
- </div>
234
- </template>
235
-
236
- <script>
237
- import getPrefixes from '~/util/getPrefixes.js';
238
- import { mask } from 'vue-the-mask';
239
- import { Dropdown, DropdownMenu, DropdownItem } from 'element-ui';
240
- import { parsePhoneNumber } from 'awesome-phonenumber';
241
-
242
- import swal from 'sweetalert2';
243
- import axios from 'axios';
244
-
245
- export default {
246
- name: 'user-cv-middle',
247
- directives: { mask },
248
- props: {
249
- userData: Object,
250
- tools: {
251
- type: Array,
252
- default: () => []
253
- },
254
- search: {
255
- type: String,
256
- default: ''
257
- },
258
- moveToItems: {
259
- type: Array,
260
- default: () => [
261
- {
262
- id: 1,
263
- name: 'applieds',
264
- title: 'Inscritos'
265
- },
266
- {
267
- id: 3,
268
- name: 'selecteds',
269
- title: 'Selecionados'
270
- },
271
- {
272
- id: 5,
273
- name: 'hireds',
274
- title: 'Contratados'
275
- },
276
- {
277
- id: 4,
278
- name: 'other',
279
- title: 'Reprovado'
280
- }
281
- ]
282
- }
283
- },
284
- filters: {
285
- formationLevel(id) {
286
- const typeFormation = {
287
- 1: 'Ensino Médio',
288
- 2: 'Ensino Técnico',
289
- 3: 'Graduação',
290
- 4: 'Pós-Graduação',
291
- 5: 'Mestrado',
292
- 6: 'Doutorado',
293
- 8: 'Ensino Fundamental'
294
- };
295
-
296
- return typeFormation[id] || '-';
297
- }
298
- },
299
- components: {
300
- ElDropdown: Dropdown,
301
- ElDropdownMenu: DropdownMenu,
302
- ElDropdownItem: DropdownItem
303
- },
304
- data() {
305
- return {
306
- isLocked: !this.companyHasProduct(
307
- this.$store.state.loja && this.$store.state.loja.showableProducts && this.$store.state.loja.showableProducts['INTERACAO_USUARIO'] || false
308
- ),
309
- unlockedButtons: ['share', 'moveTo'],
310
- isCvDownloading: false
311
- };
312
- },
313
- mounted() {
314
- this.userData.user_experience = this.filterByDate(
315
- this.userData.user_experience,
316
- 'old'
317
- );
318
- this.userData.user_education = this.filterByDate(
319
- this.userData.user_education,
320
- 'old'
321
- );
322
- this.userData.user_course = this.filterByDate(
323
- this.userData.user_course,
324
- 'old'
325
- );
326
- },
327
- watch: {
328
- userData() {
329
- this.userData.user_experience = this.filterByDate(
330
- this.userData.user_experience,
331
- 'old'
332
- );
333
- this.userData.user_education = this.filterByDate(
334
- this.userData.user_education,
335
- 'old'
336
- );
337
- this.userData.user_course = this.filterByDate(
338
- this.userData.user_course,
339
- 'old'
340
- );
341
- }
342
- },
343
- methods: {
344
- showMessage(message, type = 'success') {
345
- const Toast = swal.mixin({
346
- toast: true,
347
- position: 'top-end',
348
- showConfirmButton: false,
349
- timer: 3000,
350
- });
351
-
352
- return Toast.fire({
353
- type: type,
354
- title: message,
355
- });
356
- },
357
- async handleDownloadCv(data) {
358
- this.isCvDownloading = true;
359
-
360
- const response = await axios.get(data.annex, {
361
- responseType: 'blob'
362
- })
363
- .then(res => URL.createObjectURL(res.data))
364
- .catch(err => {
365
- return {
366
- error: true,
367
- message: (err && err.response && err.response.data && err.response.data.message) || 'Falha ao baixar arquivo'
368
- };
369
- });
370
-
371
- this.isCvDownloading = false;
372
-
373
- if (response.error) {
374
- this.showMessage(response.message, 'error');
375
- return;
376
- }
377
-
378
- const link = document.createElement('a');
379
- link.href = response;
380
- link.download = `${data.user_id}.pdf`;
381
- link.click();
382
- },
383
- getPhoneFormatted(phoneNumber) {
384
- const formattedPhoneNumber = parsePhoneNumber(phoneNumber, { regionCode: 'BR' });
385
-
386
- return (
387
- formattedPhoneNumber &&
388
- formattedPhoneNumber.number &&
389
- formattedPhoneNumber.number.national
390
- ) || phoneNumber;
391
- },
392
- highlightText(search, text) {
393
- if (search.length < 2) return text;
394
-
395
- const regex = new RegExp(search.toLowerCase(), 'gmi');
396
- return String(text || '').replace(
397
- regex,
398
- `<span class="search-highlight">${search}</span>`
399
- );
400
- },
401
- filterByDate(data, by = 'new') {
402
- let sortedArray = data.sort((a, b) => {
403
- a = [
404
- a.start_month,
405
- a.start_year,
406
- a.end_month || 12,
407
- a.end_year || 9999
408
- ];
409
-
410
- b = [
411
- b.start_month,
412
- b.start_year,
413
- b.end_month || 12,
414
- b.end_year || 9999
415
- ];
416
-
417
- // Primeiro filtro -> chaves: 0 e 1 -> Filtro por data de inicio
418
- // Segundo filtro -> chaves: 2 e 3 -> Filtro por data de termino (subir não concluídos para primeiros)
419
-
420
- let byStart;
421
- let byEnd;
422
-
423
- switch (by) {
424
- case 'old':
425
- byStart =
426
- new Date(a[1], a[0], 1).getTime() -
427
- new Date(b[1], b[0], 1).getTime();
428
- byEnd =
429
- new Date(b[3], b[2], 1).getTime() -
430
- new Date(a[3], a[2], 1).getTime();
431
- break;
432
-
433
- default:
434
- byStart =
435
- new Date(b[1], b[0], 1).getTime() -
436
- new Date(a[1], a[0], 1).getTime();
437
- byEnd =
438
- new Date(b[3], b[2], 1).getTime() -
439
- new Date(a[3], a[2], 1).getTime();
440
- break;
441
- }
442
-
443
- return byEnd - byStart;
444
- });
445
-
446
- return sortedArray;
447
- },
448
- toggleReadMore(event, id) {
449
- const element = document.getElementById(id);
450
- element.classList.toggle('readmore');
451
- event.target.innerText == 'Ler mais'
452
- ? (event.target.innerText = 'Esconder')
453
- : (event.target.innerText = 'Ler mais');
454
- },
455
- getTime(
456
- isExperience,
457
- { start_year = null, end_year = null, start_month, end_month },
458
- textHappening = 'Cursando'
459
- ) {
460
- const isHappening = !end_month && !end_year;
461
-
462
- if (isHappening) {
463
- return isExperience === true ? 'Atualmente' : textHappening;
464
- }
465
-
466
- const dateInitial = this.$moment(
467
- ['1', start_month.toString(), start_year.toString()],
468
- 'DD/MM/YYYY'
469
- );
470
- const dateDone = this.$moment(
471
- ['1', end_month.toString(), end_year.toString()],
472
- 'DD/MM/YYYY'
473
- );
474
- const diffDuration = this.$moment.duration(
475
- dateDone.diff(dateInitial)
476
- );
477
- const years = diffDuration.years();
478
- const months = diffDuration.months();
479
-
480
- if (years) {
481
- return years > 1 ? `(${years} anos)` : `(${years} ano)`;
482
- }
483
-
484
- return months > 1
485
- ? `(${months} meses)`
486
- : months == 1
487
- ? `(${months} mês)`
488
- : '';
489
- },
490
- languageLevel(level) {
491
- switch (parseInt(level)) {
492
- case 1:
493
- return 'Iniciante';
494
- case 2:
495
- return 'Elementar';
496
- case 3:
497
- return 'Pré-intermediário';
498
- case 4:
499
- return 'Intermediário';
500
- case 5:
501
- return 'Intermediário Superior';
502
- case 6:
503
- return 'Avançado';
504
- case 7:
505
- return 'Fluente';
506
- default:
507
- return '';
508
- }
509
- },
510
- treatPhone(phone) {
511
- if (phone) {
512
- if (phone == '0' || phone.length < 9 || !phone) {
513
- return 'não cadastrado';
514
- }
515
- }
516
-
517
- return phone;
518
- },
519
- treatCellphone(cellphone) {
520
- if (cellphone) {
521
- if (cellphone == '0' || cellphone.length < 11 || !cellphone) {
522
- return 'não cadastrado';
523
- }
524
- }
525
-
526
- return cellphone;
527
- },
528
- handleGetPrefixes(name = '') {
529
- return getPrefixes(name);
530
- },
531
- treatEndDate(end_month, end_year) {
532
- if (end_month && end_year) {
533
- return `${end_month}/${end_year}`;
534
- }
535
- return '';
536
- },
537
- wordIsLesserThan(word, value = 300) {
538
- return word && word.length < value;
539
- }
540
- }
541
- };
542
- </script>
543
-
544
- <style lang="scss" scoped>
545
- @import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
546
-
547
- .cv__box {
548
- cursor: pointer;
549
- margin: 0;
550
- border: 0;
551
- width: 100%;
552
- display: flex;
553
- align-items: center;
554
- justify-content: center;
555
- gap: 1rem;
556
- background: rgba(#5865f2, 0.2);
557
- color: #5865F2;
558
- font-size: 1rem;
559
- padding: 1.25rem 1rem;
560
- border-radius: 0.25rem;
561
- transition: background-color 0.25s, color 0.25s;
562
-
563
- &:hover:not(:disabled) {
564
- background: rgba(#5865f2, 0.3);
565
- }
566
-
567
- &:disabled {
568
- cursor: not-allowed !important;
569
- background: #f5f5f5;
570
- color: #c8c8c8;
571
- }
572
-
573
- @keyframes spinner {
574
- from {
575
- transform: rotate(0);
576
- }
577
- to {
578
- transform: rotate(360deg);
579
- }
580
- }
581
-
582
- .spin {
583
- animation: spinner 0.75s infinite linear;
584
- }
585
- }
586
-
587
- /deep/ .dropdown__content {
588
- &, .title__content {
589
- width: 100%;
590
- height: 100%;
591
- display: grid;
592
- place-items: center;
593
- }
594
- .title__content.icon {
595
- grid-template-columns: 1fr 10px;
596
- flex-direction: row;
597
- align-items: center;
598
- justify-content: space-between;
599
- color: #fff;
600
- font-weight: 600;
601
- font-size: 12px;
602
- margin: 0!important;
603
- i {
604
- font-size: 1rem;
605
- margin-left: 10px;
606
- }
607
- }
608
- }
609
-
610
- /deep/ .search-highlight {
611
- background: rgb(255, 252, 61);
612
- color: #000;
613
- }
614
-
615
- .content-middle {
616
- width: 50%;
617
- border-right: 1px solid #ececec5c;
618
- word-break: break-word !important;
619
- }
620
-
621
- .readmore {
622
- overflow: hidden;
623
- text-overflow: ellipsis;
624
- display: -webkit-box;
625
- -webkit-line-clamp: 3;
626
- -webkit-box-orient: vertical;
627
- }
628
-
629
- .tools {
630
- flex-wrap: wrap;
631
- display: grid;
632
- align-items: center;
633
- justify-content: space-between;
634
- grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
635
- gap: 10px;
636
- padding-right: 20px;
637
- button {
638
- display: flex;
639
- align-items: center;
640
- justify-content: center;
641
-
642
- margin-left: 0!important;
643
-
644
- height: 29px;
645
- border: none;
646
-
647
- background: #5865F2;
648
- border-radius: 16px;
649
- color: #fff;
650
-
651
- font-size: 0.75rem;
652
- font-weight: 600;
653
- outline: 0;
654
-
655
- padding: 0px 10px;
656
- .dropdown__icon {
657
- margin-right: 20px;
658
- }
659
- }
660
- }
661
-
662
- .education {
663
- margin-top: 15px;
664
- }
665
-
666
- .experience {
667
- .description {
668
- font-size: 14px;
669
- color: #62778c;
670
- }
671
-
672
- a {
673
- margin-bottom: 1px;
674
- }
675
- }
676
-
677
- .sub-title {
678
- margin-bottom: 1px;
679
-
680
- font-weight: 600;
681
- font-size: 14px;
682
- line-height: 21px;
683
- color: #62778c;
684
- text-transform: uppercase;
685
- }
686
-
687
- .info-text {
688
- margin-bottom: 1px;
689
-
690
- font-size: 14px;
691
- color: #8da2b5;
692
- }
693
-
694
- .content-block {
695
- p {
696
- font-size: 14px;
697
- color: #62778c;
698
- }
699
- }
700
-
701
- .no-info {
702
- p {
703
- font-size: 0.875rem;
704
- color: #62778c;
705
- }
706
- }
707
- </style>
1
+ <template>
2
+ <div class="bg-white content-middle">
3
+ <!-- FERRAMENTAS -->
4
+ <div class="tools mt-3">
5
+ <button
6
+ v-for="(tool, index) in tools"
7
+ :key="index"
8
+ class="ml-3 burh-color"
9
+ @click="
10
+ isLocked && !unlockedButtons.includes(tool.event)
11
+ ? $emit('open-contact')
12
+ : tool.event !== 'moveTo' && $emit(tool.event)
13
+ "
14
+ >
15
+ <template v-if="tool.event !== 'moveTo'">
16
+ <diamond v-if="isLocked && tool.event !== 'share'" class="mr-1" :size="16" />
17
+ {{ tool.name }}
18
+ </template>
19
+ <template v-else-if="tool.event === 'moveTo'">
20
+ <el-dropdown trigger="click" class="dropdown__content">
21
+ <span class="title__content icon">
22
+ {{tool.name}}
23
+ <i class="fas fa-angle-down dropdown__icon"></i>
24
+ </span>
25
+ <el-dropdown-menu slot="dropdown">
26
+ <el-dropdown-item
27
+ v-for="(tab, index) in moveToItems"
28
+ :key="index"
29
+ @click.native="$emit(tool.event, tab)"
30
+ >
31
+ <i class="fas fa-clipboard-list"></i>
32
+ {{ tab.title }}
33
+ </el-dropdown-item>
34
+ </el-dropdown-menu>
35
+ </el-dropdown>
36
+ </template>
37
+ </button>
38
+ </div>
39
+ <!-- CV -->
40
+ <div class="about content-block mt-5 ml-3 mr-3" v-if="userData.user_curriculum && userData.user_curriculum.annex">
41
+ <h5 class="font-weight-bold">
42
+ Cadastro Simplificado
43
+ <el-tooltip
44
+ placement="top"
45
+ >
46
+ <div style="max-width: 300px" slot="content">
47
+ O cadastro simplificado é uma solução criada pela Burh para facilitar a candidatura em vagas sem que seja necessário o preenchimento completo do perfil do candidato, apenas a importação do currículo.
48
+ </div>
49
+
50
+ <span class="text-primary ml-2">
51
+ <i class="fas fa-info-circle"></i>
52
+ </span>
53
+ </el-tooltip>
54
+
55
+ <button
56
+ class="cv__box mt-2"
57
+ :disabled="isCvDownloading"
58
+ @click="() => !isCvDownloading && handleDownloadCv(userData.user_curriculum)"
59
+ >
60
+ <template v-if="!isCvDownloading">
61
+ <span>
62
+ <i class="fas fa-download"></i>
63
+ </span>
64
+
65
+ <span class="font-weight-bold">Baixar Currículo</span>
66
+ </template>
67
+
68
+ <template v-else>
69
+ <span>
70
+ <i class="fas fa-spinner spin"></i>
71
+ </span>
72
+
73
+ <span class="font-weight-bold">Baixando</span>
74
+ </template>
75
+ </button>
76
+ </h5>
77
+ </div>
78
+ <!-- CV -->
79
+ <!-- SOBRE -->
80
+ <div class="about content-block mt-5 ml-3 mr-3">
81
+ <h5 class="font-weight-bold">Sobre</h5>
82
+ <p
83
+ v-if="userData && userData.user_complementary_information && userData.user_complementary_information.about || false"
84
+ id="USER_ABOUT"
85
+ class="mb-0"
86
+ :class="
87
+ !wordIsLesserThan(
88
+ userData.user_complementary_information.about
89
+ ) && 'readmore'
90
+ "
91
+ v-html="
92
+ highlightText(
93
+ search,
94
+ userData.user_complementary_information.about
95
+ )
96
+ "
97
+ ></p>
98
+ <a
99
+ href="#"
100
+ aria-label="expandir conteudo"
101
+ v-if="
102
+ userData && userData.user_complementary_information && userData.user_complementary_information.about &&
103
+ !wordIsLesserThan(
104
+ userData.user_complementary_information.about
105
+ ) || false
106
+ "
107
+ @click.prevent.stop="toggleReadMore($event, 'USER_ABOUT')"
108
+ >Ler mais</a
109
+ >
110
+
111
+ <p v-if="!(userData && userData.user_complementary_information && userData.user_complementary_information.about)" class="">
112
+ Nenhuma informação adicionada
113
+ </p>
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>
131
+ <!-- CONTATO -->
132
+ <h5 class="font-weight-bold mt-4 ml-3">Contatos</h5>
133
+ <div class="ml-3 info-text">
134
+ <span v-if="userData.email != null">Email: {{userData.email}}</span><br>
135
+ <span v-if="userData.user_contact && userData.user_contact.cellphone != null && userData.user_contact.cellphone.length > 1 ">Celular: {{getPhoneFormatted(userData.user_contact.cellphone)}}</span><br>
136
+ <span v-if="userData.user_contact && userData.user_contact.phone != null && userData.user_contact.phone.length > 1">Telefone: {{getPhoneFormatted(userData.user_contact.phone)}}</span>
137
+ </div>
138
+
139
+ <!-- EDUCAÇÃO -->
140
+ <h5 class="font-weight-bold mt-4 ml-3">Educação</h5>
141
+ <div
142
+ class=" ml-3"
143
+ v-show="userData.user_education.length > 0"
144
+ v-for="(edu, index) in userData.user_education"
145
+ :key="index"
146
+ >
147
+ <p
148
+ class="sub-title"
149
+ v-html="highlightText(search, edu.formation)"
150
+ ></p>
151
+ <p class="info-text">{{ edu.institution }}</p>
152
+ <span class="info-text">
153
+ {{ edu.start_month }}/{{ edu.start_year }} -
154
+ {{ treatEndDate(edu.end_month, edu.end_year) }}
155
+ {{ getTime(false, edu) }}
156
+ {{
157
+ edu.user_education_period
158
+ ? '-' + edu.user_education_period.name
159
+ : ''
160
+ }} </span
161
+ ><br />
162
+ <span
163
+ class="info-text"
164
+ >
165
+ {{edu.formation_level_id | formationLevel}}
166
+ </span>
167
+ </div>
168
+
169
+ <!-- EXPERIÊNCIAS -->
170
+ <h5 class="font-weight-bold mt-4 ml-3">Experiência</h5>
171
+ <div
172
+ class="no-info ml-3"
173
+ v-show="userData.user_experience.length === 0"
174
+ >
175
+ <p>
176
+ Nenhuma informação adicionada
177
+ </p>
178
+ </div>
179
+ <div
180
+ v-show="userData.user_experience.length > 0"
181
+ class="experience ml-3 mr-3"
182
+ v-for="(exp, index) in userData.user_experience"
183
+ :key="`experience-${index}`"
184
+ >
185
+ <p
186
+ class="sub-title"
187
+ v-html="highlightText(search, exp.job_title)"
188
+ ></p>
189
+ <p
190
+ class="info-text"
191
+ v-html="
192
+ highlightText(search, `${exp.company}, ${exp.location}`)
193
+ "
194
+ ></p>
195
+ <span class="info-text">
196
+ {{ exp.start_month }}/{{ exp.start_year }} -
197
+ {{ treatEndDate(exp.end_month, exp.end_year) }}
198
+ {{ getTime(true, exp) }}
199
+ </span>
200
+
201
+ <p
202
+ :id="`USER_EXPERIENCE-${index}`"
203
+ class="description mt-4 mb-0"
204
+ :class="!wordIsLesserThan(exp.description) && 'readmore'"
205
+ v-html="highlightText(search, exp.description)"
206
+ ></p>
207
+
208
+ <a
209
+ href="#"
210
+ aria-label="expandir conteudo"
211
+ v-show="!wordIsLesserThan(exp.description)"
212
+ @click.prevent.stop="
213
+ toggleReadMore($event, `USER_EXPERIENCE-${index}`)
214
+ "
215
+ >Ler mais</a
216
+ ><br /><br />
217
+ </div>
218
+
219
+ <!-- CURSOS -->
220
+ <h5 class="font-weight-bold mt-1 ml-3">Cursos Complementares</h5>
221
+ <div class="no-info ml-3" v-show="userData.user_course.length === 0">
222
+ <p>
223
+ Nenhuma informação adicionada
224
+ </p>
225
+ </div>
226
+ <div
227
+ v-show="userData.user_course.length > 0"
228
+ class="courses ml-3"
229
+ v-for="(cou, index) in userData.user_course"
230
+ :key="`course-${index}`"
231
+ >
232
+ <p
233
+ class="sub-title"
234
+ v-html="highlightText(search, cou.institution)"
235
+ ></p>
236
+ <p
237
+ class="info-text mb-3"
238
+ v-html="
239
+ highlightText(
240
+ search,
241
+ `${cou.name} - ${cou.end_year || ''} ${getTime(
242
+ false,
243
+ cou
244
+ )}`
245
+ )
246
+ "
247
+ />
248
+ </div>
249
+ </div>
250
+ </template>
251
+
252
+ <script>
253
+ import getPrefixes from '~/util/getPrefixes.js';
254
+ import { mask } from 'vue-the-mask';
255
+ import { Dropdown, DropdownMenu, DropdownItem } from 'element-ui';
256
+ import { parsePhoneNumber } from 'awesome-phonenumber';
257
+ import MuxVideo from '../../Video/MuxVideo.vue';
258
+
259
+ import swal from 'sweetalert2';
260
+ import axios from 'axios';
261
+
262
+ export default {
263
+ name: 'user-cv-middle',
264
+ directives: { mask },
265
+ props: {
266
+ userData: Object,
267
+ tools: {
268
+ type: Array,
269
+ default: () => []
270
+ },
271
+ search: {
272
+ type: String,
273
+ default: ''
274
+ },
275
+ moveToItems: {
276
+ type: Array,
277
+ default: () => [
278
+ {
279
+ id: 1,
280
+ name: 'applieds',
281
+ title: 'Inscritos'
282
+ },
283
+ {
284
+ id: 3,
285
+ name: 'selecteds',
286
+ title: 'Selecionados'
287
+ },
288
+ {
289
+ id: 5,
290
+ name: 'hireds',
291
+ title: 'Contratados'
292
+ },
293
+ {
294
+ id: 4,
295
+ name: 'other',
296
+ title: 'Reprovado'
297
+ }
298
+ ]
299
+ }
300
+ },
301
+ filters: {
302
+ formationLevel(id) {
303
+ const typeFormation = {
304
+ 1: 'Ensino Médio',
305
+ 2: 'Ensino Técnico',
306
+ 3: 'Graduação',
307
+ 4: 'Pós-Graduação',
308
+ 5: 'Mestrado',
309
+ 6: 'Doutorado',
310
+ 8: 'Ensino Fundamental'
311
+ };
312
+
313
+ return typeFormation[id] || '-';
314
+ }
315
+ },
316
+ components: {
317
+ ElDropdown: Dropdown,
318
+ ElDropdownMenu: DropdownMenu,
319
+ ElDropdownItem: DropdownItem,
320
+ MuxVideo
321
+ },
322
+ data() {
323
+ return {
324
+ isLocked: !this.companyHasProduct(
325
+ this.$store.state.loja && this.$store.state.loja.showableProducts && this.$store.state.loja.showableProducts['INTERACAO_USUARIO'] || false
326
+ ),
327
+ unlockedButtons: ['share', 'moveTo'],
328
+ isCvDownloading: false
329
+ };
330
+ },
331
+ mounted() {
332
+ this.userData.user_experience = this.filterByDate(
333
+ this.userData.user_experience,
334
+ 'old'
335
+ );
336
+ this.userData.user_education = this.filterByDate(
337
+ this.userData.user_education,
338
+ 'old'
339
+ );
340
+ this.userData.user_course = this.filterByDate(
341
+ this.userData.user_course,
342
+ 'old'
343
+ );
344
+ },
345
+ watch: {
346
+ userData() {
347
+ this.userData.user_experience = this.filterByDate(
348
+ this.userData.user_experience,
349
+ 'old'
350
+ );
351
+ this.userData.user_education = this.filterByDate(
352
+ this.userData.user_education,
353
+ 'old'
354
+ );
355
+ this.userData.user_course = this.filterByDate(
356
+ this.userData.user_course,
357
+ 'old'
358
+ );
359
+ }
360
+ },
361
+ methods: {
362
+ showMessage(message, type = 'success') {
363
+ const Toast = swal.mixin({
364
+ toast: true,
365
+ position: 'top-end',
366
+ showConfirmButton: false,
367
+ timer: 3000,
368
+ });
369
+
370
+ return Toast.fire({
371
+ type: type,
372
+ title: message,
373
+ });
374
+ },
375
+ async handleDownloadCv(data) {
376
+ this.isCvDownloading = true;
377
+
378
+ const response = await axios.get(data.annex, {
379
+ responseType: 'blob'
380
+ })
381
+ .then(res => URL.createObjectURL(res.data))
382
+ .catch(err => {
383
+ return {
384
+ error: true,
385
+ message: (err && err.response && err.response.data && err.response.data.message) || 'Falha ao baixar arquivo'
386
+ };
387
+ });
388
+
389
+ this.isCvDownloading = false;
390
+
391
+ if (response.error) {
392
+ this.showMessage(response.message, 'error');
393
+ return;
394
+ }
395
+
396
+ const link = document.createElement('a');
397
+ link.href = response;
398
+ link.download = `${data.user_id}.pdf`;
399
+ link.click();
400
+ },
401
+ getPhoneFormatted(phoneNumber) {
402
+ const formattedPhoneNumber = parsePhoneNumber(phoneNumber, { regionCode: 'BR' });
403
+
404
+ return (
405
+ formattedPhoneNumber &&
406
+ formattedPhoneNumber.number &&
407
+ formattedPhoneNumber.number.national
408
+ ) || phoneNumber;
409
+ },
410
+ highlightText(search, text) {
411
+ if (search.length < 2) return text;
412
+
413
+ const regex = new RegExp(search.toLowerCase(), 'gmi');
414
+ return String(text || '').replace(
415
+ regex,
416
+ `<span class="search-highlight">${search}</span>`
417
+ );
418
+ },
419
+ filterByDate(data, by = 'new') {
420
+ let sortedArray = data.sort((a, b) => {
421
+ a = [
422
+ a.start_month,
423
+ a.start_year,
424
+ a.end_month || 12,
425
+ a.end_year || 9999
426
+ ];
427
+
428
+ b = [
429
+ b.start_month,
430
+ b.start_year,
431
+ b.end_month || 12,
432
+ b.end_year || 9999
433
+ ];
434
+
435
+ // Primeiro filtro -> chaves: 0 e 1 -> Filtro por data de inicio
436
+ // Segundo filtro -> chaves: 2 e 3 -> Filtro por data de termino (subir não concluídos para primeiros)
437
+
438
+ let byStart;
439
+ let byEnd;
440
+
441
+ switch (by) {
442
+ case 'old':
443
+ byStart =
444
+ new Date(a[1], a[0], 1).getTime() -
445
+ new Date(b[1], b[0], 1).getTime();
446
+ byEnd =
447
+ new Date(b[3], b[2], 1).getTime() -
448
+ new Date(a[3], a[2], 1).getTime();
449
+ break;
450
+
451
+ default:
452
+ byStart =
453
+ new Date(b[1], b[0], 1).getTime() -
454
+ new Date(a[1], a[0], 1).getTime();
455
+ byEnd =
456
+ new Date(b[3], b[2], 1).getTime() -
457
+ new Date(a[3], a[2], 1).getTime();
458
+ break;
459
+ }
460
+
461
+ return byEnd - byStart;
462
+ });
463
+
464
+ return sortedArray;
465
+ },
466
+ toggleReadMore(event, id) {
467
+ const element = document.getElementById(id);
468
+ element.classList.toggle('readmore');
469
+ event.target.innerText == 'Ler mais'
470
+ ? (event.target.innerText = 'Esconder')
471
+ : (event.target.innerText = 'Ler mais');
472
+ },
473
+ getTime(
474
+ isExperience,
475
+ { start_year = null, end_year = null, start_month, end_month },
476
+ textHappening = 'Cursando'
477
+ ) {
478
+ const isHappening = !end_month && !end_year;
479
+
480
+ if (isHappening) {
481
+ return isExperience === true ? 'Atualmente' : textHappening;
482
+ }
483
+
484
+ const dateInitial = this.$moment(
485
+ ['1', start_month.toString(), start_year.toString()],
486
+ 'DD/MM/YYYY'
487
+ );
488
+ const dateDone = this.$moment(
489
+ ['1', end_month.toString(), end_year.toString()],
490
+ 'DD/MM/YYYY'
491
+ );
492
+ const diffDuration = this.$moment.duration(
493
+ dateDone.diff(dateInitial)
494
+ );
495
+ const years = diffDuration.years();
496
+ const months = diffDuration.months();
497
+
498
+ if (years) {
499
+ return years > 1 ? `(${years} anos)` : `(${years} ano)`;
500
+ }
501
+
502
+ return months > 1
503
+ ? `(${months} meses)`
504
+ : months == 1
505
+ ? `(${months} mês)`
506
+ : '';
507
+ },
508
+ languageLevel(level) {
509
+ switch (parseInt(level)) {
510
+ case 1:
511
+ return 'Iniciante';
512
+ case 2:
513
+ return 'Elementar';
514
+ case 3:
515
+ return 'Pré-intermediário';
516
+ case 4:
517
+ return 'Intermediário';
518
+ case 5:
519
+ return 'Intermediário Superior';
520
+ case 6:
521
+ return 'Avançado';
522
+ case 7:
523
+ return 'Fluente';
524
+ default:
525
+ return '';
526
+ }
527
+ },
528
+ treatPhone(phone) {
529
+ if (phone) {
530
+ if (phone == '0' || phone.length < 9 || !phone) {
531
+ return 'não cadastrado';
532
+ }
533
+ }
534
+
535
+ return phone;
536
+ },
537
+ treatCellphone(cellphone) {
538
+ if (cellphone) {
539
+ if (cellphone == '0' || cellphone.length < 11 || !cellphone) {
540
+ return 'não cadastrado';
541
+ }
542
+ }
543
+
544
+ return cellphone;
545
+ },
546
+ handleGetPrefixes(name = '') {
547
+ return getPrefixes(name);
548
+ },
549
+ treatEndDate(end_month, end_year) {
550
+ if (end_month && end_year) {
551
+ return `${end_month}/${end_year}`;
552
+ }
553
+ return '';
554
+ },
555
+ wordIsLesserThan(word, value = 300) {
556
+ return word && word.length < value;
557
+ }
558
+ }
559
+ };
560
+ </script>
561
+
562
+ <style lang="scss" scoped>
563
+ @import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
564
+
565
+ .mux__video {
566
+ width: 100%;
567
+ margin-top: 16px;
568
+
569
+ video {
570
+ width: 100% !important;
571
+ max-height: 400px !important;
572
+ border-radius: 8px !important;
573
+ display: block !important;
574
+ }
575
+ }
576
+
577
+ .cv__box {
578
+ cursor: pointer;
579
+ margin: 0;
580
+ border: 0;
581
+ width: 100%;
582
+ display: flex;
583
+ align-items: center;
584
+ justify-content: center;
585
+ gap: 1rem;
586
+ background: rgba(#5865f2, 0.2);
587
+ color: #5865F2;
588
+ font-size: 1rem;
589
+ padding: 1.25rem 1rem;
590
+ border-radius: 0.25rem;
591
+ transition: background-color 0.25s, color 0.25s;
592
+
593
+ &:hover:not(:disabled) {
594
+ background: rgba(#5865f2, 0.3);
595
+ }
596
+
597
+ &:disabled {
598
+ cursor: not-allowed !important;
599
+ background: #f5f5f5;
600
+ color: #c8c8c8;
601
+ }
602
+
603
+ @keyframes spinner {
604
+ from {
605
+ transform: rotate(0);
606
+ }
607
+ to {
608
+ transform: rotate(360deg);
609
+ }
610
+ }
611
+
612
+ .spin {
613
+ animation: spinner 0.75s infinite linear;
614
+ }
615
+ }
616
+
617
+ /deep/ .dropdown__content {
618
+ &, .title__content {
619
+ width: 100%;
620
+ height: 100%;
621
+ display: grid;
622
+ place-items: center;
623
+ }
624
+ .title__content.icon {
625
+ grid-template-columns: 1fr 10px;
626
+ flex-direction: row;
627
+ align-items: center;
628
+ justify-content: space-between;
629
+ color: #fff;
630
+ font-weight: 600;
631
+ font-size: 12px;
632
+ margin: 0!important;
633
+ i {
634
+ font-size: 1rem;
635
+ margin-left: 10px;
636
+ }
637
+ }
638
+ }
639
+
640
+ /deep/ .search-highlight {
641
+ background: rgb(255, 252, 61);
642
+ color: #000;
643
+ }
644
+
645
+ .content-middle {
646
+ width: 50%;
647
+ border-right: 1px solid #ececec5c;
648
+ word-break: break-word !important;
649
+ }
650
+
651
+ .readmore {
652
+ overflow: hidden;
653
+ text-overflow: ellipsis;
654
+ display: -webkit-box;
655
+ -webkit-line-clamp: 3;
656
+ -webkit-box-orient: vertical;
657
+ }
658
+
659
+ .tools {
660
+ flex-wrap: wrap;
661
+ display: grid;
662
+ align-items: center;
663
+ justify-content: space-between;
664
+ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
665
+ gap: 10px;
666
+ padding-right: 20px;
667
+ button {
668
+ display: flex;
669
+ align-items: center;
670
+ justify-content: center;
671
+
672
+ margin-left: 0!important;
673
+
674
+ height: 29px;
675
+ border: none;
676
+
677
+ background: #5865F2;
678
+ border-radius: 16px;
679
+ color: #fff;
680
+
681
+ font-size: 0.75rem;
682
+ font-weight: 600;
683
+ outline: 0;
684
+
685
+ padding: 0px 10px;
686
+ .dropdown__icon {
687
+ margin-right: 20px;
688
+ }
689
+ }
690
+ }
691
+
692
+ .education {
693
+ margin-top: 15px;
694
+ }
695
+
696
+ .experience {
697
+ .description {
698
+ font-size: 14px;
699
+ color: #62778c;
700
+ }
701
+
702
+ a {
703
+ margin-bottom: 1px;
704
+ }
705
+ }
706
+
707
+ .sub-title {
708
+ margin-bottom: 1px;
709
+
710
+ font-weight: 600;
711
+ font-size: 14px;
712
+ line-height: 21px;
713
+ color: #62778c;
714
+ text-transform: uppercase;
715
+ }
716
+
717
+ .info-text {
718
+ margin-bottom: 1px;
719
+
720
+ font-size: 14px;
721
+ color: #8da2b5;
722
+ }
723
+
724
+ .content-block {
725
+ p {
726
+ font-size: 14px;
727
+ color: #62778c;
728
+ }
729
+ }
730
+
731
+ .no-info {
732
+ p {
733
+ font-size: 0.875rem;
734
+ color: #62778c;
735
+ }
736
+ }
737
+ </style>