@nixweb/nixloc-ui 1.14.0 → 1.16.0

package/src/components/modules/rental/items-rent/ItemsRentList.vue

@@ -0,0 +1,566 @@
+<template>
+  <div>
+    <div v-show="!showTableDraggable">
+      <ItemsRentCreate :rent="rent" />
+      <br />
+      <HorizontalFilter :showTotalPerPage="false">
+        <div class="fixed-filter-options div-filter" slot="content-filter-horizontal">
+          <Toggle title="Mostrar produto(s) somente estoque" :color="'#4BB4E2'" v-model="withOnlyStock" />
+          <Toggle title="Mostrar acessório(s) vinculado(s)" :color="'#4BB4E2'" v-model="withAccessory" />
+        </div>
+      </HorizontalFilter>
+      <Loading type="line" :center="false" v-show="loading" />
+      <b-row>
+        <b-col sm="6">
+          <b-form-checkbox v-model="showSelectAll" @change="select" v-show="content.totalRecords > 0">
+            TODOS PRODUTOS
+          </b-form-checkbox>
+        </b-col>
+        <b-col sm="6">
+          <TableTotalRecords :totalRecords="content.totalRecords" />
+        </b-col>
+      </b-row>
+    </div>
+    <ItemRentFixedBar :selected="selected" :rent="rent" />
+
+    <table class="table table-responsive-xs" v-show="!showTableDraggable">
+      <thead>
+        <tr>
+          <th class="td-checkbox">
+            <i class="fa-regular fa-maximize icon-order-group icon-cursor"
+              @click="changeGroupToTableDraggable(grouped)">
+            </i>
+          </th>
+          <th>
+            <span class="title-header"> Produto </span>
+          </th>
+          <th class="text-center">
+            <span class="title-header">Quantidade</span>
+          </th>
+          <th class="text-center">
+            <span class="title-header">Estoque</span>
+          </th>
+          <th class="text-center">
+            <span class="title-header">Fatura</span>
+          </th>
+          <th class="text-center">
+            <span class="title-header">Valor</span>
+          </th>
+          <th class="text-center">
+            <span class="title-header">ACESS..</span>
+          </th>
+        </tr>
+      </thead>
+      <tbody v-for="(data, groupName) in grouped">
+        <td class="group" colspan="8">
+          <div>
+            <i v-if="data.length > 1" class="fa-regular fa-maximize icon-order icon-cursor"
+              @click="changeItemToTableDraggable(data)">
+            </i>
+            <i v-else class="fa-solid fa-layer-group icon-order"></i>
+            <span v-if="groupName" class="title-group">
+              {{ groupName }}
+            </span>
+            <span v-else class="title-group">
+              <span class="without-group">Sem grupo</span>
+            </span>
+          </div>
+        </td>
+        <tr v-for="item in data">
+          <td class="td-checkbox">
+            <b-form-checkbox v-model="selected" :value="item.id" />
+          </td>
+          <td class="td-product td" @click="update(item)">
+            <span>
+              {{ item.productFullName }}
+            </span>
+            <br />
+            <span class="description" v-html="item.description"> </span>
+          </td>
+          <td class="text-center td-quantity td">
+            <div>
+              <span> {{ item.quantity }}</span>
+              <span v-if="item.type != 3">
+                ({{ item.unitOfMeasurementName }})
+              </span>
+            </div>
+            <div class="quantity" @click="totalizationAndHistory(item)">
+              <ItemsRentStatusStock :data="item" :rent="rent" />
+            </div>
+          </td>
+          <td class="text-center td">
+            <ItemRentStockAvailability v-if="item.type != 3" :data="item.available" :item="item"
+              :showButtonBack="false" />
+            <i class="icon-only-stock fa-solid fa-grid-2-plus" v-if="item.onlyStock"></i>
+          </td>
+          <td class="text-center td">
+            <ItemsRentalInvoice :data="item" />
+          </td>
+          <td class="td-price text-center td">
+            <ItemsRentalTotalization :data="item" />
+          </td>
+          <td class="text-center td">
+            <div class="div-accessory" v-if="item.type == 1">
+              <Button :_key="item.id" color="white" backGroundColor="#779CBA" :title="item.totalAccessory.toString()"
+                size="small" :params="{ itemsRent: item }" :clicked="openModalAccessory" />
+            </div>
+            <div v-if="item.type == 2"><i class="fas fa-toolbox"></i></div>
+            <div v-if="item.type == 3">
+              <i class="fas fa-people-carry"></i>
+            </div>
+            <div v-if="item.type == 5">
+              <i class="fa-solid fa-recycle"></i>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+      <tbody v-show="content.totalRecords == 0">
+        <tr>
+          <td colspan="12">
+            <span class="title">Nenhum registro encontrado!</span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <TableDraggable urlOrderAllApi="/api/v1/rental/items-rent/order-all" v-if="showTableDraggable" :data="dataDraggable"
+      :propsParam="{
+        any: orderByDraggable,
+        rentId: rent.id,
+        periodRentid: periodRentId,
+      }" />
+
+    <Modal :title="modalOptions.title" :width="modalOptions.width" :onHideModal="onHideModal"
+      v-show="showModal('optionsItemsRent')">
+      <div v-show="modalOptions.name == 'confirmRemove'">
+        <Alert type="warning">
+          <span>
+            Todas as movimentações relacionadas ao produto serão removidas. Esta
+            ação é irreversível!
+          </span>
+        </Alert>
+
+        <Confirmation :isModal="false" title="Deseja excluir?" type="danger" :confirmed="removeSelected" />
+      </div>
+      <div v-if="modalOptions.name == 'accessory'">
+        <ItemsAccessoryList :rent="rent" />
+      </div>
+      <div v-show="modalOptions.name == 'totalizationAndHistory'">
+        <b-tabs>
+          <b-tab title="Resumo" v-if="item.type == 1 || item.type == 2">
+            <TotalizationItemsMoviment />
+          </b-tab>
+          <b-tab title="Patrimônio" v-if="!item.allowWithoutPatrimony">
+            <PatrimonyMoviment />
+          </b-tab>
+          <b-tab title="Histórico">
+            <HistoryMoviment />
+          </b-tab>
+        </b-tabs>
+      </div>
+      <ItemRentUpdate v-show="modalOptions.name == 'itemRentUpdate'" />
+    </Modal>
+  </div>
+</template>
+<script>
+import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import TableTotalRecords from "@nixweb/nixloc-ui/src/component/shared/TableTotalRecords.vue";
+import TableDraggable from "@nixweb/nixloc-ui/src/component/shared/TableDraggable.vue";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+import HorizontalFilter from "@nixweb/nixloc-ui/src/component/shared/HorizontalFilter.vue";
+import Toggle from "@nixweb/nixloc-ui/src/component/forms/Toggle";
+import Confirmation from "@nixweb/nixloc-ui/src/component/shared/Confirmation.vue";
+import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+
+import ItemRentFixedBar from "./ItemRentFixedBar.vue";
+import ItemsRentStatusStock from "./ItemsRentStatusStock.vue";
+import ItemsRentalTotalization from "./ItemsRentalTotalization.vue";
+import ItemsRentalInvoice from "./ItemsRentalInvoice.vue";
+import ItemsRentCreate from "./ItemsRentCreate.vue";
+import ItemRentUpdate from "./ItemRentUpdate.vue";
+import ItemRentStockAvailability from "./ItemRentStockAvailability.vue";
+import PatrimonyMoviment from "../../stock/items-moviment/PatrimonyMoviment.vue";
+import TotalizationItemsMoviment from "../../stock/moviment/TotalizationItemsMoviment.vue";
+import HistoryMoviment from "../../stock/history-moviment/HistoryMoviment.vue";
+import ItemsAccessoryList from "./ItemsAccessoryList.vue";
+
+import { mapGetters, mapState, mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "ItemsList",
+  components: {
+    ItemsRentCreate,
+    Loading,
+    ScrollBar,
+    TableTotalRecords,
+    TableDraggable,
+    ItemsRentalTotalization,
+    HorizontalFilter,
+    Toggle,
+    Confirmation,
+    ItemRentFixedBar,
+    Modal,
+    Alert,
+    Button,
+    ItemRentUpdate,
+    ItemsRentalInvoice,
+    ItemsRentStatusStock,
+    ItemRentStockAvailability,
+    TotalizationItemsMoviment,
+    PatrimonyMoviment,
+    HistoryMoviment,
+    ItemsAccessoryList,
+  },
+  props: {
+    rent: Object,
+  },
+  data() {
+    return {
+      urlGetApi: "/api/v1/rental/items-rent/get-all",
+      urlDelete: "/api/v1/rental/items-rent/delete",
+      data: [],
+      periodRentId: "",
+      item: {},
+      loading: false,
+      content: {
+        data: [],
+        totalRecords: 0,
+      },
+      modalOptions: {
+        name: "",
+        title: "",
+        width: 0,
+      },
+      baseParams: {
+        search: undefined,
+        filter: "contains",
+        currentPage: 1,
+        totalPerPage: 20,
+      },
+      selected: [],
+      showSelectAll: false,
+      dataDraggable: [],
+      orderByDraggable: "",
+      showTableDraggable: false,
+      withOnlyStock: false,
+      withAccessory: false,
+    };
+  },
+  computed: {
+    ...mapGetters("generic", ["groupBy", "showModal"]),
+    ...mapState("user", ["userLogged"]),
+    ...mapState("generic", ["event"]),
+    grouped() {
+      var list = this.groupBy({
+        array: this.content.data,
+        key: "groupRentName",
+      });
+      return list;
+    },
+    allowOutputGreater() {
+      return this.userLogged.parameterStock.allowOutputGreater;
+    },
+    manageByPatrimony() {
+      return this.userLogged.parameterStock.manageByPatrimony;
+    },
+  },
+  methods: {
+    ...mapActions("generic", ["getApi", "deleteAllApi"]),
+    ...mapMutations("generic", [
+      "addEvent",
+      "openModal",
+      "hideModal",
+      "removeLoading",
+    ]),
+    getAll() {
+      this.loading = true;
+      let params = {
+        url: this.urlGetApi,
+        obj: {
+          ...this.baseParams,
+          rentId: this.rent.id,
+          periodRentId: this.periodRentId,
+          withOnlyStock: this.withOnlyStock,
+          withAccessory: this.withAccessory,
+          noPaginated: true,
+        },
+      };
+      this.getApi(params).then((response) => {
+        this.content.data = response.content.data;
+        this.content.totalRecords = response.content.totalRecords;
+        this.loading = false;
+      });
+    },
+    update(item) {
+      this.modalOptions = {
+        name: "itemRentUpdate",
+        title: "Produto",
+        width: 1000,
+      };
+      this.openModal("optionsItemsRent");
+      this.addEvent({ name: "itemRentUpdate", data: item });
+    },
+    totalizationAndHistory(item) {
+      this.modalOptions = {
+        name: "totalizationAndHistory",
+        title: item.productFullName,
+        width: 830,
+      };
+      this.item = item;
+      this.addEvent({ name: "totalizationAndHistory", data: item });
+      this.openModal("optionsItemsRent");
+    },
+    confirmRemove() {
+      this.removeLoading(["btnRemoveItem"]);
+    },
+    removeSelected() {
+      let params = {
+        url: this.urlDelete,
+        selected: this.selected,
+      };
+
+      this.deleteAllApi(params).then((reponse) => {
+        if (reponse.success) {
+          this.reset({ showAll: false, period: { id: this.periodRentId } });
+          this.hideModal();
+        }
+
+        this.addEvent({ name: "updateTotalizationRent" });
+        this.addEvent({ name: "removedItemRent" });
+        this.removeLoading(["confirm"]);
+      });
+    },
+    reset(data) {
+      this.periodRentId = data.showAll ? null : data.period.id;
+      this.selected = [];
+      this.showSelectAll = false;
+      this.baseParams.currentPage = 1;
+      this.dataDraggable = [];
+      this.showTableDraggable = false;
+      this.getAll();
+    },
+    endScrollBar() {
+      if (this.content.data.length != this.content.totalRecords) {
+        this.baseParams.currentPage++;
+        this.getAll();
+      }
+    },
+    select() {
+      this.selected = [];
+      if (this.showSelectAll) {
+        for (let i in this.content.data) {
+          this.selected.push(this.content.data[i].id);
+        }
+      }
+    },
+    changeItemToTableDraggable(data) {
+      this.orderByDraggable = "item";
+      this.dataDraggable = [];
+      this.showTableDraggable = true;
+      data.forEach((item) => {
+        let obj = { id: item.id, name: item.productFullName };
+        this.dataDraggable.push(obj);
+      });
+    },
+    changeGroupToTableDraggable(data) {
+      this.orderByDraggable = "group";
+      this.dataDraggable = [];
+      var group = Object.entries(data);
+      group.forEach((item) => {
+        let obj = { id: item[1][0].groupRentId, name: item[0] };
+        this.dataDraggable.push(obj);
+      });
+      this.showTableDraggable = true;
+    },
+    isShowTableSub(itemId) {
+      return this.itemsAccessory.ids.includes(itemId);
+    },
+    openModalAccessory(params) {
+      this.modalOptions = {
+        name: "accessory",
+        title: "Acessório(s)",
+        width: 1100,
+      };
+
+      this.openModal("optionsItemsRent");
+
+      this.removeLoading([params.itemsRent.id]);
+      this.addEvent({ name: "getAllAccessory", data: params });
+    },
+    onHideModal() {
+      this.getAll();
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "closedFixedBar") {
+          this.selected = [];
+          this.showSelectAll = false;
+        }
+
+        if (event.name == "removeItemFixedBar") {
+          this.modalOptions = {
+            name: "confirmRemove",
+            title: "Tem certeza que deseja excluir?",
+            width: 500,
+          };
+          this.openModal("optionsItemsRent");
+          this.confirmRemove();
+        }
+
+        if (event.name == "selectedPeriodRent" || event.name == "addedProduct") {
+          this.reset(event.data);
+
+        }
+
+
+        if (event.name == "updateItemsRent" || event.name == "itemsImported")
+          this.getAll();
+
+        if (event.name == "updateFixedBar") {
+          this.selected = [];
+          this.showSelectAll = false;
+          this.getAll();
+        }
+
+        if (event.name == "cancelTableDraggable")
+          this.showTableDraggable = false;
+
+        if (event.name == "confirmedTableDraggable")
+          this.reset({ showAll: false, period: { id: this.periodRentId } });
+
+        if (
+          event.name == "rentAccepted" ||
+          event.name == "rentProcessed" ||
+          event.name == "rentRejected"
+        )
+          this.reset({ showAll: false, period: { id: this.periodRentId } });
+      },
+      deep: true,
+    },
+    withOnlyStock: {
+      handler() {
+        this.getAll();
+      },
+      deep: true,
+    },
+    withAccessory: {
+      handler() {
+        this.getAll();
+      },
+      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;
+}
+
+.div-accessory {
+  margin-top: 8px;
+}
+
+.group {
+  background-color: #fafafc;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.div-filter {
+  margin-bottom: 30px;
+  padding: 10px;
+}
+
+.with-only-stock {
+  cursor: pointer;
+  margin-left: 20px;
+  color: #757d8c;
+}
+
+.icon-only-stock {
+  color: #757d8c;
+}
+
+.title-group {
+  font-size: 14px;
+  margin-left: 10px;
+}
+
+.name-item {
+  font-size: 16px;
+  margin-bottom: 8px;
+}
+
+.div-warning {
+  margin-bottom: 20px;
+}
+
+.td-product {
+  width: 500px;
+  background-color: #f1f4f9;
+  cursor: pointer;
+}
+
+.td-quantity {
+  width: 150px;
+}
+
+.td-price {
+  min-width: 300px;
+}
+
+.quantity {
+  cursor: pointer;
+}
+
+.quantity:hover {
+  text-decoration: underline;
+}
+
+.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;
+}
+</style>

