@nixweb/nixloc-ui 0.0.145 → 0.0.147

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.145",
3
+ "version": "0.0.147",
4
4
  "description": "Componentes UI",
5
5
  "author": "Fábio Ávila <fabio@nixweb.com.br>",
6
6
  "private": false,
@@ -90,9 +90,6 @@ export default {
90
90
  font-weight: normal;
91
91
  font-style: normal !important;
92
92
  letter-spacing: 1px !important;
93
- -webkit-box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 12%);
94
- -moz-box-shadow: 0px 10px 20px -6px rgba(0, 0, 0, 0.12);
95
- box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 12%);
96
93
  }
97
94
 
98
95
  .small {
@@ -110,7 +107,6 @@ export default {
110
107
  font-size: 14px;
111
108
  }
112
109
 
113
-
114
110
  .disabled {
115
111
  background: #bbbbbb !important;
116
112
  border-color: #bbbbbb !important;
@@ -71,7 +71,8 @@ export default {
71
71
  }
72
72
 
73
73
  .selected {
74
- background-color: #f7f7f7;
74
+ background-color: #4BB4E2;
75
+ color:white;
75
76
  padding-left: 10px;
76
77
  padding-right: 10px;
77
78
  border-radius: 15px;
@@ -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>
@@ -25,7 +25,7 @@ export default {
25
25
 
26
26
  <style scoped>
27
27
  .top {
28
- border-radius: 0px 0px 0px 0px;
28
+ border-radius: 0px 0px 0px 23px;
29
29
  height: 50px;
30
30
  width: 100%;
31
31
  position: fixed;
@@ -6,44 +6,39 @@
6
6
  <img :src="urlImage" />
7
7
  </div>
8
8
  </li>
9
- <!-- <li>
10
- <div :class="{ 'menu-active': menuActive == 'Dashboard' }">
11
- <a
12
- href="#"
13
- @click.prevent="navegateTo({ routeName: 'dashboard', module: 'Dashboard' })"
14
- :class="highlightSession('home')"
15
- >
16
- <div class="div-icon side-by-side">
17
- <i
18
- :class="{
19
- 'icon-active': menuActive == 'Dashboard',
20
- 'icon-normal': menuActive != 'Dashboard',
21
- }"
22
- class="fas fa-chart-area icon-dash"
23
- ></i>
24
- </div>
25
- <div class="title">Dashboard</div>
26
- </a>
27
- </div>
28
- </li>-->
29
9
  <li v-for="(item, index) in menuFilter(true)" :key="index">
30
- <div :class="{ 'menu-active': menuActive == item.module }">
10
+ <div class="box-main">
31
11
  <a
32
12
  href="#"
33
13
  @click.prevent="openSubMenu(item.module)"
34
14
  :class="highlightSession(item.module)"
35
15
  >
36
- <div class="div-icon side-by-side">
37
- <span
38
- :class="{
39
- 'icon-active': menuActive == item.module,
40
- 'icon-normal': menuActive != item.module,
41
- }"
42
- >
43
- <i :class="item.icon"></i>
44
- </span>
16
+ <div
17
+ :class="{
18
+ 'icon-active': menuActive == item.module,
19
+ 'icon-normal': menuActive != item.module,
20
+ }"
21
+ >
22
+ <b-row>
23
+ <b-col sm="12">
24
+ <div class="box-icon text-center">
25
+ <i :class="item.icon"></i></div
26
+ ></b-col>
27
+ </b-row>
28
+ <b-row>
29
+ <b-col sm="12">
30
+ <div class="div-title text-center">
31
+ <span
32
+ :class="{
33
+ 'title-active': menuActive == item.module,
34
+ 'title-normal': menuActive != item.module,
35
+ }"
36
+ >{{ item.title }}</span
37
+ >
38
+ </div>
39
+ </b-col>
40
+ </b-row>
45
41
  </div>
46
- <div class="title">{{ item.title }}</div>
47
42
  </a>
48
43
  </div>
49
44
  </li>
@@ -73,12 +68,16 @@
73
68
  >
74
69
  <b-row>
75
70
  <b-col sm="1">
76
- <i :class="item.icon" aria-hidden="true"></i
77
- ></b-col>
71
+ <i
72
+ class="menu-icon"
73
+ :style="'color:' + item.iconColor"
74
+ :class="item.icon"
75
+ ></i>
76
+ </b-col>
78
77
  <b-col sm="10">
79
- <span class="title-sub"> {{ item.title }}</span></b-col
80
- ></b-row
81
- >
78
+ <span class="title-sub"> {{ item.title }}</span>
79
+ </b-col>
80
+ </b-row>
82
81
  </a>
83
82
  </li>
84
83
  </ul>
@@ -174,40 +173,53 @@ export default {
174
173
  }
175
174
  .div-logo {
176
175
  padding-top: 4px;
177
- padding-bottom: 6px;
178
- }
179
- .div-icon {
180
- width: 35px;
181
- height: 35px;
182
- padding-top: 5px;
183
- margin-left: 38px;
176
+ padding-bottom: 15px;
184
177
  }
178
+
185
179
  .icon-close {
186
- margin-right: 60px;
180
+ margin-right: 15px;
181
+ font-size: 18px;
187
182
  }
183
+
188
184
  .icon {
189
185
  font-size: 20px;
190
186
  }
187
+
191
188
  .icon-dash {
192
189
  font-size: 22px;
193
190
  }
194
- .title {
195
- font-size: 13px;
196
- font-weight: 400;
197
- margin-top: -5px;
198
- text-align: center;
199
- width: 100%;
191
+
192
+ .box-main {
193
+ display: flex;
194
+ align-items: center;
195
+ justify-content: center;
196
+ }
197
+
198
+ .box-icon {
199
+ width: 80px;
200
+ border-radius: 18px;
200
201
  }
202
+
203
+ .div-title {
204
+ margin-top: -17px;
205
+ }
206
+
201
207
  .title-sub {
202
208
  margin-left: -3px;
203
209
  font-weight: 400;
204
210
  }
211
+
205
212
  .sub-title {
206
213
  font-size: 16px;
207
214
  font-weight: normal;
208
215
  }
216
+
209
217
  img {
210
218
  height: 36px;
211
219
  margin-top: 5px;
212
220
  }
221
+
222
+ .menu-icon {
223
+ font-size: 15px;
224
+ }
213
225
  </style>
@@ -17,12 +17,13 @@ export default {
17
17
  </script>
18
18
  <style scoped>
19
19
  .molded {
20
- border: 1px solid #E5E4E8;
20
+ border: 1px solid #e8eaed;
21
21
  background-color: white;
22
+ border-radius: 12px !important;
23
+ padding: 10px;
22
24
  padding-top: 15px;
23
25
  padding-left: 30px;
24
26
  padding-right: 30px;
25
27
  padding-bottom: 10px;
26
- box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 3%);
27
28
  }
28
29
  </style>
@@ -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 }}
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <div>
3
- <FixedBar position="footer" v-show="formDirty && !modal.open">
3
+ <FixedBar position="footer" backgroundColor="#FAFAFC" v-show="formDirty && !modal.open">
4
4
  <div class="margin">
