Skip to content

Commit

Permalink
♻️ : migrate module-import page
Browse files Browse the repository at this point in the history
  • Loading branch information
juwit authored and cdubuisson committed Apr 9, 2020
1 parent 3df8a15 commit 17dac15
Show file tree
Hide file tree
Showing 8 changed files with 291 additions and 276 deletions.
71 changes: 71 additions & 0 deletions src/main/client/app/pages/modules/import/manual-import.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<template>
<div class="col-md-4">
<b-card no-body>
<b-button
size="lg"
variant="outline-danger"
squared
@click="toggle"
>
<font-awesome-icon :icon="['fab', 'superpowers']" /> manually
</b-button>

<b-card v-if="selected === 'manual'">
<b-card-text>
<b-form-group
label="Enter the module name"
label-for="module-name"
>
<b-form-input
id="module-name"
v-model="moduleName"
trim
/>
</b-form-group>
</b-card-text>

<b-button
:disabled="! moduleName"
href="#"
variant="primary"
@click="createModule"
>
Import manually
</b-button>
</b-card>

<template v-slot:footer>
<em>Import a module manually (only for users with superpowers)</em>
</template>
</b-card>
</div>
</template>

<script>
import axios from 'axios';
export default {
name: 'ManualImport',
props: {
selected: {
type: String,
required: true,
},
},
data: () => ({ moduleName: null }),
methods: {
toggle() {
this.$emit('toggle');
},
async createModule() {
let module = {
name: this.moduleName,
};
const response = await axios.post('/api/modules', module);
module = response.data;
await this.$router.push({ name: 'module', params: { id: module.id } });
},
},
};
</script>
122 changes: 122 additions & 0 deletions src/main/client/app/pages/modules/import/registry-import.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
<template>
<div class="col-md-4">
<b-card no-body>
<b-button
size="lg"
variant="outline-secondary"
:class="'btn-' + registry"
squared
@click="toggle"
>
<font-awesome-icon :icon="['fab', registry]" /> from {{ registry }}
</b-button>

<b-card v-if="selected === registry">
<b-card-text>
<label for="repoSelect">Select your {{ registry }} repository</label>
<vue-multiselect
id="repoSelect"
v-model="selectedRepository"
placeholder="Type to search"
label="fullName"
:options="repositories"
:loading="isLoading"
@open="search"
>
<span slot="noResult">Oops! No repository found. </span>
</vue-multiselect>
</b-card-text>

<b-button
:disabled="! selectedRepository"
variant="primary"
@click="importRepository"
>
Import this repository !
</b-button>
</b-card>

<template v-slot:footer>
<em>Import an existing module code from existing {{ registry }} repository</em>
</template>
</b-card>
</div>
</template>

<script>
import axios from 'axios';
export default {
name: 'RegistryImport',
props: {
registry: {
type: String,
required: true,
},
selected: {
type: String,
required: true,
},
},
data: () => (
{
selectedRepository: null,
repositories: [],
isLoading: false,
loaded: false,
isImporting: false,
}
),
methods: {
toggle() {
this.$emit('toggle');
},
async search() {
if (!this.loaded) {
this.isLoading = true;
const response = await axios.get(`/api/registries/${this.registry}/repositories`);
this.repositories = response.data;
this.loaded = true;
this.isLoading = false;
}
},
async importRepository() {
this.isImporting = true;
this.$bvToast.toast('Importing module from repository', {
noCloseButton: true,
solid: true,
variant: 'info',
toaster: 'b-toaster-top-center',
});
const id = this.selectedRepository.id ? this.selectedRepository.id : this.selectedRepository.fullName;
const response = await axios.get(`/api/registries/${this.registry}/repositories/${id}/import`);
const module = response.data;
await this.$router.push({ name: 'module', params: { id: module.id } });
},
},
};
</script>

