zengzy / hhrcs_web · Files

<script setup lang="ts">
import { ref, shallowRef, onBeforeMount, computed, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { useToast } from 'vuestic-ui'
import netActionPropertysApi from '../../services/netActionPropertys'
import { useGridFilters } from '../../composables/useGridFilters'
import { useOptions } from '../../composables/useOptions'
import {
  ColDef,
  GridReadyEvent,
  FilterChangedEvent,
  ITooltipParams
} from "ag-grid-community"

const rowData = ref<any[] | null>(null)
const { t } = useI18n()
const { init: notify } = useToast()
const { containsFilterParams, dateFilterParams, gridLocaleText, createSelectFilterParams, createSelectByArrayFilterParams } = useGridFilters()
const { loadOptions, getResponseWaitTypeOptions } = useOptions()

const requestMethodOptions = ['GET', 'POST', 'PUT', 'DELETE', 'PATCH']
const waitResponseTypeOptions = computed(() => getResponseWaitTypeOptions())

const columnDefs = shallowRef<ColDef[]>([
  { checkboxSelection: true, headerCheckboxSelection: true, width: 50, pinned: 'left', filter: false, sortable: false },
  { 
    headerName: t('netActionPropertys.table.serialNumber'),
    width: 80,
    filter: false,
    sortable: false,
    valueGetter: (params: any) => (params.node?.rowIndex ?? 0) + 1,
    cellStyle: { textAlign: 'center' }
  },
  { field: 'actionName', headerName: t('netActionPropertys.table.actionName'), width: 150 },
  { field: 'requestMethod', headerName: t('netActionPropertys.table.requestMethod'), 
    width: 100 ,
    filterParams: createSelectByArrayFilterParams(requestMethodOptions),
    valueGetter: (params: any) => {
      const value = params.data?.requestMethod
      const option = requestMethodOptions.find(opt => opt === value)
      return option
    }
  },
  { field: 'requestUrl', headerName: t('netActionPropertys.table.requestUrl'), width: 200 },
  { 
    field: 'waitResponseType', 
    headerName: t('netActionPropertys.form.waitResponseType'), 
    width: 120,
    filterParams: createSelectFilterParams(waitResponseTypeOptions.value),
    valueGetter: (params: any) => {
      const value = params.data?.waitResponseType
      const option = waitResponseTypeOptions.value.find(opt => opt.value === value)
      return option?.text || value
    }
  },
  { field: 'description', headerName: t('netActionPropertys.table.description'), width: 150 },
  { field: 'isActive', headerName: t('netActionPropertys.table.isActive'), width: 80, filterParams: null,
    valueFormatter: (p: any) => p.value ? t('netActionPropertys.options.yes') : t('netActionPropertys.options.no')
  },
  {
    field: 'createdAt',
    headerName: t('netActionPropertys.table.createdAt'),
    minWidth: 150, 
    flex: 1,
    filter: 'agDateColumnFilter',
    filterParams: {
      ...dateFilterParams.value,
      comparator: (filterLocalDateAtMidnight: Date, cellValue: string) => {
        if (!cellValue) return -1
        const cellDate = new Date(cellValue)
        if (cellDate < filterLocalDateAtMidnight) return -1
        if (cellDate > filterLocalDateAtMidnight) return 1
        return 0
      }
    }
  },
  {
    headerName: t('netActionPropertys.table.actions'),
    field: 'actions',
    width: 120,
    pinned: 'right',
    filter: false,
    sortable: false,
    cellRenderer: (p: any) => {
      const editLabel = t('netActionPropertys.actions.edit')
      const deleteLabel = t('netActionPropertys.actions.delete')
      const id = p.data?.netActionId ?? null
      const idLiteral = id !== null ? `'${String(id).replace(/'/g, "\\'")}'` : 'null'
      const containerStyle = 'display:flex; align-items:center; justify-content:center; height:100%;'
      const groupStyle = 'display:inline-flex; border-radius:6px; overflow:hidden;'
      const btnStyle = 'border-radius:0; margin:0; border-right:1px solid rgba(255,255,255,0.06);'
      const btnStyleLast = 'border-radius:0; margin:0;'
      return '<div style="' + containerStyle + '">' +
        '<div style="' + groupStyle + '">' +
        '<button class="va-button va-button--small va-button--primary" style="' + btnStyle + '" onclick="window.onEditNetActionProperty(' + idLiteral + ')" title="' + editLabel + '" aria-label="' + editLabel + '"><i class="material-icons" style="font-size:16px;color:#000000">edit</i></button>' +
        '<button class="va-button va-button--small va-button--primary" style="' + btnStyleLast + '" onclick="window.onDeleteNetActionProperty(' + idLiteral + ')" title="' + deleteLabel + '" aria-label="' + deleteLabel + '"><i class="material-icons" style="font-size:16px;color:#d32f2f">delete</i></button>' +
        '</div></div>'
    }
  }
])

const defaultColDef = ref<ColDef>({
  floatingFilter: true,
  filter: true,
  cellStyle: {
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis'
  },
  filterParams: containsFilterParams.value,
  tooltipValueGetter: (p: ITooltipParams) => p.value
})

const gridApi = ref<any>(null)
const isGridInitialized = ref(false)
const isFetchingData = ref(false)
const paginationRowCount = ref<number | null>(null)
const currentPage = ref(1)
const totalPages = ref(1)
const queryParams = ref({
  pageNumber: 1,
  pageSize: 20,
  filterModel: {} as any
})

function onGridReady(params: GridReadyEvent) {
  gridApi.value = params.api;
  queryParams.value.pageNumber = 1
  queryParams.value.pageSize = 20
  isGridInitialized.value = true
  fetchRowData()
}

const tbLoading = ref(false)
const editModalOpen = ref(false)
const editFormRef = ref<any>({})
const editForm = ref<any>(null)
const confirmModalOpen = ref(false)
const confirmMessage = ref('')
const confirmCallback = ref<(() => void) | null>(null)

const showConfirm = (message: string, callback: () => void) => {
  confirmMessage.value = message
  confirmCallback.value = callback
  confirmModalOpen.value = true
}

const handleConfirm = () => {
  confirmModalOpen.value = false
  if (confirmCallback.value) {
    confirmCallback.value()
  }
}

const ShowLoading = () => {
  tbLoading.value = true
}

const HideLoading = () => {
  tbLoading.value = false
}

const onEdit = async (paramsOrId: any) => {
  try {
    ShowLoading()
    const id = String((paramsOrId && (paramsOrId.netActionId ?? paramsOrId.id)) ?? paramsOrId)
    const res = await netActionPropertysApi.get(id)
    HideLoading()
    const data = (res && (res.Data ?? res.data)) || res || {}
    editFormRef.value = { ...data }
    editModalOpen.value = true
  } catch (err: any) {
    HideLoading()
    notify({ message: err?.message || t('netActionPropertys.messages.operationFailed'), color: 'danger' })
  }
}

const saveEdit = async () => {
  if (editForm.value && !editForm.value.validate()) {
    return
  }
  try {
    ShowLoading()
    const res = await netActionPropertysApi.createOrUpdate(editFormRef.value)
    HideLoading()
    
    if (res?.success === false || res?.Success === false) {
      notify({ message: res.message || res.Message || t('netActionPropertys.messages.updateFailed'), color: 'danger' })
      return
    }
    
    notify({ message: res?.message || res?.Message || t('netActionPropertys.messages.updated'), color: 'success' })
    editModalOpen.value = false
    fetchRowData()
  } catch (err: any) {
    HideLoading()
      notify({ message: err?.message || t('netActionPropertys.messages.operationFailed'), color: 'danger' })
  }
}

const onDelete = async (paramsOrId: any) => {
  const id = String((paramsOrId && (paramsOrId.netActionId ?? paramsOrId.id)) ?? paramsOrId)
  if (!id || id === 'null' || id === 'undefined') {
    notify({ message: t('netActionPropertys.messages.missingId'), color: 'failed' })
    return
  }
  showConfirm(t('netActionPropertys.messages.confirmDelete'), async () => {
    try {
      ShowLoading()
      const res = await netActionPropertysApi.delete(id)
      HideLoading()
      if (res && (res.success === false)) {
        notify({ message: res.message || t('netActionPropertys.messages.deleteFailed'), color: 'failed' })
      } else {
        notify({ message: res?.message || t('netActionPropertys.messages.deleted'), color: 'success' })
        fetchRowData()
      }
    } catch (err: any) {
      HideLoading()
      notify({ message: err?.message || t('netActionPropertys.messages.operationFailed'), color: 'danger' })
    }
  })
}

const bulkDelete = async () => {
  const selected = gridApi.value ? gridApi.value.getSelectedRows() : []
  if (!selected || selected.length === 0) {
    notify({ message: t('netActionPropertys.messages.selectForDelete'), color: 'warning' })
    return
  }
  showConfirm(t('netActionPropertys.messages.confirmBulkDelete', { count: selected.length }), async () => {
    try {
      ShowLoading()
      const results = await Promise.all(selected.map((r: any) => {
        const id = String(r?.netActionId ?? r?.id ?? '')
        return id && id !== 'null' && id !== 'undefined' ? netActionPropertysApi.delete(id) : Promise.resolve(null)
      }))
      HideLoading()
      notify({ message: t('netActionPropertys.messages.deletedCount', { count: results.length }), color: 'success' })
      fetchRowData()
    } catch (err: any) {
      HideLoading()
      notify({ message: err?.message || t('netActionPropertys.messages.bulkDeleteFailed'), color: 'danger' })
    }
  })
}

const addNetActionProperty = () => {
  editFormRef.value = {
    netActionId: null,
    actionName: '',
    isActive: true,
    requestMethod: 'POST',
    requestUrl: '',
    requestParams: '',
    repeatCount: 1,
    intervalTimeMs: 3000,
    waitResponseType: 0,
    responseValidationRule: '',
    description: '',
    extraProperties: ''
  }
  editModalOpen.value = true
}

const onFilterChanged = (params: FilterChangedEvent) => {
  if (!isGridInitialized.value || isFetchingData.value) return
  const filterModel = params.api.getFilterModel()
  if (filterModel.requestMethod) {
    
    const selectedValue = filterModel.requestMethod.type
    // Transform custom option selection (where type is the value) into a standard text equals filter
    if (selectedValue && requestMethodOptions.includes(selectedValue)) {
      filterModel.requestMethod = {
        filterType: 'text',
        type: 'equals',
        filter: selectedValue
      }
    }
  }
  if (filterModel.waitResponseType) {
    const selectedValue = filterModel.waitResponseType.type // AG-Grid 的 type 是选中的 displayKey
    filterModel.waitResponseType = {
      filterType: 'enum',
      type: 'equals',
      filter: parseInt(selectedValue, 10) || selectedValue
    }
  }
  queryParams.value.filterModel = filterModel
  fetchRowData()
}

const onPaginationChange = (page: number) => {
  if (page !== queryParams.value.pageNumber) {
    queryParams.value.pageNumber = page
    fetchRowData()
  }
}

const refreshData = async () => {
  try {
    await fetchRowData()
    notify({ message: t('netActionPropertys.messages.refreshSuccess'), color: 'success' })
  } catch (err: any) {
    notify({ message: err?.message || t('netActionPropertys.messages.refreshFailed'), color: 'danger' })
  }
}

const resetFilters = () => {
  try {
    if (gridApi.value) {
      queryParams.value.filterModel = {}
      gridApi.value.setFilterModel(null)
      fetchRowData()
      notify({ message: t('netActionPropertys.messages.resetSuccess'), color: 'success' })
    }
  } catch (err: any) {
    notify({ message: err?.message || t('netActionPropertys.messages.resetFailed'), color: 'danger' })
  }
}

const fetchRowData = async () => {
  if (isFetchingData.value) return
  try {
    isFetchingData.value = true
    ShowLoading()
    const params = {
      ...queryParams.value,
      filterModel: JSON.stringify(queryParams.value.filterModel || {})
    }
    console.log(params)
    const res = await netActionPropertysApi.list(params)
    HideLoading()
    if (!res.success) {
      notify({ message: res.message, color: 'failed' })
    }
    const data = (res && (res.Data ?? res.data)) || []
    rowData.value = Array.isArray(data) ? data : []
    if (res?.pageInfo) {
      const pageInfo = res.pageInfo
      paginationRowCount.value = pageInfo.totalCount || 0
      totalPages.value = pageInfo.totalPages || 1
      currentPage.value = pageInfo.pageNumber || 1
    }
  } catch (err: any) {
    HideLoading()
    notify({ message: err?.message || t('netActionPropertys.messages.fetchFailed'), color: 'danger' })
  } finally {
    isFetchingData.value = false
  }
}

(window as any).onEditNetActionProperty = onEdit;
(window as any).onDeleteNetActionProperty = onDelete;

onBeforeMount(async () => {
  await loadOptions()
})
</script>

<template>
  <VaCard>
    <VaCardContent>
      <div class="flex flex-col md:flex-row gap-2 mb-2 justify-between">
        <div class="flex items-center gap-2">
          <div role="group" aria-label="net-action-property-actions" style="display:inline-flex; border-radius:6px; overflow:hidden;">
            <VaButton size="small" @click="addNetActionProperty" :title="t('netActionPropertys.actions.add')" :aria-label="t('netActionPropertys.actions.add')" preset="primary" style="border-radius:0; margin:0; border-right:1px solid rgba(255,255,255,0.06)" icon="add" />
            <VaButton size="small" @click="bulkDelete" :title="t('netActionPropertys.actions.delete')" :aria-label="t('netActionPropertys.actions.delete')" preset="primary" style="border-radius:0; margin:0; border-right:1px solid rgba(255,255,255,0.06)" icon="delete" />
            <VaButton size="small" @click="refreshData" :title="t('netActionPropertys.actions.refresh')" :aria-label="t('netActionPropertys.actions.refresh')" preset="primary" style="border-radius:0; margin:0; border-right:1px solid rgba(255,255,255,0.06)" icon="sync" />
            <VaButton size="small" @click="resetFilters" :title="t('netActionPropertys.actions.resetFilters')" :aria-label="t('netActionPropertys.actions.resetFilters')" preset="primary" style="border-radius:0; margin:0;" icon="clear_all" />
          </div>
        </div>
        <div class="flex items-center">
          <VaPagination
            v-model="currentPage"
            class="justify-end map-pagination"
            style="height: 24px; min-height: 24px;"
            :pages="totalPages"
            input
            @update:model-value="onPaginationChange"
          />
        </div>
      </div>

      <div class="table-container">
        <AgGridVue
          style="width: 100%; height: 100%;"
          @grid-ready="onGridReady"
          @filter-changed="onFilterChanged"
          :tooltipShowDelay="ref(500)"
          :columnDefs="columnDefs"
          :loading="tbLoading"
          :localeText="gridLocaleText"
          :defaultColDef="defaultColDef"
          :rowSelection="'multiple'"
          :checkboxSelection="true"
          :headerCheckboxSelection="true"
          :rowData="rowData"></AgGridVue>
      </div>
    </VaCardContent>
  </VaCard>

  <VaModal v-model="confirmModalOpen" size="small" close-button :ok-text="t('vuestic.ok')" :cancel-text="t('vuestic.cancel')" @ok="handleConfirm">
    <h3 class="modal-title">{{ t('common.confirmOperation') }}</h3>
    <p style="margin: 1rem 0;">{{ confirmMessage }}</p>
  </VaModal>

  <VaModal v-model="editModalOpen" size="medium" close-button max-height="calc(100vh - 20px)" :ok-text="t('vuestic.ok')" :cancel-text="t('vuestic.cancel')" @ok="saveEdit" hide-default-actions>
    <template #header>
      <h3 class="modal-title">{{ editFormRef.netActionId ? t('netActionPropertys.form.title.edit') : t('netActionPropertys.form.title.add') }}</h3>
    </template>
    <div class="modal-content-scrollable">
      <VaForm ref="editForm">
        <div class="section">
          <div class="form-row">
            <div class="input-with-required-mark">
              <div class="required-label"><span class="required-star">*</span><span>{{ t('netActionPropertys.form.requestMethod') }}</span></div>
              <VaSelect v-model="editFormRef.requestMethod" :options="requestMethodOptions" />
            </div>
            <div class="input-with-required-mark">
              <div class="required-label"><span class="required-star">*</span><span>{{ t('netActionPropertys.form.actionName') }}</span></div>
              <VaInput v-model="editFormRef.actionName" :rules="[(v: any) => !!v || t('auth.required_field')]" />
            </div>
          </div>
          <div class="form-row">
            <div class="input-with-required-mark">
              <div class="required-label"><span class="required-star">*</span><span>{{ t('netActionPropertys.form.requestUrl') }}</span></div>
              <VaInput v-model="editFormRef.requestUrl" :rules="[(v: any) => !!v || t('auth.required_field')]" />
            </div>
          </div>
          <div class="form-row">
            <VaInput v-model="editFormRef.repeatCount" type="number" :label="t('netActionPropertys.form.repeatCount')" />
            <VaInput v-model="editFormRef.intervalTimeMs" type="number" :label="t('netActionPropertys.form.intervalTimeMs')" />
          </div>
          <div class="form-row">
             <VaSelect v-model="editFormRef.waitResponseType" :label="t('netActionPropertys.form.waitResponseType')" :options="waitResponseTypeOptions" text-by="text" value-by="value" />
             <VaSwitch v-model="editFormRef.isActive" :label="t('netActionPropertys.form.isActive')" style="margin-top: 1rem;" />
          </div>
          <div class="form-row">
            <VaTextarea v-model="editFormRef.requestParams" :label="t('netActionPropertys.form.requestParams')" :min-rows="3" class="form-textarea" />
          </div>
          <div class="form-row">
            <VaTextarea v-model="editFormRef.responseValidationRule" :label="t('netActionPropertys.form.responseValidationRule')" :min-rows="2" class="form-textarea" />
          </div>
          <div class="form-row">
            <VaTextarea v-model="editFormRef.description" :label="t('netActionPropertys.form.description')" :min-rows="2" class="form-textarea" />
          </div>
          <div class="form-row">
            <VaTextarea v-model="editFormRef.extraProperties" :label="t('netActionPropertys.form.extraProperties')" :min-rows="2" class="form-textarea" />
          </div>
        </div>
      </VaForm>
    </div>
    <template #footer>
      <VaButton preset="secondary" @click="editModalOpen = false">{{ t('vuestic.cancel') }}</VaButton>
      <VaButton @click="saveEdit">{{ t('vuestic.ok') }}</VaButton>
    </template>
  </VaModal>
</template>

<style scoped>
.modal-content-scrollable {
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  padding: 1rem;
}

.table-container {
  height: calc(100vh - 200px);
  min-height: 400px;
}

.form-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.form-row > * {
  flex: 1;
}

.input-with-required-mark {
  display: flex;
  flex-direction: column;
}

.required-label {
  display: flex;
  align-items: center;
  margin-bottom: 0.25rem;
  font-size: 0.8rem; /* Match VaInput label size roughly */
  font-weight: 700;
  color: #000000; 
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.required-star {
  color: var(--va-danger);
  margin-right: 0.25rem;
}

.form-textarea {
  width: 100%;
}
</style>