5
5
  <Button
6
6
  _key="cancelSaveCancel"
@@ -132,6 +132,11 @@ table tbody tr td {
132
132
  border-bottom: 0px !important;
133
133
  }
134
134
 
135
+ .table thead tr {
136
+ background-color: #FAFAFC !important;
137
+
138
+ }
139
+
135
140
  .td-checkbox {
136
141
  width: 30px;
137
142
  }
@@ -78,6 +78,7 @@ export default {
78
78
  font-weight: 400;
79
79
  }
80
80
 
81
+
81
82
  .tabela-description {
82
83
  white-space: nowrap;
83
84
  overflow: hidden;
@@ -9,23 +9,33 @@
9
9
  >
10
10
  <div slot="content-main">
11
11
  <br />
12
- <Molded>
12
+ <div class="div-loading" v-show="loading">
13
+ <span
14
+ >Aguarde, estamos carregando os dados, isso pode levar alguns
15
+ minutos...</span
16
+ >
17
+ <Loading type="line" :center="false" />
18
+ </div>
19
+ <Molded v-show="!loading">
13
20
  <div v-show="!fileName">
14
- <slot></slot>
15
21
  <div class="import-icon">
16
22
  <i class="fas fa-file-import"></i>
17
23
  </div>
18
- <span>
19
- Selecione o arquivo no formato <b> .xlsx </b> baseado na planilha
20
- modelo e aguarde até carregar os dados para conferência. </span
21
- ><br />
22
- <span>
23
- Até <b> 1000 </b> itens por planilha ou <b> 1MB </b> no arquivo.
24
- </span>
24
+ <slot></slot>
25
+ <Alert type="info">
26
+ <span>
27
+ Selecione o arquivo no formato <b> .xlsx </b> baseado na
28
+ planilha modelo e aguarde até carregar os dados para
29
+ conferência. </span
30
+ ><br />
31
+ <span>
32
+ Até <b> 1000 </b> itens por planilha ou <b> 1MB </b> no arquivo.
33
+ </span>
34
+ </Alert>
25
35
  <div class="div-file">
26
36
  <FileUpload
27
- title="Selecione o arquivo .xlsx"
28
- classIcon="fa-solid fa-file-excel"
37
+ title="Carregar arquivo"
38
+ classIcon="fa-sharp fa-solid fa-upload"
29
39
  :container="container"
30
40
  accepted=".xlsx"
31
41
  allowed=".xlsx"
@@ -38,14 +48,6 @@
38
48
  />
39
49
  </div>
40
50
  </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
51
  <div v-show="fileName && !loading">
50
52
  <div class="import-icon">
51
53
  <i class="fas fa-file-import"></i>
@@ -65,14 +67,40 @@
65
67
  :clicked="back"
66
68
  />
67
69
  <Button
68
- _key="print"
70
+ v-if="!isValid"
71
+ _key="btnValidate"
69
72
  type="primary"
70
73
  title="Iniciar Validação"
74
+ :disabled="false"
71
75
  classIcon="fa-solid fa-arrow-right-arrow-left"
72
76
  size="small"
73
- :clicked="print"
77
+ :clicked="validate"
78
+ />
79
+ <Button
80
+ v-if="listError.length > 0"
81
+ _key="btnValidate"
82
+ type="danger"
83
+ title="Erro(s)"
84
+ classIcon="fa-sharp fa-solid fa-triangle-exclamation"
85
+ size="small"
86
+ :clicked="validate"
74
87
  />
75
88
  </div>
89
+ <br />
90
+ <Alert type="danger" v-if="listError.length > 0">
91
+ <span>
92
+ Atenção, foram identificados
93
+ <b>{{ listError.length }}</b> erro(s), corrija-os!
94
+ </span>
95
+ </Alert>
96
+ <Alert type="info">
97
+ <span>
98
+ Total de <b> {{ totalRecords }} </b> registro(s), para o
99
+ mapeamento serão carregados somente os <b> 10 </b> primeiros (se
100
+ houver).
101
+ </span>
102
+ </Alert>
103
+
76
104
  <TableImport
77
105
  :select="select"
78
106
  :headerTable="headerTable"
@@ -91,29 +119,40 @@ import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
91
119
  import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
92
120
  import FileUpload from "@nixweb/nixloc-ui/src/component/forms/FileUpload";
93
121
  import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
122
+ import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
123
+
94
124
  import TableImport from "@nixweb/nixloc-ui/src/component/shared/TableImport.vue";
95
125
 
96
126
  import { mapState, mapActions, mapMutations } from "vuex";
97
127
 
98
128
  export default {
99
129
  name: "ViewTemplateImportFileView",
100
- components: { Panel, Button, Molded, FileUpload, Loading, TableImport },
130
+ components: {
131
+ Panel,
132
+ Button,
133
+ Molded,
134
+ FileUpload,
135
+ Loading,
136
+ TableImport,
137
+ Alert,
138
+ },
101
139
  props: {
102
140
  panel: Object,
103
141
  select: Array,
104
142
  container: String,
105
143
  typeImport: Number,
144
+ urlMapping: String,
145
+ urlValidate: String,
106
146
  },
107
147
  data() {
108
148
  return {
109
149
  fileName: "",
110
- urlMapping: "/api/v1/stock/import-product/mapping",
111
150
  loading: false,
112
151
  headerTable: [],
113
- data: [
114
- { cell1: "a", cell2: "c", cell3: "d" },
115
- { cell1: "a", cell2: "c", cell3: "d" },
116
- ],
152
+ data: [],
153
+ totalRecords: 0,
154
+ listError: [],
155
+ isValid: false,
117
156
  };
118
157
  },
119
158
  methods: {
@@ -140,9 +179,30 @@ export default {
140
179
  if (response.success) {
141
180
  this.loading = false;
142
181
  this.headerTable = response.content.headerTable;
182
+ this.data = response.content.data;
183
+ this.totalRecords = response.content.totalRecords;
143
184
  }
144
185
  });
145
186
  },
187
+ validate() {
188
+ let params = {
189
+ url: this.urlValidate,
190
+ obj: {
191
+ fileName: this.fileName,
192
+ container: this.container,
193
+ typeImport: this.typeImport,
194
+ items: this.headerTable,
195
+ },
196
+ notNotifyToast: true,
197
+ };
198
+ this.postApi(params).then((response) => {
199
+ if (response.success) {
200
+ this.listError = response.content;
201
+ if (this.listError.length == 0) this.isValid = true;
202
+ }
203
+ this.removeLoading(["btnValidate"]);
204
+ });
205
+ },
146
206
  back() {
147
207
  this.fileName = "";
148
208
  this.removeLoading(["btnBack"]);
@@ -159,7 +219,7 @@ export default {
159
219
  }
160
220
 
161
221
  .div-file {
162
- margin-top: 10px;
222
+ margin-top: 20px;
163
223
  }
164
224
 
165
225
  .div-btn {
@@ -9,7 +9,14 @@
9
9
  >
10
10
  <div slot="content-main">
11
11
  <b-row>
12
- <b-col xs="12" sm="12" md="12" lg="6" xl="6" v-if="allReports.saved.length > 0">
12
+ <b-col
13
+ xs="12"
14
+ sm="12"
15
+ md="12"
16
+ lg="6"
17
+ xl="6"
18
+ v-if="allReports.saved.length > 0"
19
+ >
13
20
  <div><i class="fas fa-file-alt icon-saved"></i> Personalizado</div>
14
21
  <hr class="hr" />
15
22
  <div class="div-molded" v-for="report in allReports.saved">
@@ -40,7 +47,9 @@
40
47
  </div>
41
48
  </b-col>
42
49
  <b-col xs="12" sm="12" md="12" lg="6" xl="6">
43
- <div><i class="fas fa-file-chart-line"></i> Padrão</div>
50
+ <div>
51
+ <i class="fas fa-file-chart-line icon-default"></i> Padrão
52
+ </div>
44
53
  <hr class="hr" />
45
54
  <div class="div-molded" v-for="report in allReports.default">
46
55
  <div>
@@ -179,6 +188,11 @@ export default {
179
188
  <style scoped>
180
189
  .icon-saved {
181
190
  color: #94aa2a;
191
+ font-size: 20px;
192
+ }
193
+
194
+ .icon-default {
195
+ font-size: 20px;
182
196
  }
183
197
 
184
198
  .icon-remove {
@@ -346,6 +346,7 @@ 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) => {