Skip to content
This repository has been archived by the owner on Feb 1, 2021. It is now read-only.

Commit

Permalink
Merge pull request #27 from hokify/fix/small-frontend-things
Browse files Browse the repository at this point in the history 
fix: search by job name, small side bar design fixe and toggle list improvements
  • Loading branch information
@santiq
santiq authored Oct 16, 2020
2 parents 3895fcb + bf2edfd commit f037497
Show file tree
Hide file tree
Showing 5 changed files with 60 additions and 40 deletions.
9 changes: 7 additions & 2 deletions public/app/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,13 @@
::-webkit-scrollbar-thumb:hover {
background: #000000;
}
.sidebar {
max-height: 100vh;

body {
overflow-y: hidden;
}

.sidebar, main {
max-height: calc(100vh - 45px);
overflow-y: scroll;
}

Expand Down
36 changes: 25 additions & 11 deletions public/app/js/joblist.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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")
Expand All @@ -53,14 +59,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: `
<div v-on:sendClean="cleanMulti">
<div v-if="multijobs.length > 0" >
<div >
<div class="d-flex justify-content-end mb-2">
<button data-toggle="modal" data-target="#modalRequeueSureMulti" @click="sendQueued" class="btn btn-primary mr-2" data-placement="top" title="Requeue list of selecteds Jobs"> Multiple Requeue </button>
<button data-toggle="modal" data-target="#modalDeleteSureMulti" @click="sendDelete" class="btn btn-danger" data-placement="top" title="Delete list of selecteds Jobs"> Multiple Delete </button>
<span class="mr-2">{{ multijobs.length }} jobs selected</span>
<button :disabled="!multijobs.length" data-toggle="modal" data-target="#modalRequeueSureMulti" @click="sendQueued" class="btn btn-primary mr-2" data-placement="top" title="Requeue list of selecteds Jobs"> Multiple Requeue </button>
<button :disabled="!multijobs.length" data-toggle="modal" data-target="#modalDeleteSureMulti" @click="sendDelete" class="btn btn-danger" data-placement="top" title="Delete list of selecteds Jobs"> Multiple Delete </button>
</div>
</div>
Expand Down Expand Up @@ -121,11 +135,11 @@ const jobList = Vue.component('job-list', {
<i v-if="job.failed" class="pill-own bg-danger pill-withoutIcon"><span>Failed</span></i>
<i v-if="job.running" class="pill-own bg-warning pill-withoutIcon"><span>Running</span></i>
</td>
<td class="job-name"> {{job.job.name}} </td>
<td class="job-lastRunAt"> {{ formatDate(job.job.lastRunAt) }} </td>
<td class="job-nextRunAt"> {{ formatDate(job.job.nextRunAt) }} </td>
<td class="job-finishedAt"> {{ formatDate(job.job.lastFinishedAt) }} </td>
<td class="job-lockedAt"> {{ job.job.lockedAt ? formatDate(job.job.lockedAt) : "" }} </td>
<td class="job-name" @click="toggleList(job)"> {{job.job.name}} </td>
<td class="job-lastRunAt" @click="toggleList(job)"> {{ formatDate(job.job.lastRunAt) }} </td>
<td class="job-nextRunAt" @click="toggleList(job)"> {{ formatDate(job.job.nextRunAt) }} </td>
<td class="job-finishedAt" @click="toggleList(job)"> {{ formatDate(job.job.lastFinishedAt) }} </td>
<td class="job-lockedAt" @click="toggleList(job)"> {{ formatDate(job.job.lockedAt) }} </td>
<td class="job-actions">
<i class="material-icons md-dark md-custom action-btn viewData text-primary" data-toggle="modal" data-target="#modalRequeueSure" @click="$emit('confirm-requeue', job)" data-placement="left" title="Requeue">update</i>
<i class="material-icons md-dark md-custom action-btn viewData text-success" data-toggle="modal" data-target="#modalData" @click="$emit('show-job-detail', job)" data-placement="top" title="Job Data">visibility</i>
Expand All @@ -141,7 +155,7 @@ const jobList = Vue.component('job-list', {
<div v-for="job in sortedJobs" class="col col-xs-6 order-1 p-1">
<div class="card bg-light" >
<div class="card-header card-responsive-title-container">
<div class="card-responsive-name">
<div class="card-responsive-name" @click="toggleList(job)">
{{job.job.name}}
</div>
<div class="d-flex align-items-center">
Expand Down
19 changes: 10 additions & 9 deletions public/app/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,

Expand All @@ -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){

Expand All @@ -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(
Expand Down Expand Up @@ -152,6 +152,7 @@ const app = Vue.component('app', {
return this.fetchData();
},
template: `
<div class="container-fluid">
<div class="">
<div class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
Expand All @@ -160,7 +161,7 @@ const app = Vue.component('app', {
<a class="navbar-brand col-sm-10 col-md-10 mr-0 tittle"> Agendash 2</a>
</div>
<div class='d-md-none w-50'>
<div id="mySidebar" class="sidebar-collapse">
<div id="mySidebar" class="sidebar-collapse" @click="closeNav()">
<a href="javascript:void(0)" class="closebtn" @click="closeNav()">&times;</a>
<div v-if="hideSlide === false" class="bg-light overflow-auto">
<sidebar
Expand Down Expand Up @@ -220,7 +221,7 @@ const app = Vue.component('app', {
</div>
</main>
</div>
<div class="row bg-dark py-3">
<div class="row bg-dark py-3" v-if="false">
<div class="col-6 m-auto text-light text-center">
<small>Made with ❤ by <a class="text-light" href="https://www.softwareontheroad.com/about" target="_BLANK">Software On The Road</a></small>
</div>
Expand Down
8 changes: 4 additions & 4 deletions public/app/js/sidebar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,'','','',);
}
}
},
Expand Down
28 changes: 14 additions & 14 deletions public/app/js/topbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: `
<div>
<form @submit.prevent="submit">
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="input-group mt-2 mb-2">
<div class="input-group-prepend">
<span class="input-group-text"> Name </span>
</div>
<input type="text" class="form-control" v-model='name'/>
<input type="text" class="form-control" placeholder="job name" v-model='name'/>
</div>
<div class="input-group mt-2 mb-2">
<div class="input-group-prepend">
<span class="input-group-text"> Search </span>
</div>
<input class="form-control" v-model="search" />
<div class="form-check mx-2 pt-2">
<input type="checkbox" v-model="object" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1"> Is ObjectId?</label>
<span class="input-group-text"> Property </span>
</div>
<input type="text" class="form-control" placeholder="data.color" v-model="property" />
</div>
<div class="input-group mt-2 mb-2">
<div class="input-group-prepend">
<span class="input-group-text"> Property </span>
<span class="input-group-text"> Value </span>
</div>
<input class="form-control" v-model="search" placeholder="green"/>
<div class="form-check mx-2 pt-2">
<input type="checkbox" v-model="object" class="form-check-input" id="isObjectId">
<label class="form-check-label" for="isObjectId"> Is ObjectId?</label>
</div>
<input type="text" class="form-control" v-model="property" />
</div>
</div>
<div class="col-xs-12 col-md-6">
Expand Down Expand Up @@ -76,10 +76,10 @@ const topbar = Vue.component("topbar", {
</div>
<div class="row mb-3">
<div class="col-xs-12 col-md-3 ml-auto text-right">
<button @click="$emit('search-form', search, property, limit, skip, refresh, state, object)" class="d-none d-md-inline-block btn btn-success"> Apply </button>
<button @click="$emit('search-form', search, property, limit, skip, refresh, state, object)" class="d-none d-inline-block d-md-none btn btn-block btn-success"> Apply </button>
<button type=submit @click="$emit('search-form', name, search, property, limit, skip, refresh, state, object)" class="d-none d-md-inline-block btn btn-success"> Apply </button>
<button type=submit @click="$emit('search-form', name, search, property, limit, skip, refresh, state, object)" class="d-none d-inline-block d-md-none btn btn-block btn-success"> Apply </button>
</div>
</div>
</div>
</form>
`
});

0 comments on commit f037497

Please sign in to comment.