From df4d731a4d0b3a4d76c13da3f192dbbf4a0bdb07 Mon Sep 17 00:00:00 2001 From: simon Date: Mon, 12 Oct 2020 22:43:23 +0200 Subject: [PATCH 1/3] fix: search by job name, small side bar design fixe and toggle improvements looked like name was already implemented in the api, but got lost on frontend ;) (cherry picked from commit f045f682efb16ebaf792e0ffa2c871f5fb5abc32) --- public/app/css/styles.css | 2 +- public/app/js/joblist.js | 26 +++++++++++++++++--------- public/app/js/main.js | 15 ++++++++------- public/app/js/sidebar.js | 8 ++++---- public/app/js/topbar.js | 28 ++++++++++++++-------------- 5 files changed, 44 insertions(+), 35 deletions(-) diff --git a/public/app/css/styles.css b/public/app/css/styles.css index 1fd6585..7fb3cca 100644 --- a/public/app/css/styles.css +++ b/public/app/css/styles.css @@ -38,7 +38,7 @@ background: #000000; } .sidebar { - max-height: 100vh; + max-height: calc(100vh - 45px); overflow-y: scroll; } diff --git a/public/app/js/joblist.js b/public/app/js/joblist.js index 1e1d312..2a7d142 100644 --- a/public/app/js/joblist.js +++ b/public/app/js/joblist.js @@ -53,14 +53,22 @@ const jobList = Vue.component('job-list', { for (const checkbox of checkboxes) { checkbox.click(); } + }, + toggleList(job) { + if(this.multijobs.includes(job.job._id)) { + this.multijobs.splice(this.multijobs.indexOf(job.job._id), 1); + } else { + this.multijobs.push(job.job._id); + } } }, template: `
-
+
- - + {{ multijobs.length }} jobs selected + +
@@ -121,11 +129,11 @@ const jobList = Vue.component('job-list', { Failed Running - {{job.job.name}} - {{ formatDate(job.job.lastRunAt) }} - {{ formatDate(job.job.nextRunAt) }} - {{ formatDate(job.job.lastFinishedAt) }} - {{ job.job.lockedAt ? formatDate(job.job.lockedAt) : "" }} + {{job.job.name}} + {{ formatDate(job.job.lastRunAt) }} + {{ formatDate(job.job.nextRunAt) }} + {{ formatDate(job.job.lastFinishedAt) }} + {{ formatDate(job.job.lockedAt) }} update visibility @@ -141,7 +149,7 @@ const jobList = Vue.component('job-list', {
-
+
{{job.job.name}}
diff --git a/public/app/js/main.js b/public/app/js/main.js index f620cef..356b6ee 100644 --- a/public/app/js/main.js +++ b/public/app/js/main.js @@ -65,9 +65,9 @@ const app = Vue.component('app', { this.jobData = data; this.showNewJob = true; }, - searchForm(search, property, limit, skip, refresh, state, object){ + searchForm(name, search, property, limit, skip, refresh, state, object){ this.pagesize = limit ? limit : this.pagesize, - this.name = 'name', + this.name = name, this.search = search, this.property = property, @@ -76,10 +76,10 @@ const app = Vue.component('app', { this.state = state, this.object = object ? object : this.object, - this.fetchData(this.search, this.property, this.pagesize, this.skip, this.refresh, this.state, this.object) + this.fetchData(this.name, this.search, this.property, this.pagesize, this.skip, this.refresh, this.state, this.object) }, refreshData() { - this.fetchData(this.search, this.property, this.pagesize, this.skip, this.refresh, this.state, this.object) + this.fetchData(this.name, this.search, this.property, this.pagesize, this.skip, this.refresh, this.state, this.object) }, pagechange(action){ @@ -90,13 +90,13 @@ const app = Vue.component('app', { this.pagenumber-- } this.skip = (this.pagenumber-1) * this.pagesize - this.fetchData(this.search, this.property, this.pagesize, this.skip, this.refresh,this.state, this.object) + this.fetchData(this.name, this.search, this.property, this.pagesize, this.skip, this.refresh,this.state, this.object) }, - fetchData(search = '', property = '', limit = 15, skip = 0, refresh = 60, state = '', object){ + fetchData(name = '', search = '', property = '', limit = 15, skip = 0, refresh = 60, state = '', object){ this.loading = true; this.pagesize = this.pagesize === 0 ? parseInt(limit) : this.pagesize; this.refresh = parseFloat(refresh); - const url = `api?limit=${limit}&skip=${skip}&property=${property}${object ? '&isObjectId=true' : ""}${state ? `&state=${state}`: ''}&q=${search}`; + const url = `api?limit=${limit}&job=${name}&skip=${skip}&property=${property}${object ? '&isObjectId=true' : ""}${state ? `&state=${state}`: ''}&q=${search}`; return axios.get(url) .then(result => result.data) .then( @@ -152,6 +152,7 @@ const app = Vue.component('app', { return this.fetchData(); }, template: ` +
diff --git a/public/app/js/sidebar.js b/public/app/js/sidebar.js index 194d20b..1d0fbb1 100644 --- a/public/app/js/sidebar.js +++ b/public/app/js/sidebar.js @@ -24,16 +24,16 @@ const sidebar = Vue.component('sidebar', { searchSpecificJob(job, type){ if(job === 'All Jobs'){ if(type){ - this.$emit('search-sidebar','','',this.pagesize,'','',type,'',); + this.$emit('search-sidebar','','','',this.pagesize,'','',type,'',); } else { - this.$emit('search-sidebar','','',this.pagesize,'','','','',); + this.$emit('search-sidebar','','','',this.pagesize,'','','','',); } } else if(type){ - this.$emit('search-sidebar',job,'name',this.pagesize,'','',type,'',) + this.$emit('search-sidebar',job,'','',this.pagesize,'','',type,'',) } else { - this.$emit('search-sidebar', job, 'name',this.pagesize,'','','',); + this.$emit('search-sidebar', job, '','',this.pagesize,'','','',); } } }, diff --git a/public/app/js/topbar.js b/public/app/js/topbar.js index 1a96d02..7b740c3 100644 --- a/public/app/js/topbar.js +++ b/public/app/js/topbar.js @@ -21,34 +21,34 @@ const topbar = Vue.component("topbar", { }), methods: { submit() { - console.log(search); + this.$emit('search-form', this.name, this.search, this.property, this.limit, this.skip, this.refresh, this.state, this.object) } }, template: ` -
+
Name
- +
- Search -
- -
- - + Property
+
- Property + Value +
+ +
+ +
-
@@ -76,10 +76,10 @@ const topbar = Vue.component("topbar", {
- - + +
-
+
` }); From 6c5ee6e6c60e7dc56c2e0849dbba6435e5f5018e Mon Sep 17 00:00:00 2001 From: simon Date: Fri, 16 Oct 2020 00:27:07 +0200 Subject: [PATCH 2/3] fix: joblist reset fix --- public/app/js/joblist.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/public/app/js/joblist.js b/public/app/js/joblist.js index 2a7d142..4b76184 100644 --- a/public/app/js/joblist.js +++ b/public/app/js/joblist.js @@ -25,6 +25,12 @@ const jobList = Vue.component('job-list', { }); } }, + watch: { + jobs() { + // reset multijobs when jobs have changed + this.multijobs = []; + } + }, methods: { sort(s) { //if s == current sort, reverse @@ -35,11 +41,11 @@ const jobList = Vue.component('job-list', { }, sendQueued(){ this.$emit('confirm-multi-requeue', this.multijobs) - this.multijobs = [] + // this.multijobs = [] }, sendDelete(){ this.$emit('confirm-multi-delete', this.multijobs) - this.multijobs = [] + // this.multijobs = [] }, cleanMulti() { return console.log("received Clean Multi") From bf2edfd8e38f31c2c6edb6125d053df572743a3d Mon Sep 17 00:00:00 2001 From: simon Date: Mon, 12 Oct 2020 23:06:18 +0200 Subject: [PATCH 3/3] fix: improve design on desktop + close sidebar on mobile when clicked on something (cherry picked from commit 200d2bb6d1d820749f7215bf4f529f95a33da38b) --- public/app/css/styles.css | 7 ++++++- public/app/js/main.js | 4 ++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/public/app/css/styles.css b/public/app/css/styles.css index 7fb3cca..27d7b55 100644 --- a/public/app/css/styles.css +++ b/public/app/css/styles.css @@ -37,7 +37,12 @@ ::-webkit-scrollbar-thumb:hover { background: #000000; } -.sidebar { + +body { + overflow-y: hidden; +} + +.sidebar, main { max-height: calc(100vh - 45px); overflow-y: scroll; } diff --git a/public/app/js/main.js b/public/app/js/main.js index 356b6ee..c3d0ab6 100644 --- a/public/app/js/main.js +++ b/public/app/js/main.js @@ -161,7 +161,7 @@ const app = Vue.component('app', { Agendash 2
-