raven-client/ayanova/src/views/ops-notify-queue.vue

<template>
  <v-row v-if="formState.ready">
    <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
    <v-col cols="12">
      <v-btn class="mb-6" @click="getDataFromApi">
        <v-icon>$ayiSync</v-icon>
      </v-btn>
      <v-data-table
        :headers="headers"
        :items="obj"
        class="elevation-1"
        :disable-pagination="true"
        :disable-filtering="true"
        hide-default-footer
        :header-props="{ sortByText: $ay.t('Sort') }"
        data-cy="notifyQueueTable"
        :no-data-text="$ay.t('NoData')"
      >
        <template v-slot:[`item.actions`]="{ item }">
          <v-icon small class="mr-2" @click="deleteItem(item)">
            $ayiTrashAlt
          </v-icon>
        </template></v-data-table
      >
    </v-col>
  </v-row>
</template>
<script>
const FORM_KEY = "ops-notify-queue";
export default {
  data() {
    return {
      obj: [],
      rawObj: [],
      headers: [],
      formState: {
        ready: false,
        loading: true,
        errorBoxMessage: null,
        appError: null,
        serverError: {}
      },
      rights: window.$gz.role.defaultRightsObject(),
      timeZoneName: window.$gz.locale.getResolvedTimeZoneName(),
      languageName: window.$gz.locale.getResolvedLanguage(),
      hour12: window.$gz.locale.getHour12()
    };
  },
  async created() {
    const vm = this;
    try {
      await initForm(vm);
      vm.rights = window.$gz.role.getRights(
        window.$gz.type.OpsNotificationSettings
      );
      vm.formState.readOnly = !vm.rights.change;
      vm.formState.ready = true;
      window.$gz.eventBus.$on("menu-click", clickHandler);
      await vm.getDataFromApi();
      vm.formState.loading = false;
    } catch (err) {
      vm.formState.ready = true;
      window.$gz.errorHandler.handleFormError(err, vm);
    }
  },
  beforeDestroy() {
    window.$gz.eventBus.$off("menu-click", clickHandler);
  },
  methods: {
    async deleteItem(item) {
      const vm = this;
      try {
        const dialogResult = await window.$gz.dialog.confirmDelete();
        if (dialogResult != true) {
          return;
        }
        vm.formState.loading = true;
        window.$gz.form.deleteAllErrorBoxErrors(vm);
        const res = await window.$gz.api.remove(
          `notify/notify-event/${item.id}`
        );
        if (res.error) {
          vm.formState.serverError = res.error;
          window.$gz.form.setErrorBoxErrors(vm);
        } else {
          await vm.getDataFromApi();
        }
      } catch (ex) {
        window.$gz.errorHandler.handleFormError(ex, vm);
      } finally {
        vm.formState.loading = false;
      }
    },
    async getDataFromApi() {
      const vm = this;
      vm.formState.loading = true;
      window.$gz.form.deleteAllErrorBoxErrors(vm);
      try {
        const res = await window.$gz.api.get("notify/queue");
        if (res.error) {
          if (res.error.code == "2010") {
            window.$gz.form.handleObjectNotFound(vm);
          }
          vm.formState.serverError = res.error;
          window.$gz.form.setErrorBoxErrors(vm);
        } else {
          if (res.data) {
            vm.rawObj = res.data;
            const ret = [];
            for (let i = 0; i < res.data.length; i++) {
              const o = res.data[i];
              ret.push({
                id: o.id,
                created: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
                  o.created,
                  this.timeZoneName,
                  this.languageName,
                  this.hour12
                ),
                eventDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
                  o.eventDate,
                  this.timeZoneName,
                  this.languageName,
                  this.hour12
                ),
                deliverAfter: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
                  o.deliverAfter,
                  this.timeZoneName,
                  this.languageName,
                  this.hour12
                ),
                eventType: window.$gz.enums.get("NotifyEventType", o.eventType),
                ayaType: window.$gz.enums.get("coreall", o.ayaType),
                name: o.name,
                userId: o.userId,
                user: o.user
              });
            }
            vm.obj = ret;
          } else {
            vm.rawObj = [];
            vm.obj = [];
          }
          window.$gz.form.setFormState({
            vm: vm,
            dirty: false,
            valid: true,
            loading: false
          });
          generateMenu(vm);
        }
      } catch (error) {
        window.$gz.form.setFormState({
          vm: vm,
          loading: false
        });
        window.$gz.errorHandler.handleFormError(error, vm);
      }
    }
  }
};

//////////////////////
//
//
function generateMenu(vm) {
  const menuOptions = {
    isMain: true,
    readOnly: vm.formState.readOnly,
    icon: "$ayiBullhorn",
    title: "NotifyQueue",
    helpUrl: "ops-notify-queue",
    formData: {
      ayaType: window.$gz.type.ServerJob
    },
    menuItems: []
  };

  window.$gz.eventBus.$emit("menu-change", menuOptions);
}

/////////////////////////////
//
//
function clickHandler(menuItem) {
  if (!menuItem) {
    return;
  }
  const m = window.$gz.menu.parseMenuItem(menuItem);
  if (m.owner == FORM_KEY && !m.disabled) {
    switch (m.key) {
      default:
        window.$gz.eventBus.$emit(
          "notify-warning",
          FORM_KEY + "::context click: [" + m.key + "]"
        );
    }
  }
}

/////////////////////////////////
//
//
async function initForm(vm) {
  await fetchTranslatedText();
  await cacheEnums(vm);
  await createTableHeaders(vm);
}

//////////////////////////////////////////////////////////
//
// Ensures UI translated text is available
//
async function fetchTranslatedText() {
  await window.$gz.translation.cacheTranslations([
    "NotifyEventType",
    "EventCreated",
    "AyaType",
    "Name",
    "User",
    "DeliverAfter",
    "NotifyQueue"
  ]);
}

//////////////////////
//
//
async function cacheEnums() {
  await window.$gz.enums.fetchEnumList("NotifyEventType");
  await window.$gz.enums.fetchEnumList("coreall");
}

//////////////////////
//
//
async function createTableHeaders(vm) {
  vm.headers = [
    {
      text: vm.$ay.t("EventCreated"),
      align: "start",
      value: "created"
    },
    { text: vm.$ay.t("DeliverAfter"), value: "deliverAfter" },
    { text: vm.$ay.t("NotifyEventType"), value: "eventType" },
    { text: vm.$ay.t("AyaType"), value: "ayaType" },
    { text: vm.$ay.t("Name"), value: "name" },
    { text: vm.$ay.t("User"), value: "user" },
    { text: "", value: "actions", sortable: false }
  ];
}
</script>