Resource Config Modal

coscine/issues#2511

src/modules/resource/components/resource-page/modals/ResourceConfigModal.vue

+<template>
+  <b-modal id="modalConfigPopover" title="Configuration" v-if="resource" size="lg" ok-only>
+        <!-- Project name -->
+        <CoscineFormGroup
+          v-if="resource.type && resource.type.displayName"
+          label-for="resourceType"
+          :label="$t('form.project.projectNameLabel')"
+          type="input"
+        >
+        <b-form-input
+            id="resourceType"
+            :placeholder="$t('form.project.projectNameLabel')"
+            :disabled=true            
+          />
+        </CoscineFormGroup>
+
+        <!-- Resource type -->
+        <CoscineFormGroup
+          v-if="resource.type && resource.type.displayName"
+          label-for="resourceType"
+          :label="$t('page.resource.resourceType')"
+          type="input"
+        >
+        <b-form-input
+            id="resourceType"
+            :placeholder="resource.type.displayName"
+            :disabled=true            
+          />
+        </CoscineFormGroup>
+      
+        <!-- displayName -->
+        <CoscineFormGroup
+          v-if="resource.type && resource.type.displayName"
+          label-for="displayName"
+          :label="$t('page.resource.displayName')"
+          type="input"
+        >
+        <b-form-input
+            id="displayName"
+            :placeholder="resource.displayName"
+            :disabled=true            
+          />
+        </CoscineFormGroup>
+      
+        <!-- pid -->
+        <CoscineFormGroup
+          v-if="resource.type && resource.pid"
+          label-for="pid"
+          :label="$t('page.resource.PID')"
+          type="input"
+        >
+        <b-form-input
+            id="pid"
+            :placeholder="resource.pid"
+            :disabled=true            
+          />
+        </CoscineFormGroup>
+      
+        <!-- description -->
+        <CoscineFormGroup
+          v-if="resource.type && resource.description"
+          label-for="description"
+          :label="$t('page.resource.description')"
+          type="input"
+        >
+        <b-form-input
+            id="description"
+            :placeholder="resource.description"
+            :disabled=true            
+          />
+        </CoscineFormGroup>
+        <!-- disciplines -->
+        <CoscineFormGroup
+          v-if="resource.disciplines && resource.disciplines.length > 0"
+          label-for="disciplines"
+          :label="$t('page.resource.disciplines')"
+          type="input"
+        >
+        <b-form-input
+            id="disciplines"
+            :placeholder="
+              $t('page.resource.disciplines')
+            "
+            :disabled=true            
+          />
+        </CoscineFormGroup>
+      
+        <!-- keywords -->
+        <CoscineFormGroup
+          v-if="resource.type && resource.keywords"
+          label-for="keywords"
+          :label="$t('page.resource.keywords')"
+          type="input"
+        >
+        <b-form-input
+            id="keywords"
+            :placeholder="resource.keywords.replace(';', '; ')"
+            :disabled=true            
+          />
+        </CoscineFormGroup>
+      
+        <!-- visibility -->
+        <CoscineFormGroup
+          v-if="resource.type && resource.visibility"
+          label-for="visibility"
+          :label="$t('page.resource.visibility')"
+          type="input"
+        >
+        <b-form-input
+            id="visibility"
+            :placeholder="resource.visibility.displayName"
+            :disabled=true            
+          />
+        </CoscineFormGroup>
+
+        <!-- license -->
+        <CoscineFormGroup
+          v-if="resource.type && resource.license"
+          label-for="license"
+          :label="$t('page.resource.license')"
+          type="input"
+        >
+        <b-form-input
+            id="license"
+            :placeholder="resource.license.displayName"
+            :disabled=true            
+          />
+        </CoscineFormGroup>
+
+        <!-- usageRights -->
+        <CoscineFormGroup
+          v-if="resource.type && resource.usageRights"
+          label-for="usageRights"
+          :label="$t('page.resource.usageRights')"
+          type="input"
+        >
+        <b-form-input
+            id="usageRights"
+            :placeholder="resource.usageRights"
+            :disabled=true            
+          />
+        </CoscineFormGroup>
+
+        <!-- Gitlab Domain -->
+        <CoscineFormGroup
+          v-if="resource.type && resource.type.displayName === 'gitlab'"
+          label-for="gitlab"
+          :label="$t('resourceType.gitlab.domainLabel')"
+          type="input"
+        >
+        <b-form-input
+            id="usageRights"
+            :placeholder="resource.resourceTypeOption['RepoUrl']"
+            :disabled=true            
+          />
+        </CoscineFormGroup>
+
+        <!-- Gitlab Project -->
+        <CoscineFormGroup
+          v-if="resource.type && resource.type.displayName === 'gitlab'"
+          label-for="gitlab"
+          :label="$t('resourceType.gitlab.projectLabel')"
+          type="input"
+        >
+        <b-form-input
+            id="usageRights"
+            :placeholder="gitlabInformation.project
+                ? gitlabInformation.project.name
+                : $t('resourceType.gitlab.projectNotValidated')"
+            :disabled=true            
+          />
+        </CoscineFormGroup>
+
+        <!-- Gitlab Branch -->
+        <CoscineFormGroup
+          v-if="resource.type && resource.type.displayName === 'gitlab'"
+          label-for="gitlab"
+          :label="$t('resourceType.gitlab.referenceLabel')"
+          type="input"
+        >
+        <b-form-input
+            id="usageRights"
+            :placeholder="gitlabInformation.reference?.name"
+            :disabled=true            
+          />
+        </CoscineFormGroup>    
+  </b-modal>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+import useResourceStore from "../../../store";
+import type {
+  Project,
+  ResourceTypeInformation,
+} from "@coscine/api-client/dist/types/Coscine.Api.Resources";
+import type { VisitedResourceObject } from "../../../types";
+import type { GitlabInformation } from "@/modules/resource/types";
+
+export default defineComponent({
+  components: {
+    GitLab: () => import("./../resource-type/GitLab.vue"),
+  },
+  props: {
+    visible: {
+      default: false,
+      type: Boolean,
+    },
+  },
+
+  setup() {
+    const resourceStore = useResourceStore();
+    return { resourceStore };
+  },
+
+  data() {
+    return {
+      gitlabInformation: {
+        domain: "",
+        accessToken: "",
+        project: null,
+        reference: null,
+      } as GitlabInformation,
+      gitlabProjects: [] as Project[] | null,
+    };
+  },
+
+  computed: {
+    resource(): null | VisitedResourceObject {
+      return this.resourceStore.currentResource;
+    },
+  },
+});
+</script>