1 import { Component, InfernoMouseEvent, linkEvent } from "inferno";
2 import { EditSite, Tagline } from "lemmy-js-client";
3 import { i18n } from "../../i18next";
4 import { capitalizeFirstLetter, myAuthRequired } from "../../utils";
5 import { HtmlTags } from "../common/html-tags";
6 import { Icon, Spinner } from "../common/icon";
7 import { MarkdownTextArea } from "../common/markdown-textarea";
9 interface TaglineFormProps {
10 taglines: Array<Tagline>;
11 onSaveSite(form: EditSite): void;
15 interface TaglineFormState {
16 taglines: Array<string>;
20 export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
21 state: TaglineFormState = {
22 editingRow: undefined,
23 taglines: this.props.taglines.map(x => x.content),
25 constructor(props: any, context: any) {
26 super(props, context);
28 get documentTitle(): string {
29 return i18n.t("taglines");
34 <div className="tagline-form col-12">
36 title={this.documentTitle}
37 path={this.context.router.route.match.url}
39 <h5 className="col-12">{i18n.t("taglines")}</h5>
40 <div className="table-responsive col-12">
41 <table id="taglines_table" className="table table-sm table-hover">
42 <thead className="pointer">
44 <th style="width:121px"></th>
47 {this.state.taglines.map((cv, index) => (
50 {this.state.editingRow == index && (
54 this.handleTaglineChange(this, index, s)
56 hideNavigationWarnings
61 {this.state.editingRow != index && <div>{cv}</div>}
63 <td className="text-right">
65 className="btn btn-link btn-animate text-muted"
67 { i: this, index: index },
68 this.handleEditTaglineClick
70 data-tippy-content={i18n.t("edit")}
71 aria-label={i18n.t("edit")}
73 <Icon icon="edit" classes={`icon-inline`} />
77 className="btn btn-link btn-animate text-muted"
79 { i: this, index: index },
80 this.handleDeleteTaglineClick
82 data-tippy-content={i18n.t("delete")}
83 aria-label={i18n.t("delete")}
85 <Icon icon="trash" classes={`icon-inline text-danger`} />
92 <div className="mb-3 row">
93 <div className="col-12">
95 className="btn btn-sm btn-secondary me-2"
96 onClick={linkEvent(this, this.handleAddTaglineClick)}
98 {i18n.t("add_tagline")}
103 <div className="mb-3 row">
104 <div className="col-12">
106 onClick={linkEvent(this, this.handleSaveClick)}
107 className="btn btn-secondary me-2"
108 disabled={this.props.loading}
110 {this.props.loading ? (
113 capitalizeFirstLetter(i18n.t("save"))
123 handleTaglineChange(i: TaglineForm, index: number, val: string) {
124 if (i.state.taglines) {
125 i.setState(prev => ({
127 taglines: prev.taglines.map((tl, i) => (i === index ? val : tl)),
132 handleDeleteTaglineClick(d: { i: TaglineForm; index: number }, event: any) {
133 event.preventDefault();
134 d.i.setState(prev => ({
136 taglines: prev.taglines.filter((_, i) => i !== d.index),
137 editingRow: undefined,
141 handleEditTaglineClick(d: { i: TaglineForm; index: number }, event: any) {
142 event.preventDefault();
143 if (this.state.editingRow == d.index) {
144 d.i.setState({ editingRow: undefined });
146 d.i.setState({ editingRow: d.index });
150 async handleSaveClick(i: TaglineForm) {
152 taglines: i.state.taglines,
153 auth: myAuthRequired(),
157 handleAddTaglineClick(
159 event: InfernoMouseEvent<HTMLButtonElement>
161 event.preventDefault();
162 const newTaglines = [...i.state.taglines];
163 newTaglines.push("");
166 taglines: newTaglines,
167 editingRow: newTaglines.length - 1,