portal/app/resources/js/components/projects/DaysBulkDialog.vue

<template>
    <v-dialog v-model="open" max-width="560">
        <v-card>
            <v-card-title>Дни сбора лидов — для {{ count }} проектов</v-card-title>
            <v-card-text>
                <div class="mb-4">
                    <div class="text-caption text-success font-weight-medium mb-2">➕ Добавить дни</div>
                    <div class="d-flex gap-2">
                        <v-btn
                            v-for="d in WEEKDAYS"
                            :key="`add-${d.bit}`"
                            :data-testid="`day-add-${d.bit}`"
                            :color="addMask & d.bit ? 'success' : undefined"
                            :variant="addMask & d.bit ? 'flat' : 'outlined'"
                            size="small"
                            @click="toggleAdd(d.bit)"
                            >{{ d.short }}</v-btn
                        >
                    </div>
                </div>
                <div>
                    <div class="text-caption text-error font-weight-medium mb-2">➖ Убрать дни</div>
                    <div class="d-flex gap-2">
                        <v-btn
                            v-for="d in WEEKDAYS"
                            :key="`remove-${d.bit}`"
                            :data-testid="`day-remove-${d.bit}`"
                            :color="removeMask & d.bit ? 'error' : undefined"
                            :variant="removeMask & d.bit ? 'flat' : 'outlined'"
                            size="small"
                            @click="toggleRemove(d.bit)"
                            >{{ d.short }}</v-btn
                        >
                    </div>
                </div>
            </v-card-text>
            <v-card-actions>
                <v-spacer />
                <v-btn data-testid="cancel" @click="open = false">Отмена</v-btn>
                <v-btn color="primary" data-testid="apply" :disabled="addMask === 0 && removeMask === 0" @click="apply"
                    >Применить к {{ count }}</v-btn
                >
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { WEEKDAYS } from '../../constants/weekdays';

const props = defineProps<{ modelValue: boolean; count: number }>();
const emit = defineEmits<{
    'update:modelValue': [value: boolean];
    apply: [payload: { add: number; remove: number }];
}>();

const open = ref(props.modelValue);
const addMask = ref(0);
const removeMask = ref(0);

watch(
    () => props.modelValue,
    (val) => {
        open.value = val;
        if (val) {
            addMask.value = 0;
            removeMask.value = 0;
        }
    },
);

watch(open, (val) => {
    emit('update:modelValue', val);
});

function toggleAdd(bit: number) {
    addMask.value ^= bit;
    if (addMask.value & bit) removeMask.value &= ~bit;
}

function toggleRemove(bit: number) {
    removeMask.value ^= bit;
    if (removeMask.value & bit) addMask.value &= ~bit;
}

function apply() {
    emit('apply', { add: addMask.value, remove: removeMask.value });
    addMask.value = 0;
    removeMask.value = 0;
    open.value = false;
}
</script>