@nixweb/nixloc-ui 0.0.127 → 0.0.129

package/src/component/layout/Menu.vue

@@ -6,7 +6,7 @@
           <img :src="urlImage" />
         </div>
       </li>
-      <li>
+      <!-- <li>
         <div :class="{ 'menu-active': menuActive == 'Dashboard' }">
           <a
             href="#"
@@ -25,7 +25,7 @@
             <div class="title">Dashboard</div>
           </a>
         </div>
-      </li>
+      </li>-->
       <li v-for="(item, index) in menuFilter(true)" :key="index">
         <div :class="{ 'menu-active': menuActive == item.module }">
           <a
@@ -72,7 +72,9 @@
               :class="classSubMenu(item.title)"
             >
               <b-row>
-                <b-col sm="1"> <i :class="item.icon" aria-hidden="true"></i></b-col>
+                <b-col sm="1">
+                  <i :class="item.icon" aria-hidden="true"></i
+                ></b-col>
                 <b-col sm="10">
                   <span class="title-sub"> {{ item.title }}</span></b-col
                 ></b-row
@@ -139,13 +141,14 @@ export default {
       this.menu.items.forEach(function (obj) {
         if (obj.isModule == isModule) filter.push(obj);
       });
-      return filter;
+      return filter.sort((a, b) => a.order - b.order);
     },
     subMenuFilter(isModule) {
       let filter = [];
       let self = this;
       this.menu.items.forEach(function (obj) {
-        if (obj.isModule == isModule && obj.module === self.module) filter.push(obj);
+        if (obj.isModule == isModule && obj.module === self.module)
+          filter.push(obj);
       });
       return filter;
     },
@@ -169,19 +172,16 @@ export default {
   width: 350px;
   z-index: 1000;
 }
-
 .div-logo {
-  padding-top: 2px;
-  padding-bottom: 16px;
+  padding-top: 4px;
+  padding-bottom: 6px;
 }
-
 .div-icon {
   width: 35px;
   height: 35px;
   padding-top: 5px;
   margin-left: 38px;
 }
-
 .icon-close {
   margin-right: 60px;
 }
@@ -198,7 +198,6 @@ export default {
   text-align: center;
   width: 100%;
 }
-
 .title-sub {
   margin-left: -3px;
   font-weight: 400;
@@ -207,9 +206,8 @@ export default {
   font-size: 16px;
   font-weight: normal;
 }
-
 img {
-  height: 22px;
-  margin-top: 10px;
+  height: 36px;
+  margin-top: 5px;
 }
 </style>

package/src/component/layout/Molded.vue

@@ -10,18 +10,19 @@ export default {
   props: {
     borderRadius: {
       type: Number,
-      default: 8,
+      default: 6,
     },
   },
 };
 </script>
 <style scoped>
 .molded {
-  border: 1px solid #dbdfe9;
-  background-color: transparent;
+  border: 1px solid #EAEDF3;
+  background-color: white;
   padding-top: 15px;
   padding-left: 30px;
   padding-right: 30px;
   padding-bottom: 10px;
+  box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 3%);
 }
 </style>

package/src/component/layout/Panel.vue

