@nixweb/nixloc-ui 0.0.273 → 0.0.274

package/src/component/shared/DocumentEditor.vue

@@ -0,0 +1,150 @@
+<template>
+  <div>
+    <div class="form-group">
+      <div>
+        <div class="document-editor__toolbar"></div>
+        <div class="document-editor__editable-container">
+          <div id="template-dev">
+            <ckeditor
+              :editor="editor"
+              v-model="documentHtml"
+              @ready="onReady"
+              @focus="changed"
+            ></ckeditor>
+          </div>
+        </div>
+      </div>
+    </div>
+    <br />
+  </div>
+</template>
+
+<script>
+import CKEditor from "ckeditor5-custom-build/build/ckeditor";
+
+import { mapState, mapMutations } from "vuex";
+
+export default {
+  name: "DocumentEditor",
+  components: {
+    CKEditor,
+  },
+  data() {
+    return {
+      editor: CKEditor,
+    };
+  },
+  computed: {
+    ...mapState("generic", ["documentHtml"]),
+    documentHtml: {
+      get() {
+        return this.$store.state.generic.documentHtml;
+      },
+      set(value) {
+        this.updateDocumentHtml(value);
+      },
+    },
+  },
+  methods: {
+    ...mapMutations("generic", ["updateDocumentHtml", "addEvent"]),
+    onReady(editor) {
+      const toolbarContainer = document.querySelector(
+        ".document-editor__toolbar"
+      );
+      toolbarContainer.appendChild(editor.ui.view.toolbar.element);
+    },
+    changed() {
+      this.addEvent({ name: "documentEditorChanged" });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.document-editor {
+  border-radius: var(--ck-border-radius);
+  max-height: 700px;
+  display: flex;
+  flex-flow: column nowrap;
+  margin: auto !important;
+}
+
+.document-editor__toolbar {
+  z-index: 1 !important;
+  min-width: 1100px;
+}
+
+.document-editor__toolbar .ck-toolbar {
+  border-radius: 0;
+}
+
+.document-editor__editable-container {
+  padding: 10px;
+  border: 1px solid #e4e6ec;
+  background: var(--ck-color-base-foreground);
+}
+
+.document-editor__editable-container .ck-editor__editable {
+  width: 26cm;
+  height: 700px;
+  padding: 20px;
+  border: 1px hsl(0, 0%, 82.7%) solid;
+  border-radius: var(--ck-border-radius);
+  background: white;
+  box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.1);
+  margin: 0 auto;
+}
+
+.document-editor .ck-content,
+.document-editor .ck-heading-dropdown .ck-list .ck-button__label {
+  font: 16px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+.document-editor .ck-heading-dropdown .ck-list .ck-button__label {
+  line-height: calc(
+    1.7 * var(--ck-line-height-base) * var(--ck-font-size-base)
+  );
+  min-width: 6em;
+}
+
+.document-editor
+  .ck-heading-dropdown
+  .ck-list
+  .ck-button:not(.ck-heading_paragraph)
+  .ck-button__label {
+  transform: scale(0.8);
+  transform-origin: left;
+}
+
+.document-editor .ck-content h2,
+.document-editor .ck-heading-dropdown .ck-heading_heading1 .ck-button__label {
+  font-size: 2.18em;
+  font-weight: normal;
+}
+
+.document-editor .ck-content h2 {
+  line-height: 1.37em;
+  padding-top: 0.342em;
+  margin-bottom: 0.142em;
+}
+
+.document-editor .ck-content h3,
+.document-editor .ck-heading-dropdown .ck-heading_heading2 .ck-button__label {
+  font-size: 1.75em;
+  font-weight: normal;
+  color: hsl(203, 100%, 50%);
+}
+
+.document-editor
+  .ck-heading-dropdown
+  .ck-heading_heading2.ck-on
+  .ck-button__label {
+  color: var(--ck-color-list-button-on-text);
+}
+
+.document-editor .ck-content h3 {
+  line-height: 1.86em;
+  padding-top: 0.171em;
+  margin-bottom: 0.357em;
+}
+</style>

package/src/component/shared/DocumentPreview.vue

@@ -0,0 +1,61 @@
+<template>
+  <v-runtime-template :template="`<div>${template}</div>`" />
+</template>
+
+<script>
+import VRuntimeTemplate from "v-runtime-template";
+
+import { mapGetters } from "vuex";
+
+export default {
+  name: "DocumentPreview",
+  components: {
+    VRuntimeTemplate,
+  },
+  props: {
+    template: String,
+    d: Object,
+  },
+  methods: {
+    periodo(grupo, campo) {
+      var item = this.d.itensLocacao.find(item => item.grupo == grupo);
+      const campoMap = {
+        "dataEntrega": item.dataEntrega,
+        "horaEntrega": item.horaEntrega,
+        "dataInicio": item.dataInicio,
+        "horaInicio": item.horaInicio,
+        "dataFim": item.dataFim,
+        "horaFim": item.horaFim,
+        "dataRetirada": item.dataRetirada,
+        "horaRetirada": item.horaRetirada,
+        "ano": item.ano,
+        "mes": item.mes,
+        "dia": item.dia,
+        "hora": item.hora,
+        "minuto": item.minuto
+      };
+      return campoMap[campo];
+    },
+    somaGrupo(grupo) {
+      let sum = [];
+      this.d.itensLocacao.forEach((item) => {
+        if (item.grupo === grupo) {
+          sum.push(item.totalValue);
+        }
+      });
+      return sum.reduce((a, b) => a + b, 0);
+    },
+    convertToNumber(value) {
+      return parseFloat(value.replace("R$", "").replace(",", "."));
+    },
+  },
+  computed: {
+    ...mapGetters("generic", ["groupBy"]),
+    produtoAgrupado() {
+      var group = this.groupBy({ array: this.d.itensLocacao, key: "grupo" });
+      return group;
+    },
+
+  },
+};
+</script>

package/src/component/shared/DocumentPublic.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="main">
+    <div class="content">
+      <DocumentPreview :template="template" :d="d" />
+    </div>
+  </div>
+</template>
+<script>
+import DocumentPreview from "@nixweb/nixloc-ui/src/component/shared/DocumentPreview.vue";
+
+export default {
+  name: "DocumentPublic",
+  components: {
+    DocumentPreview,
+  },
+  props: {
+    template: String,
+    d: Object,
+  },
+};
+</script>
+
+<style scoped>
+.main {
+  background-color: white;
+}
+
+.content {
+  margin: auto;
+}
+</style>

package/src/component/shared/ExportExcel.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <download-excel
+      :fields="column"
+      :data="data"
+      :before-finish="exportFinished"
+      worksheet="Planilha"
+      :name="`${fileName}.xls`"
+    >
+      <i class="fas fa-file-excel"></i>
+    </download-excel>
+  </div>
+</template>
+
+<script>
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+
+import { mapMutations } from "vuex";
+
+export default {
+  name: "ExportExcel",
+  props: {
+    header: Array,
+    data: Array,
+  },
+  components: {
+    Button,
+  },
+  data() {
+    return {
+      json_meta: [
+        [
+          {
+            key: "charset",
+            value: "utf-8",
+          },
+        ],
+      ],
+    };
+  },
+  methods: {
+    ...mapMutations("generic", ["removeLoading"]),
+    exportFinished() {
+      this.removeLoading(["exportExcel"]);
+    },
+  },
+  computed: {
+    column() {
+      var object = this.header.reduce(
+        (obj, item) => Object.assign(obj, { [item.title]: item.field }),
+        {}
+      );
+      return object;
+    },
+    fileName() {
+      return this.$route.matched[0].props.default.report;
+    },
+  },
+};
+</script>

package/src/component/shared/ExportPDF.vue

@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <div v-show="carregando" class="full-width">
+      <Loading
+        :center="true"
+        :width="70"
+        :height="70"
+        message="Por favor aguarde, estamos gerando a impressão..."
+      />
+    </div>
+    <vue-html2pdf
+      :show-layout="false"
+      :float-layout="false"
+      :enable-download="false"
+      :preview-modal="true"
+      :paginate-elements-by-height="1400"
+      :filename="fileName"
+      :pdf-quality="2"
+      :manual-pagination="false"
+      :pdf-format="tamanhoPagina"
+      :pdf-orientation="orientacao"
+      pdf-content-width="100%"
+      @progress="onProgress($event)"
+      @hasStartedGeneration="hasStartedGeneration()"
+      @hasGenerated="hasGenerated($event)"
+      ref="html2Pdf"
+      :html-to-pdf-options="htmlToPdfOptions"
+    >
+      <section slot="pdf-content">
+        <section class="pdf-item">
+          <ScrollBar :height="alturaBarraRolagem">
+            <div id="height">
+              <slot></slot>
+            </div>
+          </ScrollBar>
+        </section>
+      </section>
+    </vue-html2pdf>
+    <br />
+    <b-row
+      ><b-col sm="12" class="text-right">
+        <button @click="gerarRelatorio()">gerar</button></b-col
+      ></b-row
+    >
+  </div>
+</template>
+
+<script>
+import Loading from "./Loading.vue";
+import ScrollBar from "../layout/Scrollbar.vue";
+import VueHtml2pdf from "vue-html2pdf";
+
+export default {
+  name: "ExportPDF",
+  components: { VueHtml2pdf, ScrollBar, Loading },
+  props: {
+    title: String,
+    fileName: String,
+    tamanhoPagina: String,
+    orientacao: String,
+    larguraImpressao: Number,
+  },
+  data() {
+    return {
+      alturaBarraRolagem: 450,
+      carregando: false,
+      htmlToPdfOptions: {
+        margin: [5, 3, 5, 3],
+      },
+    };
+  },
+  methods: {
+    onProgress(event) {
+      if (event == 100) {
+        this.alturaBarraRolagem = 450;
+        this.carregando = false;
+      }
+    },
+    hasStartedGeneration() {
+      console.log("começou");
+    },
+    hasDownloaded() {
+      console.log("finalizou");
+    },
+    gerarRelatorio() {
+      const listElm = document.querySelector("#height");
+      this.alturaBarraRolagem = listElm.scrollHeight;
+      this.carregando = true;
+      let self = this;
+      setTimeout(function () {
+        self.$refs.html2Pdf.generatePdf();
+      }, 1000);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.button {
+  margin-bottom: 20px;
+}
+
+.title {
+  font-size: 20px;
+}
+
+.full-width {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background: white;
+  z-index: 99999;
+}
+</style>

package/src/component/shared/FullCalendar.vue

@@ -0,0 +1,174 @@
+<template>
+  <div>
+    <Loading type="line" :center="false" v-show="loading" />
+    <FullCalendar :options="calendarOptions" />
+  </div>
+</template>
+
+<script>
+import "@fullcalendar/core/vdom"; // solves problem with Vite
+import FullCalendar from "@fullcalendar/vue";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import listPlugin from "@fullcalendar/list";
+
+import interactionPlugin from "@fullcalendar/interaction";
+import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+
+import { mapGetters } from "vuex";
+
+export default {
+  components: {
+    FullCalendar,
+    Loading,
+  },
+  props: {
+    changedCalendar: Function,
+    clickedCalendar: Function,
+    clickedEvent: Function,
+    loading: Boolean,
+  },
+  data() {
+    return {
+      calendarOptions: {
+        plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
+        initialView: "dayGridMonth",
+        locale: "pt-br",
+        allDayText: "Dia inteiro",
+        headerToolbar: {
+          start: "today prev,next",
+          center: "title",
+          end: "timeGridDay,dayGridWeek,dayGridMonth,listYear",
+        },
+        buttonText: {
+          today: "Hoje",
+          month: "Mês",
+          week: "Semana",
+          day: "Dia",
+          list: "Ano",
+        },
+        dateClick: this.handleDateClick,
+        eventClick: this.handleEventClick,
+        viewDidMount: this.handleEventRender,
+        datesSet: this.handleChange,
+        events: [],
+      },
+    };
+  },
+  computed: {
+    ...mapGetters("generic", ["event"]),
+  },
+  methods: {
+    handleChange(arg) {
+      if (this.changedCalendar) this.changedCalendar(arg);
+    },
+    handleEventRender(arg) { },
+    handleDateClick: function (arg) {
+      if (this.clickedCalendar) this.clickedCalendar(arg);
+    },
+    handleEventClick: function (arg) {
+      if (this.clickedEvent) this.clickedEvent(arg.event._def);
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "updateCalendar")
+          event.data.forEach(item => {
+            this.calendarOptions.events.push(item);
+          });
+
+        if (event.name == "cleanCalendar")
+          this.calendarOptions.events = [];
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+<style>
+.fc .fc-daygrid-day.fc-day-today {
+  background-color: #f1f3f4;
+}
+
+.fc-button-primary {
+  background-color: #4bb4e2 !important;
+  border-color: white !important;
+  border: 0px !important;
+  margin-left: 5px !important;
+  border-radius: 15px !important;
+  font-size: 13px !important;
+  cursor: pointer !important;
+  border: none !important;
+  min-width: 33px !important;
+  font-weight: normal !important;
+  font-style: normal !important;
+  letter-spacing: 1px !important;
+  -webkit-box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 12%) !important;
+  -moz-box-shadow: 0px 10px 20px -6px rgba(0, 0, 0, 0.12) !important;
+  box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 12%) !important;
+}
+
+.fc-timeGridDay-button {
+  background-color: #577696 !important;
+  border-color: white !important;
+}
+
+.fc-dayGridWeek-button {
+  background-color: #577696 !important;
+  border-color: white !important;
+}
+
+.fc-dayGridMonth-button {
+  background-color: #577696 !important;
+  border-color: white !important;
+}
+
+.fc-listYear-button {
+  background-color: #577696 !important;
+  border-color: white !important;
+}
+
+.fc .fc-daygrid-day-number {
+  font-size: 16px !important;
+}
+
+.fc-button-active {
+  background-color: #89ceeb !important;
+}
+
+.fc-event-title {
+  color: black !important;
+  cursor: pointer !important;
+}
+
+.fc-event-time {
+  color: black !important;
+  font-weight: normal !important;
+}
+
+.fc-list-day-side-text {
+  color: black !important;
+}
+
+.fc-list-day-text {
+  color: black !important;
+}
+
+.fc-col-header-cell-cushion {
+  color: black !important;
+}
+
+.fc-daygrid-day-number {
+  color: black !important;
+}
+
+.fc-list-event-title {
+  cursor: pointer !important;
+}
+
+.fc-button-primary:hover {
+  background: #3e90b3 !important;
+}
+
+</style>

package/src/component/shared/HeaderReport.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="div-header">
+    <div class="title-report-header">
+      <span v-if="!title">
+        Relatório
+        <span>{{ $route.params.name }}</span>
+      </span>
+      <span v-else>
+        <span>{{ title }}</span>
+      </span>
+    </div>
+    <div v-if="!title" class="side-by-side div-tag" v-for="tag in tags" :key="tag.id">
+      <span>{{ tag.title }}</span> <span>{{ tag.value }}</span>
+      <span>,</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+  name: "HeaderReport",
+  props: {
+    title: String
+  },
+  computed: {
+    ...mapGetters("report", ["tags"]),
+    fileName() {
+      return this.$route.matched[0].props.default.report;
+    },
+  },
+};
+</script>
+<style scoped>
+.div-header {
+  margin-bottom: 20px;
+}
+
+.div-tag {
+  margin-right: 10px;
+}
+
+.title-report-header {
+  font-size: 18px;
+}
+</style>

package/src/component/shared/HorizontalFilter.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="filter-horizontal">
+    <Collapse :buttonShow="{
+      title: 'Mais filtros',
+      icon: 'fas fa-arrow-alt-circle-down',
+      type: 'info',
+    }" :buttonHide="{
+      title: 'Menos filtros',
+      icon: 'fas fa-arrow-alt-circle-up',
+      type: 'warning',
+    }">
+      <slot name="content-filter-horizontal"></slot>
+      <b-row>
+        <b-col :sm="showTotalPerPage ? 10 : 12"></b-col>
+        <b-col xs="12" sm="12" md="12" lg="2" xl="2" v-if="showTotalPerPage">
+          <SelectStatic title="Mostrar" fieldTarget="totalPerPage" :initialValue="initialValue" :data="[
+      { content: '10', id: 10 },
+      { content: '20', id: 20 },
+      { content: '30', id: 30 },
+      { content: '50', id: 50 },
+      { content: '100', id: 100 },
+    ]" v-model="totalPerPage" />
+        </b-col>
+      </b-row>
+    </Collapse>
+  </div>
+</template>
+
+<script>
+import Collapse from "./Collapse.vue";
+import SelectStatic from "../forms/SelectStatic.vue";
+import Select from "../forms/Select";
+
+import { mapMutations, mapState } from "vuex";
+
+export default {
+  name: "ListViewWithHandlerData",
+  components: { Select, SelectStatic, Collapse },
+  props: {
+    showTotalPerPage: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      initialValue: {}
+    }
+  },
+  created() {
+    this.initialValue = { content: this.paginations.totalPerPage, id: this.paginations.totalPerPage }
+  },
+  computed: {
+    ...mapState("generic", ["paginations"]),
+    totalPerPage: {
+      get() {
+        return this.$store.state.generic.paginations.totalPerPage;
+      },
+      set(value) {
+        this.updateTotalPerPage(value);
+      },
+    },
+  },
+  methods: {
+    ...mapMutations("generic", [
+      "updateTotalPerPage",
+    ]),
+  }
+};
+</script>
+
+<style scoped>
+.filter-horizontal {
+  margin-bottom: 5px;
+}
+</style>