bugfix: fix bug about saving polls from posts etc. and add missing texts

FriendsOfFlarum · Feb 20, 2024 · 24db3ae · 24db3ae
1 parent acf1139
commit 24db3ae
Show file tree

Hide file tree

Showing 14 changed files with 133 additions and 120 deletions.
diff --git a/js/src/forum/components/ComposePollPage.tsx b/js/src/forum/components/ComposePollPage.tsx
@@ -8,6 +8,7 @@ import Acl from '../../common/Acl';
 import PollFormState from '../states/PollFormState';
 import { slug } from '../../common';
 import ComposePollHero from './ComposePollHero';
+import Button from 'flarum/common/components/Button';
 
 const t = app.translator.trans.bind(app.translator);
 const prfx = `${slug}.forum.compose`;
@@ -44,8 +45,8 @@ export default class ComposePollPage extends Page {
       this.poll = PollFormState.createNewPoll();
     }
 
-    app.history.push('compose-goodie-collection');
-    this.bodyClass = 'App--compose-goodie-collection';
+    app.history.push('compose-poll');
+    this.bodyClass = 'App--compose-poll';
     app.setTitle(t(`${prfx}.${!!this.poll?.id() ? 'edit' : 'add'}_title`));
   }
 
@@ -58,9 +59,46 @@ export default class ComposePollPage extends Page {
       <div className="ComposeGoodieCollectionPage">
         <ComposePollHero poll={this.poll} />
         <div className="container">
-          <PollForm poll={this.poll} />
+          <PollForm poll={this.poll} onsubmit={this.onsubmit.bind(this)} />
         </div>
       </div>
     );
   }
+
+  async onsubmit(data: Object, state: PollFormState) {
+    const isNew = state.poll.id() === undefined;
+    await state.save(data);
+
+    const alertAttrs = isNew
+      ? {
+          type: 'success',
+          controls: [
+            <Button
+              className="Button Button--link"
+              onclick={() =>
+                m.route.set(
+                  app.route('compose-poll', {
+                    edit: state.poll.id(),
+                  })
+                )
+              }
+            >
+              {t(`${prfx}.continue_editing`)}
+            </Button>,
+          ],
+        }
+      : {
+          type: 'success',
+        };
+
+    // Show success alert
+    const alertId = app.alerts.show(alertAttrs, t(`${prfx}.success`));
+
+    // Hide alert after 10 seconds
+    setTimeout(() => app.alerts.dismiss(alertId), 10000);
+
+    if (isNew) {
+      m.route.set(app.route('fof_polls_list'));
+    }
+  }
 }
diff --git a/js/src/forum/components/CreatePollModal.js b/js/src/forum/components/CreatePollModal.js
@@ -12,16 +12,15 @@ export default class CreatePollModal extends Modal {
   }
 
   content() {
-    //@todo check if bind is needed for onsubmit
     return [
       <div className="Modal-body">
-        <PollForm modal={this} poll={this.attrs.poll} onsubmit={this.onsubmit.bind(this)}></PollForm>
+        <PollForm poll={this.attrs.poll} onsubmit={this.onsubmit.bind(this)}></PollForm>
       </div>,
     ];
   }
 
-  onsubmit(poll) {
+  onsubmit(data) {
     this.hide();
-    this.attrs.onsubmit(poll);
+    this.attrs.onsubmit(data);
   }
 }
diff --git a/js/src/forum/components/EditPollModal.js b/js/src/forum/components/EditPollModal.js
@@ -5,4 +5,19 @@ export default class EditPollModal extends CreatePollModal {
   title() {
     return app.translator.trans('fof-polls.forum.modal.edit_title');
   }
+
+  async onsubmit(data, state) {
+    await state.save(data);
+
+    // Show success alert
+    const alertId = app.alerts.show(
+      {
+        type: 'success',
+      },
+      app.translator.trans('fof-polls.forum.compose.success')
+    );
+
+    // Hide alert after 10 seconds
+    setTimeout(() => app.alerts.dismiss(alertId), 10000);
+  }
 }
diff --git a/js/src/forum/components/Poll.tsx b/js/src/forum/components/Poll.tsx
@@ -4,10 +4,9 @@ import app from 'flarum/forum/app';
 import PollTitle from './Poll/PollTitle';
 import PollOptions from './Poll/PollOptions';
 import PollImage from './Poll/PollImage';
-import PollDescription from './Poll/PollDescription';
+import PollSubTitle from './Poll/PollSubTitle';
 import PollModel from '../models/Poll';
 import PollState from '../states/PollState';
-import Tooltip from 'flarum/common/components/Tooltip';
 import Button from 'flarum/common/components/Button';
 import ItemList from 'flarum/common/utils/ItemList';
 import { slug } from '../../common';
