raven-client/ayanova/src/views/ay-history.vue

<template>
  <v-row row v-if="this.formState.ready">
    <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
    <v-col rows="12">
      <v-timeline :dense="$vuetify.breakpoint.smAndDown">
        <v-timeline-item v-for="i in obj" :key="i.index" large>
          <template v-slot:opposite>
            <span>{{ i.date }}</span>
          </template>
          <v-card class="elevation-2">
            <v-card-title class="headline">{{ i.name }}</v-card-title>
            <v-card-text>
              {{ i.event }}
              {{ i.textra }}
            </v-card-text>
          </v-card>
        </v-timeline-item>
      </v-timeline>
    </v-col>
    <div>{{ obj }}</div>
  </v-row>
</template>

<script>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
/*  Xeslint-disable    */
////////////////////////////////////////////////////////////////////////////////////////////////////////////

const FORM_KEY = "ay-history";
const API_BASE_URL = "EventLog/";
export default {
  created() {
    let vm = this;
    initForm(vm)
      .then(() => {
        vm.formState.ready = true;
        vm.readOnly = true;
        window.$gz.eventBus.$on("menu-click", clickHandler);
        generateMenu(vm, false);
        vm.getDataFromApi();
      })
      .catch(err => {
        vm.formState.ready = true;
        window.$gz.errorHandler.handleFormError(err, vm);
      });
  },
  data() {
    return {
      obj: [],
      eventTypes: {},
      lastOffset: 0,
      formState: {
        ready: false,
        loading: false,
        errorBoxMessage: null,
        appError: null,
        serverError: {}
      }
    };
  },
  methods: {
    getDataFromApi() {
      let vm = this;
      if (vm.formState.loading) {
        return;
      }
      vm.formState.loading = true;
      window.$gz.form.deleteAllErrorBoxErrors(vm);
      let url = null;
      //path: "/history/:ayatype/:recordid/:userlog?"
      ///EventLog/UserLog?UserId=2&Offset=2&Limit=2
      ///EventLog/ObjectLog?AyType=2&AyId=2&Offset=2&Limit=2
      if (vm.$route.params.userlog) {
        url = API_BASE_URL + "UserLog?UserId=" + vm.$route.params.recordid;
      } else {
        url =
          API_BASE_URL +
          "ObjectLog?AyType=" +
          vm.$route.params.ayatype +
          "&AyId=" +
          vm.$route.params.recordid;
      }
      //paging
      url += "&Offset=" + vm.lastOffset;
      window.$gz.api
        .get(url)
        .then(res => {
          if (res.error) {
            //Not found?
            if (res.error.code == "2010") {
              //notify not found error then navigate backwards
              window.$gz.eventBus.$emit(
                "notify-error",
                vm.$ay.t("ErrorAPI2010")
              );
              // navigate backwards
              window.$gz._.delay(function() {
                vm.$router.go(-1);
              }, 2000);
            }
            vm.formState.serverError = res.error;
            window.$gz.form.setErrorBoxErrors(vm);
          } else {
            //TODO: PAGING update last offset
            let temp = res.data;
            let timeZoneName = window.$gz.locale.getBrowserTimeZoneName();
            let languageName = window.$gz.locale.getBrowserLanguages();
            let hour12 = window.$gz.store.state.locale.hour12;
            for (let i = 0; i < temp.length; i++) {
              temp[
                i
              ].date = window.$gz.locale.utcDateToShortDateAndTimeLocalized(
                temp[i].date,
                timeZoneName,
                languageName,
                hour12
              );
              for (let i = 0; i < vm.eventTypes.length; i) temp[i].index = i; //TODO: PAGING
            }

            vm.obj = temp; //TODO: PAGING

            //Update the form status
            window.$gz.form.setFormState({
              vm: vm,
              dirty: false,
              valid: true,
              loading: false,
              readOnly: res.readOnly ? true : false
            });
            //modify the menu as necessary
            generateMenu(vm);
          }
        })
        .catch(function handleGetDataFromAPIError(error) {
          //Update the form status
          window.$gz.form.setFormState({
            vm: vm,
            loading: false
          });
          window.$gz.errorHandler.handleFormError(error, vm);
        });
    }
  }
};

/////////////////////////////
//
//
function clickHandler(menuItem) {
  if (!menuItem) {
    return;
  }
  let 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 + "]"
        );
    }
  }
}

//////////////////////
//
//
function generateMenu(vm) {
  let menuOptions = {
    isMain: false,
    icon: "fa-history",
    title: vm.$ay.t("History"),
    helpUrl: "form-ay-history",
    menuItems: []
  };
}
/////////////////////////////////
//
//
function initForm(vm) {
  return new Promise(function(resolve, reject) {
    (async function() {
      try {
        await fetchTranslatedText(vm);
        await populateSelectionLists(vm);
      } catch (err) {
        reject(err);
      }
      resolve();
    })();
  });
}

/////////////////////////////////
//
//
function populateSelectionLists(vm) {
  vm.eventTypes = {
    0: { name: vm.$ay.t("EventDeleted"), icon: "fa-trash-alt" },
    1: { name: vm.$ay.t("EventCreated"), icon: "fa-plus" },
    2: {
      name: vm.$ay.t("EventRetrieved"),
      icon: "fa-arrow-circle-down"
    },
    3: { name: vm.$ay.t("EventModified"), icon: "fa-save" },
    4: {
      name: vm.$ay.t("EventAttachmentCreate"),
      icon: "fa-plus"
    },
    5: {
      name: vm.$ay.t("EventAttachmentDelete"),
      icon: "fa-trash-alt"
    },
    6: {
      name: vm.$ay.t("EventAttachmentDownload"),
      icon: "fa-arrow-circle-down"
    },
    7: {
      name: vm.$ay.t("EventLicenseFetch"),
      icon: "fa-ticket-alt"
    },
    8: {
      name: vm.$ay.t("EventLicenseTrialRequest"),
      icon: "fa-arrow-circle-down"
    },
    9: {
      name: vm.$ay.t("EventServerStateChange"),
      icon: "fa-plus"
    },
    10: { name: vm.$ay.t("EventSeedDatabase"), icon: "fa-plus" }
  };
}

//////////////////////////////////////////////////////////
//
// Ensures UI translated text is available
//
function fetchTranslatedText(vm) {
  return window.$gz.translation.fetch([
    "EventDeleted",
    "EventCreated",
    "EventRetrieved",
    "EventModified",
    "EventAttachmentCreate",
    "EventAttachmentDelete",
    "EventAttachmentDownload",
    "EventLicenseFetch",
    "EventLicenseTrialRequest",
    "EventServerStateChange",
    "EventSeedDatabase"
  ]);
}
</script>