@nixweb/nixloc-ui 1.14.0 → 1.16.0

package/src/components/modules/stock/moviment/TotalizationItemsMoviment.vue

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <Loading :center="false" v-if="loading" />
+    <div v-else class="text-center">
+      <b-row>
+        <b-col sm="3">
+          <DisplayTotalization title="Reservado" :value="totalization.reserved" :currency="false"
+            _style="color: #018B8B" />
+        </b-col>
+        <b-col sm="3">
+          <DisplayTotalization title="Saída" :value="totalization.rented" :currency="false" _style="color: #00058B" />
+        </b-col>
+        <b-col sm="3">
+          <DisplayTotalization title="Retornado" :value="totalization.returned" :currency="false"
+            _style="color: #b8860b" />
+        </b-col>
+        <b-col sm="3">
+          <DisplayTotalization title="Locado" :value="totalization.final" :currency="false" _style="color: #00058B" />
+        </b-col>
+      </b-row>
+    </div>
+  </div>
+</template>
+<script>
+
+import DisplayTotalization from "@nixweb/nixloc-ui/src/component/rental/DisplayTotalization";
+import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+
+import { mapGetters, mapActions } from "vuex";
+
+export default {
+  name: "TotalizationItemsMoviment",
+  props: ["itemSelected"],
+  components: {
+    DisplayTotalization,
+    Loading,
+  },
+  data() {
+    return {
+      urlGet: "/api/v1/stock/items-moviment/totalization-by-item",
+      item: {},
+      totalization: {},
+      loading: false,
+    };
+  },
+  mounted() {
+    this.item = this.itemSelected;
+    this.loading = true;
+    this.getTotalization();
+  },
+  computed: {
+    ...mapGetters("generic", ["event"]),
+  },
+  methods: {
+    ...mapActions("generic", ["getApi"]),
+    getTotalization() {
+      let params = {
+        url: this.urlGet,
+        obj: {
+          itemsRentId: this.item.id,
+        },
+      };
+      this.getApi(params).then((response) => {
+        this.totalization = response.content;
+
+        let self = this;
+        setTimeout(function () {
+          self.loading = false;
+        }, 300);
+      });
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "totalizationAndHistory") {
+          this.loading = true;
+          this.item = event.data;
+          this.getTotalization();
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</script>

package/src/components/modules/stock/moviment/Warning.vue

@@ -0,0 +1,231 @@
+<template>
+    <div class="alert">
+        <div class="alert-head">
+            <div class="alert-icon"><i class="fas fa-exclamation"></i></div>
+            <div class="alert-title title">{{ title }}</div>
+        </div>
+        <slot></slot>
+        <div class="alert-text title" v-html="message"></div>
+
+        <div class="alert-options">
+            <button class="option" :class="{ 'is-selected': selected === 'periodRent' }"
+                @click="selectOption('periodRent')" type="button">
+                <span class="radio" aria-hidden="true">
+                    <span class="dot" />
+                </span>
+                <span class="option-body">
+                    <span class="option-label">PERÍODO ATUAL</span>
+                    <span class="option-dates">{{ periodRent }}</span>
+                </span>
+            </button>
+
+            <button class="option" :class="{ 'is-selected': selected === 'newPeriod' }"
+                @click="selectOption('newPeriod')" type="button">
+                <span class="radio" aria-hidden="true">
+                    <span class="dot" />
+                </span>
+                <span class="option-body">
+                    <span class="option-label">NOVO PERÍODO</span>
+                    <span class="option-dates">{{ periodRentReturn }}</span>
+                </span>
+            </button>
+        </div>
+        <div v-if="selected == 'newPeriod'" class="div-warning">
+            <Alert type="warning">
+                <span>
+                    Ao selecionar esta opção, o <b>PERÍODO DE LOCAÇÃO</b> será <b>ATUALIZADO</b>. Certifique-se antes de
+                    confirmar! </span>
+            </Alert>
+        </div>
+
+        <div class="actions">
+            <button class="btn-primary" @click="confirm" type="button">
+                Continuar
+            </button>
+        </div>
+    </div>
+</template>
+
+<script>
+
+import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
+
+export default {
+    name: "WarningMoviment",
+    components: {
+        Alert
+    },
+    props: {
+        title: { type: String, default: "Attention" },
+        message: {
+            type: String,
+        },
+        periodRent: { type: String, required: true },
+        periodRentReturn: { type: String, required: true }
+    },
+    data() {
+        return { selected: "periodRent" }
+    },
+    methods: {
+        selectOption(option) {
+            this.selected = option
+            this.$emit("select", option)
+        },
+        confirm() {
+            this.$emit("confirm", this.selected)
+        }
+    }
+}
+</script>
+
+<style scoped>
+.alert {
+    background: #fff;
+    border: 1px solid #eee;
+    border-radius: 14px;
+    padding: 20px;
+    margin: 16px auto;
+    text-align: center;
+}
+
+.alert-head {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 10px;
+}
+
+.alert-icon {
+    background: #fff3d6;
+    color: #f59e0b;
+    border-radius: 10px;
+    width: 40px;
+    height: 40px;
+    display: grid;
+    place-items: center;
+}
+
+.alert-title {
+    font-weight: 700;
+    font-size: 20px;
+}
+
+.alert-text {
+    margin: 8px auto 18px;
+    font-size: 15px;
+    color: #333;
+    max-width: 680px;
+}
+
+.alert-options {
+    display: grid;
+    gap: 12px;
+    padding: 6px 8px;
+}
+
+.option {
+    width: 100%;
+    border: 1px solid #e5e7eb;
+    background: #f9fafb;
+    border-radius: 999px;
+    padding: 12px 16px;
+    display: grid;
+    grid-template-columns: 24px 1fr;
+    align-items: center;
+    gap: 12px;
+    cursor: pointer;
+    transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;
+    text-align: left;
+}
+
+.option:hover {
+    background: #f3f4f6;
+}
+
+.option.is-selected {
+    background: #e0e7ff;
+    border-color: #007BFF;
+    color: #007BFF;
+}
+
+.radio {
+    width: 18px;
+    height: 18px;
+    border: 2px solid #9ca3af;
+    border-radius: 999px;
+    display: grid;
+    place-items: center;
+    transition: border-color .15s ease, background .15s ease;
+    background: #fff;
+}
+
+.option.is-selected .radio {
+    border-color: #1d4ed8;
+    background: #fff;
+}
+
+.dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 999px;
+    background: transparent;
+    transition: background .15s ease;
+}
+
+.option.is-selected .dot {
+    background: #1d4ed8;
+}
+
+.option-body {
+    display: grid;
+}
+
+.option-label {
+    font-weight: 700;
+    letter-spacing: .06em;
+    font-size: 12px;
+    color: #6b7280;
+}
+
+.option-dates {
+    font-size: 16px;
+    color: #222;
+}
+
+.actions {
+    margin-top: 16px;
+    display: flex;
+    justify-content: center;
+}
+
+.btn-primary {
+    background: #1d4ed8;
+    color: #fff;
+    border: none;
+    border-radius: 50px;
+    padding: 8px 18px;
+    font-weight: 500;
+    letter-spacing: 2px;
+    cursor: pointer;
+}
+
+.btn-primary:hover {
+    filter: brightness(1.05);
+}
+
+.btn-primary:active {
+    transform: translateY(1px);
+}
+
+.div-warning {
+    margin: 10px 50px 20px 50px;
+}
+
+
+@media (max-width: 560px) {
+    .option-dates {
+        font-size: 14px;
+    }
+}
+</style>

package/src/components/modules/stock/moviment/output/CheckOutput.vue

@@ -0,0 +1,369 @@
+<template>
+  <div>
+    <br />
+    <SuccessMoviment v-if="successMoviment" :rentId="rentId" :movimentId="movimentId"
+      msgSuccess="Saída processada com sucesso!" />
+    <div v-show="!successMoviment">
+      <div class="text-center" v-show="!loading">
+        <span class="check">
+          <i class="fa-solid fa-clipboard-check"></i>
+          Saída
+        </span>
+      </div>
+
+      <div v-show="loading">
+        <Loading type="line" :center="true" />
+        <div class="title">Aguarde, estamos preparando a saída...</div>
+      </div>
+      <Molded v-if="!loading">
+        <TableTotalRecords :totalRecords="content.items.length" />
+        <ScrollBar :minHeight="0" :maxHeight="600">
+          <table class="table table-responsive-xs">
+            <thead>
+              <tr>
+                <th>
+                  <span class="title-header">Produto</span>
+                </th>
+                <th>
+                  <span class="title-header">Descrição</span>
+                </th>
+                <th class="text-center">
+                  <span class="title-header">Locação</span>
+                </th>
+                <th class="text-center">
+                  <span class="title-header">Saída</span>
+                </th>
+                <th class="text-center">
+                  <span class="title-header">Estoque</span>
+                </th>
+                <th class="text-center">
+                  <span class="title-header">Status</span>
+                </th>
+              </tr>
+            </thead>
+            <tbody v-for="item in content.items">
+              <tr>
+                <td class="td-product">{{ item.productFullName }}</td>
+                <td class="">
+                  <div class="td-description">
+                    <InputTextEdit v-model="item.description" />
+                  </div>
+                </td>
+                <td class="text-center td-quantity">{{ item.totalRent }}</td>
+                <td class="text-center td-quantity">
+                  {{ item.totalSelected }}
+                </td>
+                <td class="text-center">
+                  <i v-if="item.typeProduct == 3" class="fas fa-people-carry"></i>
+                  <ItemRentStockAvailability v-if="item.typeProduct != 3" :data="item.available" :item="item"
+                    :showButtonBack="false" />
+                </td>
+                <td class="text-center">
+                  <div v-if="!hasProductInStock(item)">
+                    <span class="status-danger">
+                      <i class="fa-solid fa-brake-warning"></i>
+                    </span>
+                  </div>
+                  <div v-else>
+                    <span class="status-primary" v-if="item.totalSelected > item.totalRent">
+                      <i class="fa-solid fa-rectangle-history-circle-plus"></i>
+                    </span>
+                    <span class="status-success" v-if="item.totalSelected == item.totalRent">
+                      <i class="fa-solid fa-circle-check"></i>
+                    </span>
+                    <span class="status-warning" v-if="item.totalSelected < item.totalRent &&
+                      item.totalSelected != 0
+                    ">
+                      <i class="fa-solid fa-triangle-exclamation"></i>
+                    </span>
+                    <span class="status-danger" v-if="item.totalSelected == 0">
+                      <i class="fa-solid fa-do-not-enter"></i>
+                    </span>
+                  </div>
+                </td>
+              </tr>
+              <td class="div-patrimony" colspan="8" v-if="item.patrimony.length > 0">
+                <div v-for="patrimony in item.patrimony">
+                  <span>
+                    <i class="fa-solid fa-circle-arrow-right"></i>
+                    {{ patrimony.barCode }}
+                  </span>
+                </div>
+              </td>
+            </tbody>
+            <tbody v-show="content.items.length == 0">
+              <tr>
+                <td colspan="12">
+                  <span>Nenhum produto encontrado!</span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </ScrollBar>
+      </Molded>
+      <br />
+      <Alert type="danger" v-if="isStockNegative">
+        <span>
+          Não é permitido saída de estoque negativo. Verifique e ajuste os produtos em falta.
+        </span>
+      </Alert>
+      <br v-if="isStockNegative" />
+      <Modal title="Painel" :width="1000" v-if="showModal('timeLineAvailability')">
+        <TimeLineAvailability />
+      </Modal>
+      <div class="div-after-before" v-if="content.invalidPeriod">
+        <Alert type="warning">
+          O <b>Período de Locação</b> contém data anterior a hoje e não é permitido! Ajuste as datas para continuar ou
+          <span class="discard" @click="confirmDiscard"> CLIQUE AQUI </span> para manter o Período de Atual.
+        </Alert>
+      </div>
+      <div class="text-center">
+        <span v-show="!loading">
+          <slot></slot>
+        </span>
+        <Button v-if="!loading" _key="btnGenerateOutput" type="success"
+          :disabled="isStockNegative || content.invalidPeriod" title="Gerar Saída" classIcon="fa-solid fa-circle-check"
+          size="large" :clicked="generate" />
+      </div>
+    </div>
+
+    <Modal title="Alerta" v-if="content.isAdjustDeliveryDate" :width="900" :closeOnEsc="false" :closeButton="false">
+      <Warning title="ATENÇÃO" periodRent="Manter o período atual"
+        :periodRentReturn="'Atualizar saída para ' + content.deliveryPeriodBeforeOrAfterStr" @confirm="confirm">
+        <div class="title"> A data de <b>SAÍDA</b> está ocorrendo fora do prazo previsto, selecione o período correto
+          para
+          continuar!</div>
+      </Warning>
+    </Modal>
+  </div>
+</template>
+
+<script>
+
+import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
+import InputTextEdit from "@nixweb/nixloc-ui/src/component/forms/InputTextEdit.vue";
+import TableTotalRecords from "@nixweb/nixloc-ui/src/component/shared/TableTotalRecords.vue";
+import Confirmation from "@nixweb/nixloc-ui/src/component/shared/Confirmation.vue";
+
+import Warning from '../Warning.vue';
+import SuccessMoviment from "../SuccessMoviment.vue";
+import TimeLineAvailability from "../../shared/TimeLineAvailability.vue";
+import ItemRentStockAvailability from "../../../rental/items-rent/ItemRentStockAvailability.vue";
+
+import { mapState, mapActions, mapGetters, mapMutations } from "vuex";
+
+export default {
+  name: "CheckOutput",
+  components: {
+    Molded,
+    Button,
+    ScrollBar,
+    Loading,
+    Modal,
+    Alert,
+    InputTextEdit,
+    ItemRentStockAvailability,
+    TimeLineAvailability,
+    TableTotalRecords,
+    SuccessMoviment,
+    Confirmation, Warning
+  },
+  props: {
+    rentId: String,
+  },
+  data() {
+    return {
+      urlCheck: "/api/v1/moviment/generate-output/check-output",
+      urlGenerate: "/api/v1/moviment/generate-output/generate",
+      content: [],
+      loading: true,
+      successMoviment: false,
+      movimentId: "",
+    };
+  },
+  mounted() {
+    this.checkOutput();
+  },
+  computed: {
+    ...mapGetters("generic", ["showModal"]),
+    ...mapGetters("generateMoviment", ["productSelectedByPeriod"]),
+    ...mapState("user", ["userLogged"]),
+    ...mapState("generateMoviment", ["periodRent", "productRent"]),
+    isStockNegative() {
+      if (
+        this.content.isStockNegative &&
+        !this.userLogged.parameterStock.allowNegative
+      )
+        return true;
+      return false;
+    },
+  },
+  methods: {
+    ...mapActions("generic", ["postApi"]),
+    ...mapMutations("generic", ["removeLoading", "openModal", "hideModal"]),
+    ...mapMutations("generateMoviment", ["cleanProductSelected"]),
+    hasProductInStock(item) {
+      if (item.available.totalStock >= item.totalSelected) return true;
+      if (item.available.totalStock < item.totalSelected) return false;
+    },
+    checkOutput() {
+      let obj = {
+        periodRent: this.periodRent.fullPeriod,
+        productRent: this.productRent,
+        productSelected: this.productSelectedByPeriod,
+      };
+      let params = { url: this.urlCheck, obj: obj, notNotifyToast: true };
+
+      this.postApi(params).then((response) => {
+        if (response.success) {
+          this.content = response.content;
+          if (this.content.deliveryPeriodBeforeOrAfter || this.content.invalidPeriod) this.openModal("alert");
+        }
+        this.loading = false;
+      });
+    },
+    generate() {
+      this.loading = true;
+      let obj = {
+        periodRentId: this.periodRent.id,
+        rentId: this.rentId,
+        isAdjustDeliveryDate: this.content.isAdjustDeliveryDate,
+        items: this.content.items,
+      };
+      let params = { url: this.urlGenerate, obj: obj, notNotifyToast: false };
+      this.postApi(params).then((response) => {
+        if (response.success) {
+          this.movimentId = response.content;
+          let self = this;
+          setTimeout(function () {
+            self.successMoviment = true;
+            self.loading = false;
+            self.cleanProductSelected();
+            self.removeLoading(["btnGenerateOutput"]);
+          }, 300);
+
+        } else {
+          this.removeLoading(["btnGenerateOutput"]);
+          this.loading = false;
+        }
+      });
+    },
+    confirm(option) {
+      if (option == "periodRent") this.discard();
+      if (option == "newPeriod") this.hideModal();
+    },
+    confirmDiscard() {
+      this.openModal("discard");
+    },
+    discard() {
+      this.hideModal();
+      this.removeLoading(["confirm"]);
+      this.content.deliveryPeriodBeforeOrAfter = null;
+      this.content.isAdjustDeliveryDate = false;
+      this.content.invalidPeriod = false;
+    },
+    ok() {
+      this.hideModal();
+      this.removeLoading(["btnOk"]);
+    }
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "timeLineAvailability") {
+          this.openModal("timeLineAvailability");
+        }
+      },
+      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;
+}
+
+.title-header {
+  font-size: 14px;
+  color: #757d8c;
+  font-weight: 400;
+  text-transform: uppercase;
+}
+
+.td-description {
+  max-width: 300px !important;
+  word-wrap: break-word !important;
+  font-size: 14px;
+  color: #757d8c;
+  font-style: italic;
+}
+
+.td-quantity {
+  font-size: 16px;
+}
+
+.div-title {
+  margin-bottom: 10px;
+}
+
+.title {
+  font-size: 15px;
+}
+
+.check {
+  font-size: 30px;
+}
+
+.discard {
+  font-size: 15px;
+  color: #1F53E4;
+  cursor: pointer;
+  font-weight: 700;
+}
+
+.div-patrimony {
+  background-color: #fafafc;
+  margin-right: 14%;
+}
+
+.status-primary {
+  color: blue !important;
+  font-size: 20px;
+}
+
+.status-success {
+  color: rgb(29, 158, 29);
+  font-size: 20px;
+}
+
+.status-warning {
+  color: #f6bb2a;
+  font-size: 20px;
+}
+
+.status-danger {
+  color: red;
+  font-size: 20px;
+}
+
+.div-after-before {
+  margin-bottom: 20px;
+}
+
+.title-date {
+  font-size: 16px;
+}
+</style>