portal/app/resources/js/components/reminders/RemindersList.vue

<script setup lang="ts">
/**
 * RemindersList — v-list напоминаний с действиями: complete (галочка),
 * edit (диалог), delete (с confirm). При пустом списке — empty-state.
 *
 * Sprint 4 Phase B/2 — split RemindersView (audit O-refactor-04 хвост).
 *
 * State (items + loading) читается из reminders-store напрямую. Действия
 * (edit/delete/complete/openDeal) проксируются эмитами в parent — там же
 * подключены confirm-dialog и edit-dialog.
 */
import { useRemindersStore } from '../../stores/reminders';
import type { ApiReminder } from '../../api/reminders';

const store = useRemindersStore();

const emit = defineEmits<{
    (e: 'edit', reminder: ApiReminder): void;
    (e: 'delete', id: number): void;
    (e: 'complete', id: number): void;
    (e: 'open-deal', dealId: number): void;
}>();

function formatRelative(iso: string | null): string {
    if (!iso) return '—';
    const ms = new Date(iso).getTime() - Date.now();
    const abs = Math.abs(ms);
    const min = Math.round(abs / 60_000);
    const future = ms > 0;
    if (min < 1) return future ? 'через минуту' : 'минуту назад';
    if (min < 60) return future ? `через ${min} мин` : `${min} мин назад`;
    const hr = Math.round(min / 60);
    if (hr < 24) return future ? `через ${hr} ч` : `${hr} ч назад`;
    const days = Math.round(hr / 24);
    return future ? `через ${days} д` : `${days} д назад`;
}

function formatAbsolute(iso: string | null): string {
    if (!iso) return '—';
    return new Date(iso).toLocaleString('ru-RU', {
        day: '2-digit',
        month: '2-digit',
        year: 'numeric',
        hour: '2-digit',
        minute: '2-digit',
    });
}
</script>

<template>
    <v-card variant="outlined" class="reminders-list-card">
        <div v-if="store.items.length === 0 && !store.loading" class="empty-state" data-testid="reminders-empty">
            <v-icon size="32" class="mb-2">mdi-clock-check-outline</v-icon>
            <div>Нет напоминаний в этой группе</div>
            <div class="empty-hint">Создавайте напоминания из карточки сделки.</div>
        </div>

        <v-list v-else density="compact" data-testid="reminders-list">
            <v-list-item
                v-for="r in store.items"
                :key="r.id"
                class="reminder-row"
                data-testid="reminder-item"
                :class="{
                    'reminder-overdue': r.completed_at === null && r.remind_at && new Date(r.remind_at) < new Date(),
                    'reminder-completed': r.completed_at !== null,
                }"
            >
                <template #prepend>
                    <v-btn
                        v-if="r.completed_at === null"
                        icon="mdi-check-circle-outline"
                        size="small"
                        variant="text"
                        density="comfortable"
                        :data-testid="`complete-${r.id}`"
                        @click="emit('complete', r.id)"
                    />
                    <v-icon v-else color="success" class="ml-2">mdi-check-circle</v-icon>
                </template>
                <v-list-item-title class="reminder-title">{{ r.text || 'Без описания' }}</v-list-item-title>
                <v-list-item-subtitle class="reminder-meta">
                    <a class="deal-link" href="#" data-testid="deal-link" @click.prevent="emit('open-deal', r.deal_id)">
                        #{{ r.deal_id }}
                    </a>
                    ·
                    <span :title="formatAbsolute(r.remind_at)">{{ formatRelative(r.remind_at) }}</span>
                    <span v-if="r.creator_name"> · {{ r.creator_name }}</span>
                </v-list-item-subtitle>
                <template #append>
                    <v-menu offset="4">
                        <template #activator="{ props: menuProps }">
                            <v-btn
                                v-bind="menuProps"
                                icon="mdi-dots-vertical"
                                size="small"
                                variant="text"
                                :data-testid="`menu-${r.id}`"
                            />
                        </template>
                        <v-list density="compact">
                            <v-list-item
                                prepend-icon="mdi-pencil-outline"
                                title="Изменить"
                                :data-testid="`edit-${r.id}`"
                                @click="emit('edit', r)"
                            />
                            <v-list-item
                                prepend-icon="mdi-delete-outline"
                                title="Удалить"
                                :data-testid="`delete-${r.id}`"
                                @click="emit('delete', r.id)"
                            />
                        </v-list>
                    </v-menu>
                </template>
            </v-list-item>
        </v-list>
    </v-card>
</template>

<style scoped>
.reminders-list-card {
    min-height: 200px;
}

.empty-state {
    padding: 40px 16px;
    text-align: center;
    color: #66635c;
    font-size: 14px;
}

.empty-hint {
    font-size: 12px;
    margin-top: 6px;
    color: #6b6356;
}

.reminder-row {
    border-bottom: 1px solid #f0ede4;
}

.reminder-overdue .reminder-meta span:first-of-type + span {
    color: #b94837;
    font-weight: 500;
}

.reminder-completed .reminder-title {
    text-decoration: line-through;
    color: #9a9690;
}

.reminder-title {
    font-weight: 500;
}

.reminder-meta {
    font-size: 12px;
    color: #66635c;
    margin-top: 2px;
}

.deal-link {
    color: #0f6e56;
    text-decoration: none;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.deal-link:hover {
    text-decoration: underline;
}
</style>