@burh/nuxt-core 1.0.22 → 1.0.24

package/components/burh-ds/Pagination/NamedPagination.vue

@@ -0,0 +1,171 @@
+<template>
+	<ul class="pagination row" :class="[size && `pagination-${size}`, align && `justify-content-${align}`]">
+        <li class="page-item prev-page" :class="{disabled: value === 1}" v-if="pagesName.length > 5">
+            <a class="page-link" aria-label="Previous" @click="prevPage">
+                <span aria-hidden="true"><i class="fa fa-angle-left" aria-hidden="true"></i></span>
+            </a>
+        </li>
+        <teste-tab
+            :key="item"
+            v-for="item in range(minPage, maxPage)"
+            @tab-click="changePage(item)"
+            :title="pagesName[item - 1]"
+            :active="value === item"
+        />
+        <slot />
+        <li class="page-item next-page" :class="{disabled: value === totalPages}" v-if="pagesName.length > 5">
+            <a class="page-link" aria-label="Next" @click="nextPage">
+                <span aria-hidden="true"><i class="fa fa-angle-right" aria-hidden="true"></i></span>
+            </a>
+        </li>
+        <!-- <li class="btn mx-1" :class="vvalue === item ? 'btn-primary' : 'btn-outline-primary'"
+			:key="item"
+			v-for="item in range(1, pagesName.length)"> -->
+			<!-- <a
+				@click="changePage(item)">{{pagesName[item - 1]}}
+            </a> -->
+		<!-- </li> -->
+	</ul>
+</template>
+<script>
+import TesteTab from '../Tabs/TesteTab';
+export default {
+	name: 'base-pagination',
+    components: {
+        TesteTab,
+    },
+	props: {
+		pagesName: {
+			type: Array,
+			default: () => ['page 1', 'page 2', 'page 3', 'page 4', 'page 5', 'page 6', 'page 7', 'page 8', 'page 9', 'page 10']
+		},
+		pageCount: {
+			type: Number,
+			default: 10,
+			description:
+        'Pagination page count. This should be specified in combination with perPage'
+		},
+		perPage: {
+			type: Number,
+			default: 10,
+			description:
+        'Pagination per page. Should be specified with total or pageCount'
+		},
+		total: {
+			type: Number,
+			default: 0,
+			description:
+        'Can be specified instead of pageCount. The page count in this case will be total/perPage'
+		},
+		value: {
+			type: Number,
+			default: 1,
+			description: 'Pagination value'
+		},
+		size: {
+			type: String,
+			default: '',
+			description: 'Pagination size'
+		},
+		align: {
+			type: String,
+			default: '',
+			description: 'Pagination alignment (e.g center|start|end)'
+		}
+	},
+	computed: {
+		totalPages() {
+			if (this.pageCount > 0) return this.pageCount;
+			if (this.total > 0) {
+				return Math.ceil(this.total / this.perPage);
+			}
+			return 1;
+		},
+		pagesToDisplay() {
+			if (this.totalPages > 0 && this.totalPages < this.defaultPagesToDisplay) {
+				return this.totalPages;
+			}
+			return this.defaultPagesToDisplay;
+		},
+	},
+	data() {
+		return {
+            defaultPagesToDisplay: 1,
+            minPage: 1,
+            maxPage: this.pagesName.length >= 5 ? 5 : this.pagesName.length,
+		};
+	},
+	methods: {
+		range(min, max) {
+			let arr = [];
+			for (let i = min; i <= max; i++) {
+				arr.push(i);
+			}
+			return arr;
+		},
+		changePage(item) {
+			this.$emit('input', item);
+		},
+		nextPage() {
+			if (this.value < this.totalPages) {
+				this.$emit('input', this.value + 1);
+			}
+		},
+		prevPage() {
+			if (this.value > 1) {
+				this.$emit('input', this.value - 1);
+			}
+		}
+	},
+	watch: {
+		perPage() {
+			this.$emit('input', 1);
+		},
+		total() {
+			this.$emit('input', 1);
+        },
+        value(newValue, oldValue) {
+            const pagesToDisplay = this.pagesName.length >= 5 ? 5 : this.pagesName.length;
+            if(newValue < 5) {
+                this.minPage = 1;
+                this.maxPage = pagesToDisplay;
+            }
+            else {
+                if(newValue < this.minPage) {
+                    this.minPage = newValue;
+                    this.maxPage = this.minPage + 4;
+                }
+                if(newValue > this.maxPage) {
+                    this.maxPage = newValue;
+                    this.minPage = this.maxPage - 4;
+                }
+            }
+        }
+	}
+};
+</script>
+<style lang="scss" scoped>
+
+.page-item, .page-link {
+    display: flex;
+    width: auto !important;
+    border-radius: 10rem !important;
+
+    width: fit-content;
+}
+
+.page-item {
+    padding: 0 !important;
+}
+
+.page-link {
+    padding: 0 1rem !important;
+}
+
+
+.teste {
+    .page-link:hover {
+        color: #fff;
+    }
+}
+</style>

