mapcomplete/UI/Popup/EditableTagRendering.ts
Tobias 4068931bba Add Tailwind button for save+cancel
- remove custom styles
- add new button styles based on Tailwind classes using @apply
- extend config to allow hover:ring-blue-200 and such
- update the js-files to use new classes

- Only unsure about the `.review-form .save-non-active`, this might need additional Tailwind helper classes in this specific situation. Don't know where it shows up, so could not test.
2021-01-24 22:20:40 +01:00

90 lines
No EOL
3.3 KiB
TypeScript

import {UIElement} from "../UIElement";
import {UIEventSource} from "../../Logic/UIEventSource";
import TagRenderingConfig from "../../Customizations/JSON/TagRenderingConfig";
import TagRenderingQuestion from "./TagRenderingQuestion";
import Translations from "../i18n/Translations";
import Combine from "../Base/Combine";
import TagRenderingAnswer from "./TagRenderingAnswer";
import State from "../../State";
import Svg from "../../Svg";
import {TagUtils} from "../../Logic/Tags";
export default class EditableTagRendering extends UIElement {
private readonly _tags: UIEventSource<any>;
private readonly _configuration: TagRenderingConfig;
private _editMode: UIEventSource<boolean> = new UIEventSource<boolean>(false);
private _editButton: UIElement;
private _question: UIElement;
private _answer: UIElement;
constructor(tags: UIEventSource<any>,
configuration: TagRenderingConfig) {
super(tags);
this._tags = tags;
this._configuration = configuration;
this.ListenTo(this._editMode);
this.ListenTo(State.state?.osmConnection?.userDetails)
this._answer = new TagRenderingAnswer(tags, configuration);
this._answer.SetStyle("width:100%;")
this._question = this.GenerateQuestion();
this.dumbMode = false;
if (this._configuration.question !== undefined) {
if (State.state?.featureSwitchUserbadge?.data) {
// 2.3em total width
const self = this;
this._editButton =
Svg.pencil_svg().SetClass("edit-button")
.onClick(() => {
self._editMode.setData(true);
});
}
}
}
InnerRender(): string {
if (!this._configuration?.condition?.matchesProperties(this._tags.data)) {
return "";
}
if (this._editMode.data) {
return this._question.Render();
}
if (this._configuration.multiAnswer) {
const atLeastOneMatch = this._configuration.mappings.some(mp =>TagUtils.MatchesMultiAnswer(mp.if, this._tags.data));
if (!atLeastOneMatch) {
return "";
}
} else if (this._configuration.GetRenderValue(this._tags.data) === undefined) {
return "";
}
return new Combine([this._answer,
(State.state?.osmConnection?.userDetails?.data?.loggedIn ?? true) ? this._editButton : undefined
]).SetClass("flex w-full break-word justify-between text-default landscape:w-1/2 landscape:p-2 pb-2 border-b border-gray-300 mb-2")
.Render();
}
private GenerateQuestion() {
const self = this;
if (this._configuration.question !== undefined) {
// And at last, set up the skip button
const cancelbutton =
Translations.t.general.cancel.Clone()
.SetClass("btn btn-secondary mr-3")
.onClick(() => {
self._editMode.setData(false)
});
return new TagRenderingQuestion(this._tags, this._configuration,
() => {
self._editMode.setData(false)
},
cancelbutton)
}
}
}