@nixweb/nixloc-ui 0.0.144 → 0.0.146

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nixweb/nixloc-ui",
3
- "version": "0.0.144",
3
+ "version": "0.0.146",
4
4
  "description": "Componentes UI",
5
5
  "author": "Fábio Ávila <fabio@nixweb.com.br>",
6
6
  "private": false,
@@ -4,7 +4,7 @@
4
4
  <div class="file" v-if="!value">
5
5
  <button class="button small primary">
6
6
  <span v-if="!loadingAdd">
7
- <i class="fas fa-cloud-upload-alt"></i> {{ title }}</span
7
+ <i :class="classIcon"></i> {{ title }}</span
8
8
  >
9
9
  <vue-loading
10
10
  v-if="loadingAdd"
@@ -22,10 +22,18 @@
22
22
  />
23
23
  </div>
24
24
  <div v-if="value">
25
- <button class="button small success" @click="download()" v-if="!loadingAdd">
25
+ <button
26
+ class="button small success"
27
+ @click="download()"
28
+ v-if="!loadingAdd"
29
+ >
26
30
  <i class="fas fa-cloud-download-alt"></i> Baixar
27
31
  </button>
28
- <button class="button small danger" v-if="!loadingAdd" @click="remove()">
32
+ <button
33
+ class="button small danger"
34
+ v-if="!loadingAdd"
35
+ @click="remove()"
36
+ >
29
37
  <span v-if="!loadingRemove">Remover</span>
30
38
  <vue-loading
31
39
  v-if="loadingRemove"
