@burh/nuxt-core 1.0.21 → 1.0.23

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

@@ -0,0 +1,179 @@
+<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;
+		},
+		minPage() {
+			if (this.value >= 5) {
+                const pagesToAdd = Math.floor(5 / 2);
+                const newMaxPage = pagesToAdd + this.value;
+                if (newMaxPage > this.pagesName.length) {
+                   return this.pagesName.length - 5 + 1;
+                }
+                return this.value - pagesToAdd;
+            } else {
+                return 1;
+            }
+		},
+		maxPage() {
+            const pagesToDisplay = this.pagesName.length === 5 ? 5 : (this.pagesName.length);
+            if (this.value >= pagesToDisplay) {
+                const pagesToAdd = Math.floor(pagesToDisplay / 2);
+                const newMaxPage = pagesToAdd + this.value;
+                if (newMaxPage < this.pagesName.length) {
+                    return newMaxPage;
+                } else {
+                return this.pagesName.length;
+                }
+            } else {
+                return pagesToDisplay;
+            }
+		}
+	},
+	data() {
+		return {
+			defaultPagesToDisplay: 1
+		};
+	},
+	methods: {
+		range(min, max) {
+			let arr = [];
+			for (let i = min; i <= max; i++) {
+				arr.push(i);
+			}
+			return arr;
+		},
+		changePage(item) {
+            console.log(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);
+		}
+	}
+};
+</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,5 +1,5 @@
 <template>
-    <div class="card card--shadow">
+    <div class="card position-relative">
         <div class="row px-4 justify-content-start">
             <base-input 
                 name="Question"
@@ -8,8 +8,9 @@
                 type="text" 
                 class="col-8" 
                 :error="getError('Question')" 
-                :valid="isValid('Question')" 
-                v-model="question.question"
+                :valid="isValid('Question')"
+                :value="question.question" 
+                v-on:input="setQuestion('question', $event)"
                 v-validate="'required'"/>
 
             <div class="col-4">
@@ -17,7 +18,7 @@
                     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 +30,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 == 'question-attach'"
+                    :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>
@@ -55,45 +71,54 @@ export default {
     },
     props: {
         position: Number,
+        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: 'question-attach', 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,
         }
     },
+    mounted() {
+      this.$validator.attach({ name: "Question", rules: "required" });
+      this.$nextTick(() => {
+        this.$validator.attach({ name: "Question", rules: "required" });
+      })
+    },
     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();
+        },
+        isChangeTypeQuestion(value) {
+            return this.listComponentes.includes(value);
         },
         getError(name){
             return this.errors.first(name);
@@ -105,6 +130,21 @@ export default {
 }
 </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,92 +1,98 @@
 <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" v-for="(answer, index) in answers" :key="index">
+      <question-radio-item
+        :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',
-    components: {
-        [Radio.name]: Radio,
-        [RadioGroup.name]: RadioGroup,
-        QuestionRadioItem
+  name: 'question-radio',
+  components: {
+    [Radio.name]: Radio,
+    [RadioGroup.name]: RadioGroup,
+    QuestionRadioItem
+  },
+  props: {
+    data: {
+      type: Array,
+      default: () => [{}, {}]
     },
-    props: {
-        dataAnswers: {
-            type: Array,
-            default: () => [{}, {}]
-        }
+  },
+  data() {
+    return {
+      selected: null,
+      answers: this.data,
+      minRadios: 2,
+    }
+  },
+  created() {
+      this.loadAnswer();
+  },
+  methods: {
+    addOption() {
+      this.answers.push({});
+    },
+    removeLastOption() {
+      if(this.answers.length <= this.minRadios) {
+        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);
+    },
+    loadAnswer() {
+      const answerSelected = this.answers.find(ans => ans.correct);
+      this.selected = answerSelected ? answerSelected.name : null;
+    },
+    setAnswers(value, answer) {
+      answer.name = value;
+      if (answer.correct) {
+        this.selected = value
+      }
+      this.emitRadioList();
     },
-    data() {
+    makeRadiolist() {
+      const listRadio = this.answers.map(radio => {
         return {
-            selected: null,
-            answers: this.dataAnswers,
-            minRadios: 2,
+          name: radio.name,
+          correct: radio.name === this.selected ? true : false
         }
+      })
+      return listRadio
     },
-    methods: {
-        addOption() {
-            this.answers.push({});
-        },
-        removeLastOption() {
-            if(this.answers.length <= this.minRadios) {
-                return;
-            } 
-            this.answers.splice(this.answers.length - 1, 1);
-        },
-        setAnswers(value, answer) {
-            answer['response'] = value;
-            this.emitAnswersRadio();
-        },
-        makeStructureListRadio() {
-            const listRadio = this.answers.map(radio => {
-                if ( radio.response == this.selected ) {
-                    return {
-                        name: radio.response,
-                        correct: true,
-                    }
-                }
-
-                return {
-                    name: radio.response,
-                    correct: false,
-                }
-            })
-
-            return listRadio
-        },
-        emitAnswersRadio() {
-            const payload = {
-                response: this.selected,
-                multiples: this.makeStructureListRadio()
-            }
-            this.$emit('data-changed', payload)
-        },
+    emitRadioList() {
+      const payload = {
+        response: this.selected,
+        multiples: this.makeRadiolist()
+      }
+      this.$emit('data-changed', payload)
     },
-    computed: {
-        getAnswers() {
-            return this.answers;
-        }
+  },
+  watch: {
+    data(newValue) {
+      this.answers = newValue.map(e => { return { ...e }}); //prevent cloning references
+      this.loadAnswer();
     },
-    watch: {
-        getAnswers: {
-            handler: 'emitAnswersRadio',
-            deep: true
-        },
-        selected() {
-            this.emitAnswersRadio();
-        }
+    selected() {
+      this.emitRadioList();
     },
+  },
 }
 </script>
 

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

@@ -1,21 +1,19 @@
 <template>
-    <div>
-        <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'"/>
-        </el-radio>
-    </div>
+    <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'"/>
+    </el-radio>
 </template>
 
 <script>
@@ -27,10 +25,14 @@ export default {
         [Radio.name]: Radio,
     },
     props: {
+        response: {
+            type: String,
+            default: ''
+        }
     },
     data() {
         return {
-            value: '',
+            value: this.response,
         }
     },
     methods: {
@@ -40,6 +42,11 @@ export default {
         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>