midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Use mangrove-reviews-typescript, rework reviews modules

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-01-21 23:58:14 +01:00
parent 93961e553f
commit 888d4e95a3
15 changed files with 768 additions and 375 deletions
Download patch file Download diff file Expand all files Collapse all files

133
UI/Reviews/ReviewForm.ts
View file

@ -1,118 +1,89 @@
import { InputElement } from "../Input/InputElement"
import { Review } from "../../Logic/Web/Review"
import { Review } from "mangrove-reviews-typescript"
import { Store, UIEventSource } from "../../Logic/UIEventSource"
import { TextField } from "../Input/TextField"
import Translations from "../i18n/Translations"
import Combine from "../Base/Combine"
import Svg from "../../Svg"
import { VariableUiElement } from "../Base/VariableUIElement"
import { SaveButton } from "../Popup/SaveButton"
import CheckBoxes from "../Input/Checkboxes"
import { CheckBox } from "../Input/Checkboxes"
import UserDetails, { OsmConnection } from "../../Logic/Osm/OsmConnection"
import BaseUIElement from "../BaseUIElement"
import Toggle from "../Input/Toggle"
import { LoginToggle } from "../Popup/LoginButton"
import { SubtleButton } from "../Base/SubtleButton"
export default class ReviewForm extends InputElement<Review> {
IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false)
private readonly _value: UIEventSource<Review>
private readonly _comment: BaseUIElement
private readonly _stars: BaseUIElement
private _saveButton: BaseUIElement
private readonly _isAffiliated: BaseUIElement
private readonly _postingAs: BaseUIElement
private readonly _state: {
readonly osmConnection: OsmConnection
readonly featureSwitchUserbadge: Store<boolean>
}
export default class ReviewForm extends LoginToggle {
constructor(
onSave: (r: Review, doneSaving: () => void) => void,
onSave: (r: Omit<Review, "sub">) => Promise<void>,
state: {
readonly osmConnection: OsmConnection
readonly featureSwitchUserbadge: Store<boolean>
}
) {
super()
this._state = state
const osmConnection = state.osmConnection
this._value = new UIEventSource({
made_by_user: new UIEventSource<boolean>(true),
/* made_by_user: new UIEventSource<boolean>(true),
rating: undefined,
comment: undefined,
author: osmConnection.userDetails.data.name,
affiliated: false,
date: new Date(),
})
const comment = new TextField({
date: new Date(),*/
const commentForm = new TextField({
placeholder: Translations.t.reviews.write_a_comment.Clone(),
htmlType: "area",
textAreaRows: 5,
})
comment.GetValue().addCallback((comment) => {
self._value.data.comment = comment
self._value.ping()
})
const self = this
this._postingAs = new Combine([
const rating = new UIEventSource<number>(undefined)
const isAffiliated = new CheckBox(Translations.t.reviews.i_am_affiliated)
const reviewMade = new UIEventSource(false)
const postingAs = new Combine([
Translations.t.reviews.posting_as.Clone(),
new VariableUiElement(
osmConnection.userDetails.map((ud: UserDetails) => ud.name)
state.osmConnection.userDetails.map((ud: UserDetails) => ud.name)
).SetClass("review-author"),
]).SetStyle("display:flex;flex-direction: column;align-items: flex-end;margin-left: auto;")
const reviewIsSaved = new UIEventSource<boolean>(false)
const reviewIsSaving = new UIEventSource<boolean>(false)
this._saveButton = new Toggle(
Translations.t.reviews.saved.Clone().SetClass("thanks"),
new Toggle(
Translations.t.reviews.saving_review.Clone(),
new SaveButton(
this._value.map((r) => self.IsValid(r)),
osmConnection
).onClick(() => {
reviewIsSaving.setData(true)
onSave(this._value.data, () => {
reviewIsSaved.setData(true)
})
}),
reviewIsSaving
),
reviewIsSaved
).SetClass("break-normal")
const saveButton = new Toggle(
Translations.t.reviews.no_rating.SetClass("block alert"),
new SubtleButton(Svg.confirm_svg(), Translations.t.reviews.save, {
extraClasses: "border-attention-catch",
})
.OnClickWithLoading(
Translations.t.reviews.saving_review.SetClass("alert"),
async () => {
const review: Omit<Review, "sub"> = {
rating: rating.data,
opinion: commentForm.GetValue().data,
metadata: { nickname: state.osmConnection.userDetails.data.name },
}
await onSave(review)
}
)
.SetClass("break-normal"),
rating.map((r) => r === undefined, [commentForm.GetValue()])
)
this._isAffiliated = new CheckBoxes([Translations.t.reviews.i_am_affiliated.Clone()])
this._comment = comment
const stars = []
for (let i = 1; i <= 5; i++) {
stars.push(
new VariableUiElement(
this._value.map((review) => {
if (review.rating === undefined) {
rating.map((score) => {
if (score === undefined) {
return Svg.star_outline.replace(/#000000/g, "#ccc")
}
return review.rating < i * 20 ? Svg.star_outline : Svg.star
return score < i * 20 ? Svg.star_outline : Svg.star
})
).onClick(() => {
self._value.data.rating = i * 20
self._value.ping()
rating.setData(i * 20)
})
)
}
this._stars = new Combine(stars).SetClass("review-form-rating")
}
GetValue(): UIEventSource<Review> {
return this._value
}
InnerConstructElement(): HTMLElement {
const form = new Combine([
new Combine([this._stars, this._postingAs]).SetClass("flex"),
this._comment,
new Combine([this._isAffiliated, this._saveButton]).SetClass("review-form-bottom"),
new Combine([new Combine(stars).SetClass("review-form-rating"), postingAs]).SetClass(
"flex"
),
commentForm,
new Combine([isAffiliated, saveButton]),
Translations.t.reviews.tos.Clone().SetClass("subtle"),
])
.SetClass("flex flex-col p-4")
@ -123,22 +94,10 @@ export default class ReviewForm extends InputElement<Review> {
" border: 2px solid var(--subtle-detail-color-contrast)"
)
return new LoginToggle(
form,
Translations.t.reviews.plz_login.Clone(),
this._state
).ConstructElement()
}
IsValid(r: Review): boolean {
if (r === undefined) {
return false
}
return (
(r.comment?.length ?? 0) <= 1000 &&
(r.author?.length ?? 0) <= 20 &&
r.rating >= 0 &&
r.rating <= 100
super(
new Toggle(Translations.t.reviews.saved.Clone().SetClass("thanks"), form, reviewMade),
Translations.t.reviews.plz_login,
state
)
}
}