@nixweb/nixloc-ui 0.0.300 → 0.0.301

package/src/component/training/Course.vue

@@ -0,0 +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>
+  

package/src/component/training/CourseView.vue

@@ -0,0 +1,190 @@
+<template>
+    <div>
+        <div v-if="courseModules.length == 0">
+            Nenhum curso cadastrado!
+        </div>
+        <div v-for="(module, moduleIndex) in courseModules" :key="moduleIndex">
+            <Molded>
+                <b-row>
+                    <b-col sm="10">
+                        <div class="title-module">
+                            <i class="fa-solid fa-video"></i>
+                            {{ 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-row>
+                <div v-show="moduleSelected == module.name" 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 title-lesson side-by-side">
+                                        {{ lesson.title }}
+                                    </div>
+                                </div>
+                                <span class="title-description"> {{ lesson.description }}</span>
+                            </b-col>
+                            <b-col sm="3">
+                                <div class="div-time 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">
+                                    {{ lesson.videoTime }}
+                                </div>
+                            </b-col>
+                            <b-col sm="1">
+                                <div class="icon-play" @click="showMovie(lesson)">
+                                    <i class="fa-solid fa-play"></i>
+                                </div>
+                            </b-col>
+                        </b-row>
+                    </Molded>
+                    <br>
+                </div>
+            </Molded>
+            <br />
+        </div>
+        <Modal :title="selectedLesson.title" :width="900" v-show="showModal('play')">
+            <b-col xs="12" sm="12" md="12" lg="12" xl="12">
+                <Molded>
+                    <div class="div-view" v-html="selectedLesson.videoUrl"></div>
+                </Molded>
+            </b-col>
+        </Modal>
+    </div>
+</template>
+  
+<script>
+
+import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+
+import axios from "@/config/axios";
+
+import { mapGetters, mapMutations } from "vuex";
+
+export default {
+    components: {
+        Molded, Modal
+    },
+    data() {
+        return {
+            urlGet: "",
+            environment: "",
+            courseModules: [],
+            moduleSelected: "",
+            selectedLesson: {}
+        };
+    },
+    mounted() {
+        this.get()
+    },
+    created() {
+        this.environment = process.env.VUE_APP_API_URL == "https://backend-cliente-prod.azurewebsites.net/" ? "prod" : "dev";
+        if (this.environment == "prod") this.urlGet = "https://backend-adm-prod.azurewebsites.net/api/v1/support/training/get";
+        if (this.environment == "dev") this.urlGet = "https://backend-adm-dev.azurewebsites.net/api/v1/support/training/get";
+    },
+    computed: {
+        ...mapGetters("generic", ["showModal"]),
+    },
+    methods: {
+        ...mapMutations("generic", ["openModal", "hideModal"]),
+        showLesson(moduleName) {
+            this.moduleSelected = moduleName;
+        },
+        showMovie(lesson) {
+            this.selectedLesson = lesson;
+            this.openModal("play");
+        },
+        get() {
+            axios.get(this.urlGet, {})
+                .then(response => {
+                    if (response.data.success) {
+                        this.courseModules = JSON.parse(response.data.content.course);
+                    }
+                })
+        },
+    },
+};
+</script>
+  
+<style scoped>
+.div-title {
+    margin-bottom: 10px;
+}
+
+.title-module {
+    font-size: 15px;
+    margin-bottom: 10px;
+}
+
+.title-lesson {
+    font-size: 14px;
+}
+
+.title-description {
+    font-size: 13px;
+    color: rgb(107, 106, 106);
+}
+
+.title-time {
+    font-size: 12px;
+    color: darkblue;
+}
+
+.div-margin {
+    margin-right: 5px;
+}
+
+.icon-play {
+    font-size: 30px;
+    cursor: pointer;
+    color: darkgreen;
+}
+
+.icon-play:hover {
+    color: green;
+}
+
+.div-time {
+    margin-top: 15px;
+}
+
+.div-arrow {
+    cursor: pointer;
+}
+
+.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>
+  

package/src/component/value-objects/Address.js

@@ -0,0 +1,11 @@
+export default class Address {
+    constructor() {
+        this.zipCode = "";
+        this.street = "";
+        this.number = "";
+        this.complement = "";
+        this.province = "";
+        this.city = "";
+        this.state = { id: "", content: "" };
+    }
+}