@nixweb/nixloc-ui 0.0.208 → 0.0.210

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.208",
3
+ "version": "0.0.210",
4
4
  "description": "Componentes UI",
5
5
  "author": "Fábio Ávila <fabio@nixweb.com.br>",
6
6
  "private": false,
@@ -1,25 +1,23 @@
1
1
  <template>
2
2
  <div>
3
- <div>
4
- <div class="file" v-if="!value">
5
- <button class="button small primary">
6
- <span v-if="!loadingAdd">
7
- <i :class="classIcon"></i> {{ title }}</span>
8
- <vue-loading v-if="loadingAdd" type="bubbles" color="#fff"
9
- :size="{ width: '20px', height: '20px' }"></vue-loading>
10
- </button>
11
- <input type="file" name="myfile" ref="file" :accept="allowed" v-on:change="upload()" />
12
- </div>
13
- <div v-if="value">
14
- <button class="button small success" @click="download()" v-if="!loadingAdd">
15
- <i class="fas fa-cloud-download-alt"></i> Baixar
16
- </button>
17
- <button class="button small danger" v-if="!loadingAdd" @click="remove()">
18
- <span v-if="!loadingRemove">Remover</span>
19
- <vue-loading v-if="loadingRemove" type="bubbles" color="#fff"
20
- :size="{ width: '20px', height: '20px' }"></vue-loading>
21
- </button>
22
- </div>
3
+ <div class="file" v-if="!value">
4
+ <button class="button small primary">
5
+ <span v-if="!loadingAdd">
6
+ <i :class="classIcon"></i> {{ title }}</span>
7
+ <vue-loading v-if="loadingAdd" type="bubbles" color="#fff"
8
+ :size="{ width: '20px', height: '20px' }"></vue-loading>
9
+ </button>
10
+ <input type="file" name="myfile" ref="file" :accept="allowed" v-on:change="upload()" />
11
+ </div>
12
+ <div v-if="value">
13
+ <button class="button small success" @click="download()" v-if="!loadingAdd">
14
+ <i class="fas fa-cloud-download-alt"></i> Baixar
15
+ </button>
16
+ <button class="button small danger" v-if="!loadingAdd" @click="remove()">
17
+ <span v-if="!loadingRemove">Remover</span>
18
+ <vue-loading v-if="loadingRemove" type="bubbles" color="#fff"
19
+ :size="{ width: '20px', height: '20px' }"></vue-loading>
20
+ </button>
23
21
  </div>
24
22
  </div>
25
23
  </template>
@@ -1,155 +1,213 @@
1
1
  <template>
2
2
  <div>
