@nixweb/nixloc-ui 0.0.126 → 0.0.127

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "0.0.126",
+  "version": "0.0.127",
   "description": "Componentes UI",
   "author": "Fábio Ávila <fabio@nixweb.com.br>",
   "private": false,
@@ -38,6 +38,7 @@
     "vue-upload-file": "^1.1.0",
     "vue2-datepicker": "^2.13.0",
     "vue2-editor": "^2.6.6",
+    "vuedraggable": "^2.24.3",
     "vuejs-ace-editor": "^1.0.1",
     "vuex": "^3.6.2",
     "vuex-persistedstate": "^4.0.0"

package/src/component/forms/CheckboxSimple.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <b-form-checkbox v-model="value" :value="true" :unchecked-value="false">
+    <b-form-checkbox v-model="valueLocal" :value="true" :unchecked-value="false">
       {{ title }}
       <Tip :field="field" :formName="formName" />
     </b-form-checkbox>
@@ -9,6 +9,9 @@
 
 <script>
 import Tip from "../shared/Tip.vue";
+
+import { mapMutations } from "vuex";
+
 export default {
   components: { Tip },
   name: "CheckboxSimple",
@@ -18,9 +21,21 @@ export default {
     field: String,
     value: Boolean,
   },
+  data() {
+    return {
+      valueLocal: false,
+    };
+  },
+  methods: {
+    ...mapMutations("validation", ["updateFormDirty"]),
+  },
   watch: {
     value() {
-      this.$emit("input", this.value);
+      this.valueLocal = this.value;
+    },
+    valueLocal() {
+      this.$emit("input", this.valueLocal);
+      this.updateFormDirty(true);
     },
   },
 };

package/src/component/forms/ImageUpload.vue

@@ -1,38 +1,49 @@
 <template>
   <div>
-    <div class="div-preview">
-      <img
-        :style="'width:120;height:100px'"
-        :src="'https://espaco.blob.core.windows.net/nixloc-photo-product/' + urlImage"
-      />
-    </div>
-    <div v-if="!value">
-      <button class="button small primary" @click="show = !show">
-        <span v-if="!loadingAdd">
-          <i class="fas fa-cloud-upload-alt"></i> {{ title }}
-        </span>
+    <b-row v-show="loadingAdd || loadingRemove">
+      <b-col sm="2">
         <vue-loading
-          v-if="loadingAdd"
+          v-if="true"
           type="bubbles"
-          color="#fff"
-          :size="{ width: '20px', height: '20px' }"
+          color="#D98621"
+          :size="{ width: '50px', height: '50px' }"
         ></vue-loading>
