415 lines
8.3 KiB
Vue
415 lines
8.3 KiB
Vue
<script setup lang="ts">
|
|
import { computed, onMounted, ref } from 'vue';
|
|
import { RouterLink } from 'vue-router';
|
|
import { api } from '@/lib/api';
|
|
import { toFaDigits } from '@/lib/jalali';
|
|
import UiIcon from '@/components/UiIcon.vue';
|
|
import { UiModal } from '@/components/ui';
|
|
import SmsComposeModal from '@/components/SmsComposeModal.vue';
|
|
|
|
type BirthdayItem = {
|
|
id: string;
|
|
firstName: string;
|
|
lastName: string;
|
|
fullName: string;
|
|
mobile: string | null;
|
|
company?: string;
|
|
day: number;
|
|
};
|
|
|
|
type BirthdayMonth = {
|
|
monthName: string;
|
|
today: number;
|
|
total: number;
|
|
preview: BirthdayItem[];
|
|
items: BirthdayItem[];
|
|
};
|
|
|
|
const data = ref<BirthdayMonth | null>(null);
|
|
const listOpen = ref(false);
|
|
const smsTarget = ref<BirthdayItem | null>(null);
|
|
|
|
const groups = computed(() => {
|
|
const map = new Map<number, BirthdayItem[]>();
|
|
for (const item of data.value?.items ?? []) {
|
|
const list = map.get(item.day) ?? [];
|
|
list.push(item);
|
|
map.set(item.day, list);
|
|
}
|
|
return [...map.entries()].sort((a, b) => a[0] - b[0]);
|
|
});
|
|
|
|
function openSms(person: BirthdayItem) {
|
|
smsTarget.value = person;
|
|
}
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
const { data: body } = await api.get<BirthdayMonth>('/people/birthdays');
|
|
data.value = body.total > 0 ? body : null;
|
|
} catch {
|
|
data.value = null;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<section v-if="data" class="birthdays">
|
|
<div class="head">
|
|
<span class="ico"><UiIcon name="gift" :size="18" /></span>
|
|
<div>
|
|
<strong>تولدهای {{ data.monthName }}</strong>
|
|
<p>{{ toFaDigits(data.total) }} مشتری این ماه تولد دارند</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chips">
|
|
<RouterLink
|
|
v-for="person in data.preview"
|
|
:key="person.id"
|
|
class="chip"
|
|
:title="person.fullName"
|
|
:to="{ name: 'person-detail', params: { id: person.id } }"
|
|
>
|
|
<b>{{ toFaDigits(person.day) }}</b>
|
|
<span>{{ person.fullName }}</span>
|
|
</RouterLink>
|
|
</div>
|
|
<button type="button" class="more" @click="listOpen = true">
|
|
{{ data.total > data.preview.length ? 'همه' : 'فهرست' }}
|
|
</button>
|
|
|
|
<UiModal :open="listOpen" :title="`تولدهای ${data.monthName}`" @close="listOpen = false">
|
|
<div class="days">
|
|
<section
|
|
v-for="[day, people] in groups"
|
|
:key="day"
|
|
class="day"
|
|
:class="{ past: day < data.today, today: day === data.today }"
|
|
>
|
|
<h3>
|
|
<b>{{ toFaDigits(day) }}</b>
|
|
<span>{{ data.monthName }}</span>
|
|
<em v-if="day < data.today">گذشته</em>
|
|
<em v-else-if="day === data.today">امروز</em>
|
|
</h3>
|
|
<ul>
|
|
<li v-for="person in people" :key="person.id">
|
|
<RouterLink :to="{ name: 'person-detail', params: { id: person.id } }" @click="listOpen = false">
|
|
{{ person.fullName }}
|
|
</RouterLink>
|
|
<button
|
|
type="button"
|
|
class="sms"
|
|
:disabled="!person.mobile"
|
|
@click="openSms(person)"
|
|
>
|
|
{{ person.mobile ? 'پیامک تبریک' : 'بدون شماره' }}
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
</UiModal>
|
|
|
|
<SmsComposeModal
|
|
nest
|
|
:open="!!smsTarget"
|
|
title="پیامک تبریک تولد"
|
|
:endpoint="smsTarget ? `/people/${smsTarget.id}/birthday-sms` : ''"
|
|
default-text="{نام} عزیز، تولدتان مبارک."
|
|
:name="smsTarget?.fullName ?? ''"
|
|
:phone="smsTarget?.mobile ?? ''"
|
|
:record-title="smsTarget?.fullName ?? ''"
|
|
:company="smsTarget?.company ?? ''"
|
|
@close="smsTarget = null"
|
|
/>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.birthdays {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
background:
|
|
linear-gradient(90deg, rgba(255, 255, 255, 0.35), transparent 42%),
|
|
linear-gradient(100deg, var(--accent-subtle) 0%, #fff 58%, #fff7f4 100%);
|
|
border: 1px solid color-mix(in srgb, var(--accent) 22%, #fff);
|
|
border-radius: var(--radius);
|
|
box-shadow: 0 6px 18px rgba(15, 118, 110, 0.05);
|
|
padding: 0.55rem 0.75rem;
|
|
}
|
|
|
|
.head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.55rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ico {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 10px;
|
|
display: grid;
|
|
place-items: center;
|
|
background: #fff;
|
|
color: #e11d48;
|
|
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, #fff);
|
|
}
|
|
|
|
.head strong {
|
|
display: block;
|
|
color: var(--accent-deep);
|
|
font-size: 0.88rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.head p {
|
|
margin: 0.05rem 0 0;
|
|
color: #64748b;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.chips {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-wrap: nowrap;
|
|
gap: 0.35rem;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.chip {
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
max-width: 11.5rem;
|
|
min-width: 0;
|
|
border-radius: 999px;
|
|
border: 1px solid color-mix(in srgb, var(--accent) 24%, #fff);
|
|
background: rgba(255, 255, 255, 0.86);
|
|
color: #134e4a;
|
|
padding: 0.22rem 0.55rem 0.22rem 0.28rem;
|
|
text-decoration: none;
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
.chip b {
|
|
flex-shrink: 0;
|
|
font-weight: 700;
|
|
font-size: 0.72rem;
|
|
color: var(--accent-deep);
|
|
background: var(--accent-soft);
|
|
border-radius: 999px;
|
|
padding: 0.12rem 0.38rem;
|
|
}
|
|
|
|
.chip span {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.more {
|
|
flex-shrink: 0;
|
|
border: 0;
|
|
border-radius: 999px;
|
|
background: var(--accent);
|
|
color: #fff;
|
|
padding: 0.32rem 0.7rem;
|
|
font: inherit;
|
|
font-size: 0.78rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.more:hover {
|
|
background: var(--accent-hover);
|
|
}
|
|
|
|
.days {
|
|
display: grid;
|
|
gap: 0.85rem;
|
|
max-height: 62vh;
|
|
overflow: auto;
|
|
padding-inline-end: 0.15rem;
|
|
}
|
|
|
|
.day {
|
|
background: #fff;
|
|
border: 1px solid #e7eef2;
|
|
border-radius: 14px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.day h3 {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
margin: 0;
|
|
padding: 0.55rem 0.8rem;
|
|
background: var(--accent-subtle);
|
|
border-bottom: 1px solid color-mix(in srgb, var(--accent) 16%, #fff);
|
|
font-size: 0.86rem;
|
|
font-weight: 600;
|
|
color: var(--accent-deep);
|
|
}
|
|
|
|
.day h3 b {
|
|
display: grid;
|
|
place-items: center;
|
|
min-width: 1.7rem;
|
|
height: 1.7rem;
|
|
padding: 0 0.3rem;
|
|
border-radius: 999px;
|
|
background: var(--accent);
|
|
color: #fff;
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
.day em {
|
|
margin-inline-start: auto;
|
|
font-style: normal;
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
color: #94a3b8;
|
|
background: #fff;
|
|
border-radius: 999px;
|
|
padding: 0.1rem 0.45rem;
|
|
}
|
|
|
|
.day.today h3 {
|
|
background: color-mix(in srgb, var(--accent-soft) 70%, #fff);
|
|
}
|
|
|
|
.day.today em {
|
|
color: var(--accent-deep);
|
|
}
|
|
|
|
.day.past {
|
|
opacity: 0.82;
|
|
}
|
|
|
|
.day ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.day li {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.75rem;
|
|
padding: 0.62rem 0.85rem;
|
|
border-top: 1px solid #eef2f6;
|
|
}
|
|
|
|
.day li:first-child {
|
|
border-top: 0;
|
|
}
|
|
|
|
.day a {
|
|
flex: 1 1 auto;
|
|
color: #0f172a;
|
|
text-decoration: none;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.day a:hover {
|
|
color: var(--accent-deep);
|
|
}
|
|
|
|
.sms {
|
|
flex-shrink: 0;
|
|
border: 1px solid color-mix(in srgb, var(--accent) 35%, #fff);
|
|
background: #fff;
|
|
color: var(--accent-deep);
|
|
border-radius: 999px;
|
|
padding: 0.28rem 0.65rem;
|
|
font: inherit;
|
|
font-size: 0.75rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sms:hover:not(:disabled) {
|
|
background: var(--accent-subtle);
|
|
}
|
|
|
|
.sms:disabled {
|
|
border-color: #e2e8f0;
|
|
color: #94a3b8;
|
|
cursor: default;
|
|
}
|
|
|
|
.lead {
|
|
margin: 0 0 0.6rem;
|
|
}
|
|
|
|
.hint,
|
|
.err,
|
|
.ok {
|
|
margin: 0.55rem 0 0;
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.hint {
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.err {
|
|
color: #dc2626;
|
|
}
|
|
|
|
.ok {
|
|
color: #16a34a;
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.birthdays {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 0.45rem 0.6rem;
|
|
}
|
|
|
|
.head {
|
|
min-width: 0;
|
|
}
|
|
|
|
.head p {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.more {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.chips {
|
|
grid-column: 1 / -1;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.chips::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.day li {
|
|
gap: 0.45rem;
|
|
padding-inline: 0.7rem;
|
|
}
|
|
}
|
|
</style>
|