@burh/nuxt-core 1.0.21 → 1.0.23

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

@@ -1,171 +1,173 @@
 <template>
-    <modal :show.sync="openModal" v-on:close="$emit('close-modal')" size='lg' class="modal">
-        <template slot="header">
-            <h2 class="display-4 px-4">{{title}}</h2>
-        </template>
-        
-        <div class="row px-4">
-            <div class="col-12">
-                <label for="description">{{name}}</label>
-                <base-input
-                placeholder="Insira o nome do teste"
-                v-model="atributes.title"
-                >
-                </base-input>
-            </div>
+	<modal :show.sync="openModal" v-on:close="$emit('close-modal')" size='lg' class="modal">
+		<template slot="header">
+			<h2 class="display-4 px-4">{{title}}</h2>
+		</template>
 
-            <div class="col-12">
-                <label for="description">{{textAreaTitle}}</label>
-                <el-input
-                type="textarea"
-                :rows="5"
-                placeholder="Insira a descrição do teste"
-                v-model="atributes.textarea">
-                </el-input>
-            </div>
+		<div class="row px-4">
+			<div class="col-12">
+				<label for="description">{{name}}</label>
+				<base-input
+					placeholder="Insira o nome do teste"
+					v-model="configInfo.title"
+				>
+				</base-input>
+			</div>
 
-            <div class="col-12">
-                <p class="mb-0 mt-3">{{buttonAreaTitle}}</p>
+			<div class="col-12">
+				<label for="description">{{textAreaTitle}}</label>
+				<base-input>
+					<textarea class="form-control"
+						placeholder="Insira a descrição do teste"
+						v-model="configInfo.textarea"
+					></textarea>
+				</base-input>
+			</div>
 
-                <div class="d-flex justify-content-between flex-wrap">
-                  <base-button role="button" outline size="sm" type="test-online" class="mx-0"
-                    v-for="(buttons, index) in buttons" :key="index"
-                    :id="'button-' + buttons.id" :value="buttons.value"
-                    :class="buttons.id == currentSelectedButton ? 'focus' : ''"
-                    @click="timeSelection(buttons.id)"
-                  >
-                    <i v-if="buttons.id == currentSelectedButton" class="fas fa-check purple mr-1"></i>
-                    <small>{{buttons.time}}</small>
-                  </base-button>
-                </div>
+			<div class="col-12">
+				<p class="mb-0 mt-3">{{buttonAreaTitle}}</p>
 
-                <base-input
-                  v-model="value"
-                  id='time-picker'
-                  placeholder='00:00:00'
-                  :disabled="disableTimePicker"
-                  type="'tel'"
-                  v-mask="'##:##:##'"
-                  class="w-50"
-                ></base-input>
-            </div>
+				<div class="fixed-button d-flex justify-content-lg-between justify-content-center flex-wrap">
+					<base-button role="button" outline size="sm" :type="appModalBtnType" class="mx-lg-0"
+						v-for="(buttons, index) in buttons" :key="index"
+						:id="'button-' + buttons.id" :value="buttons.value"
+						:class="buttons.id == currentSelectedButton ? 'active' : ''"
+						@click="timeSelection(buttons.id)"
+					>
+						<i v-if="buttons.id == currentSelectedButton" class="fas fa-check mr-1"></i>
+						<small>{{buttons.time}}</small>
+					</base-button>
+				</div>
+			</div>
 
-            <base-button size="md" type="test-online" role="button" 
-              @click="sendConfig()"
-              class="ml-auto mr-3">{{sendButton}}</base-button>
-        </div>
-    </modal>
+			<base-button size="md" :type="appModalBtnType" role="button"
+				@click="sendConfig()"
+				class="ml-auto mr-3">{{configAppButton}}</base-button>
+		</div>
+	</modal>
 </template>
 <script>
 import swal from 'sweetalert2';