@@ -46,6 +54,7 @@ export default {
46
54
  name: "FileUpload",
47
55
  props: {
48
56
  title: String,
57
+ classIcon: String,
49
58
  container: String,
50
59
  allowed: String,
51
60
  accepted: String,
@@ -163,7 +172,7 @@ export default {
163
172
  }
164
173
 
165
174
  .small {
166
- padding: 5px 10px;
175
+ padding: 3px 8px;
167
176
  font-size: 13px;
168
177
  }
169
178
 
@@ -0,0 +1,136 @@
1
+ <template>
2
+ <div>
3
+ <div class="wrapper">
4
+ <span class="num" @click="showEdit = true" v-if="!showEdit">
5
+ <span v-if="text">{{ text }}</span>
6
+ <span class="placeholder" :style="'color:' + placeholderColor" v-else>
7
+ {{ placeholder }}
8
+ </span>
9
+ </span>
10
+ <input
11
+ class="input"
12
+ type="text"
13
+ @keyup.enter.prevent="execute()"
14
+ v-model="text"
15
+ v-if="showEdit"
16
+ />
17
+ <span @click="execute()" v-if="showEdit && loading == false">
18
+ <i class="fa-solid fa-check"></i>
19
+ </span>
20
+ <div class="div-loading">
21
+ <vue-loading
22
+ v-if="loading"
23
+ type="bubbles"
24
+ color="#D98621"
25
+ :size="{ width: '30px', height: '30px' }"
26
+ >
27
+ </vue-loading>
28
+ </div>
29
+ </div>
30
+ <div v-if="error" class="danger msg-error">
31
+ {{ messageError }}
32
+ </div>
33
+ </div>
34
+ </template>
35
+
36
+ <script>
37
+ import { mapMutations, mapActions } from "vuex";
38
+
39
+ export default {
40
+ name: "InputCallToAction",
41
+ props: [
42
+ "_key",
43
+ "placeholder",
44
+ "placeholderColor",
45
+ "messageError",
46
+ "urlCallToAction",
47
+ "params",
48
+ "value",
49
+ ],
50
+ data() {
51
+ return {
52
+ text: "",
53
+ error: false,
54
+ _keySelected: "",
55
+ showEdit: false,
56
+ loading: false,
57
+ };
58
+ },
59
+ mounted() {
60
+ this.text = this.value;
61
+ },
62
+ methods: {
63
+ ...mapActions("generic", ["postApi"]),
64
+ execute() {
65
+ let paramsWithValue = { ...this.params, ...{ value: this.text } };
66
+ let params = { url: this.urlCallToAction, obj: paramsWithValue };
67
+ this.loading = true;
68
+ console.log(params);
69
+ this.postApi(params).then((response) => {
70
+ if (response.success) {
71
+ if (!response.content) {
72
+ this.error = true;
73
+ this.text = "";
74
+ this.$emit("input", "");
75
+ } else {
76
+ this.error = false;
77
+ this.$emit("input", this.text);
78
+ }
79
+
80
+ this.showEdit = false;
81
+ this.loading = false;
82
+ }
83
+ });
84
+ },
85
+ },
86
+ };
87
+ </script>
88
+
89
+ <style scoped>
90
+ .input {
91
+ width: 80%;
92
+ border: none;
93
+ text-align: center;
94
+ }
95
+
96
+ .placeholder {
97
+ font-size: 13px !important;
98
+ }
99
+
100
+ .div-loading {
101
+ margin-bottom: 4px;
102
+ }
103
+
104
+ .msg-error {
105
+ font-size: 13px;
106
+ }
107
+
108
+ .wrapper {
109
+ height: 37px;
110
+ display: flex;
111
+ align-items: center;
112
+ justify-content: center;
113
+ background: #fff;
114
+ border-radius: 8px;
115
+ border: 1px solid #eaedf3;
116
+ box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 3%);
117
+ }
118
+ .wrapper span {
119
+ text-align: center;
120
+ font-size: 15px;
121
+ cursor: pointer;
122
+ user-select: none;
123
+ }
124
+ .wrapper span.num {
125
+ font-size: 17px;
126
+ cursor: pointer;
127
+ color: #3f529b;
128
+ font-size: 13px;
129
+ cursor: pointer;
130
+ }
131
+
132
+ .wrapper span.num:hover {
133
+ text-decoration: underline;
134
+ transition: 0.1s;
135
+ }
136
+ </style>
@@ -2,7 +2,9 @@
2
2
  <div class="main">
3
3
  <b-row>
4
4
  <b-col xs="6" sm="6" md="6" lg="6" xl="6">
5
- <span class="title">{{ title }}</span>
5
+ <span class="title">
6
+ <i class="toggle-icon" :class="classIcon"></i> {{ title }}
7
+ </span>
6
8
  <br />
7
9
  </b-col>
8
10
  <b-col xs="6" sm="6" md="6" lg="4" xl="4">
@@ -33,6 +35,7 @@ export default {
33
35
  props: {
34
36
  title: String,
35
37
  color: String,
38
+ classIcon: String,
36
39
  disabled: {
37
40
  type: Boolean,
38
41
  default: false,
@@ -64,7 +67,14 @@ export default {
64
67
  padding: 5px;
65
68
  }
66
69
 
70
+ .toggle-icon {
71
+ font-size: 14px;
72
+ margin-right: 5px;
73
+ margin-bottom: 2px;
74
+ }
75
+
67
76
  .title {
77
+ margin-left: -3px;
68
78
  padding-right: 35px;
69
79
  margin-bottom: 50px !important;
70
80
  }
@@ -1,6 +1,9 @@
1
1
  <template>
2
2
  <div>
3
- <div :class="{ 'div-message': !modal.open }" v-if="storageNotification.length > 0">
3
+ <div
4
+ :class="{ 'div-message': !modal.open }"
5
+ v-if="storageNotification.length > 0"
6
+ >
4
7
  <div v-for="notification in storageNotification">
5
8
  <Alert type="danger">
6
9
  {{ notification.message }}
@@ -0,0 +1,91 @@
1
+ <template>
2
+ <div>
3
+ <div class="div-main">
4
+ <br />
5
+ <table class="table table-responsive-xs">
6
+ <thead>
7
+ <tr>
8
+ <th
9
+ v-for="(obj, ind) in headerTable"
10
+ :key="ind"
11
+ class="title-header"
12
+ >
13
+ <div class="div-select">
14
+ <SelectStatic
15
+ :title="obj.title"
16
+ fieldTarget="timeZone"
17
+ :data="select"
18
+ :markFormDirty="false"
19
+ v-model="obj.target"
20
+ />
21
+ </div>
22
+ </th>
23
+ </tr>
24
+ </thead>
25
+ <tbody>
26
+ <tr v-for="(row, index) in data" :key="index">
27
+ <td v-for="(obj, ind) in headerTable" :key="ind">
28
+ <div>{{ row[obj.field] }}</div>
29
+ </td>
30
+ </tr>
31
+ </tbody>
32
+ </table>
33
+ </div>
34
+ </div>
35
+ </template>
36
+
37
+ <script>
38
+ import SelectStatic from "@nixweb/nixloc-ui/src/component/forms/SelectStatic";
39
+
40
+ export default {
41
+ components: {
42
+ SelectStatic,
43
+ },
44
+ props: {
45
+ select: Array,
46
+ headerTable: Array,
47
+ data: Array,
48
+ },
49
+ name: "TableImport",
50
+ data() {
51
+ return {};
52
+ },
53
+ methods: {},
54
+ };
55
+ </script>
56
+ <style scoped>
57
+ .div-main {
58
+ overflow: auto;
59
+ white-space: nowrap;
60
+ min-height: 450px;
61
+ }
62
+
63
+ .table th,
64
+ .table td {
65
+ height: 10px !important;
66
+ padding-left: 5px !important;
67
+ padding-top: 7px !important;
68
+ padding-bottom: 5px !important;
69
+ padding-right: 5px !important;
70
+ padding-left: 10px !important;
71
+ border-bottom: 0px !important;
72
+ width: 200px !important;
73
+ }
74
+
75
+ .title-header {
76
+ font-size: 14px;
77
+ color: #757d8c;
78
+ font-weight: 400;
79
+ }
80
+
81
+ .tabela-description {
82
+ white-space: nowrap;
83
+ overflow: hidden;
84
+ text-overflow: ellipsis;
85
+ max-width: 200px;
86
+ }
87
+
88
+ .div-select {
89
+ width: 310px;
90
+ }
91
+ </style>
@@ -0,0 +1,192 @@
1
+ <template>
2
+ <div>
3
+ <Panel
4
+ :module="panel.module"
5
+ :title="panel.title"
6
+ :showVerticalFilter="panel.showVerticalFilter"
7
+ :showSearch="panel.showSearch"
8
+ :showButtons="panel.showButtons"
9
+ >
10
+ <div slot="content-main">
11
+ <br />
12
+ <Molded>
13
+ <div v-show="!fileName">
14
+ <slot></slot>
15
+ <Alert type="info">
16
+ <span>
17
+ Selecione o arquivo no formato <b> .xlsx </b> baseado na
18
+ planilha modelo e aguarde até carregar os dados para
19
+ conferência. </span
20
+ ><br />
21
+ <span>
22
+ Até <b> 1000 </b> itens por planilha ou <b> 1MB </b> no arquivo.
23
+ </span>
24
+ </Alert>
25
+ <div class="div-file">
26
+ <FileUpload
27
+ title="Carregar arquivo .xlsx"
28
+ classIcon="fa-solid fa-file-excel"
29
+ :container="container"
30
+ accepted=".xlsx"
31
+ allowed=".xlsx"
32
+ :disabled="true"
33
+ urlPost="/api/v1/adm/file-upload/upload"
34
+ urlRemove="/api/v1/adm/file-upload/delete"
35
+ :onLoad="successUploadFile"
36
+ :nameDataBase="fileName"
37
+ v-model="fileName"
38
+ />
39
+ </div>
40
+ </div>
41
+
42
+ <div class="div-loading" v-show="loading">
43
+ <span
44
+ >Aguarde, estamos carregando os dados, isso pode levar alguns
45
+ minutos...</span
46
+ >
47
+ <Loading type="line" :center="false" />
48
+ </div>
49
+ <div v-show="fileName && !loading">
50
+ <div class="import-icon">
51
+ <i class="fas fa-file-import"></i>
52
+ </div>
53
+ <span>
54
+ Efetue o <b> mapeamento </b> dos campos e clique em iniciar
55
+ validação.</span
56
+ >
57
+ <br />
58
+ <div class="div-btn">
59
+ <Button
60
+ _key="btnBack"
61
+ type="info"
62
+ title="voltar"
63
+ classIcon="fa-solid fa-circle-arrow-left"
64
+ size="small"
65
+ :clicked="back"
66
+ />
67
+ <Button
68
+ _key="print"
69
+ type="primary"
70
+ title="Iniciar Validação"
71
+ :disabled="true"
72
+ classIcon="fa-solid fa-arrow-right-arrow-left"
73
+ size="small"
74
+ :clicked="print"
75
+ />
76
+ </div>
77
+ <br />
78
+ <Alert type="info">
79
+ <span>
80
+ Total de <b> {{ totalRecords }} </b> registro(s), porem para o
81
+ mapeamento serão carregados somente os <b> 10 </b> primeiros
82
+ registros (se houver).
83
+ </span>
84
+ </Alert>
85
+ <TableImport
86
+ :select="select"
87
+ :headerTable="headerTable"
88
+ :data="data"
89
+ />
90
+ </div>
91
+ </Molded>
92
+ </div>
93
+ </Panel>
94
+ </div>
95
+ </template>
96
+
97
+ <script>
98
+ import Panel from "@nixweb/nixloc-ui/src/component/layout/Panel.vue";
99
+ import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
100
+ import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
101
+ import FileUpload from "@nixweb/nixloc-ui/src/component/forms/FileUpload";
102
+ import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
103
+ import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
104
+
105
+ import TableImport from "@nixweb/nixloc-ui/src/component/shared/TableImport.vue";
106
+
107
+ import { mapState, mapActions, mapMutations } from "vuex";
108
+
109
+ export default {
110
+ name: "ViewTemplateImportFileView",
111
+ components: {
112
+ Panel,
113
+ Button,
114
+ Molded,
115
+ FileUpload,
116
+ Loading,
117
+ TableImport,
118
+ Alert,
119
+ },
120
+ props: {
121
+ panel: Object,
122
+ select: Array,
123
+ container: String,
124
+ typeImport: Number,
125
+ },
126
+ data() {
127
+ return {
128
+ fileName: "",
129
+ urlMapping: "/api/v1/stock/import-product/mapping",
130
+ loading: false,
131
+ headerTable: [],
132
+ data: [],
133
+ totalRecords: 0,
134
+ };
135
+ },
136
+ methods: {
137
+ ...mapActions("generic", ["postApi"]),
138
+ ...mapMutations("generic", ["removeLoading"]),
139
+ successUploadFile() {
140
+ this.loading = true;
141
+ let self = this;
142
+ setTimeout(function () {
143
+ self.mapping(self.fileName);
144
+ }, 1000);
145
+ },
146
+ mapping(fileName) {
147
+ let params = {
148
+ url: this.urlMapping,
149
+ obj: {
150
+ fileName: fileName,
151
+ container: this.container,
152
+ typeImport: this.typeImport,
153
+ },
154
+ notNotifyToast: true,
155
+ };
156
+ this.postApi(params).then((response) => {
157
+ if (response.success) {
158
+ this.loading = false;
159
+ this.headerTable = response.content.headerTable;
160
+ this.data = response.content.data;
161
+ this.totalRecords = response.content.totalRecords;
162
+ }
163
+ });
164
+ },
165
+ back() {
166
+ this.fileName = "";
167
+ this.removeLoading(["btnBack"]);
168
+ },
169
+ },
170
+ };
171
+ </script>
172
+
173
+ <style scoped>
174
+ .import-icon {
175
+ font-size: 30px;
176
+ opacity: 0.2;
177
+ color: #577696;
178
+ }
179
+
180
+ .div-file {
181
+ margin-top: 20px;
182
+ }
183
+
184
+ .div-btn {
185
+ margin-top: 10px;
186
+ margin-left: -8px;
187
+ }
188
+
189
+ .div-loading {
190
+ margin-top: 10px;
191
+ }
192
+ </style>
@@ -20,7 +20,7 @@
20
20
  :formName="formName"
21
21
  mask=""
22
22
  :maxLength="100"
23
- :required="required"
23
+ :required="false"
24
24
  v-model="contact.webSite"
25
25
  :markFormDirty="markFormDirty"
26
26
  />
@@ -56,7 +56,7 @@
56
56
  field="municipalInscription"
57
57
  :formName="formName"
58
58
  :maxLength="50"
59
- :required="required"
59
+ :required="false"
60
60
  v-model="person.municipalInscription"
61
61
  :markFormDirty="markFormDirty"
62
62
  />
@@ -126,7 +126,11 @@ export default {
126
126
  if (this.value.companyName != undefined) this.person = this.value;
127
127
  },
128
128
  methods: {
129
- ...mapMutations("generic", ["addEvent", "addNotifications", "removeLoading"]),
129
+ ...mapMutations("generic", [
130
+ "addEvent",
131
+ "addNotifications",
132
+ "removeLoading",
133
+ ]),
130
134
  searchDocumentFederalRecipe() {
131
135
  let url = `https://ws.hubdodesenvolvedor.com.br/v2/cnpj/?cnpj=${this.person.document}&token=94473735FzLqpNKajP170569464`;
132
136
  this.$http.post(url, {}, {}).then((response) => {
@@ -138,7 +142,9 @@ export default {
138
142
  this.person.companyName = response.data.result.nome;
139
143
  this.person.tradeName = response.data.result.fantasia;
140
144
  } else {
141
- this.addNotifications([{ message: "CNPJ inválido ou não encontrado." }]);
145
+ this.addNotifications([
146
+ { message: "CNPJ inválido ou não encontrado." },
147
+ ]);
142
148
  }
143
149
  this.removeLoading(["searchDocumentFederalRecipe"]);
144
150
  });
@@ -321,7 +321,7 @@ export default {
321
321
 
322
322
  if (err.response)
323
323
  if (err.response.status === 403)
324
- context.commit('addNotifications', [{ message: "Usuário sem permissão para adicionar!" }])
324
+ context.commit('addNotifications', [{ message: "Usuário sem permissão para executar esta ação!" }])
325
325
 
326
326
  if (!err.response)
327
327
  context.commit('addNotificationErrorApi');
@@ -346,12 +346,13 @@ export default {
346
346
  } else {
347
347
  context.commit('addToast', 'putApiErro');
348
348
  context.commit('addNotifications', response.data.notifications)
349
+
349
350
  return response.data;
350
351
  }
351
352
  }, (err) => {
352
353
  if (err.response)
353
354
  if (err.response.status === 403)
354
- context.commit('addNotifications', [{ message: "Usuário sem permissão para modificar!" }])
355
+ context.commit('addNotifications', [{ message: "Usuário sem permissão para executar esta ação!" }])
355
356
 
356
357
  if (!err.response)
357
358
  context.commit('addNotificationErrorApi');
@@ -429,7 +430,7 @@ export default {
429
430
  }, (err) => {
430
431
  if (err.response)
431
432
  if (err.response.status === 403)
432
- context.commit('addNotifications', [{ message: "Usuário sem permissão para remover!" }])
433
+ context.commit('addNotifications', [{ message: "Usuário sem permissão para executar esta ação!" }])
433
434
 
434
435
  if (!err.response)
435
436
  context.commit('addNotificationErrorApi');
@@ -459,7 +460,7 @@ export default {
459
460
  }, (err) => {
460
461
  if (err.response)
461
462
  if (err.response.status === 403)
462
- context.commit('addNotifications', [{ message: "Usuário sem permissão para remove!" }])
463
+ context.commit('addNotifications', [{ message: "Usuário sem permissão para executar esta ação!" }])
463
464
 
464
465
  if (!err.response)
465
466
  context.commit('addNotificationErrorApi');