@nixweb/nixloc-ui 1.16.0 → 1.17.0

package/src/component/shared/FullCalendar.vue

@@ -0,0 +1,176 @@
+<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,64 @@
+<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>
+    </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>

package/src/component/shared/ListNotifications.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <ScrollBar :minHeight="400" :maxHeight="400">
+      <div>
+        <br />
+        <table class="table table-responsive-xs">
+          <thead>
+            <tr>
+              <th class="title-header">Mensagem</th>
+            </tr>
+          </thead>
+          <tbody v-for="error in listError">
+            <tr>
+              <td>
+                <span class="message"> {{ error }}</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </ScrollBar>
+  </div>
+</template>
+
+<script>
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+
+export default {
+  name: "ListNotifications",
+  props: {
+    listError: Array,
+  },
+  components: {
+    ScrollBar,
+  },
+};
+</script><style scoped>
+.table th,
+.table td {
+  height: 10px !important;
+  padding-left: 5px !important;
+  padding-top: 7px !important;
+  padding-bottom: 5px !important;
+  padding-right: 5px !important;
+  padding-left: 10px !important;
+  border-bottom: 0px !important;
+}
+
+.title-header {
+  font-size: 14px;
+  color: #757d8c;
+  font-weight: 400;
+}
+
+.tabela-principal {
+  font-size: 14px;
+  max-width: 200px;
+}
+
+.tabela-descricao {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 200px;
+}
+
+.message {
+  color: red;
+}
+</style>

package/src/component/shared/Loading.vue

