1
1
import Component from " @glimmer/component" ;
2
2
import { tracked } from " @glimmer/tracking" ;
3
- import { Textarea } from " @ember/component" ;
4
3
import { fn } from " @ember/helper" ;
5
4
import { action } from " @ember/object" ;
6
5
import { service } from " @ember/service" ;
7
6
import CookText from " discourse/components/cook-text" ;
8
7
import DButton from " discourse/components/d-button" ;
9
8
import DModal from " discourse/components/d-modal" ;
9
+ import Form from " discourse/components/form" ;
10
10
import UserLink from " discourse/components/user-link" ;
11
11
import ageWithTooltip from " discourse/helpers/age-with-tooltip" ;
12
12
import avatar from " discourse/helpers/avatar" ;
@@ -17,9 +17,7 @@ export default class UserNotesModal extends Component {
17
17
@service dialog;
18
18
@service store;
19
19
20
- @tracked newNote;
21
20
@tracked userId = this .args .model .userId ;
22
- @tracked saving = false ;
23
21
postId = this .args .model .postId ;
24
22
callback = this .args .model .callback ;
25
23
@@ -29,19 +27,28 @@ export default class UserNotesModal extends Component {
29
27
}
30
28
}
31
29
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;
34
38
}
35
39
40
+ /**
41
+ * Handles form submission from Form component.
42
+ *
43
+ * @param {Object} data - Form data from Form component
44
+ */
36
45
@action
37
- async attachNote ( ) {
46
+ async onSubmit ( data ) {
38
47
const note = this .store .createRecord (" user-note" );
39
48
const userId = parseInt (this .userId , 10 );
40
49
41
- this .saving = true ;
42
-
43
50
const args = {
44
- raw: this . newNote ,
51
+ raw: data . content ,
45
52
user_id: userId,
46
53
};
47
54
@@ -51,13 +58,11 @@ export default class UserNotesModal extends Component {
51
58
52
59
try {
53
60
await note .save (args);
54
- this .newNote = " " ;
61
+ await this .formApi . set ( " content " , " " ) ;
55
62
this .args .model .note .insertAt (0 , note);
56
63
this .#refreshCount ();
57
64
} catch (error) {
58
65
popupAjaxError (error);
59
- } finally {
60
- this .saving = false ;
61
66
}
62
67
}
63
68
@@ -83,13 +88,25 @@ export default class UserNotesModal extends Component {
83
88
@ title ={{i18n " user_notes.title" }}
84
89
class =" user-notes-modal"
85
90
>
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 >
93
110
94
111
{{#each @ model.note as | n | }}
95
112
<div class =" user-note" >
0 commit comments