Adds expandable folder back.
Makes request to get environments
This commit is contained in:
parent
f6f56dddfc
commit
adec9194ef
|
@ -24,6 +24,7 @@ export default Vue.component('environment-component', {
|
|||
state: store.state,
|
||||
visibility: 'available',
|
||||
isLoading: false,
|
||||
isLoadingFolderContent: false,
|
||||
cssContainerClass: environmentsData.cssClass,
|
||||
endpoint: environmentsData.environmentsDataEndpoint,
|
||||
canCreateDeployment: environmentsData.canCreateDeployment,
|
||||
|
@ -68,15 +69,21 @@ export default Vue.component('environment-component', {
|
|||
this.fetchEnvironments();
|
||||
|
||||
eventHub.$on('refreshEnvironments', this.fetchEnvironments);
|
||||
eventHub.$on('toggleFolder', this.toggleFolder);
|
||||
},
|
||||
|
||||
beforeDestroyed() {
|
||||
eventHub.$off('refreshEnvironments');
|
||||
eventHub.$off('toggleFolder');
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggleRow(model) {
|
||||
return this.store.toggleFolder(model.name);
|
||||
toggleFolder(folder) {
|
||||
this.store.toggleFolder(folder);
|
||||
|
||||
if (!folder.isOpen) {
|
||||
this.fetchChildEnvironments(folder);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
|
@ -117,6 +124,24 @@ export default Vue.component('environment-component', {
|
|||
new Flash('An error occurred while fetching the environments.');
|
||||
});
|
||||
},
|
||||
|
||||
fetchChildEnvironments(folder) {
|
||||
this.isLoadingFolderContent = true;
|
||||
|
||||
this.service.getFolderContent(folder.folderName)
|
||||
.then(resp => resp.json())
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
this.store.folderContent(folder, response.environments);
|
||||
})
|
||||
.then(() => {
|
||||
this.isLoadingFolderContent = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.isLoadingFolderContent = false;
|
||||
new Flash('An error occurred while fetching the environments.');
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
template: `
|
||||
|
|
|
@ -6,6 +6,7 @@ import StopComponent from './environment_stop';
|
|||
import RollbackComponent from './environment_rollback';
|
||||
import TerminalButtonComponent from './environment_terminal_button';
|
||||
import CommitComponent from '../../vue_shared/components/commit';
|
||||
import eventHub from '../event_hub';
|
||||
|
||||
/**
|
||||
* Envrionment Item Component
|
||||
|
@ -391,16 +392,6 @@ export default {
|
|||
|
||||
return '';
|
||||
},
|
||||
|
||||
/**
|
||||
* Constructs folder URL based on the current location and the folder id.
|
||||
*
|
||||
* @return {String}
|
||||
*/
|
||||
folderUrl() {
|
||||
return `${window.location.pathname}/folders/${this.model.folderName}`;
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
|
@ -418,6 +409,12 @@ export default {
|
|||
return true;
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClickFolder() {
|
||||
eventHub.$emit('toggleFolder', this.model);
|
||||
},
|
||||
},
|
||||
|
||||
template: `
|
||||
<tr>
|
||||
<td>
|
||||
|
@ -426,7 +423,21 @@ export default {
|
|||
:href="environmentPath">
|
||||
{{model.name}}
|
||||
</a>
|
||||
<a v-else class="folder-name" :href="folderUrl">
|
||||
<span v-else
|
||||
class="folder-name"
|
||||
@click="onClickFolder">
|
||||
|
||||
<span class="folder-icon">
|
||||
<i
|
||||
v-show="model.isOpen"
|
||||
class="fa fa-caret-down"
|
||||
aria-hidden="true" />
|
||||
<i
|
||||
v-show="!model.isOpen"
|
||||
class="fa fa-caret-right"
|
||||
aria-hidden="true"/>
|
||||
</span>
|
||||
|
||||
<span class="folder-icon">
|
||||
<i class="fa fa-folder" aria-hidden="true"></i>
|
||||
</span>
|
||||
|
@ -438,7 +449,7 @@ export default {
|
|||
<span class="badge">
|
||||
{{model.size}}
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td class="deployment-column">
|
||||
|
|
|
@ -54,11 +54,10 @@ export default {
|
|||
:can-read-environment="canReadEnvironment"
|
||||
:service="service"></tr>
|
||||
|
||||
<tr v-if="model.isOpen && model.children && model.children.length > 0"
|
||||
<tr v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0"
|
||||
is="environment-item"
|
||||
v-for="children in model.children"
|
||||
:model="children"
|
||||
:toggleRow="toggleRow.bind(children)"
|
||||
:can-create-deployment="canCreateDeploymentParsed"
|
||||
:can-read-environment="canReadEnvironmentParsed"
|
||||
:service="service"></tr>
|
||||
|
|
|
@ -6,7 +6,14 @@ Vue.use(VueResource);
|
|||
|
||||
export default class EnvironmentsService {
|
||||
constructor(endpoint) {
|
||||
this.environments = Vue.resource(endpoint);
|
||||
/**
|
||||
* FIX ME: This should be sent by backend.
|
||||
*/
|
||||
const customActions = {
|
||||
folderContent: { method: 'GET', url: `${window.location.pathname}/folders{/name}?perPage=2` },
|
||||
};
|
||||
|
||||
this.environments = Vue.resource(endpoint, {}, customActions);
|
||||
}
|
||||
|
||||
get(scope, page) {
|
||||
|
@ -16,4 +23,9 @@ export default class EnvironmentsService {
|
|||
postAction(endpoint) {
|
||||
return Vue.http.post(endpoint, {}, { emulateJSON: true });
|
||||
}
|
||||
|
||||
getFolderContent(folderName) {
|
||||
debugger
|
||||
return this.environments.folderContent({ name: folderName });
|
||||
}
|
||||
}
|
||||
|
|
|
@ -38,7 +38,12 @@ export default class EnvironmentsStore {
|
|||
let filtered = {};
|
||||
|
||||
if (env.size > 1) {
|
||||
filtered = Object.assign({}, env, { isFolder: true, folderName: env.name });
|
||||
filtered = Object.assign({}, env, {
|
||||
isFolder: true,
|
||||
folderName: env.name,
|
||||
isOpen: false,
|
||||
children: [],
|
||||
});
|
||||
}
|
||||
|
||||
if (env.latest) {
|
||||
|
@ -86,7 +91,36 @@ export default class EnvironmentsStore {
|
|||
return count;
|
||||
}
|
||||
|
||||
toggleRow(name) {
|
||||
|
||||
/**
|
||||
* Toggles folder open property given the given folder.
|
||||
*
|
||||
* @param {String} envType
|
||||
* @return {Array}
|
||||
*/
|
||||
toggleFolder(folder) {
|
||||
return this.updateFolder(folder, 'isOpen', !folder.isOpen);
|
||||
}
|
||||
|
||||
folderContent(folder, environments) {
|
||||
debugger;
|
||||
return this.updateFolder(folder, 'children', environments);
|
||||
}
|
||||
|
||||
updateFolder(folder, prop, newValue) {
|
||||
const environments = this.state.environments;
|
||||
debugger;
|
||||
const updatedEnvironments = environments.map((env) => {
|
||||
const updateEnv = Object.assign({}, env);
|
||||
if (env.isFolder && env.id === folder.id) {
|
||||
updateEnv[prop] = newValue;
|
||||
}
|
||||
|
||||
return updateEnv;
|
||||
});
|
||||
debugger;
|
||||
|
||||
console.log(updatedEnvironments);
|
||||
this.state.environments = updatedEnvironments;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue