Setup.vue

<template>
  <span>
    <coscine-loading-form-skeleton v-if="isLoading" />
    <span v-else>
      <span
        v-for="resourceTypeOptionKey of Object.keys(
          resource.resourceTypeOption
        )"
        :key="resourceTypeOptionKey"
      >
        <coscine-form-group
          v-if="resourceTypeOptionKey !== 'Id'"
          :mandatory="true"
          :labelFor="resourceTypeOptionKey"
          :label="$t(resourceTypeOptionKey + 'Label')"
        >
          <b-form-input
            v-if="
              resourceTypeOptionKey !== 'AccessKey' &&
              resourceTypeOptionKey !== 'SecretKey' &&
              resourceTypeOptionKey !== 'Token' &&
              resourceTypeOptionKey !== 'Size'
            "
            v-model="resource.resourceTypeOption[resourceTypeOptionKey]"
            :readonly="true"
          />
          <b-form-input
            v-else-if="resourceTypeOptionKey === 'Size'"
            :value="resource.resourceTypeOption[resourceTypeOptionKey] + ' GB'"
            :readonly="true"
          />
          <b-form-input
            v-else
            type="password"
            value="placeholder"
            :readonly="true"
          />
        </coscine-form-group>
      </span>
    </span>
  </span>
</template>

<script lang="ts">
import Vue from "vue";
import {
  CoscineFormGroup,
  CoscineLoadingFormSkeleton,
} from "@coscine/component-library";
import "@coscine/component-library/dist/index.css";

export default Vue.extend({
  name: "Setup",
  components: {
    CoscineFormGroup,
    CoscineLoadingFormSkeleton,
  },
  data() {
    return {};
  },
  props: {
    resource: Object,
    isOwner: {
      default: false,
      type: Boolean,
    },
    isLoading: {
      default: false,
      type: Boolean,
    },
  },
  methods: {},
});
</script>

<style></style>