3
- <b-row>
4
- <b-col sm="3">
5
- <div class="file">
6
- <button class="button small primary" @click="openCamera">
7
- <span><i class="fa-regular fa-camera-web"></i> Câmera</span>
8
- </button>
9
- </div>
10
- <div class="file">
11
- <button class="button small primary">
12
- <span><i class="fa-solid fa-upload"></i> Carregar arquivos</span>
13
- </button>
14
- <input type="file" name="myfile" ref="file" @change="handleFileChange" multiple />
15
- </div>
16
- </b-col>
17
- <b-col sm="9">
18
- <div class="side-by-side" v-for="attachment in attachments">
19
- <div class="text-center box-file">
20
- <div v-if="attachment.extension == 'png' || attachment.extension == 'jpg'">
21
- <img class="img" :src="urlBase + attachment.fileName">
22
- </div>
23
- <div class="icon-generic" v-else>
24
- <i class="fa-light fa-file"></i>
25
- <div><span class="name">{{ attachment.name }}</span></div>
26
- </div>
27
- <div class="icon side-by-side">
28
- <i class="fa-solid fa-download"></i>
29
- </div>
30
- <div class="icon icon-close side-by-side">
31
- <i class="fa-solid fa-circle-xmark"></i>
3
+ <Alert v-if="!success" type="danger">
4
+ Não é permitido enviar arquivos com mais de 5 megabytes.
5
+ </Alert>
6
+ <div v-if="loading">
7
+ <Loading type="line" :center="false" />
8
+ </div>
9
+ <div>
10
+ <b-row>
11
+ <b-col sm="3">
12
+ <div class="file">
13
+ <button class="button small primary" @click="openCamera">
14
+ <span><i class="fa-regular fa-camera-web"></i> Câmera</span>
15
+ </button>
16
+ </div>
17
+ <div class="file">
18
+ <button class="button small primary">
19
+ <span><i class="fa-solid fa-upload"></i> Carregar</span>
20
+ </button>
21
+ <input type="file" name="myfile" ref="file" @change="confirm" multiple />
22
+ </div>
23
+ </b-col>
24
+ <b-col sm="9" v-if="!showCapture">
25
+ <div class="side-by-side" v-for="attachment in attachments">
26
+ <div class="text-center box-file">
27
+ <div class="div-image" v-if="attachment.extension == '.png' || attachment.extension == '.jpg'"
28
+ @click="openImage(baseUrl + attachment.fileName)">
29
+ <img class="img" :src="baseUrl + attachment.fileName">
30
+ </div>
31
+ <div class="icon-generic" v-else>
32
+ <i class="fa-light fa-file"></i>
33
+ <div><span class="name">{{ attachment.name }}</span></div>
34
+ </div>
35
+ <div v-if="idSelected != attachment.id">
36
+ <div class="icon side-by-side">
37
+ <a :href="baseUrl + attachment.fileName">
38
+ <i class="fa-solid fa-download"></i>
39
+ </a>
40
+ </div>
41
+ <div class="icon icon-close side-by-side" @click="confirmRemove(attachment.id)">
42
+ <i class="fa-solid fa-circle-xmark"></i>
43
+ </div>
44
+ </div>
45
+ <div v-else>
46
+ <div class="icon icon-confirm side-by-side" @click="removeSelected(attachment.id)">
47
+ <i class="fa-solid fa-circle-check"></i>
48
+ </div>
49
+ <div class="icon icon-close side-by-side" @click="cancel()">
50
+ <i class="fa-solid fa-xmark"></i>
51
+ </div>
52
+ </div>
32
53
  </div>
33
54
  </div>
55
+ </b-col>
56
+ </b-row>
57
+ </div>
58
+ <div v-show="showInModal">
59
+ <Modal title="Câmera" :width="600" :height="750" v-if="showModal('webcam')" :onHideModal="stopCamera">
60
+ <div class="text-center">
61
+ <WebCam ref="webcam" :autoplay="false" width="400" height="100%"></WebCam>
62
+ <br>
63
+ <div class="side-by-side">
64
+ <button class="button primary" @click="captureImage">
65
+ <i class="fa-solid fa-camera"></i>
66
+ Capturar
67
+ </button>
68
+ </div>
69
+ </div>
70
+ </Modal>
71
+ <Modal title="Imagem" :width="800" v-show="showModal('image')">
72
+ <div class="text-center">
73
+ <img class="img-selected" :src="imageSelected">
34
74
  </div>
35
- </b-col>
36
- </b-row>
37
- <Modal title="Câmera" :width="600" :height="750" v-if="showModal('webcam')" :onHideModal="stopCamera">
75
+ </Modal>
76
+ </div>
77
+ <div v-if="!showInModal && showCapture">
38
78
  <div class="text-center">
39
79
  <WebCam ref="webcam" :autoplay="false" width="400" height="100%"></WebCam>
40
80
  <br>
41
81
  <div class="side-by-side">
42
- <button class="button primary" @click="captureImage">
82
+ <button class="button small primary" @click="captureImage">
43
83
  <i class="fa-solid fa-camera"></i>
44
84
  Capturar
45
85
  </button>
86
+ <button class="button small danger" @click="stopCamera">
87
+ <i class="fa-solid fa-circle-xmark"></i>
88
+ Fechar
89
+ </button>
46
90
  </div>
47
91
  </div>
48
- </Modal>
92
+ </div>
49
93
  </div>
50
94
  </template>
51
95
  <script>
52
96
 
53
97
  import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
98
+ import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
99
+ import Confirmation from "@nixweb/nixloc-ui/src/component/shared/Confirmation.vue";
100
+ import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
54
101
 
55
102
  import { WebCam } from 'vue-cam-vision'
56
103
 
57
- import { mapState, mapGetters, mapMutations } from "vuex";
104
+ import { mapActions, mapGetters, mapMutations } from "vuex";
58
105
 
