test

test.vue

<script lang="ts" setup>
  import { AliasListResponse, IAlias } from '@/interfaces/IAlias';
  import { t } from '@/plugins/i18n';
  import { ListAliasRequest } from '@/request/alias/request';
  import { AliasStore } from '@/stores/alias-store';
  import { ref } from 'vue';

  const route = useRoute();
  const aliasStore = AliasStore();
  const params = ref<{ nodeId: string }>(route.params as { nodeId: string });
  const listAliasResponse = computed(() => aliasStore.ListAliasResponse as AliasListResponse);
  const listAliasRequest = ref({} as ListAliasRequest);
  const datasTable = computed(() => listAliasResponse.value.data as IAlias[]);
  const listFilter = computed(() => {
    return listAliasRequest.value;
  });
  const modelFilter = ref();

  const settings = reactive({
    title: t('locale.list_alias'),
    loading: false,
    keyDelete: 'name',
  });

  const tHeaders = reactive([
    {
      key: 'id',
      title: 'ID',
    },
    {
      key: 'name',
      title: 'Name',
    },
    {
      key: 'type',
      title: computed(() => t('locale.type')),
    },
    {
      key: 'descr',
      title: computed(() => t('locale.description')),
    },
    {
      key: 'data',
      title: 'Data',
    },
    {
      key: 'action',
      title: computed(() => t('locale.action')),
    },
  ]);

  watch(
    () => modelFilter.value,
    async (item: string) => {
      settings.loading = true;
      listAliasResponse.value.filter.search_type = item || '';
      // call api get rules
      await aliasStore.ListAlias({} as ListAliasRequest);
      settings.loading = false;
    },
  );

  async function withLoading(callback: () => Promise<void>) {
    settings.loading = true;
    try {
      await callback();
    } finally {
      settings.loading = false;
    }
  }

  onMounted(async () => {
    await withLoading(async () => {
      if (params.value.nodeId === '') {
        return;
      }
      await aliasStore.ListAlias(listAliasRequest.value);
      console.log(datasTable.value);
    });
  });
</script>

<template>
  <div class="mng-fw-rules">
    <ITableServerCustom :header="tHeaders" :items="listAliasResponse.data" :settings="settings">
      <template #append-filter>
        <IFormElm
          label="Filter"
          form-type="select"
          :items="listFilter"
          min-width="200"
          item-value="name"
          v-model="modelFilter" />
      </template>
    </ITableServerCustom>
  </div>
</template>