@nixweb/nixloc-ui 1.14.0 → 1.16.0

package/src/components/modules/rental/moviment/MovimentList.vue

@@ -0,0 +1,374 @@
+<template>
+  <div>
+    <div>
+      <Loading type="line" :center="false" v-show="loading" />
+      <b-row>
+        <b-col sm="12">
+          <TableTotalRecords :totalRecords="content.totalRecords" />
+        </b-col>
+      </b-row>
+    </div>
+    <ScrollBar id="items-rent" :minHeight="400" :maxHeight="800">
+      <table class="table table-responsive-xs">
+        <thead>
+          <tr>
+            <th>
+              <span class="title-header">Gerado</span>
+            </th>
+            <th class="text-center">
+              <span class="title-header">Tipo</span>
+            </th>
+            <th class="text-center">
+              <span class="title-header">Usuário</span>
+            </th>
+            <th class="text-center">
+              <span class="title-header">Origem</span>
+            </th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody v-for="item in content.data">
+          <tr>
+            <td>{{ item.generationDate }}</td>
+            <td class="text-center">
+              <div class="badge badge-rent td-margin" v-if="item.statusMovimentName == 'Saída'">
+                Saída
+              </div>
+              <div class="badge badge-returned td-margin" v-if="item.statusMovimentName == 'Retorno'">
+                Retorno
+              </div>
+            </td>
+            <td class="text-center td-margin">{{ item.generationUser }}</td>
+            <td class="text-center td-margin">
+              <span v-if="item.description">
+                {{ item.description }}
+              </span>
+              <span v-else>N/I</span>
+            </td>
+            <td class="text-right">
+              <b-row>
+                <b-col sm="9">
+                  <Button _key="btnPrint" type="info" classIcon="fa-light fa-share-nodes" size="small" :params="item"
+                    :clicked="executePrint" />
+
+                  <Button _key="btnAttachment" type="primary" classIcon="fa-solid fa-paperclip" size="small"
+                    :params="item" :clicked="executeAttachment" />
+                </b-col>
+                <b-col sm="2">
+                  <ButtonSub :itemId="item.id" urlGet="/api/v1/stock/items-moviment/get-all"
+                    eventNameShow="showItemsMoviment" eventNameHide="hideItemsMoviment"
+                    :propsParam="{ any: item.id, noPaginated: true }" v-model="buttonSub" />
+                </b-col>
+              </b-row>
+            </td>
+          </tr>
+          <td colspan="8" v-if="buttonSub.itemId == item.id">
+            <Loading type="line" :center="false" />
+          </td>
+          <td colspan="8" v-if="isShowTableSub(item.id)">
+            <table class="table-sub table table-responsive-xs">
+              <thead>
+                <tr>
+                  <th>
+                    <span class="title-header">Produto</span>
+                  </th>
+                  <th class="text-center">
+                    <span class="title-header">Quantidade</span>
+                  </th>
+                  <th class="text-center" v-if="manageByPatrimony">
+                    <span class="title-header">Patrimônio(s)</span>
+                  </th>
+                  <th class="text-center">
+                    <span class="title-header">Período</span>
+                  </th>
+                </tr>
+              </thead>
+              <tbody v-for="itemMoviment in itensMovimentByMovimentId(item.id)">
+                <tr>
+                  <td>{{ itemMoviment.productFullName }}</td>
+                  <td class="text-center">{{ itemMoviment.quantity }}</td>
+                  <td class="text-center" v-if="manageByPatrimony">
+                    {{ itemMoviment.patrimony }}
+                  </td>
+                  <td class="text-center td-description">
+                    {{ itemMoviment.periodRentName }}
+                  </td>
+                </tr>
+              </tbody>
+              <tbody v-show="itensMovimentByMovimentId(item.id).length == 0">
+                <tr>
+                  <td colspan="8">
+                    <span class="title">Nenhum registro encontrado!</span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </td>
+        </tbody>
+        <tbody v-show="content.totalRecords == 0">
+          <tr>
+            <td colspan="8">
+              <span class="title">Nenhum registro encontrado!</span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </ScrollBar>
+
+    <Modal title="Anexo" :width="950" :height="750" v-if="showModal('attachment')" :onHideModal="onHideModal">
+      <FileManager v-if="showFile" :showInModal="false" source="moviment" :genericId="movimentId" />
+    </Modal>
+  </div>
+</template>
+
+<script>
+
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import ButtonSub from "@nixweb/nixloc-ui/src/component/forms/ButtonSub.vue";
+import TableTotalRecords from "@nixweb/nixloc-ui/src/component/shared/TableTotalRecords.vue";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+import FileManager from "@nixweb/nixloc-ui/src/component/shared/file-manager/FileManager";
+
+import { mapGetters, mapState, mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "ItemsLista",
+  components: {
+    Button,
+    Loading,
+    ScrollBar,
+    TableTotalRecords,
+    Modal,
+    FileManager,
+    ButtonSub,
+  },
+  props: {
+    rent: Object,
+  },
+  data() {
+    return {
+      urlGetApi: "/api/v1/stock/moviment/get-all",
+      data: [],
+      loading: true,
+      movimentId: "",
+      print: false,
+      showFile: false,
+      content: {
+        data: [],
+        totalRecords: 0,
+      },
+      baseParams: {
+        search: undefined,
+        filter: "contains",
+        currentPage: 1,
+        totalPerPage: 20,
+      },
+      itensMoviment: {
+        ids: [],
+        data: [],
+      },
+      buttonSub: {},
+    };
+  },
+  mounted() {
+    this.getAll();
+  },
+  computed: {
+    ...mapGetters("generic", ["showModal"]),
+    ...mapState("generic", ["event"]),
+    ...mapState("user", ["userLogged"]),
+    manageByPatrimony() {
+      return this.userLogged.parameterStock.manageByPatrimony;
+    },
+  },
+  methods: {
+    ...mapActions("generic", ["getApi"]),
+    ...mapMutations("generic", ["openModal", "addEvent", "removeLoading"]),
+    getAll() {
+      this.loading = true;
+      let params = {
+        url: this.urlGetApi,
+        obj: {
+          ...this.baseParams,
+          rentId: this.rent.id,
+          noPaginated: true,
+        },
+      };
+      this.getApi(params).then((response) => {
+        this.content.data = response.content.data;
+        this.content.totalRecords = response.content.totalRecords;
+        this.loading = false;
+      });
+    },
+    isShowTableSub(itemId) {
+      return this.itensMoviment.ids.includes(itemId);
+    },
+    itensMovimentByMovimentId(movimentId) {
+      let filter = this.itensMoviment.data.filter(
+        (x) => x.movimentId == movimentId
+      );
+      return filter;
+    },
+    executePrint(params) {
+      this.addEvent({ name: "printMoviment", data: params.id });
+      this.removeLoading(["btnPrint"]);
+    },
+    executeAttachment(params) {
+      this.movimentId = params.id;
+      this.showFile = true;
+      this.openModal("attachment");
+      this.removeLoading(["btnAttachment"]);
+    },
+    onHideModal() {
+      this.print = false;
+      this.showFile = false;
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "showItemsMoviment") {
+          let self = this;
+
+          setTimeout(function () {
+            self.itensMoviment.ids.push(event.data.itemId);
+          }, 400);
+
+          event.data.data.forEach((item) => {
+            self.itensMoviment.data.push(item);
+          });
+        }
+
+        if (event.name == "hideItemsMoviment") {
+          let filterData = this.itensMoviment.data.filter(
+            (x) => x.movimentId != event.data.itemId
+          );
+
+          this.itensMoviment.data = filterData;
+
+          let filter = this.itensMoviment.ids.filter(
+            (x) => x != event.data.itemId
+          );
+          this.itensMoviment.ids = filter;
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</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;
+}
+
+.table-sub {
+  background-color: #f3f3f3;
+}
+
+.td-description {
+  max-width: 300px !important;
+  word-wrap: break-word !important;
+  font-size: 14px;
+  color: #757d8c;
+  font-style: italic;
+}
+
+.title-header {
+  font-size: 14px;
+  color: #757d8c;
+  font-weight: 400;
+  text-transform: uppercase;
+}
+
+.td-dropdown {
+  overflow: visible;
+}
+
+.group {
+  background-color: #fafafc;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.title-group {
+  font-size: 14px;
+  margin-left: 10px;
+}
+
+.div-warning {
+  margin-bottom: 20px;
+}
+
+.td-product {
+  width: 500px;
+  background-color: #f1f4f9;
+  cursor: pointer;
+}
+
+.td-quantity {
+  width: 150px;
+}
+
+.description {
+  font-weight: 400;
+  color: grey;
+}
+
+.without-group {
+  font-size: 13px;
+  font-style: italic;
+  color: grey;
+}
+
+.icon-cursor {
+  cursor: pointer;
+}
+
+.icon-order-group {
+  color: #779cb3;
+}
+
+.text-order {
+  font-size: 13px;
+  margin-left: 10px;
+  font-style: italic;
+}
+
+.td-checkbox {
+  width: 30px;
+}
+
+.td-margin {
+  margin-top: 10px;
+}
+
+.badge {
+  font-size: 13px !important;
+  margin-left: 5px;
+  border-radius: 10px !important;
+  padding: 8px;
+  color: white;
+}
+
+.badge-rent {
+  background-color: #009183;
+}
+
+.badge-returned {
+  background-color: #b8860b;
+}
+
+.badge-renewed {
+  background-color: #577696;
+}
+</style>

package/src/components/modules/rental/new-items-rent/ApplyDiscount.vue

@@ -0,0 +1,131 @@
+<template>
+    <div class="div-discount">
+        <Alert type="info">
+            <span>
+                Não será aplicado desconto em produto <b>Faturado</b>!
+            </span>
+        </Alert>
+        <div class="sd-wrap">
+            <div class="sd-mode">
+                <button type="button" class="sd-chip" :class="{ active: mode === 'money' }"
+                    @click="mode = 'money'">R$</button>
+                <button type="button" class="sd-chip" :class="{ active: mode === 'percent' }" @click="mode = 'percent'">
+                    <span>
+                        <i class="fa-solid fa-percent"></i>
+                    </span>
+                </button>
+            </div>
+
+            <InputSmartValue v-model="discountValue" :mode="mode" @enter="tryApply" />
+        </div>
+
+        <div class="div-apply text-center">
+            <Button _key="btnApplyDiscount" title="Aplicar" color="white" backGroundColor="#EF4444" size="medium"
+                :clicked="update" :disabled="isSubmitting || !isValid" />
+        </div>
+    </div>
+</template>
+
+<script>
+import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import InputSmartValue from "./InputSmartValue.vue";
+
+import { mapActions, mapMutations } from "vuex";
+
+export default {
+    name: "ApplyDiscount",
+    props: ["rentId", "item", "selected"],
+    components: { Alert, Button, InputSmartValue },
+    data() {
+        return {
+            urlUpdate: "/api/v1/rental/items-rent/apply-discount",
+            mode: "money",
+            discountValue: 0,
+            isSubmitting: false
+        };
+    },
+    computed: {
+        isValid() {
+            if (this.mode === "percent") return this.discountValue >= 0 && this.discountValue <= 100;
+            return this.discountValue >= 0;
+        }
+    },
+    methods: {
+        ...mapActions("generic", ["putApi"]),
+        ...mapMutations("generic", ["addSelected", "addEvent", "removeLoading", "hideModal"]),
+        tryApply() {
+            if (this.isValid && !this.isSubmitting) this.update();
+        },
+        update() {
+            const payload = {
+                url: this.urlUpdate,
+                obj: {
+                    listIds: this.selected.length > 0 ? this.selected : [this.item.id],
+                    rentId: this.rentId,
+                    discountByPercentage: this.mode === "percent",
+                    unitDiscount: this.discountValue
+                }
+            };
+
+            this.isSubmitting = true;
+            this.putApi(payload)
+                .then((r) => {
+                    if (r?.success) {
+                        this.addEvent({ name: "updateTotalizationRent" });
+                        this.hideModal();
+                    }
+                    this.addSelected([]);
+                    this.removeLoading(["btnApplyDiscount"]);
+                    this.isSubmitting = false;
+                })
+                .catch(() => {
+                    this.removeLoading(["btnApplyDiscount"]);
+                    this.isSubmitting = false;
+                });
+        }
+    }
+};
+</script>
+
+<style scoped>
+.div-apply {
+    margin-top: 15px;
+}
+
+.div-discount {
+    display: grid;
+    gap: 10px;
+}
+
+.sd-wrap {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 8px;
+    align-items: center;
+}
+
+.sd-mode {
+    display: inline-flex;
+    border: 1px solid #e5e7eb;
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+.sd-chip {
+    padding: 6px 12px;
+    border: none;
+    background: #fff;
+    cursor: pointer;
+    font-weight: 700;
+}
+
+.sd-chip+.sd-chip {
+    border-left: 1px solid #e5e7eb;
+}
+
+.sd-chip.active {
+    background: #ef4444;
+    color: #fff;
+}
+</style>

package/src/components/modules/rental/new-items-rent/BadgeAvailabilityStock.vue

@@ -0,0 +1,110 @@
+<template>
+  <Tooltip :title="tooltip">
+    <div
+      class="badge-availability-stock"
+      :class="colorClass"
+      @click="onBadgeClick(available)"
+    >
+      <span class="bas-text">{{ `${avail} ${available.unitOfMeasurementName || ""}`.trim() }}</span>
+    </div>
+  </Tooltip>
+</template>
+
+<script>
+import Tooltip from "@nixweb/nixloc-ui/src/component/layout/Tooltip";
+
+import { mapMutations } from "vuex";
+
+export default {
+  name: "BadgeAvailabilityStock",
+  components: {
+    Tooltip,
+  },
+  props: {
+    itemRent: {
+      type: Object,
+      required: true,
+    },
+    available: {
+      type: Object,
+      default: () => ({
+        date: "2025-10-11T15:34:00",
+        productId: null,
+        totalStock: 6,
+        reserved: 1,
+        rent: 1,
+        maintenance: 0,
+        available: 4,
+        unitOfMeasurementName: "Pça",
+      }),
+    },
+  },
+  computed: {
+    avail() {
+      const v = Number(this.available?.available ?? 0);
+      return Number.isNaN(v) ? 0 : v;
+    },
+    colorClass() {
+      if (this.avail === 0) return "is-zero";
+      if (this.avail > 0) return "is-positive";
+      return "is-negative";
+    },
+    tooltip() {
+      return `Disponível: ${this.avail} ${
+        this.available?.unitOfMeasurementName || ""
+      }`.trim();
+    },
+  },
+  methods: {
+    ...mapMutations("generic", ["addEvent"]),
+    onBadgeClick(payload) {
+      this.addEvent({
+        name: "timeLineAvailability",
+        data: { item: this.itemRent, showButtonBack: false },
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.badge-availability-stock {
+  display: inline-block;
+  max-width: 10ch;
+  padding: 4px 8px;
+  border-radius: 10px;
+  line-height: 1;
+  font-weight: 500;
+  user-select: none;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: transform 0.12s ease;
+  font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.bas-text {
+  font-size: 12px;
+}
+
+.is-zero {
+  background: #f3f4f6;
+  color: #6b7280;
+  border-color: #e5e7eb;
+}
+
+.is-positive {
+  background: #d1fae5;
+  color: #065f46;
+  border-color: #a7f3d0;
+}
+
+.is-negative {
+  background: #fee2e2;
+  color: #991b1b;
+  border-color: #fecaca;
+}
+</style>

package/src/components/modules/rental/new-items-rent/BadgeStatusInvoice.vue

@@ -0,0 +1,73 @@
+<template>
+    <div v-if="rent.statusRental == 2" class="badge-status-invoice" @click="onBadgeClick(itemRent)">
+        <div v-if="itemRent.statusInvoiceItemsRent === 1" class="badge-status-invoice-warning">Não Faturado</div>
+        <div v-else-if="itemRent.statusInvoiceItemsRent === 2" class="badge-status-invoice-success">Faturado</div>
+        <div v-else-if="itemRent.statusInvoiceItemsRent === 3" class="badge-status-invoice-info">Não Fatura</div>
+        <div v-else-if="itemRent.statusInvoiceItemsRent === 4" class="badge-status-invoice-danger">Cancelado</div>
+        <div v-else-if="itemRent.statusInvoiceItemsRent === 5" class="badge-status-invoice-info">Parcial</div>
+        <div v-else class="badge-status-invoice-info">Não Fatura</div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "BadgeStatusInvoice",
+    props: {
+        rent: { type: Object, required: false },
+        itemRent: {
+            type: Object,
+            default: () => ({
+                statusInvoiceItemsRent: 3
+            })
+        }
+    },
+    methods: {
+        onBadgeClick(payload) {
+            console.log("BadgeStatusInvoice clicado:", payload);
+        }
+    }
+};
+</script>
+
+<style scoped>
+.badge-status-invoice {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+    width: 90px;
+}
+
+.badge-status-invoice>div {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 3px 8px;
+    border-radius: 50px;
+    font-size: 10px;
+    font-weight: 600;
+    color: #fff;
+    white-space: nowrap;
+    transition: transform 0.12s ease, background-color 0.15s ease;
+}
+
+.badge-status-invoice-warning {
+    background-color: #e0ac06;
+}
+
+.badge-status-invoice-success {
+    background-color: #2f855a;
+}
+
+.badge-status-invoice-info {
+    background-color: #5bbff7;
+}
+
+.badge-status-invoice-danger {
+    background-color: #b91c1c;
+}
+
+.badge-status-invoice-default {
+    background-color: #6b7280;
+}
+</style>