9c29d688e7
**This PR creates a new core reusable component wraps a character counter around any input.**
The component accepts the arguments: `max` (the maximum character limit), `value` (the value of text to be monitored).
It can be used for example, like so:
```hbs
<CharCounter @max="50" @value={{this.charCounterContent}}>
<textarea
placeholder={{i18n "styleguide.sections.char_counter.placeholder"}}
{{on "input" (action (mut this.charCounterContent) value="target.value")}}
class="styleguide--char-counter"></textarea>
</CharCounter>
```
**This PR also:**
1. Applies this component to the chat plugins edit channel's *Edit Description** modal, thereby replacing the simple text area which provided no visual indication when text exceeded the max allowed characters.
2. Adds an example to the `/styleguide` route
54 lines
1.4 KiB
JavaScript
54 lines
1.4 KiB
JavaScript
import Controller from "@ember/controller";
|
|
import { action, computed } from "@ember/object";
|
|
import ModalFunctionality from "discourse/mixins/modal-functionality";
|
|
import { tracked } from "@glimmer/tracking";
|
|
import { inject as service } from "@ember/service";
|
|
|
|
const DESCRIPTION_MAX_LENGTH = 280;
|
|
|
|
export default class ChatChannelEditDescriptionController extends Controller.extend(
|
|
ModalFunctionality
|
|
) {
|
|
@service chatApi;
|
|
@tracked editedDescription = this.model.description || "";
|
|
|
|
@computed("model.description", "editedDescription")
|
|
get isSaveDisabled() {
|
|
return (
|
|
this.model.description === this.editedDescription ||
|
|
this.editedDescription?.length > DESCRIPTION_MAX_LENGTH
|
|
);
|
|
}
|
|
|
|
get descriptionMaxLength() {
|
|
return DESCRIPTION_MAX_LENGTH;
|
|
}
|
|
|
|
onClose() {
|
|
this.clearFlash();
|
|
}
|
|
|
|
@action
|
|
onSaveChatChannelDescription() {
|
|
return this.chatApi
|
|
.updateChannel(this.model.id, {
|
|
description: this.editedDescription,
|
|
})
|
|
.then((result) => {
|
|
this.model.set("description", result.channel.description);
|
|
this.send("closeModal");
|
|
})
|
|
.catch((event) => {
|
|
if (event.jqXHR?.responseJSON?.errors) {
|
|
this.flash(event.jqXHR.responseJSON.errors.join("\n"), "error");
|
|
}
|
|
});
|
|
}
|
|
|
|
@action
|
|
onChangeChatChannelDescription(description) {
|
|
this.clearFlash();
|
|
this.editedDescription = description;
|
|
}
|
|
}
|