fregat/web-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine manager calendar cards

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-06 11:32:49 +07:00
parent 6a3d69e1e8
commit 77b98539ea
1 changed files with 155 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
app/pages/client-orders/index.vue
View File

@@ -85,6 +85,35 @@ function getOrderGroup(order: ManagerOrderItem) {
return 'CLOSED';
}
function orderGroupLabel(group: StatusFilter) {
if (group === 'NEW') {
return 'Заявка';
}
if (group === 'PRICED') {
return 'Расчёт';
}
if (group === 'IN_PROGRESS') {
return 'В работе';
}
if (group === 'CLOSED') {
return 'Закрыт';
}
return 'Все';
}
function orderGroupBadgeClass(group: StatusFilter) {
if (group === 'NEW') {
return 'manager-calendar-order-card__status manager-calendar-order-card__status--new';
}
if (group === 'PRICED') {
return 'manager-calendar-order-card__status manager-calendar-order-card__status--priced';
}
if (group === 'IN_PROGRESS') {
return 'manager-calendar-order-card__status manager-calendar-order-card__status--progress';
}
return 'manager-calendar-order-card__status manager-calendar-order-card__status--closed';
}
function matchesFilter(order: ManagerOrderItem) {
if (statusFilter.value === 'ALL') {
return true;
@@ -168,6 +197,7 @@ const calendarOptions = computed(() => ({
},
events: filteredOrders.value.map((order: ManagerOrderItem) => {
const customer = customerCardMeta(order.customerId);
const group = getOrderGroup(order);
return {
id: order.id,
@@ -180,6 +210,8 @@ const calendarOptions = computed(() => ({
fallbackAvatarSrc: customer.fallbackAvatarSrc,
initials: customer.initials,
orderCode: formatOrderCode(order.code),
orderGroupLabel: orderGroupLabel(group),
orderGroupClass: orderGroupBadgeClass(group),
totalPriceLabel: formatPrice(order.totalPrice) ?? 'Цена уточняется',
},
};
@@ -188,12 +220,15 @@ const calendarOptions = computed(() => ({
const customerName = escapeHtml(event.extendedProps.customerName || '');
const avatarSrc = event.extendedProps.avatarSrc || event.extendedProps.fallbackAvatarSrc;
const orderCode = escapeHtml(event.extendedProps.orderCode || '');
const orderGroupLabel = escapeHtml(event.extendedProps.orderGroupLabel || '');
const orderGroupClass = escapeHtml(event.extendedProps.orderGroupClass || '');
const totalPriceLabel = escapeHtml(event.extendedProps.totalPriceLabel || '');
const initials = escapeHtml(event.extendedProps.initials || '');
return {
html: `
<div class="manager-calendar-order-card">
<div class="manager-calendar-order-card__topline">
<div class="manager-calendar-order-card__header">
<div class="manager-calendar-order-card__avatar-shell">
${avatarSrc
@@ -201,10 +236,12 @@ const calendarOptions = computed(() => ({
: `<span class="manager-calendar-order-card__initials">${initials}</span>`}
</div>
<div class="manager-calendar-order-card__text">
<div class="manager-calendar-order-card__code">${orderCode}</div>
<div class="manager-calendar-order-card__name">${customerName}</div>
<div class="manager-calendar-order-card__code">${orderCode}</div>
</div>
</div>
<span class="${orderGroupClass}">${orderGroupLabel}</span>
</div>
<div class="manager-calendar-order-card__price">${totalPriceLabel}</div>
</div>
`,
@@ -272,7 +309,7 @@ const calendarOptions = computed(() => ({
Заказы по текущим условиям не найдены.
</div>
<div v-else-if="viewMode === 'calendar'" class="surface-card rounded-3xl p-4 md:p-5">
<div v-else-if="viewMode === 'calendar'" class="manager-calendar-shell">
<FullCalendar :options="calendarOptions" />
</div>
@@ -294,26 +331,35 @@ const calendarOptions = computed(() => ({
<style>
.manager-calendar-order-card {
display: grid;
gap: 0.45rem;
min-height: 74px;
gap: 0.4rem;
min-height: 78px;
border-radius: 18px;
background: #ffffff;
padding: 0.62rem 0.72rem;
padding: 0.7rem 0.75rem;
box-shadow: 0 12px 26px rgba(18, 56, 36, 0.08);
}
.manager-calendar-order-card__topline {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.6rem;
}
.manager-calendar-order-card__header {
display: flex;
align-items: center;
align-items: flex-start;
gap: 0.55rem;
min-width: 0;
flex: 1 1 auto;
}
.manager-calendar-order-card__avatar-shell {
width: 34px;
height: 34px;
width: 32px;
height: 32px;
flex: 0 0 auto;
overflow: hidden;
border-radius: 12px;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
@@ -336,27 +382,110 @@ const calendarOptions = computed(() => ({
min-width: 0;
}
.manager-calendar-order-card__code {
font-size: 0.88rem;
line-height: 1.1;
font-weight: 800;
color: #123824;
}
.manager-calendar-order-card__name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.76rem;
line-height: 1.15;
font-weight: 800;
color: #123824;
}
.manager-calendar-order-card__code {
margin-top: 0.15rem;
font-size: 0.72rem;
color: #5a7968;
line-height: 1.1;
font-weight: 700;
color: #688676;
}
.manager-calendar-order-card__status {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
padding: 0.24rem 0.5rem;
font-size: 0.62rem;
line-height: 1;
font-weight: 800;
white-space: nowrap;
}
.manager-calendar-order-card__status--new {
background: #edf3ef;
color: #355947;
}
.manager-calendar-order-card__status--priced {
background: #eef7f1;
color: #0d854a;
}
.manager-calendar-order-card__status--progress {
background: #edf2f6;
color: #2f5872;
}
.manager-calendar-order-card__status--closed {
background: #f1f3f2;
color: #617268;
}
.manager-calendar-order-card__price {
font-size: 0.78rem;
font-size: 0.74rem;
font-weight: 700;
color: #0d854a;
}
.manager-calendar-shell :deep(.fc) {
--fc-border-color: #dbe5df;
--fc-button-bg-color: #123824;
--fc-button-border-color: #123824;
--fc-button-hover-bg-color: #0d854a;
--fc-button-hover-border-color: #0d854a;
--fc-button-active-bg-color: #0d854a;
--fc-button-active-border-color: #0d854a;
--fc-neutral-bg-color: transparent;
--fc-page-bg-color: transparent;
}
.manager-calendar-shell :deep(.fc-theme-standard td),
.manager-calendar-shell :deep(.fc-theme-standard th),
.manager-calendar-shell :deep(.fc-theme-standard .fc-scrollgrid) {
border-color: #dbe5df;
}
.manager-calendar-shell :deep(.fc-theme-standard .fc-scrollgrid) {
border-radius: 22px;
overflow: hidden;
}
.manager-calendar-shell :deep(.fc-col-header-cell-cushion) {
padding: 0.85rem 0.35rem;
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #688676;
}
.manager-calendar-shell :deep(.fc-daygrid-day-frame) {
background: transparent;
padding: 0.35rem;
}
.manager-calendar-shell :deep(.fc-daygrid-day-top) {
justify-content: flex-end;
padding: 0.15rem 0.25rem 0.2rem;
}
.manager-calendar-shell :deep(.fc-daygrid-day-number) {
font-size: 0.78rem;
font-weight: 700;
color: #5a7968;
}
.fc .fc-daygrid-event {
border: 0;
background: transparent;