@burh/nuxt-core 1.1.21 → 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.
Files changed (3) hide show
  1. package/components/burh-ds/Curriculum/UserCurriculum/UserCvMiddle.vue +779 -770
  2. package/components/burh-ds/Headings/AppHeader.vue +17 -4
  3. package/package.json +1 -1
package/components/burh-ds/Curriculum/UserCurriculum/UserCvMiddle.vue CHANGED
@@ -1,770 +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 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
- {{ $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
- id: 1,
292
- name: 'applieds',
293
- title: this.$t('user_cv.middle_side.move_to_applied')
294
- },
295
- {
296
- id: 3,
297
- name: 'selecteds',
298
- title: this.$t('user_cv.middle_side.move_to_selected')
299
- },
300
- {
301
- id: 5,
302
- name: 'hireds',
303
- title: this.$t('user_cv.middle_side.move_to_hired')
304
- },
305
- {
306
- id: 4,
307
- name: 'other',
308
- title: this.$t('user_cv.middle_side.move_to_rejected')
309
- }
310
- ]
311
- }
312
- },
313
- components: {
314
- ElDropdown: Dropdown,
315
- ElDropdownMenu: DropdownMenu,
316
- ElDropdownItem: DropdownItem,
317
- MuxVideo
318
- },
319
- data() {
320
- return {
321
- isLocked: !this.companyHasProduct(
322
- this.$store.state.loja && this.$store.state.loja.showableProducts && this.$store.state.loja.showableProducts['INTERACAO_USUARIO'] || false
323
- ),
324
- unlockedButtons: ['share', 'moveTo'],
325
- isCvDownloading: false
326
- };
327
- },
328
- mounted() {
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
- watch: {
343
- userData() {
344
- this.userData.user_experience = this.filterByDate(
345
- this.userData.user_experience,
346
- 'old'
347
- );
348
- this.userData.user_education = this.filterByDate(
349
- this.userData.user_education,
350
- 'old'
351
- );
352
- this.userData.user_course = this.filterByDate(
353
- this.userData.user_course,
354
- 'old'
355
- );
356
- }
357
- },
358
- methods: {
359
- getFormationLevel(id) {
360
- const typeFormation = {
361
- 1: this.$t('user_cv.middle_side.formation_level_high_school'),
362
- 2: this.$t('user_cv.middle_side.formation_level_technical'),
363
- 3: this.$t('user_cv.middle_side.formation_level_graduation'),
364
- 4: this.$t('user_cv.middle_side.formation_level_post_graduation'),
365
- 5: this.$t('user_cv.middle_side.formation_level_masters'),
366
- 6: this.$t('user_cv.middle_side.formation_level_doctorate'),
367
- 8: this.$t('user_cv.middle_side.formation_level_elementary')
368
- };
369
-
370
- return typeFormation[id] || '-';
371
- },
372
- getFormattedValue(type, value) {
373
- if (!value || typeof value !== 'string') return '';
374
-
375
- const onlyDigits = value.replace(/\D/g, '');
376
-
377
- if (type === 'cpf') {
378
- if (onlyDigits.length !== 11) return value;
379
- return onlyDigits.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4');
380
- }
381
-
382
- if (type === 'rg') {
383
- if (onlyDigits.length < 7 || onlyDigits.length > 9) return value;
384
- return onlyDigits.replace(/^(\d{1,2})(\d{3})(\d{3})(\d?)$/, (match, p1, p2, p3, p4) => {
385
- let formatted = `${p1}.${p2}.${p3}`;
386
- if (p4) formatted += `-${p4}`;
387
- return formatted;
388
- });
389
- }
390
-
391
- if (type === 'birthDate') {
392
- const parts = onlyDigits.match(/^(\d{2})(\d{2})(\d{4})$/);
393
- if (!parts) return value;
394
- return `${parts[1]}/${parts[2]}/${parts[3]}`;
395
- }
396
-
397
- return value;
398
- },
399
- showMessage(message, type = 'success') {
400
- const Toast = swal.mixin({
401
- toast: true,
402
- position: 'top-end',
403
- showConfirmButton: false,
404
- timer: 3000,
405
- });
406
-
407
- return Toast.fire({
408
- type: type,
409
- title: message,
410
- });
411
- },
412
- async handleDownloadCv(data) {
413
- this.isCvDownloading = true;
414
-
415
- const response = await axios.get(data.annex, {
416
- responseType: 'blob'
417
- })
418
- .then(res => URL.createObjectURL(res.data))
419
- .catch(err => {
420
- return {
421
- error: true,
422
- message: (err && err.response && err.response.data && err.response.data.message) || this.$t('user_cv.middle_side.download_error')
423
- };
424
- });
425
-
426
- this.isCvDownloading = false;
427
-
428
- if (response.error) {
429
- this.showMessage(response.message, 'error');
430
- return;
431
- }
432
-
433
- const link = document.createElement('a');
434
- link.href = response;
435
- link.download = `${data.user_id}.pdf`;
436
- link.click();
437
- },
438
- getPhoneFormatted(phoneNumber) {
439
- const formattedPhoneNumber = parsePhoneNumber(phoneNumber, { regionCode: 'BR' });
440
-
441
- return (
442
- formattedPhoneNumber &&
443
- formattedPhoneNumber.number &&
444
- formattedPhoneNumber.number.national
445
- ) || phoneNumber;
446
- },
447
- highlightText(search, text) {
448
- if (search.length < 2) return text;
449
-
450
- const regex = new RegExp(search.toLowerCase(), 'gmi');
451
- return String(text || '').replace(
452
- regex,
453
- `<span class="search-highlight">${search}</span>`
454
- );
455
- },
456
- filterByDate(data, by = 'new') {
457
- let sortedArray = data.sort((a, b) => {
458
- a = [
459
- a.start_month,
460
- a.start_year,
461
- a.end_month || 12,
462
- a.end_year || 9999
463
- ];
464
-
465
- b = [
466
- b.start_month,
467
- b.start_year,
468
- b.end_month || 12,
469
- b.end_year || 9999
470
- ];
471
-
472
- // Primeiro filtro -> chaves: 0 e 1 -> Filtro por data de inicio
473
- // Segundo filtro -> chaves: 2 e 3 -> Filtro por data de termino (subir não concluídos para primeiros)
474
-
475
- let byStart;
476
- let byEnd;
477
-
478
- switch (by) {
479
- case 'old':
480
- byStart =
481
- new Date(a[1], a[0], 1).getTime() -
482
- new Date(b[1], b[0], 1).getTime();
483
- byEnd =
484
- new Date(b[3], b[2], 1).getTime() -
485
- new Date(a[3], a[2], 1).getTime();
486
- break;
487
-
488
- default:
489
- byStart =
490
- new Date(b[1], b[0], 1).getTime() -
491
- new Date(a[1], a[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
-
498
- return byEnd - byStart;
499
- });
500
-
501
- return sortedArray;
502
- },
503
- toggleReadMore(event, id) {
504
- const element = document.getElementById(id);
505
- element.classList.toggle('readmore');
506
- event.target.innerText == this.$t('user_cv.middle_side.read_more')
507
- ? (event.target.innerText = this.$t('user_cv.middle_side.hide'))
508
- : (event.target.innerText = this.$t('user_cv.middle_side.read_more'));
509
- },
510
- getTime(
511
- isExperience,
512
- { start_year = null, end_year = null, start_month, end_month },
513
- textHappening = null
514
- ) {
515
- const isHappening = !end_month && !end_year;
516
- const happeningText = textHappening || this.$t('user_cv.middle_side.studying');
517
-
518
- if (isHappening) {
519
- return isExperience === true ? this.$t('user_cv.middle_side.currently') : happeningText;
520
- }
521
-
522
- const dateInitial = this.$moment(
523
- ['1', start_month.toString(), start_year.toString()],
524
- 'DD/MM/YYYY'
525
- );
526
- const dateDone = this.$moment(
527
- ['1', end_month.toString(), end_year.toString()],
528
- 'DD/MM/YYYY'
529
- );
530
- const diffDuration = this.$moment.duration(
531
- dateDone.diff(dateInitial)
532
- );
533
- const years = diffDuration.years();
534
- const months = diffDuration.months();
535
-
536
- if (years) {
537
- return years > 1 ? `(${years} ${this.$t('user_cv.middle_side.years_plural')})` : `(${years} ${this.$t('user_cv.middle_side.year_singular')})`;
538
- }
539
-
540
- return months > 1
541
- ? `(${months} ${this.$t('user_cv.middle_side.months_plural')})`
542
- : months == 1
543
- ? `(${months} ${this.$t('user_cv.middle_side.month_singular')})`
544
- : '';
545
- },
546
- languageLevel(level) {
547
- const levelKeys = {
548
- 1: 'beginner',
549
- 2: 'elementary',
550
- 3: 'pre_intermediate',
551
- 4: 'intermediate',
552
- 5: 'upper_intermediate',
553
- 6: 'advanced',
554
- 7: 'fluent'
555
- };
556
-
557
- const levelKey = levelKeys[parseInt(level)];
558
- return levelKey ? this.$t(`user_cv.middle_side.language_levels.${levelKey}`) : '';
559
- },
560
- treatPhone(phone) {
561
- if (phone) {
562
- if (phone == '0' || phone.length < 9 || !phone) {
563
- return 'não cadastrado';
564
- }
565
- }
566
-
567
- return phone;
568
- },
569
- treatCellphone(cellphone) {
570
- if (cellphone) {
571
- if (cellphone == '0' || cellphone.length < 11 || !cellphone) {
572
- return 'não cadastrado';
573
- }
574
- }
575
-
576
- return cellphone;
577
- },
578
- handleGetPrefixes(name = '') {
579
- return getPrefixes(name);
580
- },
581
- treatEndDate(end_month, end_year) {
582
- if (end_month && end_year) {
583
- return `${end_month}/${end_year}`;
584
- }
585
- return '';
586
- },
587
- wordIsLesserThan(word, value = 300) {
588
- return word && word.length < value;
589
- }
590
- }
591
- };
592
- </script>
593
-
594
- <style lang="scss" scoped>
595
- @import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
596
-
597
- .mux__video {
598
- width: 100%;
599
- margin-top: 16px;
600
-
601
- video {
602
- width: 100% !important;
603
- max-height: 400px !important;
604
- border-radius: 8px !important;
605
- display: block !important;
606
- background: #212529 !important;
607
- }
608
- }
609
-
610
- .cv__box {
611
- cursor: pointer;
612
- margin: 0;
613
- border: 0;
614
- width: 100%;
615
- display: flex;
616
- align-items: center;
617
- justify-content: center;
618
- gap: 1rem;
619
- background: rgba(#5865f2, 0.2);
620
- color: #5865F2;
621
- font-size: 1rem;
622
- padding: 1.25rem 1rem;
623
- border-radius: 0.25rem;
624
- transition: background-color 0.25s, color 0.25s;
625
-
626
- &:hover:not(:disabled) {
627
- background: rgba(#5865f2, 0.3);
628
- }
629
-
630
- &:disabled {
631
- cursor: not-allowed !important;
632
- background: #f5f5f5;
633
- color: #c8c8c8;
634
- }
635
-
636
- @keyframes spinner {
637
- from {
638
- transform: rotate(0);
639
- }
640
- to {
641
- transform: rotate(360deg);
642
- }
643
- }
644
-
645
- .spin {
646
- animation: spinner 0.75s infinite linear;
647
- }
648
- }
649
-
650
- /deep/ .dropdown__content {
651
- &, .title__content {
652
- width: 100%;
653
- height: 100%;
654
- display: grid;
655
- place-items: center;
656
- }
657
- .title__content.icon {
658
- grid-template-columns: 1fr 10px;
659
- flex-direction: row;
660
- align-items: center;
661
- justify-content: space-between;
662
- color: #fff;
663
- font-weight: 600;
664
- font-size: 12px;
665
- margin: 0!important;
666
- i {
667
- font-size: 1rem;
668
- margin-left: 10px;
669
- }
670
- }
671
- }
672
-
673
- /deep/ .search-highlight {
674
- background: rgb(255, 252, 61);
675
- color: #000;
676
- }
677
-
678
- .content-middle {
679
- width: 50%;
680
- border-right: 1px solid #ececec5c;
681
- word-break: break-word !important;
682
- }
683
-
684
- .readmore {
685
- overflow: hidden;
686
- text-overflow: ellipsis;
687
- display: -webkit-box;
688
- -webkit-line-clamp: 3;
689
- -webkit-box-orient: vertical;
690
- }
691
-
692
- .tools {
693
- flex-wrap: wrap;
694
- display: grid;
695
- align-items: center;
696
- justify-content: space-between;
697
- grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
698
- gap: 10px;
699
- padding-right: 20px;
700
- button {
701
- display: flex;
702
- align-items: center;
703
- justify-content: center;
704
-
705
- margin-left: 0!important;
706
-
707
- height: 29px;
708
- border: none;
709
-
710
- background: #5865F2;
711
- border-radius: 16px;
712
- color: #fff;
713
-
714
- font-size: 0.75rem;
715
- font-weight: 600;
716
- outline: 0;
717
-
718
- padding: 0px 10px;
719
- .dropdown__icon {
720
- margin-right: 20px;
721
- }
722
- }
723
- }
724
-
725
- .education {
726
- margin-top: 15px;
727
- }
728
-
729
- .experience {
730
- .description {
731
- font-size: 14px;
732
- color: #62778c;
733
- }
734
-
735
- a {
736
- margin-bottom: 1px;
737
- }
738
- }
739
-
740
- .sub-title {
741
- margin-bottom: 1px;
742
-
743
- font-weight: 600;
744
- font-size: 14px;
745
- line-height: 21px;
746
- color: #62778c;
747
- text-transform: uppercase;
748
- }
749
-
750
- .info-text {
751
- margin-bottom: 1px;
752
-
753
- font-size: 14px;
754
- color: #8da2b5;
755
- }
756
-
757
- .content-block {
758
- p {
759
- font-size: 14px;
760
- color: #62778c;
761
- }
762
- }
763
-
764
- .no-info {
765
- p {
766
- font-size: 0.875rem;
767
- color: #62778c;
768
- }
769
- }
770
- </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>