Commit a7a13ed3 authored by Filipa Lacerda's avatar Filipa Lacerda

Update to vue 2

parent 30c6a7d3
...@@ -45,6 +45,7 @@ $(() => { ...@@ -45,6 +45,7 @@ $(() => {
helpPagePath: environmentsListApp.dataset.helpPagePath, helpPagePath: environmentsListApp.dataset.helpPagePath,
loading: true, loading: true,
visibility: 'available', visibility: 'available',
isLoading: this.loading,
}; };
}, },
...@@ -79,7 +80,7 @@ $(() => { ...@@ -79,7 +80,7 @@ $(() => {
* Fetches all the environmnets and stores them. * Fetches all the environmnets and stores them.
* Toggles loading property. * Toggles loading property.
*/ */
ready() { mounted() {
window.gl.environmentsService.all().then(resp => resp.json()).then((json) => { window.gl.environmentsService.all().then(resp => resp.json()).then((json) => {
this.store.storeEnvironments(json); this.store.storeEnvironments(json);
this.loading = false; this.loading = false;
...@@ -120,17 +121,13 @@ $(() => { ...@@ -120,17 +121,13 @@ $(() => {
<li v-bind:class="{ 'active': scope === undefined}"> <li v-bind:class="{ 'active': scope === undefined}">
<a :href="projectEnvironmentsPath"> <a :href="projectEnvironmentsPath">
Available Available
<span class="badge js-available-environments-count"> <span class="badge js-available-environments-count" v-html="state.availableCounter"></span>
{{state.availableCounter}}
</span>
</a> </a>
</li> </li>
<li v-bind:class="{ 'active': scope === 'stopped'}"> <li v-bind:class="{ 'active': scope === 'stopped'}">
<a :href="projectStoppedEnvironmentsPath"> <a :href="projectStoppedEnvironmentsPath">
Stopped Stopped
<span class="badge js-stopped-environments-count"> <span class="badge js-stopped-environments-count" v-html="state.stoppedCounter"></span>
{{state.stoppedCounter}}
</span>
</a> </a>
</li> </li>
</ul> </ul>
...@@ -179,7 +176,7 @@ $(() => { ...@@ -179,7 +176,7 @@ $(() => {
v-for="model in filteredEnvironments" v-for="model in filteredEnvironments"
:model="model" :model="model"
:can-create-deployment="canCreateDeploymentParsed" :can-create-deployment="canCreateDeploymentParsed"
:can-read-environment="canReadEnvironmentParsed"> :can-read-environment="canReadEnvironmentParsed"></tr>
</tbody> </tbody>
</table> </table>
</div> </div>
......
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
* TODO: Remove this when webpack is merged. * TODO: Remove this when webpack is merged.
* *
*/ */
ready() { mounted() {
const playIcon = document.querySelector('.play-icon-svg.hidden svg'); const playIcon = document.querySelector('.play-icon-svg.hidden svg');
const dropdownContainer = this.$el.querySelector('.dropdown-play-icon-container'); const dropdownContainer = this.$el.querySelector('.dropdown-play-icon-container');
...@@ -52,9 +52,7 @@ ...@@ -52,9 +52,7 @@
<span class="action-play-icon-container"> <span class="action-play-icon-container">
<!-- svg goes here --> <!-- svg goes here -->
</span> </span>
<span> <span v-html="action.name"></span>
{{action.name}}
</span>
</a> </a>
</li> </li>
</ul> </ul>
......
...@@ -254,6 +254,20 @@ ...@@ -254,6 +254,20 @@
isLastDeployment() { isLastDeployment() {
return this.model.last_deployment && this.model.last_deployment['last?']; return this.model.last_deployment && this.model.last_deployment['last?'];
}, },
buildName() {
if (this.model.last_deployment && this.model.last_deployment.deployable) {
return `${this.model.last_deployment.deployable.name} #${this.model.last_deployment.deployable.id}`;
}
return undefined;
},
deploymentInternalId() {
if (this.model.last_deployment) {
return `#${this.model.last_deployment.iid}`;
}
return '';
},
}, },
/** /**
...@@ -282,8 +296,11 @@ ...@@ -282,8 +296,11 @@
template: ` template: `
<tr> <tr>
<td v-bind:class="{ 'children-row': isChildren}" class="col-sm-2"> <td v-bind:class="{ 'children-row': isChildren}" class="col-sm-2">
<a v-if="!isFolder" class="environment-name" :href="model.environment_url"> <a
{{model.name}} v-if="!isFolder"
class="environment-name"
:href="model.environment_url"
v-html="model.name">
</a> </a>
<span v-else v-on:click="toggle" class="folder-name"> <span v-else v-on:click="toggle" class="folder-name">
<span class="folder-icon"> <span class="folder-icon">
...@@ -291,17 +308,14 @@ ...@@ -291,17 +308,14 @@
<i v-show="!open" class="fa fa-caret-right"></i> <i v-show="!open" class="fa fa-caret-right"></i>
</span> </span>
{{model.name}} <span v-html="model.name"></span>
<span class="badge"> <span class="badge" v-html="childrenCounter"></span>
{{childrenCounter}}
</span>
</span> </span>
</td> </td>
<td class="deployment-column col-sm-2"> <td class="deployment-column col-sm-2">
<span v-if="!isFolder && model.last_deployment && model.last_deployment.iid"> <span v-if="!isFolder && model.last_deployment && model.last_deployment.iid" v-html="deploymentInternalId">
#{{model.last_deployment.iid}}
<span v-if="model.last_deployment.user"> <span v-if="model.last_deployment.user">
by by
...@@ -318,8 +332,8 @@ ...@@ -318,8 +332,8 @@
<td class="col-sm-2"> <td class="col-sm-2">
<a v-if="!isFolder && model.last_deployment && model.last_deployment.deployable" <a v-if="!isFolder && model.last_deployment && model.last_deployment.deployable"
class="build-link" class="build-link"
:href="model.last_deployment.deployable.build_url"> :href="model.last_deployment.deployable.build_url"
{{model.last_deployment.deployable.name}} #{{model.last_deployment.deployable.id}} v-html="buildName">
</a> </a>
</td> </td>
...@@ -340,8 +354,10 @@ ...@@ -340,8 +354,10 @@
</td> </td>
<td class="col-sm-1"> <td class="col-sm-1">
<span v-if="!isFolder && model.last_deployment" class="environment-created-date-timeago"> <span
{{createdDate}} v-if="!isFolder && model.last_deployment"
class="environment-created-date-timeago"
v-html="createdDate">
</span> </span>
</td> </td>
......
...@@ -3,11 +3,10 @@ Vue.http.interceptors.push((request, next) => { ...@@ -3,11 +3,10 @@ Vue.http.interceptors.push((request, next) => {
Vue.activeResources = Vue.activeResources ? Vue.activeResources + 1 : 1; Vue.activeResources = Vue.activeResources ? Vue.activeResources + 1 : 1;
next(function (response) { next(function (response) {
console.log("this is the repsponse", JSON.stringify(response, null, ' '));
if (typeof response.data === "string") { if (typeof response.data === "string") {
response.data = JSON.parse(response.data) response.data = JSON.parse(response.data)
} }
Vue.activeResources--; Vue.activeResources--;
}); });
}); });
...@@ -119,7 +119,7 @@ ...@@ -119,7 +119,7 @@
* *
* TODO: Find a better way to include SVG * TODO: Find a better way to include SVG
*/ */
ready() { mounted() {
const commitIconContainer = this.$el.querySelector('.commit-icon-container'); const commitIconContainer = this.$el.querySelector('.commit-icon-container');
const commitIcon = document.querySelector('.commit-icon-svg.hidden svg'); const commitIcon = document.querySelector('.commit-icon-svg.hidden svg');
...@@ -136,22 +136,27 @@ ...@@ -136,22 +136,27 @@
<i v-else class="fa fa-code-fork"></i> <i v-else class="fa fa-code-fork"></i>
</div> </div>
<a v-if="hasRef" class="monospace branch-name" :href="ref.ref_url"> <a v-if="hasRef"
{{ref.name}} class="monospace branch-name"
:href="ref.ref_url"
v-html="ref.name">
</a> </a>
<div class="icon-container commit-icon commit-icon-container"> <div class="icon-container commit-icon commit-icon-container">
<!-- svg goes here --> <!-- svg goes here -->
</div> </div>
<a class="commit-id monospace" :href="commit_url"> <a class="commit-id monospace"
{{short_sha}} :href="commit_url"
v-html="short_sha">
</a> </a>
<p class="commit-title"> <p class="commit-title">
<span v-if="title"> <span v-if="title">
<!-- commit author info--> <!-- commit author info-->
<a v-if="hasAuthor" class="avatar-image-container" :href="author.web_url"> <a v-if="hasAuthor"
class="avatar-image-container"
:href="author.web_url">
<img <img
class="avatar has-tooltip s20" class="avatar has-tooltip s20"
:src="author.avatar_url" :src="author.avatar_url"
...@@ -159,8 +164,8 @@ ...@@ -159,8 +164,8 @@
:title="author.username" /> :title="author.username" />
</a> </a>
<a class="commit-row-message" :href="commit_url"> <a class="commit-row-message"
{{title}} :href="commit_url" v-html="title">
</a> </a>
</span> </span>
<span v-else> <span v-else>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment