jws-frontend/src/pages/12_debit-note/expansion/PaymentExpansion.vue

<script lang="ts" setup>
import useOptionStore from 'src/stores/options';
import { watch } from 'vue';
import QuotationFormInfo from 'src/pages/05_quotation/QuotationFormInfo.vue';
import { PayCondition } from 'src/stores/quotations';

const props = withDefaults(
  defineProps<{
    readonly?: boolean;
    installmentNo?: number[];
    installmentAmount?: number;
  }>(),
  {},
);

const payBillDate = defineModel<Date | null | undefined>('payBillDate', {
  required: false,
});
const payType = defineModel<PayCondition>('payType', { required: true });
const paySplitCount = defineModel<number | null>('paySplitCount', {
  default: 1,
});
const paySplit = defineModel<{ no: number; name?: string; amount: number }[]>(
  'paySplit',
  { required: true },
);
const summaryPrice = defineModel<{
  totalPrice: number;
  totalDiscount: number;
  vat: number;
  vatExcluded: number;
  finalPrice: number;
}>('summaryPrice', {
  required: true,
  default: {
    totalPrice: 0,
    totalDiscount: 0,
    vat: 0,
    vatExcluded: 0,
    finalPrice: 0,
  },
});

const optionStore = useOptionStore();
</script>
<template>
  <q-expansion-item
    dense
    class="overflow-hidden bordered full-width"
    switch-toggle-side
    style="border-radius: var(--radius-2)"
    expand-icon="mdi-chevron-down-circle"
    header-class="surface-1 q-py-sm text-medium text-body1"
  >
    <template #header>
      <span>
        {{ $t('general.payment') }}
      </span>
    </template>

    <main class="surface-1 q-pa-md full-width">
      <QuotationFormInfo
        v-bind="{ ...$props }"
        debit-note
        v-model:pay-type="payType"
        v-model:pay-split-count="paySplitCount"
        v-model:pay-split="paySplit"
        v-model:pay-bill-date="payBillDate"
        v-model:summary-price="summaryPrice"
      />
    </main>
  </q-expansion-item>
</template>
<style scoped>
.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  font-size: 1.5rem;
  padding: var(--size-1);
  border-radius: var(--radius-2);
}

:deep(.price-tag .q-field__control) {
  display: flex;
  align-items: center;
  width: 90px;
  height: 25px;
}

.credit-note-color {
  --_color: var(--indigo-10-hsl);
}

.bg-color {
  color: white;
  background: hsla(var(--_color));
}

.dark .bg-color {
  --_color: var(--orange-6-hsl);
}

.bg-color-light {
  background: hsla(var(--_color) / 0.1);
}

.dark .bg-color-light {
  --_color: var(--orange-6-hsl / 0.2);
}

.price-container > * {
  padding: var(--size-1);
}
</style>