@nixweb/nixloc-ui 1.14.0 → 1.16.0

package/src/components/modules/stock/search-product/SearchProduct.vue

@@ -0,0 +1,268 @@
+<template>
+  <div>
+    <SearchProductsToolbar
+      @search="searchProducts"
+      @clear="onClear"
+      v-model="search"
+    />
+    <slot name="start"></slot>
+    <div>
+      <!-- <b-row>
+        <b-col sm="10"></b-col>
+        <b-col sm="2">
+          <div class="div-total-records text-center">
+            Total <b>{{ content.totalRecords }} </b>
+            <span v-if="content.totalRecords > 1">registros</span>
+            <span v-else>registro</span>
+          </div>
+        </b-col>
+      </b-row> -->
+      <Loading
+        type="line"
+        :center="false"
+        v-show="loading"
+      />
+      <ScrollBar
+        id="search-product"
+        :minHeight="400"
+        :maxHeight="400"
+        :endScrollBar="endScrollBar"
+      >
+        <table class="table table-responsive-xs">
+          <thead>
+            <tr>
+              <th class="search-product-td-product">
+                <span class="title-header"></span>
+              </th>
+              <th
+                class="text-center"
+                v-show="showPrice"
+              >
+                <span class="title-header"></span>
+              </th>
+              <th v-if="onlyPatrimony">
+                <span class="title-header"></span>
+              </th>
+              <th
+                class="text-center"
+                v-if="showQuantity"
+              >
+                <span class="title-header"></span>
+              </th>
+              <th class="text-center">
+                <span
+                  class="title-header"
+                  v-show="showPrice"
+                ></span>
+                <span
+                  class="title-header"
+                  v-show="showReplacementValue"
+                ></span>
+              </th>
+              <th class="text-center"></th>
+            </tr>
+          </thead>
+
+          <tbody
+            v-for="product in content.data"
+            :key="product.id"
+          >
+            <ProductItem
+              :product="product"
+              :onlyPatrimony="onlyPatrimony"
+              :showPrice="showPrice"
+              :showQuantity="showQuantity"
+              :showReplacementValue="showReplacementValue"
+              :canUpdate="canUpdate"
+              :showAddProduct="showAddProduct"
+              :showAvailability="showAvailability"
+              @add="add"
+            />
+          </tbody>
+
+          <tbody v-show="content.data == 0 && !loading">
+            <tr>
+              <td colspan="12">
+                <span class="title">Nenhum registro encontrado!</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </ScrollBar>
+    </div>
+  </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 ProductItem from "./ProductItem.vue";
+import SearchProductsToolbar from "../../rental/new-items-rent/SearchProductsToolbar.vue";
+
+import { mapActions, mapMutations, mapState, mapGetters } from "vuex";
+
+export default {
+  name: "SearchProduct",
+  components: {
+    ScrollBar,
+    TableTotalRecords,
+    Loading,
+    ProductItem,
+    SearchProductsToolbar,
+  },
+  props: {
+    types: String,
+    status: Number,
+    statusPatrimony: Number,
+    onlyPatrimony: Boolean,
+    periodRent: Object,
+    showPrice: Boolean,
+    overlay: Boolean,
+    showQuantity: { type: Boolean, default: true },
+    showReplacementValue: { type: Boolean, default: false },
+    canUpdate: { type: Boolean, default: true },
+    showAddProduct: { type: Boolean, default: true },
+    showAvailability: Boolean,
+    addProduct: Function,
+  },
+  data() {
+    return {
+      content: { data: [], totalRecords: 0 },
+      baseParams: {
+        search: undefined,
+        filter: "contains",
+        currentPage: 1,
+        totalPerPage: 20,
+      },
+      urlGetAllByProduct:
+        "/api/v1/stock/search-product/get-all-by-product-or-patrimony",
+      loading: false,
+      search: { query: "", category: { id: "" }, manufacturer: { id: "" } },
+    };
+  },
+  created() {
+    this.getAll();
+  },
+  computed: {
+    ...mapState("generic", ["search", "executedSearch", "clearedSearch"]), // não remover
+    ...mapGetters("user", ["hasPermission"]),
+    moduleCurrent() {
+      return this.$route.matched[0].props.default.module;
+    },
+  },
+  methods: {
+    ...mapActions("generic", ["getApi"]),
+    ...mapMutations("generic", ["removeLoading"]),
+    searchProducts() {
+      this.baseParams.currentPage = 1;
+      this.content.data = [];
+      this.loading = true;
+      this.getAll();
+    },
+    getAll() {
+      this.loading = true;
+      let periodRent = this.createPeriodRent(this.periodRent);
+      this.baseParams.search = this.search.query;
+
+      let propsParam = {
+        categoryProductId: this.search.category.id,
+        manufacturerId: this.search.manufacturer.id,
+        types: this.types,
+        status: this.status,
+        statusPatrimony: this.statusPatrimony,
+        onlyPatrimony: this.onlyPatrimony,
+        showPrice: this.showPrice,
+        showAvailability: this.showAvailability,
+      };
+
+      if (this.baseParams.currentPage == 1) {
+        this.content.data = [];
+        this.loading = true;
+      }
+
+      let obj = { ...this.baseParams, ...propsParam, ...periodRent };
+      let params = { url: this.urlGetAllByProduct, obj };
+
+      this.getApi(params).then((response) => {
+        let self = this;
+        response.content.data.map(function (value) {
+          self.content.data.push(value);
+        });
+        this.content.totalRecords = response.content.totalRecords;
+        setTimeout(function () {
+          self.removeLoading(["btnSearch", "btnClean"]);
+          self.loading = false;
+        }, 350);
+      });
+    },
+    onClear() {
+      this.cleanParams();
+      this.getAll();
+    },
+    endScrollBar() {
+      if (this.content.data.length != this.content.totalRecords) {
+        this.baseParams.currentPage++;
+        this.getAll();
+      }
+    },
+    cleanParams() {
+      this.baseParams.currentPage = 1;
+    },
+    add(product) {
+      this.addProduct(product);
+    },
+    createPeriodRent(periodRent) {
+      if (!periodRent) return {};
+      return {
+        deliveryDateHour: periodRent.deliveryDateHour,
+        startDateHour: periodRent.startDateHour,
+        endDateHour: periodRent.endDateHour,
+        devolutionDateHour: periodRent.devolutionDateHour,
+        minute: periodRent.minute,
+        hour: periodRent.hour,
+        day: periodRent.day,
+        month: periodRent.month,
+        year: periodRent.year,
+      };
+    },
+  },
+};
+</script>
+
+<style scoped>
+.table th,
+.table td {
+  height: 10px !important;
+  padding-left: 5px !important;
+  padding-top: 0px !important;
+  padding-bottom: 0px !important;
+  padding-right: 5px !important;
+  border-bottom: 0px !important;
+  border: 0px !important;
+}
+
+.title-header {
+  font-size: 14px;
+  color: #757d8c;
+  font-weight: 400;
+  text-transform: uppercase;
+  margin-left: 3px;
+}
+
+.search-product-td-product {
+  width: 400px;
+}
+
+.div-total-records {
+  background: #f3f4f6;
+  color: #374151;
+  border: 1px solid #e6e7eb;
+  padding: 3px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  min-width: 150px;
+  margin-bottom: 10px;
+}
+</style>

