jcloud/dashboard/src2/views/marketplace/NewMarketplaceApp.vue

97 lines
2.1 KiB
Vue

<template>
<WizardCard>
<div class="mb-6 text-center">
<h1 class="text-2xl font-bold">Add a New App</h1>
<p class="text-base text-gray-700">Add an app to marketplace</p>
</div>
<SelectAppFromGithub @onSelect="d => (app = d)" />
<div v-if="app">
<label class="mb-3 text-base" for="version-select"
>Compatible Jingrow Version</label
>
<select
id="version-select"
class="form-select mb-4 block"
v-model="version"
>
<option v-for="version in versionList" :key="version">
{{ version }}
</option>
</select>
<ErrorMessage class="mb-3" :message="$resources.addApp.error" />
<Button
:loading="$resources.addApp.loading"
@click="$resources.addApp.submit()"
variant="solid"
class="w-full"
>Add to marketplace</Button
>
</div>
</WizardCard>
</template>
<script>
import WizardCard from '@/components/WizardCard.vue';
import SelectAppFromGithub from '@/components/SelectAppFromGithub.vue';
export default {
name: 'NewMarketplaceApp',
components: {
WizardCard,
SelectAppFromGithub
},
data() {
return {
app: null,
version: null
};
},
resources: {
jingrowVersions() {
return {
url: 'jcloud.api.marketplace.jingrow_versions',
auto: true,
onSuccess(data) {
if (data) {
this.version = data[0];
}
}
};
},
addApp() {
return {
url: 'jcloud.api.marketplace.new_app',
params: {
app: {
name: this.app?.name,
title: this.app?.title,
repository_url: this.app?.repository_url,
branch: this.app?.branch,
github_installation_id: this.app?.github_installation_id,
version: this.version
}
},
onSuccess() {
this.$router.push(`/marketplace/apps/${this.app.name}`);
}
};
}
},
computed: {
versionList() {
if (
!this.$resources.jingrowVersions.data ||
this.$resources.jingrowVersions.loading
) {
return [];
}
return this.$resources.jingrowVersions.data;
}
}
};
</script>