@nixweb/nixloc-ui 1.16.0 → 1.19.0

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

@@ -1,1445 +0,0 @@
-<template>
-  <div class="items-list-root">
-    <div
-      class="items-list-loading"
-      v-show="loading && totalLoading == 1"
-    >
-      <Loading
-        type="line"
-        :center="false"
-      />
-      <AnimatedPhrase :phrases="['Aguarde...',
-                'Estamos carregando os produtos...',
-                'Isso pode levar alguns segundos...'
-            ]" />
-    </div>
-    <ItemsRentCreate
-      v-show="totalLoading > 1"
-      :rent="rent"
-      :operational="operational"
-      :kitId="itemSelected.kitId"
-      :kitName="itemSelected.kitRentName || itemSelected.productFullName || ''"
-      :itemsRentId="itemSelected.id"
-      :kitOrAcessory="kitOrAcessory"
-      v-model="selectedPeriod"
-      :itemsRent="itemSelected"
-      :changed="changedPeriod"
-    />
-
-    <ItemKitOrAccessoryList
-      v-if="showListKitOrAccessory"
-      :kitOrAcessory="kitOrAcessory"
-      :rent="rent"
-      :itemRent="itemSelected"
-      :operational="operational"
-      :back="back"
-    />
-    <div v-else>
-      <div class="items-list-main">
-        <div class="items-list-header-bar">
-          <div v-show="totalLoading > 1">
-            <button
-              class="items-list-action-chip-add"
-              @click="addGroupLocal()"
-            >
-              <span class="items-list-tooltip-wrapper">
-                <i
-                  class="fa-solid fa-plus"
-                  aria-hidden="true"
-                ></i>
-                <span class="items-list-tooltip-box">Adicionar grupo</span>
-              </span>
-              <span>Grupo</span>
-            </button>
-            <button
-              class="items-list-action-chip-add"
-              @click="hideShowGroups()"
-            >
-              <i class="fa-sharp fa-solid fa-grip-dots-vertical"></i>
-
-            </button>
-          </div>
-          <div
-            class="items-list-div-loading"
-            v-show="!showGroups && loading && totalLoading > 1"
-          >
-            <vue-loading
-              type="bubbles"
-              color="#D98621"
-              :size="{ width: '26px', height: '26px' }"
-            ></vue-loading>
-          </div>
-          <div class="items-list-filter">
-            <b-row>
-              <b-col v-if="!operational && totalLoading > 1">
-                <CheckboxSimple
-                  title="Mostrar acessórios"
-                  :markFormDirty="false"
-                  v-model="withAccessory"
-                  :changed="getAll"
-                />
-              </b-col>
-              <b-col v-if="!operational && totalLoading > 1">
-                <CheckboxSimple
-                  title="Mostrar operacionais"
-                  :markFormDirty="false"
-                  v-model="withOnlyStock"
-                  :changed="getAll"
-                />
-              </b-col>
-              <b-col v-if="totalLoading > 1">
-                <div class="items-list-text-right">
-                  <div class="items-list-div-total side-by-side items-list-text-center">
-                    Total <b>
-                      {{ totalProducts }}
-                    </b> registros
-                  </div>
-                </div>
-              </b-col>
-            </b-row>
-          </div>
-        </div>
-
-        <div
-          v-if="totalLoading > 1"
-          class="items-list-table"
-        >
-          <div class="items-list-header items-list-row">
-            <div class="items-list-td-product">
-              <span class="items-list-title-header">
-                <b-form-checkbox
-                  v-model="selectAll"
-                  @change="select"
-                >Produto
-                </b-form-checkbox>
-              </span>
-
-            </div>
-            <div class="items-list-text-center items-list-td-quantity">
-              <span class="items-list-title-header"></span>
-            </div>
-            <div class="items-list-text-center items-list-td-stock">
-              <span class="items-list-title-header"></span>
-            </div>
-            <div
-              v-if="!operational"
-              class="items-list-text-center items-list-td-invoice"
-            >
-              <span
-                v-if="rent.statusRental == 2"
-                class="items-list-title-header"
-              ></span>
-            </div>
-            <div
-              v-if="!operational"
-              class="items-list-text-center items-list-td-price"
-            >
-              <span class="items-list-title-header"></span>
-            </div>
-            <div
-              v-if="!operational"
-              class="items-list-text-center items-list-td-access"
-            >
-              <span class="items-list-title-header"></span>
-            </div>
-          </div>
-
-          <draggable
-            v-model="items"
-            group="masters"
-            handle=".draggable-drag-handle"
-            item-key="__key"
-            :disabled="loading"
-            @end="onDragEndMasters"
-          >
-            <div
-              v-for="(master, mIdx) in items"
-              :key="'master-' + (master.__key || master.id || mIdx)"
-              class="items-list-tbody"
-            >
-              <div class="items-list-row items-list-group-master">
-                <div class="items-list-level items-list-level-1">
-                  <i class="fa-solid fa-grip-vertical draggable-drag-handle items-list-rent-row-icon-layer"></i>
-                  <i class="fa-solid fa-layer-group items-list-icon-order-group"></i>
-
-                  <span
-                    class="items-list-title-group title"
-                    @click="startEditName('group', master, mIdx)"
-                    style="cursor:pointer;"
-                  >
-                    <template v-if="editing.type === 'group' && editing.mIdx === mIdx">
-                      <div class="items-inline-edit-wrap">
-                        <input
-                          v-model="editing.value"
-                          @keyup.enter="commitEditNameGroup()"
-                          @blur="commitEditNameGroup()"
-                          class="items-inline-edit"
-                          type="text"
-                        />
-                        <i
-                          class="fa-solid fa-check items-inline-edit-ok"
-                          @click="commitEditNameGroup()"
-                        ></i>
-                      </div>
-                    </template>
-                    <template v-else>
-                      {{ master.groupName }}
-                      <span class="items-list-tooltip-wrapper">
-                        <i
-                          class="fa-regular fa-pen-to-square items-list-draggable-edit-icon"
-                          aria-label="Editar grupo"
-                          role="button"
-                          @click.stop="startEditName('group', master, mIdx)"
-                        ></i>
-                        <span class="items-list-tooltip-box">Editar grupo</span>
-                      </span>
-
-                      <span class="items-list-tooltip-wrapper">
-                        <i
-                          class="fa-solid fa-plus items-list-draggable-edit-icon"
-                          aria-label="Adicionar subgrupo"
-                          role="button"
-                          style="margin-left:8px;color:#16a34a;"
-                          @click.stop="addSubGroupLocal(master, mIdx)"
-                        ></i>
-                        <span class="items-list-tooltip-box">Adicionar subgrupo</span>
-                      </span>
-
-                      <span class="items-list-tooltip-wrapper">
-                        <i
-                          class="fa-solid fa-xmark items-list-draggable-edit-icon"
-                          aria-label="Excluir grupo"
-                          role="button"
-                          style="margin-left:8px;color:#ef4444;"
-                          @click.stop="removeGroup(master, mIdx)"
-                        ></i>
-                        <span class="items-list-tooltip-box">Excluir grupo</span>
-                      </span>
-                    </template>
-                  </span>
-                </div>
-              </div>
-
-              <draggable
-                :list="getMasterByKey(master).subGroups"
-                handle=".draggable-sub-drag-handle"
-                item-key="__key"
-                :disabled="loading"
-                @end="onDragEndSubGroups(master, mIdx)"
-              >
-                <div
-                  v-for="(group, gIdx) in getMasterByKey(master).subGroups"
-                  :key="'group-' + (group.__key || group.groupId || group.id || gIdx)"
-                >
-                  <div class="items-list-row items-list-group">
-                    <div class="items-list-group-cell">
-                      <div class="items-list-level items-list-level-2">
-                        <span
-                          class="items-list-title-group title"
-                          @click="startEditName('subgroup', group, mIdx, gIdx)"
-                          style="cursor:pointer;"
-                        >
-                          <template
-                            v-if="editing.type === 'subgroup' && editing.mIdx === mIdx && editing.gIdx === gIdx">
-                            <div class="items-inline-edit-wrap">
-                              <input
-                                v-model="editing.value"
-                                @keyup.enter="commitEditNameSubGroup()"
-                                @blur="commitEditNameSubGroup()"
-                                class="items-inline-edit"
-                                type="text"
-                              />
-                              <i
-                                class="fa-solid fa-check items-inline-edit-ok"
-                                @click="commitEditNameSubGroup()"
-                              ></i>
-                            </div>
-                          </template>
-                          <template v-else>
-                            <i class="fa-regular fa-layer-group items-list-icon-order-group"></i>
-                            <i
-                              class="fa-solid fa-grip-lines items-list-rent-row-icon-layer draggable-sub-drag-handle"></i>
-                            {{ group.groupName }}
-
-                            <span class="items-list-tooltip-wrapper">
-                              <i
-                                class="fas fa-plus-circle items-list-add-product-icon"
-                                aria-label="Adicionar produto"
-                                role="button"
-                                @click.stop="addProductBySubgroup(group)"
-                              ></i>
-                              <span class="items-list-tooltip-box">Adicionar
-                                produto</span>
-                            </span>
-
-                            <span class="items-list-tooltip-wrapper">
-                              <i
-                                class="fa-regular fa-pen-to-square items-list-draggable-edit-icon"
-                                aria-label="Editar subgrupo"
-                                role="button"
-                                @click.stop="startEditName('subgroup', group, mIdx, gIdx)"
-                              ></i>
-                              <span class="items-list-tooltip-box">Editar subgrupo</span>
-                            </span>
-
-                            <span class="items-list-tooltip-wrapper">
-                              <i
-                                class="fa-solid fa-xmark items-list-draggable-edit-icon"
-                                aria-label="Excluir subgrupo"
-                                role="button"
-                                style="margin-left:8px;color:#ef4444;"
-                                @click.stop="removeSubGroup(master, mIdx, group, gIdx)"
-                              ></i>
-                              <span class="items-list-tooltip-box">Excluir subgrupo</span>
-                            </span>
-
-                          </template>
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-
-                  <draggable
-                    :list="getMasterByKey(master).__subGroupsRef[gIdx].products"
-                    tag="div"
-                    :data-group-id="group.groupId || group.id || null"
-                    :data-master-id="master.groupId || master.id || null"
-                    :group="{ name: 'products', pull: true, put: true }"
-                    item-key="id"
-                    @change="onDragChange($event, master, group, mIdx, gIdx)"
-                    @end="onDragEnd($event, master, group, mIdx, gIdx)"
-                  >
-                    <div
-                      v-for="(p, pIdx) in group.products"
-                      :key="'prod-' + (p.id || pIdx)"
-                    >
-                      <ItemsRentRow
-                        :rent="rent"
-                        :item="p"
-                        :operational="operational"
-                        :totalRecords="group.products.length"
-                      />
-                    </div>
-                  </draggable>
-                </div>
-              </draggable>
-            </div>
-          </draggable>
-
-          <div
-            v-if="!items.length && !loading"
-            class="items-list-row"
-          >
-            <div class="items-list-group-cell">
-              <span class="items-list-empty">Nenhum registro encontrado, clique no + Grupo para
-                <b>adicionar</b>, <b>editar</b>
-                grupos/subgrupos e <b>arrastar para ordenar</b></span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <BottomActionsBar
-      :selected="selected"
-      @close="addSelected([])"
-    >
-      <ActionsSelected
-        :selected="selected"
-        :actions="actionsOptions"
-      />
-    </BottomActionsBar>
-
-    <Modal
-      :title="modal.title"
-      :width="modal.width"
-      :height="modal.width"
-      v-show="showModal('options')"
-    >
-      <ItemRentUpdate
-        v-show="modal.component == 'edit'"
-        :operational="operational"
-        :showListKitOrAccessory="showListKitOrAccessory"
-        :origin="kitOrAcessory"
-      />
-      <div v-show="modal.component == 'statusStock'">
-        <b-tabs>
-          <b-tab
-            title="Resumo"
-            v-if="itemSelected.type == 1 || itemSelected.type == 2"
-          >
-            <TotalizationItemsMoviment :itemSelected="itemSelected" />
-          </b-tab>
-
-          <b-tab
-            title="Patrimônio"
-            v-if="!itemSelected.allowWithoutPatrimony && (itemSelected.type == 1 || itemSelected.type == 2)"
-          >
-            <PatrimonyMoviment />
-          </b-tab>
-          <b-tab title="Histórico">
-            <HistoryMoviment />
-          </b-tab>
-        </b-tabs>
-      </div>
-      <div v-show="modal.component == 'timeLineAvailability'">
-        <TimeLineAvailability v-if="itemSelected.type != 3" />
-        <i
-          class="icon-only-stock fa-solid fa-grid-2-plus"
-          v-if="itemSelected.onlyStock"
-        ></i>
-      </div>
-    </Modal>
-
-    <Modal
-      title="Aplicar Desconto"
-      width="500"
-      v-if="showModal('applyDiscount')"
-    >
-      <ApplyDiscount
-        :selected="selected"
-        :item="itemSelected"
-      />
-    </Modal>
-
-    <Modal
-      title="Recalcular Valor"
-      width="500"
-      v-if="showModal('recalculateValue')"
-    >
-      <RecalculateValue :selected="selected" />
-    </Modal>
-
-    <Modal
-      title="Remover item?"
-      width="450"
-      v-if="showModal('itemRentDelete')"
-    >
-      <RemoveItem
-        :item="itemSelected"
-        :operational="operational"
-      />
-    </Modal>
-
-    <Modal
-      title="Alterar Grupo"
-      width="800"
-      v-if="showModal('changeGroup')"
-      :onHideModal="onHideModal"
-    >
-      <GroupSubgroupTransfer
-        :selected="selected"
-        :selectedPeriod="selectedPeriod"
-        :item="itemSelected"
-        v-if="showModalGroup"
-      />
-    </Modal>
-
-    <Modal
-      title="Grupo e Subgrupo"
-      width="1100"
-      :closeButton="false"
-      v-if="showModal('groupSubgroup')"
-    >
-      <GroupDraggable
-        :operational="operational"
-        :items="itemsForDraggable"
-        :selectedPeriod="selectedPeriod"
-        :onChanged="onHideGroups"
-      />
-    </Modal>
-  </div>
-</template>
-
-<script>
-import AnimatedPhrase from "@nixweb/nixloc-ui/src/component/layout/AnimatedPhrase";
-import ActionsSelected from "@nixweb/nixloc-ui/src/component/shared/actions/ActionsSelected.vue";
-import BottomActionsBar from "@nixweb/nixloc-ui/src/component/layout/BottomActionsBar.vue";
-import CheckboxSimple from "@nixweb/nixloc-ui/src/component/forms/CheckboxSimple.vue";
-import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
-import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
-import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
-import Toggle from "@nixweb/nixloc-ui/src/component/forms/Toggle";
-
-import draggable from "vuedraggable";
-import GroupDraggable from "./GroupDraggable.vue";
-import ItemsRentCreate from "./ItemsRentCreate.vue";
-import ItemRentUpdate from "./ItemRentUpdate.vue";
-import ItemsRentRow from "./ItemsRentRow.vue";
-import ItemKitOrAccessoryList from "./ItemKitOrAccessoryList.vue";
-
-import GroupSubgroupTransfer from "./GroupSubgroupTransfer.vue";
-import ApplyDiscount from "./ApplyDiscount.vue";
-import RecalculateValue from "./RecalculateValue.vue";
-import RemoveItem from "./RemoveItem.vue";
-
-import TotalizationItemsMoviment from "../../stock/moviment/TotalizationItemsMoviment.vue";
-import PatrimonyMoviment from "../../stock/items-moviment/PatrimonyMoviment.vue";
-import HistoryMoviment from "../../stock/history-moviment/HistoryMoviment.vue";
-import ItemRentStockAvailability from "../items-rent/ItemRentStockAvailability.vue";
-import TimeLineAvailability from "../../stock/shared/TimeLineAvailability.vue";
-
-import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
-
-export default {
-  name: "ItemsRentList",
-  props: {
-    rent: { type: Object, required: true },
-    operational: { type: Boolean, default: false },
-  },
-  components: {
-    AnimatedPhrase,
-    ActionsSelected,
-    BottomActionsBar,
-    CheckboxSimple,
-    Loading,
-    Modal,
-    Toggle,
-    ScrollBar,
-    draggable,
-    ItemsRentRow,
-    GroupDraggable,
-    ItemsRentCreate,
-    ItemRentUpdate,
-    TotalizationItemsMoviment,
-    PatrimonyMoviment,
-    HistoryMoviment,
-    ItemRentStockAvailability,
-    TimeLineAvailability,
-    ApplyDiscount,
-    RecalculateValue,
-    RemoveItem,
-    GroupSubgroupTransfer,
-    ItemKitOrAccessoryList,
-  },
-  data() {
-    return {
-      selectedPeriod: {},
-      showGroups: false,
-      selectAll: false,
-      items: [],
-      urlGetApi: "/api/v1/rental/items-rent/get-all-by-group",
-      urlReorderItemsApi: "/api/v1/rental/items-rent/reorder-items",
-      urlCreateUpdateGroup:
-        "/api/v1/rental/group-subgroup-rent/create-update-group-selector",
-      urlCreateUpdateSubgroup:
-        "/api/v1/rental/group-subgroup-rent/create-update-subgroup-selector",
-      urlDeleteGroup:
-        "/api/v1/rental/group-subgroup-rent/delete-group-selector",
-      urlDeleteSubgroup:
-        "/api/v1/rental/group-subgroup-rent/delete-subgroup-selector",
-      urlReorderedGroup:
-        "/api/v1/rental/group-subgroup-rent/reordered-group-selector",
-      urlReorderedSubgroup:
-        "/api/v1/rental/group-subgroup-rent/reordered-subgroup-selector",
-      baseParams: {
-        search: undefined,
-        filter: "contains",
-        currentPage: 1,
-        totalPerPage: 20,
-      },
-      modal: {
-        title: "Modal",
-        width: 500,
-        height: 500,
-        component: "",
-      },
-      withAccessory: false,
-      withOnlyStock: false,
-      itemSelected: {},
-      totalLoading: 1,
-      loading: true,
-      showModalGroup: false,
-      showListKitOrAccessory: false,
-      kitOrAcessory: "",
-      actions: [
-        {
-          type: "delete",
-          showStatusRental: [1, 2, 3],
-          showModule: ["rental", "operational"],
-          title: "Remover",
-          description: "Remover",
-          url: `/api/v1/rental/items-rent/delete${
-            this.operational ? "-operational" : ""
-          }${this.showListKitOrAccessory ? "-kit" : ""}`,
-          method: "delete",
-        },
-        {
-          type: "event",
-          showStatusRental: [1, 2, 3],
-          showModule: ["rental"],
-          eventName: "applyDiscount",
-          tooltip: "Aplicar Desconto",
-          backgroundColor: "#FF4843",
-          classIcon: "fa-solid fa-percent",
-          description: "Aplicar Desconto",
-        },
-        {
-          type: "event",
-          showStatusRental: [1, 2, 3],
-          showModule: ["rental", "operational"],
-          eventName: "changeGroup",
-          tooltip: "Alterar Grupo",
-          backgroundColor: "#2563EB",
-          classIcon: "fa-solid fa-layer-group",
-          description: "Transferência de Grupo",
-        },
-        {
-          type: "event",
-          showStatusRental: [1, 2, 3],
-          showModule: ["rental"],
-          eventName: "recalculateValue",
-          tooltip: "Recalcular Valor",
-          backgroundColor: "#156EBE",
-          classIcon: "fa-solid fa-retweet",
-          description: "Recalcular Valor",
-        },
-        {
-          type: "options",
-          tooltip: "Status de Faturamento",
-          showStatusRental: [2],
-          showModule: ["rental"],
-          url: "/api/v1/rental/items-rent/change-status-invoice",
-          backgroundColor: "#02D1C1",
-          classIcon: "fa-solid fa-file-invoice",
-          description: "Status de Faturamento",
-          method: "put",
-          options: [
-            { text: "Faturado", value: "invoiced" },
-            { text: "Não Faturado", value: "notInvoiced" },
-            { text: "Não Fatura (Cancelado)", value: "noInvoice" },
-          ],
-        },
-        {
-          type: "options",
-          tooltip: "Status de Movimentação",
-          showStatusRental: [2],
-          showModule: ["rental", "operational"],
-          url: "/api/v1/rental/items-rent/change-status-invoice",
-          backgroundColor: "#E0800E",
-          classIcon: "fa-solid fa-shuffle",
-          description: "Status de Movimentação",
-          method: "put",
-          options: [
-            { text: "Reservado", value: "reserved" },
-            { text: "Não Reservado", value: "notReserved" },
-          ],
-        },
-      ],
-      editing: {
-        type: null, // 'group' | 'subgroup'
-        mIdx: null,
-        gIdx: null,
-        target: null,
-        value: "",
-      },
-    };
-  },
-  mounted() {
-    if (this.operational) {
-      this.withAccessory = true;
-      this.withOnlyStock = true;
-    }
-  },
-  computed: {
-    ...mapState("generic", ["selected"]),
-    ...mapGetters("generic", ["event", "showModal"]),
-    actionsOptions() {
-      let actions = [];
-      let statusRental = this.rent.statusRental;
-      let operational = this.operational ? "operational" : "rental";
-      this.actions.forEach((action) => {
-        if (
-          Array.isArray(action.showStatusRental) &&
-          action.showStatusRental.includes(statusRental) &&
-          Array.isArray(action.showModule) &&
-          action.showModule.includes(operational)
-        ) {
-          actions.push(action);
-        }
-      });
-      return actions;
-    },
-    itemsForDraggable() {
-      const out = [];
-      (this.items || []).forEach((master) => {
-        const entry = {
-          groupId: master.groupId || master.id || "",
-          groupOrder: master.groupOrder ?? null,
-          groupName: master.groupName || "",
-          subGroups: [],
-        };
-
-        const subs = Array.isArray(master.subGroups) ? master.subGroups : [];
-        subs.forEach((sub) => {
-          entry.subGroups.push({
-            groupId: sub.groupId || sub.id || "",
-            groupOrder: sub.groupOrder ?? null,
-            groupName: sub.groupName || "",
-            products: Array.isArray(sub.products) ? sub.products : [],
-          });
-        });
-
-        out.push(entry);
-      });
-      return out;
-    },
-    totalProducts() {
-      let total = 0;
-      for (const group of this.items) {
-        for (const sub of group.subGroups || []) {
-          total += (sub.products || []).length;
-        }
-      }
-      return total;
-    },
-    isMigration() {
-      return (
-        this.itemsForDraggable?.length > 0 &&
-        this.itemsForDraggable[0].groupId === ""
-      );
-    },
-  },
-  methods: {
-    ...mapMutations("generic", [
-      "addSelected",
-      "openModal",
-      "hideModal",
-      "addEvent",
-    ]),
-    ...mapActions("generic", ["getApi", "postApi", "putApi", "deleteApi"]),
-    makeKey(prefix) {
-      return `${prefix}-${Date.now()}-${Math.random().toString(16).slice(2)}`;
-    },
-    ensureKey(obj, prefix, idField = "groupId") {
-      if (!obj) return obj;
-      if (!obj.__key) {
-        const base = obj[idField] ? String(obj[idField]) : "";
-        obj.__key = base ? `${prefix}-${base}` : this.makeKey(prefix);
-      }
-      return obj;
-    },
-    normalizeKeys() {
-      (this.items || []).forEach((m) => {
-        this.ensureKey(m, "g", "groupId");
-        if (Array.isArray(m.subGroups)) {
-          m.subGroups.forEach((s) => this.ensureKey(s, "sg", "groupId"));
-        }
-      });
-    },
-    getMasterByKey(masterFromSorted) {
-      if (!masterFromSorted) return masterFromSorted;
-      const key = masterFromSorted.__key || null;
-      const id = masterFromSorted.groupId || masterFromSorted.id || null;
-      const found = (this.items || []).find(
-        (x) =>
-          (key && x.__key === key) ||
-          (!key && id && (x.groupId === id || x.id === id))
-      );
-      if (found && !found.__subGroupsRef)
-        found.__subGroupsRef = found.subGroups || [];
-      if (found) found.__subGroupsRef = found.subGroups || [];
-      return found || masterFromSorted;
-    },
-    changedPeriod() {
-      this.getAll();
-    },
-    getAll() {
-      this.loading = true;
-      const params = {
-        url: this.urlGetApi,
-        obj: {
-          ...this.baseParams,
-          rentId: this.rent.id,
-          periodRentId: this.selectedPeriod.showAll
-            ? ""
-            : this.selectedPeriod.period.id,
-          withOnlyStock: this.withOnlyStock,
-          withAccessory: this.withAccessory,
-          operational: this.operational,
-          noPaginated: true,
-        },
-      };
-      this.getApi(params).then((response) => {
-        const data = response.content.data || [];
-
-        this.items = (Array.isArray(data) ? [...data] : []).sort(
-          (a, b) => (a.groupOrder || 0) - (b.groupOrder || 0)
-        );
-
-        this.normalizeKeys();
-
-        this.loading = false;
-        this.totalLoading += 1;
-        this.selectAll = false;
-      });
-    },
-    reorderItems(items) {
-      let params = {
-        url: this.urlReorderItemsApi,
-        obj: items,
-        notNotifyToast: true,
-      };
-      this.putApi(params).then(() => {});
-    },
-    select() {
-      this.addSelected([]);
-      if (this.selectAll) {
-        this.items.forEach((group) => {
-          (group.subGroups || []).forEach((subgroup) => {
-            (subgroup.products || []).forEach((product) => {
-              this.selected.push(product.id);
-            });
-          });
-        });
-      }
-    },
-    subGroupsSorted(master) {
-      const m = this.getMasterByKey(master);
-      const subs = Array.isArray(m.subGroups) ? [...m.subGroups] : [];
-      return subs.sort((a, b) => (a.groupOrder || 0) - (b.groupOrder || 0));
-    },
-    onDragChange(evt, master, group, mIdx, gIdx) {
-      console.log("Drag changed:", { evt, master, group });
-    },
-    onDragEnd(evt, master, group, mIdx, gIdx) {
-      console.log("Drag ended:", { evt, master, group });
-
-      const toEl = evt && evt.to ? evt.to : null;
-      const targetGroupId = toEl
-        ? toEl.getAttribute("data-group-id") || null
-        : null;
-      const targetMasterId = toEl
-        ? toEl.getAttribute("data-master-id") || null
-        : null;
-
-      let tmIdx = mIdx,
-        tgIdx = gIdx;
-      if (targetGroupId) {
-        for (let i = 0; i < (this.items || []).length; i++) {
-          const subs = this.items[i]?.subGroups || [];
-          const j = subs.findIndex(
-            (s) => (s.groupId || s.id || null) == targetGroupId
-          );
-          if (j > -1) {
-            tmIdx = i;
-            tgIdx = j;
-            break;
-          }
-        }
-      }
-
-      const payload = {
-        masterId: targetMasterId || master.groupId || master.id || null,
-        groupId: targetGroupId || group.groupId || group.id || null,
-        productsOrder: (this.items[tmIdx].subGroups[tgIdx].products || []).map(
-          (p, i) => ({
-            id: p.id,
-            order: i + 1,
-            groupId: targetGroupId || group.groupId || group.id || null,
-          })
-        ),
-      };
-      this.reorderItems(payload.productsOrder);
-    },
-    onDragEndSubGroups(master, mIdx) {
-      const m = this.getMasterByKey(master);
-      if (!m || !Array.isArray(m.subGroups)) return;
-
-      (m.subGroups || []).forEach((sg, idx) => {
-        this.$set(sg, "groupOrder", idx + 1);
-        this.ensureKey(sg, "sg", "groupId");
-        this.$set(sg, "groupMasterId", m.groupId || m.id || null);
-      });
-
-      const payload = (m.subGroups || []).map((sg) => ({
-        groupId: sg.groupId || sg.id || null,
-        groupOrder: sg.groupOrder,
-        groupMasterId: sg.groupMasterId,
-      }));
-
-      const params = {
-        url: this.urlReorderedSubgroup,
-        obj: payload,
-        notNotifyToast: true,
-      };
-      this.postApi(params).then(() => {});
-    },
-    onHideModal() {
-      this.showModalGroup = false;
-    },
-    hideShowGroups() {
-      this.showGroups = true;
-      this.openModal("groupSubgroup");
-    },
-    onHideGroups() {
-      this.showGroups = false;
-      this.hideModal();
-      this.getAll();
-    },
-    back() {
-      this.showListKitOrAccessory = false;
-      this.kitOrAcessory = "";
-    },
-
-    startEditName(type, target, mIdx, gIdx = null) {
-      this.editing.type = type;
-      this.editing.mIdx = mIdx;
-      this.editing.gIdx = gIdx;
-      this.editing.target = target;
-      this.editing.value = target.groupName || "";
-      this.$nextTick(() => {
-        const el = this.$el.querySelector(".items-inline-edit");
-        if (el) el.focus();
-      });
-    },
-    commitEditNameGroup() {
-      const val = (this.editing.value || "").trim();
-      if (!this.editing.target) return;
-
-      this.$set(
-        this.items[this.editing.mIdx],
-        "groupName",
-        val || this.items[this.editing.mIdx].groupName
-      );
-
-      const updatedGroup = {
-        ...this.items[this.editing.mIdx],
-      };
-
-      this.editing = {
-        type: null,
-        mIdx: null,
-        gIdx: null,
-        target: null,
-        value: "",
-      };
-
-      let params = {
-        url: this.urlCreateUpdateGroup,
-        obj: updatedGroup,
-        notNotifyToast: true,
-      };
-      this.postApi(params).then(() => {});
-      return updatedGroup;
-    },
-    commitEditNameSubGroup() {
-      const val = (this.editing.value || "").trim();
-      if (!this.editing.target) return;
-
-      this.$set(
-        this.items[this.editing.mIdx].subGroups[this.editing.gIdx],
-        "groupName",
-        val ||
-          this.items[this.editing.mIdx].subGroups[this.editing.gIdx].groupName
-      );
-
-      const updatedSubGroup = {
-        ...this.items[this.editing.mIdx].subGroups[this.editing.gIdx],
-      };
-
-      this.editing = {
-        type: null,
-        mIdx: null,
-        gIdx: null,
-        target: null,
-        value: "",
-      };
-
-      let params = {
-        url: this.urlCreateUpdateSubgroup,
-        obj: updatedSubGroup,
-        notNotifyToast: true,
-      };
-      this.postApi(params).then(() => {});
-
-      return updatedSubGroup;
-    },
-
-    addGroupLocal() {
-      const nextOrder =
-        (this.items || []).reduce((m, g) => Math.max(m, g.groupOrder || 0), 0) +
-        1;
-
-      const newGroup = {
-        __key: this.makeKey("g"),
-        groupId: "",
-        groupName: `Novo grupo ${nextOrder}`,
-        groupOrder: nextOrder,
-        rentId: this.rent.id,
-        periodRentId:
-          this.selectedPeriod && this.selectedPeriod.period
-            ? this.selectedPeriod.period.id
-            : null,
-        subGroups: [],
-      };
-
-      let params = {
-        url: this.urlCreateUpdateGroup,
-        obj: newGroup,
-        notNotifyToast: true,
-      };
-      this.postApi(params).then((response) => {
-        if (response && response.content) newGroup.groupId = response.content;
-        this.ensureKey(newGroup, "g", "groupId");
-      });
-
-      this.items.push(newGroup);
-      const newIndex = this.items.length - 1;
-      this.startEditName("group", newGroup, newIndex);
-    },
-    addSubGroupLocal(master, mIdx) {
-      if (!master) return;
-      const m = this.getMasterByKey(master);
-      if (!m.subGroups) this.$set(m, "subGroups", []);
-
-      const nextOrder =
-        (m.subGroups || []).reduce(
-          (mm, s) => Math.max(mm, s.groupOrder || 0),
-          0
-        ) + 1;
-
-      const newSub = {
-        __key: this.makeKey("sg"),
-        groupId: "",
-        groupName: `Novo subgrupo ${nextOrder}`,
-        groupOrder: nextOrder,
-        groupMasterId: m.groupId || m.id || null,
-        products: [],
-      };
-
-      let params = {
-        url: this.urlCreateUpdateSubgroup,
-        obj: newSub,
-        notNotifyToast: true,
-      };
-      this.postApi(params).then((response) => {
-        if (response && response.content) newSub.groupId = response.content;
-        this.ensureKey(newSub, "sg", "groupId");
-      });
-
-      m.subGroups.push(newSub);
-      const gIdx = m.subGroups.length - 1;
-      this.startEditName("subgroup", newSub, mIdx, gIdx);
-    },
-    removeGroup(master, mIdx) {
-      const id = master && (master.groupId || master.id);
-      if (!id) {
-        this.items.splice(mIdx, 1);
-        return;
-      }
-
-      const url = `${this.urlDeleteGroup}?id=${id}`;
-      const params = { url, obj: {}, notNotifyToast: true };
-      this.deleteApi(params).then((response) => {
-        if (response && response.success) {
-          this.items = (this.items || []).filter(
-            (x) => (x.groupId || x.id) !== id
-          );
-        }
-      });
-    },
-    removeSubGroup(master, mIdx, sub, gIdx) {
-      const id = sub && (sub.groupId || sub.id);
-      const m = this.getMasterByKey(master);
-
-      if (!id) {
-        if (m && m.subGroups) m.subGroups.splice(gIdx, 1);
-        return;
-      }
-
-      const url = `${this.urlDeleteSubgroup}?id=${id}`;
-      const params = { url, obj: {}, notNotifyToast: true };
-      this.deleteApi(params).then((response) => {
-        if (response && response.success) {
-          if (m && m.subGroups) {
-            m.subGroups = (m.subGroups || []).filter(
-              (s) => (s.groupId || s.id) !== id
-            );
-          }
-        }
-      });
-    },
-
-    addProductBySubgroup(sub) {
-      console.log(sub);
-      this.addEvent({ name: "addProductBySubgroup", data: sub });
-    },
-
-    onDragEndMasters() {
-      (this.items || []).forEach((g, idx) => {
-        this.$set(g, "groupOrder", idx + 1);
-        this.ensureKey(g, "g", "groupId");
-      });
-
-      const params = {
-        url: this.urlReorderedGroup,
-        obj: this.items,
-        notNotifyToast: true,
-      };
-      this.postApi(params).then(() => {});
-    },
-  },
-  watch: {
-    event: {
-      handler(event) {
-        if (event.name == "itemRentUpdate") {
-          this.modal.component = "edit";
-          this.modal.title = event.data.productFullName;
-          this.modal.width = 1000;
-          this.itemSelected = event.data;
-          this.openModal("options");
-        }
-
-        if (event.name == "totalizationAndHistory") {
-          this.itemSelected = event.data;
-          this.modal.component = "statusStock";
-          this.modal.title = event.data.productFullName;
-          this.modal.width = 850;
-          this.openModal("options");
-        }
-
-        if (event.name == "timeLineAvailability") {
-          this.modal.component = "timeLineAvailability";
-          this.modal.title = "Painel";
-          this.modal.width = 900;
-          this.itemSelected = event.data;
-          this.openModal("options");
-        }
-
-        if (event.name == "itemsAccessoryList") {
-          this.itemSelected = event.data;
-          this.kitOrAcessory = "accessory";
-          this.showListKitOrAccessory = true;
-        }
-
-        if (event.name == "itemsKitList") {
-          this.itemSelected = event.data;
-          this.kitOrAcessory = "kit";
-          this.showListKitOrAccessory = true;
-        }
-
-        if (event.name == "applyDiscount") {
-          this.itemSelected = event.data || {};
-          this.openModal("applyDiscount");
-        }
-
-        if (event.name == "itemRentDelete") {
-          this.itemSelected = event.data || {};
-          this.openModal("itemRentDelete");
-        }
-
-        if (event.name == "recalculateValue") {
-          this.openModal("recalculateValue");
-        }
-
-        if (event.name == "changeGroup") {
-          this.itemSelected = event.data || {};
-          this.showModalGroup = true;
-          this.openModal("changeGroup");
-        }
-
-        if (event.name == "hideModalSearchProduct") {
-          this.getAll();
-        }
-
-        if (
-          event.name == "updateTotalizationRent" ||
-          event.name == "rentAccepted" ||
-          event.name == "rentRejected" ||
-          event.name == "rentRejected" ||
-          event.name == "itemsImported" ||
-          event.name == "actionsUpdated"
-        ) {
-          this.getAll();
-        }
-      },
-      deep: true,
-    },
-    showListKitOrAccessory: {
-      handler(value) {
-        const del = this.actions.find((x) => x.type === "delete");
-        if (!del) return;
-        del.url = `/api/v1/rental/items-rent/delete${
-          this.operational ? "-operational" : ""
-        }${value ? "-kit" : ""}`;
-      },
-      deep: true,
-    },
-  },
-};
-</script>
-
-<style scoped>
-.items-list-root {
-  min-height: 500px;
-}
-
-.items-list-main {
-  margin-left: 5px;
-}
-
-.items-list-loading {
-  margin-top: 20px;
-}
-
-.items-list-header,
-.items-list-row {
-  display: flex;
-  align-items: center;
-}
-
-.items-list-header > div,
-.items-list-row > div {
-  padding: 7px 10px 5px 10px;
-}
-
-.items-list-filter {
-  margin-left: auto;
-  width: 690px;
-  margin-bottom: -12px;
-}
-
-.items-list-text-center {
-  text-align: center;
-}
-
-.items-list-td-product {
-  width: 700px;
-}
-
-.items-list-div-total {
-  background: #f3f4f6;
-  color: #374151;
-  border: 1px solid #e6e7eb;
-  padding: 3px 10px;
-  border-radius: 999px;
-  font-size: 12px;
-  margin-bottom: 10px;
-  width: 160px;
-  display: block;
-  margin-left: auto;
-  margin-bottom: 12px;
-}
-
-.items-list-td-quantity {
-  width: 170px;
-}
-
-.items-list-td-stock {
-  width: 120px;
-}
-
-.items-list-td-invoice {
-  width: 100px;
-}
-
-.items-list-td-price {
-  width: 350px;
-}
-
-.items-list-td-access {
-  width: 120px;
-}
-
-.items-list-group-cell {
-  width: 100%;
-  padding: 8px 10px;
-}
-
-.items-list-title-header {
-  font-size: 13px;
-  color: #757d8c;
-  font-weight: 400;
-  text-transform: uppercase;
-}
-
-.items-list-group-master {
-  background-color: #e3e5ed;
-  font-weight: 600;
-}
-
-.items-list-group {
-  background-color: #f6f6f8;
-  font-weight: 500;
-}
-
-.items-list-title-no-group {
-  font-size: 13px;
-  font-style: italic;
-  color: grey;
-  font-weight: 500;
-}
-
-.items-list-level-1 {
-  padding-left: 10px;
-}
-
-.items-list-level-2 {
-  padding-left: 30px;
-}
-
-.items-list-title-group {
-  font-size: 14px;
-}
-
-.items-list-icon-order-group {
-  color: #2563eb;
-  margin-right: 6px;
-}
-
-.items-list-empty {
-  color: #757d8c;
-  font-style: italic;
-}
-
-.items-list-table {
-  border: 1px solid #e5e7eb;
-  border-radius: 6px;
-  overflow: hidden;
-  background: transparent;
-}
-
-.items-list-header-bar {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  margin-top: 20px;
-  margin-bottom: 10px;
-  margin-left: 2px;
-}
-
-.items-list-action-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 9px 12px;
-  border-radius: 9999px;
-  border: none;
-  background: #4bb4e2;
-  color: #fff;
-  font-size: 13px;
-  line-height: 1;
-  cursor: pointer;
-}
-
-.items-list-action-chip:hover {
-  background: #3e90b3;
-}
-
-.items-list-div-loading {
-  margin: 8px 10px 10px 10px;
-}
-
-.items-list-action-chip i {
-  font-size: 13px;
-}
-
-.items-list-action-chip-add {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 9px 12px;
-  border-radius: 9999px;
-  border: none;
-  background: #0a54f5;
-  color: #fff;
-  font-size: 13px;
-  line-height: 1;
-  cursor: pointer;
-  margin-right: 5px;
-}
-
-.items-inline-edit {
-  font-size: 14px;
-  padding: 2px 28px 2px 6px;
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
-  outline: none;
-  width: 280px;
-}
-
-.items-inline-edit-wrap {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-}
-
-.items-inline-edit-ok {
-  position: absolute;
-  right: 8px;
-  color: #16a34a;
-  cursor: pointer;
-  font-size: 13px;
-}
-
-.items-inline-edit-ok:hover {
-  color: #15803d;
-}
-
-.items-list-draggable-edit-icon {
-  font-size: 13px;
-  margin-left: 6px;
-  color: #cbd5e1;
-  transition: color 0.2s;
-  cursor: pointer;
-}
-
-.items-list-draggable-edit-icon-add {
-  font-size: 13px;
-  margin-left: 6px;
-  transition: color 0.2s;
-  cursor: pointer;
-}
-
-.items-list-rent-row-icon-layer {
-  color: #9ca3af;
-  cursor: grab;
-  margin-right: 5px;
-}
-
-.items-list-add-product-icon {
-  color: #577696;
-  margin-left: 5px;
-  right: 0;
-}
-
-.items-list-tooltip-wrapper {
-  position: relative;
-  display: inline-block;
-}
-
-.items-list-tooltip-box {
-  position: absolute;
-  white-space: nowrap;
-  background: rgba(0, 0, 0, 0.87);
-  color: #fff;
-  padding: 6px 8px;
-  border-radius: 10px;
-  font-size: 12px;
-  line-height: 3 1;
-  font-weight: 300;
-  opacity: 0;
-  pointer-events: none;
-  z-index: 60;
-  left: 50%;
-  bottom: 100%;
-  transform: translateX(-50%) translateY(6px);
-  transition: opacity 0.12s ease, transform 0.12s ease;
-}
-
-.items-list-tooltip-wrapper:hover .items-list-tooltip-box {
-  opacity: 1;
-  transform: translateX(-50%) translateY(0);
-}
-
-.items-list-tooltip-box::after {
-  content: "";
-  position: absolute;
-  border: 6px solid transparent;
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  border-top-color: rgba(0, 0, 0, 0.87);
-}
-</style>