package/src/components/modules/stock/search-product/SearchProduct_old.vue

@@ -0,0 +1,440 @@
+<template>
+  <div>
+    <slot name="start"></slot>
+    <Search />
+    <br />
+    <div>
+      <b-row>
+        <b-col sm="12">
+          <TableTotalRecords :totalRecords="content.totalRecords" />
+        </b-col>
+      </b-row>
+      <Loading type="line" :center="false" v-show="loading" />
+      <ScrollBar id="search-product" :minHeight="400" :maxHeight="400" :endScrollBar="endScrollBar">
+        <table class="table table-responsive-xs">
+          <thead>
+            <tr>
+              <th>
+                <i class="fas fa-search"></i>
+                <span class="title-header">Tipo</span>
+              </th>
+              <th>
+                <i class="fas fa-search"></i>
+                <span class="title-header">Nome</span>
+              </th>
+              <th class="text-center">
+                <i class="fas fa-search"></i>
+                <span class="title-header">Fab...</span>
+              </th>
+              <th class="text-center" v-show="showPrice">
+                <span class="title-header">Descr...</span>
+              </th>
+              <th v-if="onlyPatrimony">
+                <i class="fas fa-search"></i>
+                <span class="title-header">Código/Patrimônio</span>
+              </th>
+              <th class="text-center" v-if="showQuantity">
+                <span class="title-header">Qtd</span>
+              </th>
+              <th class="text-center">
+                <span class="title-header" v-show="showPrice">Valor</span>
+                <span class="title-header" v-show="showReplacementValue">Reposição</span>
+              </th>
+              <th class="text-center">
+                <span class="title-header" v-show="showAvailability && !onlyPatrimony">Estoque</span>
+              </th>
+              <th class="text-center"></th>
+            </tr>
+          </thead>
+          <tbody v-for="product in content.data" :key="product.id">
+            <tr>
+              <td>
+                <div class="div-type-product">
+                  <i class="fas fa-box" v-if="product.type == 1"></i>
+                  <i class="fas fa-toolbox" v-if="product.type == 2"></i>
+                  <i class="fas fa-people-carry" v-if="product.type == 3"></i>
+                  <i class="fa-solid fa-boxes-stacked" v-if="product.type == 4"></i>
+                  <i class="fa-solid fa-recycle" v-if="product.type == 5"></i>
+                  <span class="title-type-product">
+                    {{ product.typeProductName }}</span>
+                </div>
+              </td>
+              <td>
+                <div class="div-name">
+                  <span> {{ product.name }}</span>
+                </div>
+              </td>
+              <td class="text-center">
+                <div class="div-manufacturer">
+                  <span> {{ product.manufacturerName }}</span>
+                </div>
+              </td>
+              <td v-show="showPrice">
+                <div class="editor-html" v-show="idSelected == product.id">
+                  <EditorHtml :required="false" :maxLength="2000" v-model="product.description" />
+                  <div class="div-icon text-right" @click="selectId('')">
+                    <span class="div-icon-close">
+                      <i class="fa-sharp fa-solid fa-circle-xmark"></i>
+                    </span>
+                    <span>
+                      <i class="fa-solid fa-circle-check"></i>
+                    </span>
+                  </div>
+                </div>
+                <div class="div-description text-center">
+                  <div @click="selectId(product.id)">
+                    <span v-html="product.description"></span>
+                    <i v-if="!product.description" class="icon-edit fa-solid fa-pen-to-square"></i>
+                  </div>
+                </div>
+              </td>
+              <td v-if="onlyPatrimony">
+                <div class="div-patrimony">
+                  <span> {{ product.barCode }}</span>
+                </div>
+              </td>
+              <td class="text-center" v-if="showQuantity">
+                <div class="div-quantity">
+                  <InputNumber v-if="!onlyPatrimony || product.allowWithoutPatrimony" field="number"
+                    _style="text-align:center;font-size:18px;padding-right: 13px;" :required="false" :maxLength="9"
+                    type="float" :disabled="!canUpdate" v-model="product.quantity" :params="product" :enter="add" />
+                  <span v-else>1</span>
+                </div>
+              </td>
+              <td class="text-center" v-show="showReplacementValue">
+                <div class="div-value">
+                  <InputDecimal field="number" v-model="product.replacementValue"
+                    :disabled="!canUpdate || product.type == 4" :params="product" :enter="add" />
+                </div>
+              </td>
+              <td class="text-center">
+                <div class="div-value" v-show="showPrice">
+                  <InputDecimal field="number" v-model="product.value" :disabled="!canUpdate || product.type == 4"
+                    :params="product" :enter="add" />
+                </div>
+              </td>
+              <td class="text-center">
+                <div class="available" v-show="showAvailability && product.type != 3 && !onlyPatrimony">
+                  <ItemRentStockAvailability v-if="product.available" :data="product.available" :item="product"
+                    :showButtonBack="true" />
+                </div>
+              </td>
+              <td class="text-center" v-show="showAddProduct">
+                <div class="div-btn">
+                  <Button :_key="product.id" type="primary" classIcon="fa-regular fa-plus-large" size="small"
+                    :params="product" :clicked="add" />
+                </div>
+              </td>
+            </tr>
+          </tbody>
+          <tbody v-show="content.data == 0">
+            <tr>
+              <td colspan="12">
+                <span class="title">Nenhum registro encontrado!</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </ScrollBar>
+    </div>
+  </div>
+</template>
+
+<script>
+import Search from "@nixweb/nixloc-ui/src/component/shared/Search.vue";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import TableTotalRecords from "@nixweb/nixloc-ui/src/component/shared/TableTotalRecords.vue";
+import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+import InputText from "@nixweb/nixloc-ui/src/component/forms/InputNumber";
+import InputNumber from "@nixweb/nixloc-ui/src/component/forms/InputNumber";
+import InputDecimal from "@nixweb/nixloc-ui/src/component/forms/InputDecimal";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import EditorHtml from "@nixweb/nixloc-ui/src/component/forms/EditorHtml";
+
+import ItemRentStockAvailability from "../../rental/items-rent/ItemRentStockAvailability.vue";
+
+import { mapActions, mapMutations, mapState, mapGetters } from "vuex";
+
+export default {
+  name: "SearchProduct",
+  components: {
+    Search,
+    ScrollBar,
+    TableTotalRecords,
+    Loading,
+    EditorHtml,
+    InputText,
+    InputNumber,
+    InputDecimal,
+    Button,
+    ItemRentStockAvailability,
+  },
+  props: {
+    types: String,
+    status: Number,
+    statusPatrimony: Number,
+    onlyPatrimony: Boolean,
+    periodRent: Object,
+    showPrice: Boolean,
+    overlay: Boolean,
+    showQuantity: {
+      type: Boolean,
+      default: true
+    },
+    showReplacementValue: {
+      type: Boolean,
+      default: false
+    },
+    canUpdate: {
+      type: Boolean,
+      default: true
+    },
+    showAddProduct: {
+      type: Boolean,
+      default: true
+    },
+    showAvailability: Boolean,
+    addProduct: Function,
+  },
+  data() {
+    return {
+      content: {
+        data: [],
+        totalRecords: 0,
+      },
+      baseParams: {
+        search: undefined,
+        filter: "contains",
+        currentPage: 1,
+        totalPerPage: 30,
+      },
+      urlGetAllByProduct:
+        "/api/v1/stock/search-product/get-all-by-product-or-patrimony",
+      loading: false,
+      idSelected: ""
+    };
+  },
+  created() {
+    this.getAll();
+  },
+  computed: {
+    ...mapState("generic", ["search", "executedSearch", "clearedSearch"]),
+    ...mapGetters("user", ["hasPermission"]),
+    moduleCurrent() {
+      return this.$route.matched[0].props.default.module;
+    },
+  },
+  methods: {
+    ...mapActions("generic", ["getApi"]),
+    ...mapMutations("generic", ["removeLoading"]),
+    getAll() {
+      this.loading = true;
+      let periodRent = this.createPeriodRent(this.periodRent);
+
+      let propsParam = {
+        types: this.types,
+        status: this.status,
+        statusPatrimony: this.statusPatrimony,
+        onlyPatrimony: this.onlyPatrimony,
+        showPrice: this.showPrice,
+        showAvailability: this.showAvailability,
+      };
+
+      if (this.baseParams.currentPage == 1) {
+        this.content.data = [];
+        this.loading = true;
+      }
+
+      let obj = { ...this.baseParams, ...propsParam, ...periodRent };
+      let params = { url: this.urlGetAllByProduct, obj: obj };
+
+      this.getApi(params).then((response) => {
+        let self = this;
+        response.content.data.map(function (value, key) {
+          self.content.data.push(value);
+        });
+        this.content.totalRecords = response.content.totalRecords;
+        setTimeout(function () {
+          self.removeLoading(["btnSearch", "btnClean"]);
+          self.loading = false;
+        }, 350);
+      });
+    },
+    endScrollBar() {
+      if (this.content.data.length != this.content.totalRecords) {
+        this.baseParams.currentPage++;
+        this.getAll();
+      }
+    },
+    cleanParams() {
+      this.baseParams.currentPage = 1;
+    },
+    add(product) {
+      this.addProduct(product);
+    },
+    createPeriodRent(periodRent) {
+      if (!periodRent) return {};
+      let obj = {
+        deliveryDateHour: this.periodRent.deliveryDateHour,
+        startDateHour: this.periodRent.startDateHour,
+        endDateHour: this.periodRent.endDateHour,
+        devolutionDateHour: this.periodRent.devolutionDateHour,
+        minute: this.periodRent.minute,
+        hour: this.periodRent.hour,
+        day: this.periodRent.day,
+        month: this.periodRent.month,
+        year: this.periodRent.year,
+      };
+      return obj;
+    },
+    selectId(id) {
+      this.idSelected = id;
+    }
+  },
+  watch: {
+    executedSearch: function () {
+      this.baseParams.search = this.search.content;
+      if (this.search.filter.id) this.baseParams.filter = this.search.filter.id;
+      this.cleanParams();
+      this.getAll();
+    },
+    clearedSearch: function () {
+      this.baseParams.search = "";
+      this.baseParams.filter = "";
+      this.cleanParams();
+      this.getAll();
+    },
+  },
+};
+</script>
+<style scoped>
+.table th,
+.table td {
+  height: 10px !important;
+  padding-left: 5px !important;
+  padding-top: 0px !important;
+  padding-bottom: 0px !important;
+  padding-right: 5px !important;
+  border-bottom: 0px !important;
+}
+
+.title-header {
+  font-size: 14px;
+  color: #757d8c;
+  font-weight: 400;
+  text-transform: uppercase;
+  margin-left: 3px;
+}
+
+.title-type-product {
+  margin-left: 6px;
+}
+
+.div-type-product {
+  width: 200px;
+  margin-top: 16px;
+}
+
+.div-patrimony {
+  width: 250px;
+  word-wrap: break-word;
+  margin-top: 14px;
+}
+
+.div-name {
+  max-width: 300px;
+  margin-top: 15px;
+}
+
+.div-manufacturer {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100px;
+  margin-top: 15px;
+}
+
+.div-description {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 150px;
+  margin-top: 15px;
+  color: #3f529b;
+  font-size: 14px;
+  font-weight: 400;
+  cursor: pointer;
+}
+
+.div-description.hover {
+  text-decoration: underline;
+}
+
+
+.div-name-margin {
+  margin-top: 15px;
+}
+
+.div-quantity {
+  width: 90px;
+  margin: auto;
+  padding-top: 10px;
+}
+
+.available {
+  margin-top: 15px;
+}
+
+.div-value {
+  width: 150px;
+  margin: auto;
+  padding-top: 10px;
+}
+
+.div-btn {
+  padding-top: 12px;
+}
+
+.description {
+  color: rgb(116, 113, 113);
+  font-style: italic;
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.editor-html {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 600px;
+  background-color: white;
+  border: 1px solid #E8EAED !important;
+  border-radius: 10px;
+  padding: 10px 15px 0px 15px;
+  z-index: 9999;
+}
+
+.icon-edit {
+  color: #979DA8 !important;
+}
+
+.div-icon {
+  font-size: 22px;
+  cursor: pointer;
+}
+
+.fa-circle-check {
+  color: green;
+}
+
+.fa-circle-xmark {
+  color: red;
+}
+
+.div-icon-close {
+  margin-right: 5px;
+}
+</style>