@nixweb/nixloc-ui 1.14.0 → 1.16.0

package/src/components/modules/rfid/receive/ReceiveTags.vue

@@ -0,0 +1,472 @@
+<template>
+  <div class="receive-tags">
+    <Button
+      _key="btnOpenRfid"
+      color="white"
+      backGroundColor="#567EB3"
+      title="Leitura RFID"
+      classIcon="fa-sharp fa-regular fa-satellite-dish"
+      size="small"
+      :clicked="openRfidModal"
+    />
+
+    <Modal
+      title="Leitura RFID"
+      :width="1000"
+      :height="750"
+      v-if="showModal('rfid')"
+      :onHideModal="closeModal"
+    >
+      <div class="rfid-modal-content">
+        <div class="rfid-summary-cards">
+          <div class="rfid-summary-card rfid-summary-card-total">
+            <span class="rfid-summary-label">Total</span>
+            <div class="rfid-summary-value title">
+              {{ filteredRows.length }}
+            </div>
+          </div>
+
+          <div class="rfid-summary-card rfid-summary-card-code">
+            <div class="rfid-summary-code-header">
+              <span class="rfid-summary-label">Token</span>
+              <button
+                type="button"
+                class="rfid-regenerate-code"
+                @click="regenerateToken"
+                title="Gerar novo código"
+              >
+                <i class="fa-solid fa-shuffle"></i>
+              </button>
+            </div>
+            <div class="rfid-generated-code">{{ generatedToken }}</div>
+          </div>
+        </div>
+
+        <div class="rfid-table-tools">
+          <input
+            v-model="searchTerm"
+            type="text"
+            class="rfid-search-input"
+            placeholder="Pesquisar tag ou produto..."
+          />
+        </div>
+
+        <div class="rfid-top-row">
+          <div class="rfid-filters">
+            <CheckboxSimple
+              :markFormDirty="false"
+              title="Agrupar por produto"
+              v-model="groupByProduct"
+            />
+          </div>
+        </div>
+
+        <div class="rfid-table-header">
+          <div class="col-tag title">{{ groupByProduct ? "Quantidade" : "Nº Tag" }}</div>
+          <div class="col-product title">
+            Produto
+            <Button
+              _key="btnClearRfid"
+              type="info"
+              classIcon="fa-solid fa-broom"
+              size="small"
+              class="rfid-header-clear"
+              :clicked="clearList"
+            />
+          </div>
+        </div>
+
+        <div
+          v-if="filteredRows.length === 0"
+          class="rfid-empty"
+        >
+          Nenhuma tag recebida.
+        </div>
+
+        <div v-else>
+          <ScrollBar
+            id="receive-tags-list"
+            :minHeight="250"
+            :maxHeight="250"
+            class="rfid-list"
+          >
+            <div v-if="groupByProduct">
+              <div
+                class="rfid-group-row"
+                v-for="(group, index) in groupedByProduct"
+                :key="group.productName || index"
+              >
+                <div class="rfid-group-header">
+                  <span class="rfid-group-title title">{{ group.productName }}</span>
+                  <span class="rfid-pill rfid-group-total">{{ group.total }}</span>
+                </div>
+              </div>
+            </div>
+
+            <div
+              v-else
+              class="rfid-row"
+              v-for="(item, index) in filteredRows"
+              :key="item.key || index"
+            >
+              <div class="col-tag">
+                <span class="rfid-pill">{{ item.tag }}</span>
+              </div>
+              <div class="col-product">
+                <span class="rfid-product">{{ item.productName }}</span>
+              </div>
+            </div>
+          </ScrollBar>
+        </div>
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import CheckboxSimple from "@nixweb/nixloc-ui/src/component/forms/CheckboxSimple";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+
+import { mapState, mapGetters, mapMutations } from "vuex";
+
+export default {
+  name: "ReceiveTags",
+  components: {
+    Button,
+    CheckboxSimple,
+    ScrollBar,
+    Modal,
+  },
+  data() {
+    return {
+      groupByProduct: false,
+      searchTerm: "",
+      generatedToken: "",
+    };
+  },
+  created() {
+    this.regenerateToken();
+  },
+  computed: {
+    ...mapState("rfid", ["data"]),
+    ...mapGetters("generic", ["showModal"]),
+    simulatedData() {
+      return [];
+    },
+    sourceData() {
+      return Array.isArray(this.data) ? this.data : [];
+    },
+    rfidRows() {
+      const list = this.sourceData;
+      const uniqueTags = new Set();
+      const rows = [];
+
+      list.forEach((item, itemIndex) => {
+        if (item.token && item.token !== this.generatedToken) return;
+
+        const products = Array.isArray(item.products) ? item.products : [];
+
+        products.forEach((product, productIndex) => {
+          const tag = product.tag;
+          if (!tag || uniqueTags.has(tag)) return;
+
+          uniqueTags.add(tag);
+          rows.push({
+            key: `${item.code || itemIndex}-${tag || productIndex}`,
+            tag: tag,
+            productName: product.productName,
+          });
+        });
+      });
+
+      return rows;
+    },
+    filteredRows() {
+      const term = this.searchTerm.trim().toLowerCase();
+      if (!term) return this.rfidRows;
+      return this.rfidRows.filter(
+        (item) =>
+          (item.tag && item.tag.toLowerCase().includes(term)) ||
+          (item.productName && item.productName.toLowerCase().includes(term))
+      );
+    },
+    groupedByProduct() {
+      const groups = {};
+
+      this.filteredRows.forEach((item) => {
+        const productName = item.productName || "Produto não informado";
+        if (!groups[productName]) {
+          groups[productName] = {
+            productName,
+            total: 0,
+          };
+        }
+
+        groups[productName].total += 1;
+      });
+
+      return Object.values(groups);
+    },
+  },
+  methods: {
+    ...mapMutations("generic", ["openModal", "hideModal", "removeLoading"]),
+    ...mapMutations("rfid", ["resetRfidData"]),
+    openRfidModal() {
+      this.removeLoading(["btnOpenRfid"]);
+      this.openModal("rfid");
+    },
+    closeModal() {
+      this.hideModal();
+    },
+    clearList() {
+      this.removeLoading(["btnClearRfid"]);
+      this.resetRfidData();
+    },
+    generateToken() {
+      const numbers = Math.floor(Math.random() * 1000)
+        .toString()
+        .padStart(3, "0");
+      const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+      const letter = letters[Math.floor(Math.random() * letters.length)];
+      return `${numbers}${letter}`;
+    },
+    regenerateToken() {
+      this.generatedToken = this.generateToken();
+    },
+    playSuccessSound() {
+      const audio = new Audio("/sound/success.wav");
+      audio.play().catch(() => {});
+    },
+  },
+  watch: {
+    "rfidRows.length"(newLen, oldLen) {
+      if (newLen > oldLen && newLen > 0) {
+        this.playSuccessSound();
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.rfid-modal-content {
+  max-height: 680px;
+  overflow: auto;
+}
+
+.rfid-summary-cards {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.rfid-summary-card {
+  border: 1px solid #e7e8ec;
+  border-radius: 12px;
+  background: #ffffff;
+  padding: 10px 12px;
+}
+
+.rfid-summary-card-total {
+  min-width: 180px;
+  background: #f7fafc;
+}
+
+.rfid-summary-card-code {
+  flex: 1;
+  background: #f8faff;
+}
+
+.rfid-summary-label {
+  display: block;
+  font-size: 12px;
+  color: #64748b;
+  margin-bottom: 4px;
+}
+
+.rfid-summary-value {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: #1f2937;
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.rfid-summary-code-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.rfid-regenerate-code {
+  border: 0;
+  background: transparent;
+  color: #64748b;
+  width: 26px;
+  height: 26px;
+  border-radius: 999px;
+  cursor: pointer;
+}
+
+.rfid-regenerate-code:hover {
+  background: #e8eefb;
+  color: #1e3a8a;
+}
+
+.rfid-top-row {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.rfid-table-tools {
+  padding: 0 0 10px 0;
+}
+
+.rfid-search-input {
+  width: 100%;
+  padding: 5px 14px;
+  font-size: 13px;
+  border-radius: 50px;
+  border: 1px solid #e5e4e8;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.rfid-search-input:focus {
+  border-color: #a0aec0;
+}
+
+.rfid-filters {
+  padding: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.rfid-generated-code {
+  display: inline-flex;
+  align-items: center;
+  min-height: 42px;
+  padding: 0 2px;
+  color: #1d4ed8;
+  font-size: 26px;
+  font-weight: 700;
+  letter-spacing: 0.2em;
+}
+
+.rfid-totalization {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #4b5563;
+  font-weight: 600;
+}
+
+.rfid-table-header {
+  display: flex;
+  padding: 12px 18px;
+  background: #f9fafb;
+  border-bottom: 1px solid #eef0f3;
+  font-size: 14px;
+  font-weight: 600;
+  color: #6b7280;
+}
+
+.col-product {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+}
+
+.rfid-header-clear {
+  margin-left: 8px;
+}
+
+.rfid-list {
+  border: 1px solid #eef0f3;
+  border-top: 0;
+}
+
+.rfid-row {
+  display: flex;
+  padding: 14px 18px;
+  border-bottom: 1px solid #f3f4f6;
+  align-items: center;
+}
+
+.rfid-group-row {
+  padding: 14px 18px;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.rfid-group-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  gap: 12px;
+}
+
+.rfid-group-title {
+  color: #111827;
+  font-weight: 600;
+}
+
+.rfid-group-total {
+  color: #4b5563;
+  font-size: 18px;
+}
+
+.rfid-row:last-child {
+  border-bottom: 0;
+}
+
+.col-tag {
+  min-width: 260px;
+}
+
+.col-product {
+  flex: 1;
+}
+
+.rfid-pill {
+  background: #f3f4f6;
+  color: #374151;
+  padding: 6px 14px;
+  border-radius: 16px;
+  font-size: 13px;
+}
+
+.rfid-product {
+  color: #111827;
+  font-size: 14px;
+}
+
+.rfid-empty {
+  padding: 24px 18px;
+  color: #6b7280;
+}
+
+@media (max-width: 768px) {
+  .rfid-summary-cards,
+  .rfid-top-row,
+  .rfid-row,
+  .rfid-table-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .col-tag {
+    min-width: 100%;
+  }
+}
+</style>

package/src/components/modules/shared/ParametersInfo.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="params-wrapper">
+    <ScrollBar
+      :minHeight="450"
+      :maxHeight="450"
+    >
+      <div
+        v-for="group in groupedParams"
+        :key="group.name"
+        class="params-group"
+      >
+        <h3 class="group-title">{{ group.name }}</h3>
+
+        <table class="params-table">
+          <thead>
+            <tr>
+              <th>Parâmetro</th>
+              <th>Descrição</th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr
+              v-for="item in group.items"
+              :key="item.key"
+            >
+          <td class="param-key">
+            <span
+              @click="copyParam(item.key)"
+              class="param-key-text"
+            >
+              {{ item.key }} <i class="fa-regular fa-copy icon-copy"></i>
+            </span>
+          </td>
+          <td class="param-desc">{{ item.description }}</td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+    </ScrollBar>
+  </div>
+</template>
+
+<script>
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+
+export default {
+  name: "ParametersInfo",
+  components: {
+    ScrollBar,
+  },
+  props: {
+    params: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  computed: {
+    groupedParams() {
+      return [
+        {
+          name: "Comum",
+          items: this.params.filter((p) => p.key.includes("comum")),
+        },
+        {
+          name: "Locacao",
+          items: this.params.filter(
+            (p) =>
+              p.key.includes("locacao.") &&
+              !p.key.includes("cliente") &&
+              !p.key.includes("colaborador") &&
+              !p.key.includes("contato")
+          ),
+        },
+        {
+          name: "Cliente",
+          items: this.params.filter((p) => p.key.includes("locacao.cliente")),
+        },
+        {
+          name: "Colaborador",
+          items: this.params.filter((p) =>
+            p.key.includes("locacao.colaborador")
+          ),
+        },
+        {
+          name: "Contato",
+          items: this.params.filter((p) => p.key.includes("locacao.contato")),
+        },
+        {
+          name: "Periodo",
+          items: this.params.filter((p) => p.key.includes("periodo")),
+        },
+      ];
+    },
+  },
+  methods: {
+    copyParam(text) {
+      if (navigator && navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(text);
+      } else {
+        const textarea = document.createElement("textarea");
+        textarea.value = text;
+        textarea.setAttribute("readonly", "");
+        textarea.style.position = "absolute";
+        textarea.style.left = "-9999px";
+        document.body.appendChild(textarea);
+        textarea.select();
+        document.execCommand("copy");
+        document.body.removeChild(textarea);
+      }
+      this.$toasted.show("Parâmetro copiado...", {
+        type: "info",
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.params-wrapper {
+  padding: 20px;
+  background: #fff;
+}
+
+.params-group {
+  margin-bottom: 30px;
+}
+
+.group-title {
+  font-size: 18px;
+  margin-bottom: 10px;
+  font-weight: bold;
+}
+
+.params-table {
+  width: 100%;
+  border-collapse: collapse;
+  border: 1px solid #e5e7eb;
+}
+
+.params-table th {
+  background: #f3f4f6;
+  padding: 8px;
+  text-align: left;
+  font-weight: bold;
+}
+
+.params-table td {
+  padding: 8px;
+  border-top: 1px solid #e5e7eb;
+}
+
+.param-key {
+  font-family: monospace;
+  font-size: 13px;
+  color: #111827;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.param-key-text {
+  word-break: break-all;
+  cursor: pointer;
+}
+
+.icon-copy {
+  color: #6b7280;
+}
+
+.param-desc {
+  color: #444;
+  font-size: 14px;
+}
+</style>

package/src/components/modules/shared/address/Address.js

@@ -0,0 +1,32 @@
+export default class Address {
+    constructor() {
+        this.id = "";
+        this.description = "";
+        this.addressValueObject = {
+            zipCode: "",
+            street: "",
+            number: "",
+            complement: "",
+            province: "",
+            city: "",
+            state: { id: "", content: "" },
+        };
+        this.main = false;
+        this.customerSupplierId = "";
+    }
+    update(data) {
+        this.id = data.id;
+        this.description = data.description;
+        this.addressValueObject = {
+            zipCode: data.addressResponse.zipCode,
+            street: data.addressResponse.street,
+            number: data.addressResponse.number,
+            complement: data.addressResponse.complement,
+            province: data.addressResponse.province,
+            city: data.addressResponse.city,
+            state: { id: data.addressResponse.state.content, content: data.addressResponse.state.content },
+        };
+        this.main = data.main;
+        this.customerSupplierId = data.customerSupplierId;
+    }
+}