4068931bba
- 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.
90 lines
No EOL
3.3 KiB
TypeScript
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)
|
|
}
|
|
}
|
|
|
|
} |