|
| 1 | +<script setup lang="ts"> |
| 2 | +import { watchImmediate } from "@vueuse/core"; |
| 3 | +import { BAlert } from "bootstrap-vue"; |
| 4 | +import { computed, ref } from "vue"; |
| 5 | +import Multiselect from "vue-multiselect"; |
| 6 | +
|
| 7 | +import { GalaxyApi } from "@/api"; |
| 8 | +import { type components } from "@/api/schema"; |
| 9 | +import { errorMessageAsString } from "@/utils/simple-error"; |
| 10 | +
|
| 11 | +import License from "@/components/License/License.vue"; |
| 12 | +import LoadingSpan from "@/components/LoadingSpan.vue"; |
| 13 | +
|
| 14 | +const defaultLicense: LicenseType = { |
| 15 | + licenseId: null, |
| 16 | + name: "*Do not specify a license.*", |
| 17 | +}; |
| 18 | +
|
| 19 | +type LicenseMetadataModel = components["schemas"]["LicenseMetadataModel"]; |
| 20 | +type LicenseType = { |
| 21 | + licenseId: string | null; |
| 22 | + name: string; |
| 23 | +}; |
| 24 | +
|
| 25 | +interface Props { |
| 26 | + inputLicense: string; |
| 27 | +} |
| 28 | +
|
| 29 | +const props = defineProps<Props>(); |
| 30 | +
|
| 31 | +const emit = defineEmits<{ |
| 32 | + (e: "onLicense", license: string | null): void; |
| 33 | +}>(); |
| 34 | +
|
| 35 | +const licensesLoading = ref(false); |
| 36 | +const errorMessage = ref<string>(""); |
| 37 | +const currentLicense = ref<LicenseType>(); |
| 38 | +const licenses = ref<LicenseMetadataModel[] | undefined>([]); |
| 39 | +
|
| 40 | +const licenseOptions = computed(() => { |
| 41 | + const options: LicenseType[] = []; |
| 42 | +
|
| 43 | + options.push(defaultLicense); |
| 44 | +
|
| 45 | + for (const license of licenses.value || []) { |
| 46 | + if (license.licenseId == currentLicense.value?.licenseId || license.recommended) { |
| 47 | + options.push({ |
| 48 | + licenseId: license.licenseId, |
| 49 | + name: license.name, |
| 50 | + }); |
| 51 | + } |
| 52 | + } |
| 53 | +
|
| 54 | + return options; |
| 55 | +}); |
| 56 | +
|
| 57 | +function onLicense(license: LicenseType) { |
| 58 | + emit("onLicense", license.licenseId); |
| 59 | +} |
| 60 | +
|
| 61 | +async function fetchLicenses() { |
| 62 | + const { error, data } = await GalaxyApi().GET("/api/licenses"); |
| 63 | +
|
| 64 | + if (error) { |
| 65 | + errorMessage.value = errorMessageAsString(error) || "Unable to fetch licenses."; |
| 66 | + } |
| 67 | +
|
| 68 | + licenses.value = data; |
| 69 | +
|
| 70 | + licensesLoading.value = false; |
| 71 | +} |
| 72 | +
|
| 73 | +async function setCurrentLicense() { |
| 74 | + if (!licenses.value?.length && !licensesLoading.value) { |
| 75 | + licensesLoading.value = true; |
| 76 | +
|
| 77 | + await fetchLicenses(); |
| 78 | + } |
| 79 | +
|
| 80 | + const inputLicense = props.inputLicense; |
| 81 | +
|
| 82 | + currentLicense.value = (licenses.value || []).find((l) => l.licenseId == inputLicense) || defaultLicense; |
| 83 | +} |
| 84 | +
|
| 85 | +watchImmediate( |
| 86 | + () => props.inputLicense, |
| 87 | + () => { |
| 88 | + setCurrentLicense(); |
| 89 | + } |
| 90 | +); |
| 91 | +</script> |
| 92 | + |
1 | 93 | <template> |
2 | | - <div v-if="editLicense"> |
3 | | - <LoadingSpan v-if="licensesLoading" message="Loading licenses..." /> |
4 | | - <b-form-select |
| 94 | + <div> |
| 95 | + <BAlert v-if="licensesLoading" variant="info" class="m-0" show> |
| 96 | + <LoadingSpan message="Loading licenses" /> |
| 97 | + </BAlert> |
| 98 | + <BAlert v-else-if="errorMessage" variant="danger" class="m-0" show> |
| 99 | + {{ errorMessage }} |
| 100 | + </BAlert> |
| 101 | + <Multiselect |
5 | 102 | v-else |
6 | | - v-model="license" |
| 103 | + v-model="currentLicense" |
7 | 104 | data-description="license select" |
8 | | - :options="licenseOptions"></b-form-select> |
9 | | - <License v-if="currentLicenseInfo" :license-id="license" :input-license-info="currentLicenseInfo"> |
10 | | - <template v-slot:buttons> |
11 | | - <span v-b-tooltip.hover title="Save License" |
12 | | - ><FontAwesomeIcon data-description="license save" icon="save" @click="onSave" |
13 | | - /></span> |
14 | | - <span v-b-tooltip.hover title="Cancel Edit"><FontAwesomeIcon icon="times" @click="disableEdit" /></span> |
15 | | - </template> |
16 | | - </License> |
17 | | - <div v-else> |
18 | | - <a href="#" @click.prevent="onSave">Save without license</a> or |
19 | | - <a href="#" @click.prevent="editLicense = false">cancel edit.</a> |
20 | | - </div> |
21 | | - </div> |
22 | | - <div v-else-if="license" data-description="license selector" :data-license="license"> |
23 | | - <License :license-id="license"> |
24 | | - <template v-slot:buttons> |
25 | | - <span v-b-tooltip.hover title="Edit License" |
26 | | - ><FontAwesomeIcon icon="edit" data-description="edit license link" @click="editLicense = true" |
27 | | - /></span> |
28 | | - </template> |
29 | | - </License> |
30 | | - </div> |
31 | | - <div v-else data-description="license selector" data-license="null"> |
32 | | - <i |
33 | | - ><a href="#" data-description="edit license link" @click.prevent="editLicense = true" |
34 | | - >Specify a license for this workflow.</a |
35 | | - ></i |
36 | | - > |
| 105 | + track-by="licenseId" |
| 106 | + :options="licenseOptions" |
| 107 | + label="name" |
| 108 | + placeholder="Select a license" |
| 109 | + @select="onLicense" /> |
| 110 | + <License v-if="currentLicense?.licenseId" :license-id="currentLicense.licenseId" /> |
37 | 111 | </div> |
38 | 112 | </template> |
39 | | - |
40 | | -<script> |
41 | | -import { library } from "@fortawesome/fontawesome-svg-core"; |
42 | | -import { faEdit, faSave, faTimes } from "@fortawesome/free-solid-svg-icons"; |
43 | | -import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; |
44 | | -import axios from "axios"; |
45 | | -import BootstrapVue from "bootstrap-vue"; |
46 | | -import LoadingSpan from "components/LoadingSpan"; |
47 | | -import { getAppRoot } from "onload/loadConfig"; |
48 | | -import Vue from "vue"; |
49 | | -
|
50 | | -import License from "./License"; |
51 | | -
|
52 | | -library.add(faSave); |
53 | | -library.add(faTimes); |
54 | | -library.add(faEdit); |
55 | | -
|
56 | | -Vue.use(BootstrapVue); |
57 | | -
|
58 | | -export default { |
59 | | - components: { License, LoadingSpan, FontAwesomeIcon }, |
60 | | - props: { |
61 | | - inputLicense: { |
62 | | - type: String, |
63 | | - }, |
64 | | - }, |
65 | | - data() { |
66 | | - return { |
67 | | - license: this.inputLicense || null, |
68 | | - licensesLoading: false, |
69 | | - licenses: [], |
70 | | - editLicense: false, |
71 | | - }; |
72 | | - }, |
73 | | - computed: { |
74 | | - currentLicenseInfo() { |
75 | | - for (const license of this.licenses) { |
76 | | - if (license.licenseId == this.license) { |
77 | | - return license; |
78 | | - } |
79 | | - } |
80 | | - return null; |
81 | | - }, |
82 | | - licenseOptions() { |
83 | | - const options = []; |
84 | | - options.push({ |
85 | | - value: null, |
86 | | - text: "*Do not specify a license.*", |
87 | | - }); |
88 | | - for (const license of this.licenses) { |
89 | | - if (license.licenseId == this.license || license.recommended) { |
90 | | - options.push({ |
91 | | - value: license.licenseId, |
92 | | - text: license.name, |
93 | | - }); |
94 | | - } |
95 | | - } |
96 | | - return options; |
97 | | - }, |
98 | | - }, |
99 | | - watch: { |
100 | | - inputLicense() { |
101 | | - this.license = this.inputLicense; |
102 | | - }, |
103 | | - }, |
104 | | - mounted() { |
105 | | - const url = `${getAppRoot()}api/licenses`; |
106 | | - axios |
107 | | - .get(url) |
108 | | - .then((response) => response.data) |
109 | | - .then((data) => { |
110 | | - this.licenses = data; |
111 | | - this.licensesLoading = false; |
112 | | - }) |
113 | | - .catch((e) => { |
114 | | - console.error(e); |
115 | | - }); |
116 | | - }, |
117 | | - methods: { |
118 | | - onSave() { |
119 | | - this.onLicense(this.license); |
120 | | - this.disableEdit(); |
121 | | - }, |
122 | | - disableEdit() { |
123 | | - this.editLicense = false; |
124 | | - }, |
125 | | - onLicense(license) { |
126 | | - this.$emit("onLicense", license); |
127 | | - }, |
128 | | - }, |
129 | | -}; |
130 | | -</script> |
0 commit comments