Unified detail views, model
This commit is contained in:
Christoph Hagen
@ -3,101 +3,41 @@ import SFSafeSymbols
|
||||
|
||||
struct LocalizedPageDetailView: View {
|
||||
|
||||
let isExternalPage: Bool
|
||||
|
||||
@ObservedObject
|
||||
private var page: LocalizedPage
|
||||
|
||||
init(page: LocalizedPage, showImagePicker: Bool = false) {
|
||||
self.page = page
|
||||
self.showImagePicker = showImagePicker
|
||||
self.newUrlString = page.urlString
|
||||
}
|
||||
|
||||
@State
|
||||
private var showImagePicker = false
|
||||
|
||||
@State
|
||||
private var newUrlString: String
|
||||
|
||||
private let allowedCharactersInPostId = CharacterSet.alphanumerics.union(CharacterSet(charactersIn: "-")).inverted
|
||||
|
||||
private var idExists: Bool {
|
||||
page.content.pages.contains {
|
||||
$0.german.urlString == newUrlString
|
||||
|| $0.english.urlString == newUrlString
|
||||
}
|
||||
}
|
||||
|
||||
private var containsInvalidCharacters: Bool {
|
||||
newUrlString.rangeOfCharacter(from: allowedCharactersInPostId) != nil
|
||||
}
|
||||
var page: LocalizedPage
|
||||
|
||||
var body: some View {
|
||||
VStack(alignment: .leading) {
|
||||
HStack {
|
||||
Text("Page URL String")
|
||||
.font(.headline)
|
||||
TextField("", text: $newUrlString)
|
||||
.textFieldStyle(.roundedBorder)
|
||||
Button("Update", action: setNewId)
|
||||
.disabled(newUrlString.isEmpty || containsInvalidCharacters || idExists)
|
||||
}
|
||||
.padding(.bottom)
|
||||
IdPropertyView(
|
||||
id: $page.urlString,
|
||||
title: "Page URL String",
|
||||
footer: "The url component to use for the link to the page",
|
||||
validation: page.isValid,
|
||||
update: { page.urlString = $0 })
|
||||
.disabled(isExternalPage)
|
||||
|
||||
Text("Link Preview Title")
|
||||
.font(.headline)
|
||||
OptionalTextField("", text: $page.linkPreviewTitle,
|
||||
prompt: page.title)
|
||||
.textFieldStyle(.roundedBorder)
|
||||
.padding(.bottom)
|
||||
OptionalStringPropertyView(
|
||||
title: "Preview Title",
|
||||
text: $page.linkPreviewTitle,
|
||||
prompt: page.title,
|
||||
footer: "The title to use for the page when linking to it")
|
||||
|
||||
HStack {
|
||||
Text("Link Preview Image")
|
||||
.font(.headline)
|
||||
IconButton(symbol: .squareAndPencilCircleFill,
|
||||
size: 22,
|
||||
color: .blue) {
|
||||
showImagePicker = true
|
||||
}
|
||||
OptionalImagePropertyView(
|
||||
title: "Preview Image",
|
||||
selectedImage: $page.linkPreviewImage,
|
||||
footer: "The image to show for previews of this page")
|
||||
|
||||
IconButton(symbol: .trashCircleFill,
|
||||
size: 22,
|
||||
color: .red) {
|
||||
page.linkPreviewImage = nil
|
||||
}.disabled(page.linkPreviewImage == nil)
|
||||
Spacer()
|
||||
}
|
||||
|
||||
.buttonStyle(.plain)
|
||||
if let image = page.linkPreviewImage {
|
||||
image.imageToDisplay
|
||||
.resizable()
|
||||
.aspectRatio(contentMode: .fit)
|
||||
.frame(maxWidth: 400, maxHeight: 300)
|
||||
.cornerRadius(8)
|
||||
Text(image.id)
|
||||
.font(.headline)
|
||||
}
|
||||
|
||||
Text("Link Preview Description")
|
||||
.font(.headline)
|
||||
.padding(.top)
|
||||
OptionalDescriptionField(text: $page.linkPreviewDescription)
|
||||
.textFieldStyle(.roundedBorder)
|
||||
.padding(.bottom)
|
||||
OptionalTextFieldPropertyView(
|
||||
title: "Preview Description",
|
||||
text: $page.linkPreviewDescription,
|
||||
footer: "The description to show in previews of the page")
|
||||
}
|
||||
.sheet(isPresented: $showImagePicker) {
|
||||
ImagePickerView(showImagePicker: $showImagePicker) { image in
|
||||
page.linkPreviewImage = image
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private func setNewId() {
|
||||
page.urlString = newUrlString
|
||||
}
|
||||
}
|
||||
|
||||
#Preview {
|
||||
LocalizedPageDetailView(page: .english)
|
||||
LocalizedPageDetailView(isExternalPage: false, page: .english)
|
||||
.environmentObject(Content.mock)
|
||||
}
|
||||
|
||||
@ -15,30 +15,19 @@ struct PageDetailView: View {
|
||||
@State
|
||||
private var isGeneratingWebsite = false
|
||||
|
||||
@State
|
||||
private var newId: String
|
||||
|
||||
@State
|
||||
private var didGenerateWebsite: Bool?
|
||||
|
||||
init(page: Page) {
|
||||
self.page = page
|
||||
self.newId = page.id
|
||||
}
|
||||
|
||||
private let allowedCharactersInPostId = CharacterSet.alphanumerics.union(CharacterSet(charactersIn: "-")).inverted
|
||||
|
||||
private var idExists: Bool {
|
||||
page.content.pages.contains { $0.id == newId }
|
||||
}
|
||||
|
||||
private var containsInvalidCharacters: Bool {
|
||||
newId.rangeOfCharacter(from: allowedCharactersInPostId) != nil
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
ScrollView {
|
||||
VStack(alignment: .leading) {
|
||||
DetailTitle(
|
||||
title: "Page",
|
||||
text: "A page contains longer content")
|
||||
HStack {
|
||||
Button(action: generate) {
|
||||
Text("Generate")
|
||||
@ -54,62 +43,40 @@ struct PageDetailView: View {
|
||||
}
|
||||
}
|
||||
}
|
||||
HStack {
|
||||
TextField("", text: $newId)
|
||||
.textFieldStyle(.roundedBorder)
|
||||
Button("Update", action: setNewId)
|
||||
.disabled(newId.isEmpty || containsInvalidCharacters || idExists)
|
||||
}
|
||||
.padding(.bottom)
|
||||
IdPropertyView(
|
||||
id: $page.id,
|
||||
footer: "The page id is used to link to it internally.",
|
||||
validation: page.isValid,
|
||||
update: { page.update(id: $0) })
|
||||
|
||||
Text("External url")
|
||||
.font(.headline)
|
||||
OptionalTextField("", text: $page.externalLink,
|
||||
prompt: "External url")
|
||||
.textFieldStyle(.roundedBorder)
|
||||
.padding(.bottom)
|
||||
OptionalStringPropertyView(
|
||||
title: "External url",
|
||||
text: $page.externalLink,
|
||||
footer: "Set an external url to mark this page as external. It will not be generated, and links will be created using the provided url")
|
||||
|
||||
HStack {
|
||||
Text("Draft")
|
||||
.font(.headline)
|
||||
Spacer()
|
||||
Toggle("", isOn: $page.isDraft)
|
||||
.toggleStyle(.switch)
|
||||
}
|
||||
.padding(.bottom)
|
||||
BoolPropertyView(
|
||||
title: "Draft",
|
||||
value: $page.isDraft,
|
||||
footer: "Indicate a page as a draft to hide it from the website")
|
||||
.disabled(page.isExternalUrl)
|
||||
|
||||
HStack {
|
||||
Text("Start")
|
||||
.font(.headline)
|
||||
Spacer()
|
||||
DatePicker("", selection: $page.startDate, displayedComponents: .date)
|
||||
.datePickerStyle(.compact)
|
||||
.padding(.bottom)
|
||||
}
|
||||
DatePropertyView(
|
||||
title: "Start date",
|
||||
value: $page.startDate,
|
||||
footer: "The date when the page content started")
|
||||
.disabled(page.isExternalUrl)
|
||||
|
||||
HStack(alignment: .firstTextBaseline) {
|
||||
Text("Has end date")
|
||||
.font(.headline)
|
||||
Spacer()
|
||||
Toggle("", isOn: $page.hasEndDate)
|
||||
.toggleStyle(.switch)
|
||||
.padding(.bottom)
|
||||
}
|
||||
|
||||
if page.hasEndDate {
|
||||
HStack(alignment: .firstTextBaseline) {
|
||||
Text("End date")
|
||||
.font(.headline)
|
||||
Spacer()
|
||||
DatePicker("", selection: $page.endDate, displayedComponents: .date)
|
||||
.datePickerStyle(.compact)
|
||||
.padding(.bottom)
|
||||
}
|
||||
}
|
||||
|
||||
LocalizedPageDetailView(page: page.localized(in: language))
|
||||
.id(page.id + language.rawValue)
|
||||
OptionalDatePropertyView(
|
||||
title: "End date",
|
||||
isEnabled: $page.hasEndDate,
|
||||
date: $page.endDate,
|
||||
footer: "The date when the page content ended")
|
||||
.disabled(page.isExternalUrl)
|
||||
|
||||
LocalizedPageDetailView(
|
||||
isExternalPage: page.isExternalUrl,
|
||||
page: page.localized(in: language))
|
||||
.id(page.id + language.rawValue)
|
||||
}
|
||||
.padding()
|
||||
}
|
||||
@ -144,14 +111,6 @@ struct PageDetailView: View {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private func setNewId() {
|
||||
guard page.update(id: newId) else {
|
||||
newId = page.id
|
||||
return
|
||||
}
|
||||
page.id = newId
|
||||
}
|
||||
}
|
||||
|
||||
extension PageDetailView: MainContentView {
|
||||
|
||||
Reference in New Issue
Block a user