web-frontend/app/components/orders/OrderDeliveryLine.vue

<script setup lang="ts">
import {
  orderDeliveryStateText,
  orderLogisticsStateText,
} from '~/composables/useOrderDetailPresentation';

const props = defineProps<{
  deliveryAddress?: string | null;
  deliveryTerms?: string | null;
  deliveryFee?: number | null;
  mode?: 'readonly' | 'manager';
  canEdit?: boolean;
  editingDeliveryTerms?: boolean;
  editingDeliveryFee?: boolean;
  deliveryTermsDraft?: string;
  deliveryFeeDraft?: string;
}>();

const emit = defineEmits<{
  'update:delivery-terms': [value: string];
  'update:delivery-fee': [value: string];
  'activate:delivery-terms': [];
  'finish:delivery-terms': [];
  'activate:delivery-fee': [];
  'finish:delivery-fee': [];
}>();

const isManagerMode = computed(() => props.mode === 'manager');
const isEditable = computed(() => isManagerMode.value && Boolean(props.canEdit));
const addressLabel = computed(() => props.deliveryAddress?.trim() || 'Адрес пока не указан');
const deliveryTermsLabel = computed(() => orderDeliveryStateText(props.deliveryTerms));
const deliveryFeeLabel = computed(() => orderLogisticsStateText(props.deliveryFee));

function updateDeliveryTerms(event: Event) {
  emit('update:delivery-terms', (event.target as HTMLInputElement).value);
}

function updateDeliveryFee(event: Event) {
  emit('update:delivery-fee', (event.target as HTMLInputElement).value);
}

function activateDeliveryTerms() {
  if (!isEditable.value) {
    return;
  }

  emit('activate:delivery-terms');
}

function finishDeliveryTerms() {
  emit('finish:delivery-terms');
}

function activateDeliveryFee() {
  if (!isEditable.value) {
    return;
  }

  emit('activate:delivery-fee');
}

function finishDeliveryFee() {
  emit('finish:delivery-fee');
}
</script>

<template>
  <article class="surface-card rounded-[28px] p-4 md:grid md:grid-cols-[minmax(0,1.8fr)_minmax(0,1fr)_160px] md:gap-4 md:p-5">
    <div class="flex min-w-0 gap-4">
      <div class="flex h-20 w-20 shrink-0 items-center justify-center rounded-[24px] bg-[#edf3ef] text-[#123824]">
        <svg class="h-8 w-8" viewBox="0 0 24 24" fill="none" aria-hidden="true">
          <path d="M3 7.5H14V14.5H3V7.5Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" />
          <path d="M14 10H18.5L21 12.5V14.5H14V10Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" />
          <path d="M7 17.5C7.82843 17.5 8.5 16.8284 8.5 16C8.5 15.1716 7.82843 14.5 7 14.5C6.17157 14.5 5.5 15.1716 5.5 16C5.5 16.8284 6.17157 17.5 7 17.5Z" stroke="currentColor" stroke-width="1.8" />
          <path d="M17 17.5C17.8284 17.5 18.5 16.8284 18.5 16C18.5 15.1716 17.8284 14.5 17 14.5C16.1716 14.5 15.5 15.1716 15.5 16C15.5 16.8284 16.1716 17.5 17 17.5Z" stroke="currentColor" stroke-width="1.8" />
          <path d="M3 14.5H5.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
          <path d="M8.5 16H15.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
        </svg>
      </div>

      <div class="min-w-0 space-y-2">
        <p class="text-base font-bold text-[#123824]">Доставка</p>
        <p class="text-xs font-semibold uppercase tracking-[0.14em] text-[#6a8a76]">
          Адрес доставки
        </p>
        <p class="text-sm leading-6 text-[#123824]">
          {{ addressLabel }}
        </p>
      </div>
    </div>

    <div class="mt-4 md:mt-0">
      <p class="mb-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">
        Условия
      </p>

      <label v-if="isManagerMode && editingDeliveryTerms" class="form-control">
        <input
          :value="deliveryTermsDraft ?? ''"
          data-delivery-terms-input
          type="text"
          placeholder="Например, доставка до склада 2-3 дня"
          class="input input-bordered manager-field w-full rounded-2xl bg-white"
          :disabled="!canEdit"
          @input="updateDeliveryTerms"
          @blur="finishDeliveryTerms"
          @keydown.enter="finishDeliveryTerms"
        >
      </label>

      <button
        v-else-if="isManagerMode"
        type="button"
        class="w-full rounded-2xl px-0 py-0 text-left text-sm leading-6 text-[#123824]"
        :class="isEditable ? 'cursor-pointer transition hover:text-[#0d854a]' : 'cursor-default'"
        @dblclick="activateDeliveryTerms"
      >
        {{ deliveryTermsLabel }}
      </button>

      <p v-else class="text-sm leading-6 text-[#123824]">
        {{ deliveryTermsLabel }}
      </p>
    </div>

    <div class="mt-4 md:mt-0">
      <p class="mb-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">
        Стоимость
      </p>

      <label v-if="isManagerMode && editingDeliveryFee" class="form-control">
        <input
          :value="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="!canEdit"
          @input="updateDeliveryFee"
          @blur="finishDeliveryFee"
          @keydown.enter="finishDeliveryFee"
        >
      </label>

      <button
        v-else-if="isManagerMode"
        type="button"
        class="w-full rounded-2xl px-0 py-0 text-left text-sm font-semibold text-[#123824]"
        :class="isEditable ? 'cursor-pointer transition hover:text-[#0d854a]' : 'cursor-default'"
        @dblclick="activateDeliveryFee"
      >
        {{ deliveryFeeLabel }}
      </button>

      <p v-else class="text-sm font-semibold text-[#123824]">
        {{ deliveryFeeLabel }}
      </p>
    </div>
  </article>
</template>