@@ -49,7 +48,7 @@ export default class Poll extends Component<PollAttrs, PollState> {
         </div>
         <div className="Poll-wrapper">
           <PollTitle text={poll.question()} />
-          <PollDescription text="Ihre Meinung ist uns wichtig! Welche SBB-Entscheidungen möchten Sie mehr einbezogen sehen? Teilen Sie uns mit, welche Themen für Sie besonders relevant sind. Vielen Dank für Ihre Teilnahme!" />
+          <PollSubTitle text={poll.subtitle()} />
           <form>
             <fieldset>
               <legend className="sr-only">Antworten</legend>

diff --git a/js/src/forum/components/Poll/PollDescription.tsx b/js/src/forum/components/Poll/PollDescription.tsx
diff --git a/js/src/forum/components/Poll/PollListItem.tsx b/js/src/forum/components/Poll/PollListItem.tsx
@@ -183,28 +183,27 @@ export default class PollListItem<CustomAttrs extends IPollListItemAttrs = IPoll
           ' ',
           active ? t('fof-polls.forum.days_remaining', { time: dayjs(poll.endDate()).fromNow() }) : t('fof-polls.forum.poll_ended'),
         ]
-      : [icon('fas fa-om'), ' ', t('fof-polls.forum.poll_never_ends')]
+      : [icon('fas fa-om'), ' ', t('fof-polls.forum.poll_never_ends')];
 
     items.add('active', <span className={classList('UserCard-lastSeen', { active })}>{activeView}</span>);
 
     const voteCount = poll.voteCount();
-    if(voteCount !== undefined){
+    if (voteCount !== undefined) {
       items.add(
-          'discussion-count',
-          <div className="userStat">
-            {icon('fas fa-poll fa-fw')}
-            {[
-              ' ',
-              t('fof-polls.forum.polls_count', {
-                count: abbreviateNumber(voteCount),
-              }),
-            ]}
-          </div>,
-          70
+        'discussion-count',
+        <div className="userStat">
+          {icon('fas fa-poll fa-fw')}
+          {[
+            ' ',
+            t('fof-polls.forum.polls_count', {
+              count: abbreviateNumber(voteCount),
+            }),
+          ]}
+        </div>,
+        70
       );
     }
 
-
     return items;
   }
 }
diff --git a/js/src/forum/components/Poll/PollResult.tsx b/js/src/forum/components/Poll/PollResult.tsx
@@ -1,32 +1,31 @@
 import * as Mithril from 'mithril';
-import Component, {ComponentAttrs} from 'flarum/common/Component';
+import Component, { ComponentAttrs } from 'flarum/common/Component';
 import PollOptionLabel from './PollOptionLabel';
 import PollResultsNumber from './PollResultNumber';
 import PollOptionInput from './PollOptionInput';
