ch/ChWebsiteApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve page and post detail views

Browse Source
This commit is contained in:
Christoph Hagen
2024-12-07 00:09:35 +01:00
parent 42a5d01480
commit 394cf7a2e4
13 changed files with 355 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
CHDataManagement/Model/Content+Load.swift
View File

@ -23,7 +23,7 @@ extension Content {
linkPreviewDescription: post.linkPreviewDescription)
}
private func convert(_ page: LocalizedPageFile) -> LocalizedPage {
private func convert(_ page: LocalizedPageFile, images: [String : ImageResource]) -> LocalizedPage {
LocalizedPage(
urlString: page.url,
title: page.title,
@ -32,7 +32,7 @@ extension Content {
files: Set(page.files),
externalFiles: Set(page.externalFiles),
requiredFiles: Set(page.requiredFiles),
linkPreviewImage: page.linkPreviewImage,
linkPreviewImage: page.linkPreviewImage.map { images[$0] },
linkPreviewTitle: page.linkPreviewTitle,
linkPreviewDescription: page.linkPreviewDescription)
}
@ -84,7 +84,7 @@ extension Content {
english: convert(data.value.english, images: images))
}
let pages: [String : Page] = loadPages(pagesData, tags: tags)
let pages: [String : Page] = loadPages(pagesData, tags: tags, images: images)
let posts = postsData.map { postId, post in
let linkedPage = post.linkedPageId.map { pages[$0] }
@ -134,7 +134,7 @@ extension Content {
english: convert(settings.english))
}
private func loadPages(_ pagesData: [String : PageFile], tags: [String : Tag]) -> [String : Page] {
private func loadPages(_ pagesData: [String : PageFile], tags: [String : Tag], images: [String : ImageResource]) -> [String : Page] {
pagesData.reduce(into: [:]) { pages, data in
let (pageId, page) = data
pages[pageId] = Page(
@ -143,8 +143,8 @@ extension Content {
createdDate: page.createdDate,
startDate: page.startDate,
endDate: page.endDate,
german: convert(page.german),
english: convert(page.english),
german: convert(page.german, images: images),
english: convert(page.english, images: images),
tags: page.tags.map { tags[$0]! })
}
}

4
CHDataManagement/Model/Content+Save.swift
View File

@ -26,7 +26,7 @@ extension Content {
german: image.germanDescription.nonEmpty,
english: image.englishDescription.nonEmpty)
}
storage.save(imageDescriptions: imageDescriptions)
do {
@ -65,7 +65,7 @@ private extension LocalizedPage {
externalFiles: externalFiles.sorted(),
requiredFiles: requiredFiles.sorted(),
title: title,
linkPreviewImage: linkPreviewImage,
linkPreviewImage: linkPreviewImage?.id,
linkPreviewTitle: linkPreviewTitle,
linkPreviewDescription: linkPreviewDescription,
lastModifiedDate: lastModified,

4
CHDataManagement/Model/LocalizedPage.swift
View File

@ -56,7 +56,7 @@ final class LocalizedPage: ObservableObject {
var requiredFiles: Set<String> = []
@Published
var linkPreviewImage: String?
var linkPreviewImage: ImageResource?
@Published
var linkPreviewTitle: String?
@ -71,7 +71,7 @@ final class LocalizedPage: ObservableObject {
files: Set<String> = [],
externalFiles: Set<String> = [],
requiredFiles: Set<String> = [],
linkPreviewImage: String? = nil,
linkPreviewImage: ImageResource? = nil,
linkPreviewTitle: String? = nil,
linkPreviewDescription: String? = nil) {
self.urlString = urlString

40
CHDataManagement/Views/Generic/DescriptionField.swift Normal file
View File

@ -0,0 +1,40 @@
import SwiftUI
struct DescriptionField: View {
@Binding
var text: String
var body: some View {
TextEditor(text: $text)
.font(.body)
.lineLimit(5, reservesSpace: true)
.frame(maxWidth: 400, minHeight: 50, maxHeight: 500)
.textEditorStyle(.plain)
.padding(.vertical, 8)
.padding(.leading, 3)
.background(Color.gray.opacity(0.1))
.cornerRadius(8)
}
}
struct OptionalDescriptionField: View {
@Binding
var text: String?
var body: some View {
TextEditor(text: Binding(
get: { text ?? "" },
set: { text = $0.isEmpty ? nil : $0 }
))
.font(.body)
.lineLimit(5, reservesSpace: true)
.frame(maxWidth: 400, minHeight: 50, maxHeight: 500)
.textEditorStyle(.plain)
.padding(.vertical, 8)
.padding(.leading, 3)
.background(Color.gray.opacity(0.1))
.cornerRadius(8)
}
}

36
CHDataManagement/Views/Generic/IconButton.swift Normal file
View File

@ -0,0 +1,36 @@
import SwiftUI
import SFSafeSymbols
struct IconButton: View {
let symbol: SFSymbol
let action: () -> Void
let size: CGFloat
let color: Color
let background: Color
init(symbol: SFSymbol, size: CGFloat, color: Color, background: Color = .white, action: @escaping () -> Void) {
self.symbol = symbol
self.action = action
self.size = size
self.color = color
self.background = background
}
var body: some View {
Button(action: action) {
Image(systemSymbol: symbol)
.resizable()
.aspectRatio(1, contentMode: .fit)
.frame(width: size, height: size)
.foregroundStyle(color)
.background(Circle()
.fill(background)
.padding(1))
}
}
}

7
CHDataManagement/Views/Generic/OptionalTextField.swift
View File

@ -8,9 +8,12 @@ struct OptionalTextField: View {
// The optional text that will be passed in and out of the component
@Binding var text: String?
init(_ titleKey: LocalizedStringKey, text: Binding<String?>) {
let prompt: String?
init(_ titleKey: LocalizedStringKey, text: Binding<String?>, prompt: String? = nil) {
self.titleKey = titleKey
self._text = text
self.prompt = prompt
}
var body: some View {
@ -23,6 +26,6 @@ struct OptionalTextField: View {
// Convert an empty string to `nil`
text = newValue.isEmpty ? nil : newValue
}
))
), prompt: prompt.map(Text.init))
}
}

70
CHDataManagement/Views/Pages/LocalizedPageDetailView.swift Normal file
View File

@ -0,0 +1,70 @@
import SwiftUI
import SFSafeSymbols
struct LocalizedPageDetailView: View {
@ObservedObject
private var item: LocalizedPage
init(page: LocalizedPage, showImagePicker: Bool = false) {
self.item = page
self.showImagePicker = showImagePicker
}
@State
private var showImagePicker = false
var body: some View {
VStack(alignment: .leading) {
Text("Link Preview Title")
.font(.headline)
OptionalTextField("", text: $item.linkPreviewTitle,
prompt: item.title)
.textFieldStyle(.roundedBorder)
.padding(.bottom)
HStack {
Text("Link Preview Image")
.font(.headline)
IconButton(symbol: .squareAndPencilCircleFill,
size: 22,
color: .blue) {
showImagePicker = true
}
IconButton(symbol: .trashCircleFill,
size: 22,
color: .red) {
item.linkPreviewImage = nil
}
Spacer()
}
.buttonStyle(.plain)
if let image = item.linkPreviewImage {
image.imageToDisplay
.resizable()
.aspectRatio(contentMode: .fit)
.frame(maxWidth: 400, maxHeight: 300)
.cornerRadius(8)
}
Text("Link Preview Description")
.font(.headline)
.padding(.top)
OptionalDescriptionField(text: $item.linkPreviewDescription)
.textFieldStyle(.roundedBorder)
.padding(.bottom)
}
.sheet(isPresented: $showImagePicker) {
ImagePickerView(showImagePicker: $showImagePicker) { image in
item.linkPreviewImage = image
}
}
}
}
#Preview {
LocalizedPageDetailView(page: .english)
.environmentObject(Content.mock)
}

72
CHDataManagement/Views/Pages/PageDetailView.swift Normal file
View File

@ -0,0 +1,72 @@
import SwiftUI
struct PageDetailView: View {
@Environment(\.language)
private var language
@ObservedObject
private var item: Page
init(page: Page) {
self.item = page
}
var body: some View {
ScrollView {
VStack(alignment: .leading) {
Text("ID")
.font(.headline)
TextField("", text: $item.id)
.textFieldStyle(.roundedBorder)
.padding(.bottom)
HStack {
Text("Draft")
.font(.headline)
Spacer()
Toggle("", isOn: $item.isDraft)
.toggleStyle(.switch)
}
.padding(.bottom)
HStack {
Text("Start")
.font(.headline)
Spacer()
DatePicker("", selection: $item.startDate, displayedComponents: .date)
.datePickerStyle(.compact)
.padding(.bottom)
}
HStack(alignment: .firstTextBaseline) {
Text("Has end date")
.font(.headline)
Spacer()
Toggle("", isOn: $item.hasEndDate)
.toggleStyle(.switch)
.padding(.bottom)
}
if item.hasEndDate {
HStack(alignment: .firstTextBaseline) {
Text("End date")
.font(.headline)
Spacer()
DatePicker("", selection: $item.endDate, displayedComponents: .date)
.datePickerStyle(.compact)
.padding(.bottom)
}
}
LocalizedPageDetailView(page: item.localized(in: language))
}
.padding()
}
}
}
#Preview {
PageDetailView(page: .empty)
}

4
CHDataManagement/Views/Pages/PageListView.swift
View File

@ -53,7 +53,7 @@ struct PageListView: View {
}
} detail: {
if let selected {
EmptyView()
PageDetailView(page: selected)
.frame(maxWidth: 350)
} else {
EmptyView()
@ -111,5 +111,5 @@ struct PageListView: View {
#Preview {
PageListView()
.environmentObject(Content())
.environmentObject(Content.mock)
}

64
CHDataManagement/Views/Posts/LocalizedPostDetailView.swift Normal file
View File

@ -0,0 +1,64 @@
import SwiftUI
struct LocalizedPostDetailView: View {
@ObservedObject
private var item: LocalizedPost
init(post: LocalizedPost, showImagePicker: Bool = false) {
self.item = post
self.showImagePicker = showImagePicker
}
@State
private var showImagePicker = false
var body: some View {
VStack(alignment: .leading) {
Text("Link Preview Title")
.font(.headline)
OptionalTextField("", text: $item.linkPreviewTitle,
prompt: item.title)
.textFieldStyle(.roundedBorder)
.padding(.bottom)
HStack {
Text("Link Preview Image")
.font(.headline)
IconButton(symbol: .squareAndPencilCircleFill,
size: 22,
color: .blue) {
showImagePicker = true
}
IconButton(symbol: .trashCircleFill,
size: 22,
color: .red) {
item.linkPreviewImage = nil
}
Spacer()
}
.buttonStyle(.plain)
if let image = item.linkPreviewImage {
image.imageToDisplay
.resizable()
.aspectRatio(contentMode: .fit)
.frame(maxWidth: 400, maxHeight: 300)
.cornerRadius(8)
}
Text("Link Preview Description")
.font(.headline)
.padding(.top)
OptionalDescriptionField(text: $item.linkPreviewDescription)
.textFieldStyle(.roundedBorder)
.padding(.bottom)
}
.sheet(isPresented: $showImagePicker) {
ImagePickerView(showImagePicker: $showImagePicker) { image in
item.linkPreviewImage = image
}
}
}
}

121
CHDataManagement/Views/Posts/PostDetailView.swift
View File

@ -34,115 +34,64 @@ struct PostDetailView: View {
private var language
@ObservedObject
var post: Post
@State
private var showPagePicker = false
private var item: Post
init(post: Post) {
self.post = post
}
private var linkedPageText: String {
if let page = post.linkedPage {
return page.localized(in: language).title
}
return "Add"
self.item = post
}
var body: some View {
ScrollView {
VStack(alignment: .leading) {
Text("Post data")
Text("ID")
.font(.headline)
DetailListItem {
Text("ID")
.foregroundStyle(.primary)
TextField("ID", text: $post.id)
.multilineTextAlignment(.trailing)
}
DetailListItem {
TextField("", text: $item.id)
.textFieldStyle(.roundedBorder)
.padding(.bottom)
HStack {
Text("Draft")
.font(.headline)
Spacer()
Toggle(isOn: $post.isDraft) {
Text("")
}.toggleStyle(.switch)
Toggle("", isOn: $item.isDraft)
.toggleStyle(.switch)
}
DetailListItem {
.padding(.bottom)
HStack {
Text("Start")
.font(.headline)
Spacer()
DatePicker("", selection: $post.startDate, displayedComponents: .date)
DatePicker("", selection: $item.startDate, displayedComponents: .date)
.datePickerStyle(.compact)
.padding(.bottom)
}
DetailListItem {
Text("End")
HStack(alignment: .firstTextBaseline) {
Text("Has end date")
.font(.headline)
Spacer()
Toggle(isOn: $post.hasEndDate) {
Text("")
}.toggleStyle(.switch)
DatePicker("", selection: $post.endDate, displayedComponents: .date)
.datePickerStyle(.compact)
.disabled(!post.hasEndDate)
Toggle("", isOn: $item.hasEndDate)
.toggleStyle(.switch)
.padding(.bottom)
}
DetailListItem {
Text("Linked page")
Spacer()
Button(action: { showPagePicker = true }) {
Text(linkedPageText)
if item.hasEndDate {
HStack(alignment: .firstTextBaseline) {
Text("End date")
.font(.headline)
Spacer()
DatePicker("", selection: $item.endDate, displayedComponents: .date)
.datePickerStyle(.compact)
.padding(.bottom)
}
.buttonStyle(.plain)
.foregroundStyle(.blue)
}
LocalizedPostDetailView(post: post.localized(in: language))
LocalizedPostDetailView(post: item.localized(in: language))
}
.padding()
}
.sheet(isPresented: $showPagePicker) {
PagePickerView(
showPagePicker: $showPagePicker,
selectedPage: $post.linkedPage)
}
}
}
struct LocalizedPostDetailView: View {
@ObservedObject
var post: LocalizedPost
@State
private var showImagePicker = false
var body: some View {
VStack(alignment: .leading) {
Text("Link Preview")
.font(.headline)
DetailListItem {
Text("Title")
Spacer()
OptionalTextField("", text: $post.linkPreviewTitle)
}
DetailListItem {
Text("Image")
Spacer()
Button(action: { showImagePicker = true }) {
Text(post.linkPreviewImage?.id ?? "Select")
}
.buttonStyle(.plain)
.foregroundStyle(.blue)
}
DetailListItem {
Text("Description")
Spacer()
OptionalTextField("", text: $post.linkPreviewDescription)
}
}
.sheet(isPresented: $showImagePicker) {
ImagePickerView(showImagePicker: $showImagePicker) { image in
post.linkPreviewImage = image
}
}
}
}

10
CHDataManagement/Views/Settings/LocalizedPostFeedSettingsView.swift
View File

@ -27,15 +27,7 @@ struct LocalizedPostFeedSettingsView: View {
Text("Description")
.font(.headline)
TextEditor(text: $settings.description)
.font(.body)
.lineLimit(5, reservesSpace: true)
.frame(maxWidth: 400, minHeight: 50, maxHeight: 500)
.textEditorStyle(.plain)
.padding(.vertical, 8)
.padding(.leading, 3)
.background(Color.gray.opacity(0.1))
.cornerRadius(8)
DescriptionField(text: $settings.description)
Text("The description of all post feed pages.")
.foregroundStyle(.secondary)
.padding(.bottom)