Schedule system is finally running, still need to more testing :)

src/static/app/src/components/configurationComponents/peerJobs.vue

@@ -71,16 +71,11 @@ export default {
 		}
 	},
 	methods:{
-		
-		deleteJob(j, index){
-			if (j.CreationDate){
-
-			}else{
-				this.selectedPeer.jobs = this.selectedPeer.jobs.filter(x => x.JobID !== j.JobID)
-			}
+		deleteJob(j){
+			this.selectedPeer.jobs = this.selectedPeer.jobs.filter(x => x.JobID !== j.JobID)
 		},
 		addJob(){
-			this.selectedPeer.jobs.push(JSON.parse(JSON.stringify({
+			this.selectedPeer.jobs.unshift(JSON.parse(JSON.stringify({
 				JobID: crypto.randomUUID(),
 				Configuration: this.selectedPeer.configuration.Name,
 				Peer: this.selectedPeer.id,
@@ -100,7 +95,7 @@ export default {
 <template>
 	<div class="peerSettingContainer w-100 h-100 position-absolute top-0 start-0 overflow-y-scroll">
 		<div class="container d-flex h-100 w-100">
-			<div class="m-auto modal-dialog-centered dashboardModal">
+			<div class="m-auto modal-dialog-centered dashboardModal mt-0">
 				<div class="card rounded-3 shadow" style="width: 700px">
 					<div class="card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4 pb-2">
 						<h4 class="mb-0 fw-normal">Schedule Jobs
@@ -108,23 +103,29 @@ export default {
 						</h4>
 						<button type="button" class="btn-close ms-auto" @click="this.$emit('close')"></button>
 					</div>
-					<div class="card-body px-4 pb-4 pt-2">
+					<div class="card-body px-4 pb-4 pt-2 position-relative">
 						<div class="d-flex align-items-center mb-3">
-							<input class="form-control form-control-sm w-auto rounded-3" placeholder="Search Job...">
-							<button class="btn btn-sm btn-primary rounded-3 ms-auto" @click="this.addJob()">
+							<button class="btn btn-sm btn-primary rounded-3" @click="this.addJob()">
 								<i class="bi bi-plus-lg me-2"></i> Job
 							</button>
 						</div>
 
 
-						<TransitionGroup name="fade">
+						<TransitionGroup name="schedulePeerJobTransition" tag="div" class="position-relative">
 							<SchedulePeerJob
-								@refresh="this.$emit('refresh')"
+								@refresh="(j) => job = j"
 								@delete="this.deleteJob(job)"
 								:dropdowns="this.dropdowns"
 								:key="job.JobID"
 								:pjob="job" v-for="(job) in this.selectedPeer.jobs">
 							</SchedulePeerJob>
+							
+							<div class="card" key="none" v-if="this.selectedPeer.jobs.length === 0">
+								<div class="card-body text-muted text-center">
+									<h1><i class="bi bi-emoji-frown-fill"></i></h1>
+									<h6 class="mb-0">This peer does not have any job yet.</h6>
+								</div>
+							</div>
 						</TransitionGroup>
 					</div>
 				</div>
@@ -134,5 +135,22 @@ export default {
 </template>
 
 <style scoped>
+.schedulePeerJobTransition-move, /* apply transition to moving elements */
+.schedulePeerJobTransition-enter-active,
+.schedulePeerJobTransition-leave-active {
+	transition: all 0.4s cubic-bezier(0.82, 0.58, 0.17, 0.9);
+}
 
+.schedulePeerJobTransition-enter-from,
+.schedulePeerJobTransition-leave-to {
+	opacity: 0;
+	transform: scale(0.9);
+}
+
+/* ensure leaving items are taken out of layout flow so that moving
+   animations can be calculated correctly. */
+.schedulePeerJobTransition-leave-active {
+	position: absolute;
+	width: 100%;
+}
 </style>

src/static/app/src/components/configurationComponents/peerScheduleJobsComponents/scheduleDropdown.vue

@@ -24,11 +24,11 @@ export default {
 <template>
 	<div class="dropdown scheduleDropdown">
 		<button class="btn btn-sm btn-outline-primary rounded-3" 
-		        :class="{'disabled': !edit}" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+		        :class="{'disabled border-transparent': !edit}" type="button" data-bs-toggle="dropdown" aria-expanded="false">
 			<samp>{{this.currentSelection.display}}</samp>
 		</button>
 		<ul class="dropdown-menu rounded-3 shadow" style="font-size: 0.875rem; width: 200px">
-			<li v-for="x in this.options">
+			<li v-for="x in this.options" v-if="edit">
 				<a class="dropdown-item d-flex align-items-center" role="button" @click="$emit('update', x.value)">
 					<samp>{{x.display}}</samp>
 					<i class="bi bi-check ms-auto" v-if="x.value === this.currentSelection.value"></i>
@@ -42,8 +42,7 @@ export default {
 .btn.disabled{
 	opacity: 1;
 	background-color: rgba(13, 110, 253, 0.09);
+	border-color: transparent;
 }
-.btn{
-	//padding: 0.1rem 0.4rem;
-}
+
 </style>

src/static/app/src/components/configurationComponents/peerScheduleJobsComponents/schedulePeerJob.vue

@@ -31,7 +31,9 @@ export default {
 	watch:{
 		pjob: {
 			deep: true,
+			immediate: true,
 			handler(newValue){
+				console.log(newValue)
 				this.job = JSON.parse(JSON.stringify(newValue))
 			}
 		}	
@@ -45,7 +47,8 @@ export default {
 					if (res.status){
 						this.edit = false;
 						this.store.newMessage("Server", "Job Saved!", "success")
-						this.$emit("refresh")
+						this.$emit("refresh", this.data)
+						this.newJob = false;
 					}else{
 						this.store.newMessage("Server", res.message, "danger")
 					}
@@ -72,6 +75,22 @@ export default {
 			}else{
 				this.$emit('delete')
 			}
+		},
+		delete(){
+			if(this.job.CreationDate){
+				fetchPost(`/api/deletePeerScheduleJob/`, {
+					Job: this.job
+				}, (res) => {
+					if (!res.status){
+						this.store.newMessage("Server", res.message, "danger")
+						this.$emit('delete')
+					}else{
+						this.store.newMessage("Server", "Job Deleted!", "success")
+					}
+					
+				})
+			}
+			this.$emit('delete')
 		}
 	},
 }
@@ -137,6 +156,7 @@ export default {
 					   class="ms-auto text-decoration-none"
 					   @click="this.edit = true">[E] Edit</a>
 					<a role="button"
+					   @click="this.delete()"
 					   class=" text-danger text-decoration-none">[D] Delete</a>
 				</div>
 				<div class="ms-auto d-flex gap-3" v-else>
@@ -160,4 +180,9 @@ export default {
 input{
 	padding: 0.1rem 0.4rem;
 }
+input:disabled{
+	border-color: transparent;
+	background-color: rgba(13, 110, 253, 0.09);
+	color: #0d6efd;
+}
 </style>