124 lines
3.9 KiB
Vue
124 lines
3.9 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import { RupiahInput } from '@/components/form/rupiah-input';
|
|
import {
|
|
Field,
|
|
FieldError,
|
|
FieldLabel,
|
|
} from '@/components/ui/field';
|
|
import { Input } from '@/components/ui/input';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select';
|
|
import type { MarketplaceFeeRule } from '@/types/setting';
|
|
|
|
const props = defineProps<{
|
|
id: string;
|
|
label: string;
|
|
modelValue: MarketplaceFeeRule;
|
|
errors?: string[];
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(event: 'update:modelValue', value: MarketplaceFeeRule): void;
|
|
}>();
|
|
|
|
const isPercent = computed(() => props.modelValue.value_type === 'percent');
|
|
|
|
function update(partial: Partial<MarketplaceFeeRule>) {
|
|
emit('update:modelValue', {
|
|
...props.modelValue,
|
|
...partial,
|
|
});
|
|
}
|
|
|
|
function updateValue(value: string | number) {
|
|
update({
|
|
value: props.modelValue.value_type === 'flat'
|
|
? Number(value) || 0
|
|
: Number(value),
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Field class="sm:col-span-2">
|
|
<FieldLabel :for="`${id}-value`">{{ label }}</FieldLabel>
|
|
|
|
<div class="grid gap-3 sm:grid-cols-3">
|
|
<Field>
|
|
<FieldLabel :for="`${id}-scope`" class="text-xs text-muted-foreground">
|
|
Dasar
|
|
</FieldLabel>
|
|
<Select
|
|
:model-value="modelValue.scope"
|
|
@update:model-value="update({ scope: $event as MarketplaceFeeRule['scope'] })"
|
|
>
|
|
<SelectTrigger :id="`${id}-scope`">
|
|
<SelectValue placeholder="Pilih dasar" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="transaction">
|
|
Per Transaksi
|
|
</SelectItem>
|
|
<SelectItem value="product">
|
|
Per Produk
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel :for="`${id}-value-type`" class="text-xs text-muted-foreground">
|
|
Tipe
|
|
</FieldLabel>
|
|
<Select
|
|
:model-value="modelValue.value_type"
|
|
@update:model-value="update({ value_type: $event as MarketplaceFeeRule['value_type'] })"
|
|
>
|
|
<SelectTrigger :id="`${id}-value-type`">
|
|
<SelectValue placeholder="Pilih tipe" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="percent">
|
|
Persentase (%)
|
|
</SelectItem>
|
|
<SelectItem value="flat">
|
|
Flat (Rp)
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel :for="`${id}-value`" class="text-xs text-muted-foreground">
|
|
Nilai
|
|
</FieldLabel>
|
|
<RupiahInput
|
|
v-if="!isPercent"
|
|
:id="`${id}-value`"
|
|
:model-value="modelValue.value"
|
|
placeholder="0"
|
|
@update:model-value="updateValue"
|
|
/>
|
|
<Input
|
|
v-else
|
|
:id="`${id}-value`"
|
|
:model-value="modelValue.value"
|
|
type="number"
|
|
step="0.01"
|
|
min="0"
|
|
max="100"
|
|
@update:model-value="updateValue"
|
|
/>
|
|
</Field>
|
|
</div>
|
|
|
|
<FieldError :errors="errors" />
|
|
</Field>
|
|
</template>
|