@nixweb/nixloc-ui 0.0.271 → 0.0.273

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

@@ -0,0 +1,269 @@
+<template>
+  <div>
+    <div class="div-accessory">
+      <Molded>
+        <ItemsAccessoryCreate :rent="rent" :itemsRentCurrent="itemsRent" />
+      </Molded>
+    </div>
+    <Loading type="line" :center="false" v-show="loading" />
+    <TableTotalRecords :totalRecords="content.totalRecords" />
+    <ScrollBar id="items-rent" :minHeight="300" :maxHeight="300">
+      <table class="table table-responsive-xs" v-show="!showTableDraggable">
+        <thead>
+          <tr>
+            <th class="td-checkbox">
+              <i v-if="content.data.length > 1" class="fa-regular fa-maximize icon-order icon-cursor"
+                @click="changeItemToTableDraggable(content.data)">
+              </i>
+              <i v-else class="fa-solid fa-layer-group icon-order"></i>
+              <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">Status</span>
+            </th>
+            <th class="text-center"></th>
+          </tr>
+        </thead>
+        <tbody v-for="item in content.data">
+          <td class="td-product" @click="update(item)">
+            <span>
+              {{ item.productFullName }}
+            </span>
+            <br />
+            <span class="description" v-html="item.description"> </span>
+          </td>
+          <td class="text-center td-quantity">
+            <div>
+              <span> {{ item.quantity }}</span>
+              <span v-if="item.type != 3">
+                ({{ item.unitOfMeasurementName }})
+              </span>
+            </div>
+          </td>
+          <td class="text-center">
+            <div class="quantity" @click="totalizationAndHistory(item)">
+              <ItemsRentStatusStock v-if="item.type != 3" :data="item" />
+            </div>
+          </td>
+          <td class="text-center">
+            <Button :_key="item.id + 'a'" type="danger" classIcon="fa-solid fa-trash" size="small" :params="item"
+              :clicked="remove" />
+          </td>
+        </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,
+          itemsRentId: itemsRent.id,
+          rentId: rent.id,
+        }" />
+    </ScrollBar>
+  </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 TableTotalRecords from "@nixweb/nixloc-ui/src/component/shared/TableTotalRecords.vue";
+import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
+
+import ItemsAccessoryCreate from "./ItemsAccessoryCreate.vue";
+import ItemsRentStatusStock from "./ItemsRentStatusStock.vue";
+import ItemRentStockAvailability from "./ItemRentStockAvailability.vue";
+import TableDraggable from "@nixweb/nixloc-ui/src/component/shared/TableDraggable.vue";
+
+import { mapGetters, mapState, mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "ItemsAccessoryList",
+  props: {
+    rent: Object,
+  },
+  components: {
+    Button,
+    Loading,
+    ScrollBar,
+    Molded,
+    ItemsRentStatusStock,
+    ItemRentStockAvailability,
+    TableDraggable,
+    TableTotalRecords,
+    ItemsAccessoryCreate,
+  },
+  computed: {
+    ...mapState("generic", ["event"]),
+  },
+  data() {
+    return {
+      urlGetApi: "/api/v1/rental/items-rent/get-all-by-accessory",
+      urlDelete: "/api/v1/rental/items-rent/delete",
+      content: {
+        data: [],
+        totalRecords: 0,
+      },
+      baseParams: {
+        search: undefined,
+        filter: "contains",
+        currentPage: 1,
+        totalPerPage: 20,
+      },
+      itemsRent: {},
+      dataDraggable: [],
+      orderByDraggable: "",
+      showTableDraggable: false,
+      loading: true,
+    };
+  },
+  methods: {
+    ...mapActions("generic", ["getApi", "deleteAllApi"]),
+    ...mapMutations("generic", ["addEvent", "removeLoading"]),
+    getAll() {
+      this.loading = true;
+      let params = {
+        url: this.urlGetApi,
+        obj: {
+          ...this.baseParams,
+          itemsRentId: this.itemsRent.id,
+          noPaginated: true,
+        },
+      };
+      this.getApi(params).then((response) => {
+        this.content.data = response.content.data;
+        this.content.totalRecords = response.content.totalRecords;
+        this.loading = false;
+      });
+    },
+    remove(item) {
+      let params = {
+        url: this.urlDelete,
+        selected: [item.id],
+      };
+
+      this.deleteAllApi(params).then((response) => {
+        if (response.success) {
+          this.getAll();
+          this.addEvent({ name: "removedAccessory" });
+        }
+      });
+      this.removeLoading([item.id + "a"]);
+    },
+    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);
+      });
+    },
+    update(item) {
+      this.addEvent({ name: "updateAccessory", data: item });
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "getAllAccessory") {
+          this.content.data = [];
+          this.itemsRent = event.data.itemsRent;
+          this.getAll();
+        }
+
+        if (event.name == "confirmedTableDraggable") {
+          this.showTableDraggable = false;
+          this.getAll();
+        }
+
+        if (event.name == "cancelTableDraggable")
+          this.showTableDraggable = false;
+      },
+      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;
+  margin-bottom: 8px;
+}
+
+.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;
+}
+
+.quantity {
+  cursor: pointer;
+}
+
+.quantity:hover {
+  text-decoration: underline;
+}
+
+.description {
+  font-weight: 400;
+  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/ItemsRent.js

@@ -0,0 +1,39 @@
+export default class ItemsRent {
+    constructor() {
+        this.id = "";
+        this.groupRent = { id: "", content: "" };
+        this.typeProduct = { id: "", content: "" };
+        this.product = { id: "", content: "" };
+        this.productId = "";
+        this.periodRent = { id: "", content: "" };
+        this.periodRentId = "";
+        this.description = "";
+        this.quantity = 1;
+        this.unitValue = 0;
+        this.unitCost = 0;
+        this.discount = { discountByPercentage: false, discount: 0 };
+        this.discountByPercentage = false;
+        this.unitDiscount = 0;
+        this.unitInsurance = 0;
+        this.statusStockItemsRent = 0;
+        this.rentId = "";
+    }
+    update(data) {
+        this.id = data.id;
+        this.groupRent = { id: data.groupRentId, content: data.groupRentName };
+        this.typeProduct = { id: data.typeProductId, content: data.typeProductName };
+        this.product = { id: data.productId, content: data.productName };
+        this.productId = data.productId;
+        this.periodRent = { id: data.periodRentId, content: data.periodRentName };
+        this.periodRentId = data.periodRentId;
+        this.description = data.description;
+        this.quantity = data.quantity;
+        this.unitValue = data.unitValue;
+        this.unitCost = data.unitCost;
+        this.discount = { discountByPercentage: false, discount: data.unitDiscount };
+        this.unitInsurance = data.unitInsurance;
+        this.statusStockItemsRent = data.statusStockItemsRent;
+        this.statusInvoiceItemsRent = data.statusInvoiceItemsRent;
+        this.rentId = data.rentId;
+    }
+}

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

@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <div>
+      <div v-show="!selectedPeriod.period">
+        <Alert type="warning">
+          <span> É necessário adicionar o Período de Locação!</span>
+        </Alert>
+      </div>
+      <div v-show="selectedPeriod.period">
+        <SelectOptionPeriodRent :rentId="rent.id" v-model="selectedPeriod" />
+        <Button _key="btnItemsRentCreateUpdate" title="Produto" classIcon="fas fa-plus-circle" type="primary"
+          size="small" :disabled="selectedPeriod.showAll" :clicked="create" />
+        <div class="side-by-side">
+          <ImportProductByRent v-if="selectedPeriod.period" module="rent" :targetId="rent.id"
+            :periodRentId="selectedPeriod.period.id" />
+        </div>
+      </div>
+    </div>
+    <Modal title="Produtos" :width="1200" :height="750" v-show="showModal('addProduct')"
+      :onHideModal="hideSearchProduct">
+      <SearchProduct v-if="showSearchProduct" :types="'1,2,3,4,5'" :status="1" :showPrice="true"
+        :showAvailability="true" :periodRent="selectedPeriod.period.fullPeriod" :addProduct="addProduct">
+        <div slot="start">
+          <Select title="Informe o Grupo" field="groupRent" :required="false" v-model="itemsRent.groupRent"
+            url="/api/v1/rental/group-rent/select-all" nameNewRegister="groupRentCreateUpdate" titleNewRegister="Grupo"
+            :widthNewRegister="500" :heightNewRegister="250">
+            <GroupRentCreateUpdate :registerInSelect="true" v-model="itemsRent.groupRent" />
+          </Select>
+        </div>
+      </SearchProduct>
+    </Modal>
+  </div>
+</template>
+
+<script>
+
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import Select from "@nixweb/nixloc-ui/src/component/forms/Select";
+import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
+
+import ImportProductByRent from '../shared/import-product-rent/ImportProductByRent.vue'
+import SearchProduct from "../../stock/search-product/SearchProduct.vue";
+import SelectOptionPeriodRent from "../period-rental/SelectOptionPeriodRent.vue";
+import GroupRentCreateUpdate from "../group-rent/GroupRentCreateUpdate.vue";
+
+import ItemsRent from "./ItemsRent.js";
+
+import { mapMutations, mapGetters, mapActions } from "vuex";
+
+export default {
+  name: "ItemsRentCreate",
+  components: {
+    Modal,
+    Button,
+    Select,
+    Alert,
+    SearchProduct,
+    SelectOptionPeriodRent,
+    GroupRentCreateUpdate, ImportProductByRent
+  },
+  props: {
+    rent: Object,
+  },
+  data() {
+    return {
+      itemsRent: new ItemsRent(),
+      selectedPeriod: {},
+      urlCreate: "/api/v1/rental/items-rent/create",
+      showSearchProduct: false,
+    };
+  },
+  computed: {
+    ...mapGetters("generic", ["showModal", "event"]),
+  },
+  methods: {
+    ...mapMutations("generic", ["addEvent", "openModal", "removeLoading"]),
+    ...mapActions("generic", ["postApi"]),
+    create() {
+      this.openModal("addProduct");
+      this.removeLoading(["btnItemsRentCreateUpdate"]);
+      this.showSearchProduct = true;
+    },
+    addProduct(product) {
+      this.updateClassItemsRent(product);
+      let params = { url: this.urlCreate, obj: this.itemsRent };
+      this.postApi(params).then((response) => {
+        this.addEvent({
+          name: "addedProduct",
+          data: {
+            showAll: false,
+            period: { id: this.selectedPeriod.period.id },
+          },
+        });
+
+        this.addEvent({ name: "updateTotalizationRent" });
+        this.removeLoading([product.id]);
+      });
+    },
+    hideSearchProduct() {
+      this.showSearchProduct = false;
+    },
+    updateClassItemsRent(data) {
+      this.itemsRent.periodRentId = this.selectedPeriod.period.id;
+      this.itemsRent.productId = data.id;
+      this.itemsRent.type = data.type;
+      this.itemsRent.description = data.description;
+      this.itemsRent.quantity = data.quantity;
+      this.itemsRent.unitValue = data.value;
+      this.itemsRent.unitCost = data.cost;
+      this.itemsRent.replacementValue = data.replacementValue;
+      this.itemsRent.percentageInsurance = data.percentageInsurance;
+      this.itemsRent.calculateInsurance = data.calculateInsurance;
+      this.itemsRent.statusRental = this.rent.statusRental;
+      this.itemsRent.rentId = this.rent.id;
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "btnBackTimeLineAvailability") {
+          this.openModal("addProduct");
+          this.removeLoading(["btnBackTimeLineAvailability"]);
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</script>