@burh/nuxt-core 1.0.302 → 1.0.303
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.
|
@@ -32,23 +32,61 @@
|
|
|
32
32
|
</p>
|
|
33
33
|
</div>
|
|
34
34
|
<el-option
|
|
35
|
-
v-for="(
|
|
35
|
+
v-for="(posi, index) in positions"
|
|
36
36
|
class="select-danger"
|
|
37
|
-
:value="
|
|
38
|
-
:label="
|
|
37
|
+
:value="posi.id"
|
|
38
|
+
:label="posi.level"
|
|
39
39
|
:key="index"
|
|
40
40
|
>
|
|
41
41
|
</el-option>
|
|
42
42
|
</el-select>
|
|
43
43
|
</section>
|
|
44
44
|
|
|
45
|
-
<section
|
|
45
|
+
<section
|
|
46
|
+
class="member__data"
|
|
47
|
+
v-for="(member, index) in searchData"
|
|
48
|
+
:key="index"
|
|
49
|
+
v-show="!isLoading"
|
|
50
|
+
>
|
|
46
51
|
<div>
|
|
47
|
-
<img
|
|
48
|
-
|
|
52
|
+
<img
|
|
53
|
+
v-show="member.urlImage"
|
|
54
|
+
:src="member.urlImage"
|
|
55
|
+
:alt="member.name"
|
|
56
|
+
>
|
|
57
|
+
<div v-show="!member.urlImage" class="member__no-image">
|
|
58
|
+
{{ handleGetPrefixes(member.name) }}
|
|
59
|
+
</div>
|
|
60
|
+
<p>{{ member.name }} {{ member.last_name }}</p>
|
|
49
61
|
</div>
|
|
50
62
|
<button type="button">Adicionar membro</button>
|
|
51
63
|
</section>
|
|
64
|
+
|
|
65
|
+
<!-- Skeleton for search data -->
|
|
66
|
+
<div v-if="isLoading">
|
|
67
|
+
<section
|
|
68
|
+
class="member__data"
|
|
69
|
+
v-for="index in 4"
|
|
70
|
+
:key="index"
|
|
71
|
+
>
|
|
72
|
+
<div>
|
|
73
|
+
<skeleton-animate rounded :width="52" :height="52" />
|
|
74
|
+
<skeleton-animate :width="100" :height="20" class="ml-2" />
|
|
75
|
+
</div>
|
|
76
|
+
<skeleton-animate rounded :width="184" :height="32" />
|
|
77
|
+
</section>
|
|
78
|
+
</div>
|
|
79
|
+
|
|
80
|
+
<section
|
|
81
|
+
class="member__no-results"
|
|
82
|
+
v-show="searchData.length === 0 && !isLoading"
|
|
83
|
+
>
|
|
84
|
+
<img
|
|
85
|
+
src="/img/icone_resultados.svg"
|
|
86
|
+
alt="Nenhum resultado"
|
|
87
|
+
/>
|
|
88
|
+
<p>Nenhum usuário encontrado</p>
|
|
89
|
+
</section>
|
|
52
90
|
</div>
|
|
53
91
|
|
|
54
92
|
<span class="tool tool-close" @click="$emit('close')">
|
|
@@ -64,6 +102,8 @@
|
|
|
64
102
|
|
|
65
103
|
<script>
|
|
66
104
|
import { Dialog, Select, Option } from 'element-ui';
|
|
105
|
+
import getPrefixes from '~/util/getPrefixes.js';
|
|
106
|
+
import SkeletonAnimate from '../Skeleton/SkeletonAnimate.vue';
|
|
67
107
|
|
|
68
108
|
export default {
|
|
69
109
|
name: 'member-modal',
|
|
@@ -71,6 +111,7 @@ export default {
|
|
|
71
111
|
[Dialog.name]: Dialog,
|
|
72
112
|
[Select.name]: Select,
|
|
73
113
|
[Option.name]: Option,
|
|
114
|
+
SkeletonAnimate
|
|
74
115
|
},
|
|
75
116
|
props: {
|
|
76
117
|
isActive: {
|
|
@@ -78,23 +119,41 @@ export default {
|
|
|
78
119
|
default: false,
|
|
79
120
|
description: 'Open modal verification'
|
|
80
121
|
},
|
|
81
|
-
|
|
122
|
+
positions: {
|
|
82
123
|
type: Array,
|
|
83
124
|
default: null,
|
|
84
125
|
description: 'Company Positions'
|
|
126
|
+
},
|
|
127
|
+
searchData: {
|
|
128
|
+
type: Array,
|
|
129
|
+
default: null,
|
|
130
|
+
description: 'Search member results'
|
|
131
|
+
},
|
|
132
|
+
isLoading: {
|
|
133
|
+
type: Boolean,
|
|
134
|
+
default: false,
|
|
135
|
+
description: 'State loading'
|
|
85
136
|
}
|
|
86
137
|
},
|
|
87
138
|
methods: {
|
|
88
139
|
searchMember() {
|
|
89
140
|
this.$emit('search-member', this.search);
|
|
90
|
-
}
|
|
141
|
+
},
|
|
142
|
+
handleGetPrefixes(name = '') {
|
|
143
|
+
return getPrefixes(name);
|
|
144
|
+
},
|
|
91
145
|
},
|
|
92
146
|
data() {
|
|
93
147
|
return {
|
|
94
148
|
search: '',
|
|
95
149
|
selectRole: null
|
|
96
150
|
};
|
|
97
|
-
}
|
|
151
|
+
},
|
|
152
|
+
watch: {
|
|
153
|
+
searchData(newValue){
|
|
154
|
+
this.searchData = newValue;
|
|
155
|
+
}
|
|
156
|
+
},
|
|
98
157
|
};
|
|
99
158
|
</script>
|
|
100
159
|
|
|
@@ -136,7 +195,7 @@ export default {
|
|
|
136
195
|
align-items: center;
|
|
137
196
|
|
|
138
197
|
padding-top: 0.5rem;
|
|
139
|
-
margin-top:
|
|
198
|
+
margin-top: 2rem;
|
|
140
199
|
border-top: 2px solid #f8f8f8;
|
|
141
200
|
|
|
142
201
|
div {
|
|
@@ -169,6 +228,43 @@ export default {
|
|
|
169
228
|
border-color: #5865f2;
|
|
170
229
|
}
|
|
171
230
|
}
|
|
231
|
+
|
|
232
|
+
&__no-image {
|
|
233
|
+
display: flex;
|
|
234
|
+
align-items: center;
|
|
235
|
+
justify-content: center;
|
|
236
|
+
|
|
237
|
+
width: 3.125rem;
|
|
238
|
+
height: 3.125rem;
|
|
239
|
+
border-radius: 50%;
|
|
240
|
+
|
|
241
|
+
background: #969595;
|
|
242
|
+
color: #fff;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
&__no-results {
|
|
246
|
+
padding: 6.5rem;
|
|
247
|
+
display: flex;
|
|
248
|
+
justify-content: center;
|
|
249
|
+
align-items: center;
|
|
250
|
+
flex-direction: column;
|
|
251
|
+
|
|
252
|
+
img {
|
|
253
|
+
width: 7rem;
|
|
254
|
+
|
|
255
|
+
-webkit-filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.2));
|
|
256
|
+
filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.2));
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
p {
|
|
260
|
+
font-style: normal;
|
|
261
|
+
font-weight: normal;
|
|
262
|
+
font-size: 18px;
|
|
263
|
+
line-height: 27px;
|
|
264
|
+
color: #525f7f;
|
|
265
|
+
margin-top: 1.5rem;
|
|
266
|
+
}
|
|
267
|
+
}
|
|
172
268
|
}
|
|
173
269
|
|
|
174
270
|
.tool {
|