@nixweb/nixloc-ui 0.0.205 → 0.0.206
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 +1 -1
- package/src/component/forms/Color.vue +0 -12
- package/src/component/shared/Collapse.vue +17 -4
- package/src/component/shared/ExportExcel.vue +7 -2
- package/src/component/shared/Report.vue +2 -0
- package/src/component/shared/TableItem.vue +0 -7
- package/src/component/template/ViewTemplateImportFile.vue +1 -1
- package/src/component/training/Course.vue +343 -0
- package/src/component/training/CourseView.vue +189 -0
package/package.json
CHANGED
|
@@ -36,15 +36,3 @@ export default {
|
|
|
36
36
|
},
|
|
37
37
|
};
|
|
38
38
|
</script>
|
|
39
|
-
<style>
|
|
40
|
-
.vc-chrome-fields .vc-input__input {
|
|
41
|
-
font-size: 14px !important;
|
|
42
|
-
color: #333;
|
|
43
|
-
width: 100%;
|
|
44
|
-
border-radius: 2px;
|
|
45
|
-
border: none;
|
|
46
|
-
box-shadow: inset 0 0 0 1px #dadada;
|
|
47
|
-
height: 21px;
|
|
48
|
-
text-align: center;
|
|
49
|
-
}
|
|
50
|
-
</style>
|
|
@@ -29,16 +29,29 @@
|
|
|
29
29
|
<b-row>
|
|
30
30
|
<b-col sm="12">
|
|
31
31
|
<div class="text-center">
|
|
32
|
-
<Button
|
|
33
|
-
|
|
32
|
+
<Button
|
|
33
|
+
v-if="!showCollapse"
|
|
34
|
+
:title="buttonShow.title"
|
|
35
|
+
:classIcon="buttonShow.icon"
|
|
36
|
+
:type="buttonShow.type"
|
|
37
|
+
size="small"
|
|
38
|
+
:clicked="show"
|
|
39
|
+
/>
|
|
34
40
|
</div>
|
|
35
41
|
</b-col>
|
|
36
42
|
</b-row>
|
|
37
43
|
<b-row>
|
|
38
44
|
<b-col>
|
|
39
45
|
<div class="text-center">
|
|
40
|
-
<Button
|
|
41
|
-
|
|
46
|
+
<Button
|
|
47
|
+
v-if="showCollapse"
|
|
48
|
+
key="hideCollapse"
|
|
49
|
+
:title="buttonHide.title"
|
|
50
|
+
:classIcon="buttonHide.icon"
|
|
51
|
+
:type="buttonHide.type"
|
|
52
|
+
size="small"
|
|
53
|
+
:clicked="hide"
|
|
54
|
+
/>
|
|
42
55
|
</div>
|
|
43
56
|
</b-col>
|
|
44
57
|
</b-row>
|
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div>
|
|
3
|
-
<download-excel
|
|
4
|
-
:
|
|
3
|
+
<download-excel
|
|
4
|
+
:fields="column"
|
|
5
|
+
:data="data"
|
|
6
|
+
:before-finish="exportFinished"
|
|
7
|
+
worksheet="Planilha"
|
|
8
|
+
:name="`${fileName}.xls`"
|
|
9
|
+
>
|
|
5
10
|
<i class="fas fa-file-excel"></i>
|
|
6
11
|
</download-excel>
|
|
7
12
|
</div>
|
|
@@ -68,6 +68,8 @@ import TotalizationReport from "../shared/TotalizationReport.vue";
|
|
|
68
68
|
import ExportExcel from "@nixweb/nixloc-ui/src/component/shared/ExportExcel";
|
|
69
69
|
import print from "vue-print-nb";
|
|
70
70
|
|
|
71
|
+
import { mapState, mapMutations, mapActions } from "vuex";
|
|
72
|
+
|
|
71
73
|
export default {
|
|
72
74
|
directives: {
|
|
73
75
|
print,
|
|
@@ -133,7 +133,7 @@ import ViewTemplateConfiguration from "@nixweb/nixloc-ui/src/component/template/
|
|
|
133
133
|
import TableImport from "@nixweb/nixloc-ui/src/component/shared/TableImport.vue";
|
|
134
134
|
import ListNotifications from "@nixweb/nixloc-ui/src/component/shared/ListNotifications.vue";
|
|
135
135
|
|
|
136
|
-
import { mapActions, mapMutations, mapGetters } from "vuex";
|
|
136
|
+
import { mapState, mapActions, mapMutations, mapGetters } from "vuex";
|
|
137
137
|
|
|
138
138
|
export default {
|
|
139
139
|
name: "ViewTemplateImportFileView",
|
|
@@ -0,0 +1,343 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<Molded>
|
|
4
|
+
<div>
|
|
5
|
+
<b-row>
|
|
6
|
+
<b-col sm="5">
|
|
7
|
+
<InputText title="Módulo" field="module" :required="false" :maxLength="50" v-model="newModule" />
|
|
8
|
+
</b-col>
|
|
9
|
+
<b-col>
|
|
10
|
+
<div class="div-btn-add">
|
|
11
|
+
<div class="div-icon-add" @click="addModule">
|
|
12
|
+
<i class="fa-solid fa-circle-plus"></i>
|
|
13
|
+
</div>
|
|
14
|
+
</div>
|
|
15
|
+
</b-col>
|
|
16
|
+
</b-row>
|
|
17
|
+
</div>
|
|
18
|
+
</Molded>
|
|
19
|
+
<br>
|
|
20
|
+
<draggable v-model="courseModules">
|
|
21
|
+
<div v-for="(module, moduleIndex) in courseModules" :key="moduleIndex">
|
|
22
|
+
<Molded>
|
|
23
|
+
<b-row>
|
|
24
|
+
<b-col sm="8">
|
|
25
|
+
<div class="side-by-side title-module">
|
|
26
|
+
<i class="fa-solid fa-video"></i>
|
|
27
|
+
</div>
|
|
28
|
+
<div class="side-by-side title-module">
|
|
29
|
+
<InputTextEdit :hideIcon="true" v-model="module.name" />
|
|
30
|
+
</div>
|
|
31
|
+
</b-col>
|
|
32
|
+
<b-col sm="2">
|
|
33
|
+
<div class="div-title">
|
|
34
|
+
|
|
35
|
+
<div class="side-by-side div-arrow" v-if="moduleSelected != module.name"
|
|
36
|
+
@click="showLesson(module.name)">
|
|
37
|
+
<span class="title-link">Expandir</span>
|
|
38
|
+
</div>
|
|
39
|
+
<div class="side-by-side div-arrow" v-else @click="showLesson('')">
|
|
40
|
+
<span class="title-hide">Recolher</span>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
</b-col>
|
|
44
|
+
<b-col sm="2">
|
|
45
|
+
<div class="text-right" v-if="module.lessons.length == 0">
|
|
46
|
+
<div class="div-close" @click="removeModule({ id: moduleIndex })">
|
|
47
|
+
<i class="fa-solid fa-xmark"></i>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
</b-col>
|
|
51
|
+
</b-row>
|
|
52
|
+
<div v-show="moduleSelected == module.name">
|
|
53
|
+
<div>
|
|
54
|
+
<b-row>
|
|
55
|
+
<b-col sm="3">
|
|
56
|
+
<InputText title="Titulo" field="title" v-model="newLesson.title" />
|
|
57
|
+
</b-col>
|
|
58
|
+
<b-col sm="5">
|
|
59
|
+
<InputText title="Descrição" field="description" v-model="newLesson.description" />
|
|
60
|
+
</b-col>
|
|
61
|
+
<b-col sm="2">
|
|
62
|
+
<InputText title="Duração" field="title" v-model="newLesson.videoTime" />
|
|
63
|
+
</b-col>
|
|
64
|
+
<b-col sm="1">
|
|
65
|
+
<div class="div-btn-add">
|
|
66
|
+
<div class="div-icon-add" @click="addLesson({ module, newLesson })">
|
|
67
|
+
<i class="fa-solid fa-circle-plus"></i>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
</b-col>
|
|
71
|
+
</b-row>
|
|
72
|
+
</div>
|
|
73
|
+
<draggable v-model="module.lessons" :group="module.name">
|
|
74
|
+
<div v-for="(lesson, lessonIndex) in module.lessons" :key="lessonIndex">
|
|
75
|
+
<Molded>
|
|
76
|
+
<b-row>
|
|
77
|
+
<b-col sm="8">
|
|
78
|
+
<div>
|
|
79
|
+
<div class="div-margin side-by-side">
|
|
80
|
+
<i class="fa-solid fa-film"></i>
|
|
81
|
+
</div>
|
|
82
|
+
<div class="div-margin side-by-side">
|
|
83
|
+
<InputTextEdit :hideIcon="true" v-model="lesson.title" />
|
|
84
|
+
</div>
|
|
85
|
+
<div class="div-margin side-by-side">
|
|
86
|
+
<span class="title-time">
|
|
87
|
+
<i class="fa-solid fa-timer"></i>
|
|
88
|
+
</span>
|
|
89
|
+
</div>
|
|
90
|
+
<div class="div-margin side-by-side">
|
|
91
|
+
<InputTextEdit :hideIcon="true" v-model="lesson.videoTime" />
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
<InputTextEdit :hideIcon="true" v-model="lesson.description" />
|
|
95
|
+
|
|
96
|
+
</b-col>
|
|
97
|
+
<b-col sm="2">
|
|
98
|
+
<div class="icon-play text-center" @click="select(lesson)">
|
|
99
|
+
<i class="fa-solid fa-code"></i>
|
|
100
|
+
<span> Embed</span>
|
|
101
|
+
</div>
|
|
102
|
+
<div class="text-center">
|
|
103
|
+
<div v-if="lesson.videoUrl">
|
|
104
|
+
<div class="div-icon-check">
|
|
105
|
+
<i class="fa-solid fa-circle-check"></i>
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
<div v-else>
|
|
109
|
+
<div class="div-icon-danger">
|
|
110
|
+
<i class="fa-sharp fa-solid fa-circle-xmark"></i>
|
|
111
|
+
</div>
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
</b-col>
|
|
115
|
+
<b-col sm="2">
|
|
116
|
+
<div class="text-right">
|
|
117
|
+
<div class="div-close" @click="removeLesson(module, lessonIndex)">
|
|
118
|
+
<i class="fa-solid fa-xmark"></i>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
</b-col>
|
|
122
|
+
</b-row>
|
|
123
|
+
</Molded>
|
|
124
|
+
<br>
|
|
125
|
+
</div>
|
|
126
|
+
</draggable>
|
|
127
|
+
</div>
|
|
128
|
+
</Molded>
|
|
129
|
+
<br />
|
|
130
|
+
</div>
|
|
131
|
+
</draggable>
|
|
132
|
+
<Modal :title="selected.title" :width="900" v-show="showModal('play')">
|
|
133
|
+
<b-col xs="12" sm="12" md="12" lg="12" xl="12">
|
|
134
|
+
<div class="text-center">
|
|
135
|
+
<ButtonFilter :options="[
|
|
136
|
+
{
|
|
137
|
+
title: 'Visualizar',
|
|
138
|
+
classIcon: 'fa-solid fa-eye',
|
|
139
|
+
value: 'viewText',
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
title: 'Html',
|
|
143
|
+
classIcon: 'fa-solid fa-code',
|
|
144
|
+
value: 'codeEditor',
|
|
145
|
+
},
|
|
146
|
+
]" initialOption="viewText" v-model="selectType" />
|
|
147
|
+
</div>
|
|
148
|
+
<Molded>
|
|
149
|
+
<div v-if="selectType == 'viewText'">
|
|
150
|
+
<div v-if="!selected.videoUrl">Nenhum vídeo para ser exibido!</div>
|
|
151
|
+
<div class="div-view" v-html="selected.videoUrl"></div>
|
|
152
|
+
</div>
|
|
153
|
+
</Molded>
|
|
154
|
+
<CodeEditor :showButtonApply="false" v-if="selectType == 'codeEditor'" v-model="selected.videoUrl" />
|
|
155
|
+
</b-col>
|
|
156
|
+
</Modal>
|
|
157
|
+
</div>
|
|
158
|
+
</template>
|
|
159
|
+
|
|
160
|
+
<script>
|
|
161
|
+
import draggable from 'vuedraggable';
|
|
162
|
+
import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
|
|
163
|
+
import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
|
|
164
|
+
import InputTextEdit from "@nixweb/nixloc-ui/src/component/forms/InputTextEdit";
|
|
165
|
+
import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
|
|
166
|
+
import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
|
|
167
|
+
import CodeEditor from "@nixweb/nixloc-ui/src/component/shared/CodeEditor";
|
|
168
|
+
import ButtonFilter from "@nixweb/nixloc-ui/src/component/forms/ButtonFilter";
|
|
169
|
+
|
|
170
|
+
import { mapGetters, mapActions, mapMutations, mapState } from "vuex";
|
|
171
|
+
|
|
172
|
+
export default {
|
|
173
|
+
components: {
|
|
174
|
+
draggable, Molded, InputText, InputTextEdit, Button, Modal, CodeEditor, ButtonFilter
|
|
175
|
+
},
|
|
176
|
+
data() {
|
|
177
|
+
return {
|
|
178
|
+
urlCreateOrUpdate: "/api/v1/support/training/create-or-update",
|
|
179
|
+
urlGet: "/api/v1/support/training/get",
|
|
180
|
+
courseModules: [],
|
|
181
|
+
newLesson: {
|
|
182
|
+
title: '',
|
|
183
|
+
description: '',
|
|
184
|
+
videoUrl: '',
|
|
185
|
+
videoTime: '',
|
|
186
|
+
},
|
|
187
|
+
newModule: '',
|
|
188
|
+
selected: {},
|
|
189
|
+
selectType: "viewText",
|
|
190
|
+
selectedModuleName: "",
|
|
191
|
+
saveTimer: null,
|
|
192
|
+
moduleSelected: ""
|
|
193
|
+
};
|
|
194
|
+
},
|
|
195
|
+
mounted() {
|
|
196
|
+
this.get()
|
|
197
|
+
},
|
|
198
|
+
computed: {
|
|
199
|
+
...mapGetters("generic", ["showModal"]),
|
|
200
|
+
},
|
|
201
|
+
methods: {
|
|
202
|
+
...mapActions("generic", ["getApi", "postApi"]),
|
|
203
|
+
...mapMutations("generic", ["openModal", "hideModal"]),
|
|
204
|
+
save() {
|
|
205
|
+
let params = {
|
|
206
|
+
url: this.urlCreateOrUpdate,
|
|
207
|
+
obj: { course: JSON.stringify(this.courseModules) },
|
|
208
|
+
notNotifyToast: true
|
|
209
|
+
};
|
|
210
|
+
this.postApi(params).then(() => { });
|
|
211
|
+
},
|
|
212
|
+
get() {
|
|
213
|
+
let params = { url: this.urlGet, obj: {} };
|
|
214
|
+
this.getApi(params).then((response) => {
|
|
215
|
+
if (response.success) {
|
|
216
|
+
this.courseModules = JSON.parse(response.content.course);
|
|
217
|
+
}
|
|
218
|
+
});
|
|
219
|
+
},
|
|
220
|
+
addModule() {
|
|
221
|
+
if (this.newModule.trim() !== '') {
|
|
222
|
+
this.courseModules.push({
|
|
223
|
+
name: this.newModule,
|
|
224
|
+
lessons: [],
|
|
225
|
+
});
|
|
226
|
+
this.newModule = '';
|
|
227
|
+
}
|
|
228
|
+
},
|
|
229
|
+
addLesson(params) {
|
|
230
|
+
if (params.newLesson.title.trim() !== '' && params.newLesson.description.trim() !== '' && params.newLesson.videoTime.trim() !== '') {
|
|
231
|
+
params.module.lessons.push(params.newLesson);
|
|
232
|
+
this.newLesson = {
|
|
233
|
+
title: '',
|
|
234
|
+
description: '',
|
|
235
|
+
videoUrl: '',
|
|
236
|
+
videoTime: '',
|
|
237
|
+
};
|
|
238
|
+
} else {
|
|
239
|
+
alert("Preencha todos os campos!");
|
|
240
|
+
}
|
|
241
|
+
},
|
|
242
|
+
removeLesson(module, index) {
|
|
243
|
+
module.lessons.splice(index, 1);
|
|
244
|
+
},
|
|
245
|
+
removeModule(params) {
|
|
246
|
+
const module = this.courseModules[params.id];
|
|
247
|
+
if (module.lessons.length === 0) {
|
|
248
|
+
this.courseModules.splice(params.id, 1);
|
|
249
|
+
}
|
|
250
|
+
},
|
|
251
|
+
select(lesson) {
|
|
252
|
+
this.selected = lesson;
|
|
253
|
+
this.openModal("play");
|
|
254
|
+
},
|
|
255
|
+
showLesson(moduleName) {
|
|
256
|
+
this.moduleSelected = moduleName;
|
|
257
|
+
},
|
|
258
|
+
},
|
|
259
|
+
watch: {
|
|
260
|
+
courseModules: {
|
|
261
|
+
handler() {
|
|
262
|
+
if (this.saveTimer) {
|
|
263
|
+
clearTimeout(this.saveTimer);
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
this.saveTimer = setTimeout(() => {
|
|
267
|
+
this.save();
|
|
268
|
+
}, 1000);
|
|
269
|
+
},
|
|
270
|
+
deep: true,
|
|
271
|
+
},
|
|
272
|
+
},
|
|
273
|
+
};
|
|
274
|
+
</script>
|
|
275
|
+
|
|
276
|
+
<style scoped>
|
|
277
|
+
.div-btn-add {
|
|
278
|
+
margin-top: 30px;
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
.div-icon-add {
|
|
282
|
+
font-size: 25px;
|
|
283
|
+
color: #577696;
|
|
284
|
+
cursor: pointer;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.div-close {
|
|
288
|
+
font-size: 20px;
|
|
289
|
+
color: red;
|
|
290
|
+
cursor: pointer;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
.title-module {
|
|
294
|
+
font-size: 18px;
|
|
295
|
+
margin-left: 5px;
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
.title-time {
|
|
299
|
+
font-size: 12px;
|
|
300
|
+
color: darkblue;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
.div-margin {
|
|
304
|
+
margin-right: 5px;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.icon-play {
|
|
308
|
+
font-size: 14px;
|
|
309
|
+
cursor: pointer;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
.div-add-lesson {
|
|
313
|
+
cursor: pointer;
|
|
314
|
+
color: #577696;
|
|
315
|
+
margin-bottom: 10px;
|
|
316
|
+
margin-left: 5px;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
.div-icon-check {
|
|
320
|
+
color: green;
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
.div-icon-danger {
|
|
324
|
+
color: red;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
.title-link {
|
|
328
|
+
color: #3f529b;
|
|
329
|
+
font-size: 14px;
|
|
330
|
+
font-weight: 400;
|
|
331
|
+
cursor: pointer;
|
|
332
|
+
margin-left: 10px;
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
.title-hide {
|
|
336
|
+
color: rgb(224, 33, 7);
|
|
337
|
+
font-size: 14px;
|
|
338
|
+
font-weight: 400;
|
|
339
|
+
cursor: pointer;
|
|
340
|
+
margin-left: 10px;
|
|
341
|
+
}
|
|
342
|
+
</style>
|
|
343
|
+
|
|
@@ -0,0 +1,189 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<div v-if="courseModules.length == 0">
|
|
4
|
+
Nenhum curso cadastrado!
|
|
5
|
+
</div>
|
|
6
|
+
<div v-for="(module, moduleIndex) in courseModules" :key="moduleIndex">
|
|
7
|
+
<Molded>
|
|
8
|
+
<b-row>
|
|
9
|
+
<b-col sm="10">
|
|
10
|
+
<span class="title-module">
|
|
11
|
+
<i class="fa-solid fa-video"></i>
|
|
12
|
+
{{ module.name }}
|
|
13
|
+
</span>
|
|
14
|
+
</b-col>
|
|
15
|
+
<b-col sm="2">
|
|
16
|
+
<div class="div-title">
|
|
17
|
+
<div class="side-by-side div-arrow" v-if="moduleSelected != module.name"
|
|
18
|
+
@click="showLesson(module.name)">
|
|
19
|
+
<span class="title-link">Expandir</span>
|
|
20
|
+
</div>
|
|
21
|
+
<div class="side-by-side div-arrow" v-else @click="showLesson('')">
|
|
22
|
+
<span class="title-hide">Recolher</span>
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
</b-col>
|
|
26
|
+
</b-row>
|
|
27
|
+
<div v-show="moduleSelected == module.name" v-for="(lesson, lessonIndex) in module.lessons"
|
|
28
|
+
:key="lessonIndex">
|
|
29
|
+
<Molded>
|
|
30
|
+
<b-row>
|
|
31
|
+
<b-col sm="8">
|
|
32
|
+
<div>
|
|
33
|
+
<div class="div-margin side-by-side">
|
|
34
|
+
<i class="fa-solid fa-film"></i>
|
|
35
|
+
</div>
|
|
36
|
+
<div class="div-margin title-lesson side-by-side">
|
|
37
|
+
{{ lesson.title }}
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
<span class="title-description"> {{ lesson.description }}</span>
|
|
41
|
+
</b-col>
|
|
42
|
+
<b-col sm="3">
|
|
43
|
+
<div class="div-time div-margin side-by-side">
|
|
44
|
+
<span class="title-time">
|
|
45
|
+
<i class="fa-solid fa-timer"></i>
|
|
46
|
+
</span>
|
|
47
|
+
</div>
|
|
48
|
+
<div class="div-margin side-by-side">
|
|
49
|
+
{{ lesson.videoTime }}
|
|
50
|
+
</div>
|
|
51
|
+
</b-col>
|
|
52
|
+
<b-col sm="1">
|
|
53
|
+
<div class="icon-play" @click="showMovie(lesson)">
|
|
54
|
+
<i class="fa-solid fa-play"></i>
|
|
55
|
+
</div>
|
|
56
|
+
</b-col>
|
|
57
|
+
</b-row>
|
|
58
|
+
</Molded>
|
|
59
|
+
<br>
|
|
60
|
+
</div>
|
|
61
|
+
</Molded>
|
|
62
|
+
<br />
|
|
63
|
+
</div>
|
|
64
|
+
<Modal :title="selectedLesson.title" :width="900" v-show="showModal('play')">
|
|
65
|
+
<b-col xs="12" sm="12" md="12" lg="12" xl="12">
|
|
66
|
+
<Molded>
|
|
67
|
+
<div class="div-view" v-html="selectedLesson.videoUrl"></div>
|
|
68
|
+
</Molded>
|
|
69
|
+
|
|
70
|
+
</b-col>
|
|
71
|
+
</Modal>
|
|
72
|
+
</div>
|
|
73
|
+
</template>
|
|
74
|
+
|
|
75
|
+
<script>
|
|
76
|
+
import draggable from 'vuedraggable';
|
|
77
|
+
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
|
+
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
|
+
|
|
85
|
+
import { mapGetters, mapActions, mapMutations, mapState } from "vuex";
|
|
86
|
+
|
|
87
|
+
export default {
|
|
88
|
+
components: {
|
|
89
|
+
draggable, Molded, InputText, InputTextEdit, Button, Modal, CodeEditor, ButtonFilter
|
|
90
|
+
},
|
|
91
|
+
data() {
|
|
92
|
+
return {
|
|
93
|
+
urlCreateOrUpdate: "/api/v1/support/training/create-or-update",
|
|
94
|
+
urlGet: "/api/v1/support/training/get",
|
|
95
|
+
courseModules: [],
|
|
96
|
+
moduleSelected: "",
|
|
97
|
+
selectedLesson: {}
|
|
98
|
+
};
|
|
99
|
+
},
|
|
100
|
+
mounted() {
|
|
101
|
+
this.get()
|
|
102
|
+
},
|
|
103
|
+
computed: {
|
|
104
|
+
...mapGetters("generic", ["showModal"]),
|
|
105
|
+
},
|
|
106
|
+
methods: {
|
|
107
|
+
...mapActions("generic", ["getApi", "postApi"]),
|
|
108
|
+
...mapMutations("generic", ["openModal", "hideModal"]),
|
|
109
|
+
showLesson(moduleName) {
|
|
110
|
+
this.moduleSelected = moduleName;
|
|
111
|
+
},
|
|
112
|
+
showMovie(lesson) {
|
|
113
|
+
this.selectedLesson = lesson;
|
|
114
|
+
this.openModal("play");
|
|
115
|
+
},
|
|
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
|
+
});
|
|
123
|
+
},
|
|
124
|
+
},
|
|
125
|
+
};
|
|
126
|
+
</script>
|
|
127
|
+
|
|
128
|
+
<style scoped>
|
|
129
|
+
.div-title {
|
|
130
|
+
margin-bottom: 10px;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.title-module {
|
|
134
|
+
font-size: 18px;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.title-lesson {
|
|
138
|
+
font-size: 15px;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.title-description {
|
|
142
|
+
font-size: 13px;
|
|
143
|
+
color: rgb(107, 106, 106);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.title-time {
|
|
147
|
+
font-size: 12px;
|
|
148
|
+
color: darkblue;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.div-margin {
|
|
152
|
+
margin-right: 5px;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.icon-play {
|
|
156
|
+
font-size: 30px;
|
|
157
|
+
cursor: pointer;
|
|
158
|
+
color: darkgreen;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.icon-play:hover {
|
|
162
|
+
color: green;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.div-time {
|
|
166
|
+
margin-top: 15px;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.div-arrow {
|
|
170
|
+
cursor: pointer;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.title-link {
|
|
174
|
+
color: #3f529b;
|
|
175
|
+
font-size: 14px;
|
|
176
|
+
font-weight: 400;
|
|
177
|
+
cursor: pointer;
|
|
178
|
+
margin-left: 10px;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.title-hide {
|
|
182
|
+
color: rgb(224, 33, 7);
|
|
183
|
+
font-size: 14px;
|
|
184
|
+
font-weight: 400;
|
|
185
|
+
cursor: pointer;
|
|
186
|
+
margin-left: 10px;
|
|
187
|
+
}
|
|
188
|
+
</style>
|
|
189
|
+
|