From 9e76c73c4c4f403563e025968934f29b397b53b3 Mon Sep 17 00:00:00 2001 From: Benjamin Auder <benjamin.auder@somewhere> Date: Fri, 18 Jan 2019 02:07:39 +0100 Subject: [PATCH] Finish fixing problems page --- .../javascripts/components/problemSummary.js | 2 +- public/javascripts/components/problems.js | 44 ++++++++++++------- 2 files changed, 30 insertions(+), 16 deletions(-) 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; -- 2.44.0