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

<template>
  <div class="flex h-full w-full">
    <tbl
      ref="tableRef"
      class="h-full w-full"
      @add="openAdd"
      @edit="openEdit"
      @toggle="toggleActive"
      @delete="deleteItem"
    />

    <BasicActionSheet
      v-model:visible="editorVisible"
      :title="sheetTitle"
      modal-width="80rem"
      drawer-height="80vh"
      :loading="loading"
      :show-button="true"
      :show-cancel="true"
      :show-ok="true"
      ok-text="ذخیره"
      cancel-text="انصراف"
      @ok="submitForm"
      @close="closeEditor"
      @cancel="closeEditor"
    >
      <div v-if="isMobile" class="mb-3 text-base font-bold">{{ sheetTitle }}</div>
      <AutomationEditorFormBody ref="editorRef" :form="form" />
    </BasicActionSheet>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { message } from 'ant-design-vue'
import { cloneDeep } from 'lodash'
import tbl from './components/table.vue'
import AutomationEditorFormBody from './components/AutomationEditorFormBody.vue'
import { emptyAutomation, type Automation } from '@/model/automations'
import {
  createAutomation,
  deleteAutomation,
  toggleAutomationActive,
  updateAutomation,
} from '@/api/automations'
import { confirmDeleteItem } from '@/utils/confirmModal'
import { isMobile } from '@core/utils/is'

const tableRef = ref<null | { fetch: () => void }>(null)
const editorRef = ref<{
  validateFields?: () => Promise<unknown>
  resetFields?: () => void
}>()

const loading = ref(false)
const editorVisible = ref(false)
const editId = ref<number | undefined>()
const form = ref<Automation>(emptyAutomation())

const sheetTitle = computed(() => (editId.value ? 'ویرایش اتوماسیون' : 'افزودن اتوماسیون'))

function refreshTable() {
  tableRef.value?.fetch()
}

function closeEditor() {
  editorVisible.value = false
}

function openAdd() {
  editId.value = undefined
  form.value = emptyAutomation()
  editorRef.value?.resetFields?.()
  editorVisible.value = true
}

function openEdit(record: Automation) {
  editId.value = record.id
  const conditions = record.conditions || []
  form.value = cloneDeep({
    ...emptyAutomation(),
    ...record,
    audience_mode: conditions.length ? 'filter' : 'all',
    trigger_config: {
      delay_hours: 0,
      every_days: 1,
      direction: 'both',
      price_window: 'calendar_day',
      ...(record.trigger_config || {}),
    },
    conditions,
    channels: record.channels || [],
  })
  editorVisible.value = true
}

async function submitForm() {
  try {
    await editorRef.value?.validateFields?.()
    loading.value = true
    const payload = cloneDeep(form.value)
    if (editId.value) {
      await updateAutomation(editId.value, payload)
    } else {
      await createAutomation(payload)
    }
    message.success('اتوماسیون ذخیره شد')
    editorVisible.value = false
    refreshTable()
  } catch (e) {
    console.error(e)
  } finally {
    loading.value = false
  }
}

async function toggleActive(record: Automation) {
  if (!record.id) return
  try {
    await toggleAutomationActive(record.id)
    message.success(record.is_active ? 'غیرفعال شد' : 'فعال شد')
    refreshTable()
  } catch (e) {
    console.error(e)
    message.error('تغییر وضعیت انجام نشد')
  }
}

function deleteItem(id: number) {
  confirmDeleteItem('اتوماسیون', id, deleteAutomation, refreshTable)
}
</script>