boursecu_admin/src/pages/menuPages/configuration/index.vue

<template>
  <div class="h-full min-h-0">
    <BasicShowContent title="تنظیمات" class="h-full">
      <div class="settings-toolbar">
        <a-input
          v-model:value="search"
          allow-clear
          placeholder="جستجو کلید یا عنوان..."
          class="settings-toolbar__search"
        >
          <template #prefix>
            <BaseIcon icon="vuesax-linear:search-normal-1" size="16" class="text-gray-400" />
          </template>
        </a-input>

        <div class="settings-toolbar__filters">
          <label class="settings-filter-field">
            <span class="settings-filter-field__label">وضعیت</span>
            <a-select
              v-model:value="filterActive"
              allow-clear
              placeholder="همه"
              class="settings-filter-field__control"
              :options="statusFilterOptions"
            />
          </label>
          <label class="settings-filter-field">
            <span class="settings-filter-field__label">نوع فیلد</span>
            <a-select
              v-model:value="filterType"
              allow-clear
              placeholder="همه"
              class="settings-filter-field__control"
              :options="typeSelectOptions"
            />
          </label>
        </div>

<!--        <a-button type="primary" :loading="loading" @click="add">افزودن تنظیم</a-button>-->
        <a-button class="settings-toolbar__action" :loading="loading" @click="initConfig">
          بروزرسانی
        </a-button>
      </div>

      <a-spin :spinning="loading && !baseData.length">
        <template v-if="switchRows.length">
          <div class="settings-section-title">روشن / خاموش</div>
          <a-row :gutter="[16, 16]" class="settings-grid">
            <a-col
              v-for="row in switchRows"
              :key="row.id"
              :xs="24"
              :sm="12"
              :lg="8"
            >
              <SettingCard
                :row="row"
                :model-value="draftValue(row)"
                :readonly="isReadonly(row)"
                :saving="isSaving(row.id)"
                :saved-flash="isSavedFlash(row.id)"
                @update:value="onValueChange(row, $event)"
                @update:is-active="onActiveChange(row, $event)"
              />
            </a-col>
          </a-row>
        </template>

        <SupportMessengerSettings
          v-if="supportMessengerBundle"
          :messenger-row="supportMessengerBundle.messenger"
          :id-row="supportMessengerBundle.id"
          :text-row="supportMessengerBundle.text"
          :draft-value="draftValue"
          :is-saving="isSaving"
          :is-saved-flash="isSavedFlash"
          @update:value="onValueChange"
          @update:is-active="onActiveChange"
        />

        <template v-if="otherRows.length">
          <div class="settings-section-title settings-section-title--spaced">سایر تنظیمات</div>
          <a-row :gutter="[16, 16]" class="settings-grid">
            <a-col
              v-for="row in otherRows"
              :key="row.id"
              :xs="24"
              :sm="12"
              :lg="rowColSpan(row)"
            >
              <SettingCard
                :row="row"
                :model-value="draftValue(row)"
                :readonly="isReadonly(row)"
                :saving="isSaving(row.id)"
                :saved-flash="isSavedFlash(row.id)"
                @update:value="onValueChange(row, $event)"
                @update:is-active="onActiveChange(row, $event)"
              />
            </a-col>
          </a-row>
        </template>

        <a-empty
          v-if="!loading && !switchRows.length && !supportMessengerBundle && !otherRows.length"
          description="تنظیمی یافت نشد"
          class="mt-8"
        />
      </a-spin>
    </BasicShowContent>

    <BasicModal
      v-model:visible="addConfigVisible"
      title="افزودن تنظیم"
      :width="modalWidth"
      @close="addConfigVisible = false"
      @ok="ok"
      :loading="loading"
    >
      <a-form ref="formRef" :model="form" layout="vertical" autocomplete="off">
        <a-form-item label="عنوان فارسی" name="title_fa">
          <a-input v-model:value="form.title_fa" placeholder="عنوان در پنل" />
        </a-form-item>

        <a-form-item label="کلید (key)" name="key" :rules="[inputRules()]">
          <a-input v-model:value="form.key" placeholder="مثلاً price_provider" />
        </a-form-item>

        <a-form-item label="نوع فیلد" name="type">
          <a-select v-model:value="form.type" placeholder="نوع ورودی">
            <a-select-option v-for="t in settingTypeOptions" :key="t.key" :value="t.key">
              {{ t.value }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item
          v-if="form.type === 'select'"
          label="گزینه‌ها (با کاما)"
          name="selectOptions"
        >
          <a-input
            v-model:value="selectOptionsDraft"
            placeholder="montzar,zaarbox,main_product"
          />
        </a-form-item>

        <a-form-item name="is_active">
          <a-checkbox v-model:checked="form.is_active">فعال در سیستم</a-checkbox>
        </a-form-item>

        <a-form-item name="value" :label="valueLabel" :extra="valueHelp">
          <SettingValueField
            v-model:value="form.value"
            :setting-key="form.key"
            :setting-type="effectiveType"
            :description="form.description"
            :rows="effectiveType === 'longtext' ? 12 : 6"
          />
        </a-form-item>

        <a-form-item label="توضیحات / راهنما" name="description">
          <a-textarea
            v-model:value="form.description"
            :rows="2"
            placeholder="برای select: گزینه‌ها با کاما — montzar,zaarbox"
          />
        </a-form-item>
      </a-form>
    </BasicModal>
  </div>
</template>

<script setup lang="ts">
import { debounce } from 'lodash'
import BasicShowContent from '@/components/BasicShowContext.vue'
import BasicModal from '@/components/BasicModal.vue'
import { inputRules } from '@/utils/inputRules'
import type { FormInstance } from 'ant-design-vue'
import { message } from 'ant-design-vue'
import type { Const } from '@/model/configuration'
import { loading } from '@/utils'
import { getConfiguration, setConfiguration } from '@/api/configuration'
import SettingValueField from './SettingValueField.vue'
import SettingCard from './SettingCard.vue'
import SupportMessengerSettings from './SupportMessengerSettings.vue'
import {
  SETTING_TYPE_OPTIONS,
  formatValueForSave,
  helpText,
  resolveSettingFieldType,
  SUPPORT_MESSENGER_KEYS
} from './settingTypes'

const supportMessengerKeySet = new Set<string>(SUPPORT_MESSENGER_KEYS)

const settingTypeOptions = SETTING_TYPE_OPTIONS

const statusFilterOptions = [
  { value: 'active', label: 'فعال' },
  { value: 'inactive', label: 'غیرفعال' }
]

const typeSelectOptions = SETTING_TYPE_OPTIONS.map((t) => ({
  value: t.key,
  label: t.value
}))

const baseData = ref<Array<Const>>([])
const drafts = ref<Record<number, string>>({})
const addConfigVisible = ref(false)
const search = ref('')
const filterType = ref<string | undefined>()
const filterActive = ref<string | undefined>()

function isRowActive(row: Const): boolean {
  return row.is_active !== false && row.is_active !== 0
}

const savingIds = ref<Set<number>>(new Set())
const savedFlashIds = ref<Set<number>>(new Set())
const saveTimers = new Map<number, ReturnType<typeof setTimeout>>()
const debouncedSave = new Map<number, ReturnType<typeof debounce>>()

const form = ref<Const>({
  key: '',
  value: '',
  title_fa: '',
  description: '',
  type: 'text',
  is_active: true,
  can_edit: 1
})
const formRef = ref<FormInstance>()
const selectOptionsDraft = ref('')

const effectiveType = computed(() =>
  resolveSettingFieldType({ key: form.value.key, type: form.value.type })
)

const modalWidth = computed(() =>
  effectiveType.value === 'longtext' ? '720px' : '520px'
)

const valueLabel = computed(() => form.value.title_fa || form.value.key || 'مقدار')
const valueHelp = computed(() => helpText(form.value))

function sortRows(rows: Const[]): Const[] {
  return [...rows].sort((a, b) => {
    const ta = (a.title_fa || a.key || '').localeCompare(b.title_fa || b.key || '', 'fa')
    return ta
  })
}

function isEditable(row: Const): boolean {
  return row.can_edit !== 0 && row.can_edit !== false
}

function matchesFilter(row: Const): boolean {
  const q = search.value.trim().toLowerCase()
  if (filterActive.value === 'active' && !isRowActive(row)) return false
  if (filterActive.value === 'inactive' && isRowActive(row)) return false
  if (filterType.value) {
    const t = resolveSettingFieldType(row)
    if (t !== filterType.value) return false
  }
  if (!q) return true
  return (
    (row.key || '').toLowerCase().includes(q) ||
    (row.title_fa || '').toLowerCase().includes(q) ||
    (row.value || '').toLowerCase().includes(q) ||
    (drafts.value[row.id!] || '').toLowerCase().includes(q)
  )
}

const filteredRows = computed(() =>
  sortRows(
    (baseData.value || []).filter(
      (row) => row.id != null && isEditable(row) && matchesFilter(row)
    )
  )
)

const switchRows = computed(() =>
  filteredRows.value.filter((row) => resolveSettingFieldType(row) === 'switch')
)

const otherRows = computed(() =>
  filteredRows.value.filter(
    (row) =>
      resolveSettingFieldType(row) !== 'switch' &&
      !supportMessengerKeySet.has(row.key ?? '')
  )
)

const supportMessengerBundle = computed(() => {
  const rows = filteredRows.value.filter((row) => supportMessengerKeySet.has(row.key ?? ''))
  if (!rows.length) return null
  const byKey = Object.fromEntries(rows.map((row) => [row.key, row]))
  return {
    messenger: byKey.support_messenger as Const | undefined,
    id: byKey.support_messenger_id as Const | undefined,
    text: byKey.support_messenger_text as Const | undefined
  }
})

function rowColSpan(row: Const): number {
  return resolveSettingFieldType(row) === 'longtext' ? 24 : 8
}

function isReadonly(row: Const): boolean {
  return row.can_edit === 0 || row.can_edit === false
}

function draftValue(row: Const): string {
  const id = row.id!
  if (drafts.value[id] !== undefined) return drafts.value[id]
  return row.value ?? ''
}

function isSaving(id?: number): boolean {
  return id != null && savingIds.value.has(id)
}

function isSavedFlash(id?: number): boolean {
  return id != null && savedFlashIds.value.has(id) && !savingIds.value.has(id)
}

function syncDraftsFromBase() {
  const next: Record<number, string> = {}
  for (const row of baseData.value || []) {
    if (row.id != null) next[row.id] = row.value ?? ''
  }
  drafts.value = next
}

onMounted(() => {
  initConfig()
})

async function initConfig() {
  try {
    loading.value = true
    baseData.value = (await getConfiguration()) ?? []
    syncDraftsFromBase()
  } catch (e) {
    console.error(e)
    message.error('بارگذاری تنظیمات ناموفق بود')
  } finally {
    loading.value = false
  }
}

function onValueChange(row: Const, value: string) {
  if (row.id == null || isReadonly(row)) return
  drafts.value[row.id] = value
  scheduleSave(row)
}

async function onActiveChange(row: Const, isActive: boolean) {
  if (row.id == null) return
  if (isRowActive(row) === isActive) return
  await persistRow(row, { isActive })
}

function scheduleSave(row: Const) {
  const id = row.id!
  if (!debouncedSave.has(id)) {
    debouncedSave.set(
      id,
      debounce(() => persistRowValue(id), resolveSettingFieldType(row) === 'switch' ? 200 : 600)
    )
  }
  debouncedSave.get(id)!()
}

async function persistRowValue(id: number) {
  const row = baseData.value.find((x) => x.id === id)
  if (!row || isReadonly(row)) return
  await saveSettingRow(row)
}

async function persistRow(row: Const, overrides?: { isActive?: boolean }) {
  await saveSettingRow(row, overrides)
}

async function saveSettingRow(row: Const, overrides?: { isActive?: boolean }) {
  if (row.id == null) return
  const id = row.id

  const type = resolveSettingFieldType(row)
  const raw = drafts.value[id] ?? row.value ?? ''
  const value = formatValueForSave(raw, type)
  const isActive =
    overrides?.isActive !== undefined ? overrides.isActive : isRowActive(row)

  if (overrides?.isActive === undefined && value === (row.value ?? '')) return

  savingIds.value.add(id)
  savedFlashIds.value.delete(id)

  try {
    await setConfiguration({
      id: row.id,
      key: row.key,
      value,
      description: row.description ?? '',
      is_active: isActive,
      title_fa: row.title_fa ?? '',
      type
    })
    row.value = value
    row.is_active = isActive
    drafts.value[id] = value
    savedFlashIds.value.add(id)
    if (saveTimers.has(id)) clearTimeout(saveTimers.get(id))
    saveTimers.set(
      id,
      setTimeout(() => {
        savedFlashIds.value.delete(id)
        savedFlashIds.value = new Set(savedFlashIds.value)
      }, 2000)
    )
  } catch (e) {
    console.error(e)
    drafts.value[id] = row.value ?? ''
    message.error(`ذخیره «${row.title_fa || row.key}» ناموفق بود`)
  } finally {
    savingIds.value.delete(id)
    savingIds.value = new Set(savingIds.value)
  }
}

async function add() {
  form.value = {
    key: '',
    value: '',
    title_fa: '',
    description: '',
    type: 'text',
    is_active: true,
    can_edit: 1
  }
  selectOptionsDraft.value = ''
  formRef.value?.resetFields()
  addConfigVisible.value = true
}

async function ok() {
  const type = effectiveType.value
  let description = form.value.description ?? ''
  if (type === 'select' && selectOptionsDraft.value.trim()) {
    description = selectOptionsDraft.value.trim()
  }

  const payload = {
    key: form.value.key,
    value: formatValueForSave(form.value.value ?? '', type),
    description,
    is_active: form.value.is_active,
    title_fa: form.value.title_fa ?? '',
    type
  }

  try {
    await formRef.value?.validateFields()
    loading.value = true
    await setConfiguration(payload)
    message.success('تنظیم جدید اضافه شد')
    addConfigVisible.value = false
    await initConfig()
  } catch (e) {
    console.error(e)
  } finally {
    loading.value = false
  }
}
</script>

<style lang="less" scoped>
.settings-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 20px;
  padding: 14px 16px;
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 8px;

  &__search {
    flex: 1;
    min-width: 200px;
    max-width: 320px;
  }

  &__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
  }

  &__action {
    margin-inline-start: auto;
  }
}

.settings-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 148px;
  margin: 0;

  &__label {
    font-size: 12px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.55);
    line-height: 1;
  }

  &__control {
    width: 148px;
  }
}

.settings-section-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.55);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f0f0f0;

  &--spaced {
    margin-top: 28px;
  }
}

.settings-grid {
  margin-bottom: 8px;
}

:deep(.ant-form-item-extra) {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
}
</style>