ayanova/src/views/adm-integration.vue

@@ -0,0 +1,375 @@
+<template>
+  <div>
+    <div v-if="formState.ready">
+      <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
+      <v-form ref="form">
+        <v-row>
+          <v-col cols="12" sm="6" lg="4" xl="3">
+            <v-text-field
+              ref="name"
+              v-model="obj.name"
+              :readonly="formState.readOnly"
+              :label="$ay.t('IntegrationName')"
+              :rules="[form().required(this, 'name')]"
+              :error-messages="form().serverErrors(this, 'name')"
+              data-cy="name"
+              @input="fieldValueChanged('name')"
+            ></v-text-field>
+          </v-col>
+
+          <v-col cols="12" sm="6" lg="4" xl="3">
+            <v-checkbox
+              ref="active"
+              v-model="obj.active"
+              :readonly="formState.readOnly"
+              :label="$ay.t('Active')"
+              data-cy="active"
+              :error-messages="form().serverErrors(this, 'active')"
+              @change="fieldValueChanged('active')"
+            ></v-checkbox>
+          </v-col>
+
+          <v-col v-if="form().showMe(this, 'Attachments') && obj.id" cols="12">
+            <gz-attachments
+              :readonly="formState.readOnly"
+              :aya-type="ayaType"
+              :aya-id="obj.id"
+            ></gz-attachments
+          ></v-col>
+        </v-row>
+      </v-form>
+    </div>
+    <v-overlay :value="!formState.ready || formState.loading">
+      <v-progress-circular indeterminate :size="64" />
+    </v-overlay>
+  </div>
+</template>
+<script>
+const FORM_KEY = "integration-edit";
+const API_BASE_URL = "integration/";
+const FORM_CUSTOM_TEMPLATE_KEY = "Integration";
+export default {
+  data() {
+    return {
+      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
+      obj: {
+        id: 0,
+        concurrency: 0,
+        name: null,
+        active: true
+      },
+      formState: {
+        ready: false,
+        dirty: false,
+        valid: true,
+        readOnly: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      },
+      rights: window.$gz.role.defaultRightsObject(),
+      ayaType: window.$gz.type.Integration,
+      selectedPart: null,
+      editItemDialog: false,
+      editItemIndex: 0,
+      adding: false
+    };
+  },
+  watch: {
+    formState: {
+      handler: function(val) {
+        if (this.formState.loading) {
+          return;
+        }
+        if (val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
+        } else {
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
+        }
+      },
+      deep: true
+    }
+  },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      vm.rights = window.$gz.role.getRights(window.$gz.type.Integration);
+      vm.formState.readOnly = !vm.rights.change;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      let setDirty = false;
+      //Integrations are never created in the UI, only deleted or set inactive or log view
+      await vm.getDataFromApi(vm.$route.params.recordid);
+
+      window.$gz.form.setFormState({
+        vm: vm,
+        loading: false,
+        dirty: setDirty,
+        valid: true
+      });
+
+      generateMenu(vm);
+    } catch (error) {
+      window.$gz.errorHandler.handleFormError(error, vm);
+    } finally {
+      vm.formState.ready = true;
+    }
+  },
+  async beforeRouteLeave(to, from, next) {
+    if (!this.formState.dirty || JUST_DELETED) {
+      next();
+      return;
+    }
+    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
+      next();
+    } else {
+      next(false);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
+  methods: {
+    canSave: function() {
+      return this.formState.valid && this.formState.dirty;
+    },
+    canDuplicate: function() {
+      return this.formState.valid && !this.formState.dirty;
+    },
+    ayaTypes: function() {
+      return window.$gz.type;
+    },
+    form() {
+      return window.$gz.form;
+    },
+    thisVm() {
+      return this;
+    },
+    fieldValueChanged(ref) {
+      if (
+        this.formState.ready &&
+        !this.formState.loading &&
+        !this.formState.readOnly
+      ) {
+        window.$gz.form.fieldValueChanged(this, ref);
+      }
+    },
+    async getDataFromApi(recordId) {
+      const vm = this;
+      window.$gz.form.setFormState({
+        vm: vm,
+        loading: true
+      });
+      if (!recordId) {
+        throw new Error(FORM_KEY + "::getDataFromApi -> Missing recordID!");
+      }
+      try {
+        window.$gz.form.deleteAllErrorBoxErrors(vm);
+        const res = await window.$gz.api.get(API_BASE_URL + recordId);
+        if (res.error) {
+          if (res.error.code == "2010") {
+            window.$gz.form.handleObjectNotFound(vm);
+          }
+          vm.formState.serverError = res.error;
+          window.$gz.form.setErrorBoxErrors(vm);
+        } else {
+          vm.obj = res.data;
+          generateMenu(vm);
+          window.$gz.form.setFormState({
+            vm: vm,
+            dirty: false,
+            valid: true,
+            loading: false
+          });
+        }
+      } catch (error) {
+        window.$gz.errorHandler.handleFormError(error, vm);
+      } finally {
+        window.$gz.form.setFormState({
+          vm: vm,
+          loading: false
+        });
+      }
+    },
+    async submit() {
+      const vm = this;
+      if (vm.canSave == false) {
+        return;
+      }
+      try {
+        window.$gz.form.setFormState({
+          vm: vm,
+          loading: true
+        });
+        window.$gz.form.deleteAllErrorBoxErrors(vm);
+        const res = await window.$gz.api.upsert(API_BASE_URL, vm.obj);
+        if (res.error) {
+          vm.formState.serverError = res.error;
+          window.$gz.form.setErrorBoxErrors(vm);
+        } else {
+          if (res.data.id) {
+            //POST
+            vm.obj = res.data;
+            this.$router.replace({
+              name: "integration-edit",
+              params: {
+                recordid: res.data.id,
+                obj: res.data
+              }
+            });
+          } else {
+            //PUT
+            vm.obj.concurrency = res.data.concurrency;
+          }
+          window.$gz.form.setFormState({
+            vm: vm,
+            dirty: false,
+            valid: true
+          });
+        }
+      } catch (ex) {
+        window.$gz.errorHandler.handleFormError(ex, vm);
+      } finally {
+        window.$gz.form.setFormState({
+          vm: vm,
+          loading: false
+        });
+      }
+    },
+    async remove() {
+      try {
+        const dialogResult = await window.$gz.dialog.confirmDelete();
+        if (dialogResult != true) {
+          return;
+        }
+        window.$gz.form.setFormState({
+          vm: this,
+          loading: true
+        });
+        if (this.$route.params.recordid == 0) {
+          JUST_DELETED = true;
+          this.$router.go(-1);
+        } else {
+          const url = API_BASE_URL + this.$route.params.recordid;
+          window.$gz.form.deleteAllErrorBoxErrors(this);
+          const res = await window.$gz.api.remove(url);
+          if (res.error) {
+            this.formState.serverError = res.error;
+            window.$gz.form.setErrorBoxErrors(this);
+          } else {
+            JUST_DELETED = true;
+            this.$router.go(-1);
+          }
+        }
+      } catch (error) {
+        window.$gz.errorHandler.handleFormError(error, this);
+      } finally {
+        window.$gz.form.setFormState({
+          vm: this,
+          loading: false
+        });
+      }
+    },
+    duplicate() {
+      this.$router.push({
+        name: "integration-edit",
+        params: {
+          recordid: 0,
+          obj: this.obj
+        }
+      });
+    }
+  }
+};
+
+/////////////////////////////
+//
+//
+async function clickHandler(menuItem) {
+  if (!menuItem) {
+    return;
+  }
+  const m = window.$gz.menu.parseMenuItem(menuItem);
+  if (m.owner == FORM_KEY && !m.disabled) {
+    switch (m.key) {
+      case "save":
+        m.vm.submit();
+        break;
+      case "delete":
+        m.vm.remove();
+        break;
+
+      default:
+        window.$gz.eventBus.$emit(
+          "notify-warning",
+          FORM_KEY + "::context click: [" + m.key + "]"
+        );
+    }
+  }
+}
+
+//////////////////////
+//
+//
+function generateMenu(vm) {
+  const menuOptions = {
+    isMain: false,
+    readOnly: vm.formState.readOnly,
+    icon: "$ayiCampground",
+    title: "Integration",
+    helpUrl: "integrations",
+    formData: {
+      ayaType: window.$gz.type.Integration,
+      recordId: vm.$route.params.recordid,
+      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
+      recordName: vm.obj.name
+    },
+    menuItems: []
+  };
+
+  if (vm.rights.change) {
+    menuOptions.menuItems.push({
+      title: "Save",
+      icon: "$ayiSave",
+      surface: true,
+      key: FORM_KEY + ":save",
+      vm: vm
+    });
+  }
+
+  if (vm.rights.delete && vm.$route.params.recordid != 0) {
+    menuOptions.menuItems.push({
+      title: "Delete",
+      icon: "$ayiTrashAlt",
+      surface: false,
+      key: FORM_KEY + ":delete",
+      vm: vm
+    });
+  }
+  menuOptions.menuItems.push({ divider: true, inset: false });
+
+  window.$gz.eventBus.$emit("menu-change", menuOptions);
+}
+
+let JUST_DELETED = false;
+
+/////////////////////////////////
+//
+//
+async function initForm(vm) {
+  await fetchTranslatedText();
+  await window.$gz.formCustomTemplate.get(FORM_CUSTOM_TEMPLATE_KEY, vm);
+}
+
+//////////////////////////////////////////////////////////
+//
+// Ensures UI translated text is available
+//
+async function fetchTranslatedText() {
+  await window.$gz.translation.cacheTranslations([
+    "Integration",
+    "IntegrationName"
+  ]);
+}
+</script>