@@ -99,8 +99,8 @@ export default {
 <style scoped>
 .local-container {
   margin: auto;
-  padding-left: 110px;
-  max-width: 1400px;
+  padding-left: 130px;
+  max-width: 1500px;
 }
 
 .div-title {

package/src/component/layout/Tab.vue

@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <b-tabs v-model="tabIndex" id="custom-tab">
+      <template #tabs-start v-if="tabs.length > 8">
+        <div class="arrow-left">
+          <span class="icon">
+            <i class="fa-solid fa-circle-chevron-left" @click="back()"></i>
+          </span>
+        </div>
+      </template>
+      <b-tab v-for="i in tabs" :key="'dyn-tab-' + i" :title="title(i).title">
+        <slot :name="i"></slot>
+      </b-tab>
+      <template #tabs-end v-if="tabs.length > 8">
+        <div class="arrow-right">
+          <span class="icon">
+            <i class="fa-solid fa-circle-chevron-right" @click="prev()"></i>
+          </span>
+        </div>
+      </template>
+    </b-tabs>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    initialTabs: Array,
+    value: Number,
+  },
+  data() {
+    return {
+      tabIndex: 0,
+    };
+  },
+  created() {
+    this.tabIndex = this.value;
+  },
+  computed: {
+    tabs() {
+      let tabs = [];
+      this.initialTabs.forEach((item) => {
+        tabs.push(item.index);
+      });
+      return tabs;
+    },
+  },
+  mounted() {
+    var container = document.getElementById("custom-tab__BV_tab_controls_");
+    container.classList.remove("nav");
+    if (this.tabs.length > 8) container.classList.add("nav-custom");
+    if (this.tabs.length <= 8) container.classList.add("nav-default");
+  },
+  methods: {
+    title(index) {
+      var ret = this.initialTabs.find((x) => x.index == index);
+      return ret;
+    },
+    prev() {
+      var container = document.getElementById("custom-tab__BV_tab_controls_");
+      this.sideScroll(container, "right", 25, 100, 10);
+    },
+    back() {
+      var container = document.getElementById("custom-tab__BV_tab_controls_");
+      this.sideScroll(container, "left", 25, 100, 10);
+    },
+    sideScroll(element, direction, speed, distance, step) {
+      let scrollAmount = 0;
+      var slideTimer = setInterval(function () {
+        if (direction == "left") {
+          element.scrollLeft -= step;
+        } else {
+          element.scrollLeft += step;
+        }
+        scrollAmount += step;
+        if (scrollAmount >= distance) {
+          window.clearInterval(slideTimer);
+        }
+      }, speed);
+    },
+  },
+  watch: {
+    tabIndex(tabIndex) {
+      this.$emit("input", tabIndex);
+    },
+  },
+};
+</script>
+<style>
+.arrow-left {
+  position: absolute;
+  margin-top: 28px;
+  left: 50%;
+}
+
+.arrow-right {
+  position: absolute;
+  margin-top: 28px;
+  left: 53%;
+}
+
+.nav-default {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+
+.nav-custom {
+  display: flex;
+  flex-wrap: nowrap !important;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+  overflow: auto;
+  overflow-y: hidden;
+}
+
+.nav-custom::-webkit-scrollbar {
+  width: 10px;
+  height: 0px;
+}
+
+.icon {
+  color: #c1c1c7;
+  font-size: 24px;
+  padding-left: 10px;
+  cursor: pointer;
+}
+
+.icon:hover {
+  color: #577696;
+}
+</style>

package/src/component/rental/DisplayCalculatePeriod.vue

@@ -0,0 +1,49 @@
+<template>
+  <span>
+    <span> (</span>
+
+    <span :style="'font-size:' + fontSize + 'px'" v-if="periodRent.year > 0">
+      <span> {{ periodRent.year }}</span>
+      <span v-if="periodRent.year == 1"> Ano</span>
+      <span v-if="periodRent.year > 1"> Anos</span>
+    </span>
+
+    <span :style="'font-size:' + fontSize + 'px'" v-if="periodRent.month > 0">
+      <span> {{ periodRent.month }}</span>
+      <span v-if="periodRent.month == 1"> Mês</span>
+      <span v-if="periodRent.month > 1"> Meses</span>
+    </span>
+
+    <span :style="'font-size:' + fontSize + 'px'" v-if="periodRent.day > 0">
+      <span> {{ periodRent.day }}</span>
+      <span v-if="periodRent.day == 1"> Dia</span>
+      <span v-if="periodRent.day > 1"> Dias</span>
+    </span>
+
+    <span :style="'font-size:' + fontSize + 'px'" v-if="periodRent.hour > 0">
+      <span> {{ periodRent.hour }}</span>
+      <span v-if="periodRent.hour == 1"> Hora</span>
+      <span v-if="periodRent.hour > 1"> Horas</span>
+    </span>
+
+    <span :style="'font-size:' + fontSize + 'px'" v-if="periodRent.minute > 0">
+      <span> {{ periodRent.minute }}</span>
+      <span v-if="periodRent.minute == 1"> Minuto</span>
+      <span v-if="periodRent.minute > 1"> Minutos</span>
+    </span>
+
+    <span> )</span>
+  </span>
+</template>
+<script>
+export default {
+  name: "DisplayCalculatePeriod",
+  props: {
+    periodRent: Object,
+    fontSize: {
+      type: Number,
+      default: 16,
+    },
+  },
+};
+</script>

package/src/component/rental/DisplayPeriodRent.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <span>
+      <slot name="start"></slot>
+    </span>
+    <span class="title-delivery" v-if="showDeliveryDevolution"
+      >{{ periodRent.deliveryDateHour }}
+    </span>
+
+    <span v-show="!showOnlyDeliveryDevolution">
+      <span class="title-main" :style="'font-size:' + fontSize + 'px'">{{
+        periodRent.startDateHour
+      }}</span>
+      -
+      <span class="title-main" :style="'font-size:' + fontSize + 'px'">{{
+        periodRent.endDateHour
+      }}</span>
+    </span>
+
+    <span v-show="!showOnlyDeliveryDevolution">
+      <DisplayCalculatePeriod :fontSize="fontSize" :periodRent="periodRent" />
+    </span>
+
+    <span class="title-devolution" v-if="showDeliveryDevolution">
+      {{ periodRent.devolutionDateHour }}
+    </span>
+  </div>
+</template>
+<script>
+import DisplayCalculatePeriod from "./DisplayCalculatePeriod.vue";
+
+export default {
+  name: "DisplayPeriodRent",
+  props: {
+    periodRent: Object,
+    showOnlyDeliveryDevolution: Boolean,
+    showDeliveryDevolution: Boolean,
+    fontSize: {
+      type: Number,
+      default: 16,
+    },
+  },
+  components: {
+    DisplayCalculatePeriod,
+  },
+};
+</script>
+<style scoped>
+.title-delivery {
+  color: #009183;
+}
+
+.title-devolution {
+  color: #3d4eae;
+}
+</style>

package/src/component/rental/DisplayTotalization.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="main side-by-side">
+    <div class="molded-totalization">
+      <div class="title">{{ title }}</div>
+      <div class="value" v-if="currency" :style="_style">
+        {{ value | currency }}
+      </div>
+      <div class="value" v-else :style="_style">
+        {{ value }}
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "DisplayTotalization",
+  props: {
+    title: String,
+    currency: {
+      type: Boolean,
+      default: true,
+    },
+    value: Number,
+    _style: String,
+  },
+};
+</script>
+<style scoped>
+.main {
+  margin-bottom: 10px;
+  margin-right: 20px;
+}
+
+.molded-totalization {
+  height: 63px;
+  border: 1px solid #dbdfe9;
+  border-radius: 30px;
+  padding-left: 8px;
+  padding-right: 15px;
+  margin-bottom: 20px;
+  font-size: 13px;
+  font-weight: 400;
+  min-width: 180px;
+}
+
+.title {
+  padding-left: 10px;
+  color: black !important;
+}
+
+.value {
+  padding-left: 10px;
+  font-size: 18px;
+  font-weight: 700;
+}
+</style>

