This is an automated email from the ASF dual-hosted git repository. machristie pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git
commit c421e6220ea19333e8753e4f5b89d784e877b908 Author: Marcus Christie <[email protected]> AuthorDate: Thu Sep 6 11:48:38 2018 -0400 AIRAVATA-2876 Standardized layout of app catalog --- .../dashboards/ApplicationsDashboard.vue | 147 +++++++-------------- .../static/common/js/layouts/ListLayout.vue | 132 +++++++++--------- 2 files changed, 116 insertions(+), 163 deletions(-) diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/dashboards/ApplicationsDashboard.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/dashboards/ApplicationsDashboard.vue index be75406..cd8a58e 100644 --- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/dashboards/ApplicationsDashboard.vue +++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/dashboards/ApplicationsDashboard.vue @@ -1,113 +1,58 @@ <template> - <div class="new_app"> - <div class="new_app_header"> - <h4 style="display: inline-block">Application Catalog</h4> - <label v-on:click="newApplicationHandler()">New Application <span>+</span></label> - </div> - <div class="applications"> - <h6 style="color: #666666;">APPLICATIONS</h6> - <div class="container-fluid"> - <div class="row"> - <application-card v-for="item in sortedModules" v-bind:app-module="item" - v-bind:key="item.appModuleId" v-on:app-selected="clickHandler(item)"> - </application-card> - </div> + <list-layout @add-new-item="newApplicationHandler" :items="sortedModules" title="Application Catalog" subtitle="Applications" + new-item-button-text="New Application"> + <template slot="item-list" slot-scope="slotProps"> + + <div class="row"> + <application-card v-for="item in slotProps.items" v-bind:app-module="item" v-bind:key="item.appModuleId" v-on:app-selected="clickHandler(item)"> + </application-card> </div> - </div> - </div> + </template> + </list-layout> </template> <script> - import NewApplication from '../admin/NewApplication.vue' - import Loading from '../Loading.vue' - - import {mapActions, mapState} from 'vuex' +import { mapActions, mapState } from "vuex"; - import { components as comps } from 'django-airavata-common-ui' +import { layouts, components as comps } from "django-airavata-common-ui"; - import { utils } from 'django-airavata-api' +import { utils } from "django-airavata-api"; - export default { - components:{ - NewApplication, Loading, - 'application-card': comps.ApplicationCard, - }, - mounted:function () { - if (!this.modules) { - this.loadApplications(); +export default { + components: { + "application-card": comps.ApplicationCard, + "list-layout": layouts.ListLayout + }, + mounted: function() { + if (!this.modules) { + this.loadApplications(); + } + }, + computed: { + ...mapState("applications/modules", ["modules"]), + sortedModules() { + if (this.modules) { + return utils.StringUtils.sortIgnoreCase( + this.modules.slice(), + a => a.appModuleName + ); + } else { + return []; } + } + }, + methods: { + clickHandler: function(item) { + this.$router.push({ + name: "application_module", + params: { id: item.appModuleId } + }); }, - computed: { - ...mapState('applications/modules', ['modules']), - sortedModules() { - if (this.modules) { - return utils.StringUtils.sortIgnoreCase(this.modules.slice(), a => a.appModuleName); - } else { - return []; - } - } + newApplicationHandler: function() { + this.$router.push({ name: "new_application_module" }); }, - methods:{ - clickHandler: function (item) { - this.setTitle("Edit Application") - this.resetApplication() - this.setModule(item) - this.$router.push({name: 'application_module', params: {id: item.appModuleId}}) - }, - resetApplication:function () { - console.log("Resetting") - this.restInterface() - this.resetDetails() - this.resetDeployment() - }, - newApplicationHandler:function () { - this.setTitle('Create New Application') - this.resetApplication() - this.$router.push({name: 'new_application_module'}) - } - , - ...mapActions({loadApplications: 'applications/modules/loadApplicationModules', setModule:'newApplication/setModule',setTitle:'newApplication/setTitle',restInterface:'newApplication/appInterfaceTab/resetState',resetDetails:'newApplication/appDetailsTab/resetState',resetDeployment:'newApplication/appDeploymentsTab/resetState'}), - } + ...mapActions({ + loadApplications: "applications/modules/loadApplicationModules" + }) } +}; </script> -<style scoped> - .new_app { - margin: 45px; - width: 100%; - background-color: #f7f7f7; - } - - .new_app_header{ - width: 100%; - display: inline; - } - - .new_app_header label{ - background-color: #2e73bc; - color: white; - border: solid #2e73bc 1px ; - border-radius: 3px; - float: right; - padding-right: 15px; - padding-left: 15px; - padding-bottom: 8px; - padding-top: 3px; - text-align: center; - } - - .new_app_header label:hover{ - cursor: pointer; - } - - .new_app_header label span{ - font-weight: 900; - font-size: 25px; - } - - .applications{ - margin-top: 50px; - } - - .ssh,.generate input{ - text-align: center; - } -</style> diff --git a/django_airavata/static/common/js/layouts/ListLayout.vue b/django_airavata/static/common/js/layouts/ListLayout.vue index a947934..3a28b7d 100644 --- a/django_airavata/static/common/js/layouts/ListLayout.vue +++ b/django_airavata/static/common/js/layouts/ListLayout.vue @@ -1,74 +1,82 @@ <template> - <div> - <div class="row"> - <div class="col"> - <slot name="title"> - <h1 class="h4 mb-4">{{ title }}</h1> - </slot> - </div> - <div class="col d-flex justify-content-end align-items-baseline"> - <slot name="new-item-button"> - <b-btn variant="primary" @click="addNewItem"> - {{ newItemButtonText }} <i class="fa fa-plus" aria-hidden="true"></i> - </b-btn> - </slot> - </div> - </div> - <div class="row"> - <div class="col"> - <div class="card"> - <div class="card-body"> - <slot name="item-list" :items="itemsList">Item List goes here</slot> - <pager v-if="itemsPaginator" :paginator="itemsPaginator" - next="nextItems" v-on:previous="previousItems"></pager> - </div> - </div> - </div> - </div> + <div> + <div class="row"> + <div class="col-auto mr-auto"> + <slot name="title"> + <h1 class="h4 mb-4">{{ title }}</h1> + </slot> + </div> + <div class="col-auto"> + <slot name="new-item-button"> + <b-btn variant="primary" @click="addNewItem"> + {{ newItemButtonText }} + <i class="fa fa-plus" aria-hidden="true"></i> + </b-btn> + </slot> + </div> </div> + <div v-if="subtitle" class="row"> + <div class="col"> + <h2 class="subtitle text-uppercase text-muted">{{ subtitle }}</h2> + </div> + </div> + <div class="row"> + <div class="col"> + <slot name="item-list" :items="itemsList">Item List goes here</slot> + <pager v-if="itemsPaginator" :paginator="itemsPaginator" next="nextItems" v-on:previous="previousItems"></pager> + </div> + </div> + </div> </template> <script> - -import { utils } from 'django-airavata-api' -import Pager from '../components/Pager.vue' +import { utils } from "django-airavata-api"; +import Pager from "../components/Pager.vue"; export default { - props: { - items: Array, - itemsPaginator: utils.PaginationIterator, - title: { - type: String, - default: "Items" - }, - newItemButtonText: { - type: String, - default: "New Item", - }, + props: { + items: Array, + itemsPaginator: utils.PaginationIterator, + title: { + type: String, + default: "Items" }, - name: 'list-layout', - data () { - return { - } + subtitle: { + type: String }, - components: { - 'pager': Pager, + newItemButtonText: { + type: String, + default: "New Item" + } + }, + name: "list-layout", + data() { + return {}; + }, + components: { + pager: Pager + }, + methods: { + nextItems: function(event) { + this.itemsPaginator.next(); }, - methods: { - nextItems: function(event) { - this.itemsPaginator.next(); - }, - previousItems: function(event) { - this.itemsPaginator.previous(); - }, - addNewItem: function() { - this.$emit('add-new-item'); - }, - }, - computed: { - itemsList: function() { - return this.itemsPaginator ? this.itemsPaginator.results : this.items; - }, + previousItems: function(event) { + this.itemsPaginator.previous(); }, + addNewItem: function() { + this.$emit("add-new-item"); + } + }, + computed: { + itemsList: function() { + return this.itemsPaginator ? this.itemsPaginator.results : this.items; + } + } +}; +</script> + +<style scoped> +.subtitle { + font-size: 14px; } -</script> \ No newline at end of file +</style>