-import {mask} from 'vue-the-mask'
+import { mask } from 'vue-the-mask';
 export default {
-    directives: {mask},
-    data(){
-        return{
-            atributes:{
-                title: '',
-                textarea: '',
-                selectedTime: '',
-            },
-            currentSelectedButton: String,
-            disableTimePicker: true,    
-            value: '',
-        }
+	directives: { mask },
+	data(){
+		return{
+			configInfo:{
+				title: this.titleValue,
+				textarea: this.textAreaValue,
+				selectedTime: '',
+			},
+			currentSelectedButton: String,
+			value: '',
+		};
+	},
+	model:{
+		prop: 'show'
+	},
+	props:{
+		show: false,
+		name:{
+			type: String,
+			default: 'Nome'
+		},
+		buttons:{
+			type: Array,
+			default: () => [{ id: '1', time: '5 minutos', value:'00:05:00' }, { id: '2', time: '10 minutos', value:'00:10:00' }, { id: '3', time: '15 minutos', value:'00:15:00' },
+				{ id: '4', time: '30 minutos', value:'00:30:00' }, { id: '5', time: '45 minutos', value:'00:45:00' }, { id: '6', time: '60 minutos', value:'01:00:00' },
+				{ id: '7', time: '2 horas', value: '02:00:00' }, { id: '8', time: '8 horas', value: '08:00:00' }],
+			description: 'Botoes de tempo'
+		},
+		appModalBtnType:{
+			type: String,
+			default: 'primary'
+		},
+		title:{
+			type: String,
+			default: 'Configurações Gerais',
+			description: 'Titulo do Modal'
+		},
+		textAreaTitle:{
+			type: String,
+			default: 'Descrição',
+			description: 'Titulo da text area'
+		},
+		buttonAreaTitle:{
+			type: String,
+			default: 'Tempo Limite',
+			description: 'Titulo da area de botões'
+		},
+		configAppButton:{
+			type: String,
+			default: 'Salvar',
+			description: 'Botão de envio'
     },
-    model:{
-        prop: 'show'
-    },
-    props:{
-        show: false,
-        name:{
-            type: String,
-            default: 'Nome'
-        },
-        buttons:{
-            type: Array,
-            default: () => [{id: '1', time: '5 minutos', value:'00:05:00'}, {id: '2', time: '10 minutos', value:'00:10:00'}, {id: '3', time: '15 minutos', value:'00:15:00'}, 
-            {id: '4', time: '30 minutos', value:'00:30:00'},{id: '5', time: '45 minutos', value:'00:45:00'}, {id: '6', time: '60 minutos', value:'01:00:00'}, 
-            {id: '7', time: '2 horas', value: '02:00:00'}, {id: 'custom', time: 'Personalizado', value: ''}],
-            description: 'Botoes de tempo'
-        },
-        title:{
-            type: String,
-            default: 'Geral',
-            description: 'Titulo do Modal'
-        },
-        textAreaTitle:{
-            type: String,
-            default: 'Descrição',
-            description: 'Titulo da text area'
-        },
-        buttonAreaTitle:{
-            type: String,
-            default: 'Tempo Limite',
-            description: 'Titulo da area de botões'
-        },
-        sendButton:{
-            type: String,
-            default: 'Salvar',
-            description: 'Botão de envio'
-        }
-    },
-    watch:{
-        value(oldVal, newVal){
-            this.selectCustomTime();
-        }
-    },
-    computed:{
-        openModal:{
-            get(){return this.show},
-            set(show){this.$emit('input', show)}
-        }
-    },
-    methods:{
-        timeSelection(buttonId){
-            let btn = document.getElementById('button-' + buttonId);
-            let timePicker = document.getElementById('time-picker');
-            if(buttonId != 'custom'){
-                this.atributes.selectedTime=btn.value;
-                this.currentSelectedButton=buttonId
-                this.disableTimePicker = true;
-            }
-            else{
-                this.disableTimePicker = false;
-                this.currentSelectedButton = 'custom'
-            }
-        },
-        selectCustomTime(){
-            let button = document.getElementById('button-custom');
+		titleValue: {
+		type: String,
+		default: ''
+		},
+		textAreaValue: {
+		type: String,
+		default: ''
+		},
+		time: {
+		type: String,
+		default: ''
+		},
+  },
+	mounted() {
+		this.loadTime();
+	},
+	computed:{
+		openModal:{
+			get(){return this.show;},
+			set(show){this.$emit('input', show);}
+		}
+	},
+	methods:{
+		loadTime() {
+			const time = this.buttons.find(e => e.value == this.time);
+			if(time != null){
+				this.currentSelectedButton = time.id
+				this.configInfo.selectedTime = this.time
+			}
+		},
+		timeSelection(buttonId){
+			let btn = document.getElementById('button-' + buttonId);
+			this.configInfo.selectedTime=btn.value;
+			this.currentSelectedButton=buttonId;
+		},
+		sendConfig(){
 
-            button.value = this.value;
-            this.atributes.selectedTime = this.value;
-        },
-
-        sendConfig(){
-            if(this.atributes.title == '' || this.atributes.textarea == '' || 
-            this.atributes.selectedTime == '' || this.atributes.selectedTime.length != 8){
-                swal.fire({
-                    title: `Aviso`,
-                    html: `Por favor, preencha todos os campos corretamente para continuar.`,
-                    buttonsStyling: false,
-                    confirmButtonClass: 'btn btn-primary btn-fill',
-                });
-            }
-            else{
-                this.$emit('send-atributes', this.atributes)
-                swal.fire({
-                    title: `Parabéns`,
-                    html: `Configurações salvas com sucesso.`,
-                    buttonsStyling: false,
-                    confirmButtonClass: 'btn btn-primary btn-fill',
-                });
-                this.openModal=false;
-            }
-        },
-    },
-}
+			if(this.configInfo.title == '' || this.configInfo.textarea == '' ||
+            this.configInfo.selectedTime == '' || this.configInfo.selectedTime.length != 8){
+				swal.fire({
+					title: 'Aviso',
+					html: 'Por favor, preencha todos os campos corretamente para continuar.',
+					buttonsStyling: false,
+					confirmButtonClass: 'btn btn-primary btn-fill',
+				});
+			}
+			else{
+				this.$emit('send-config-info', this.configInfo);
+				this.openModal=false;
+			}
+		},
+	},
+};
 </script>
 <style lang="scss">
 @import "node_modules/@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss";