ayanova/src/views/adm-integrations.vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <gz-data-table
+      ref="gzdatatable"
+      form-key="integration-list"
+      data-list-key="IntegrationDataList"
+      :show-select="rights.read"
+      :reload="reload"
+      data-cy="integrationsTable"
+      @selection-change="handleSelected"
+    >
+    </gz-data-table>
+  </div>
+</template>
+<script>
+const FORM_KEY = "integration-list";
+export default {
+  data() {
+    return {
+      rights: window.$gz.role.defaultRightsObject(),
+      aType: window.$gz.type.Integration,
+      selectedItems: [],
+      reload: false
+    };
+  },
+  created() {
+    this.rights = window.$gz.role.getRights(window.$gz.type.Integration);
+    window.$gz.eventBus.$on("menu-click", clickHandler);
+    generateMenu(this);
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
+  methods: {
+    handleSelected(selected) {
+      this.selectedItems = selected;
+    }
+  }
+};
+
+/////////////////////////////
+//
+//
+async function clickHandler(menuItem) {
+  if (!menuItem) {
+    return;
+  }
+  const m = window.$gz.menu.parseMenuItem(menuItem);
+  if (m.owner == FORM_KEY && !m.disabled) {
+    switch (m.key) {
+      case "new":
+        m.vm.$router.push({
+          name: "integration-edit",
+          params: { recordid: 0 }
+        });
+        break;
+
+      default:
+        window.$gz.eventBus.$emit(
+          "notify-warning",
+          FORM_KEY + "::context click: [" + m.key + "]"
+        );
+    }
+  }
+}
+
+//////////////////////
+//
+//
+function generateMenu() {
+  const menuOptions = {
+    isMain: true,
+    icon: "$ayiObjectGroup",
+    title: "IntegrationList",
+    helpUrl: "integrations",
+    menuItems: [],
+    formData: {
+      ayaType: window.$gz.type.Integration
+    }
+  };
+
+  window.$gz.eventBus.$emit("menu-change", menuOptions);
+}
+</script>