package/components/burh-ds/Questions/Question.vue

@@ -1,23 +1,25 @@
 <template>
-    <div class="card card--shadow">
+    <div class="card position-relative">
         <div class="row px-4 justify-content-start">
-            <base-input 
-                name="Question"
-                :label="`Pergunta #${position + 1}`" 
-                placeholder="Escreva uma pergunta" 
-                type="text" 
-                class="col-8" 
-                :error="getError('Question')" 
-                :valid="isValid('Question')" 
-                v-model="question.question"
-                v-validate="'required'"/>
+            <validation-provider tag="div" class="col-8" :vid="`question-${stepIndex}-${position}`" 
+              name="Pergunta" rules="required" v-slot="{ errors }">
+                <base-input 
+                    :label="`Pergunta #${position + 1}`" 
+                    placeholder="Escreva uma pergunta" 
+                    type="text" 
+                    :error="errors[0]" 
+                    :valid="errors.length ? true : false"
+                    :value="question.question" 
+                    v-on:input="setQuestion('question', $event)"
+                />
+            </validation-provider>
 
             <div class="col-4">
                 <label class="form-control-label d-block pt-1">
                     Escolha o tipo da pergunta
                 </label>
                 <el-select class="select-danger w-100"
-                        placeholder="Single Select"
+                        placeholder="Escolha o tipo da pergunta"
                         v-model="question.question_type">
                     <el-option v-for="option in listComponentes"
                         class="select-danger"
@@ -29,12 +31,27 @@
             </div>
 
             <div class="col-8 form-group">
-                <component 
-                    :is="question.question_type" 
-                    v-on:data-changed="createDataQuestion"
-                />
-                <slot/>
+                <paragraph
+                    v-if="question.question_type == 'paragraph'" 
+                    :data="question.max_char ? question.max_char : undefined"
+                    v-on:data-changed="mergeDataQuestion"/>
+                <question-radio 
+                    v-if="question.question_type == 'multiple'"
+                    :data="question.multiples"
+                    v-on:data-changed="mergeDataQuestion"/>
+                <question-attach 
+                    v-if="question.question_type == 'annex'"
+                    :data="question"
+                    v-on:data-changed="mergeDataQuestion"/>
             </div>
+
+            <ul class="question-icons">
+                <li v-for="(icon, index) in icons" 
+                  :key="`question-icon-${position}-${index}`"
+                  @click="$emit(icon.event)">
+                    <font-awesome-icon :icon="icon.icon" class="" />
+                </li>
+            </ul>
         </div>
     </div>
 </template>
