@burh/nuxt-core 1.0.346 → 1.0.347

package/components/burh-ds/Modals/AddMember.vue

@@ -1,315 +1,315 @@
-<template>
-	<el-dialog
-		:visible.sync="isActive"
-		width="65%"
-		custom-class="position-relative"
-		@close="$emit('close')"
-	>
-		<template>
-			<div class="member">
-				<h3>Adicionar novo membro</h3>
-
-				<section class="member__search">
-					<search-input
-						:placeholder="'Busque por nome ou e-mail'"
-						:search="search"
-						@search="(value) => (search = value)"
-						@change="searchMember"
-					/>
-
-					<el-select
-						filterable
-						clearable
-						collapse-tags
-						allow-create
-						placeholder="Escolher Cargo por"
-						class="member__select"
-						v-model="selectPosition"
-					>
-						<div class="text-center" slot="empty">
-							<p class="small mb-2 mt-2">
-								Nenhum cargo encontrado
-							</p>
-						</div>
-						<el-option
-							v-for="(posi, index) in positions"
-							class="select-danger"
-							:value="posi.level"
-							:label="posi.level"
-							:key="index"
-						>
-						</el-option>
-					</el-select>
-				</section>
-
-				<section
-					class="member__data"
-					v-for="(member, index) in searchData"
-					:key="index"
-					v-show="!isLoading"
-				>
-					<div>
-						<img
-							v-show="member.urlImage"
-							:src="member.urlImage"
-							:alt="member.name"
-						>
-						<div v-show="!member.urlImage" class="member__no-image">
-							{{ handleGetPrefixes(member.name) }}
-						</div>
-						<p>{{ member.name }} {{ member.last_name }}</p>
-					</div>
-					<button
-						type="button"
-						:disabled="selectPosition === ''"
-						:class="{'no-position': selectPosition === ''}"
-						@click="addMember(member)"
-					>
-						Adicionar membro
-					</button>
-				</section>
-
-				<!-- Skeleton for search data -->
-				<div v-if="isLoading">
-					<section
-						class="member__data"
-						v-for="index in 4"
-						:key="index"
-					>
-						<div>
-							<skeleton-animate rounded :width="52" :height="52" />
-							<skeleton-animate :width="100" :height="20" class="ml-2" />
-						</div>
-						<skeleton-animate rounded :width="184" :height="32" />
-					</section>
-				</div>
-
-				<section
-					class="member__no-results"
-					v-show="searchData.length === 0 && !isLoading"
-				>
-					<img
-						src="/img/icone_resultados.svg"
-						alt="Nenhum resultado"
-					/>
-					<p>Nenhum usuário encontrado</p>
-				</section>
-			</div>
-
-			<span class="tool tool-close" @click="$emit('close')">
-				Fechar
-				<font-awesome-icon
-					:icon="['fas', 'times']"
-					class="text-white ml-1"
-				/>
-			</span>
-		</template>
-	</el-dialog>
-</template>
-
-<script>
-import { Dialog, Select, Option } from 'element-ui';
-import getPrefixes from '~/util/getPrefixes.js';
-import SkeletonAnimate from '../Skeleton/SkeletonAnimate.vue';
-
-export default {
-	name: 'member-modal',
-	components: {
-		[Dialog.name]: Dialog,
-		[Select.name]: Select,
-		[Option.name]: Option,
-		SkeletonAnimate
-	},
-	props: {
-		isActive: {
-			type: Boolean,
-			default: false,
-			description: 'Open modal verification'
-		},
-		positions: {
-			type: Array,
-			default: null,
-			description: 'Company Positions'
-		},
-		searchData: {
-			type: Array,
-			default: null,
-			description: 'Search member results'
-		},
-		isLoading: {
-			type: Boolean,
-			default: false,
-			description: 'State loading'
-		}
-	},
-	methods: {
-		searchMember() {
-			this.$emit('search-member', this.search);
-		},
-		addMember(member) {
-			this.$emit('add-member', member.id, this.selectPosition);
-		},
-		handleGetPrefixes(name = '') {
-			return getPrefixes(name);
-		},
-	},
-	data() {
-		return {
-			search: '',
-			selectPosition: ''
-		};
-	},
-	watch: {
-		searchData(newValue){
-			this.searchData = newValue;
-		}
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-@import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
-
-/deep/ .el-dialog__body {
-    padding: 0;
-}
-
-/deep/ .el-dialog__header {
-    display: none;
-}
-
-/deep/ .el-dialog {
-    overflow: hidden;
-    border-radius: 10px;
-    padding-bottom: 3.125rem;
-    max-width: 60.43rem;
-}
-
-.member {
-    padding: 3rem 2rem;
-
-    &__search {
-        margin-top: 2rem;
-
-        display: flex;
-        align-items: center;
-
-        .input__container__icon {
-            height: 2.75rem;
-        }
-
-		.member__select {
-			margin-left: auto;
-		}
-    }
-
-    &__data {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        padding-top: 0.5rem;
-        margin-top: 2rem;
-        border-top: 2px solid #f8f8f8;
-
-        div {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-
-            img {
-                width: 3.125rem;
-                height: 3.125rem;
-
-                border-radius: 50%;
-            }
-
-            p {
-                margin: 0.1rem 0 0 1rem;
-            }
-        }
-
-        button {
-            margin-left: 1rem;
-            height: 2rem;
-            width: 11.5rem;
-
-            border: 0;
-            border-radius: 23rem;
-
-            color: #fff;
-            background-color: #5865f2;
-            border-color: #5865f2;
-
-			outline: 0;
-        }
-
-		.no-position {
-			opacity: 0.3;
-		}
-    }
-
-	&__no-image {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-
-		width: 3.125rem;
-		height: 3.125rem;
-		border-radius: 50%;
-
-		background: #969595;
-		color: #fff;
-	}
-
-	&__no-results {
-		padding: 6.5rem;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		flex-direction: column;
-
-		img {
-			width: 7rem;
-
-			-webkit-filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.2));
-			filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.2));
-		}
-
-		p {
-			font-style: normal;
-			font-weight: normal;
-			font-size: 18px;
-			line-height: 27px;
-			color: #525f7f;
-			margin-top: 1.5rem;
-		}
-	}
-}
-
-.tool {
-    position: absolute;
-    top: 1rem;
-    z-index: 10;
-    color: $primary;
-    cursor: pointer;
-
-    &-close {
-        position: absolute;
-        width: 5.5rem;
-        height: 1.6rem;
-        right: 7px;
-        top: 7px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        font-size: 11px;
-
-        font-weight: 500;
-        background: rgba(0, 0, 0, 0.2);
-        border-radius: 17.5px;
-        color: #fff;
-    }
-}
+<template>
+	<el-dialog
+		:visible.sync="isActive"
+		width="65%"
+		custom-class="position-relative"
+		@close="$emit('close')"
+	>
+		<template>
+			<div class="member">
+				<h3>Adicionar novo membro</h3>
+
+				<section class="member__search">
+					<search-input
+						:placeholder="'Busque por nome ou e-mail'"
+						:search="search"
+						@search="(value) => (search = value)"
+						@change="searchMember"
+					/>
+
+					<el-select
+						filterable
+						clearable
+						collapse-tags
+						allow-create
+						placeholder="Escolher Cargo por"
+						class="member__select"
+						v-model="selectPosition"
+					>
+						<div class="text-center" slot="empty">
+							<p class="small mb-2 mt-2">
+								Nenhum cargo encontrado
+							</p>
+						</div>
+						<el-option
+							v-for="(posi, index) in positions"
+							class="select-danger"
+							:value="posi.level"
+							:label="posi.level"
+							:key="index"
+						>
+						</el-option>
+					</el-select>
+				</section>
+
+				<section
+					class="member__data"
+					v-for="(member, index) in searchData"
+					:key="index"
+					v-show="!isLoading"
+				>
+					<div>
+						<img
+							v-show="member.urlImage"
+							:src="member.urlImage"
+							:alt="member.name"
+						>
+						<div v-show="!member.urlImage" class="member__no-image">
+							{{ handleGetPrefixes(member.name) }}
+						</div>
+						<p>{{ member.name }} {{ member.last_name }}</p>
+					</div>
+					<button
+						type="button"
+						:disabled="selectPosition === ''"
+						:class="{'no-position': selectPosition === ''}"
+						@click="addMember(member)"
+					>
+						Adicionar membro
+					</button>
+				</section>
+
+				<!-- Skeleton for search data -->
+				<div v-if="isLoading">
+					<section
+						class="member__data"
+						v-for="index in 4"
+						:key="index"
+					>
+						<div>
+							<skeleton-animate rounded :width="52" :height="52" />
+							<skeleton-animate :width="100" :height="20" class="ml-2" />
+						</div>
+						<skeleton-animate rounded :width="184" :height="32" />
+					</section>
+				</div>
+
+				<section
+					class="member__no-results"
+					v-show="searchData.length === 0 && !isLoading"
+				>
+					<img
+						src="/img/icone_resultados.svg"
+						alt="Nenhum resultado"
+					/>
+					<p>Nenhum usuário encontrado</p>
+				</section>
+			</div>
+
+			<span class="tool tool-close" @click="$emit('close')">
+				Fechar
+				<font-awesome-icon
+					:icon="['fas', 'times']"
+					class="text-white ml-1"
+				/>
+			</span>
+		</template>
+	</el-dialog>
+</template>
+
+<script>
+import { Dialog, Select, Option } from 'element-ui';
+import getPrefixes from '~/util/getPrefixes.js';
+import SkeletonAnimate from '../Skeleton/SkeletonAnimate.vue';
+
+export default {
+	name: 'member-modal',
+	components: {
+		[Dialog.name]: Dialog,
+		[Select.name]: Select,
+		[Option.name]: Option,
+		SkeletonAnimate
+	},
+	props: {
+		isActive: {
+			type: Boolean,
+			default: false,
+			description: 'Open modal verification'
+		},
+		positions: {
+			type: Array,
+			default: null,
+			description: 'Company Positions'
+		},
+		searchData: {
+			type: Array,
+			default: null,
+			description: 'Search member results'
+		},
+		isLoading: {
+			type: Boolean,
+			default: false,
+			description: 'State loading'
+		}
+	},
+	methods: {
+		searchMember() {
+			this.$emit('search-member', this.search);
+		},
+		addMember(member) {
+			this.$emit('add-member', member.id, this.selectPosition);
+		},
+		handleGetPrefixes(name = '') {
+			return getPrefixes(name);
+		},
+	},
+	data() {
+		return {
+			search: '',
+			selectPosition: ''
+		};
+	},
+	watch: {
+		searchData(newValue){
+			this.searchData = newValue;
+		}
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
+
+/deep/ .el-dialog__body {
+    padding: 0;
+}
+
+/deep/ .el-dialog__header {
+    display: none;
+}
+
+/deep/ .el-dialog {
+    overflow: hidden;
+    border-radius: 10px;
+    padding-bottom: 3.125rem;
+    max-width: 60.43rem;
+}
+
+.member {
+    padding: 3rem 2rem;
+
+    &__search {
+        margin-top: 2rem;
+
+        display: flex;
+        align-items: center;
+
+        .input__container__icon {
+            height: 2.75rem;
+        }
+
+		.member__select {
+			margin-left: auto;
+		}
+    }
+
+    &__data {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        padding-top: 0.5rem;
+        margin-top: 2rem;
+        border-top: 2px solid #f8f8f8;
+
+        div {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            img {
+                width: 3.125rem;
+                height: 3.125rem;
+
+                border-radius: 50%;
+            }
+
+            p {
+                margin: 0.1rem 0 0 1rem;
+            }
+        }
+
+        button {
+            margin-left: 1rem;
+            height: 2rem;
+            width: 11.5rem;
+
+            border: 0;
+            border-radius: 23rem;
+
+            color: #fff;
+            background-color: #5865f2;
+            border-color: #5865f2;
+
+			outline: 0;
+        }
+
+		.no-position {
+			opacity: 0.3;
+		}
+    }
+
+	&__no-image {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		width: 3.125rem;
+		height: 3.125rem;
+		border-radius: 50%;
+
+		background: #969595;
+		color: #fff;
+	}
+
+	&__no-results {
+		padding: 6.5rem;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+
+		img {
+			width: 7rem;
+
+			-webkit-filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.2));
+			filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.2));
+		}
+
+		p {
+			font-style: normal;
+			font-weight: normal;
+			font-size: 18px;
+			line-height: 27px;
+			color: #525f7f;
+			margin-top: 1.5rem;
+		}
+	}
+}
+
+.tool {
+    position: absolute;
+    top: 1rem;
+    z-index: 10;
+    color: $primary;
+    cursor: pointer;
+
+    &-close {
+        position: absolute;
+        width: 5.5rem;
+        height: 1.6rem;
+        right: 7px;
+        top: 7px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        font-size: 11px;
+
+        font-weight: 500;
+        background: rgba(0, 0, 0, 0.2);
+        border-radius: 17.5px;
+        color: #fff;
+    }
+}
 </style>