@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <div v-if="type == 'bubbles'" :class="{ loading: center }">
+      <vue-loading
+        type="bubbles"
+        :color="color"
+        :size="{ width: width + 'px', height: height + 'px' }"
+      ></vue-loading>
+    </div>
+    <div v-if="type == 'line'">
+      <div class="loader">
+        <div class="loader__element"></div>
+      </div>
+    </div>
+    <div :class="{ 'loading-text': center }">
+      <div>
+        <div class="message">{{ message }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Loading",
+  props: {
+    height: {
+      type: Number,
+      default: 70,
+    },
+    width: {
+      type: Number,
+      default: 70,
+    },
+    center: {
+      type: Boolean,
+      default: true,
+    },
+    color: {
+      type: String,
+      default: "#D98621",
+    },
+    type: {
+      type: String,
+      default: "bubbles",
+    },
+    message: String,
+  },
+};
+</script>
+
+<style scoped>
+.loading {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.loading-text {
+  position: absolute;
+  left: 50%;
+  top: 45%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.message {
+  font-size: 15px;
+  margin-top: 5px;
+}
+
+.loader {
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  align-content: center;
+  justify-content: flex-start;
+  z-index: 100000;
+}
+
+.loader__element {
+  height: 3px;
+  width: 100%;
+  background: #fbf2e8;
+}
+
+.loader__element:before {
+  content: "";
+  display: block;
+  background-color: #fca944;
+  height: 3px;
+  width: 0;
+  animation: getWidth 1s ease-in infinite;
+}
+
+@keyframes getWidth {
+  100% {
+    width: 100%;
+  }
+}
+</style>

package/src/component/shared/LoadingCard.vue

@@ -0,0 +1,65 @@
+<template>
+    <div class="loading-skeleton" :style="'height:' + height + 'px'">
+        <div v-for="index in totalLine" :key="index" class="line"
+            :style="{ height: getRandomHeight() + 'px', width: '100%' }"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "LoadingCard",
+    props: {
+        totalLine: {
+            type: Number,
+            default: 3,
+            validator(value) {
+                return value >= 1 && value <= 10;
+            }
+        },
+        height: {
+            type: Number,
+            default: 200,
+            validator(value) {
+                return value > 0;
+            }
+        }
+    },
+    methods: {
+        getRandomHeight() {
+            const minHeight = 10; 
+            const maxHeight = 30;
+            return Math.floor(Math.random() * (maxHeight - minHeight + 1)) + minHeight;
+        }
+    }
+};
+</script>
+
+<style scoped>
+.loading-skeleton {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    max-width: 400px;
+    margin: 0 auto;
+    overflow: hidden;
+}
+
+.line {
+    width: 100%;
+    background: linear-gradient(90deg, #f0f0f0 25%, #d8d8d8 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite linear;
+    border-radius: 4px;
+    opacity: 0.4;
+}
+
+@keyframes shimmer {
+    0% {
+        background-position: -200% 0;
+    }
+
+    100% {
+        background-position: 200% 0;
+    }
+}
+</style>

package/src/component/shared/LoadingMoreButton.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <Button
+      key="loadingMore"
+      eventName="loadingMore"
+      type="warning"
+      title="Carregar mais..."
+      classIcon="fas fa-redo"
+      size="medium"
+    />
+  </div>
+</template>
+<script>
+import Button from "../forms/Button.vue";
+export default {
+  name: "LoadingMoreButton",
+  components: { Button },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>

package/src/component/shared/Messages.vue

@@ -0,0 +1,139 @@
+<template>
+  <div>
+    <div
+      class="div-message"
+      :class="{ 'div-message-modal-open': modal.open }"
+      v-if="storageNotification.length > 0"
+    >
+      <Alert type="danger">
+        <div class="side-by-side" v-for="(notification, index) in storageNotification" :key="index">
+          <div class="side-by-side text">
+            {{ notification.message }}
+          </div>
+        </div>
+        <div class="progress-bar-container">
+          <div class="progress-bar" :style="{ width: progressWidth + '%' }"></div>
+        </div>
+      </Alert>
+    </div>
+  </div>
+</template>
+
+<script>
+import Alert from "../layout/Alert.vue";
+import { mapState, mapMutations } from "vuex";
+
+export default {
+  components: { Alert },
+  name: "Messages",
+  data() {
+    return {
+      maxSeconds: 10,
+      countdown: 10,
+      storageNotification: [],
+      progressWidth: 100,
+    };
+  },
+  computed: {
+    ...mapState("generic", ["notifications", "modal"]),
+  },
+  watch: {
+    notifications() {
+      if (this.notifications.length > 0) {
+        this.storageNotification = this.notifications;
+        this.countdown = this.maxSeconds;
+        this.progressWidth = 100;
+        this.startCountdown();
+      }
+    },
+    countdown(newCountdown) {
+      if (newCountdown === 0) {
+        this.storageNotification = [];
+        this.removeNotificarions();
+      }
+    },
+  },
+  methods: {
+    ...mapMutations("generic", ["removeNotificarions"]),
+
+    startCountdown() {
+      clearInterval(this.countdownInterval);
+      this.countdownInterval = setInterval(() => {
+        if (this.countdown > 0) {
+          this.countdown--;
+          this.updateProgressBar();
+        } else {
+          clearInterval(this.countdownInterval);
+        }
+      }, 1000);
+    },
+
+    updateProgressBar() {
+      // Atualiza a largura da barra de progresso
+      this.progressWidth = (this.countdown / this.maxSeconds) * 100;
+    },
+  },
+  beforeDestroy() {
+    clearInterval(this.countdownInterval);
+  },
+};
+</script>
+
+<style scoped>
+.div-message {
+  position: fixed;
+  top: 16px;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  width: 40vw;
+  max-height: calc(100vh - 32px);
+  overflow-y: auto;
+  transition: all 0.5s ease !important;
+  z-index: 9999;
+}
+
+.div-message-modal-open {
+  top: 16px;
+}
+
+.side-by-side {
+  display: flex;
+  justify-content: space-between;
+}
+
+.text {
+  margin-right: 10px;
+  word-break: break-word;
+}
+
+.progress-bar-container {
+  width: 100%;
+  height: 3px;
+  background-color: #e0e0e0;
+  border-radius: 5px;
+  margin-top: 10px;
+}
+
+.progress-bar {
+  height: 100%;
+  background-color: #FF0201;
+  border-radius: 50px;
+  transition: width 1s ease-out;
+}
+
+.div-countdown {
+  margin-top: 10px;
+  font-size: 16px;
+}
+
+@media (max-width: 768px) {
+  .div-message {
+    top: 12px;
+    right: 12px;
+    left: 12px;
+    width: auto;
+    max-height: calc(100vh - 24px);
+  }
+}
+</style>

package/src/component/shared/PDFViewer.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <iframe src="https://espaco.blob.core.windows.net/nixloc-preview/H0R078NIPG6BXT8703S0_3.pdf" width="100%" height="800px"></iframe>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "PDFViewer",
+  props: {
+    pdfSrc: String,
+  }
+};
+</script>
+
+<style>
+iframe {
+  width: 100%;
+  height: 800px;
+  border: 0px;
+  border-radius: 10px;
+}
+</style>