Setup.vue

<template>
  <div class="setup">
    <div
      id="validationErrorMessage"
      class="alert alert-danger"
      role="alert"
      v-if="validationError"
    >
      {{ $t("validationErrorMessage") }}
    </div>
    <div v-if="resourceTypes.length > 0">
      <coscine-form-group
        :mandatory="true"
        labelFor="ResourceTypes"
        :label="$t('resourceTypesLabel')"
      >
        <multiselect
          v-if="resourceTypes.length > 1"
          id="ResourceTypes"
          v-model="selectedResourceType"
          :options="resourceTypes"
          @input="retrieveFields"
          :multiple="false"
          :hide-selected="false"
          label="iDisplayName"
          track-by="iDisplayName"
          :placeholder="$t('MultiselectPlaceholderResourceType')"
          select-label=""
          selected-label=""
          deselect-label=""
        >
          <span slot="noResult">{{ $t("MultiselectNoResults") }}</span>
          <span slot="noOptions">{{ $t("MultiselectNoOptions") }}</span>
        </multiselect>
        <b-input
          v-else-if="resourceTypes.length === 1"
          id="ResourceType"
          v-model="selectedResourceType.iDisplayName"
          disabled
        >
        </b-input>
      </coscine-form-group>
      <coscine-form-group
        v-if="selectedResourceType !== null"
        :label="selectedResourceType.iFullName"
      >
        <p>{{ selectedResourceType.iDescription }}</p>
      </coscine-form-group>
    </div>
    <SetupPage
      v-if="
        selectedResourceType !== null &&
        selectedResourceType.displayName !== undefined
      "
      ref="setupSubPage"
      :isProjectOwner="isProjectOwner"
      :finishedLoadingResourceTypes="finishedLoadingResourceTypes"
      :projectId="projectId"
      :resource="resource"
      :formFields="
        this.selectedResourceTypeInformation.resourceCreate.components[0]
      "
      :sliderValue="sliderValue"
      :selectedResourceType="selectedResourceType"
      @waitingForResponse="setWaitingForResponse"
      @sliderValChange="setSliderValue"
    />
    <div @mouseenter="showPopover">
      <b-button
        id="button-enabledPopover"
        @click.prevent="validateAndProceed"
        class="float-right"
        variant="outline-primary"
        :disabled="sliderValue <= 0 || selectedResourceType === null"
        >{{ $t("next") }}
      </b-button>
      <b-popover ref="popover" target="button-enabledPopover" placement="top">
        <template v-slot:title>{{ $t("popoverHeader") }}</template>
        {{ $t("popoverContent") }}
        <b-link :href="quotaLink">{{ $t("needMore") }}</b-link>
      </b-popover>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { BlobApi, ProjectApi, ResourceTypeApi } from "@coscine/api-connection";
import { GuidUtil, LinkUtil } from "@coscine/app-util";
import { CoscineFormGroup } from "@coscine/component-library";
import "@coscine/component-library/dist/index.css";

import SetupPage from "./Setup/SetupPage.vue";

import Multiselect from "vue-multiselect";
import "vue-multiselect/dist/vue-multiselect.min.css";
Vue.component("multiselect", Multiselect);

export default Vue.extend({
  name: "Setup",
  components: {
    SetupPage,
    CoscineFormGroup,
  },
  data() {
    return {
      quotaLink: LinkUtil.getProjectLink("QuotaManagement"),
      sliderValue: 1,
      validationError: false,
      selectedResourceType: {} as any,
    };
  },
  methods: {
    showPopover() {
      if (this.sliderValue <= 0 && this.resourceTypeHasSize()) {
        (this as any).$refs.popover.$emit("open");
        setTimeout(() => {
          (this as any).$refs.popover.$emit("close");
        }, 5000);
      }
    },
    setSliderValue(val: any) {
      this.sliderValue = val;
      this.resource.resourceTypeOption["Size"] = this.sliderValue;
    },
    getComponentsLength() {
      if (
        this.selectedResourceTypeInformation === undefined ||
        this.selectedResourceTypeInformation.resourceCreate === undefined ||
        this.selectedResourceTypeInformation.resourceCreate.components ===
          undefined ||
        this.selectedResourceTypeInformation.resourceCreate.components[0] ===
          undefined
      ) {
        return -1;
      }
      return this.selectedResourceTypeInformation.resourceCreate.components[0]
        .length;
    },
    resourceTypeHasSize() {
      if (this.getComponentsLength() > 0) {
        for (const field of this.selectedResourceTypeInformation.resourceCreate
          .components[0]) {
          if (field === "Size") {
            return true;
          }
        }
      }
      return false;
    },
    next() {
      this.$emit("next");
    },
    setWaitingForResponse(newIsWaitingForResponse: boolean) {
      this.$emit("waitingForResponse", newIsWaitingForResponse);
    },
    validateAndProceed() {
      if (
        this.$refs.setupSubPage !== undefined &&
        (this.$refs.setupSubPage as any).validateResource()
      ) {
        this.validationError = false;
        this.$emit("next");
      } else {
        this.validationError = true;
      }
    },
    retrieveFields(resourceType: any) {
      if (GuidUtil.isValidGuid(resourceType.id)) {
        this.$emit("setSelectedResourceTypeInformation", resourceType);
      }
    },
    getResourceTypeInformation(id: string): any {
      for (const resourceTypeInformation of this.resourceTypes) {
        if ((resourceTypeInformation as any).id === id) {
          return resourceTypeInformation;
        }
      }
    },
    init() {
      this.selectedResourceType = null;
    },
  },
  props: {
    resource: Object,
    resourceTypes: Array,
    isProjectOwner: Boolean,
    isWaitingForResponse: Boolean,
    finishedLoadingResourceTypes: Boolean,
    projectId: String,
    selectedResourceTypeInformation: Object,
  },
  watch: {
    finishedLoadingResourceTypes() {
      this.init();
    },
  },
  mounted() {
    this.init();
  },
});
</script>

<style scoped>
#validationErrorMessage {
  margin-left: 1em;
  margin-right: 1em;
}
</style>