package/src/component/shared/Confirmation.vue

@@ -4,6 +4,7 @@
       <slot></slot>
     </div>
     <Modal
+      v-if="isModal"
       :title="title"
       :width="450"
       :height="250"
@@ -28,6 +29,22 @@
         </div>
       </b-col>
     </Modal>
+    <div v-else class="div-button text-center">
+      <Button
+        _key="notConfirm"
+        type="edit"
+        title="cancel"
+        size="small"
+        :clicked="cancel"
+      />
+      <Button
+        _key="confirm"
+        :type="type"
+        title="Sim, confirmar"
+        size="medium"
+        :clicked="confirm"
+      />
+    </div>
   </div>
 </template>
 
@@ -47,6 +64,10 @@ export default {
     title: String,
     type: String,
     data: Object,
+    isModal: {
+      type: Boolean,
+      default: true,
+    },
     confirmed: Function,
   },
   methods: {
@@ -58,8 +79,6 @@ export default {
       let self = this;
       setTimeout(function () {
         if (self.confirmed) self.confirmed(self.data);
-        self.removeLoading(["confirm"]);
-        self.hideModal();
       }, 200);
     },
     cancel() {

package/src/component/shared/DocumentPreview.vue

@@ -8,7 +8,7 @@ import VRuntimeTemplate from "v-runtime-template";
 import { mapGetters } from "vuex";
 
 export default {
-  name: "HtmlPreview",
+  name: "DocumentPreview",
   components: {
     VRuntimeTemplate,
   },
@@ -16,10 +16,11 @@ export default {
     template: String,
     d: Object,
   },
+
   methods: {
     sMg(grN) {
       let total = "";
-      this.d.produto.forEach((x) => {
+      this.d.pLoc.forEach((x) => {
         if (x.pGp === grN) return (total = x.pGpT);
       });
       return total;

package/src/component/shared/DocumentPublic.vue

@@ -0,0 +1,34 @@
+<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;
+  min-height: 900px;
+}
+
+.content {
+  width: 1024px;
+  margin: auto;
+  padding: 10px;
+}
+</style>

package/src/component/shared/FullCalendar.vue

@@ -0,0 +1,159 @@
+<template>
+  <div>
+    <Loading type="line" :center="false" v-show="loading" />
+    <FullCalendar ref="cc" :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")
+          this.calendarOptions.events = event.data;
+      },
+      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-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-button-primary:hover {
+  background: #3e90b3 !important;
+}
+</style>

package/src/component/shared/HeaderReport.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="div-header">
-    <div class="title">{{ fileName }}</div>
+    <div class="title">Relatório {{ $route.params.name }}</span></div>
     <div class="side-by-side div-tag" v-for="tag in tags" :key="tag.id">
       <span>{{ tag.title }}</span> <span>{{ tag.value }}</span>
       <span>,</span>