1 import { Component, InfernoMouseEvent, linkEvent } from "inferno";
2 import { EditSite, GetSiteResponse } from "lemmy-js-client";
3 import { i18n } from "../../i18next";
4 import { WebSocketService } from "../../services";
5 import { capitalizeFirstLetter, myAuth, wsClient } from "../../utils";
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 siteRes: GetSiteResponse;
14 interface TaglineFormState {
15 siteRes: GetSiteResponse;
21 export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
22 state: TaglineFormState = {
24 siteRes: this.props.siteRes,
25 editingRow: undefined,
27 taglines: this.props.siteRes.taglines?.map(x => x.content),
31 constructor(props: any, context: any) {
32 super(props, context);
34 get documentTitle(): string {
35 return i18n.t("taglines");
38 componentWillReceiveProps() {
39 this.setState({ loading: false });
44 <div className="col-12">
46 title={this.documentTitle}
47 path={this.context.router.route.match.url}
49 <h5 className="col-12">{i18n.t("taglines")}</h5>
50 <div className="table-responsive col-12">
51 <table id="taglines_table" className="table table-sm table-hover">
52 <thead className="pointer">
54 <th style="width:121px"></th>
57 {this.state.siteForm.taglines?.map((cv, index) => (
60 {this.state.editingRow == index && (
64 this.handleTaglineChange(this, index, s)
66 hideNavigationWarnings
67 allLanguages={this.state.siteRes.all_languages}
68 siteLanguages={this.state.siteRes.discussion_languages}
71 {this.state.editingRow != index && <div>{cv}</div>}
73 <td className="text-right">
75 className="btn btn-link btn-animate text-muted"
77 { form: this, index: index },
78 this.handleEditTaglineClick
80 data-tippy-content={i18n.t("edit")}
81 aria-label={i18n.t("edit")}
83 <Icon icon="edit" classes={`icon-inline`} />
87 className="btn btn-link btn-animate text-muted"
89 { form: this, index: index },
90 this.handleDeleteTaglineClick
92 data-tippy-content={i18n.t("delete")}
93 aria-label={i18n.t("delete")}
95 <Icon icon="trash" classes={`icon-inline text-danger`} />
102 <div className="form-group row">
103 <div className="col-12">
105 className="btn btn-sm btn-secondary mr-2"
106 onClick={linkEvent(this, this.handleAddTaglineClick)}
108 {i18n.t("add_tagline")}
113 <div className="form-group row">
114 <div className="col-12">
116 onClick={linkEvent(this, this.handleSaveClick)}
117 className="btn btn-secondary mr-2"
118 disabled={this.state.loading}
120 {this.state.loading ? (
123 capitalizeFirstLetter(i18n.t("save"))
133 handleTaglineChange(i: TaglineForm, index: number, val: string) {
134 const taglines = i.state.siteForm.taglines;
136 taglines[index] = val;
141 handleDeleteTaglineClick(
142 props: { form: TaglineForm; index: number },
145 event.preventDefault();
146 const taglines = props.form.state.siteForm.taglines;
148 taglines.splice(props.index, 1);
149 props.form.state.siteForm.taglines = undefined;
150 props.form.setState(props.form.state);
151 props.form.state.siteForm.taglines = taglines;
152 props.form.setState({ ...props.form.state, editingRow: undefined });
156 handleEditTaglineClick(
157 props: { form: TaglineForm; index: number },
160 event.preventDefault();
161 if (this.state.editingRow == props.index) {
162 props.form.setState({ editingRow: undefined });
164 props.form.setState({ editingRow: props.index });
168 handleSaveClick(i: TaglineForm) {
169 i.setState({ loading: true });
170 const auth = myAuth() ?? "TODO";
171 i.setState(s => ((s.siteForm.auth = auth), s));
172 WebSocketService.Instance.send(wsClient.editSite(i.state.siteForm));
173 i.setState({ ...i.state, editingRow: undefined });
176 handleAddTaglineClick(
178 event: InfernoMouseEvent<HTMLButtonElement>
180 event.preventDefault();
181 if (!i.state.siteForm.taglines) {
182 i.state.siteForm.taglines = [];
184 i.state.siteForm.taglines.push("");
187 editingRow: i.state.siteForm.taglines.length - 1,