-</style>
+@import "@burh/nuxt-core/assets/sass/argon.scss";
+.fixed-button{
+    .btn{
+		font-size: 0.775rem;
+		@media screen and (max-width: 992px){
+			&:last-child{
+			margin-right: 1rem !important;
+		}
+		}
+        width: 10rem;
+    }
+}
+</style>

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

@@ -0,0 +1,170 @@
+<template>
+<modal :show="isModalOpen" v-on:close="closeModal" size='xl' class="modal">
+    <template slot="header">
+		<h2 class="display-4 px-4">Insira os e-mail que deseja enviar o teste</h2>
+	</template>
+    <div class="row px-4">
+        <div class="col-3">
+            <label for="name">Nome(opcional)</label>
+		</div>
+        <div class="col-3">
+            <label for="email">E-mail</label>
+		</div>
+        <div class="col-3">
+            <label for="teste">Selecione a vaga</label>
+		</div>
+        <div class="col-3">
+            <label for="teste">Selecione o teste</label>
+		</div>
+    </div>
+    <div class="row px-4"
+        v-for="(slot, idx) in slots"
+        :key="idx"
+    >
+        <div class="col-3">
+            <base-input v-model="slot.name"/>
+        </div>
+        <div class="col-3">
+            <base-input v-model="slot.email"/>
+        </div>
+        <div class="col-3">
+            <el-select
+                placeholder="Escolha a vaga"
+                v-model="slot.jobid">
+                <el-option v-for="job in allJobs"
+                    class="select-danger"
+                    :value="job.id"
+                    :label="job.name"
+                    :key="job.id">
+                </el-option>
+            </el-select>
+        </div>
+        <div class="col-2">
+            <el-select
+                placeholder="Escolha o teste"
+                v-model="slot.testid">
+                <el-option v-for="test in allTests"
+                    class="select-danger"
+                    :value="test.id"
+                    :label="test.name"
+                    :key="test.id">
+                </el-option>
+            </el-select>
+        </div>
+        <div class="col-1">
+            <i v-if="idx !== (slots.length - 1)" class="fa fa-trash pointer" @click="removeSlot(slot.id)"></i>
+            <i v-else class="fa fa-plus pointer" @click="addSlot"></i>
+        </div>
+    </div>
+    <div class="row">
+        <base-button class="mx-auto" type="primary" @click="sendTest">Enviar teste</base-button>
+    </div>
+</modal>
+</template>
+
+<script>
+import { Select, Option } from "element-ui";
+
+export default {
+    name: 'send-test',
+    components: {
+        [Select.name]: Select,
+        [Option.name]: Option,
+    },
+	props: {
+        allTests: Array,
+        allJobs: Array,
+        isModalOpen: {
+            type: Boolean,
+            default: false,
+        },
+        selectedTest: Number,
+    },
+    methods: {
+        closeModal(e) {
+            this.$emit('closemodal', e);
+        },
+        removeSlot(id) {
+            this.slots = this.slots.filter(slot => slot.id !== (id) );
+        },
+        addSlot() {
+            const newSlot = {
+                    id: new Date().getTime(),
+                    name: '',
+                    email: '',
+                    selected: 8
+                };
+
+            this.slots = [...this.slots, newSlot];
+        },
+        sendTest() {
+            const testRequest = this.slots;
+            this.$emit('send-test', testRequest);
+        }
+    },
+    watch: {
+        selectedTest(newValue) {
+            this.slots = this.slots.map(slot => ({...slot, testid: newValue}));
+        }
+    },
+	data() {
+		return {
+            slots: [
+                {
+                    id: 'first',
+                    name: '',
+                    email: '',
+                    testid: this.selectedTest,
+                    jobid: null,
+                },
+                {
+                    id: 'second',
+                    name: '',
+                    email: '',
+                    testid: this.selectedTest,
+                    jobid: null,
+                },
+                {
+                    id: 'third',
+                    name: '',
+                    email: '',
+                    testid: this.selectedTest,
+                    jobid: null,
+                },
+                {
+                    id: 'fourth',
+                    name: '',
+                    email: '',
+                    testid: this.selectedTest,
+                    jobid: null,
+                },
+                {
+                    id: 'fifth',
+                    name: '',
+                    email: '',
+                    testid: this.selectedTest,
+                    jobid: null,
+                }
+            ]
+        }
+	},
+};
+</script>
+<style lang="scss" scoped>
+    .send-test-modal {
+        position: fixed;
+        overflow-y: scroll;
+        overflow-x: hidden;
+        width: 60%;
+        height: 50%;
+        background-color: #ffffff;
+        z-index: 999 !important;
+        top: 20% !important;
+        left: 20% !important;
+        box-sizing: border-box;
+    }
+
+    .pointer {
+        cursor: pointer;
+    }
+</style>

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

