@burh/nuxt-core 1.1.22 → 1.1.23

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,779 +1,779 @@
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 moveToItemsList"
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
- {{ $t('user_cv.middle_side.simplified_registration') }}
43
- <el-tooltip
44
- placement="top"
45
- >
46
- <div style="max-width: 300px" slot="content">
47
- {{ $t('user_cv.middle_side.simplified_registration_tooltip') }}
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">{{ $t('user_cv.middle_side.download_cv') }}</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">{{ $t('user_cv.middle_side.downloading') }}</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">{{ $t('user_cv.middle_side.about') }}</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
- >{{ $t('user_cv.middle_side.read_more') }}</a
109
- >
110
-
111
- <p v-if="!(userData && userData.user_complementary_information && userData.user_complementary_information.about)" class="">
112
- {{ $t('user_cv.middle_side.no_information_added') }}
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">{{ $t('user_cv.middle_side.presentation_video') }}</h5>
124
-
125
- <div class="mux__video">
126
- <MuxVideo
127
- :src="userData.user_complementary_information.presentation_video"
128
- />
129
- </div>
130
- </div>
131
-
132
- <!-- DADOS PESSOAIS -->
133
- <div v-if="userData && userData.user_complementary_information">
134
- <h5 class="font-weight-bold mt-4 ml-3">{{ $t('user_cv.middle_side.personal_data') }}</h5>
135
- <div class="ml-3 info-text">
136
- <span v-if="userData.user_complementary_information.rg != null">RG: {{getFormattedValue('rg', userData.user_complementary_information.rg)}}<br></span>
137
- <span v-if="userData.user_complementary_information.cpf != null">CPF: {{getFormattedValue('cpf', userData.user_complementary_information.cpf)}}<br></span>
138
- <span v-if="userData.user_complementary_information.birth != null">Data de Nascimento: {{getFormattedValue('birthDate', userData.user_complementary_information.birth)}}<br></span>
139
- <span v-if="userData.user_complementary_information.mother_name != null">{{ $t('user_cv.middle_side.mother_name_label') }} {{userData.user_complementary_information.mother_name}}<br></span>
140
- </div>
141
- </div>
142
-
143
- <!-- CONTATO -->
144
- <h5 class="font-weight-bold mt-4 ml-3">{{ $t('user_cv.middle_side.contacts') }}</h5>
145
- <div class="ml-3 info-text">
146
- <span v-if="userData.email != null">{{ $t('user_cv.middle_side.email_label') }} {{userData.email}}</span><br>
147
- <span v-if="userData.user_contact && userData.user_contact.cellphone != null && userData.user_contact.cellphone.length > 1 ">{{ $t('user_cv.middle_side.cellphone_label') }} {{getPhoneFormatted(userData.user_contact.cellphone)}}</span><br>
148
- <span v-if="userData.user_contact && userData.user_contact.phone != null && userData.user_contact.phone.length > 1">{{ $t('user_cv.middle_side.phone_label') }} {{getPhoneFormatted(userData.user_contact.phone)}}</span>
149
- </div>
150
-
151
- <!-- EDUCAÇÃO -->
152
- <h5 class="font-weight-bold mt-4 ml-3">{{ $t('user_cv.middle_side.education') }}</h5>
153
- <div
154
- class=" ml-3"
155
- v-show="userData.user_education.length > 0"
156
- v-for="(edu, index) in userData.user_education"
157
- :key="index"
158
- >
159
- <p
160
- class="sub-title"
161
- v-html="highlightText(search, edu.formation)"
162
- ></p>
163
- <p class="info-text">{{ edu.institution }}</p>
164
- <span class="info-text">
165
- {{ edu.start_month }}/{{ edu.start_year }} -
166
- {{ treatEndDate(edu.end_month, edu.end_year) }}
167
- {{ getTime(false, edu) }}
168
- {{
169
- edu.user_education_period
170
- ? '-' + edu.user_education_period.name
171
- : ''
172
- }} </span
173
- ><br />
174
- <span
175
- class="info-text"
176
- >
177
- {{getFormationLevel(edu.formation_level_id)}}
178
- </span>
179
- </div>
180
-
181
- <!-- EXPERIÊNCIAS -->
182
- <h5 class="font-weight-bold mt-4 ml-3">{{ $t('user_cv.middle_side.experience') }}</h5>
183
- <div
184
- class="no-info ml-3"
185
- v-show="userData.user_experience.length === 0"
186
- >
187
- <p>
188
- {{ $t('user_cv.middle_side.no_information_added') }}
189
- </p>
190
- </div>
191
- <div
192
- v-show="userData.user_experience.length > 0"
193
- class="experience ml-3 mr-3"
194
- v-for="(exp, index) in userData.user_experience"
195
- :key="`experience-${index}`"
196
- >
197
- <p
198
- class="sub-title"
199
- v-html="highlightText(search, exp.job_title)"
200
- ></p>
201
- <p
202
- class="info-text"
203
- v-html="
204
- highlightText(search, `${exp.company}, ${exp.location}`)
205
- "
206
- ></p>
207
- <span class="info-text">
208
- {{ exp.start_month }}/{{ exp.start_year }} -
209
- {{ treatEndDate(exp.end_month, exp.end_year) }}
210
- {{ getTime(true, exp) }}
211
- </span>
212
-
213
- <p
214
- :id="`USER_EXPERIENCE-${index}`"
215
- class="description mt-4 mb-0"
216
- :class="!wordIsLesserThan(exp.description) && 'readmore'"
217
- v-html="highlightText(search, exp.description)"
218
- ></p>
219
-
220
- <a
221
- href="#"
222
- aria-label="expandir conteudo"
223
- v-show="!wordIsLesserThan(exp.description)"
224
- @click.prevent.stop="
225
- toggleReadMore($event, `USER_EXPERIENCE-${index}`)
226
- "
227
- >{{ $t('user_cv.middle_side.read_more') }}</a
228
- ><br /><br />
229
- </div>
230
-
231
- <!-- CURSOS -->
232
- <h5 class="font-weight-bold mt-1 ml-3">{{ $t('user_cv.middle_side.complementary_courses') }}</h5>
233
- <div class="no-info ml-3" v-show="userData.user_course.length === 0">
234
- <p>
235
- {{ $t('user_cv.middle_side.no_information_added') }}
236
- </p>
237
- </div>
238
- <div
239
- v-show="userData.user_course.length > 0"
240
- class="courses ml-3"
241
- v-for="(cou, index) in userData.user_course"
242
- :key="`course-${index}`"
243
- >
244
- <p
245
- class="sub-title"
246
- v-html="highlightText(search, cou.institution)"
247
- ></p>
248
- <p
249
- class="info-text mb-3"
250
- v-html="
251
- highlightText(
252
- search,
253
- `${cou.name} - ${cou.end_year || ''} ${getTime(
254
- false,
255
- cou
256
- )}`
257
- )
258
- "
259
- />
260
- </div>
261
- </div>
262
- </template>
263
-
264
- <script>
265
- import getPrefixes from '~/util/getPrefixes.js';
266
- import { mask } from 'vue-the-mask';
267
- import { Dropdown, DropdownMenu, DropdownItem } from 'element-ui';
268
- import { parsePhoneNumber } from 'awesome-phonenumber';
269
- import MuxVideo from '../../Video/MuxVideo.vue';
270
-
271
- import swal from 'sweetalert2';
272
- import axios from 'axios';
273
-
274
- export default {
275
- name: 'user-cv-middle',
276
- directives: { mask },
277
- props: {
278
- userData: Object,
279
- tools: {
280
- type: Array,
281
- default: () => []
282
- },
283
- search: {
284
- type: String,
285
- default: ''
286
- },
287
- moveToItems: {
288
- type: Array,
289
- default: () => []
290
- }
291
- },
292
- components: {
293
- ElDropdown: Dropdown,
294
- ElDropdownMenu: DropdownMenu,
295
- ElDropdownItem: DropdownItem,
296
- MuxVideo
297
- },
298
- data() {
299
- return {
300
- isLocked: !this.companyHasProduct(
301
- this.$store.state.loja && this.$store.state.loja.showableProducts && this.$store.state.loja.showableProducts['INTERACAO_USUARIO'] || false
302
- ),
303
- unlockedButtons: ['share', 'moveTo'],
304
- isCvDownloading: false
305
- };
306
- },
307
- computed: {
308
- moveToItemsList() {
309
- if (this.moveToItems.length > 0) {
310
- return this.moveToItems;
311
- }
312
-
313
- return [
314
- {
315
- id: 1,
316
- name: 'applieds',
317
- title: this.$t('user_cv.middle_side.move_to_applied')
318
- },
319
- {
320
- id: 3,
321
- name: 'selecteds',
322
- title: this.$t('user_cv.middle_side.move_to_selected')
323
- },
324
- {
325
- id: 5,
326
- name: 'hireds',
327
- title: this.$t('user_cv.middle_side.move_to_hired')
328
- },
329
- {
330
- id: 4,
331
- name: 'other',
332
- title: this.$t('user_cv.middle_side.move_to_rejected')
333
- }
334
- ];
335
- }
336
- },
337
- mounted() {
338
- this.userData.user_experience = this.filterByDate(
339
- this.userData.user_experience,
340
- 'old'
341
- );
342
- this.userData.user_education = this.filterByDate(
343
- this.userData.user_education,
344
- 'old'
345
- );
346
- this.userData.user_course = this.filterByDate(
347
- this.userData.user_course,
348
- 'old'
349
- );
350
- },
351
- watch: {
352
- userData() {
353
- this.userData.user_experience = this.filterByDate(
354
- this.userData.user_experience,
355
- 'old'
356
- );
357
- this.userData.user_education = this.filterByDate(
358
- this.userData.user_education,
359
- 'old'
360
- );
361
- this.userData.user_course = this.filterByDate(
362
- this.userData.user_course,
363
- 'old'
364
- );
365
- }
366
- },
367
- methods: {
368
- getFormationLevel(id) {
369
- const typeFormation = {
370
- 1: this.$t('user_cv.middle_side.formation_level_high_school'),
371
- 2: this.$t('user_cv.middle_side.formation_level_technical'),
372
- 3: this.$t('user_cv.middle_side.formation_level_graduation'),
373
- 4: this.$t('user_cv.middle_side.formation_level_post_graduation'),
374
- 5: this.$t('user_cv.middle_side.formation_level_masters'),
375
- 6: this.$t('user_cv.middle_side.formation_level_doctorate'),
376
- 8: this.$t('user_cv.middle_side.formation_level_elementary')
377
- };
378
-
379
- return typeFormation[id] || '-';
380
- },
381
- getFormattedValue(type, value) {
382
- if (!value || typeof value !== 'string') return '';
383
-
384
- const onlyDigits = value.replace(/\D/g, '');
385
-
386
- if (type === 'cpf') {
387
- if (onlyDigits.length !== 11) return value;
388
- return onlyDigits.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4');
389
- }
390
-
391
- if (type === 'rg') {
392
- if (onlyDigits.length < 7 || onlyDigits.length > 9) return value;
393
- return onlyDigits.replace(/^(\d{1,2})(\d{3})(\d{3})(\d?)$/, (match, p1, p2, p3, p4) => {
394
- let formatted = `${p1}.${p2}.${p3}`;
395
- if (p4) formatted += `-${p4}`;
396
- return formatted;
397
- });
398
- }
399
-
400
- if (type === 'birthDate') {
401
- const parts = onlyDigits.match(/^(\d{2})(\d{2})(\d{4})$/);
402
- if (!parts) return value;
403
- return `${parts[1]}/${parts[2]}/${parts[3]}`;
404
- }
405
-
406
- return value;
407
- },
408
- showMessage(message, type = 'success') {
409
- const Toast = swal.mixin({
410
- toast: true,
411
- position: 'top-end',
412
- showConfirmButton: false,
413
- timer: 3000,
414
- });
415
-
416
- return Toast.fire({
417
- type: type,
418
- title: message,
419
- });
420
- },
421
- async handleDownloadCv(data) {
422
- this.isCvDownloading = true;
423
-
424
- const response = await axios.get(data.annex, {
425
- responseType: 'blob'
426
- })
427
- .then(res => URL.createObjectURL(res.data))
428
- .catch(err => {
429
- return {
430
- error: true,
431
- message: (err && err.response && err.response.data && err.response.data.message) || this.$t('user_cv.middle_side.download_error')
432
- };
433
- });
434
-
435
- this.isCvDownloading = false;
436
-
437
- if (response.error) {
438
- this.showMessage(response.message, 'error');
439
- return;
440
- }
441
-
442
- const link = document.createElement('a');
443
- link.href = response;
444
- link.download = `${data.user_id}.pdf`;
445
- link.click();
446
- },
447
- getPhoneFormatted(phoneNumber) {
448
- const formattedPhoneNumber = parsePhoneNumber(phoneNumber, { regionCode: 'BR' });
449
-
450
- return (
451
- formattedPhoneNumber &&
452
- formattedPhoneNumber.number &&
453
- formattedPhoneNumber.number.national
454
- ) || phoneNumber;
455
- },
456
- highlightText(search, text) {
457
- if (search.length < 2) return text;
458
-
459
- const regex = new RegExp(search.toLowerCase(), 'gmi');
460
- return String(text || '').replace(
461
- regex,
462
- `<span class="search-highlight">${search}</span>`
463
- );
464
- },
465
- filterByDate(data, by = 'new') {
466
- let sortedArray = data.sort((a, b) => {
467
- a = [
468
- a.start_month,
469
- a.start_year,
470
- a.end_month || 12,
471
- a.end_year || 9999
472
- ];
473
-
474
- b = [
475
- b.start_month,
476
- b.start_year,
477
- b.end_month || 12,
478
- b.end_year || 9999
479
- ];
480
-
481
- // Primeiro filtro -> chaves: 0 e 1 -> Filtro por data de inicio
482
- // Segundo filtro -> chaves: 2 e 3 -> Filtro por data de termino (subir não concluídos para primeiros)
483
-
484
- let byStart;
485
- let byEnd;
486
-
487
- switch (by) {
488
- case 'old':
489
- byStart =
490
- new Date(a[1], a[0], 1).getTime() -
491
- new Date(b[1], b[0], 1).getTime();
492
- byEnd =
493
- new Date(b[3], b[2], 1).getTime() -
494
- new Date(a[3], a[2], 1).getTime();
495
- break;
496
-
497
- default:
498
- byStart =
499
- new Date(b[1], b[0], 1).getTime() -
500
- new Date(a[1], a[0], 1).getTime();
501
- byEnd =
502
- new Date(b[3], b[2], 1).getTime() -
503
- new Date(a[3], a[2], 1).getTime();
504
- break;
505
- }
506
-
507
- return byEnd - byStart;
508
- });
509
-
510
- return sortedArray;
511
- },
512
- toggleReadMore(event, id) {
513
- const element = document.getElementById(id);
514
- element.classList.toggle('readmore');
515
- event.target.innerText == this.$t('user_cv.middle_side.read_more')
516
- ? (event.target.innerText = this.$t('user_cv.middle_side.hide'))
517
- : (event.target.innerText = this.$t('user_cv.middle_side.read_more'));
518
- },
519
- getTime(
520
- isExperience,
521
- { start_year = null, end_year = null, start_month, end_month },
522
- textHappening = null
523
- ) {
524
- const isHappening = !end_month && !end_year;
525
- const happeningText = textHappening || this.$t('user_cv.middle_side.studying');
526
-
527
- if (isHappening) {
528
- return isExperience === true ? this.$t('user_cv.middle_side.currently') : happeningText;
529
- }
530
-
531
- const dateInitial = this.$moment(
532
- ['1', start_month.toString(), start_year.toString()],
533
- 'DD/MM/YYYY'
534
- );
535
- const dateDone = this.$moment(
536
- ['1', end_month.toString(), end_year.toString()],
537
- 'DD/MM/YYYY'
538
- );
539
- const diffDuration = this.$moment.duration(
540
- dateDone.diff(dateInitial)
541
- );
542
- const years = diffDuration.years();
543
- const months = diffDuration.months();
544
-
545
- if (years) {
546
- return years > 1 ? `(${years} ${this.$t('user_cv.middle_side.years_plural')})` : `(${years} ${this.$t('user_cv.middle_side.year_singular')})`;
547
- }
548
-
549
- return months > 1
550
- ? `(${months} ${this.$t('user_cv.middle_side.months_plural')})`
551
- : months == 1
552
- ? `(${months} ${this.$t('user_cv.middle_side.month_singular')})`
553
- : '';
554
- },
555
- languageLevel(level) {
556
- const levelKeys = {
557
- 1: 'beginner',
558
- 2: 'elementary',
559
- 3: 'pre_intermediate',
560
- 4: 'intermediate',
561
- 5: 'upper_intermediate',
562
- 6: 'advanced',
563
- 7: 'fluent'
564
- };
565
-
566
- const levelKey = levelKeys[parseInt(level)];
567
- return levelKey ? this.$t(`user_cv.middle_side.language_levels.${levelKey}`) : '';
568
- },
569
- treatPhone(phone) {
570
- if (phone) {
571
- if (phone == '0' || phone.length < 9 || !phone) {
572
- return 'não cadastrado';
573
- }
574
- }
575
-
576
- return phone;
577
- },
578
- treatCellphone(cellphone) {
579
- if (cellphone) {
580
- if (cellphone == '0' || cellphone.length < 11 || !cellphone) {
581
- return 'não cadastrado';
582
- }
583
- }
584
-
585
- return cellphone;
586
- },
587
- handleGetPrefixes(name = '') {
588
- return getPrefixes(name);
589
- },
590
- treatEndDate(end_month, end_year) {
591
- if (end_month && end_year) {
592
- return `${end_month}/${end_year}`;
593
- }
594
- return '';
595
- },
596
- wordIsLesserThan(word, value = 300) {
597
- return word && word.length < value;
598
- }
599
- }
600
- };
601
- </script>
602
-
603
- <style lang="scss" scoped>
604
- @import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
605
-
606
- .mux__video {
607
- width: 100%;
608
- margin-top: 16px;
609
-
610
- video {
611
- width: 100% !important;
612
- max-height: 400px !important;
613
- border-radius: 8px !important;
614
- display: block !important;
615
- background: #212529 !important;
616
- }
617
- }
618
-
619
- .cv__box {
620
- cursor: pointer;
621
- margin: 0;
622
- border: 0;
623
- width: 100%;
624
- display: flex;
625
- align-items: center;
626
- justify-content: center;
627
- gap: 1rem;
628
- background: rgba(#5865f2, 0.2);
629
- color: #5865F2;
630
- font-size: 1rem;
631
- padding: 1.25rem 1rem;
632
- border-radius: 0.25rem;
633
- transition: background-color 0.25s, color 0.25s;
634
-
635
- &:hover:not(:disabled) {
636
- background: rgba(#5865f2, 0.3);
637
- }
638
-
639
- &:disabled {
640
- cursor: not-allowed !important;
641
- background: #f5f5f5;
642
- color: #c8c8c8;
643
- }
644
-
645
- @keyframes spinner {
646
- from {
647
- transform: rotate(0);
648
- }
649
- to {
650
- transform: rotate(360deg);
651
- }
652
- }
653
-
654
- .spin {
655
- animation: spinner 0.75s infinite linear;
656
- }
657
- }
658
-
659
- /deep/ .dropdown__content {
660
- &, .title__content {
661
- width: 100%;
662
- height: 100%;
663
- display: grid;
664
- place-items: center;
665
- }
666
- .title__content.icon {
667
- grid-template-columns: 1fr 10px;
668
- flex-direction: row;
669
- align-items: center;
670
- justify-content: space-between;
671
- color: #fff;
672
- font-weight: 600;
673
- font-size: 12px;
674
- margin: 0!important;
675
- i {
676
- font-size: 1rem;
677
- margin-left: 10px;
678
- }
679
- }
680
- }
681
-
682
- /deep/ .search-highlight {
683
- background: rgb(255, 252, 61);
684
- color: #000;
685
- }
686
-
687
- .content-middle {
688
- width: 50%;
689
- border-right: 1px solid #ececec5c;
690
- word-break: break-word !important;
691
- }
692
-
693
- .readmore {
694
- overflow: hidden;
695
- text-overflow: ellipsis;
696
- display: -webkit-box;
697
- -webkit-line-clamp: 3;
698
- -webkit-box-orient: vertical;
699
- }
700
-
701
- .tools {
702
- flex-wrap: wrap;
703
- display: grid;
704
- align-items: center;
705
- justify-content: space-between;
706
- grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
707
- gap: 10px;
708
- padding-right: 20px;
709
- button {
710
- display: flex;
711
- align-items: center;
712
- justify-content: center;
713
-
714
- margin-left: 0!important;
715
-
716
- height: 29px;
717
- border: none;
718
-
719
- background: #5865F2;
720
- border-radius: 16px;
721
- color: #fff;
722
-
723
- font-size: 0.75rem;
724
- font-weight: 600;
725
- outline: 0;
726
-
727
- padding: 0px 10px;
728
- .dropdown__icon {
729
- margin-right: 20px;
730
- }
731
- }
732
- }
733
-
734
- .education {
735
- margin-top: 15px;
736
- }
737
-
738
- .experience {
739
- .description {
740
- font-size: 14px;
741
- color: #62778c;
742
- }
743
-
744
- a {
745
- margin-bottom: 1px;
746
- }
747
- }
748
-
749
- .sub-title {
750
- margin-bottom: 1px;
751
-
752
- font-weight: 600;
753
- font-size: 14px;
754
- line-height: 21px;
755
- color: #62778c;
756
- text-transform: uppercase;
757
- }
758
-
759
- .info-text {
760
- margin-bottom: 1px;
761
-
762
- font-size: 14px;
763
- color: #8da2b5;
764
- }
765
-
766
- .content-block {
767
- p {
768
- font-size: 14px;
769
- color: #62778c;
770
- }
771
- }
772
-
773
- .no-info {
774
- p {
775
- font-size: 0.875rem;
776
- color: #62778c;
777
- }
778
- }
779
- </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 moveToItemsList"
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
+ {{ $t('user_cv.middle_side.simplified_registration') }}
43
+ <el-tooltip
44
+ placement="top"
45
+ >
46
+ <div style="max-width: 300px" slot="content">
47
+ {{ $t('user_cv.middle_side.simplified_registration_tooltip') }}
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">{{ $t('user_cv.middle_side.download_cv') }}</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">{{ $t('user_cv.middle_side.downloading') }}</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">{{ $t('user_cv.middle_side.about') }}</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
+ >{{ $t('user_cv.middle_side.read_more') }}</a
109
+ >
110
+
111
+ <p v-if="!(userData && userData.user_complementary_information && userData.user_complementary_information.about)" class="">
112
+ {{ $t('user_cv.middle_side.no_information_added') }}
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">{{ $t('user_cv.middle_side.presentation_video') }}</h5>
124
+
125
+ <div class="mux__video">
126
+ <MuxVideo
127
+ :src="userData.user_complementary_information.presentation_video"
128
+ />
129
+ </div>
130
+ </div>
131
+
132
+ <!-- DADOS PESSOAIS -->
133
+ <div v-if="userData && userData.user_complementary_information">
134
+ <h5 class="font-weight-bold mt-4 ml-3">{{ $t('user_cv.middle_side.personal_data') }}</h5>
135
+ <div class="ml-3 info-text">
136
+ <span v-if="userData.user_complementary_information.rg != null">RG: {{getFormattedValue('rg', userData.user_complementary_information.rg)}}<br></span>
137
+ <span v-if="userData.user_complementary_information.cpf != null">CPF: {{getFormattedValue('cpf', userData.user_complementary_information.cpf)}}<br></span>
138
+ <span v-if="userData.user_complementary_information.birth != null">Data de Nascimento: {{getFormattedValue('birthDate', userData.user_complementary_information.birth)}}<br></span>
139
+ <span v-if="userData.user_complementary_information.mother_name != null">{{ $t('user_cv.middle_side.mother_name_label') }} {{userData.user_complementary_information.mother_name}}<br></span>
140
+ </div>
141
+ </div>
142
+
143
+ <!-- CONTATO -->
144
+ <h5 class="font-weight-bold mt-4 ml-3">{{ $t('user_cv.middle_side.contacts') }}</h5>
145
+ <div class="ml-3 info-text">
146
+ <span v-if="userData.email != null">{{ $t('user_cv.middle_side.email_label') }} {{userData.email}}</span><br>
147
+ <span v-if="userData.user_contact && userData.user_contact.cellphone != null && userData.user_contact.cellphone.length > 1 ">{{ $t('user_cv.middle_side.cellphone_label') }} {{getPhoneFormatted(userData.user_contact.cellphone)}}</span><br>
148
+ <span v-if="userData.user_contact && userData.user_contact.phone != null && userData.user_contact.phone.length > 1">{{ $t('user_cv.middle_side.phone_label') }} {{getPhoneFormatted(userData.user_contact.phone)}}</span>
149
+ </div>
150
+
151
+ <!-- EDUCAÇÃO -->
152
+ <h5 class="font-weight-bold mt-4 ml-3">{{ $t('user_cv.middle_side.education') }}</h5>
153
+ <div
154
+ class=" ml-3"
155
+ v-show="userData.user_education.length > 0"
156
+ v-for="(edu, index) in userData.user_education"
157
+ :key="index"
158
+ >
159
+ <p
160
+ class="sub-title"
161
+ v-html="highlightText(search, edu.formation)"
162
+ ></p>
163
+ <p class="info-text">{{ edu.institution }}</p>
164
+ <span class="info-text">
165
+ {{ edu.start_month }}/{{ edu.start_year }} -
166
+ {{ treatEndDate(edu.end_month, edu.end_year) }}
167
+ {{ getTime(false, edu) }}
168
+ {{
169
+ edu.user_education_period
170
+ ? '-' + edu.user_education_period.name
171
+ : ''
172
+ }} </span
173
+ ><br />
174
+ <span
175
+ class="info-text"
176
+ >
177
+ {{getFormationLevel(edu.formation_level_id)}}
178
+ </span>
179
+ </div>
180
+
181
+ <!-- EXPERIÊNCIAS -->
182
+ <h5 class="font-weight-bold mt-4 ml-3">{{ $t('user_cv.middle_side.experience') }}</h5>
183
+ <div
184
+ class="no-info ml-3"
185
+ v-show="userData.user_experience.length === 0"
186
+ >
187
+ <p>
188
+ {{ $t('user_cv.middle_side.no_information_added') }}
189
+ </p>
190
+ </div>
191
+ <div
192
+ v-show="userData.user_experience.length > 0"
193
+ class="experience ml-3 mr-3"
194
+ v-for="(exp, index) in userData.user_experience"
195
+ :key="`experience-${index}`"
196
+ >
197
+ <p
198
+ class="sub-title"
199
+ v-html="highlightText(search, exp.job_title)"
200
+ ></p>
201
+ <p
202
+ class="info-text"
203
+ v-html="
204
+ highlightText(search, `${exp.company}, ${exp.location}`)
205
+ "
206
+ ></p>
207
+ <span class="info-text">
208
+ {{ exp.start_month }}/{{ exp.start_year }} -
209
+ {{ treatEndDate(exp.end_month, exp.end_year) }}
210
+ {{ getTime(true, exp) }}
211
+ </span>
212
+
213
+ <p
214
+ :id="`USER_EXPERIENCE-${index}`"
215
+ class="description mt-4 mb-0"
216
+ :class="!wordIsLesserThan(exp.description) && 'readmore'"
217
+ v-html="highlightText(search, exp.description)"
218
+ ></p>
219
+
220
+ <a
221
+ href="#"
222
+ aria-label="expandir conteudo"
223
+ v-show="!wordIsLesserThan(exp.description)"
224
+ @click.prevent.stop="
225
+ toggleReadMore($event, `USER_EXPERIENCE-${index}`)
226
+ "
227
+ >{{ $t('user_cv.middle_side.read_more') }}</a
228
+ ><br /><br />
229
+ </div>
230
+
231
+ <!-- CURSOS -->
232
+ <h5 class="font-weight-bold mt-1 ml-3">{{ $t('user_cv.middle_side.complementary_courses') }}</h5>
233
+ <div class="no-info ml-3" v-show="userData.user_course.length === 0">
234
+ <p>
235
+ {{ $t('user_cv.middle_side.no_information_added') }}
236
+ </p>
237
+ </div>
238
+ <div
239
+ v-show="userData.user_course.length > 0"
240
+ class="courses ml-3"
241
+ v-for="(cou, index) in userData.user_course"
242
+ :key="`course-${index}`"
243
+ >
244
+ <p
245
+ class="sub-title"
246
+ v-html="highlightText(search, cou.institution)"
247
+ ></p>
248
+ <p
249
+ class="info-text mb-3"
250
+ v-html="
251
+ highlightText(
252
+ search,
253
+ `${cou.name} - ${cou.end_year || ''} ${getTime(
254
+ false,
255
+ cou
256
+ )}`
257
+ )
258
+ "
259
+ />
260
+ </div>
261
+ </div>
262
+ </template>
263
+
264
+ <script>
265
+ import getPrefixes from '~/util/getPrefixes.js';
266
+ import { mask } from 'vue-the-mask';
267
+ import { Dropdown, DropdownMenu, DropdownItem } from 'element-ui';
268
+ import { parsePhoneNumber } from 'awesome-phonenumber';
269
+ import MuxVideo from '../../Video/MuxVideo.vue';
270
+
271
+ import swal from 'sweetalert2';
272
+ import axios from 'axios';
273
+
274
+ export default {
275
+ name: 'user-cv-middle',
276
+ directives: { mask },
277
+ props: {
278
+ userData: Object,
279
+ tools: {
280
+ type: Array,
281
+ default: () => []
282
+ },
283
+ search: {
284
+ type: String,
285
+ default: ''
286
+ },
287
+ moveToItems: {
288
+ type: Array,
289
+ default: () => []
290
+ }
291
+ },
292
+ components: {
293
+ ElDropdown: Dropdown,
294
+ ElDropdownMenu: DropdownMenu,
295
+ ElDropdownItem: DropdownItem,
296
+ MuxVideo
297
+ },
298
+ data() {
299
+ return {
300
+ isLocked: !this.companyHasProduct(
301
+ this.$store.state.loja && this.$store.state.loja.showableProducts && this.$store.state.loja.showableProducts['INTERACAO_USUARIO'] || false
302
+ ),
303
+ unlockedButtons: ['share', 'moveTo'],
304
+ isCvDownloading: false
305
+ };
306
+ },
307
+ computed: {
308
+ moveToItemsList() {
309
+ if (this.moveToItems.length > 0) {
310
+ return this.moveToItems;
311
+ }
312
+
313
+ return [
314
+ {
315
+ id: 1,
316
+ name: 'applieds',
317
+ title: this.$t('user_cv.middle_side.move_to_applied')
318
+ },
319
+ {
320
+ id: 3,
321
+ name: 'selecteds',
322
+ title: this.$t('user_cv.middle_side.move_to_selected')
323
+ },
324
+ {
325
+ id: 5,
326
+ name: 'hireds',
327
+ title: this.$t('user_cv.middle_side.move_to_hired')
328
+ },
329
+ {
330
+ id: 4,
331
+ name: 'other',
332
+ title: this.$t('user_cv.middle_side.move_to_rejected')
333
+ }
334
+ ];
335
+ }
336
+ },
337
+ mounted() {
338
+ this.userData.user_experience = this.filterByDate(
339
+ this.userData.user_experience,
340
+ 'old'
341
+ );
342
+ this.userData.user_education = this.filterByDate(
343
+ this.userData.user_education,
344
+ 'old'
345
+ );
346
+ this.userData.user_course = this.filterByDate(
347
+ this.userData.user_course,
348
+ 'old'
349
+ );
350
+ },
351
+ watch: {
352
+ userData() {
353
+ this.userData.user_experience = this.filterByDate(
354
+ this.userData.user_experience,
355
+ 'old'
356
+ );
357
+ this.userData.user_education = this.filterByDate(
358
+ this.userData.user_education,
359
+ 'old'
360
+ );
361
+ this.userData.user_course = this.filterByDate(
362
+ this.userData.user_course,
363
+ 'old'
364
+ );
365
+ }
366
+ },
367
+ methods: {
368
+ getFormationLevel(id) {
369
+ const typeFormation = {
370
+ 1: this.$t('user_cv.middle_side.formation_level_high_school'),
371
+ 2: this.$t('user_cv.middle_side.formation_level_technical'),
372
+ 3: this.$t('user_cv.middle_side.formation_level_graduation'),
373
+ 4: this.$t('user_cv.middle_side.formation_level_post_graduation'),
374
+ 5: this.$t('user_cv.middle_side.formation_level_masters'),
375
+ 6: this.$t('user_cv.middle_side.formation_level_doctorate'),
376
+ 8: this.$t('user_cv.middle_side.formation_level_elementary')
377
+ };
378
+
379
+ return typeFormation[id] || '-';
380
+ },
381
+ getFormattedValue(type, value) {
382
+ if (!value || typeof value !== 'string') return '';
383
+
384
+ const onlyDigits = value.replace(/\D/g, '');
385
+
386
+ if (type === 'cpf') {
387
+ if (onlyDigits.length !== 11) return value;
388
+ return onlyDigits.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4');
389
+ }
390
+
391
+ if (type === 'rg') {
392
+ if (onlyDigits.length < 7 || onlyDigits.length > 9) return value;
393
+ return onlyDigits.replace(/^(\d{1,2})(\d{3})(\d{3})(\d?)$/, (match, p1, p2, p3, p4) => {
394
+ let formatted = `${p1}.${p2}.${p3}`;
395
+ if (p4) formatted += `-${p4}`;
396
+ return formatted;
397
+ });
398
+ }
399
+
400
+ if (type === 'birthDate') {
401
+ const parts = onlyDigits.match(/^(\d{2})(\d{2})(\d{4})$/);
402
+ if (!parts) return value;
403
+ return `${parts[1]}/${parts[2]}/${parts[3]}`;
404
+ }
405
+
406
+ return value;
407
+ },
408
+ showMessage(message, type = 'success') {
409
+ const Toast = swal.mixin({
410
+ toast: true,
411
+ position: 'top-end',
412
+ showConfirmButton: false,
413
+ timer: 3000,
414
+ });
415
+
416
+ return Toast.fire({
417
+ type: type,
418
+ title: message,
419
+ });
420
+ },
421
+ async handleDownloadCv(data) {
422
+ this.isCvDownloading = true;
423
+
424
+ const response = await axios.get(data.annex, {
425
+ responseType: 'blob'
426
+ })
427
+ .then(res => URL.createObjectURL(res.data))
428
+ .catch(err => {
429
+ return {
430
+ error: true,
431
+ message: (err && err.response && err.response.data && err.response.data.message) || this.$t('user_cv.middle_side.download_error')
432
+ };
433
+ });
434
+
435
+ this.isCvDownloading = false;
436
+
437
+ if (response.error) {
438
+ this.showMessage(response.message, 'error');
439
+ return;
440
+ }
441
+
442
+ const link = document.createElement('a');
443
+ link.href = response;
444
+ link.download = `${data.user_id}.pdf`;
445
+ link.click();
446
+ },
447
+ getPhoneFormatted(phoneNumber) {
448
+ const formattedPhoneNumber = parsePhoneNumber(phoneNumber, { regionCode: 'BR' });
449
+
450
+ return (
451
+ formattedPhoneNumber &&
452
+ formattedPhoneNumber.number &&
453
+ formattedPhoneNumber.number.national
454
+ ) || phoneNumber;
455
+ },
456
+ highlightText(search, text) {
457
+ if (search.length < 2) return text;
458
+
459
+ const regex = new RegExp(search.toLowerCase(), 'gmi');
460
+ return String(text || '').replace(
461
+ regex,
462
+ `<span class="search-highlight">${search}</span>`
463
+ );
464
+ },
465
+ filterByDate(data, by = 'new') {
466
+ let sortedArray = data.sort((a, b) => {
467
+ a = [
468
+ a.start_month,
469
+ a.start_year,
470
+ a.end_month || 12,
471
+ a.end_year || 9999
472
+ ];
473
+
474
+ b = [
475
+ b.start_month,
476
+ b.start_year,
477
+ b.end_month || 12,
478
+ b.end_year || 9999
479
+ ];
480
+
481
+ // Primeiro filtro -> chaves: 0 e 1 -> Filtro por data de inicio
482
+ // Segundo filtro -> chaves: 2 e 3 -> Filtro por data de termino (subir não concluídos para primeiros)
483
+
484
+ let byStart;
485
+ let byEnd;
486
+
487
+ switch (by) {
488
+ case 'old':
489
+ byStart =
490
+ new Date(a[1], a[0], 1).getTime() -
491
+ new Date(b[1], b[0], 1).getTime();
492
+ byEnd =
493
+ new Date(b[3], b[2], 1).getTime() -
494
+ new Date(a[3], a[2], 1).getTime();
495
+ break;
496
+
497
+ default:
498
+ byStart =
499
+ new Date(b[1], b[0], 1).getTime() -
500
+ new Date(a[1], a[0], 1).getTime();
501
+ byEnd =
502
+ new Date(b[3], b[2], 1).getTime() -
503
+ new Date(a[3], a[2], 1).getTime();
504
+ break;
505
+ }
506
+
507
+ return byEnd - byStart;
508
+ });
509
+
510
+ return sortedArray;
511
+ },
512
+ toggleReadMore(event, id) {
513
+ const element = document.getElementById(id);
514
+ element.classList.toggle('readmore');
515
+ event.target.innerText == this.$t('user_cv.middle_side.read_more')
516
+ ? (event.target.innerText = this.$t('user_cv.middle_side.hide'))
517
+ : (event.target.innerText = this.$t('user_cv.middle_side.read_more'));
518
+ },
519
+ getTime(
520
+ isExperience,
521
+ { start_year = null, end_year = null, start_month, end_month },
522
+ textHappening = null
523
+ ) {
524
+ const isHappening = !end_month && !end_year;
525
+ const happeningText = textHappening || this.$t('user_cv.middle_side.studying');
526
+
527
+ if (isHappening) {
528
+ return isExperience === true ? this.$t('user_cv.middle_side.currently') : happeningText;
529
+ }
530
+
531
+ const dateInitial = this.$moment(
532
+ ['1', start_month.toString(), start_year.toString()],
533
+ 'DD/MM/YYYY'
534
+ );
535
+ const dateDone = this.$moment(
536
+ ['1', end_month.toString(), end_year.toString()],
537
+ 'DD/MM/YYYY'
538
+ );
539
+ const diffDuration = this.$moment.duration(
540
+ dateDone.diff(dateInitial)
541
+ );
542
+ const years = diffDuration.years();
543
+ const months = diffDuration.months();
544
+
545
+ if (years) {
546
+ return years > 1 ? `(${years} ${this.$t('user_cv.middle_side.years_plural')})` : `(${years} ${this.$t('user_cv.middle_side.year_singular')})`;
547
+ }
548
+
549
+ return months > 1
550
+ ? `(${months} ${this.$t('user_cv.middle_side.months_plural')})`
551
+ : months == 1
552
+ ? `(${months} ${this.$t('user_cv.middle_side.month_singular')})`
553
+ : '';
554
+ },
555
+ languageLevel(level) {
556
+ const levelKeys = {
557
+ 1: 'beginner',
558
+ 2: 'elementary',
559
+ 3: 'pre_intermediate',
560
+ 4: 'intermediate',
561
+ 5: 'upper_intermediate',
562
+ 6: 'advanced',
563
+ 7: 'fluent'
564
+ };
565
+
566
+ const levelKey = levelKeys[parseInt(level)];
567
+ return levelKey ? this.$t(`user_cv.middle_side.language_levels.${levelKey}`) : '';
568
+ },
569
+ treatPhone(phone) {
570
+ if (phone) {
571
+ if (phone == '0' || phone.length < 9 || !phone) {
572
+ return 'não cadastrado';
573
+ }
574
+ }
575
+
576
+ return phone;
577
+ },
578
+ treatCellphone(cellphone) {
579
+ if (cellphone) {
580
+ if (cellphone == '0' || cellphone.length < 11 || !cellphone) {
581
+ return 'não cadastrado';
582
+ }
583
+ }
584
+
585
+ return cellphone;
586
+ },
587
+ handleGetPrefixes(name = '') {
588
+ return getPrefixes(name);
589
+ },
590
+ treatEndDate(end_month, end_year) {
591
+ if (end_month && end_year) {
592
+ return `${end_month}/${end_year}`;
593
+ }
594
+ return '';
595
+ },
596
+ wordIsLesserThan(word, value = 300) {
597
+ return word && word.length < value;
598
+ }
599
+ }
600
+ };
601
+ </script>
602
+
603
+ <style lang="scss" scoped>
604
+ @import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
605
+
606
+ .mux__video {
607
+ width: 100%;
608
+ margin-top: 16px;
609
+
610
+ video {
611
+ width: 100% !important;
612
+ max-height: 400px !important;
613
+ border-radius: 8px !important;
614
+ display: block !important;
615
+ background: #212529 !important;
616
+ }
617
+ }
618
+
619
+ .cv__box {
620
+ cursor: pointer;
621
+ margin: 0;
622
+ border: 0;
623
+ width: 100%;
624
+ display: flex;
625
+ align-items: center;
626
+ justify-content: center;
627
+ gap: 1rem;
628
+ background: rgba(#5865f2, 0.2);
629
+ color: #5865F2;
630
+ font-size: 1rem;
631
+ padding: 1.25rem 1rem;
632
+ border-radius: 0.25rem;
633
+ transition: background-color 0.25s, color 0.25s;
634
+
635
+ &:hover:not(:disabled) {
636
+ background: rgba(#5865f2, 0.3);
637
+ }
638
+
639
+ &:disabled {
640
+ cursor: not-allowed !important;
641
+ background: #f5f5f5;
642
+ color: #c8c8c8;
643
+ }
644
+
645
+ @keyframes spinner {
646
+ from {
647
+ transform: rotate(0);
648
+ }
649
+ to {
650
+ transform: rotate(360deg);
651
+ }
652
+ }
653
+
654
+ .spin {
655
+ animation: spinner 0.75s infinite linear;
656
+ }
657
+ }
658
+
659
+ /deep/ .dropdown__content {
660
+ &, .title__content {
661
+ width: 100%;
662
+ height: 100%;
663
+ display: grid;
664
+ place-items: center;
665
+ }
666
+ .title__content.icon {
667
+ grid-template-columns: 1fr 10px;
668
+ flex-direction: row;
669
+ align-items: center;
670
+ justify-content: space-between;
671
+ color: #fff;
672
+ font-weight: 600;
673
+ font-size: 12px;
674
+ margin: 0!important;
675
+ i {
676
+ font-size: 1rem;
677
+ margin-left: 10px;
678
+ }
679
+ }
680
+ }
681
+
682
+ /deep/ .search-highlight {
683
+ background: rgb(255, 252, 61);
684
+ color: #000;
685
+ }
686
+
687
+ .content-middle {
688
+ width: 50%;
689
+ border-right: 1px solid #ececec5c;
690
+ word-break: break-word !important;
691
+ }
692
+
693
+ .readmore {
694
+ overflow: hidden;
695
+ text-overflow: ellipsis;
696
+ display: -webkit-box;
697
+ -webkit-line-clamp: 3;
698
+ -webkit-box-orient: vertical;
699
+ }
700
+
701
+ .tools {
702
+ flex-wrap: wrap;
703
+ display: grid;
704
+ align-items: center;
705
+ justify-content: space-between;
706
+ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
707
+ gap: 10px;
708
+ padding-right: 20px;
709
+ button {
710
+ display: flex;
711
+ align-items: center;
712
+ justify-content: center;
713
+
714
+ margin-left: 0!important;
715
+
716
+ height: 29px;
717
+ border: none;
718
+
719
+ background: #5865F2;
720
+ border-radius: 16px;
721
+ color: #fff;
722
+
723
+ font-size: 0.75rem;
724
+ font-weight: 600;
725
+ outline: 0;
726
+
727
+ padding: 0px 10px;
728
+ .dropdown__icon {
729
+ margin-right: 20px;
730
+ }
731
+ }
732
+ }
733
+
734
+ .education {
735
+ margin-top: 15px;
736
+ }
737
+
738
+ .experience {
739
+ .description {
740
+ font-size: 14px;
741
+ color: #62778c;
742
+ }
743
+
744
+ a {
745
+ margin-bottom: 1px;
746
+ }
747
+ }
748
+
749
+ .sub-title {
750
+ margin-bottom: 1px;
751
+
752
+ font-weight: 600;
753
+ font-size: 14px;
754
+ line-height: 21px;
755
+ color: #62778c;
756
+ text-transform: uppercase;
757
+ }
758
+
759
+ .info-text {
760
+ margin-bottom: 1px;
761
+
762
+ font-size: 14px;
763
+ color: #8da2b5;
764
+ }
765
+
766
+ .content-block {
767
+ p {
768
+ font-size: 14px;
769
+ color: #62778c;
770
+ }
771
+ }
772
+
773
+ .no-info {
774
+ p {
775
+ font-size: 0.875rem;
776
+ color: #62778c;
777
+ }
778
+ }
779
+ </style>