@nixweb/nixloc-ui 1.14.0 → 1.16.0

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

@@ -0,0 +1,1445 @@
+<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>