From: Benjamin Auder <benjamin.auder@somewhere>
Date: Fri, 18 Jan 2019 01:07:39 +0000 (+0100)
Subject: Finish fixing problems page
X-Git-Url: https://git.auder.net/img/vendor/vue.min.js?a=commitdiff_plain;h=9e76c73c4c4f403563e025968934f29b397b53b3;p=vchess.git

Finish fixing problems page
---

diff --git a/public/javascripts/components/problemSummary.js b/public/javascripts/components/problemSummary.js
index 3d579156..54602e05 100644
--- a/public/javascripts/components/problemSummary.js
+++ b/public/javascripts/components/problemSummary.js
@@ -10,7 +10,7 @@ Vue.component('my-problem-summary', {
 				<p v-html="prob.instructions"></p>
 				<p v-if="!!prob.preview" v-html="prob.solution"></p>
 				<p v-else class="problem-time">{{ timestamp2date(prob.added) }}</p>
-				<button @click="$emit('show-problem')">Show</button>
+				<button v-show="!preview" @click="$emit('show-problem')">Show</button>
 				<div v-show="prob.uid==userid && !preview" class="button-group">
 					<button @click="$emit('edit-problem')">Edit</button>
 					<button @click="$emit('delete-problem')">Delete</button>
diff --git a/public/javascripts/components/problems.js b/public/javascripts/components/problems.js
index 49e72b67..a9552923 100644
--- a/public/javascripts/components/problems.js
+++ b/public/javascripts/components/problems.js
@@ -182,8 +182,13 @@ Vue.component('my-problems', {
 		},
 		// TODO?: get 50 from server but only show 10 at a time (for example)
 		showNext: function(direction) {
+			const nomorePb =
+				problems => {
+					if (!problems || problems.length == 0)
+						this.noMoreProblems("No more problems in this direction");
+				};
 			if (!this.curProb)
-				return this.fetchProblems(this.display, direction);
+				return this.fetchProblems(this.display, direction, nomorePb);
 			// Show next problem (older or newer):
 			let curProbs = this.curProblems();
 			// Try to find a neighbour problem in the direction, among current set
@@ -195,9 +200,15 @@ Vue.component('my-problems', {
 			}
 			// Boundary case: nothing in current set, need to fetch from server
 			const curSize = curProbs.length;
-			this.fetchProblems(this.display, direction, () => {
-				// Ok, found something:
-				this.curProb = this.findClosestNeighbor(this.curProb, curProbs, direction);
+			this.fetchProblems(this.display, direction, problems => {
+				if (problems.length > 0)
+				{
+					// Ok, found something:
+					this.curProb =
+						this.findClosestNeighbor(this.curProb, curProbs, direction);
+				}
+				else
+					nomorePb();
 			});
 		},
 		findClosestNeighbor: function(problem, probList, direction) {
@@ -260,18 +271,19 @@ Vue.component('my-problems', {
 					last_dt: last_dt,
 				},
 				response => {
-					if (response.problems.length == 0)
-						return this.noMoreProblems("No more problems in this direction");
-					Array.prototype.push.apply(problems,
-						response.problems.sort((p1,p2) => { return p2.added - p1.added; }));
-					// If one list is empty but not the other, show the non-empty
-					const otherArray = (type == "mine" ? this.problems : this.myProblems);
-					if (problems.length > 0 && otherArray.length == 0)
-						this.display = type;
-					if (!!cb)
-						cb();
-					else
+					if (response.problems.length > 0)
+					{
+						Array.prototype.push.apply(problems, response.problems.sort(
+							(p1,p2) => { return p2.added - p1.added; }));
+						// If one list is empty but not the other, show the non-empty
+						const otherArray =
+							(type == "mine" ? this.problems : this.myProblems);
+						if (otherArray.length == 0)
+							this.display = type;
 						this.$forceUpdate(); //TODO...
+					}
+					if (!!cb)
+						cb(response.problems);
 				}
 			);
 		},
@@ -320,6 +332,8 @@ Vue.component('my-problems', {
 							instructions: this.modalProb.instructions,
 							solution: this.modalProb.solution,
 						});
+						if (!this.curProb && this.display != "mine")
+							this.display = "mine";
 					}
 					else
 						this.modalProb.id = 0;