package/src/components/modules/rental/items-rent/ItemsRentStatusStock.vue

@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <div v-if="data.type == 5">
+      <div v-if="rent.statusRental != 2">
+        <div class="badge badge-material">
+          Material
+        </div>
+      </div>
+      <div v-else>
+        <div v-if="data.statusStockItemsRent == 5 || data.statusStockItemsRent == 7" class="badge badge-material">
+          Mat...Realizado
+        </div>
+        <div v-if="data.totalMaterialRented == 0 && data.statusStockItemsRent != 7" class="badge badge-material">
+          Material Pendente
+        </div>
+        <div v-if="data.totalMaterialRented != data.totalMaterialReturned && data.statusStockItemsRent != 7"
+          class="badge badge-material">
+          Mat...Pendente
+        </div>
+      </div>
+    </div>
+    <div v-if="data.type == 3">
+      <div v-if="rent.statusRental != 2">
+        <div class="badge badge-pending">
+          Serviço
+        </div>
+      </div>
+      <div v-else>
+        <div v-if="!data.serviceDone" class="badge badge-pending">
+          Serv..Pendente
+        </div>
+        <div v-else class="badge badge-service">
+          Serv..Realizado
+        </div>
+      </div>
+    </div>
+    <div v-if="data.type != 3 && data.type != 5">
+      <div class="badge badge-available" v-if="data.statusStockItemsRent == 1">
+        Não Reservado
+      </div>
+      <div class="badge badge-reserved" v-if="data.statusStockItemsRent == 2">
+        Reservado
+      </div>
+      <div class="badge badge-rent" v-if="data.statusStockItemsRent == 3">
+        Locado
+      </div>
+      <div class="badge badge-rent" v-if="data.statusStockItemsRent == 4">
+        Locado Parcial
+      </div>
+      <div class="badge badge-returned" v-if="data.statusStockItemsRent == 5">
+        Retornado
+      </div>
+      <div class="badge badge-partial-returned" v-if="data.statusStockItemsRent == 6">
+        Retornado Parcial
+      </div>
+      <div class="badge badge-renewed" v-if="data.statusStockItemsRent == 7">
+        Renovado
+      </div>
+      <div class="badge badge-renewed" v-if="data.statusStockItemsRent == 7">
+        Renovado Parcial
+      </div>
+    </div>
+
+
+  </div>
+</template>
+<script>
+export default {
+  name: "ItemsRentStatusStock",
+  props: {
+    data: Object,
+    rent: Object
+  },
+};
+</script>
+<style scoped>
+.badge {
+  font-size: 12px !important;
+  margin-left: 5px;
+  border-radius: 10px !important;
+  padding: 8px;
+  color: white;
+}
+
+.badge-material {
+  background-color: #812805;
+}
+
+
+.badge-pending {
+  background-color: #F1BC31;
+}
+
+.badge-service {
+  background-color: #df800d;
+}
+
+.badge-available {
+  background-color: #8fbc8f;
+}
+
+.badge-reserved {
+  background-color: #008b8b;
+}
+
+.badge-rent {
+  background-color: #00008b;
+}
+
+.badge-returned {
+  background-color: #b8860b;
+}
+
+.badge-partial-returned {
+  background-color: #b8860b;
+}
+
+.badge-renewed {
+  background-color: #1c1cc5;
+}
+</style>