@nixweb/nixloc-ui 1.14.0 → 1.16.0

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

@@ -0,0 +1,398 @@
+<template>
+  <tr>
+    <td class="product-item-search-td-main">
+      <div class="product-item-search-div-avatar">
+        <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>
+      </div>
+
+      <div class="product-item-search-div-product">
+        <span class="product-item-search-title-type-product">
+          {{ product.productFullName }}
+          {{ product.typeProductName }}
+        </span>
+
+        <div class="product-item-search-div-badges">
+          <div
+            v-if="product.categoryProductName"
+            :style="{ backgroundColor: product.categoryProductColor, color: product.categoryProductColor ? 'white' : 'black' }"
+            class="product-item-search-badge-category"
+          >
+            {{ product.categoryProductName }}
+          </div>
+
+          <div
+            v-if="product.manufacturerName"
+            class="product-item-search-badge-manufacturer"
+          >
+            <span class="divider-dot"></span> {{ product.manufacturerName }}
+          </div>
+        </div>
+      </div>
+    </td>
+
+    <td>
+      <Tooltip :title="descriptionTooltip">
+        <div class="product-item-search-div-description text-center">
+          <div @click="toggleEdit(true)">
+            <span v-html="product.description"></span>
+            <i
+              v-if="!product.description"
+              class="product-item-search-icon-edit fa-solid fa-pen-to-square"
+            ></i>
+          </div>
+        </div>
+      </Tooltip>
+
+      <div
+        class="product-item-search-editor-html"
+        v-show="editing"
+      >
+        <EditorHtml
+          :required="false"
+          :maxLength="2000"
+          v-model="product.description"
+        />
+        <div
+          class="product-item-search-div-icon text-right"
+          @click="toggleEdit(false)"
+        >
+          <span class="product-item-search-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>
+    </td>
+
+    <td v-if="onlyPatrimony">
+      <div class="product-item-search-div-patrimony">
+        <span>{{ product.barCode }}</span>
+      </div>
+    </td>
+
+    <td
+      class="text-center"
+      v-if="showQuantity"
+    >
+      <div class="product-item-search-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="emitAdd"
+        />
+        <span v-else>1</span>
+      </div>
+    </td>
+
+    <td
+      class="text-center"
+      v-show="showReplacementValue"
+    >
+      <div class="product-item-search-div-value">
+        <InputDecimal
+          field="number"
+          v-model="product.replacementValue"
+          :disabled="!canUpdate || product.type == 4"
+          :params="product"
+          :enter="emitAdd"
+        />
+      </div>
+    </td>
+
+    <td class="text-center">
+      <div
+        class="product-item-search-div-value"
+        v-show="showPrice"
+      >
+        <InputDecimal
+          field="number"
+          v-model="product.value"
+          :disabled="!canUpdate || product.type == 4"
+          :params="product"
+          :enter="emitAdd"
+        />
+      </div>
+    </td>
+    <td>
+      <div
+        class="product-item-search-available text-center"
+        v-show="showAvailability && product.type != 3 && !onlyPatrimony"
+      >
+        <BadgeAvailabilityStock
+          v-if="product.available"
+          :itemRent="product"
+          :available="product.available"
+        />
+      </div>
+    </td>
+    <td
+      class="text-center"
+      v-show="showAddProduct"
+    >
+      <div class="product-item-search-div-btn">
+        <Button
+          :_key="product.id"
+          type="primary"
+          classIcon="fa-regular fa-plus-large"
+          size="small"
+          :params="product"
+          :clicked="emitAdd"
+        />
+      </div>
+    </td>
+  </tr>
+</template>
+
+<script>
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import EditorHtml from "@nixweb/nixloc-ui/src/component/forms/EditorHtml";
+import InputDecimal from "@nixweb/nixloc-ui/src/component/forms/InputDecimal";
+import InputNumber from "@nixweb/nixloc-ui/src/component/forms/InputNumber";
+import Tooltip from "@nixweb/nixloc-ui/src/component/layout/Tooltip";
+
+import ItemRentStockAvailability from "../../rental/items-rent/ItemRentStockAvailability.vue";
+import BadgeAvailabilityStock from "../../rental/new-items-rent/BadgeAvailabilityStock.vue";
+
+export default {
+  name: "ProductItem",
+  components: {
+    InputNumber,
+    InputDecimal,
+    Button,
+    EditorHtml,
+    ItemRentStockAvailability,
+    BadgeAvailabilityStock,
+    Tooltip,
+  },
+  props: {
+    product: { type: Object, required: true },
+    onlyPatrimony: Boolean,
+    showPrice: Boolean,
+    showQuantity: { type: Boolean, default: true },
+    showReplacementValue: { type: Boolean, default: false },
+    canUpdate: { type: Boolean, default: true },
+    showAddProduct: { type: Boolean, default: true },
+    showAvailability: Boolean,
+  },
+  data() {
+    return {
+      editing: false,
+    };
+  },
+  computed: {
+    descriptionTooltip() {
+      const raw =
+        this.product && this.product.description
+          ? this.product.description
+          : "";
+      return raw
+        .replace(/<[^>]*>/g, " ")
+        .replace(/\s+/g, " ")
+        .trim();
+    },
+  },
+  methods: {
+    emitAdd() {
+      this.$emit("add", this.product);
+    },
+    toggleEdit(val) {
+      this.editing = val;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.product-item-search-td-main {
+  display: flex;
+  align-items: center;
+}
+
+.table th,
+.table td {
+  border-top: 0px solid #dee2e6;
+}
+
+.product-item-search-div-avatar {
+  width: 40px;
+  height: 40px;
+  display: grid;
+  place-items: center;
+  border-radius: 12px;
+  background: #f7f7f8;
+  border: 1px solid #e5e7eb;
+  color: #6b7280;
+  font-size: 16px;
+  line-height: 1;
+  margin-right: 20px;
+}
+
+.product-item-search-div-product {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 350px;
+}
+
+.product-item-search-title-type-product {
+  font-weight: 500;
+  font-size: 13px;
+  margin-left: 6px;
+  line-height: 1.35;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.product-item-search-div-type-product {
+  width: 350px;
+  margin-top: 16px;
+}
+
+.product-item-search-div-patrimony {
+  width: 200px;
+  word-wrap: break-word;
+  margin-top: 14px;
+}
+
+.product-item-search-div-name {
+  max-width: 300px;
+  margin-top: 15px;
+}
+
+.product-item-search-div-description {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 200px;
+  margin-top: 15px;
+  color: #75787c;
+  font-size: 14px;
+  font-weight: 400;
+  cursor: pointer;
+}
+
+.product-item-search-div-quantity {
+  width: 90px;
+  margin: auto;
+  padding-top: 10px;
+}
+
+.product-item-search-available {
+  margin-top: 13px;
+}
+
+.product-item-search-div-value {
+  width: 150px;
+  margin: auto;
+  padding-top: 10px;
+}
+
+.product-item-search-div-btn {
+  padding-top: 12px;
+}
+
+.product-item-search-editor-html {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 600px;
+  background-color: white;
+  border: 1px solid #e8eaed !important;
+  padding: 10px 15px 0 15px;
+  z-index: 9999;
+  border-radius: 16px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+}
+
+.product-item-search-icon-edit {
+  color: #979da8 !important;
+}
+
+.product-item-search-div-icon {
+  font-size: 22px;
+  cursor: pointer;
+}
+
+.fa-circle-check {
+  color: green;
+}
+
+.fa-circle-xmark {
+  color: red;
+}
+
+.product-item-search-div-icon-close {
+  margin-right: 5px;
+}
+
+.product-item-search-div-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: -5px;
+  margin-left: 4px;
+}
+
+.product-item-search-badge-category {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding-left: 10px;
+  padding-right: 10px;
+  font-size: 12px;
+  height: 25px;
+  border-radius: 20px;
+  background: #f3f6fa;
+}
+
+.product-item-search-badge-manufacturer {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding-right: 10px;
+  font-size: 13px;
+  height: 25px;
+  border-radius: 20px;
+  gap: 5px;
+  margin-right: 10px;
+}
+
+.divider-dot {
+  display: inline-block;
+  width: 5px;
+  height: 5px;
+  background: #999;
+  border-radius: 50%;
+  margin: 0 8px;
+}
+</style>

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

@@ -0,0 +1,163 @@
+<template>
+  <div>
+    <b-row>
+      <b-col sm="12">
+        <InputText title="Digite o Nº Código e pressione enter ou utilize o Leitor Óptico"
+          classIconTitle="fal fa-barcode-read" field="barCode" :maxLength="500" :enter="executeSearch"
+          :disabled="disabled" v-model="barCode" />
+      </b-col>
+    </b-row>
+    <Loading type="line" :center="false" v-show="loading" />
+    <Alert type="danger" v-show="showAlert && !modal.open">
+      <span> {{ message }}</span>
+    </Alert>
+    <Modal title="Foi encontrado mais de um Produto com o mesmo código!" :width="900" :height="750"
+      v-show="showModal('duplicateCode')">
+      <Alert type="danger" v-show="showAlert && modal.open">
+        <span> {{ message }}</span>
+      </Alert>
+      <ScrollBar :minHeight="0" :maxHeight="400">
+        <div v-for="item in duplicate" :key="item.id">
+          <div class="item-duplicate">
+            <b-row>
+              <b-col sm="8">
+                {{ item.productFullName }}
+              </b-col>
+              <b-col sm="4">
+                <div class="text-right">
+                  <Button :_key="item.id + 'p'" title="Selecionar" type="info" size="small" :params="item"
+                    :clicked="selectProduct" />
+                </div>
+              </b-col>
+            </b-row>
+          </div>
+        </div>
+      </ScrollBar>
+    </Modal>
+  </div>
+</template>
+<script>
+import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
+import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
+import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+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 { mapActions, mapMutations, mapState, mapGetters } from "vuex";
+
+export default {
+  components: {
+    InputText,
+    Molded,
+    Alert,
+    Modal,
+    Button,
+    ScrollBar,
+    Loading,
+  },
+  name: "SearchByBarcode",
+  props: ["urlGet", "disabled", "params", "value"],
+  data() {
+    return {
+      barCode: "",
+      showAlert: false,
+      message: "",
+      duplicate: [],
+      loading: false,
+    };
+  },
+  computed: {
+    ...mapState("generic", ["modal", "event"]),
+    ...mapGetters("generic", ["showModal"]),
+  },
+  methods: {
+    ...mapActions("generic", ["postApi"]),
+    ...mapMutations("generic", [
+      "addEvent",
+      "openModal",
+      "hideModal",
+      "removeLoading",
+    ]),
+    executeSearch() {
+      this.loading = true;
+      let params = {
+        url: this.urlGet,
+        obj: { barCode: this.barCode, ...this.params },
+        notNotifyToast: true,
+      };
+      this.postApi(params).then((response) => {
+        var length = response.content.length;
+        if (length == 1) {
+          this.addEvent({
+            name: "executedSearchByBarcode",
+            data: response.content[0],
+          });
+          this.barCode = "";
+        }
+
+        if (length > 1) {
+          this.duplicate = response.content;
+          this.openModal("duplicateCode");
+        }
+
+        if (length == 0) {
+          let message = `Produto ${this.barCode} não disponível ou não existe...`;
+          this.showNotification(message);
+        }
+        this.loading = false;
+      });
+    },
+    selectProduct(product) {
+      this.addEvent({
+        name: "executedSearchByBarcode",
+        data: product,
+      });
+      let id = product.id + "p";
+
+      let self = this;
+      setTimeout(function () {
+        self.removeLoading([id]);
+        self.hideModal();
+        self.barCode = "";
+      }, 200);
+    },
+    showNotification(message) {
+      this.showAlert = true;
+      this.message = message;
+      this.hideMessage();
+      this.$toasted.show(message, {
+        type: "error",
+      });
+    },
+    hideMessage() {
+      let self = this;
+      setTimeout(function () {
+        self.showAlert = false;
+      }, 4000);
+    },
+  },
+};
+</script>
+<style scoped>
+.div-bar-code {
+  margin-top: 27px;
+}
+
+.item-duplicate {
+  margin-top: 5px;
+  background-color: #f5f5f5;
+  border: 1px solid #ddd;
+  padding-top: 10px;
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-bottom: 10px;
+  border-radius: 5px;
+  background-color: #fafafc !important;
+}
+
+.div-search {
+  margin-bottom: 10px;
+}
+</style>