IP-272: Refactor the problems landing page to fetch the problems asyn…

…chronously
scify · Nov 18, 2024 · 31e7112 · 31e7112
1 parent c5427a6
commit 31e7112
Showing 1 changed file with 63 additions and 30 deletions.
diff --git a/...s/assets/js/vue-components/crowdsourcing-project/problem/CrowdSourcingProjectProblems.vue b/...s/assets/js/vue-components/crowdsourcing-project/problem/CrowdSourcingProjectProblems.vue
@@ -1,40 +1,56 @@
 <template>
 	<div class="row justify-content-center py-5">
 		<div class="col-12 col-md-10 col-lg-11 col-xl-9">
-			<div v-if="loading" class="row">
-				<div class="col mx-auto">
-					<div class="d-flex justify-content-center align-items-center">
-						<div class="spinner-border" role="status">
-							<span class="sr-only">Loading...</span>
+			<div class="container-fluid p-0">
+				<div class="row" v-if="errorMessage.length">
+					<div class="col">
+						<div class="alert-component position-relative d-none" id="errorAlert">
+							<div class="alert alert-danger" role="alert">
+								{{ errorMessage }}
+							</div>
 						</div>
 					</div>
 				</div>
-			</div>
-			<ul class="row">
-				<li v-for="problem in problems" :key="problem.id" class="col-12 col-sm-6 col-md-6 col-lg-4">
-					<a class="card-link" href="#">
-						<div class="card">
-							<div v-if="!problem.img_url" class="card-placeholder-img-container">
-								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 92" width="144" height="92">
-									<!-- SVG content here -->
-								</svg>
-							</div>
-							<div v-else class="card-custom-img-container">
-								<img :src="problem.img_url" alt="Card image cap" width="282" height="180" />
-							</div>
-							<div class="card-body">
-								<h5 class="card-title">
-									{{ problem.currentTranslation.title }}
-								</h5>
-								<p class="card-text mb-4">
-									{{ problem.currentTranslation.description }}
-								</p>
+				<div v-if="loading" class="row">
+					<div class="col mx-auto">
+						<div class="d-flex justify-content-center align-items-center">
+							<div class="spinner-border" role="status">
+								<span class="sr-only">Loading...</span>
 							</div>
 						</div>
-					</a>
-					<slot name="share-button"></slot>
-				</li>
-			</ul>
+					</div>
+				</div>
+				<ul class="row">
+					<li v-for="problem in problems" :key="problem.id" class="col-12 col-sm-6 col-md-6 col-lg-4">
+						<a class="card-link" href="#">
+							<div class="card">
+								<div v-if="!problem.img_url" class="card-placeholder-img-container">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 144 92"
+										width="144"
+										height="92"
+									>
+										<!-- SVG content here -->
+									</svg>
+								</div>
+								<div v-else class="card-custom-img-container">
+									<img :src="problem.img_url" alt="Card image cap" width="282" height="180" />
+								</div>
+								<div class="card-body">
+									<h5 class="card-title">
+										{{ problem.currentTranslation.title }}
+									</h5>
+									<p class="card-text mb-4">
+										{{ problem.currentTranslation.description }}
+									</p>
+								</div>
+							</div>
+						</a>
+						<slot name="share-button"></slot>
+					</li>
+				</ul>
+			</div>
 		</div>
 	</div>
 </template>
@@ -55,12 +71,14 @@ export default {
 			problems: [],
 			loading: true,
 			error: null,
+			errorMessage: "",
 		};
 	},
 	methods: {
 		...mapActions(["get"]),
 		async fetchProblems() {
 			this.loading = true;
+			this.errorMessage = "";
 			return this.get({
 				url: window.route("api.crowd-sourcing-projects.problems.get") + `?projectId=${this.projectId}`,
 				urlRelative: false,
@@ -69,12 +87,27 @@ export default {
 					this.problems = response.data;
 				})
 				.catch((error) => {
-					console.error(error);
+					this.showErrorMessage(error);
 				})
 				.finally(() => {
 					this.loading = false;
 				});
 		},
+		showErrorMessage(error) {
+			// first check if the error message is just a string
+			if (typeof error === "string") {
+				this.errorMessage = error;
+			} else if (error.response && error.response.data && error.response.data.message) {
+				this.errorMessage = error.response.data.message;
+			} else {
+				this.errorMessage = `An error occurred. Please try again later. Error: ${error}`;
+			}
+			const alertElement = document.querySelector("#errorAlert");
+			alertElement.classList.remove("d-none");
+			setTimeout(() => {
+				alertElement.classList.add("d-none");
+			}, 5000);
+		},
 	},
 	watch: {
 		projectId: "fetchProblems",