-      </button>
-    </div>
-    <div v-else>
-      <button class="button small success" @click="download()" v-if="!loadingAdd">
-        <i class="fas fa-cloud-download-alt"></i> Baixar
-      </button>
-      <button class="button small danger" v-if="!loadingAdd" @click="remove()">
-        <span v-if="!loadingRemove">Remover</span>
-        <vue-loading
-          v-if="loadingRemove"
-          type="bubbles"
-          color="#fff"
-          :size="{ width: '20px', height: '20px' }"
-        ></vue-loading>
-      </button>
-    </div>
+      </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"
@@ -61,6 +72,7 @@ export default {
     accepted: String,
     urlPost: String,
     urlRemove: String,
+    onLoad: Function,
     value: String,
   },
   data() {
@@ -75,7 +87,7 @@ export default {
   },
   computed: {
     urlImage() {
-      if (this.value != "") return this.value;
+      if (this.value) return this.value;
       return "noImage.jpg";
     },
   },
@@ -96,6 +108,7 @@ export default {
       this.postFileApi(params).then((response) => {
         if (response.success) {
           this.$emit("input", response.content);
+          if (this.onLoad) this.onLoad();
         }
         this.loadingAdd = false;
       });
@@ -111,6 +124,7 @@ export default {
       this.deleteFileApi(params).then((response) => {
         if (response.success) {
           this.$emit("input", "");
+          if (this.onLoad) this.onLoad();
         }
         this.loadingRemove = false;
       });
@@ -182,7 +196,7 @@ export default {
 }
 
 .small {
-  padding: 5px 10px;
+  padding: 3px 7px;
   font-size: 13px;
 }
 
@@ -201,4 +215,8 @@ export default {
 .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" />

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" />
@@ -51,6 +51,7 @@ export default {
       type: Boolean,
       default: true,
     },
+    params: Object,
     value: Number,
     changed: Function,
     enter: Function,
@@ -88,7 +89,7 @@ export default {
       }
     },
     pressedEnter() {
-      if (this.enter) this.enter();
+      if (this.enter) this.enter(this.params);
     },
   },
   computed: {
@@ -100,7 +101,6 @@ export default {
       if (this.changed) this.changed();
     },
     valueLocal() {
-      console.log("teste");
       this.validate();
 
       let valueLocal;

package/src/component/forms/Modal.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <vodal
-      :duration="50"
+      :duration="80"
       :show="modal.open"
-      @hide="hideModal()"
+      @hide="hide()"
       :width="width"
       :height="height"
       :closeOnEsc="closeOnEsc"
@@ -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/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, value: value.id };
       if (!this.onlyQuery) this.addFilter(obj);
+
+      if (this.markFormDirty) this.updateFormDirty(true);
     },
     onSearch(value) {},
     label(value) {

package/src/component/layout/ScrollBar.vue

@@ -17,15 +17,14 @@ export default {
     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/shared/Messages.vue

@@ -1,11 +1,9 @@
 <template>
   <div>
     <div :class="{ 'div-message': !modal.open }" v-if="storageNotification.length > 0">
-      <div>
+      <div v-for="notification in storageNotification">
         <Alert type="danger">
-          <div v-for="notification in storageNotification">
-            {{ notification.message }}
-          </div>
+          {{ notification.message }}
         </Alert>
       </div>
       <b-alert

package/src/component/shared/SaveCancel.vue

@@ -51,6 +51,7 @@ export default {
   },
   computed: {
     ...mapState("validation", ["formDirty"]),
+    ...mapState("generic", ["loading"]),
     ...mapGetters("validation", ["isFormValid"]),
     ...mapState("generic", ["modal"]),
   },

package/src/component/shared/Table.vue

@@ -19,7 +19,9 @@
       <tbody>
         <tr v-for="(row, index) in data" :key="index" :style="row.rowCss">
           <td class="td-checkbox" v-if="showChecks">
-            <b-form-checkbox v-model="selected" :value="row.id" />
+            <div :class="{ 'center-vertical': row.photo != null }">
+              <b-form-checkbox v-model="selected" :value="row.id" />
+            </div>
           </td>
           <td v-for="(obj, ind) in header" :key="ind">
             <div
@@ -30,9 +32,20 @@
             </div>
             <div
               :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
-              v-if="obj.type === 'class'"
+              v-if="obj.type === 'image'"
             >
-              {{ row[obj.field] }}
+              <img
+                :style="'width:60;height:50px'"
+                :src="
+                  'https://espaco.blob.core.windows.net/nixloc-photo-product/' +
+                  row[obj.field]
+                "
+              />
+            </div>
+            <div class="text-center center-vertical"  v-if="obj.type === 'class'">
+              <div :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
+                {{ row[obj.field] }}
+              </div>
             </div>
             <div
               :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
@@ -71,7 +84,12 @@
             >
               <TableButton :obj="obj" :row="row" />
             </div>
-            <div class="link" v-if="obj.type === 'link'" @click="navegateTo(obj, row)">
+            <div
+              class="link"
+              :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
+              v-if="obj.type === 'link'"
+              @click="navegateTo(obj, row)"
+            >
               <span> {{ row[obj.field] }}</span>
             </div>
           </td>
@@ -90,6 +108,7 @@
 
 <script>
 import TableButton from "@nixweb/nixloc-ui/src/component/shared/TableButton.vue";
+import draggable from "@nixweb/nixloc-ui/vuedraggable";
 
 import { mapState, mapMutations, mapActions } from "vuex";
 
@@ -148,7 +167,7 @@ export default {
       if (obj.routeName) {
         this.$router.push({
           name: obj.routeName,
-          params: { id: row.id },
+          params: { id: row.id, type: row.type },
         });
       } else {
         this.addEvent({
@@ -224,4 +243,12 @@ tr:hover {
 .icon-link:hover {
   font-size: 12.5px;
 }
+
+.center-vertical {
+  padding-top: 10px;
+}
+
+.badge-center {
+  margin: auto !important;
+}
 </style>

package/src/component/template/ListViewWithDataHandler.vue

@@ -20,6 +20,7 @@
           <TableTotalRecords :totalRecords="content.totalRecords" />
         </b-col>
       </b-row>
+      <Loading type="line" :center="false" v-show="isLoading('loadingLine')" />
       <FixedBar posicao="topo" v-show="selected.length > 0">
         <div>
           <Button
@@ -56,6 +57,7 @@ import FixedBar from "../layout/FixedBar.vue";
 import TableTotalRecords from "../shared/TableTotalRecords.vue";
 import TableTotalization from "../shared/TableTotalization.vue";
 import HorizontalFilter from "../shared/HorizontalFilter.vue";
+import Loading from "../shared/Loading.vue";
 
 import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
 
@@ -81,6 +83,7 @@ export default {
     HorizontalFilter,
     TableTotalization,
     TableTotalRecords,
+    Loading,
     FixedBar,
     Button,
     Table,
@@ -125,7 +128,7 @@ export default {
       "totalPerPage",
       "selectStatic",
     ]),
-    ...mapGetters("generic", ["pagination"]),
+    ...mapGetters("generic", ["pagination", "isLoading"]),
     paginationKey: function () {
       return this.pagination("templateList");
     },
@@ -143,7 +146,10 @@ export default {
       let params = { url: this.templateList.urlGetApi, obj: obj };
       this.getApi(params).then((response) => {
         this.content = response.content;
-        this.removeLoading(["panel", "modeloSubView", "btnSearch", "btnClean"]);
+        let self = this;
+        setTimeout(function () {
+          self.removeLoading(["panel", "loadingLine", "btnSearch", "btnClean"]);
+        }, 350);
       });
     },
     removeSelected() {

package/src/component/template/ViewTemplateConfiguration.vue

@@ -1,7 +1,6 @@
 <template>
   <div>
-    <Loading :center="false" v-show="isLoading('modeloSubView')" />
-    <div v-show="!isLoading('modeloSubView')">
+    <div>
       <slot name="content-buttons"></slot>
       <div v-if="showSearch">
         <Search />
@@ -30,7 +29,6 @@
 
 <script>
 import Search from "../shared/Search.vue";
-import Loading from "../shared/Loading.vue";
 
 import ListViewWithDataHandler from "@nixweb/nixloc-ui/src/component/template/ListViewWithDataHandler.vue";
 
@@ -38,7 +36,7 @@ import { mapGetters, mapMutations } from "vuex";
 
 export default {
   name: "ViewTemplateConfiguration",
-  components: { Search, Loading, ListViewWithDataHandler },
+  components: { Search, ListViewWithDataHandler },
   props: {
     templateList: Object,
     propsParam: Object,
@@ -55,11 +53,8 @@ export default {
       default: true,
     },
   },
-  computed: {
-    ...mapGetters("generic", ["isLoading"]),
-  },
   created() {
-    this.addLoading("modeloSubView");
+    this.addLoading("loadingLine");
   },
   methods: {
     ...mapMutations("generic", ["addLoading"]),

package/src/store/modules/generic.js

@@ -255,6 +255,7 @@ export default {
                 headers: new Token().tokenHeaders(),
             })
                 .then((response) => {
+                   
                     if (response.data.success) {
                         context.commit('addMethodExecutedApi', 'postApi');
 
@@ -271,6 +272,9 @@ export default {
                         return response.data;
                     }
                 }, (err) => {
+
+                    console.log(err);
+
                     if (err.response)
                         if (err.response.status === 403)
                             context.commit('addNotifications', [{ message: "Usuário sem permissão para adicionar!" }])

package/src/store/modules/user.js

@@ -34,5 +34,8 @@ export default {
         removeItemMenu: (state) => {
             state.menu.items = [];
         },
+        updateParameterRental: (state, parameterRental) => {
+            state.userLogged.parameterRental = parameterRental;
+        }
     },
 }