fix bug and added options

2026-07-12 18:30:09 +03:30
parent fad305cd29
commit e0e3ec94f3
4 changed files with 228 additions and 3 deletions
@@ -0,0 +1,140 @@
+<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>