@@ -54,57 +71,76 @@ export default {
         QuestionAttach
     },
     props: {
-        position: Number,
+        stepIndex: {
+            type: Number,
+            default: 0
+        },
+        position: {
+            type: Number,
+            default: 0
+        },
+        data: null,
+        icons: {
+            type: Array,
+            default: () => [
+                { event: 'first-icon-click', icon: ['far', 'copy'] },
+                { event: 'second-icon-click', icon: ['fas', 'trash-alt'] }
+            ]
+        },
+        listComponentes: {
+            type: Array,
+            default: () => [
+                { value: 'paragraph', label: 'Paragrafo' },
+                { value: 'multiple', label: 'Alternativa' },
+                { value: 'annex', label: 'Anexo' }
+            ]
+        },
     },
     data() {
         return {
-            console:console,
-            listComponentes: [
-                {
-                    value: 'paragraph',
-                    label: 'Paragrafo'
-                },
-                {
-                    value: 'question-radio',
-                    label: 'Dissertativa'
-                },
-                {
-                    value: 'question-attach',
-                    label: 'Anexo'
-                }
-            ],
-            question: {
-                question_type: 'paragraph',
-                question: '',
-            }
+            console: console,
+            question: this.data,
         }
     },
     watch: {
-        question: {
-            handler: 'emitQuestion',
-            deep: true
-        },
+        data(newValue) {
+            this.question = newValue;
+        }
     },
     methods: {
         emitQuestion() {
             this.$emit('change-question', this.question)
         },
-        isChangeTypeQuestion(value) {
-            return this.listComponentes.includes(value);
+        setQuestion(type, data) {
+            this.question[type] = data
+            this.emitQuestion();
         },
-        createDataQuestion(data) {
+        mergeDataQuestion(data) {
             this.question = { ...this.question , ...data }
+            this.emitQuestion();
         },
-        getError(name){
-            return this.errors.first(name);
-        },
-        isValid(name) {
-            return this.validated && !this.errors.has(name);
+        isChangeTypeQuestion(value) {
+            return this.listComponentes.includes(value);
         },
     }
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
+.question-icons {
+    position: absolute;
+    bottom: 0;
+    right: 1rem;
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-end;
+    list-style: none;
 
+    li {
+        padding-top: 1rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+        cursor: pointer;
+    }
+}
 </style>

package/components/burh-ds/Questions/QuestionAttach.vue

@@ -1,5 +1,5 @@
 <template>
-    <p class="text-lead">Será solicitado um anexo de acordo com a sua pergunta.</p>
+    <p class="text-lead form-group">Será solicitado um anexo de acordo com a sua pergunta.</p>
 </template>
 
 <script>

package/components/burh-ds/Questions/QuestionRadio.vue

@@ -1,18 +1,21 @@
 <template>
-    <div>
-        <el-radio-group v-model="selected" v-for="(answer, index) in answers" :key="index">
-            <question-radio-item 
-                v-on:change-answer="setAnswers($event, answer)"
-            ></question-radio-item>
-        </el-radio-group>
-        <base-button size="sm" type="primary" @click="addOption">Adicionar</base-button>
-        <base-button outline size="sm" type="primary" @click="removeLastOption">Remover</base-button>
-    </div>
+  <div>
+    <el-radio-group v-model="selected">
+      <question-radio-item
+        v-for="(answer, index) in answers" :key="index"
+        :response="answer.name" 
+        v-on:change-answer="setAnswers($event, answer)"
+      ></question-radio-item>
+    </el-radio-group>
+    <base-button size="sm" type="link" class="mr-0" @click="addOption">Adicionar opção</base-button>
+    <base-button size="sm" type="link" @click="removeLastOption">Remover opção</base-button>
+  </div>
 </template>
 
 <script>
 import {Radio, RadioGroup} from 'element-ui'
 import QuestionRadioItem from '@burh/nuxt-core/components/burh-ds/Questions/QuestionRadioItem.vue';
+import Swal from 'sweetalert2';
 
 export default {
     name: 'question-radio',
@@ -22,15 +25,15 @@ export default {
         QuestionRadioItem
     },
     props: {
-        dataAnswers: {
-            type: Array,
-            default: () => [{}, {}]
-        }
+        data: {
+        type: Array,
+        default: () => [{}, {}]
+        },
     },
     data() {
         return {
             selected: null,
-            answers: this.dataAnswers,
+            answers: this.data,
             minRadios: 2,
         }
     },
@@ -40,52 +43,53 @@ export default {
         },
         removeLastOption() {
             if(this.answers.length <= this.minRadios) {
-                return;
+                return Swal.fire({
+                title: 'Oops...',
+                text: 'Questões do tipo alternativa deverão conter no mínimo 2 respostas!',
+                type: 'warning',
+                buttonsStyling: false,
+                confirmButtonText: 'Okay!',
+                confirmButtonClass: 'btn btn-primary btn-fill',
+                })
             } 
             this.answers.splice(this.answers.length - 1, 1);
         },
-        setAnswers(value, answer) {
-            answer['response'] = value;
-            this.emitAnswersRadio();
+        setAnswers({id, value}, answer) {
+            answer.name = value;
+            answer.id = id;
+
+            if(this.selected == null && answer.correct != false) { // be carefully here
+                this.selected = answer.id
+            }
+
+            this.emitRadioList();
         },
-        makeStructureListRadio() {
+        makeRadiolist() {
             const listRadio = this.answers.map(radio => {
-                if ( radio.response == this.selected ) {
-                    return {
-                        name: radio.response,
-                        correct: true,
-                    }
-                }
 
                 return {
-                    name: radio.response,
-                    correct: false,
+                    id: radio.id,
+                    name: radio.name,
+                    correct: radio.id === this.selected ? true : false
                 }
             })
-
             return listRadio
         },
-        emitAnswersRadio() {
+        emitRadioList() {
             const payload = {
                 response: this.selected,
-                multiples: this.makeStructureListRadio()
+                multiples: this.makeRadiolist()
             }
             this.$emit('data-changed', payload)
         },
     },
-    computed: {
-        getAnswers() {
-            return this.answers;
-        }
-    },
     watch: {
-        getAnswers: {
-            handler: 'emitAnswersRadio',
-            deep: true
+        data(newValue) {
+            this.answers = newValue.map(e => { return { ...e }}); //prevent cloning references
         },
         selected() {
-            this.emitAnswersRadio();
-        }
+            this.emitRadioList();
+        },
     },
 }
 </script>

package/components/burh-ds/Questions/QuestionRadioItem.vue

@@ -1,21 +1,22 @@
 <template>
-    <div>
+    <validation-provider tag="div" class="" :vid="`radio-${id}`"
+        name="Resposta" rules="required" v-slot="{ errors }">
         <el-radio 
-          :label="value" 
-          class="form-radio" 
-          :class="{'form-radio--error': getError('Response')}">
-            <base-input 
-                name="Response" 
-                class="" 
-                type="text" 
-                placeholder="Coloque uma resposta aqui" 
-                v-model="value"
-                v-on:input="$emit('change-answer', value)" 
-                :error="getError('Response')" 
-                :valid="isValid('Response')" 
-                v-validate="'required'"/>
+            :label="id" 
+            class="form-radio" 
+            :class="{'form-radio--error': errors[0]}">
+                <base-input 
+                    name="Response" 
+                    class="" 
+                    type="text" 
+                    placeholder="Coloque uma resposta aqui" 
+                    v-model="value"
+                    :error="errors[0]"
+                    :valid="errors.length ? true : false"
+                    v-on:input="$emit('change-answer', {id, value})">
+                </base-input>
         </el-radio>
-    </div>
+    </validation-provider>
 </template>
 
 <script>
@@ -27,19 +28,24 @@ export default {
         [Radio.name]: Radio,
     },
     props: {
+        response: {
+            type: String,
+            default: ''
+        }
+    },
+    created() {
+        this.$emit('change-answer', {id: this.id, value: this.value});
     },
     data() {
         return {
-            value: '',
+            id: this.$uuid.v4(),
+            value: this.response,
         }
     },
-    methods: {
-        getError(name){
-            return this.errors.first(name);
-        },
-        isValid(name) {
-            return this.validated && !this.errors.has(name);
-        },
+    watch: {
+        response(newValue) {
+            this.value = this.response
+        }
     }
 }
 </script>

package/components/burh-ds/Questions/QuestionText.vue

@@ -1,33 +1,64 @@
 <template>
-    <base-input 
-        name="maxCharacters"
-        type="Number" 
-        label="Quantidade maxima de caracteres da resposta" 
-        v-model="value"
-        v-on:change="$emit('data-changed', { max_char: value })"
-        :error="getError('maxCharacters')" 
-        :valid="isValid('maxCharacters')"
-        v-validate="'required|between:30,4096'">
-    </base-input>
+  <div>
+    <label class="form-control-label d-block pt-1">
+        Tamanho da resposta
+    </label>
+    <el-select class="select-danger w-100"
+        v-on:change="$emit('data-changed', { max_char: $event })"
+        placeholder="Selecione o tamanho da resposta"
+        v-model="selected">
+      <el-option v-for="option in list"
+        class="select-danger"
+        :value="option.value"
+        :label="option.label"
+        :key="option.label">
+      </el-option>
+    </el-select>
+  </div>
 </template>
 
 <script>
+import {Select, Option} from 'element-ui'
 
 export default {
-    name: 'question-text',
-    data() {
-        return {
-            value: 240
-        }
+  name: 'question-text',
+  components: {
+    [Select.name]: Select,
+    [Option.name]: Option,
+  },
+  props: {
+    data: {
+      type: Number | String,
+      default: 246
     },
-    methods: {
-        getError(name){
-            return this.errors.first(name);
-        },
-        isValid(name) {
-            return this.validated && !this.errors.has(name);
-        },
+    list: {
+      type: Array,
+      default: () => [
+        { value: 246, label: 'Resposta Curta' },
+        { value: 512, label: 'Resposta Média' },
+        { value: 1024, label: 'Resposta Longa' },
+      ]
     }
+  },
+  data() {
+    return {
+      selected: this.getItemMoreClosest(this.data),
+    }
+  },
+  methods: {
+    getItemMoreClosest(goal) {
+      const values = this.list.map(e => e.value) 
+      const closest = values.reduce((prev, curr) => {
+        return (Math.abs(curr - goal) < Math.abs(prev - goal) ? curr : prev);
+      });
+      return closest
+    }
+  },
+  watch: {
+    data(value) {
+      this.selected = this.getItemMoreClosest(value);
+    }
+  }
 }
 </script>