Skip to content

Commit 64d4bad

Browse files
antonkomarevantonkomarev
authored
Unlock installer after Job termination (#47)
* More obvious state variables names * Fix redirect to jobs list * Add top menu badge * Add jobs auto-refresh * Restore auto refreshing jobs after page reload
1 parent 1600b27 commit 64d4bad

File tree

13 files changed

+148
-97
lines changed

13 files changed

+148
-97
lines changed

‎CHANGELOG.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,12 @@ All notable changes to `cybercog/laravel-paket` will be documented in this file.
77
### Added
88

99
- ([#39]) Add jobs deletion
10+
- ([#47]) Add job status badge in top menu
1011

1112
### Fixed
1213

13-
- ([#42]) Lock UI when Job in progress
14+
- ([#42]) Lock installer when Job in progress
15+
- ([#47]) Unlock installer when Job in progress
1416

1517
## [1.3.0]
1618

@@ -51,7 +53,9 @@ All notable changes to `cybercog/laravel-paket` will be documented in this file.
5153
[1.2.0]: https://github.com/cybercog/laravel-paket/compare/1.1.0...1.2.0
5254
[1.1.0]: https://github.com/cybercog/laravel-paket/compare/1.0.0...1.1.0
5355

56+
[#47]: https://github.com/cybercog/laravel-paket/pull/47
5457
[#42]: https://github.com/cybercog/laravel-paket/pull/42
58+
[#39]: https://github.com/cybercog/laravel-paket/pull/39
5559
[#35]: https://github.com/cybercog/laravel-paket/pull/35
5660
[#33]: https://github.com/cybercog/laravel-paket/pull/33
5761
[#32]: https://github.com/cybercog/laravel-paket/pull/32

‎resources/js/app.js‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,10 @@
1-
import Axios from 'axios';
21
import Vue from 'vue';
32
import VueRouter from 'vue-router';
43

54
import globals from './globals';
65
import routes from './routes';
76
import store from './store';
87

9-
const token = document.head.querySelector('meta[name="csrf-token"]');
10-
11-
if (token) {
12-
Axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
13-
}
14-
158
Vue.use(VueRouter);
169

1710
const router = new VueRouter({
@@ -20,6 +13,8 @@ const router = new VueRouter({
2013
base: '/' + window.Paket.baseUri,
2114
});
2215

16+
Vue.component('top-menu', require('./components/TopMenu.vue').default);
17+
2318
Vue.mixin(globals);
2419

2520
new Vue({
@@ -28,4 +23,16 @@ new Vue({
2823
router,
2924

3025
store,
26+
27+
created() {
28+
this.fetchData();
29+
},
30+
31+
methods: {
32+
async fetchData() {
33+
// Need it to run jobs state checker after page reload
34+
await this.$store.dispatch('autoRefreshJobs');
35+
await this.$store.dispatch('collectRequirements');
36+
},
37+
},
3138
});

‎resources/js/components/Job/OptionsMenu.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,11 @@
6767
title: 'Job Deleted!',
6868
});
6969
70-
await this.$router.replace('/jobs');
70+
if (this.$router.currentRoute.name !== 'jobs') {
71+
await this.$router.replace({
72+
name: 'jobs',
73+
});
74+
}
7175
}
7276
},
7377
},

‎resources/js/components/Paket.vue‎ renamed to ‎resources/js/components/PaketCard.vue‎

File renamed without changes.

‎resources/js/components/Requirement/InstallButton.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@
2424
type: 'RequirementInstall',
2525
requirement: this.requirement,
2626
});
27+
28+
await this.$store.dispatch('autoRefreshJobs');
2729
} catch (exception) {
2830
this.alertError(exception);
2931
}
@@ -45,7 +47,7 @@
4547
},
4648
4749
isDisabled() {
48-
return this.$store.state.isComposerBusy
50+
return this.$store.state.isInstallerLocked
4951
|| this.$store.getters.getActiveJobs().length > 0;
5052
},
5153

‎resources/js/components/Requirement/InstallForm.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,8 @@
5353
type: 'RequirementInstall',
5454
requirement: this.requirement,
5555
});
56+
57+
await this.$store.dispatch('autoRefreshJobs');
5658
} catch (exception) {
5759
this.alertError(exception);
5860
}
@@ -61,7 +63,7 @@
6163
},
6264
6365
isDisabled() {
64-
return this.$store.state.isComposerBusy
66+
return this.$store.state.isInstallerLocked
6567
|| this.$store.getters.getActiveJobs().length > 0;
6668
},
6769

‎resources/js/components/Requirement/UninstallButton.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@
2424
type: 'RequirementUninstall',
2525
requirement: this.requirement,
2626
});
27+
28+
await this.$store.dispatch('autoRefreshJobs');
2729
} catch (exception) {
2830
this.alertError(exception);
2931
}
@@ -45,7 +47,7 @@
4547
},
4648
4749
isDisabled() {
48-
return this.$store.state.isComposerBusy
50+
return this.$store.state.isInstallerLocked
4951
|| this.$store.getters.getActiveJobs().length > 0;
5052
},
5153

‎resources/js/components/TopMenu.vue‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<template>
2+
<div class="bg-white sticky top-0">
3+
<nav class="flex items-center justify-between flex-wrap container mx-auto border-b">
4+
<div class="flex items-center flex-shrink-0 text-white mr-6">
5+
<span class="text-2xl tracking-tight">
6+
<router-link to="/" class="text-indigo-900 py-2">
7+
Paket
8+
</router-link>
9+
</span>
10+
</div>
11+
<div class="block lg:hidden">
12+
<button class="flex items-center px-3 py-2 border rounded text-purple-700 border-gray-400 hover:text-white hover:border-white">
13+
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
14+
</button>
15+
</div>
16+
<div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
17+
<div class="lg:flex-grow text-indigo-700">
18+
<router-link active-class="text-indigo-900 border-indigo-700 border-b-2" :to="{name: 'dashboard'}" class="block py-3 lg:inline-block lg:mt-0 hover:text-indigo-900 mr-4">
19+
Dashboard
20+
</router-link>
21+
<router-link active-class="text-indigo-900 border-indigo-700 border-b-2" :to="{name: 'laravel'}" class="block py-3 lg:inline-block lg:mt-0 hover:text-indigo-900 mr-4">
22+
Laravel
23+
</router-link>
24+
<router-link active-class="text-indigo-900 border-indigo-700 border-b-2" :to="{name: 'requirements'}" class="block py-3 lg:inline-block lg:mt-0 hover:text-indigo-900 mr-4">
25+
Requirements
26+
</router-link>
27+
<router-link active-class="text-indigo-900 border-indigo-700 border-b-2" :to="{name: 'jobs'}" class="block py-3 lg:inline-block lg:mt-0 hover:text-indigo-900">
28+
Jobs
29+
<span :class="getJobsBadgeClass()"></span>
30+
</router-link>
31+
</div>
32+
<div class="hidden">
33+
<a href="#console" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-indigo-900 hover:bg-white mt-4 lg:mt-0">Console</a>
34+
</div>
35+
</div>
36+
</nav>
37+
</div>
38+
</template>
39+
40+
<script>
41+
export default {
42+
methods: {
43+
getJobsBadgeClass() {
44+
const activeJobs = this.$store.getters.getActiveJobs();
45+
46+
if (activeJobs.length === 0) {
47+
return 'hidden';
48+
}
49+
50+
const latestJob = activeJobs[0];
51+
52+
const classes = `absolute pin-r pin-t -mt-2 -mr-2 rounded-full p-1 text-xs shadow w-3 h-3`;
53+
let statusClasses = '';
54+
55+
if (latestJob.status === 'Pending') {
56+
statusClasses = 'bg-yellow-300 border border-yellow-500';
57+
} else if (latestJob.status === 'Running') {
58+
statusClasses = 'bg-blue-300 border border-blue-500';
59+
}
60+
61+
return `${classes} ${statusClasses}`;
62+
},
63+
},
64+
}
65+
</script>

‎resources/js/screens/dashboard/index.vue‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -81,19 +81,7 @@
8181

8282
<script>
8383
export default {
84-
data() {
85-
return {};
86-
},
87-
88-
mounted() {
89-
this.fetchData();
90-
},
91-
9284
methods: {
93-
async fetchData() {
94-
await this.$store.dispatch('collectRequirements');
95-
},
96-
9785
getRequirementVersion(name) {
9886
let version;
9987

‎resources/js/screens/laravel/index.vue‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<div class="w-1/3" v-for="paket in pakets">
77
<div class="rounded overflow-hidden shadow mt-6 mx-2">
88
<div class="px-6 py-4">
9-
<Paket :paket="paket"/>
9+
<paket-card :paket="paket"/>
1010
</div>
1111
</div>
1212
</div>
@@ -15,11 +15,11 @@
1515
</template>
1616

1717
<script>
18-
import Paket from '../../components/Paket';
18+
import PaketCard from '../../components/PaketCard';
1919
2020
export default {
2121
components: {
22-
Paket,
22+
PaketCard,
2323
},
2424
2525
data() {
@@ -85,16 +85,7 @@
8585
};
8686
},
8787
88-
beforeMount() {
89-
this.fetchData();
90-
},
91-
9288
methods: {
93-
async fetchData() {
94-
await this.$store.dispatch('collectRequirements');
95-
await this.$store.dispatch('collectJobs');
96-
},
97-
9889
getRequirements(level, environment) {
9990
const requirements = this.$store.state.requirements;
10091

0 commit comments

Comments
 (0)