From 6be4b0858da227bc400913187a0a129406cfca0d Mon Sep 17 00:00:00 2001
From: Chris Duncan <chris@zoso.dev>
Date: Thu, 10 Oct 2024 14:41:31 -0700
Subject: [PATCH] Extend Settings page to feature each setting item details on
 a separate page.

---
 .../settings-item-detail-page.ts              | 18 +++++
 .../settings-item-detail-page.xml}            | 17 ++---
 app/settings/settings-items-page.ts           | 29 ++++++++
 app/settings/settings-items-page.xml          | 26 +++++++
 app/settings/settings-page.ts                 | 10 ---
 app/settings/settings-view-model.ts           | 70 +++++++++++++++++++
 app/settings/shared/item.ts                   |  7 ++
 7 files changed, 159 insertions(+), 18 deletions(-)
 create mode 100644 app/settings/settings-item-detail/settings-item-detail-page.ts
 rename app/settings/{settings-page.xml => settings-item-detail/settings-item-detail-page.xml} (57%)
 create mode 100644 app/settings/settings-items-page.ts
 create mode 100644 app/settings/settings-items-page.xml
 delete mode 100644 app/settings/settings-page.ts
 create mode 100644 app/settings/shared/item.ts

diff --git a/app/settings/settings-item-detail/settings-item-detail-page.ts b/app/settings/settings-item-detail/settings-item-detail-page.ts
new file mode 100644
index 0000000..6964552
--- /dev/null
+++ b/app/settings/settings-item-detail/settings-item-detail-page.ts
@@ -0,0 +1,18 @@
+// SPDX-FileCopyrightText: 2024 Chris Duncan <chris@zoso.dev>
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+import { EventData, View, NavigatedData, Page } from '@nativescript/core'
+import { Item } from '../shared/item'
+
+export function onNavigatingTo (args: NavigatedData) {
+	const page = args.object as Page
+	const item = args.context as Item
+	page.bindingContext = item
+}
+
+export function onBackButtonTap (args: EventData) {
+	const view = args.object as View
+	const page = view.page as Page
+
+	page.frame.goBack()
+}
diff --git a/app/settings/settings-page.xml b/app/settings/settings-item-detail/settings-item-detail-page.xml
similarity index 57%
rename from app/settings/settings-page.xml
rename to app/settings/settings-item-detail/settings-item-detail-page.xml
index 45e30bf..b22e936 100644
--- a/app/settings/settings-page.xml
+++ b/app/settings/settings-item-detail/settings-item-detail-page.xml
@@ -8,16 +8,17 @@ SPDX-License-Identifier: GPL-3.0-or-later
 		xmlns="http://schemas.nativescript.org/tns.xsd"
 		>
 	<ActionBar>
-		<Label text="Settings" />
-	</ActionBar>
-	<GridLayout class="page__content">
-		<Label
-				class="page__content-icon fas"
-				text="&#x2699;"
+		<NavigationButton
+				tap="onBackButtonTap"
+				android.systemIcon="ic_menu_back"
 				/>
+		<Label text="{{ name }}" />
+	</ActionBar>
+	<GridLayout>
 		<Label
-				class="page__content-placeholder"
-				text="-- Settings go here --"
+				class="m-10 h3"
+				text="{{ description }}"
+				verticalAlignment="top"
 				/>
 	</GridLayout>
 </Page>
