Refine order detail layout

2026-04-06 15:21:05 +07:00
parent 2e3c64bc98
commit bb39642b67
5 changed files with 301 additions and 121 deletions
--- a/app/pages/client-orders/[id].vue
+++ b/app/pages/client-orders/[id].vue
@@ -9,8 +9,6 @@ import {
 } from '~/composables/graphql/generated';
 import {
  formatPrice,
-  orderLogisticsStateText,
-  orderDeliveryStateText,
 } from '~/composables/useOrderDetailPresentation';
 import { formatOrderCode } from '~/composables/useOrderCodePresentation';

@@ -62,7 +60,7 @@ watch(
    statusDraft.value = '';

    for (const key of Object.keys(itemPriceDrafts)) {
-      delete itemPriceDrafts[key];
+      itemPriceDrafts[key] = '';
    }

    if (!order) {
@@ -307,8 +305,6 @@ watch(

 <template>
  <section class="space-y-6">
-    <NuxtLink to="/client-orders" class="text-sm font-semibold text-[#0d854a]">← Назад к заказам клиентов</NuxtLink>
-
    <div v-if="orderQuery.loading.value" class="manager-empty-state">
      Загружаем заказ...
    </div>
@@ -318,9 +314,19 @@ watch(
    </div>

    <template v-else>
-      <div class="manager-hero">
-        <p class="manager-eyebrow">Заказ</p>
-        <h1 class="manager-title">{{ currentOrderCode }}</h1>
+      <div class="surface-card rounded-3xl px-5 py-4">
+        <div class="flex flex-wrap items-center gap-3">
+          <NuxtLink to="/client-orders" class="text-sm font-semibold text-[#0d854a]">
+            ← Назад к заказам клиентов
+          </NuxtLink>
+          <span class="hidden h-4 w-px bg-[#d8e4dd] md:block" />
+          <span class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">
+            Заказ
+          </span>
+          <span class="text-lg font-black tracking-[-0.03em] text-[#123824]">
+            {{ currentOrderCode }}
+          </span>
+        </div>
      </div>

      <div class="space-y-4">
@@ -372,68 +378,24 @@ watch(
            @activate:unit-price="void openPriceEditor($event)"
            @finish:unit-price="closePriceEditor($event)"
          />
-        </div>
-
-        <div class="surface-card rounded-3xl p-5">
-          <h2 class="text-xl font-bold text-[#123824]">Доставка</h2>
-          <div class="mt-4 space-y-4 text-sm text-[#123824]">
-            <div class="space-y-1">
-              <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Адрес</p>
-              <p class="text-base font-semibold">{{ currentOrder.deliveryAddress || 'Адрес пока не указан' }}</p>
-            </div>
-            <div class="grid gap-4 md:grid-cols-2">
-              <div class="space-y-3">
-                <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Комментарий по доставке</p>
-                <label v-if="editingDeliveryTerms" class="form-control">
-                  <input
-                    v-model="deliveryTermsDraft"
-                    data-delivery-terms-input
-                    type="text"
-                    placeholder="Например, доставка до склада 2-3 дня"
-                    class="input input-bordered manager-field w-full rounded-2xl bg-white"
-                    :disabled="!canEditOffer"
-                    @blur="closeDeliveryTermsEditor"
-                    @keydown.enter="closeDeliveryTermsEditor"
-                  >
-                </label>
-                <button
-                  v-else
-                  type="button"
-                  class="w-full rounded-2xl px-0 py-0 text-left text-sm text-[#123824]"
-                  :class="canEditOffer ? 'cursor-pointer transition hover:text-[#0d854a]' : 'cursor-default'"
-                  @dblclick="void openDeliveryTermsEditor()"
-                >
-                  {{ orderDeliveryStateText(draftDeliveryTerms) }}
-                </button>
-              </div>
-              <div class="space-y-3">
-                <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Стоимость логистики</p>
-                <label v-if="editingDeliveryFee" class="form-control">
-                  <input
-                    v-model="deliveryFeeDraft"
-                    data-delivery-fee-input
-                    type="number"
-                    min="0"
-                    step="0.01"
-                    placeholder="Например, 3000"
-                    class="input input-bordered manager-field w-full rounded-2xl bg-white"
-                    :disabled="!canEditOffer"
-                    @blur="closeDeliveryFeeEditor"
-                    @keydown.enter="closeDeliveryFeeEditor"
-                  >
-                </label>
-                <button
-                  v-else
-                  type="button"
-                  class="w-full rounded-2xl px-0 py-0 text-left text-sm text-[#123824]"
-                  :class="canEditOffer ? 'cursor-pointer transition hover:text-[#0d854a]' : 'cursor-default'"
-                  @dblclick="void openDeliveryFeeEditor()"
-                >
-                  {{ orderLogisticsStateText(draftDeliveryFee) }}
-                </button>
-              </div>
-            </div>
-          </div>
+          <OrdersOrderDeliveryLine
+            class="mt-3"
+            mode="manager"
+            :can-edit="canEditOffer"
+            :delivery-address="currentOrder.deliveryAddress"
+            :delivery-terms="draftDeliveryTerms"
+            :delivery-fee="draftDeliveryFee"
+            :editing-delivery-terms="editingDeliveryTerms"
+            :editing-delivery-fee="editingDeliveryFee"
+            :delivery-terms-draft="deliveryTermsDraft"
+            :delivery-fee-draft="deliveryFeeDraft"
+            @update:delivery-terms="deliveryTermsDraft = $event"
+            @update:delivery-fee="deliveryFeeDraft = $event"
+            @activate:delivery-terms="void openDeliveryTermsEditor()"
+            @finish:delivery-terms="closeDeliveryTermsEditor()"
+            @activate:delivery-fee="void openDeliveryFeeEditor()"
+            @finish:delivery-fee="closeDeliveryFeeEditor()"
+          />

          <div class="mt-4 flex flex-wrap items-center justify-between gap-3">
            <p class="text-sm text-[#5c7b69]">
--- a/app/pages/orders/[id].vue
+++ b/app/pages/orders/[id].vue
@@ -5,10 +5,6 @@ import {
  type OrderDetailQuery,
 } from '~/composables/graphql/generated';
 import { formatOrderCode } from '~/composables/useOrderCodePresentation';
-import {
-  orderDeliveryStateText,
-  orderLogisticsStateText,
-} from '~/composables/useOrderDetailPresentation';

 type OrderItem = NonNullable<OrderDetailQuery['order']>;

@@ -27,8 +23,6 @@ const currentOrderCode = computed(() => formatOrderCode(currentOrder.value?.code

 <template>
  <section class="space-y-6">
-    <NuxtLink to="/orders" class="text-sm font-semibold text-[#0d854a]">← Назад к моим заказам</NuxtLink>
-
    <div v-if="orderQuery.loading.value" class="manager-empty-state">
      Загружаем заказ...
    </div>
@@ -38,9 +32,19 @@ const currentOrderCode = computed(() => formatOrderCode(currentOrder.value?.code
    </div>

    <template v-else>
-      <div class="manager-hero">
-        <p class="manager-eyebrow">Заказ</p>
-        <h1 class="manager-title">{{ currentOrderCode }}</h1>
+      <div class="surface-card rounded-3xl px-5 py-4">
+        <div class="flex flex-wrap items-center gap-3">
+          <NuxtLink to="/orders" class="text-sm font-semibold text-[#0d854a]">
+            ← Назад к моим заказам
+          </NuxtLink>
+          <span class="hidden h-4 w-px bg-[#d8e4dd] md:block" />
+          <span class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">
+            Заказ
+          </span>
+          <span class="text-lg font-black tracking-[-0.03em] text-[#123824]">
+            {{ currentOrderCode }}
+          </span>
+        </div>
      </div>

      <div class="space-y-4">
@@ -58,26 +62,12 @@ const currentOrderCode = computed(() => formatOrderCode(currentOrder.value?.code
            :calculation-payload="currentOrder.calculationPayload"
            :framed="false"
          />
-        </div>
-
-        <div class="surface-card rounded-3xl p-5">
-          <h2 class="text-xl font-bold text-[#123824]">Доставка</h2>
-          <div class="mt-4 space-y-4 text-sm text-[#123824]">
-            <div class="space-y-1">
-              <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Адрес</p>
-              <p class="text-base font-semibold">{{ currentOrder.deliveryAddress || 'Адрес пока не указан' }}</p>
-            </div>
-            <div class="grid gap-4 md:grid-cols-2">
-              <div class="space-y-1">
-                <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Комментарий по доставке</p>
-                <p>{{ orderDeliveryStateText(currentOrder.deliveryTerms) }}</p>
-              </div>
-              <div class="space-y-1">
-                <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Логистика</p>
-                <p>{{ orderLogisticsStateText(currentOrder.deliveryFee) }}</p>
-              </div>
-            </div>
-          </div>
+          <OrdersOrderDeliveryLine
+            class="mt-3"
+            :delivery-address="currentOrder.deliveryAddress"
+            :delivery-terms="currentOrder.deliveryTerms"
+            :delivery-fee="currentOrder.deliveryFee"
+          />
        </div>
      </div>
    </template>