src/components/EditServiceModalBody.vue - dev - vdele/app

src/components/EditServiceModalBody.vue
132 строки5 KB
Vasilii Polshakov
last fixes for 0.0.1-alpha
02 апр 2025, 12:32
02 апр 2025, 12:32ef3d4ef
<script setup lang="ts">
import { ref, useTemplateRef } from 'vue';
import type { IServiceRecord } from '@/libs/types';
import { formatPrice } from '@/utils/index';

const { uid, caption, description, group, prices } = defineProps({
    uid: {
        type: String,
        required: true,
    },
    caption: {
        type: String,
        required: true,
    },
    description: {
        type: String,
        required: true,
    },
    group: {
        type: String,
        required: true,
    },
    prices: {
        type: Array<number>,
        required: true,
    }
});

const emit = defineEmits(['cancel', 'save']);

const priceListInstance = useTemplateRef('price-list');

const state = ref<IServiceRecord>({
    uid: uid,
    caption: '',
    description: '',
    group: group,
    prices: prices,
});

const priceClickHandler = (e: Event) => {
    const event = e as PointerEvent;
    const target = event.target as HTMLButtonElement;
    if(target.classList.contains('inactive')){
        target.classList.remove('inactive');
    }else{
        target.classList.add('inactive');
    }
};

const addPriceHandler = () => {
    let price = prompt('Введите цену', '0');
    if(price){
        state.value.prices.push(parseInt(price.trim().replace(/\D+/g, '')));
    }
};

const saveHandler = () => {
    const savedPrises = Array.from(priceListInstance.value!.children).map((v: Element) => {
        const li = v as HTMLLIElement;
        const btn = li.firstElementChild as HTMLButtonElement;
        if(btn && !btn.classList.contains('inactive')){
            const idx = btn.dataset.idx ?? '';
            if(idx !== '')
                return state.value.prices[parseInt(idx)]
        }
    });

    const service: IServiceRecord = { 
        uid: state.value.uid,
        group: state.value.group,
        caption: state.value.caption === '' ? caption : state.value.caption,
        description: state.value.description === '' ? description : state.value.description,
        prices: savedPrises.filter(v => v) as number[],
    };
    emit('save', { store: 'services', record: service});
};

const cancelHandler = () => {
    emit('cancel');
};
</script>
<template>
    <div class="d-flex flex-column gap-2">
        <div>
            <div><b>Group UID:</b> <code>{{ group }}</code></div>
            <div><b>UID:</b> <code>{{ uid }}</code></div>
            <div><b>Наименование:</b> {{ caption }} <code>{{ state.caption ? '=> ' + state.caption : '' }}</code></div>
            <div><input placeholder="Введите новое наименование услуги..." type="text" style="max-width: 400px;" :class="['form-control', 'border-' + ( state.caption.length === 0 || state.caption.length >= 2 ? 'success' : 'danger')]" v-model="state.caption"></div>
        </div>
        <div>
            <div><b>Описание:</b> {{ description }} <code>{{ state.description ? '=> ' + state.description : '' }}</code></div>
            <div>
                <input placeholder="Введите новое описание услуги..." type="text" style="max-width: 400px;" 
                    :class="['form-control', 'border-' + ( state.caption.length === 0 || state.caption.length >= 2 ? 'success' : 'danger')]" 
                    v-model="state.description">
            </div>
        </div>
        <div>
            <div><b>Список Цен:</b></div>
            <div class="alert alert-info d-flex gap-2 align-items-center" role="alert">
                <span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"></path>
                        <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"></path>
                    </svg>
                </span>
                <span>Отметьте цену на удаление, нажав на неё. <b>Выбранные Цены будут удалены при сохранении записии.</b> <br /> Либо добавьте новую цену в список по кнопке +</span>
            </div>
            <div class="alert alert-danger d-flex gap-2 align-items-center" role="alert">
                <span><b>Вводите цены без разрядов.</b> <br> Пример: 299<b>.99</b> не поддерживается в данной версии приложения. 299.99 будет представленно в виде 29 999.00 ₽</span>
            </div>
            <ul ref="price-list" class="d-flex gap-2 list-unstyled">
                <li v-for="(price, key) in prices" :key="'modal-price-' + key">
                    <button class="btn btn-secondary" :data-idx="key" @click="priceClickHandler">{{ formatPrice(price) }}</button>
                </li>
                <li>
                    <button class="btn btn-success" @click="addPriceHandler">+</button>
                </li>
            </ul>
        </div>
        <div class="d-flex gap-2">
            <button type="button" class="btn btn-success" :disabled="false" @click="saveHandler">Сохранить</button>
            <button type="button" class="btn btn-secondary" @click="cancelHandler">Отменить</button>
        </div>
    </div>
</template>
<style>
.inactive {
    opacity: 0.3;
}
</style>