Inline message into All and Favorites pages (cd6017aa) · Commits · Jakob Moser / karaokatalog-ui

static/components/pages/All.js

+6 −3

Original line number	Diff line number	Diff line
		import Base from "./Base.js"
		import SongList from "../pieces/SongList.js"
		import Song from "../../model/Song.js"
		import search from "../../model/search.js"

		export default {
		oncreate() {
		@@ -10,11 +11,13 @@ export default {
		Song.load()
		},
		view() {
		const songs = search.apply(Song.all)
		const message = !songs ? "Lade Songs..." : songs.length === 0 ? "Keine Songs gefunden." : null

		return m(
		Base,
		m(SongList, {
		currentView: "all",
		}),
		message && m("p.view-message", message),
		songs && m(SongList, { songs })
		)
		},
		}

static/components/pages/Favorites.js

+29 −2

Original line number	Diff line number	Diff line
		import Base from "./Base.js"
		import SongList from "../pieces/SongList.js"
		import Song from "../../model/Song.js"
		import search from "../../model/search.js"
		import ClearSearchLink from "../pieces/ClearSearchLink.js"

		export default {
		oncreate() {
		@@ -10,10 +12,35 @@ export default {
		Song.load()
		},
		view() {
		const allFavorites = Song.all?.filter(song => song.favorite)
		const favoritesToShow = search.apply(allFavorites)

		let message = null
		if(!allFavorites) {
		message = "Lade Songs..."
		} else if(allFavorites.length === 0) {
		message = "Du hast noch keine Favoriten markiert."
		} else if(favoritesToShow.length === 0) {
		message = [
		`Deine Suche ergab keine Treffer unter deinen ${allFavorites.length} Favoriten. `,
		`Möchtest du `,
		m(ClearSearchLink, { totalFavoriteCount: allFavorites.length}),
		`?`,
		]
		} else if(allFavorites.length > favoritesToShow.length) {
		message = [
		`Deine Suche zeigt ${favoritesToShow.length} von deinen insgesamt ${allFavorites.length} Favoriten. `,
		`Möchtest du `,
		m(ClearSearchLink, { totalFavoriteCount: allFavorites.length}),
		`?`,
		]
		}

		return m(
		Base,
		m(SongList, {
		currentView: "favorites",
		message && m("p.view-message", message),
		favoritesToShow && m(SongList, {
		songs: favoritesToShow
		}),
		)
		},

static/components/pieces/Message.js

deleted100644 → 0

+0 −70

Original line number	Diff line number	Diff line
		const Message = {
		view: function (vnode) {
		// Accepts: message, messageType, totalFilteredItems, currentView, ClearSearchLink, and clearSearchProps
		const {
		message,
		messageType,
		totalFilteredItems,
		currentView,
		ClearSearchLink,
		clearSearchProps,
		} = vnode.attrs
		if (messageType === "filtered_favorites_some_hidden") {
		return m("p.view-message", [
		`Deine Suche zeigt ${message.showing} von deinen insgesamt ${message.total} Favoriten. `,
		`Möchtest du `,
		m(ClearSearchLink, clearSearchProps),
		`?`,
		])
		} else if (messageType === "filtered_favorites_none_found_by_search") {
		return m("p.view-message", [
		`Deine Suche ergab keine Treffer unter deinen ${message.total} Favoriten. `,
		`Möchtest du `,
		m(ClearSearchLink, clearSearchProps),
		`?`,
		])
		} else if (typeof message === "string") {
		if (totalFilteredItems === 0 \|\| currentView === "popular") {
		return m("p.view-message", message)
		}
		}
		return null
		},
		}

		// Helper for SongList
		export function renderMessage({
		message,
		totalFilteredItems,
		currentView,
		ClearSearchLink,
		clearSearchProps,
		isLoading,
		}) {
		let messageType = null
		if (message && typeof message === "object") {
		messageType = message.type
		}
		if (
		messageType \|\|
		(typeof message === "string" &&
		(totalFilteredItems === 0 \|\| currentView === "popular"))
		) {
		return m(Message, {
		message,
		messageType,
		totalFilteredItems,
		currentView,
		ClearSearchLink,
		clearSearchProps,
		})
		}
		if (!messageType && totalFilteredItems === 0 && !isLoading) {
		return m(Message, {
		message: "Keine Songs entsprechen den aktuellen Kriterien.",
		})
		}
		return null
		}

		export default Message