@nixweb/nixloc-ui 1.14.0 → 1.16.0

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

@@ -0,0 +1,880 @@
+<template>
+    <div>
+        <div class="gss-hint title">
+            Você pode <b>adicionar</b>, <b>editar</b> grupos/subgrupos e <b>arrastar para ordenar</b>
+        </div>
+        <ScrollBar :minHeight="550" :maxHeight="550">
+            <div class="draggable-wrap">
+                <div class="draggable-toolbar" v-if="isTwoLevels">
+                    <button class="draggable-add-btn" @click="addGroup">
+                        <i class="fa-solid fa-plus"></i>
+                        <span>Grupo</span>
+                    </button>
+                    <button v-if="isSubGroup" class="draggable-add-btn" @click="toggleAll">
+                        <i class="fa-solid" :class="allCollapsed ? 'fa-chevron-right' : 'fa-chevron-down'"></i>
+                        <span>{{ allCollapsed ? 'Expandir subgrupos' : 'Recolher subgrupos' }}</span>
+                    </button>
+                </div>
+
+                <div class="draggable-no-data" v-if="groups.length === 0">Nenhum registro encontrado!</div>
+
+                <template v-if="isTwoLevels">
+                    <draggable v-model="groups" group="groups" handle=".draggable-drag-handle" :disabled="isEditing"
+                        @end="onDragEndGroups">
+                        <div v-for="group in groups" :key="group.id" class="draggable-group">
+                            <div class="draggable-group-header" :class="{ 'no-border': !showGroups }">
+                                <div class="draggable-group-left">
+                                    <i class="fa-solid fa-grip-vertical draggable-drag-handle"></i>
+                                    <i class="fa-solid fa-layer-group draggable-icon-group"></i>
+
+                                    <div class="draggable-editable-wrap" @click="!group.editing">
+                                        <span v-if="!group.editing" class="draggable-editable">
+                                            <span v-if="group.name !== 'Sem grupo'" class="title">{{ group.name }}
+                                            </span>
+                                            <span v-else class="draggable-title-no-group">Sem grupo</span>
+                                            <i class="fa-regular fa-pen-to-square draggable-edit-icon"
+                                                @click="editGroup(group)"></i>
+
+                                            <i title="Adicionar subgrupo" class="fa-solid fa-plus draggable-edit-icon"
+                                                @click="addSubgroup(group)"
+                                                style="margin-left: 8px; color: rgb(22, 163, 74);"></i>
+                                        </span>
+
+                                        <div v-else class="input-with-icon">
+                                            <input v-model="group.name" @keyup.enter="finishGroupEdit(group)"
+                                                class="draggable-edit-input" autofocus />
+                                            <i class="fa-solid fa-check input-check"
+                                                @click.stop="finishGroupEdit(group)" title="Confirmar"></i>
+
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="draggable-group-actions">
+                                    <button v-if="group.subgroups.length > 0 && group.name != 'Sem grupo'"
+                                        class="draggable-btn-arrow" @click.stop="toggleGroup(group)"
+                                        :title="group.collapsed ? 'Expandir' : 'Recolher'">
+                                        <i class="fa-solid"
+                                            :class="group.collapsed ? 'fa-chevron-right' : 'fa-chevron-down'"></i>
+                                    </button>
+
+                                    <button class="draggable-del-btn" @click.stop="askRemoveGroup(group)">
+                                        <i class="fa-solid fa-trash-can"></i>
+                                    </button>
+                                </div>
+                            </div>
+
+                            <transition name="fade">
+                                <div v-show="showGroups && !group.collapsed">
+                                    <draggable v-model="group.subgroups" group="subgroups"
+                                        handle=".draggable-drag-handle" :disabled="isEditing"
+                                        @end="onDragEndSubs(group)">
+                                        <div v-for="sub in group.subgroups" :key="sub.id" class="draggable-subgroup">
+                                            <div class="draggable-subgroup-line">
+                                                <div class="draggable-subgroup-left draggable-editable-wrap">
+                                                    <i class="fa-solid fa-grip-lines draggable-drag-handle"></i>
+                                                    <i class="fa-regular fa-layer-group draggable-icon-subgroup"></i>
+
+                                                    <span v-if="!sub.editing" class="draggable-editable">
+                                                        <span class="draggable-editable-title">
+                                                            <span v-if="sub.name !== 'Sem grupo'" class="title">
+                                                                {{ sub.name }}
+                                                            </span>
+                                                            <span v-else class="draggable-title-no-group">Sem
+                                                                grupo</span>
+                                                        </span>
+                                                        <i class="fa-regular fa-pen-to-square draggable-edit-icon"
+                                                            @click="!sub.editing && editSubgroup(sub)"></i>
+                                                    </span>
+
+                                                    <div v-else class="input-with-icon">
+                                                        <input v-model="sub.name" @keyup.enter="finishSubgroupEdit(sub)"
+                                                            class="draggable-edit-input" autofocus />
+                                                        <i class="fa-solid fa-check input-check"
+                                                            @click.stop="finishSubgroupEdit(sub)" title="Confirmar"></i>
+                                                    </div>
+                                                </div>
+
+                                                <div class="draggable-subgroup-actions">
+                                                    <span class="draggable-badge">{{ sub.products.length || 0 }}</span>
+                                                    <button class="draggable-del-btn"
+                                                        @click.stop="askRemoveSubgroup(group, sub)">
+                                                        <i class="fa-solid fa-trash-can"></i>
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </draggable>
+                                </div>
+                            </transition>
+                        </div>
+                    </draggable>
+                </template>
+
+                <template v-else>
+                    <div class="draggable-toolbar">
+                        <button class="draggable-add-btn" @click="addSingleGroup">
+                            <i class="fa-solid fa-plus"></i>
+                            <span>Novo grupo</span>
+                        </button>
+                    </div>
+
+                    <draggable v-model="groups" group="single" handle=".draggable-drag-handle" :disabled="isEditing"
+                        @end="onDragEndGroups">
+                        <div v-for="g in groups" :key="g.id" class="draggable-group">
+                            <div class="draggable-group-header no-border">
+                                <div class="draggable-group-left">
+                                    <i class="fa-solid fa-grip-vertical draggable-drag-handle"></i>
+                                    <i class="fa-solid fa-layer-group draggable-icon-group"></i>
+
+                                    <div class="draggable-editable-wrap" @click="!g.editing && editGroup(g)">
+                                        <span v-if="!g.editing" class="draggable-editable">
+                                            {{ g.name }}
+                                            <i class="fa-regular fa-pen-to-square draggable-edit-icon"></i>
+                                        </span>
+
+                                        <div v-else class="input-with-icon">
+                                            <input v-model="g.name" @keyup.enter="finishGroupEdit(g)"
+                                                class="draggable-edit-input" autofocus />
+                                            <i class="fa-solid fa-check input-check" @click="finishGroupEdit(g)"
+                                                title="Confirmar"></i>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="draggable-group-actions">
+                                    <span class="draggable-badge">{{ g.count || 0 }}</span>
+                                    <button class="draggable-del-btn" @click.stop="askRemoveGroup(g)">
+                                        <i class="fa-solid fa-trash-can"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </draggable>
+                </template>
+
+                <div v-if="confirm.visible" class="confirm-backdrop" @click.self="closeConfirm">
+                    <div class="confirm-card" role="dialog" aria-modal="true">
+                        <div class="confirm-header">
+                            <h4>Tem certeza que deseja excluir?</h4>
+                        </div>
+                        <div class="confirm-body">
+                            <Alert type="warning">
+                                Exluir<b> {{ confirm.message }}</b>? Todos os registros relacionados
+                                também serão excluídos!
+                            </Alert>
+                            <div v-if="isDeleteSubgroupOrProducts" class="div-alert-delete">
+                                <Alert type="warning">
+                                    <b> ATENÇÃO</b>: Produtos que possuem movimentação de estoque não serão removidos.
+                                </Alert>
+                            </div>
+                            <div>
+                                <CheckboxSimple :markFormDirty="false"
+                                    title="Remover os produtos vinculados (se houver)"
+                                    v-model="isDeleteSubgroupOrProducts" />
+                            </div>
+                        </div>
+
+                        <div class="confirm-actions">
+                            <button class="btn-secondary" @click="closeConfirm">Cancelar</button>
+                            <Button _key="btnDelete" color="white" backGroundColor="#ef4444" title="Excluir"
+                                :clicked="confirmYes" />
+                        </div>
+                    </div>
+                </div>
+                <GroupTemplateModal :groups="groups" :visible.sync="showTemplateModal" v-model="selectedTemplate" />
+            </div>
+        </ScrollBar>
+
+        <div class="phrase" v-if="loadingMigrate">
+            <AnimatedPhrase :phrases="['Aguarde...',
+                'Estamos carregando os produtos...',
+                'Isso pode levar alguns ou vários segundos...'
+            ]" />
+        </div>
+        <div v-else class="text-center">
+            <Button _key="btnCancel" size="small" type="edit" title="Cancelar" :clicked="closeModal" />
+            <Button _key="btnOk" size="medium" type="primary" title="Confirmar" :clicked="createEditOrder" />
+        </div>
+    </div>
+</template>
+
+<script>
+import AnimatedPhrase from "@nixweb/nixloc-ui/src/component/layout/AnimatedPhrase";
+import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
+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 GroupTemplateModal from './GroupTemplateModal.vue'
+
+import draggable from "vuedraggable";
+import { mapActions, mapMutations } from "vuex";
+
+export default {
+    name: "GroupDraggable",
+    components: { AnimatedPhrase, Alert, Button, CheckboxSimple, ScrollBar, draggable, GroupTemplateModal },
+    props: {
+        levels: { type: Number, default: 2 },
+        items: { type: Array, default: () => [] },
+        operational: { type: Boolean, default: false },
+        migrate: { type: Boolean, default: false },
+        selectedPeriod: Object,
+        loadingCreateEditOrder: {
+            type: Boolean,
+            default: true
+        },
+        onChanged: Function,
+    },
+    data() {
+        return {
+            rentId: this.$route?.params?.id,
+            urlGetAll: "/api/v1/rental/group-subgroup-rent/get-all",
+            urlCreateEditOrder: "/api/v1/rental/group-subgroup-rent/create-edit-order",
+            urlDeleteGroup: "/api/v1/rental/group-subgroup-rent/delete-group",
+            urlDeleteSubgroup: "/api/v1/rental/group-subgroup-rent/delete-subgroup",
+            itemsLocal: [],
+            groups: [],
+            showGroups: true,
+            allCollapsed: false,
+            isDeleteSubgroupOrProducts: false,
+            loadingMigrate: false,
+            _seed: 1000,
+            confirm: {
+                visible: false,
+                type: null,
+                group: null,
+                sub: null,
+                message: ""
+            },
+            selectedTemplate: "",
+            showTemplateModal: false,
+            loading: false,
+        };
+    },
+    created() {
+        this.itemsLocal = JSON.parse(JSON.stringify(this.items || []));
+        this.buildData();
+
+        if (this.migrate) {
+            this.loadingMigrate = true;
+            this.createEditOrder();
+        }
+    },
+    computed: {
+        isTwoLevels() {
+            return Number(this.levels) === 2;
+        },
+        isEditing() {
+            return this.groups.some(
+                g => g.editing || (Array.isArray(g.subgroups) && g.subgroups.some(s => s.editing))
+            );
+        },
+        isSubGroup() {
+            return this.groups.some(g => Array.isArray(g.subgroups) && g.subgroups.length > 0);
+        }
+    },
+    methods: {
+        ...mapActions("generic", ["getApi", "deleteApi", "putApi"]),
+        ...mapMutations("generic", ["addEvent", "hideModal", "removeLoading"]),
+        buildData() {
+            this.groups = this.buildNestedTwoLevels(this.itemsLocal);
+            this.recalcOrders();
+        },
+        buildNestedTwoLevels(list) {
+            const data = [];
+            (list || []).forEach(group => {
+                const g = {
+                    id: group.groupId,
+                    name: (group.groupName ?? "").trim(),
+                    order: group.groupOrder ?? null,
+                    editing: false,
+                    collapsed: false,
+                    subgroups: []
+                };
+                (group.subGroups || []).forEach(sub => {
+                    g.subgroups.push({
+                        id: sub.groupId,
+                        name: (sub.groupName ?? "").trim(),
+                        order: sub.groupOrder ?? null,
+                        editing: false,
+                        products: Array.isArray(sub.products) ? sub.products : []
+                    });
+                });
+                data.push(g);
+            });
+            return data;
+        },
+        recalcOrders() {
+            this.groups.forEach((g, gi) => {
+                this.$set(g, "order", gi + 1);
+                if (Array.isArray(g.subgroups)) {
+                    g.subgroups.forEach((s, si) => {
+                        this.$set(s, "order", si + 1);
+                    });
+                }
+            });
+        },
+        nextSequentialName(list, baseName) {
+            const rx = new RegExp(`^${baseName}\\s+(\\d+)$`, "i");
+            let max = 0;
+            (list || []).forEach(it => {
+                const name = (it && it.name ? String(it.name) : "").trim();
+                const m = name.match(rx);
+                if (m) {
+                    const n = parseInt(m[1], 10);
+                    if (!isNaN(n) && n > max) max = n;
+                }
+            });
+            return `${baseName} ${max + 1}`;
+        },
+
+        async getAll() {
+            const response = await this.getApi({
+                url: this.urlGetAll,
+                obj: {
+                    any: this.rentId,
+                    id: this.selectedPeriod.period.id,
+                },
+            });
+            this.groups = this.buildNestedTwoLevels(response.content.data);
+            if (this.allCollapsed) {
+                this.groups.forEach(g => this.$set(g, "collapsed", true));
+            }
+            this.loadingMigrate = false;
+            this.loading = false;
+            return response;
+        },
+        async createEditOrder() {
+            this.loading = true;
+            const response = await this.putApi({
+                url: this.urlCreateEditOrder,
+                obj: {
+                    periodRentId: this.selectedPeriod.period.id,
+                    rentId: this.rentId,
+                    onlyStock: this.operational,
+                    groups: this.groups
+                },
+                notNotifyToast: true
+            });
+            this.onChanged();
+            this.removeLoading(["btnOk"]);
+            return response;
+        },
+        async deleteGroup(id) {
+            const response = await this.deleteApi({
+                url: `${this.urlDeleteGroup}?id=${id}&deleteSubgroups=${this.isDeleteSubgroupOrProducts}&operational=${this.operational}`,
+                notNotifyToast: true
+            });
+            this.removeLoading(["btnDelete"]);
+            await this.getAll();
+            return response;
+        },
+        async deleteSubgroup(id) {
+            const response = await this.deleteApi({
+                url: `${this.urlDeleteSubgroup}?id=${id}&deleteProducts=${this.isDeleteSubgroupOrProducts}&operational=${this.operational}`,
+                notNotifyToast: true
+            });
+            this.removeLoading(["btnDelete"]);
+            await this.getAll();
+            return response;
+        },
+        nextId() {
+            this._seed += 1;
+            return `id_${this._seed}`;
+        },
+        addGroup() {
+            const newId = this.nextId();
+            this.cancelAllEditing();
+
+            const nextName = this.nextSequentialName(this.groups, "Novo Grupo");
+
+            this.groups.unshift({
+                id: newId,
+                name: nextName, 
+                editing: true,
+                collapsed: false,
+                subgroups: [],
+                order: 1
+            });
+            this.recalcOrders();
+        },
+        addSubgroup(group, sub = null) {
+            if (!group.subgroups) this.$set(group, "subgroups", []);
+            const newId = this.nextId();
+            this.cancelAllEditing();
+
+            const lastOrder = group.subgroups.length
+                ? group.subgroups[group.subgroups.length - 1].order || 0
+                : 0;
+
+            const nextSubName = this.nextSequentialName(group.subgroups, "Novo Subgrupo");
+
+            const newSub = {
+                id: newId,
+                name: nextSubName, 
+                products: [],
+                editing: true,
+                order: lastOrder + 1
+            };
+
+            group.subgroups.push(newSub);
+
+            this.recalcOrders();
+        },
+        addSingleGroup() {
+            const newId = this.nextId();
+            this.cancelAllEditing();
+            this.groups.unshift({
+                id: newId,
+                name: "",
+                editing: true,
+                order: 1
+            });
+            this.recalcOrders();
+        },
+        editGroup(group) {
+            this.cancelAllEditing();
+            this.$set(group, "editing", true);
+        },
+        finishGroupEdit(group) {
+            const name = (group.name || "").trim();
+            if (!name) {
+                const idx = this.groups.findIndex(g => g.id === group.id);
+                if (idx > -1) this.groups.splice(idx, 1);
+                this.recalcOrders();
+                return;
+            }
+            group.name = name;
+            this.$set(group, "editing", false);
+            this.recalcOrders();
+        },
+        editSubgroup(sub) {
+            this.cancelAllEditing();
+            this.$set(sub, "editing", true);
+        },
+        finishSubgroupEdit(sub) {
+            const name = (sub.name || "").trim();
+            if (!name) {
+                const group = this.groups.find(g => Array.isArray(g.subgroups) && g.subgroups.some(s => s.id === sub.id));
+                if (group) {
+                    const idx = group.subgroups.findIndex(s => s.id === sub.id);
+                    if (idx > -1) group.subgroups.splice(idx, 1);
+                }
+                this.recalcOrders();
+                return;
+            }
+            sub.name = name;
+            this.$set(sub, "editing", false);
+            this.recalcOrders();
+        },
+        askRemoveGroup(group) {
+            this.isDeleteSubgroupOrProducts = false;
+            this.confirm.visible = true;
+            this.confirm.type = "group";
+            this.confirm.group = group;
+            this.confirm.sub = null;
+            const n = (group.name || "Sem grupo").toString();
+            this.confirm.message = `${n}`;
+        },
+        askRemoveSubgroup(group, sub) {
+            this.isDeleteSubgroupOrProducts = false;
+            this.confirm.visible = true;
+            this.confirm.type = "subgroup";
+            this.confirm.group = group;
+            this.confirm.sub = sub;
+            const n = (sub.name || "Sem grupo").toString();
+            this.confirm.message = `${n}`;
+        },
+        closeConfirm() {
+            this.confirm.visible = false;
+            this.confirm.type = null;
+            this.confirm.group = null;
+            this.confirm.sub = null;
+            this.confirm.message = "";
+        },
+        async confirmYes() {
+            if (this.confirm.type === "group" && this.confirm.group) {
+                const i = this.groups.findIndex(g => g.id === this.confirm.group.id);
+                if (i > -1) this.groups.splice(i, 1);
+                await this.deleteGroup(this.confirm.group.id);
+            }
+            if (this.confirm.type === "subgroup" && this.confirm.group && this.confirm.sub) {
+                const arr = this.confirm.group.subgroups || [];
+                const i = arr.findIndex(s => s.id === this.confirm.sub.id);
+                if (i > -1) arr.splice(i, 1);
+                await this.deleteSubgroup(this.confirm.sub.id);
+            }
+            this.recalcOrders();
+            this.closeConfirm();
+        },
+        cancelAllEditing() {
+            this.groups.forEach(g => {
+                this.$set(g, "editing", false);
+                if (Array.isArray(g.subgroups)) {
+                    g.subgroups.forEach(s => this.$set(s, "editing", false));
+                }
+            });
+        },
+        toggleGroup(group) {
+            this.$set(group, "collapsed", !group.collapsed);
+        },
+        toggleAll() {
+            this.allCollapsed = !this.allCollapsed;
+            const target = this.allCollapsed;
+            this.groups.forEach(g => this.$set(g, "collapsed", target));
+        },
+        onDragEndGroups() {
+            this.recalcOrders();
+        },
+        onDragEndSubs() {
+            this.recalcOrders();
+        },
+        closeModal() {
+            this.removeLoading(["btnCancel"]);
+            this.hideModal();
+        }
+    },
+    watch: {
+        items: {
+            handler(newVal) {
+                this.itemsLocal = JSON.parse(JSON.stringify(newVal || []));
+                this.buildData();
+            },
+            deep: true,
+            immediate: true
+        }
+    }
+};
+</script>
+
+<style scoped>
+.draggable-wrap {
+    width: 100%;
+    box-sizing: border-box;
+    min-height: 500px;
+}
+
+.draggable-toolbar {
+    display: flex;
+    justify-content: flex-start;
+    gap: 10px;
+    margin-bottom: 16px;
+}
+
+.draggable-add-btn,
+.draggable-add-sub-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 7px 12px;
+    border-radius: 9999px;
+    border: 1px solid rgba(0, 0, 0, .06);
+    background: #2563EB;
+    color: #fff;
+    font-size: 13px;
+    line-height: 1;
+    cursor: pointer;
+}
+
+.draggable-add-btn:hover,
+.draggable-add-sub-btn:hover {
+    background: #0954f5;
+}
+
+.draggable-add-sub-btn-padrao {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 10px;
+    border-radius: 50px;
+    border: 1px solid rgba(0, 0, 0, .06);
+    background: #009183;
+    color: #fff;
+    font-size: 13px;
+    line-height: 1;
+    cursor: pointer;
+}
+
+.draggable-del-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 10px;
+    border-radius: 50px;
+    border: 1px solid rgba(239, 68, 68, .15);
+    background: #ef4444;
+    color: #fff;
+    font-size: 12px;
+    line-height: 1;
+    cursor: pointer;
+    margin-left: 8px;
+}
+
+.draggable-del-btn:hover {
+    background: #dc2626;
+}
+
+.draggable-group {
+    border: 1px solid #e5e7eb;
+    border-radius: 5px;
+    background: #fff;
+    margin-bottom: 16px;
+}
+
+.draggable-group-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    padding: 10px 16px;
+    font-weight: 500;
+    border-bottom: 1px solid #FAFAFC;
+}
+
+.draggable-group-header.no-border {
+    border-bottom: 0 !important;
+}
+
+.draggable-group-left {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.draggable-subgroup {
+    padding: 10px 16px;
+}
+
+.draggable-subgroup:last-child {
+    border-bottom: none;
+}
+
+.draggable-subgroup-line {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-left: 20px;
+}
+
+.draggable-subgroup-left {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.draggable-subgroup-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.draggable-drag-handle {
+    cursor: grab;
+    color: #9ca3af;
+}
+
+.draggable-title-no-group {
+    font-size: 13px;
+    font-style: italic;
+    color: grey;
+    font-weight: 500;
+}
+
+.draggable-icon-group {
+    color: #2563eb;
+}
+
+.draggable-icon-subgroup {
+    color: #009183;
+}
+
+.draggable-no-data {
+    border: 1px solid #e5e7eb;
+    padding: 20px 0px 20px 10px;
+    border-radius: 6px;
+    overflow: hidden;
+    background: transparent;
+    color: #757d8c;
+    font-style: italic;
+}
+
+.draggable-editable-wrap {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    position: relative;
+}
+
+.draggable-editable {
+    font-size: 14px;
+}
+
+.draggable-edit-icon {
+    font-size: 13px;
+    margin-left: 6px;
+    color: #cbd5e1;
+    transition: color .2s;
+    cursor: pointer;
+}
+
+.draggable-add-icon {
+    font-size: 13px;
+    margin-left: 6px;
+    color: #577696;
+    transition: color .2s;
+    cursor: pointer;
+    opacity: 0.6;
+}
+
+.draggable-editable-wrap:hover .draggable-edit-icon {
+    color: #94a3b8;
+}
+
+.draggable-edit-input {
+    font-size: 14px;
+    padding: 4px 26px 4px 6px;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+    width: 400px;
+}
+
+.draggable-btn-template {
+    margin-left: auto;
+    margin-right: 5px;
+}
+
+.input-with-icon {
+    position: relative;
+    display: inline-block;
+}
+
+.input-check {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #009183;
+    font-size: 14px;
+    cursor: pointer;
+}
+
+.draggable-editable-title {
+    font-size: 13.5px;
+}
+
+.draggable-badge {
+    background: #f3f4f6;
+    color: #374151;
+    border: 1px solid #e6e7eb;
+    padding: 3px 12px;
+    border-radius: 999px;
+    font-size: 12px;
+}
+
+.draggable-btn-arrow {
+    margin-right: 10px;
+    padding: 8px 5px;
+    width: 30px;
+    height: 30px;
+    border-radius: 50px;
+    border: 1px solid rgba(0, 0, 0, .06);
+    background: #2563EB;
+    color: #fff;
+    font-size: 13px;
+    line-height: 1;
+    cursor: pointer;
+}
+
+.div-alert-delete {
+    margin-top: 10px;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity .2s ease;
+}
+
+.fade-enter,
+.fade-leave-to {
+    opacity: 0;
+}
+
+.confirm-backdrop {
+    position: fixed;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    background: rgba(15, 23, 42, .45);
+    z-index: 9999;
+    padding: 20px;
+}
+
+.confirm-card {
+    width: min(500px, 100%);
+    background: #fff;
+    border-radius: 14px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
+    overflow: hidden;
+    border: 1px solid #e5e7eb;
+}
+
+.confirm-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 14px 16px;
+}
+
+.confirm-header h4 {
+    margin: 0;
+    font-size: 1rem;
+}
+
+.confirm-body {
+    padding: 16px;
+    color: #334155;
+}
+
+.confirm-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    padding: 8px 12px;
+}
+
+.phrase {
+    margin-top: 50px;
+}
+
+.btn-secondary {
+    background: #939394;
+    color: #111827;
+    border: 0;
+    border-radius: 999px;
+    padding: -5px 12px;
+    width: 80px;
+    cursor: pointer;
+    color: white;
+}
+
+.btn-danger {
+    background: #ef4444;
+    color: #fff;
+    border: 0;
+    border-radius: 999px;
+    padding: 8px 14px;
+    cursor: pointer;
+}
+
+.btn-danger:hover {
+    background: #dc2626;
+}
+
+.gss-hint {
+    margin-top: -10px;
+    margin-bottom: 15px;
+    color: rgb(107, 107, 107);
+}
+</style>