-import PollOptionModel from "../../models/PollOption";
-import PollState from "../../states/PollState";
-import abbreviateNumber from "flarum/common/utils/abbreviateNumber";
+import PollOptionModel from '../../models/PollOption';
+import PollState from '../../states/PollState';
+import abbreviateNumber from 'flarum/common/utils/abbreviateNumber';
 
 interface PollResultsAttrs extends ComponentAttrs {
-    option: PollOptionModel;
-    state: PollState;
+  option: PollOptionModel;
+  state: PollState;
 }
 
 export default class PollResults extends Component<PollResultsAttrs> {
   view(): Mithril.Children {
     const option = this.attrs.option;
     const state = this.attrs.state;
     let voteCount = option.voteCount();
-    if(!voteCount){
-        voteCount = 0;
-    }
-    else {
-        voteCount = voteCount * 100 / state.overallVoteCount();
+    if (!voteCount) {
+      voteCount = 0;
+    } else {
+      voteCount = (voteCount * 100) / state.overallVoteCount();
     }
 
     return (
       <label className="PollResult">
-          <PollOptionInput id={option.id()} isResult={false} name="vote" value="Vote for this option" />
+        <PollOptionInput id={option.id()} isResult={false} name="vote" value="Vote for this option" />
         <span className="PollResult-information">
           <div className="PollResult-row">
             <PollOptionLabel text={option.answer()} />

diff --git a/js/src/forum/components/Poll/PollSubTitle.tsx b/js/src/forum/components/Poll/PollSubTitle.tsx
@@ -0,0 +1,12 @@
+import * as Mithril from 'mithril';
+import Component, { ComponentAttrs } from 'flarum/common/Component';
+
+interface PollSubTitleAttrs extends ComponentAttrs {
+  text: String;
+}
+
+export default class PollSubTitle extends Component<PollSubTitleAttrs> {
+  view(): Mithril.Children {
+    return <p className="Poll-subtitle">{this.attrs.text}</p>;
+  }
+}
diff --git a/js/src/forum/components/PollForm.js b/js/src/forum/components/PollForm.js
@@ -8,12 +8,16 @@ import Stream from 'flarum/common/utils/Stream';
 import extractText from 'flarum/common/utils/extractText';
 import FormError from './form/FormError';
 import PollFormState from '../states/PollFormState';
+import PollControls from '../utils/PollControls';
 
 // Make translation calls shorter
 const t = app.translator.trans.bind(app.translator);
 const prfx = `${slug}.forum.poll_form`;
 
 export default class PollForm extends Component {
+  /** @type {PollFormState} */
+  state;
+
   oninit(vnode) {
     super.oninit(vnode);
     this.state = new PollFormState(this.attrs.poll);
@@ -65,13 +69,13 @@ export default class PollForm extends Component {
     );
 
     items.add(
-        'subtitle',
-        <div className="Form-group">
-          <label className="label">{app.translator.trans('fof-polls.forum.modal.subtitle_placeholder')}</label>
+      'subtitle',
+      <div className="Form-group">
+        <label className="label">{app.translator.trans('fof-polls.forum.modal.subtitle_placeholder')}</label>
 
-          <input type="text" name="subtitle" className="FormControl" bidi={this.subtitle} />
-        </div>,
-        95
+        <input type="text" name="subtitle" className="FormControl" bidi={this.subtitle} />
+      </div>,
+      95
     );
 
     items.add(
@@ -288,75 +292,30 @@ export default class PollForm extends Component {
     };
   }
 
-  async onsubmit(e) {
-    e.preventDefault();
+  async onsubmit(event) {
+    event.preventDefault();
 
     try {
-      await this.state.save(this.data());
-
-      // Show success alert
-      const alertId = app.alerts.show(
-        {
-          type: 'success',
-          controls: [
-            <Button
-              className="Button Button--link"
-              onclick={() =>
-                m.route.set(
-                  app.route('compose-poll', {
-                    edit: this.state.collection.id(),
-                  })
-                )
-              }
-            >
-              {t(`${prfx}.continue_editing`)}
-            </Button>,
-          ],
-        },
-        t(`${prfx}.success`)
-      );
-
-      // Hide alert after 10 seconds
-      setTimeout(() => app.alerts.dismiss(alertId), 10000);
-
-      // Check if we need to call a custom onsubmit callback
-      if (this.attrs.onsubmit) {
-        this.attrs.onsubmit(this.state.poll);
-      } else {
-        // Otherwise redirect to pools list
-        m.route.set(app.route('polls-manager'));
-      }
-    } catch (e) {
-      if (e instanceof FormError) {
-        app.alerts.show({ type: 'error' }, e.message);
+      await this.attrs.onsubmit(this.data(), this.state);
+    } catch (error) {
+      if (error instanceof FormError) {
+        app.alerts.show({ type: 'error' }, error.message);
       } else {
+        console.error(error);
         // Show error alert
         app.alerts.show({ type: 'error' }, t(`${prfx}.error`));
       }
-    } finally {
-      this.state.loading = false;
-      m.redraw();
     }
   }
 
   async delete() {
-    if (!confirm(t(`${prfx}.delete_confirm`))) {
-      return;
-    }
-
+    this.state.loading = true;
     try {
-      await this.state.delete();
-      // Show success alert
-      const alertId = app.alerts.show({ type: 'success' }, t(`${prfx}.delete_success`));
-
-      // Hide alert after 10 seconds
-      setTimeout(() => app.alerts.dismiss(alertId), 10000);
-
-      // Redirect to polls list
-      m.route.set(app.route('polls-manager'));
-    } catch (e) {
-      // Show error alert
-      app.alerts.show({ type: 'error' }, t(`${prfx}.delete_error`));
+      await PollControls.deleteAction(this.state.poll);
+      this.state.deleting = true;
+    } finally {
+      this.state.loading = false;
+      m.redraw();
     }
   }
 

diff --git a/js/src/forum/extend.ts b/js/src/forum/extend.ts
@@ -9,9 +9,7 @@ import PollsPage from './components/PollsPage';
 import ComposePollPage from './components/ComposePollPage';
 
 export default [
-  new Extend.Routes()
-    .add('fof_polls_list', '/polls', PollsPage)
-    .add('fof_polls_compose', '/polls/composer', ComposePollPage),
+  new Extend.Routes().add('fof_polls_list', '/polls', PollsPage).add('fof_polls_compose', '/polls/composer', ComposePollPage),
 
   new Extend.Store() //
     .add('polls', Poll)

diff --git a/js/src/forum/states/PollState.ts b/js/src/forum/states/PollState.ts
@@ -28,7 +28,10 @@ export default class PollState {
 
   overallVoteCount() {
     const options = this.poll.options();
-    return Math.max(100, (options ? options : []).reduce((max, option) => max + option!.voteCount(), 0));
+    return Math.max(
+      100,
+      (options ? options : []).reduce((max, option) => max + option!.voteCount(), 0)
+    );
   }
 
   showButton() {