Skip to content
This repository was archived by the owner on Jul 14, 2025. It is now read-only.

Commit 2611198

Browse files
authored
DEV: Use FormKit for the new note form. (#132)
1 parent 87cdd8c commit 2611198

File tree

2 files changed

+37
-19
lines changed

2 files changed

+37
-19
lines changed

assets/javascripts/discourse/components/modal/user-notes.gjs

Lines changed: 36 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import Component from "@glimmer/component";
22
import { tracked } from "@glimmer/tracking";
3-
import { Textarea } from "@ember/component";
43
import { fn } from "@ember/helper";
54
import { action } from "@ember/object";
65
import { service } from "@ember/service";
76
import CookText from "discourse/components/cook-text";
87
import DButton from "discourse/components/d-button";
98
import DModal from "discourse/components/d-modal";
9+
import Form from "discourse/components/form";
1010
import UserLink from "discourse/components/user-link";
1111
import ageWithTooltip from "discourse/helpers/age-with-tooltip";
1212
import avatar from "discourse/helpers/avatar";
@@ -17,9 +17,7 @@ export default class UserNotesModal extends Component {
1717
@service dialog;
1818
@service store;
1919

20-
@tracked newNote;
2120
@tracked userId = this.args.model.userId;
22-
@tracked saving = false;
2321
postId = this.args.model.postId;
2422
callback = this.args.model.callback;
2523

@@ -29,19 +27,28 @@ export default class UserNotesModal extends Component {
2927
}
3028
}
3129

32-
get attachDisabled() {
33-
return this.saving || !this.newNote || this.newNote.length === 0;
30+
/**
31+
* Registers the Form API reference.
32+
*
33+
* @param {Object} api - The Form API object, with form helper methods.
34+
*/
35+
@action
36+
registerApi(api) {
37+
this.formApi = api;
3438
}
3539

40+
/**
41+
* Handles form submission from Form component.
42+
*
43+
* @param {Object} data - Form data from Form component
44+
*/
3645
@action
37-
async attachNote() {
46+
async onSubmit(data) {
3847
const note = this.store.createRecord("user-note");
3948
const userId = parseInt(this.userId, 10);
4049

41-
this.saving = true;
42-
4350
const args = {
44-
raw: this.newNote,
51+
raw: data.content,
4552
user_id: userId,
4653
};
4754

@@ -51,13 +58,11 @@ export default class UserNotesModal extends Component {
5158

5259
try {
5360
await note.save(args);
54-
this.newNote = "";
61+
await this.formApi.set("content", "");
5562
this.args.model.note.insertAt(0, note);
5663
this.#refreshCount();
5764
} catch (error) {
5865
popupAjaxError(error);
59-
} finally {
60-
this.saving = false;
6166
}
6267
}
6368

@@ -83,13 +88,25 @@ export default class UserNotesModal extends Component {
8388
@title={{i18n "user_notes.title"}}
8489
class="user-notes-modal"
8590
>
86-
<Textarea @value={{this.newNote}} />
87-
<DButton
88-
@action={{this.attachNote}}
89-
@label="user_notes.attach"
90-
@disabled={{this.attachDisabled}}
91-
class="btn-primary"
92-
/>
91+
<Form
92+
@onSubmit={{this.onSubmit}}
93+
@onRegisterApi={{this.registerApi}}
94+
as |form|
95+
>
96+
<form.Field
97+
@name="content"
98+
@title={{i18n "user_notes.attach_note_description"}}
99+
@format="full"
100+
@validation="required:trim"
101+
as |field|
102+
>
103+
<field.Textarea />
104+
</form.Field>
105+
106+
<form.Actions>
107+
<form.Submit @label="user_notes.attach" class="btn-primary" />
108+
</form.Actions>
109+
</Form>
93110

94111
{{#each @model.note as |n|}}
95112
<div class="user-note">

config/locales/client.en.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ en:
33
user_notes:
44
title: "User Notes"
55
attach: "Add User Note"
6+
attach_note_description: "Add a note about this user. This note will be visible to staff only."
67
remove: "Remove User Note"
78
show: "User Notes (%{count})"
89
delete_confirm: "Are you sure you want to delete that user note?"

0 commit comments

Comments
 (0)