fix: handling of relational data (PollOptions) in the form and saving…

… process

js/src/forum/addComposerItems.js

@@ -10,16 +10,14 @@ import CreatePollModal from './components/CreatePollModal';
 function toPoll(data) {
   if (data) {
     const poll = app.store.createRecord('polls');
-    poll.pushAttributes(data);
-    poll.pushData({
-      relationships: {
-        options: data.options.map((option) => {
-          const pollOption = app.store.createRecord('poll_options');
-          pollOption.pushAttributes(option);
-          return pollOption;
-        }),
-      },
+
+    poll.tempOptions = data.options.map((option) => {
+      const pollOption = app.store.createRecord('poll_options');
+      pollOption.pushAttributes(option);
+      return pollOption;
     });
+    poll.pushAttributes(data);
+
     return poll;
   }
   return data;

js/src/forum/components/PollForm.tsx

@@ -38,7 +38,7 @@ export default class PollForm extends Component<PollFormAttrs, PollFormState> {
     // state handles poll initialization
     const poll = this.state.poll;
 
-    this.options = poll.options() as PollOption[];
+    this.options = (poll.tempOptions ?? poll.options()) as PollOption[];
     this.optionAnswers = this.options.map((o) => Stream(o.answer()));
     this.optionImageUrls = this.options.map((o) => Stream(o.imageUrl()));
 

js/src/forum/models/Poll.ts

@@ -4,6 +4,8 @@ import PollVote from './PollVote';
 import computed from 'flarum/common/utils/computed';
 
 export default class Poll extends Model {
+  public tempOptions: PollOption[] | undefined;
+
   question() {
     return Model.attribute<string>('question').call(this);
   }

js/src/forum/states/PollFormState.ts

@@ -1,5 +1,6 @@
 import app from 'flarum/forum/app';
 import Poll from '../models/Poll';
+import PollOption from '../models/PollOption';
 
 export default class PollFormState {
   poll: Poll;
@@ -9,6 +10,7 @@ export default class PollFormState {
 
   static createNewPoll() {
     const poll = app.store.createRecord<Poll>('polls');
+
     poll.pushAttributes({
       question: '',
       endDate: '',
@@ -18,7 +20,9 @@ export default class PollFormState {
       allowChangeVote: false,
       maxVotes: 0,
     });
-    poll.pushData({ relationships: { options: [] } });
+
+    poll.tempOptions = [app.store.createRecord<PollOption>('poll_options'), app.store.createRecord<PollOption>('poll_options')];
+
     return poll;
   }
 
@@ -48,6 +52,12 @@ export default class PollFormState {
 
     try {
       this.poll = await this.poll.save(data);
+      /**
+       * Cleanup attributes:
+       * For the saving process, we add the options directly to the attributes.
+       * As we currently cannot add new PollOptions as relationships.
+       */
+      delete this.poll!.data!.attributes!.options;
     } finally {
       this.loading = false;
       m.redraw();