@@ -1,13 +1,16 @@
 <template>
 	<div>
-		<modal :show.sync="show" class="modal">
+		<modal :show.sync="show" class="modal modal-video">
 			<template slot="header">
 				<h5 class="modal-title">{{title}}</h5>
 			</template>
 			<hr class="mb-0 mt-4">
 			<div class="footer text-center">
-				<iframe width="320" height="240" :src=link frameborder="0" allowfullscreen class="rounded video--faq">
+				<iframe width="810" height="540" :src=link frameborder="0" allowfullscreen class="rounded video--faq">
 				</iframe>
+				<div class="bottom-button" v-if="button">
+					<button @click="$emit('clickVideo')" class="btn btn-success">{{button.text}}</button>
+				</div>
 			</div>
 		</modal>
 	</div>
@@ -19,7 +22,8 @@ export default {
 	props: {
 		show: Boolean,
 		link: String,
-		title: String
+		title: String,
+		button: Object
 	},
 	data() {
 		return {
@@ -29,7 +33,7 @@ export default {
 		};
 	},
 	mounted(){
-		
+
 	},
 };
 </script>
@@ -49,4 +53,10 @@ export default {
 	.modal-body{
 		padding: 0;
 	}
-</style>
+
+    .modal-video {
+		.modal-dialog{
+			min-width: 60rem;
+		}
+    }
+</style>

package/components/burh-ds/Navbar/BaseNav.vue

@@ -6,7 +6,7 @@
       <div class="d-flex">
         <slot name="toggle-button">
           <button
-            class="navbar-toggler collapsed"
+            class="navbar-toggler collapsed d-sm-none"
             v-if="hasMenu"
             type="button"
             @click="toggleBodyClass('no-scroll')"
@@ -18,7 +18,7 @@
           </button>
         </slot>
         <div
-          class="navbar-collapse navbar-custom-collapse collapse show"
+          class="navbar-collapse navbar-custom-collapse collapse show d-sm-none"
           :class="menuClasses"
           v-show="show"
           v-click-outside="closeMenu">