diff --git a/app/settings/settings-items-page.ts b/app/settings/settings-items-page.ts
new file mode 100644
index 0000000..8d3330e
--- /dev/null
+++ b/app/settings/settings-items-page.ts
@@ -0,0 +1,29 @@
+// SPDX-FileCopyrightText: 2024 Chris Duncan <chris@zoso.dev>
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+import { View, ItemEventData, NavigatedData, Page } from '@nativescript/core'
+
+import { SettingsViewModel } from './settings-view-model'
+import { Item } from './shared/item'
+
+export function onNavigatingTo (args: NavigatedData) {
+	const page = <Page>args.object
+	page.bindingContext = new SettingsViewModel()
+}
+
+export function onItemTap (args: ItemEventData) {
+	const view = <View>args.view
+	const page = <Page>view.page
+	const tappedItem = <Item>view.bindingContext
+
+	page.frame.navigate({
+		moduleName: 'settings/settings-item-detail/settings-item-detail-page',
+		context: tappedItem,
+		animated: true,
+		transition: {
+			name: 'slide',
+			duration: 200,
+			curve: 'ease',
+		},
+	})
+}
diff --git a/app/settings/settings-items-page.xml b/app/settings/settings-items-page.xml
new file mode 100644
index 0000000..c2af64a
--- /dev/null
+++ b/app/settings/settings-items-page.xml
@@ -0,0 +1,26 @@
+<!--
+SPDX-FileCopyrightText: 2024 Chris Duncan <chris@zoso.dev>
+SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<Page
+		navigatingTo="onNavigatingTo"
+		xmlns="http://schemas.nativescript.org/tns.xsd"
+		>
+	<ActionBar>
+		<Label text="Settings" />
+	</ActionBar>
+	<ListView
+			items="{{ items }}"
+			itemTap="onItemTap"
+			>
+		<ListView.itemTemplate>
+			<StackLayout orientation="horizontal">
+				<Label
+						text="{{ name }}"
+						textWrap="true"
+						/>
+			</StackLayout>
+		</ListView.itemTemplate>
+	</ListView>
+</Page>
diff --git a/app/settings/settings-page.ts b/app/settings/settings-page.ts
deleted file mode 100644
index 8cedeb4..0000000
--- a/app/settings/settings-page.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// SPDX-FileCopyrightText: 2024 Chris Duncan <chris@zoso.dev>
-// SPDX-License-Identifier: GPL-3.0-or-later
-
-import { NavigatedData, Page } from '@nativescript/core'
-import { SettingsViewModel } from './settings-view-model'
-
-export function onNavigatingTo (args: NavigatedData) {
-	const page = <Page>args.object
-	page.bindingContext = new SettingsViewModel()
-}
diff --git a/app/settings/settings-view-model.ts b/app/settings/settings-view-model.ts
index 117d325..96a4ba1 100644
--- a/app/settings/settings-view-model.ts
+++ b/app/settings/settings-view-model.ts
@@ -2,9 +2,79 @@
 // SPDX-License-Identifier: GPL-3.0-or-later
 
 import { Observable } from '@nativescript/core'
+import { Item } from './shared/item'
 
 export class SettingsViewModel extends Observable {
+	items: Array<Item>
+
 	constructor () {
 		super()
+
+		this.items = new Array<Item>(
+			{
+				name: 'Item 1',
+				description: 'Description for Item 1',
+			},
+			{
+				name: 'Item 2',
+				description: 'Description for Item 2',
+			},
+			{
+				name: 'Item 3',
+				description: 'Description for Item 3',
+			},
+			{
+				name: 'Item 4',
+				description: 'Description for Item 4',
+			},
+			{
+				name: 'Item 5',
+				description: 'Description for Item 5',
+			},
+			{
+				name: 'Item 6',
+				description: 'Description for Item 6',
+			},
+			{
+				name: 'Item 7',
+				description: 'Description for Item 7',
+			},
+			{
+				name: 'Item 8',
+				description: 'Description for Item 8',
+			},
+			{
+				name: 'Item 9',
+				description: 'Description for Item 9',
+			},
+			{
+				name: 'Item 10',
+				description: 'Description for Item 10',
+			},
+			{
+				name: 'Item 11',
+				description: 'Description for Item 11',
+			},
+			{
+				name: 'Item 12',
+				description: 'Description for Item 12',
+			},
+			{
+				name: 'Item 13',
+				description: 'Description for Item 13',
+			},
+			{
+				name: 'Item 14',
+				description: 'Description for Item 14',
+			},
+			{
+				name: 'Item 15',
+				description: 'Description for Item 15',
+			},
+			{
+				name: 'Item 16',
+				description: 'Description for Item 16',
+			}
+		)
 	}
 }
diff --git a/app/settings/shared/item.ts b/app/settings/shared/item.ts
new file mode 100644
index 0000000..dd14792
--- /dev/null
+++ b/app/settings/shared/item.ts
@@ -0,0 +1,7 @@
+// SPDX-FileCopyrightText: 2024 Chris Duncan <chris@zoso.dev>
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+export interface Item {
+	name: string
+	description: string
+}
-- 
2.34.1