59
106
  export default {
60
107
  components: {
61
108
  WebCam,
62
- Modal
109
+ Modal,
110
+ Loading,
111
+ Confirmation,
112
+ Alert,
63
113
  },
64
114
  props: {
65
115
  baseUrl: {
66
116
  type: String,
67
- default: "https://espaco.blob.core.windows.net",
117
+ default: "https://espaco.blob.core.windows.net/nixloc-attachments/",
68
118
  },
69
- container: {
70
- type: String,
71
- default: "nixloc-attachment",
72
- }
119
+ showInModal: {
120
+ type: Boolean,
121
+ default: true
122
+ },
123
+ source: String,
124
+ genericId: String
73
125
  },
74
126
  data() {
75
127
  return {
128
+ urlPost: "/api/v1/adm/attachment/upload",
129
+ urlGet: "/api/v1/adm/attachment/get-all",
130
+ urlDelete: "/api/v1/adm/attachment/delete",
76
131
  files: [],
77
- attachments: [
78
- {
79
- fileName: "T7I300FDB9_3.png",
80
- extension: "png",
81
- },
82
- {
83
- fileName: "T7I300FDB9_3.png",
84
- extension: "png",
85
- },
86
- {
87
- fileName: "T7I300FDB9_3.png",
88
- extension: "png",
89
- },
90
- {
91
- fileName: "T7I300FDB9_3.png",
92
- extension: "png",
93
- },
94
- {
95
- name: "screensh...",
96
- fileName: "T7I300FDB9_3.png",
97
- extension: "txt",
98
- },
99
- {
100
- fileName: "T7I300FDB9_3.png",
101
- extension: "png",
102
- },
103
- {
104
- fileName: "T7I300FDB9_3.png",
105
- extension: "png",
106
- },
107
- {
108
- fileName: "T7I300FDB9_3.png",
109
- extension: "png",
110
- },
111
- {
112
- fileName: "T7I300FDB9_3.png",
113
- extension: "png",
114
- },
115
- {
116
- name: "screensh...",
117
- fileName: "T7I300FDB9_3.png",
118
- extension: "txt",
119
- },
120
- {
121
- fileName: "T7I300FDB9_3.png",
122
- extension: "png",
123
- },
124
- {
125
- fileName: "T7I300FDB9_3.png",
126
- extension: "png",
127
- },
128
- {
129
- fileName: "T7I300FDB9_3.png",
130
- extension: "png",
131
- },
132
- {
133
- fileName: "T7I300FDB9_3.png",
134
- extension: "png",
135
- },
136
- {
137
- name: "screensh...",
138
- fileName: "T7I300FDB9_3.png",
139
- extension: "txt",
140
- },
141
- ],
132
+ attachments: [],
142
133
  captures: [],
143
134
  imgReport: [],
135
+ idSelected: "",
136
+ imageSelected: "",
137
+ loading: false,
138
+ success: true,
139
+ showCapture: false,
144
140
  };
145
141
  },
142
+ mounted() {
143
+ this.getAll();
144
+ },
146
145
  methods: {
147
- ...mapMutations("generic", ["openModal", "hideModal"]),
148
- handleFileChange() {
149
- this.files = this.$refs.file.files;
146
+ ...mapMutations("generic", ["openModal", "hideModal", "removeLoading"]),
147
+ ...mapActions("generic", ["postFileApi", "getApi", "deleteAllApi"]),
148
+ confirm() {
149
+ this.files = Object.values(this.$refs.file.files);
150
+ this.loadFiles();
151
+ },
152
+ confirmRemove(id) {
153
+ this.idSelected = id;
154
+ },
155
+ cancel() {
156
+ this.idSelected = '';
157
+ },
158
+ removeSelected(id) {
159
+ let params = {
160
+ url: this.urlDelete,
161
+ selected: [id],
162
+ };
163
+ this.deleteAllApi(params).then(() => {
164
+ this.getAll();
165
+ });
166
+ },
167
+ async loadFiles() {
168
+ this.hideModal("confirm");
169
+ this.loading = true;
170
+ let self = this;
171
+ for (const file of this.files) {
172
+ await self.upload(file);
173
+ }
174
+
175
+ this.loading = false;
176
+ },
177
+ async upload(file) {
178
+ this.loading = true;
179
+ let params = {
180
+ url: this.urlPost,
181
+ file: file,
182
+ name: this.source,
183
+ container: this.genericId,
184
+ };
185
+ const response = await this.postFileApi(params);
186
+ this.success = response.content == "erro" ? false : true;
187
+ this.loading = false;
188
+ let self = this;
189
+ setTimeout(function () {
190
+ self.success = true;
191
+ }, 5000);
192
+ this.getAll();
193
+ },
194
+ getAll() {
195
+ this.idSelected = "";
196
+ this.loading = true;
197
+ let params = { url: this.urlGet, obj: { any: this.source, id: this.genericId } };
198
+ this.getApi(params).then((response) => {
199
+ this.attachments = response.content.data;
200
+ this.loading = false;
201
+ });
202
+ },
203
+ openImage(url) {
204
+ this.openModal("image");
205
+ this.imageSelected = url;
150
206
  },
151
207
  openCamera() {
152
- this.openModal("webcam");
208
+ if (this.showInModal)
209
+ this.openModal("webcam");
210
+ this.showCapture = true;
153
211
  this.startCamera();
154
212
  },
155
213
  startCamera() {
@@ -160,16 +218,58 @@ export default {
160
218
  stopCamera() {
161
219
  if (this.$refs.webcam) {
162
220
  this.$refs.webcam.stop();
163
- this.hideModal();
221
+ this.showCapture = false;
222
+ if (this.showInModal)
223
+ this.hideModal();
164
224
  }
165
225
  },
166
226
  captureImage() {
167
227
  if (this.$refs.webcam) {
168
228
  this.$refs.webcam.capture().then((base64String) => {
169
- console.log(base64String);
229
+ this.upload(this.convertToFile(base64String));
230
+ this.stopCamera();
231
+ this.showCapture = false;
170
232
  });
171
233
  }
172
234
  },
235
+ convertToFile(base64String) {
236
+ const base64Data = base64String.split(',')[1];
237
+ const base64ToByte = (char) => {
238
+ const charCode = char.charCodeAt(0);
239
+
240
+ if (charCode >= 65 && charCode <= 90) {
241
+ return charCode - 65; // A-Z
242
+ } else if (charCode >= 97 && charCode <= 122) {
243
+ return charCode - 71; // a-z
244
+ } else if (charCode >= 48 && charCode <= 57) {
245
+ return charCode + 4; // 0-9
246
+ } else if (charCode === 43) {
247
+ return 62; // +
248
+ } else if (charCode === 47) {
249
+ return 63; // /
250
+ }
251
+
252
+ return 0; // Caracteres inválidos
253
+ };
254
+
255
+ const byteArray = new Uint8Array(base64Data.length / 4 * 3);
256
+ for (let i = 0, j = 0; i < base64Data.length; i += 4, j += 3) {
257
+ const block = (
258
+ (base64ToByte(base64Data[i]) << 18) |
259
+ (base64ToByte(base64Data[i + 1]) << 12) |
260
+ (base64ToByte(base64Data[i + 2]) << 6) |
261
+ base64ToByte(base64Data[i + 3])
262
+ );
263
+
264
+ byteArray[j] = (block >> 16) & 0xff;
265
+ byteArray[j + 1] = (block >> 8) & 0xff;
266
+ byteArray[j + 2] = block & 0xff;
267
+ }
268
+
269
+ const blob = new Blob([byteArray], { type: 'image/png' });
270
+ return new File([blob], "imagem.png", { type: 'image/png' });
271
+
272
+ }
173
273
  },
174
274
  computed: {
175
275
  ...mapGetters("generic", ["showModal"]),
@@ -219,6 +319,11 @@ export default {
219
319
  opacity: 0;
220
320
  }
221
321
 
322
+ .div-image {
323
+ cursor: pointer;
324
+ }
325
+
326
+
222
327
  .small {
223
328
  padding: 3px 8px;
224
329
  font-size: 13px;
@@ -243,24 +348,43 @@ export default {
243
348
  height: 45px;
244
349
  }
245
350
 
351
+ .img-selected {
352
+ width: 80%;
353
+ }
354
+
246
355
  .icon-generic {
247
356
  font-size: 16px;
248
357
  }
249
358
 
250
359
  .name {
251
- font-size: 14px;
360
+ font-size: 12px;
361
+ width: 50px;
362
+ white-space: nowrap;
363
+ text-overflow: ellipsis;
252
364
  }
253
365
 
254
366
  .icon {
255
367
  font-size: 20px;
256
368
  cursor: pointer;
369
+ padding: 5px;
257
370
  }
258
371
 
259
372
  .icon-close {
260
373
  color: red;
261
374
  }
262
375
 
263
- .btn-webcam {}
376
+ .icon-confirm {
377
+ color: green;
378
+ }
379
+
380
+ .title {
381
+ font-size: 18px;
382
+ margin-bottom: 20px;
383
+ }
384
+
385
+ .div-btn {
386
+ margin-bottom: 50px;
387
+ }
264
388
  </style>
265
389
 
266
390
 
@@ -7,10 +7,10 @@
7
7
  <Molded>
8
8
  <b-row>
9
9
  <b-col sm="10">
10
- <span class="title-module">
10
+ <div class="title-module">
11
11
  <i class="fa-solid fa-video"></i>
12
12
  {{ module.name }}
13
- </span>
13
+ </div>
14
14
  </b-col>
15
15
  <b-col sm="2">
16
16
  <div class="div-title">
@@ -66,32 +66,28 @@
66
66
  <Molded>
67
67
  <div class="div-view" v-html="selectedLesson.videoUrl"></div>
68
68
  </Molded>
69
-
70
69
  </b-col>
71
70
  </Modal>
72
71
  </div>
73
72
  </template>
74
73
 
75
74
  <script>
76
- import draggable from 'vuedraggable';
75
+
77
76
  import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
78
- import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
79
- import InputTextEdit from "@nixweb/nixloc-ui/src/component/forms/InputTextEdit";
80
- import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
81
77
  import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
82
- import CodeEditor from "@nixweb/nixloc-ui/src/component/shared/CodeEditor";
83
- import ButtonFilter from "@nixweb/nixloc-ui/src/component/forms/ButtonFilter";
84
78
 
85
- import { mapGetters, mapActions, mapMutations, mapState } from "vuex";
79
+ import axios from "@/config/axios";
80
+
81
+ import { mapGetters, mapMutations } from "vuex";
86
82
 
87
83
  export default {
88
84
  components: {
89
- draggable, Molded, InputText, InputTextEdit, Button, Modal, CodeEditor, ButtonFilter
85
+ Molded, Modal
90
86
  },
91
87
  data() {
92
88
  return {
93
- urlCreateOrUpdate: "/api/v1/support/training/create-or-update",
94
- urlGet: "/api/v1/support/training/get",
89
+ urlGet: "",
90
+ environment: "",
95
91
  courseModules: [],
96
92
  moduleSelected: "",
97
93
  selectedLesson: {}
@@ -100,11 +96,15 @@ export default {
100
96
  mounted() {
101
97
  this.get()
102
98
  },
99
+ created() {
100
+ this.environment = process.env.VUE_APP_API_URL == "https://backend-cliente-prod.azurewebsites.net/" ? "prod" : "dev";
101
+ if (this.environment == "prod") this.urlGet = "https://backend-adm-prod.azurewebsites.net/api/v1/support/training/get";
102
+ if (this.environment == "dev") this.urlGet = "https://backend-adm-dev.azurewebsites.net/api/v1/support/training/get";
103
+ },
103
104
  computed: {
104
105
  ...mapGetters("generic", ["showModal"]),
105
106
  },
106
107
  methods: {
107
- ...mapActions("generic", ["getApi", "postApi"]),
108
108
  ...mapMutations("generic", ["openModal", "hideModal"]),
109
109
  showLesson(moduleName) {
110
110
  this.moduleSelected = moduleName;
@@ -114,12 +114,12 @@ export default {
114
114
  this.openModal("play");
115
115
  },
116
116
  get() {
117
- let params = { url: this.urlGet, obj: {} };
118
- this.getApi(params).then((response) => {
119
- if (response.success) {
120
- this.courseModules = JSON.parse(response.content.course);
121
- }
122
- });
117
+ axios.get(this.urlGet, {})
118
+ .then(response => {
119
+ if (response.data.success) {
120
+ this.courseModules = JSON.parse(response.data.content.course);
121
+ }
122
+ })
123
123
  },
124
124
  },
125
125
  };
@@ -131,11 +131,12 @@ export default {
131
131
  }
132
132
 
133
133
  .title-module {
134
- font-size: 18px;
134
+ font-size: 15px;
135
+ margin-bottom: 10px;
135
136
  }
136
137
 
137
138
  .title-lesson {
138
- font-size: 15px;
139
+ font-size: 14px;
139
140
  }
140
141
 
141
142
  .title-description {