<style>
.btn-gitlab {
color: #fca326;
}
.btn-gitlab:hover {
background-color: #fca326;
border-color: #fca326;
color: #fff;
}
.btn-github {
color: #333;
}
.btn-github:hover {
background-color: #333;
border-color: #333;
color: #fff;
}
</style>
41 changes: 40 additions & 1 deletion src/main/client/app/pages/modules/module-import.vue
Original file line number Diff line number Diff line change
@@ -1,10 +1,49 @@
<template>
<div>This is not the final module import page xD</div>
<div class="row">
<registry-import
v-if="hasAccount('github')"
registry="github"
:selected="selected"
@toggle="selected = 'github'"
/>
<registry-import
v-if="hasAccount('gitlab')"
registry="gitlab"
:selected="selected"
@toggle="selected = 'gitlab'"
/>
<manual-import
:selected="selected"
@toggle="selected = 'manual'"
/>
</div>
</template>

<script>
import { mapState } from 'vuex';
import ManualImport from './import/manual-import.vue';
import RegistryImport from './import/registry-import.vue';
export default {
name: 'AppModuleImport',
components: {
ManualImport,
RegistryImport,
},
data: () => ({
selected: 'none',
}),
computed: {
...mapState('session', {
user: 'user',
}),
},
methods: {
hasAccount(registry) {
return this.user.oauth2User && this.user.oauth2User.provider === registry;
},
},
};
</script>

Expand Down
101 changes: 56 additions & 45 deletions src/main/client/app/pages/modules/modules.vue
Original file line number Diff line number Diff line change
@@ -1,54 +1,65 @@
<template>
<b-card-group columns>
<b-card
v-for="module in modules"
:key="module.id"
:title="module.name"
<div>
<b-button
:to="'/modules/import'"
title="Import Module"
variant="success"
class="mb-4"
>
<b-card-text>
<app-cli-badge
:cli="module.terraformImage"
badge-style="flat-square"
style="margin-bottom: .75rem"
/>
<p>{{ module.description }}</p>
<font-awesome-icon icon="save" /> Import Module
</b-button>

<p v-if="module.estimatedMonthlyCost">
Estimated monthly cost :
<b-badge variant="info">
{{ module.estimatedMonthlyCost }} $
</b-badge>
</p>
</b-card-text>

<b-button
:to="'/modules/'+module.id"
title="Edit this module"
variant="primary"
class="mr-1"
<b-card-group columns>
<b-card
v-for="module in modules"
:key="module.id"
:title="module.name"
>
<font-awesome-icon icon="edit" />
</b-button>
<b-card-text>
<app-cli-badge
:cli="module.terraformImage"
badge-style="flat-square"
style="margin-bottom: .75rem"
/>
<p>{{ module.description }}</p>

<b-button
:to="'/modules/'+module.id+'/description'"
title="Detail of this module"
variant="primary"
class="mr-1"
>
<font-awesome-icon icon="info" />
</b-button>
<p v-if="module.estimatedMonthlyCost">
Estimated monthly cost :
<b-badge variant="info">
{{ module.estimatedMonthlyCost }} $
</b-badge>
</p>
</b-card-text>

<b-button
:to="'/modules/'+module.id+'/run'"
title="Run this module"
variant="primary"
class="mr-1"
>
<font-awesome-icon icon="rocket" />
</b-button>
</b-card>
</b-card-group>
<b-button
:to="'/modules/'+module.id"
title="Edit this module"
variant="primary"
class="mr-1"
>
<font-awesome-icon icon="edit" />
</b-button>

<b-button
:to="'/modules/'+module.id+'/description'"
title="Detail of this module"
variant="primary"
class="mr-1"
>
<font-awesome-icon icon="info" />
</b-button>

<b-button
:to="'/modules/'+module.id+'/run'"
title="Run this module"
variant="primary"
class="mr-1"
>
<font-awesome-icon icon="rocket" />
</b-button>
</b-card>
</b-card-group>
</div>
</template>

<script>
Expand Down
2 changes: 2 additions & 0 deletions src/main/client/app/shared/config/fontawesome-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import {
faGithub,
faGitlab,
faMarkdown,
faSuperpowers,
} from '@fortawesome/free-brands-svg-icons';
import { faUser as farUser } from '@fortawesome/free-regular-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
Expand All @@ -46,6 +47,7 @@ export default {
faUserFriends,
faTag,
faSignOutAlt,
faSuperpowers,
farUser,
faAngleDoubleLeft,
faAngleDoubleRight,
Expand Down
Loading

0 comments on commit 17dac15

Please # to comment.