@nixweb/nixloc-ui 1.16.0 → 1.17.0

package/src/component/value-objects/Address.vue

@@ -0,0 +1,173 @@
+<template>
+  <div>
+    <b-row>
+      <b-col xs="12" sm="12" md="12" lg="3" xl="3">
+        <InputText title="CEP" field="zipCode" :formName="formName" :disabled="disabled" :mask="'#####-###'"
+          :maxLength="9" :required="required" :markFormDirty="markFormDirty" v-model="address.zipCode">
+          <div class="glyphicon margin-button">
+            <Button _key="searchZipCode" type="success" classIcon="fas fa-search" size="small"
+              :disabled="address.zipCode.length < 9" :clicked="searchZipCode" />
+          </div>
+        </InputText>
+      </b-col>
+      <b-col xs="12" sm="12" md="12" lg="5" xl="5">
+        <InputText title="Endereço" field="street" :formName="formName" :disabled="disabled" :maxLength="150"
+          :required="required" :markFormDirty="markFormDirty" v-model="address.street" />
+      </b-col>
+      <b-col xs="12" sm="12" md="12" lg="2" xl="2">
+        <InputText title="Número" field="number" :formName="formName" :disabled="disabled" :maxLength="20"
+          :markFormDirty="markFormDirty" v-model="address.number" />
+      </b-col>
+      <b-col xs="12" sm="12" md="12" lg="2" xl="2">
+        <InputText title="Complemento" field="complement" :formName="formName" :disabled="disabled" :maxLength="50"
+          :markFormDirty="markFormDirty" v-model="address.complement" />
+      </b-col>
+      <br />
+    </b-row>
+    <b-row>
+      <b-col xs="12" sm="12" md="12" :lg="showCity ? '5' : '12'" :xl="showCity ? '5' : '12'">
+        <InputText title="Bairro" field="province" :formName="formName" :disabled="disabled" :maxLength="100"
+          :required="required" :markFormDirty="markFormDirty" v-model="address.province" />
+      </b-col>
+      <b-col xs="12" sm="12" md="12" lg="5" xl="5" v-if="showCity">
+        <InputText title="Cidade" field="city" :formName="formName" :disabled="disabled" :maxLength="100"
+          :required="required" :markFormDirty="markFormDirty" v-model="address.city" />
+      </b-col>
+      <b-col xs="12" sm="12" md="12" lg="2" xl="2" v-if="showState">
+        <SelectStatic title="UF" :formName="formName" field="uf" fieldTarget="uf" :disabled="disabled"
+          :required="required" :markFormDirty="markFormDirty" v-model="address.state" :data="states" />
+      </b-col>
+    </b-row>
+  </div>
+</template>
+
+<script>
+
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
+import SelectStatic from "@nixweb/nixloc-ui/src/component/forms/SelectStatic";
+import Address from "@nixweb/nixloc-ui/src/component/value-objects/Address.js";
+
+import axios from "axios";
+
+import { mapGetters, mapMutations } from "vuex";
+
+export default {
+  name: "Address",
+  props: {
+    formName: String,
+    markFormDirty: {
+      type: Boolean,
+      default: true,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    showCity: {
+      type: Boolean,
+      default: true,
+    },
+    showState: {
+      type: Boolean,
+      default: true,
+    },
+    value: Object,
+  },
+  components: { InputText, Button, SelectStatic },
+
+  data() {
+    return {
+      address: new Address(),
+      states: [
+        { content: "AC", id: "AC" },
+        { content: "AL", id: "AL" },
+        { content: "AP", id: "AP" },
+        { content: "AM", id: "AM" },
+        { content: "BA", id: "BA" },
+        { content: "CE", id: "CE" },
+        { content: "DF", id: "DF" },
+        { content: "ES", id: "ES" },
+        { content: "GO", id: "GO" },
+        { content: "MA", id: "MA" },
+        { content: "MT", id: "MT" },
+        { content: "MS", id: "MS" },
+        { content: "MG", id: "MG" },
+        { content: "PA", id: "PA" },
+        { content: "PB", id: "PB" },
+        { content: "PR", id: "PR" },
+        { content: "PE", id: "PE" },
+        { content: "PI", id: "PI" },
+        { content: "RJ", id: "RJ" },
+        { content: "RN", id: "RN" },
+        { content: "RS", id: "RS" },
+        { content: "RO", id: "RO" },
+        { content: "RR", id: "RR" },
+        { content: "SC", id: "SC" },
+        { content: "SP", id: "SP" },
+        { content: "SE", id: "SE" },
+        { content: "TO", id: "TO" },
+      ],
+    };
+  },
+  mounted() {
+    if (this.value.zipCode != undefined) this.address = this.value;
+  },
+  computed: {
+    ...mapGetters("generic", ["event"]),
+  },
+  methods: {
+    ...mapMutations("generic", [
+      "addEvent",
+      "addNotifications",
+      "removeLoading",
+    ]),
+    searchZipCode() {
+      let zipCode = this.address.zipCode.replace(/\.|\-/g, "");
+      let url = `https://viacep.com.br/ws/${zipCode}/json/`;
+      axios.get(url).then((response) => {
+        let self = this;
+        setTimeout(function () {
+          self.loadData(response.data);
+          self.removeLoading(["searchZipCode"]);
+        }, 300);
+      });
+    },
+    loadData(data) {
+      this.address.zipCode = data.cep;
+      this.address.street = data.logradouro;
+      this.address.number = data.complemento;
+      this.address.province = data.bairro;
+      this.address.city =
+        data.localidade == undefined ? data.municipio : data.localidade;
+      this.address.state = { id: data.uf, content: data.uf };
+    },
+  },
+  watch: {
+    value: {
+      handler() {
+        this.address = this.value;
+      },
+      deep: true,
+    },
+    address: {
+      handler() {
+        this.$emit("input", this.address);
+      },
+      deep: true,
+    },
+    event: {
+      handler(event) {
+        if (event.name == "searchDocumentFederalRecipe") {
+          this.loadData(event.data);
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</script>

package/src/component/value-objects/Contact.js

@@ -0,0 +1,7 @@
+export default class DadosContato {
+    constructor() {
+        this.phone = "";
+        this.webSite = "";
+        this.email = "";
+    }
+}

package/src/component/value-objects/Contact.vue

@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <b-row>
+      <b-col xs="12" sm="12" md="12" lg="4" xl="4">
+        <InputText
+          title="Telefone"
+          field="phone"
+          :formName="formName"
+          :mask="['(##) ####-####', '(##) #####-####']"
+          :maxLength="20"
+          :required="required"
+          v-model="contact.phone"
+          :markFormDirty="markFormDirty"
+        />
+      </b-col>
+      <b-col xs="12" sm="12" md="12" lg="4" xl="4">
+        <InputText
+          title="Site"
+          field="webSite"
+          :formName="formName"
+          mask=""
+          :maxLength="100"
+          :required="false"
+          v-model="contact.webSite"
+          :markFormDirty="markFormDirty"
+        />
+      </b-col>
+      <b-col xs="12" sm="12" md="12" lg="4" xl="4">
+        <InputText
+          title="E-mail"
+          field="email"
+          :formName="formName"
+          mask=""
+          :maxLength="100"
+          :required="required"
+          v-model="contact.email"
+          :markFormDirty="markFormDirty"
+        />
+      </b-col>
+    </b-row>
+  </div>
+</template>
+
+<script>
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
+import Contact from "@nixweb/nixloc-ui/src/component/value-objects/Contact.js";
+
+import { mapGetters } from "vuex";
+
+export default {
+  name: "Contact",
+  props: {
+    formName: String,
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    markFormDirty: {
+      type: Boolean,
+      default: true,
+    },
+    value: Object,
+  },
+  components: { InputText, Button },
+  data() {
+    return {
+      contact: new Contact(),
+    };
+  },
+  mounted() {
+    if (this.value.phone != undefined) this.contact = this.value;
+  },
+  methods: {
+    loadData(data) {
+      this.contact.phone = data.phone;
+      this.contact.email = data.email;
+    },
+  },
+  computed: {
+    ...mapGetters("generic", ["event"]),
+  },
+  watch: {
+    value: {
+      handler() {
+        this.contact = this.value;
+      },
+      deep: true,
+    },
+    contact: {
+      handler() {
+        this.$emit("input", this.contact);
+      },
+      deep: true,
+    },
+    event: {
+      handler(event) {
+        if (event.name == "searchDocumentFederalRecipe") {
+          this.loadData(event.data);
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</script>

package/src/component/value-objects/Person.js

@@ -0,0 +1,10 @@
+export default class Person {
+    constructor() {
+        this.typePerson = 2;
+        this.companyName = "";
+        this.tradeName = "";
+        this.document = "";
+        this.stateInscription = "";
+        this.municipalInscription = "";
+    }
+}

package/src/component/value-objects/Person.vue

@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <b-row>
+      <b-col xs="12" sm="12" md="12" lg="4" xl="4">
+        <RadioGroup field="typePerson" :formName="formName" v-show="showTypePerson" :options="[
+          { text: 'Física', value: 1 },
+          { text: 'Jurídica', value: 2 },
+        ]" v-model="person.typePerson" :markFormDirty="markFormDirty" />
+      </b-col>
+    </b-row>
+    <div v-if="showDocument">
+      <b-row>
+        <b-col xs="12" sm="12" md="12" lg="4" xl="4">
+          <InputText :title="person.typePerson == 2 ? 'CNPJ' : 'CPF'" field="document" :formName="formName" :mask="person.typePerson == 2 ? ['##.###.###/####-##'] : ['###.###.###-##']
+            " :maxLength="30" :required="required" v-model="person.document" :markFormDirty="markFormDirty">
+            <div class="glyphicon margin-button">
+              <Button v-if="person.typePerson == 2" _key="searchDocumentFederalRecipe" type="success"
+                classIcon="fas fa-search" :disabled="person.document.length < 18" size="small"
+                :clicked="searchDocumentFederalRecipe" />
+            </div>
+          </InputText>
+        </b-col>
+        <b-col xs="12" sm="12" md="12" lg="4" xl="4">
+          <InputText :title="person.typePerson == 2 ? 'Inscrição Estadual' : 'RG'" field="stateInscription"
+            :formName="formName" :maxLength="50" :required="required" v-model="person.stateInscription"
+            :markFormDirty="markFormDirty" />
+        </b-col>
+        <b-col xs="12" sm="12" md="12" lg="4" xl="4">
+          <InputText v-if="person.typePerson == 2" title="Inscrição Municipal" field="municipalInscription"
+            :formName="formName" :maxLength="50" :required="false" v-model="person.municipalInscription"
+            :markFormDirty="markFormDirty" />
+        </b-col>
+      </b-row>
+    </div>
+    <br v-if="person.typePerson == 2 && showDocument" />
+    <b-row>
+      <b-col xs="12" sm="12" md="12" lg="8" xl="8">
+        <InputText :title="person.typePerson == 2 ? 'Razão Social' : 'Nome'" field="companyName" :formName="formName"
+          :required="true" :maxLength="100" v-model="person.companyName" :markFormDirty="markFormDirty" />
+      </b-col>
+      <b-col xs="12" sm="12" md="12" lg="4" xl="4">
+        <InputText :title="person.typePerson == 2 ? 'Fantasia' : 'Apelido'" field="tradeName" :formName="formName"
+          :required="true" :maxLength="100" v-model="person.tradeName" :markFormDirty="markFormDirty" />
+      </b-col>
+    </b-row>
+  </div>
+</template>
+
+<script>
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
+import RadioGroup from "@nixweb/nixloc-ui/src/component/forms/RadioGroup";
+import Person from "@nixweb/nixloc-ui/src/component/value-objects/Person.js";
+import axios from "axios";
+
+import { mapMutations } from "vuex";
+
+export default {
+  name: "Person",
+  props: {
+    formName: String,
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    showTypePerson: {
+      type: Boolean,
+      default: true,
+    },
+    showDocument: {
+      type: Boolean,
+      default: true,
+    },
+    markFormDirty: {
+      type: Boolean,
+      default: true,
+    },
+    value: Object,
+  },
+  components: { RadioGroup, InputText, Button },
+  data() {
+    return {
+      person: new Person(),
+    };
+  },
+  mounted() {
+    if (this.value.companyName != undefined) this.person = this.value;
+  },
+  methods: {
+    ...mapMutations("generic", [
+      "addEvent",
+      "addNotifications",
+      "removeLoading",
+    ]),
+    searchDocumentFederalRecipe() {
+      let url = `https://ws.hubdodesenvolvedor.com.br/v2/cnpj/?cnpj=${this.person.document}&token=94473735FzLqpNKajP170569464`;
+      axios.post(url, {}, {}).then((response) => {
+        if (response.data.return == "OK") {
+          this.addEvent({
+            name: "searchDocumentFederalRecipe",
+            data: response.data.result,
+          });
+          this.person.companyName = response.data.result.nome;
+          this.person.tradeName = response.data.result.fantasia;
+          console.log(response.data.result);
+        } else {
+          this.addNotifications([
+            { message: "CNPJ inválido ou não encontrado." },
+          ]);
+        }
+        this.removeLoading(["searchDocumentFederalRecipe"]);
+      });
+    },
+  },
+  watch: {
+    value: {
+      handler() {
+        this.person = this.value;
+      },
+      deep: true,
+    },
+    person: {
+      handler() {
+        this.$emit("input", this.person);
+      },
+      deep: true,
+    },
+  },
+};
+</script>

package/src/config/axios.js

@@ -1,32 +1,9 @@
-import axios from "axios"
-
-const BASE_URL = process.env.VUE_APP_API_URL
-
-const api = axios.create({
-    baseURL: BASE_URL,
-})
-
-
-api.interceptors.response.use(response => {
-    if (
-        response.request?.responseType === 'arraybuffer' ||
-        response.request?.responseType === 'blob' ||
-        response.data instanceof ArrayBuffer ||
-        response.data instanceof Blob
-    ) {
-        return response;
-    }
-
-    if (response.data?.forceLogout === true) {
-        window.location.replace("https://erp.nixloc.com.br/login");
-        return;
-    }
-
-    response.data = response.data?.data;
-
-    return response;
-});
-
-
-export default api
-
+import axios from "axios";
+
+const BASE_URL = process.env.VUE_APP_API_URL;
+
+const api = axios.create({
+  baseURL: BASE_URL,
+});
+
+export default api;

package/src/config/dicas.js

@@ -1,15 +1,15 @@
-const dicas = [];
-
-const manutencao = [
-  // { formName: "opcoesFaturamento", field: "unificar", title: "Unificar Cliente", descricao: "Ao marcar essa opção" },
-
-];
-
-
-manutencao.forEach(function (obj) {
-  dicas.push(obj);
-});
-
-
-
+const dicas = [];
+
+const manutencao = [
+  // { formName: "opcoesFaturamento", field: "unificar", title: "Unificar Cliente", description: "Ao marcar essa opção" },
+
+];
+
+
+manutencao.forEach(function (obj) {
+  dicas.push(obj);
+});
+
+
+
 export default dicas;