@nixweb/nixloc-ui 1.19.0 → 1.21.0

package/src/component/training/Course.vue

@@ -1,344 +1,344 @@
-<template>
-    <div>
-        <Molded>
-            <div>
-                <b-row>
-                    <b-col sm="5">
-                        <InputText title="Módulo" field="module" :required="false" :maxLength="50" v-model="newModule" />
-                    </b-col>
-                    <b-col>
-                        <div class="div-btn-add">
-                            <div class="div-icon-add" @click="addModule">
-                                <i class="fa-solid fa-circle-plus"></i>
-                            </div>
-                        </div>
-                    </b-col>
-                </b-row>
-            </div>
-        </Molded>
-        <br>
-        <draggable v-model="courseModules">
-            <div v-for="(module, moduleIndex) in courseModules" :key="moduleIndex">
-                <Molded>
-                    <b-row>
-                        <b-col sm="8">
-                            <div class="side-by-side title-module">
-                                <i class="fa-solid fa-video"></i>
-                            </div>
-                            <div class="side-by-side title-module">
-                                <InputTextEdit :hideIcon="true" v-model="module.name" />
-                            </div>
-                        </b-col>
-                        <b-col sm="2">
-                            <div class="div-title">
-
-                                <div class="side-by-side div-arrow" v-if="moduleSelected != module.name"
-                                    @click="showLesson(module.name)">
-                                    <span class="title-link">Expandir</span>
-                                </div>
-                                <div class="side-by-side div-arrow" v-else @click="showLesson('')">
-                                    <span class="title-hide">Recolher</span>
-                                </div>
-                            </div>
-                        </b-col>
-                        <b-col sm="2">
-                            <div class="text-right" v-if="module.lessons.length == 0">
-                                <div class="div-close" @click="removeModule({ id: moduleIndex })">
-                                    <i class="fa-solid fa-xmark"></i>
-                                </div>
-                            </div>
-                        </b-col>
-                    </b-row>
-                    <div v-show="moduleSelected == module.name">
-                        <div>
-                            <b-row>
-                                <b-col sm="3">
-                                    <InputText title="Titulo" field="title" v-model="newLesson.title" />
-                                </b-col>
-                                <b-col sm="5">
-                                    <InputText title="Descrição" field="description" v-model="newLesson.description" />
-                                </b-col>
-                                <b-col sm="2">
-                                    <InputText title="Duração" field="title" v-model="newLesson.videoTime" />
-                                </b-col>
-                                <b-col sm="1">
-                                    <div class="div-btn-add">
-                                        <div class="div-icon-add" @click="addLesson({ module, newLesson })">
-                                            <i class="fa-solid fa-circle-plus"></i>
-                                        </div>
-                                    </div>
-                                </b-col>
-                            </b-row>
-                        </div>
-                        <draggable v-model="module.lessons" :group="module.name">
-                            <div v-for="(lesson, lessonIndex) in module.lessons" :key="lessonIndex">
-                                <Molded>
-                                    <b-row>
-                                        <b-col sm="8">
-                                            <div>
-                                                <div class="div-margin side-by-side">
-                                                    <i class="fa-solid fa-film"></i>
-                                                </div>
-                                                <div class="div-margin side-by-side">
-                                                    <InputTextEdit :hideIcon="true" v-model="lesson.title" />
-                                                </div>
-                                                <div class="div-margin side-by-side">
-                                                    <span class="title-time">
-                                                        <i class="fa-solid fa-timer"></i>
-                                                    </span>
-                                                </div>
-                                                <div class="div-margin side-by-side">
-                                                    <InputTextEdit :hideIcon="true" v-model="lesson.videoTime" />
-                                                </div>
-                                            </div>
-                                            <InputTextEdit :hideIcon="true" v-model="lesson.description" />
-
-                                        </b-col>
-                                        <b-col sm="2">
-                                            <div class="icon-play text-center" @click="select(lesson)">
-                                                <i class="fa-solid fa-code"></i>
-                                                <span> Embed</span>
-                                            </div>
-                                            <div class="text-center">
-                                                <div v-if="lesson.videoUrl">
-                                                    <div class="div-icon-check">
-                                                        <i class="fa-solid fa-circle-check"></i>
-                                                    </div>
-                                                </div>
-                                                <div v-else>
-                                                    <div class="div-icon-danger">
-                                                        <i class="fa-sharp fa-solid fa-circle-xmark"></i>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </b-col>
-                                        <b-col sm="2">
-                                            <div class="text-right">
-                                                <div class="div-close" @click="removeLesson(module, lessonIndex)">
-                                                    <i class="fa-solid fa-xmark"></i>
-                                                </div>
-                                            </div>
-                                        </b-col>
-                                    </b-row>
-                                </Molded>
-                                <br>
-                            </div>
-                        </draggable>
-                    </div>
-                </Molded>
-                <br />
-            </div>
-        </draggable>
-        <Modal :title="selected.title" :width="900" v-show="showModal('play')">
-            <b-col xs="12" sm="12" md="12" lg="12" xl="12">
-                <div class="text-center">
-                    <ButtonFilter :options="[
-                        {
-                            title: 'Visualizar',
-                            classIcon: 'fa-solid fa-eye',
-                            value: 'viewText',
-                        },
-                        {
-                            title: 'Html',
-                            classIcon: 'fa-solid fa-code',
-                            value: 'codeEditor',
-                        },
-                    ]" initialOption="viewText" v-model="selectType" />
-                </div>
-                <Molded v-show="selectType == 'viewText'">
-                    <div>
-                        <div v-show="!selected.videoUrl">Nenhum vídeo para ser exibido!</div>
-                        <div class="div-view" v-html="selected.videoUrl"></div>
-                    </div>
-                </Molded>
-                <TextArea :maxLength="5000" v-if="selectType == 'codeEditor'" v-model="selected.videoUrl" />
-            </b-col>
-        </Modal>
-    </div>
-</template>
-  
-<script>
-import draggable from 'vuedraggable';
-import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
-import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
-import TextArea from "@nixweb/nixloc-ui/src/component/forms/TextArea";
-import InputTextEdit from "@nixweb/nixloc-ui/src/component/forms/InputTextEdit";
-import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
-import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
-import CodeEditor from "@nixweb/nixloc-ui/src/component/shared/CodeEditor";
-import ButtonFilter from "@nixweb/nixloc-ui/src/component/forms/ButtonFilter";
-
-import { mapGetters, mapActions, mapMutations } from "vuex";
-
-export default {
-    components: {
-        draggable, Molded, InputText, InputTextEdit, Button, Modal, ButtonFilter, TextArea
-    },
-    data() {
-        return {
-            urlCreateOrUpdate: "/api/v1/support/training/create-or-update",
-            urlGet: "/api/v1/support/training/get",
-            courseModules: [],
-            newLesson: {
-                title: '',
-                description: '',
-                videoUrl: '',
-                videoTime: '',
-            },
-            newModule: '',
-            selected: {},
-            selectType: "viewText",
-            selectedModuleName: "",
-            saveTimer: null,
-            moduleSelected: ""
-        };
-    },
-    mounted() {
-        this.get()
-    },
-    computed: {
-        ...mapGetters("generic", ["showModal"]),
-    },
-    methods: {
-        ...mapActions("generic", ["getApi", "postApi"]),
-        ...mapMutations("generic", ["openModal", "hideModal"]),
-        save() {
-            let params = {
-                url: this.urlCreateOrUpdate,
-                obj: { course: JSON.stringify(this.courseModules) },
-                notNotifyToast: true
-            };
-            this.postApi(params).then(() => { });
-        },
-        get() {
-            let params = { url: this.urlGet, obj: {} };
-            this.getApi(params).then((response) => {
-                if (response.success) {
-                    this.courseModules = JSON.parse(response.content.course);
-                }
-            });
-        },
-        addModule() {
-            if (this.newModule.trim() !== '') {
-                this.courseModules.push({
-                    name: this.newModule,
-                    lessons: [],
-                });
-                this.newModule = '';
-            }
-        },
-        addLesson(params) {
-            if (params.newLesson.title.trim() !== '' && params.newLesson.description.trim() !== '' && params.newLesson.videoTime.trim() !== '') {
-                params.module.lessons.push(params.newLesson);
-                this.newLesson = {
-                    title: '',
-                    description: '',
-                    videoUrl: '',
-                    videoTime: '',
-                };
-            } else {
-                alert("Preencha todos os campos!");
-            }
-        },
-        removeLesson(module, index) {
-            module.lessons.splice(index, 1);
-        },
-        removeModule(params) {
-            const module = this.courseModules[params.id];
-            if (module.lessons.length === 0) {
-                this.courseModules.splice(params.id, 1);
-            }
-        },
-        select(lesson) {
-            this.selected = lesson;
-            this.openModal("play");
-        },
-        showLesson(moduleName) {
-            this.moduleSelected = moduleName;
-        },
-    },
-    watch: {
-        courseModules: {
-            handler() {
-                if (this.saveTimer) {
-                    clearTimeout(this.saveTimer);
-                }
-
-                this.saveTimer = setTimeout(() => {
-                    this.save();
-                }, 1000);
-            },
-            deep: true,
-        },
-    },
-};
-</script>
-  
-<style scoped>
-.div-btn-add {
-    margin-top: 30px;
-}
-
-.div-icon-add {
-    font-size: 25px;
-    color: #577696;
-    cursor: pointer;
-}
-
-.div-close {
-    font-size: 20px;
-    color: red;
-    cursor: pointer;
-}
-
-.title-module {
-    font-size: 18px;
-    margin-left: 5px;
-}
-
-.title-time {
-    font-size: 12px;
-    color: darkblue;
-}
-
-.div-margin {
-    margin-right: 5px;
-}
-
-.icon-play {
-    font-size: 14px;
-    cursor: pointer;
-}
-
-.div-add-lesson {
-    cursor: pointer;
-    color: #577696;
-    margin-bottom: 10px;
-    margin-left: 5px;
-}
-
-.div-icon-check {
-    color: green;
-}
-
-.div-icon-danger {
-    color: red;
-}
-
-.title-link {
-    color: #3f529b;
-    font-size: 14px;
-    font-weight: 400;
-    cursor: pointer;
-    margin-left: 10px;
-}
-
-.title-hide {
-    color: rgb(224, 33, 7);
-    font-size: 14px;
-    font-weight: 400;
-    cursor: pointer;
-    margin-left: 10px;
-}
-</style>
+<template>
+    <div>
+        <Molded>
+            <div>
+                <b-row>
+                    <b-col sm="5">
+                        <InputText title="Módulo" field="module" :required="false" :maxLength="50" v-model="newModule" />
+                    </b-col>
+                    <b-col>
+                        <div class="div-btn-add">
+                            <div class="div-icon-add" @click="addModule">
+                                <i class="fa-solid fa-circle-plus"></i>
+                            </div>
+                        </div>
+                    </b-col>
+                </b-row>
+            </div>
+        </Molded>
+        <br>
+        <draggable v-model="courseModules">
+            <div v-for="(module, moduleIndex) in courseModules" :key="moduleIndex">
+                <Molded>
+                    <b-row>
+                        <b-col sm="8">
+                            <div class="side-by-side title-module">
+                                <i class="fa-solid fa-video"></i>
+                            </div>
+                            <div class="side-by-side title-module">
+                                <InputTextEdit :hideIcon="true" v-model="module.name" />
+                            </div>
+                        </b-col>
+                        <b-col sm="2">
+                            <div class="div-title">
+
+                                <div class="side-by-side div-arrow" v-if="moduleSelected != module.name"
+                                    @click="showLesson(module.name)">
+                                    <span class="title-link">Expandir</span>
+                                </div>
+                                <div class="side-by-side div-arrow" v-else @click="showLesson('')">
+                                    <span class="title-hide">Recolher</span>
+                                </div>
+                            </div>
+                        </b-col>
+                        <b-col sm="2">
+                            <div class="text-right" v-if="module.lessons.length == 0">
+                                <div class="div-close" @click="removeModule({ id: moduleIndex })">
+                                    <i class="fa-solid fa-xmark"></i>
+                                </div>
+                            </div>
+                        </b-col>
+                    </b-row>
+                    <div v-show="moduleSelected == module.name">
+                        <div>
+                            <b-row>
+                                <b-col sm="3">
+                                    <InputText title="Titulo" field="title" v-model="newLesson.title" />
+                                </b-col>
+                                <b-col sm="5">
+                                    <InputText title="Descrição" field="description" v-model="newLesson.description" />
+                                </b-col>
+                                <b-col sm="2">
+                                    <InputText title="Duração" field="title" v-model="newLesson.videoTime" />
+                                </b-col>
+                                <b-col sm="1">
+                                    <div class="div-btn-add">
+                                        <div class="div-icon-add" @click="addLesson({ module, newLesson })">
+                                            <i class="fa-solid fa-circle-plus"></i>
+                                        </div>
+                                    </div>
+                                </b-col>
+                            </b-row>
+                        </div>
+                        <draggable v-model="module.lessons" :group="module.name">
+                            <div v-for="(lesson, lessonIndex) in module.lessons" :key="lessonIndex">
+                                <Molded>
+                                    <b-row>
+                                        <b-col sm="8">
+                                            <div>
+                                                <div class="div-margin side-by-side">
+                                                    <i class="fa-solid fa-film"></i>
+                                                </div>
+                                                <div class="div-margin side-by-side">
+                                                    <InputTextEdit :hideIcon="true" v-model="lesson.title" />
+                                                </div>
+                                                <div class="div-margin side-by-side">
+                                                    <span class="title-time">
+                                                        <i class="fa-solid fa-timer"></i>
+                                                    </span>
+                                                </div>
+                                                <div class="div-margin side-by-side">
+                                                    <InputTextEdit :hideIcon="true" v-model="lesson.videoTime" />
+                                                </div>
+                                            </div>
+                                            <InputTextEdit :hideIcon="true" v-model="lesson.description" />
+
+                                        </b-col>
+                                        <b-col sm="2">
+                                            <div class="icon-play text-center" @click="select(lesson)">
+                                                <i class="fa-solid fa-code"></i>
+                                                <span> Embed</span>
+                                            </div>
+                                            <div class="text-center">
+                                                <div v-if="lesson.videoUrl">
+                                                    <div class="div-icon-check">
+                                                        <i class="fa-solid fa-circle-check"></i>
+                                                    </div>
+                                                </div>
+                                                <div v-else>
+                                                    <div class="div-icon-danger">
+                                                        <i class="fa-sharp fa-solid fa-circle-xmark"></i>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </b-col>
+                                        <b-col sm="2">
+                                            <div class="text-right">
+                                                <div class="div-close" @click="removeLesson(module, lessonIndex)">
+                                                    <i class="fa-solid fa-xmark"></i>
+                                                </div>
+                                            </div>
+                                        </b-col>
+                                    </b-row>
+                                </Molded>
+                                <br>
+                            </div>
+                        </draggable>
+                    </div>
+                </Molded>
+                <br />
+            </div>
+        </draggable>
+        <Modal :title="selected.title" :width="900" v-show="showModal('play')">
+            <b-col xs="12" sm="12" md="12" lg="12" xl="12">
+                <div class="text-center">
+                    <ButtonFilter :options="[
+                        {
+                            title: 'Visualizar',
+                            classIcon: 'fa-solid fa-eye',
+                            value: 'viewText',
+                        },
+                        {
+                            title: 'Html',
+                            classIcon: 'fa-solid fa-code',
+                            value: 'codeEditor',
+                        },
+                    ]" initialOption="viewText" v-model="selectType" />
+                </div>
+                <Molded v-show="selectType == 'viewText'">
+                    <div>
+                        <div v-show="!selected.videoUrl">Nenhum vídeo para ser exibido!</div>
+                        <div class="div-view" v-html="selected.videoUrl"></div>
+                    </div>
+                </Molded>
+                <TextArea :maxLength="5000" v-if="selectType == 'codeEditor'" v-model="selected.videoUrl" />
+            </b-col>
+        </Modal>
+    </div>
+</template>
+  
+<script>
+import draggable from 'vuedraggable';
+import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
+import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
+import TextArea from "@nixweb/nixloc-ui/src/component/forms/TextArea";
+import InputTextEdit from "@nixweb/nixloc-ui/src/component/forms/InputTextEdit";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+import CodeEditor from "@nixweb/nixloc-ui/src/component/shared/CodeEditor";
+import ButtonFilter from "@nixweb/nixloc-ui/src/component/forms/ButtonFilter";
+
+import { mapGetters, mapActions, mapMutations } from "vuex";
+
+export default {
+    components: {
+        draggable, Molded, InputText, InputTextEdit, Button, Modal, ButtonFilter, TextArea
+    },
+    data() {
+        return {
+            urlCreateOrUpdate: "/api/v1/support/training/create-or-update",
+            urlGet: "/api/v1/support/training/get",
+            courseModules: [],
+            newLesson: {
+                title: '',
+                description: '',
+                videoUrl: '',
+                videoTime: '',
+            },
+            newModule: '',
+            selected: {},
+            selectType: "viewText",
+            selectedModuleName: "",
+            saveTimer: null,
+            moduleSelected: ""
+        };
+    },
+    mounted() {
+        this.get()
+    },
+    computed: {
+        ...mapGetters("generic", ["showModal"]),
+    },
+    methods: {
+        ...mapActions("generic", ["getApi", "postApi"]),
+        ...mapMutations("generic", ["openModal", "hideModal"]),
+        save() {
+            let params = {
+                url: this.urlCreateOrUpdate,
+                obj: { course: JSON.stringify(this.courseModules) },
+                notNotifyToast: true
+            };
+            this.postApi(params).then(() => { });
+        },
+        get() {
+            let params = { url: this.urlGet, obj: {} };
+            this.getApi(params).then((response) => {
+                if (response.success) {
+                    this.courseModules = JSON.parse(response.content.course);
+                }
+            });
+        },
+        addModule() {
+            if (this.newModule.trim() !== '') {
+                this.courseModules.push({
+                    name: this.newModule,
+                    lessons: [],
+                });
+                this.newModule = '';
+            }
+        },
+        addLesson(params) {
+            if (params.newLesson.title.trim() !== '' && params.newLesson.description.trim() !== '' && params.newLesson.videoTime.trim() !== '') {
+                params.module.lessons.push(params.newLesson);
+                this.newLesson = {
+                    title: '',
+                    description: '',
+                    videoUrl: '',
+                    videoTime: '',
+                };
+            } else {
+                alert("Preencha todos os campos!");
+            }
+        },
+        removeLesson(module, index) {
+            module.lessons.splice(index, 1);
+        },
+        removeModule(params) {
+            const module = this.courseModules[params.id];
+            if (module.lessons.length === 0) {
+                this.courseModules.splice(params.id, 1);
+            }
+        },
+        select(lesson) {
+            this.selected = lesson;
+            this.openModal("play");
+        },
+        showLesson(moduleName) {
+            this.moduleSelected = moduleName;
+        },
+    },
+    watch: {
+        courseModules: {
+            handler() {
+                if (this.saveTimer) {
+                    clearTimeout(this.saveTimer);
+                }
+
+                this.saveTimer = setTimeout(() => {
+                    this.save();
+                }, 1000);
+            },
+            deep: true,
+        },
+    },
+};
+</script>
+  
+<style scoped>
+.div-btn-add {
+    margin-top: 30px;
+}
+
+.div-icon-add {
+    font-size: 25px;
+    color: #577696;
+    cursor: pointer;
+}
+
+.div-close {
+    font-size: 20px;
+    color: red;
+    cursor: pointer;
+}
+
+.title-module {
+    font-size: 18px;
+    margin-left: 5px;
+}
+
+.title-time {
+    font-size: 12px;
+    color: darkblue;
+}
+
+.div-margin {
+    margin-right: 5px;
+}
+
+.icon-play {
+    font-size: 14px;
+    cursor: pointer;
+}
+
+.div-add-lesson {
+    cursor: pointer;
+    color: #577696;
+    margin-bottom: 10px;
+    margin-left: 5px;
+}
+
+.div-icon-check {
+    color: green;
+}
+
+.div-icon-danger {
+    color: red;
+}
+
+.title-link {
+    color: #3f529b;
+    font-size: 14px;
+    font-weight: 400;
+    cursor: pointer;
+    margin-left: 10px;
+}
+
+.title-hide {
+    color: rgb(224, 33, 7);
+    font-size: 14px;
+    font-weight: 400;
+    cursor: pointer;
+    margin-left: 10px;
+}
+</style>