From 7d19afec16cb7f4e564909ae45cf1892f5803c05 Mon Sep 17 00:00:00 2001
From: Jan Schutte <4732389+SchutteJan@users.noreply.github.com>
Date: Mon, 29 Jul 2024 23:59:12 +0200
Subject: [PATCH] feat: allow admin to view hidden bars from the UI

---
 frontend/src/api/bars.ts         | 10 +++++----
 frontend/src/lib/BarItem.svelte  | 27 +++++++++++++----------
 frontend/src/models/schemas.ts   |  1 +
 frontend/src/routes/+page.svelte | 37 +++++++++++++++++++++++++++-----
 4 files changed, 55 insertions(+), 20 deletions(-)

diff --git a/frontend/src/api/bars.ts b/frontend/src/api/bars.ts
index fbd1113..91d6f89 100644
--- a/frontend/src/api/bars.ts
+++ b/frontend/src/api/bars.ts
@@ -1,7 +1,9 @@
 import { get_api_base_url } from './base'
 
-export async function get_bars(): Promise<Response> {
-	return fetch(get_api_base_url() + '/bars', {
+export async function get_bars(only_published: boolean = true): Promise<Response> {
+	const queryString = new URLSearchParams({ only_published: only_published.toString() }).toString()
+
+	return fetch(get_api_base_url() + '/bars?' + queryString, {
 		method: 'GET'
 	})
 }
@@ -24,12 +26,12 @@ export async function deleteVisit(bar_id: number): Promise<Response> {
 	})
 }
 
-export async function hideBar(id: number): Promise<Response> {
+export async function setPublished(id: number, published: boolean): Promise<Response> {
 	return fetch(get_api_base_url() + '/bar/' + id, {
 		method: 'PATCH',
 		headers: {
 			Accept: 'application/json'
 		},
-		body: JSON.stringify({ published: false })
+		body: JSON.stringify({ published: published })
 	})
 }
diff --git a/frontend/src/lib/BarItem.svelte b/frontend/src/lib/BarItem.svelte
index 065fa7d..2428138 100644
--- a/frontend/src/lib/BarItem.svelte
+++ b/frontend/src/lib/BarItem.svelte
@@ -2,14 +2,12 @@
 	import type { LocationResponse, WhoResponse } from '../models/schemas'
 	import { localDate } from '$lib/time'
 	import { user } from '$lib/stores'
-	import { deleteVisit, hideBar, visitBar } from '../api/bars'
+	import { deleteVisit, setPublished, visitBar } from '../api/bars'
 	import Checkmark from './Checkmark.svelte'
 	import Externallink from './Externallink.svelte'
 	export let bar: LocationResponse
 	export let isLoggedIn: boolean = false
 	export let isAdmin: boolean = false
-	// TODO: Expose "published" on LocationResponse?
-	export let isHidden: boolean = false
 
 	user.subscribe((value: WhoResponse | undefined) => {
 		isLoggedIn = value !== undefined
@@ -41,11 +39,12 @@
 		})
 	}
 
-	function handleHideBar() {
-		if (confirm(`Are you sure you want to hide ${bar.name}?`)) {
-			hideBar(bar.id).then(() => {
-				console.log('Hid bar', bar)
-				isHidden = true
+	function toggleHideBar() {
+		const hideStr = bar.published ? 'hide' : 'unhide'
+
+		if (confirm(`Are you sure you want to ${hideStr} ${bar.name}?`)) {
+			setPublished(bar.id, !bar.published).then(() => {
+				bar.published = !bar.published
 			})
 		}
 	}
@@ -56,7 +55,7 @@
 		<summary class="bar-item">
 			<img alt={bar.name} class="bar-image" src={bar.imageurl ?? placeholder} />
 			<div class="bar-content">
-				{#if isHidden}
+				{#if !bar.published}
 					<h3><s>{bar.name}</s></h3>
 				{:else}
 					<h3>{bar.name}</h3>
@@ -91,8 +90,14 @@
 			>Open in Maps <Externallink />
 		</a>
 
-		{#if isLoggedIn && isAdmin && !isHidden}
-			<button class="pico-background-red" on:click={handleHideBar}>Hide</button>
+		{#if isLoggedIn && isAdmin}
+			<button class:pico-background-red={bar.published} on:click={toggleHideBar}>
+				{#if bar.published}
+					Hide
+				{:else}
+					Show
+				{/if}
+			</button>
 		{/if}
 
 		{#if isLoggedIn && bar.visited_at}
diff --git a/frontend/src/models/schemas.ts b/frontend/src/models/schemas.ts
index 5d4c39d..a8670da 100644
--- a/frontend/src/models/schemas.ts
+++ b/frontend/src/models/schemas.ts
@@ -49,6 +49,7 @@ export interface LocationResponse {
 	id: number
 	imageurl?: string | null
 	name: string
+	published: boolean
 	visited_at?: string | null
 }
 export interface Login {
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index dc911ee..a0c26b8 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,25 +1,52 @@
 <script lang="ts">
-	import BarItem from '../lib/BarItem.svelte'
+	import BarItem from '$lib/BarItem.svelte'
+	import { user } from '$lib/stores'
 	import { onMount } from 'svelte'
-	import type { LocationResponse } from '../models/schemas'
+	import type { LocationResponse, UserRoleEnum } from '../models/schemas'
 	import { get_bars } from '../api/bars'
 
 	let bars: Array<LocationResponse> = []
 	let loading = true
+	let userRole: UserRoleEnum
+	let only_published = true
 
-	onMount(async () => {
-		get_bars()
+	user.subscribe((value) => {
+		if (value) {
+			userRole = value.role
+		}
+	})
+
+	function fetchBars() {
+		loading = true
+		get_bars(only_published)
 			.then((response) => response.json())
 			.then((data) => {
 				bars = data
 				loading = false
 			})
+	}
+
+	onMount(async () => {
+		fetchBars()
 	})
 </script>
 
 <section>
 	<h2>List</h2>
-	<p>All {bars.length == 0 ? '' : bars.length} bars in Amsterdam listed.</p>
+	<p>
+		All {bars.length == 0 ? '' : bars.length} bars in Amsterdam listed.
+		{#if userRole == 'Admin'}
+			<label>
+				<input
+					type="checkbox"
+					name="only_published"
+					bind:checked={only_published}
+					on:change={fetchBars}
+				/>
+				Show Only Published Bars
+			</label>
+		{/if}
+	</p>
 
 	<div class="bar-list-container">
 		{#if loading}