141 lines
3.3 KiB
Vue
141 lines
3.3 KiB
Vue
<template>
|
||
<div class="support-messengers-field">
|
||
<div
|
||
v-for="(row, index) in rows"
|
||
:key="index"
|
||
class="support-messengers-field__row"
|
||
>
|
||
<a-select
|
||
:value="row.messenger || undefined"
|
||
:disabled="disabled"
|
||
allow-clear
|
||
placeholder="پیامرسان"
|
||
class="support-messengers-field__type"
|
||
@update:value="(val) => updateRow(index, { messenger: String(val ?? '') })"
|
||
>
|
||
<a-select-option v-for="opt in messengerOptions" :key="opt.key" :value="opt.key">
|
||
{{ opt.value }}
|
||
</a-select-option>
|
||
</a-select>
|
||
|
||
<a-input
|
||
:value="row.id"
|
||
:disabled="disabled"
|
||
allow-clear
|
||
class="support-messengers-field__id"
|
||
:placeholder="supportMessengerIdPlaceholder(row.messenger)"
|
||
@update:value="(val) => updateRow(index, { id: String(val ?? '') })"
|
||
/>
|
||
|
||
<a-button
|
||
type="text"
|
||
danger
|
||
:disabled="disabled || rows.length <= 1"
|
||
aria-label="حذف"
|
||
@click="removeRow(index)"
|
||
>
|
||
حذف
|
||
</a-button>
|
||
</div>
|
||
|
||
<a-button
|
||
type="dashed"
|
||
block
|
||
:disabled="disabled"
|
||
class="support-messengers-field__add"
|
||
@click="addRow"
|
||
>
|
||
افزودن پیامرسان
|
||
</a-button>
|
||
|
||
<p v-if="rows.length === 0" class="support-messengers-field__hint">
|
||
حداقل یک پیامرسان با شناسه معتبر اضافه کنید.
|
||
</p>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed } from 'vue'
|
||
import {
|
||
formatSupportMessengers,
|
||
parseSelectOptions,
|
||
parseSupportMessengers,
|
||
supportMessengerIdPlaceholder,
|
||
type SupportMessengerEntryDraft,
|
||
} from './settingTypes'
|
||
|
||
const props = withDefaults(
|
||
defineProps<{
|
||
modelValue: string
|
||
disabled?: boolean
|
||
}>(),
|
||
{ disabled: false },
|
||
)
|
||
|
||
const emit = defineEmits<{ 'update:value': [value: string] }>()
|
||
|
||
const messengerOptions = computed(() =>
|
||
parseSelectOptions({
|
||
key: 'support_messenger',
|
||
description: 'bale,telegram,whatsapp,rubika,eitaa,soroush',
|
||
type: 'select',
|
||
}),
|
||
)
|
||
|
||
const rows = computed<SupportMessengerEntryDraft[]>({
|
||
get() {
|
||
const parsed = parseSupportMessengers(props.modelValue)
|
||
if (parsed.length > 0) return parsed
|
||
return [{ messenger: 'bale', id: '' }]
|
||
},
|
||
set(nextRows) {
|
||
emit('update:value', formatSupportMessengers(nextRows))
|
||
},
|
||
})
|
||
|
||
function commit(nextRows: SupportMessengerEntryDraft[]) {
|
||
emit('update:value', formatSupportMessengers(nextRows))
|
||
}
|
||
|
||
function updateRow(index: number, patch: Partial<SupportMessengerEntryDraft>) {
|
||
const next = rows.value.map((row, i) => (i === index ? { ...row, ...patch } : row))
|
||
commit(next)
|
||
}
|
||
|
||
function addRow() {
|
||
commit([...rows.value, { messenger: 'bale', id: '' }])
|
||
}
|
||
|
||
function removeRow(index: number) {
|
||
const next = rows.value.filter((_, i) => i !== index)
|
||
commit(next.length > 0 ? next : [{ messenger: 'bale', id: '' }])
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.support-messengers-field {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.support-messengers-field__row {
|
||
display: grid;
|
||
grid-template-columns: minmax(120px, 160px) 1fr auto;
|
||
gap: 8px;
|
||
align-items: center;
|
||
}
|
||
|
||
.support-messengers-field__hint {
|
||
margin: 0;
|
||
font-size: 12px;
|
||
color: #6b7280;
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.support-messengers-field__row {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|