Refactor: Remove app.mjs, split AppLayout into Base/All/Favorites pages,... (3fa656e7) · Commits · Jakob Moser / karaokatalog-ui

frontend/SongList.mjs

+3 −4

Original line number	Diff line number	Diff line
		@@ -19,10 +19,9 @@ const SongList = {
		const model = this.model

		if (model.isLoading && (!model.allSongs \|\| model.allSongs.length === 0)) {
		return m(
		"main",
		return [
		m("div.loading-placeholder", "Lade Songs vom Server..."),
		)
		]
		}

		const {
		@@ -99,7 +98,7 @@ const SongList = {
		)
		}

		return m("main", elementsToRender)
		return elementsToRender
		},
		}

deleted100644 → 0

+0 −32

Original line number	Diff line number	Diff line
		// frontend/app.mjs
		import Header from "./components/pieces/Header.mjs"
		import SongList from "./SongList.mjs"

		// Die Haupt-Layout-Komponente der Anwendung.
		export const AppLayout = {
		searchTerm: "", // Aktueller Suchbegriff aus der Suchleiste

		// Wird aufgerufen, wenn sich der Text in der Suchleiste ändert oder zurückgesetzt wird.
		onSearchTermChange: function (term) {
		this.searchTerm = term // Aktualisiere den Zustand für den Suchbegriff.
		},

		// Die View-Methode, die das Layout der gesamten Anwendung rendert.
		view: function () {
		const currentView = m.route.get().replace(/^\//, "")

		return [
		m(Header, {
		searchTerm: this.searchTerm,
		onSearchTermChange: this.onSearchTermChange.bind(this),
		}),
		// Rendere die Song-Liste-Komponente.
		// Übergib den aktuellen Tab, den Suchbegriff UND den Callback zum Ändern des Suchbegriffs.
		m(SongList, {
		currentView,
		searchTerm: this.searchTerm,
		onSearchTermChange: this.onSearchTermChange.bind(this), // NEU: Callback hier übergeben
		}),
		]
		},
		}

0 → 100644

+22 −0

Original line number	Diff line number	Diff line
		import Base from "./Base.mjs"
		import SongList from "../../SongList.mjs"

		const All = {
		searchTerm: "",
		onSearchTermChange(term) {
		this.searchTerm = term
		},
		view() {
		return m(Base, {
		searchTerm: this.searchTerm,
		onSearchTermChange: this.onSearchTermChange.bind(this),
		children: m(SongList, {
		currentView: "all",
		searchTerm: this.searchTerm,
		onSearchTermChange: this.onSearchTermChange.bind(this),
		}),
		})
		},
		}

		export default All

+7 −4

Original line number	Diff line number	Diff line
		import { Header } from "../pieces/Header.mjs"
		import Header from "../pieces/Header.mjs"

		export const Base = {
		const Base = {
		view(vnode) {
		const { searchTerm, onSearchTermChange, children } = vnode.attrs \|\| {}
		return [
		m(Header),
		m("main", vnode.children),
		m(Header, { searchTerm, onSearchTermChange }),
		m("main", children),
		]
		},
		}

		export default Base

0 → 100644

+22 −0

Original line number	Diff line number	Diff line
		import Base from "./Base.mjs"
		import SongList from "../../SongList.mjs"

		const Favorites = {
		searchTerm: "",
		onSearchTermChange(term) {
		this.searchTerm = term
		},
		view() {
		return m(Base, {
		searchTerm: this.searchTerm,
		onSearchTermChange: this.onSearchTermChange.bind(this),
		children: m(SongList, {
		currentView: "favorites",
		searchTerm: this.searchTerm,
		onSearchTermChange: this.onSearchTermChange.bind(this),
		}),
		})
		},
		}

		export default Favorites