1 import { myAuthRequired } from "@utils/app";
2 import { capitalizeFirstLetter } from "@utils/helpers";
3 import { Component, InfernoMouseEvent, linkEvent } from "inferno";
4 import { EditSite, Tagline } from "lemmy-js-client";
5 import { I18NextService } from "../../services";
6 import { HtmlTags } from "../common/html-tags";
7 import { Icon, Spinner } from "../common/icon";
8 import { MarkdownTextArea } from "../common/markdown-textarea";
10 interface TaglineFormProps {
11 taglines: Array<Tagline>;
12 onSaveSite(form: EditSite): void;
16 interface TaglineFormState {
17 taglines: Array<string>;
21 export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
22 state: TaglineFormState = {
23 editingRow: undefined,
24 taglines: this.props.taglines.map(x => x.content),
26 constructor(props: any, context: any) {
27 super(props, context);
29 get documentTitle(): string {
30 return I18NextService.i18n.t("taglines");
35 <div className="tagline-form col-12">
37 title={this.documentTitle}
38 path={this.context.router.route.match.url}
40 <h5 className="col-12">{I18NextService.i18n.t("taglines")}</h5>
41 <div className="table-responsive col-12">
42 <table id="taglines_table" className="table table-sm table-hover">
43 <thead className="pointer">
45 <th style="width:121px"></th>
48 {this.state.taglines.map((cv, index) => (
51 {this.state.editingRow == index && (
55 this.handleTaglineChange(this, index, s)
57 hideNavigationWarnings
62 {this.state.editingRow != index && <div>{cv}</div>}
64 <td className="text-right">
66 className="btn btn-link btn-animate text-muted"
68 { i: this, index: index },
69 this.handleEditTaglineClick
71 data-tippy-content={I18NextService.i18n.t("edit")}
72 aria-label={I18NextService.i18n.t("edit")}
74 <Icon icon="edit" classes={`icon-inline`} />
78 className="btn btn-link btn-animate text-muted"
80 { i: this, index: index },
81 this.handleDeleteTaglineClick
83 data-tippy-content={I18NextService.i18n.t("delete")}
84 aria-label={I18NextService.i18n.t("delete")}
86 <Icon icon="trash" classes={`icon-inline text-danger`} />
93 <div className="mb-3 row">
94 <div className="col-12">
96 className="btn btn-sm btn-secondary me-2"
97 onClick={linkEvent(this, this.handleAddTaglineClick)}
99 {I18NextService.i18n.t("add_tagline")}
104 <div className="mb-3 row">
105 <div className="col-12">
107 onClick={linkEvent(this, this.handleSaveClick)}
108 className="btn btn-secondary me-2"
109 disabled={this.props.loading}
111 {this.props.loading ? (
114 capitalizeFirstLetter(I18NextService.i18n.t("save"))
124 handleTaglineChange(i: TaglineForm, index: number, val: string) {
125 if (i.state.taglines) {
126 i.setState(prev => ({
128 taglines: prev.taglines.map((tl, i) => (i === index ? val : tl)),
133 handleDeleteTaglineClick(d: { i: TaglineForm; index: number }, event: any) {
134 event.preventDefault();
135 d.i.setState(prev => ({
137 taglines: prev.taglines.filter((_, i) => i !== d.index),
138 editingRow: undefined,
142 handleEditTaglineClick(d: { i: TaglineForm; index: number }, event: any) {
143 event.preventDefault();
144 if (this.state.editingRow == d.index) {
145 d.i.setState({ editingRow: undefined });
147 d.i.setState({ editingRow: d.index });
151 async handleSaveClick(i: TaglineForm) {
153 taglines: i.state.taglines,
154 auth: myAuthRequired(),
158 handleAddTaglineClick(
160 event: InfernoMouseEvent<HTMLButtonElement>
162 event.preventDefault();
163 const newTaglines = [...i.state.taglines];
164 newTaglines.push("");
167 taglines: newTaglines,
168 editingRow: newTaglines.length - 1,