@nixweb/nixloc-ui 0.0.124 → 0.0.127

package/src/component/forms/ImageUpload.vue

@@ -0,0 +1,222 @@
+<template>
+  <div>
+    <b-row v-show="loadingAdd || loadingRemove">
+      <b-col sm="2">
+        <vue-loading
+          v-if="true"
+          type="bubbles"
+          color="#D98621"
+          :size="{ width: '50px', height: '50px' }"
+        ></vue-loading>
+      </b-col>
+    </b-row>
+    <b-row v-show="!loadingAdd && !loadingRemove">
+      <b-col sm="12">
+        <div class="div-preview">
+          <img
+            :style="'width:120;height:100px'"
+            :src="'https://espaco.blob.core.windows.net/nixloc-photo-product/' + urlImage"
+          />
+        </div>
+        <div>
+          <div v-if="!value">
+            <div class="div-button">
+              <button class="button small primary" @click="show = !show">
+                <span v-if="!loadingAdd">
+                  <span><i class="fas fa-camera"></i> Carregar Foto</span>
+                </span>
+              </button>
+            </div>
+          </div>
+          <div v-else>
+            <div class="div-button">
+              <button class="button small danger" v-if="!loadingAdd" @click="remove()">
+                <span v-if="!loadingRemove"><i class="fas fa-camera"></i> Remover Foto</span>
+                <vue-loading
+                  v-if="loadingRemove"
+                  type="bubbles"
+                  color="#fff"
+                  :size="{ width: '20px', height: '20px' }"
+                ></vue-loading>
+              </button>
+            </div>
+          </div>
+        </div>
+      </b-col>
+    </b-row>
+    <my-upload
+      field="img"
+      @crop-success="cropSuccess"
+      langType="pt-br"
+      v-model="show"
+      :width="120"
+      :height="100"
+      :noCircle="true"
+      img-format="png"
+    ></my-upload>
+  </div>
+</template>
+<script>
+import myUpload from "vue-image-crop-upload/upload-2.vue";
+
+import { mapActions } from "vuex";
+
+export default {
+  name: "ImageUpload",
+  components: {
+    "my-upload": myUpload,
+  },
+  props: {
+    title: String,
+    container: String,
+    accepted: String,
+    urlPost: String,
+    urlRemove: String,
+    onLoad: Function,
+    value: String,
+  },
+  data() {
+    return {
+      file: "",
+      imgBase64: "",
+      show: false,
+      loadingAdd: false,
+      loadingRemove: false,
+      urlAzure: "https://espaco.blob.core.windows.net",
+    };
+  },
+  computed: {
+    urlImage() {
+      if (this.value) return this.value;
+      return "noImage.jpg";
+    },
+  },
+  methods: {
+    ...mapActions("generic", ["postFileApi", "deleteFileApi"]),
+    cropSuccess(imgBase64) {
+      this.file = this.dataBase64ToFile(imgBase64, "image.png");
+      this.upload();
+    },
+    upload() {
+      let params = {
+        url: this.urlPost,
+        file: this.file,
+        container: this.container,
+        accepted: this.accepted,
+      };
+      this.loadingAdd = true;
+      this.postFileApi(params).then((response) => {
+        if (response.success) {
+          this.$emit("input", response.content);
+          if (this.onLoad) this.onLoad();
+        }
+        this.loadingAdd = false;
+      });
+    },
+    remove() {
+      let props = {
+        url: this.urlRemove,
+        container: this.container,
+        name: this.value,
+      };
+      this.loadingRemove = true;
+      let params = { url: this.urlRemove, obj: props };
+      this.deleteFileApi(params).then((response) => {
+        if (response.success) {
+          this.$emit("input", "");
+          if (this.onLoad) this.onLoad();
+        }
+        this.loadingRemove = false;
+      });
+    },
+    download() {
+      const url = `${this.urlAzure}/${this.container}/${this.value}`;
+      window.location.href = url;
+    },
+    dataBase64ToFile(dataurl, filename) {
+      var arr = dataurl.split(","),
+        mime = arr[0].match(/:(.*?);/)[1],
+        bstr = atob(arr[1]),
+        n = bstr.length,
+        u8arr = new Uint8Array(n);
+
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n);
+      }
+
+      return new File([u8arr], filename, { type: mime });
+    },
+  },
+};
+</script>
+<style scoped>
+.div-preview {
+  margin-bottom: 15px;
+  margin-left: 15px;
+}
+
+.button {
+  padding: 8px 12px;
+  cursor: pointer;
+  border: none;
+  border-radius: 40px !important;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.primary {
+  background: #577696;
+  border-color: #577696;
+  color: #fff;
+}
+
+.primary:hover {
+  background: #355472;
+}
+
+.success {
+  color: #fff;
+  background: #94aa2a;
+  border-color: #94aa2a;
+}
+
+.success:hover {
+  background: #6d7e1c;
+}
+
+.danger {
+  color: #fff;
+  border-color: #f0134d;
+  background: #f0134d;
+  margin-left: 5px;
+}
+
+.danger:hover {
+  background: #c70f40;
+}
+
+.small {
+  padding: 3px 7px;
+  font-size: 13px;
+}
+
+.file input[type="file"] {
+  font-size: 100px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+}
+
+.div-alert {
+  margin-top: 15px;
+}
+
+.div-image {
+  margin-bottom: 10px;
+}
+
+.div-button {
+  margin-left: 18px;
+}
+</style>

package/src/component/forms/InputDecimal.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="form-group">
-    <label>
+    <label v-if="title">
       <span class="title">{{ title }}</span>
       <span class="required" v-if="required">*</span>
       <Tip :field="field" :formName="formName" />
@@ -19,7 +19,7 @@
         currency="R$"
         separator="."
         v-bind:precision="2"
-        v-model="_value"
+        v-model="valueLocal"
       ></vue-numeric>
     </div>
 
@@ -59,11 +59,12 @@ export default {
       notifications: [],
       formDirty: false,
       _value: 0,
+      valueLocal: 20,
     };
   },
   created() {
     // não carregar as validações iniciais para number
-    this._value = this.value;
+    this.valueLocal = this.value;
   },
   methods: {
     ...mapMutations("validation", [
@@ -73,8 +74,8 @@ export default {
     ]),
     validate() {
       this.notifications = [];
-      if (this.value == 0) return;
-      if (this.required && !this.value) {
+      if (this.valueLocal == 0) return;
+      if (this.required && !this.valueLocal) {
         var message = `${this.title} não pode ser vazio!`;
         this.notifications.push(message);
       }
@@ -88,13 +89,13 @@ export default {
   },
   watch: {
     value() {
-      this._value = this.value;
+      this.valueLocal = this.value;
     },
-    _value() {
+    valueLocal() {
       this.validate();
       this.formDirty = true;
       this.updateFormDirty(true);
-      this.$emit("input", this._value);
+      this.$emit("input", this.valueLocal);
     },
     notifications() {
       let self = this;
@@ -117,7 +118,7 @@ export default {
     },
     resetForm: {
       handler(form) {
-        if (form.nome == this.formName) this.formDirty = false;
+        if (form.name == this.formName) this.formDirty = false;
       },
       deep: true,
     },

package/src/component/forms/InputNumber.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="form-group">
-    <label>
+    <label v-if="title">
       <span class="title">{{ title }}</span>
       <span class="required" v-if="required">*</span>
       <Tip :field="field" :formName="formName" />
@@ -14,7 +14,7 @@
       <input
         class="form-control"
         type="number"
-        v-model="_value"
+        v-model="valueLocal"
         @keyup.enter.prevent="pressedEnter"
       />
     </div>
@@ -51,6 +51,7 @@ export default {
       type: Boolean,
       default: true,
     },
+    params: Object,
     value: Number,
     changed: Function,
     enter: Function,
@@ -59,17 +60,21 @@ export default {
     return {
       notifications: [],
       formDirty: false,
-      _value: 0,
+      valueLocal: 0,
       precision: 1,
     };
   },
   created() {
     // não carregar as validações iniciais para number
-    this._value = this.value;
+    this.valueLocal = this.value;
   },
 
   methods: {
-    ...mapMutations("validation", ["addValidation", "removeValidation", "updateFormDirty"]),
+    ...mapMutations("validation", [
+      "addValidation",
+      "removeValidation",
+      "updateFormDirty",
+    ]),
     validate() {
       this.notifications = [];
       if (this.value == 0) return;
@@ -78,13 +83,13 @@ export default {
         this.notifications.push(message);
       }
 
-      if (this._value.toString().length > this.maxLength) {
+      if (this.valueLocal.toString().length > this.maxLength) {
         var message = `Valor inválido!`;
         this.notifications.push(message);
       }
     },
     pressedEnter() {
-      if (this.enter) this.enter();
+      if (this.enter) this.enter(this.params);
     },
   },
   computed: {
@@ -92,21 +97,21 @@ export default {
   },
   watch: {
     value() {
-      this._value = this.value;
+      this.valueLocal = this.value;
       if (this.changed) this.changed();
     },
-    _value() {
+    valueLocal() {
       this.validate();
 
-      let _value;
-      if (this.type === "int") _value = parseInt(this._value);
-      if (this.type === "float") _value = parseFloat(this._value);
+      let valueLocal;
+      if (this.type === "int") valueLocal = parseInt(this.valueLocal);
+      if (this.type === "float") valueLocal = parseFloat(this.valueLocal);
 
-      this.$emit("input", _value);
+      this.$emit("input", valueLocal);
       this.formDirty = true;
       if (this.markFormDirty) this.updateFormDirty(true);
 
-      this._value = _value;
+      this.valueLocal = valueLocal;
     },
     notifications() {
       let self = this;
@@ -129,7 +134,7 @@ export default {
     },
     resetForm: {
       handler(form) {
-        if (form.nome == this.formName) this.formDirty = false;
+        if (form.name == this.formName) this.formDirty = false;
       },
       deep: true,
     },

package/src/component/forms/InputPassword.vue

@@ -111,7 +111,7 @@ export default {
     },
     resetForm: {
       handler(form) {
-        if (form.nome == this.formName) this.formDirty = false;
+        if (form.name == this.formName) this.formDirty = false;
       },
       deep: true,
     },

package/src/component/forms/InputText.vue

@@ -12,7 +12,7 @@
       <slot v-else></slot>
       <input
         type="text"
-        :style="style"
+        :style="_style"
         :placeholder="placeholder"
         :disabled="disabled"
         @keyup.enter.prevent="pressedEnter"
@@ -47,7 +47,7 @@ export default {
     "disabled",
     "titleColor",
     "mask",
-    "style",
+    "_style",
     "formName",
     "required",
     "maxLength",
@@ -133,7 +133,7 @@ export default {
     },
     resetForm: {
       handler(form) {
-        if (form.nome == this.formName) this.formDirty = false;
+        if (form.name == this.formName) this.formDirty = false;
       },
       deep: true,
     },

package/src/component/forms/Modal.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
     <vodal
-      :duration="50"
+      :duration="80"
       :show="modal.open"
-      @hide="hideModal()"
+      @hide="hide()"
       :width="width"
       :height="height"
-      :closeOnEsc="fecharBotao"
-      :closeButton="fecharBotao"
+      :closeOnEsc="closeOnEsc"
+      :closeButton="closeButton"
       :closeOnClickMask="false"
     >
       <div class="d-block text-left">
@@ -41,6 +41,7 @@ export default {
       type: Boolean,
       default: true,
     },
+    onHideModal: Function,
   },
   components: { Messages, Vodal },
   computed: {
@@ -48,6 +49,10 @@ export default {
   },
   methods: {
     ...mapMutations("generic", ["hideModal"]),
+    hide() {
+      if (this.onHideModal) this.onHideModal();
+      this.hideModal();
+    },
   },
 };
 </script>

package/src/component/forms/Select.vue

@@ -78,8 +78,9 @@
 
     <vodal
       v-if="nameNewRegister"
+      :duration="50"
       :show="showVodal(nameNewRegister)"
-      @hide="hideVodal()"
+      @hide="hide()"
       :width="widthNewRegister"
       :height="heightNewRegister"
       :closeOnEsc="true"
@@ -87,7 +88,7 @@
     >
       <Messages v-if="vodal.open" />
       <div class="title-new-form">{{ titleNewRegister }}</div>
-      <hr />
+      <hr class="hr" />
       <slot></slot>
     </vodal>
   </div>
@@ -155,7 +156,7 @@ export default {
   created() {
     this.validate();
     if (this.value)
-      this.currentValue = { id: this.value.id, conteudo: this.value.content };
+      this.currentValue = { id: this.value.id, content: this.value.content };
   },
   mounted() {
     let el = this.$el.getElementsByClassName("multiselect")[0];
@@ -172,7 +173,7 @@ export default {
     ...mapActions("generic", ["getApi"]),
     ...mapMutations("generic", [
       "removeLoading",
-      "showVodal",
+      "openVodal",
       "hideVodal",
       "removeNotificarions",
       "addFilter",
@@ -199,7 +200,7 @@ export default {
       this.getAll();
     },
     label(value) {
-      if (value.conteudo) return `${value.conteudo}`;
+      if (value.content) return `${value.content}`;
     },
     getAll() {
       let obj = { ...this.baseParams, ...this.propsParams };
@@ -211,7 +212,7 @@ export default {
         if (this.baseParams.currentPage == 1) {
           this.data = [];
         }
-        response.conteudo.data.map(function (value, key) {
+        response.content.data.map(function (value, key) {
           self.data.push(value);
         });
         this.loading = false;
@@ -219,13 +220,13 @@ export default {
       });
     },
     addNewRegister() {
-      this.showVodal(this.nameNewRegister);
+      this.openVodal(this.nameNewRegister);
       this.resetValidation(this.nameNewRegister);
       this.removeNotificarions();
       this.$refs.multiselect.deactivate();
       this.removeLoading(["addNewRegister"]);
     },
-    hideVodal() {
+    hide() {
       this.hideVodal();
     },
     cleanSelect() {
@@ -257,7 +258,7 @@ export default {
       this.validate();
       this.formDirty = true;
       if (this.markFormDirty) this.updateFormDirty(true);
-      this.currentValue = { id: this.value.id, conteudo: this.value.conteudo };
+      this.currentValue = { id: this.value.id, content: this.value.content };
     },
     notifications() {
       let self = this;
@@ -311,9 +312,11 @@ div.after-list {
 }
 
 .select {
+  min-width: 300px;
   height: 36px;
   border-bottom: 1px solid #d6dadf;
   border-radius: 0px !important;
+  z-index: 100;
 }
 
 .select-invalid {

package/src/component/forms/SelectStatic.vue

@@ -49,6 +49,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    markFormDirty: {
+      type: Boolean,
+      default: false,
+    },
     data: Array,
     value: Object,
   },
@@ -69,11 +73,14 @@ export default {
   },
   methods: {
     ...mapMutations("generic", ["addFilter", "removeLoading"]),
+    ...mapMutations("validation", ["updateFormDirty"]),
     onOpen() {},
     onSelected(value) {
       this.$emit("input", value);
-      let obj = { fieldTarget: this.fieldTarget, valor: value.id };
+      let obj = { fieldTarget: this.fieldTarget, value: value.id };
       if (!this.onlyQuery) this.addFilter(obj);
+
+      if (this.markFormDirty) this.updateFormDirty(true);
     },
     onSearch(value) {},
     label(value) {

package/src/component/layout/Menu.vue

@@ -54,7 +54,7 @@
         <ul class="context-menu">
           <li v-for="(item, index) in subMenuFilter(false)" :key="index">
             <h5 v-if="item.type === 'group'" class="context-menu__title">
-              <span class="sub-title"> {{ item.grupoNome }}</span>
+              <span class="sub-title"> {{ item.groupName }}</span>
               <span
                 v-if="index === 0"
                 @click.prevent="hideSubMenu"
@@ -194,12 +194,13 @@ export default {
 .title {
   font-size: 13px;
   font-weight: 400;
-  margin-top: -6px;
+  margin-top: -5px;
   text-align: center;
   width: 100%;
 }
+
 .title-sub {
-  margin-left: 5px;
+  margin-left: -3px;
   font-weight: 400;
 }
 .sub-title {

package/src/component/layout/Panel.vue

@@ -115,8 +115,6 @@ export default {
 .title {
   font-size: 18px;
   font-weight: 400;
-  line-height: 34px;
-  color: #577696;
 }
 
 .icon {

package/src/component/layout/{Scrollbar.vue → ScrollBar.vue}

@@ -12,20 +12,19 @@
 import { mapMutations } from "vuex";
 
 export default {
-  name: "Scrollbar",
+  name: "ScrollBar",
   props: {
     id: String,
     maxHeight: Number,
     minHeight: Number,
+    endScrollBar: Function,
   },
   mounted() {
     const listElm = document.querySelector("#" + this.id);
     if (listElm != null)
       listElm.addEventListener("scroll", (e) => {
-        if (listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) {
-          this.addEvent({
-            nome: "endScrollbar",
-          });
+        if (listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) {  
+          if (this.endScrollBar) this.endScrollBar();
         }
       });
   },

package/src/component/layout/Tag.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="div-tag">
     <div class="tag">
-      <span @click="execute()">{{ title }}: {{ valor }}</span>
+      <span @click="execute()">{{ title }}: {{ value }}</span>
       <i @click="remove()" class="icon fas fa-times-circle"></i>
     </div>
   </div>
@@ -14,7 +14,7 @@ export default {
   name: "Tag",
   props: {
     title: String,
-    valor: String,
+    value: String,
     eventName: String,
     eventData: Object,
   },
@@ -29,7 +29,7 @@ export default {
     },
     remove() {
       this.addEvent({
-        nome: "tagRemovida",
+        name: "tagRemoved",
         data: this.eventData,
       });
     },