From 8aaf921a5c5057661734003410179d4b8046bdd2 Mon Sep 17 00:00:00 2001
From: Sami Mazouz <sychocouldy@gmail.com>
Date: Sat, 23 Nov 2024 14:36:16 +0100
Subject: [PATCH] fix: admin UI

---
 extend.php                              |   1 -
 js/src/admin/components/SettingsPage.js | 272 +++++++++++++++---------
 resources/less/admin/extension.less     |  64 ++----
 src/Api/ForumResourceFields.php         |   2 +-
 src/Api/Resource/RankResource.php       |   9 +-
 5 files changed, 196 insertions(+), 152 deletions(-)

diff --git a/extend.php b/extend.php
index 47c6a6e..95b22f4 100644
--- a/extend.php
+++ b/extend.php
@@ -29,7 +29,6 @@
 use FoF\Extend\Extend\ExtensionSettings;
 use FoF\Gamification\Api\Controllers;
 use FoF\Gamification\Notification\VoteBlueprint;
-use FoF\Gamification\Provider\GamificationSortOptionsProvider;
 
 return [
     (new Extend\Frontend('admin'))
diff --git a/js/src/admin/components/SettingsPage.js b/js/src/admin/components/SettingsPage.js
index 574715b..b9e8ec9 100755
--- a/js/src/admin/components/SettingsPage.js
+++ b/js/src/admin/components/SettingsPage.js
@@ -6,6 +6,9 @@ import Switch from 'flarum/common/components/Switch';
 import withAttr from 'flarum/common/utils/withAttr';
 import Stream from 'flarum/common/utils/Stream';
 import ItemList from 'flarum/common/utils/ItemList';
+import Form from 'flarum/common/components/Form';
+import FormSection from 'flarum/admin/components/FormSection';
+import FormSectionGroup from 'flarum/admin/components/FormSectionGroup';
 import UploadImageButton from './UploadImageButton';
 import GroupSettings from './GroupSettings';
 
@@ -99,11 +102,13 @@ export default class SettingsPage extends ExtensionPage {
         name: this.newRank.name(),
         color: this.newRank.color(),
       })
-      .then(() => {
+      .then((rank) => {
         this.newRank.color('');
         this.newRank.name('');
         this.newRank.points('');
 
+        this.ranks.push(rank);
+
         m.redraw();
       });
   }
@@ -160,7 +165,7 @@ export default class SettingsPage extends ExtensionPage {
 
     items.add(
       'convertLikesToUpvotes',
-      <div>
+      <div className="Form-group">
         <div className="helpText">{app.translator.trans('fof-gamification.admin.page.convert.help')}</div>
         {this.values.convertedLikes() === undefined ? (
           <Button
@@ -187,39 +192,106 @@ export default class SettingsPage extends ExtensionPage {
       100
     );
 
+    items.add('firstSectionGroup', <FormSectionGroup>{this.firstSectionGroupItems().toArray()}</FormSectionGroup>, 80);
+
+    items.add('secondSectionGroup', <FormSectionGroup>{this.secondSectionGroupItems().toArray()}</FormSectionGroup>, 70);
+
+    items.add(
+      'submit',
+      <Button type="submit" className="Button Button--primary Ranks-save" loading={this.loading} disabled={!this.changed()}>
+        {app.translator.trans('fof-gamification.admin.page.save_settings')}
+      </Button>,
+      0
+    );
+
+    return items;
+  }
+
+  firstSectionGroupItems() {
+    const items = new ItemList();
+
     items.add(
       'ranks',
-      <fieldset className="SettingsPage-ranks">
-        <legend>{app.translator.trans('fof-gamification.admin.page.ranks.title')}</legend>
+      <FormSection label={app.translator.trans('fof-gamification.admin.page.ranks.title')} className="SettingsPage-ranks">
+        <Form>{this.rankItems().toArray()}</Form>
+      </FormSection>,
+      90
+    );
+
+    items.add(
+      'voteSettings',
+      <FormSection label={app.translator.trans('fof-gamification.admin.page.votes.title')}>
+        <Form>{this.voteItems().toArray()}</Form>
+      </FormSection>,
+      80
+    );
+
+    return items;
+  }
+
+  secondSectionGroupItems() {
+    const items = new ItemList();
+
+    items.add(
+      'rankingsPage',
+      <FormSection label={app.translator.trans('fof-gamification.admin.page.rankings.title')}>{this.rankingsItems().toArray()}</FormSection>,
+      70
+    );
+
+    items.add(
+      'groups',
+      <FormSection label={app.translator.trans('fof-gamification.admin.page.groups.title')} className="SettingsPage-groups">
+        <div className="helpText">{app.translator.trans('fof-gamification.admin.page.groups.help')}</div>
+        <GroupSettings value={this.values.autoAssignedGroups()} onchange={this.values.autoAssignedGroups} />
+      </FormSection>,
+      60
+    );
+
+    return items;
+  }
+
+  rankItems() {
+    const items = new ItemList();
+
+    items.add(
+      'ranks',
+      <div className="Form-group">
         <label>{app.translator.trans('fof-gamification.admin.page.ranks.ranks')}</label>
         <div className="helpText">{app.translator.trans('fof-gamification.admin.page.ranks.help.help')}</div>
-        <div className="Ranks--Container">
-          {this.ranks.map((rank) => (
-            <div>
-              <input
-                className="FormControl Ranks-number"
-                type="number"
-                value={rank.points()}
-                placeholder={app.translator.trans('fof-gamification.admin.page.ranks.help.points')}
-                oninput={withAttr('value', this.updatePoints.bind(this, rank))}
-              />
-              <input
-                className="FormControl Ranks-name"
-                value={rank.name()}
-                placeholder={app.translator.trans('fof-gamification.admin.page.ranks.help.name')}
-                oninput={withAttr('value', this.updateName.bind(this, rank))}
-              />
-              <input
-                className="FormControl Ranks-color"
-                value={rank.color()}
-                placeholder={app.translator.trans('fof-gamification.admin.page.ranks.help.color')}
-                oninput={withAttr('value', this.updateColor.bind(this, rank))}
-              />
-              <Button type="button" className="Button Button--warning Ranks-button" icon="fa fa-times" onclick={this.deleteRank.bind(this, rank)} />
-            </div>
-          ))}
-        </div>
-        <div>
+        {this.ranks.length > 0 ? (
+          <div className="Ranks--Container">
+            {this.ranks.map((rank) => (
+              <div className="Ranks--Container-row">
+                <input
+                  className="FormControl Ranks-number"
+                  type="number"
+                  value={rank.points()}
+                  placeholder={app.translator.trans('fof-gamification.admin.page.ranks.help.points')}
+                  oninput={withAttr('value', this.updatePoints.bind(this, rank))}
+                />
+                <input
+                  className="FormControl Ranks-name"
+                  value={rank.name()}
+                  placeholder={app.translator.trans('fof-gamification.admin.page.ranks.help.name')}
+                  oninput={withAttr('value', this.updateName.bind(this, rank))}
+                />
+                <input
+                  className="FormControl Ranks-color"
+                  value={rank.color()}
+                  placeholder={app.translator.trans('fof-gamification.admin.page.ranks.help.color')}
+                  oninput={withAttr('value', this.updateColor.bind(this, rank))}
+                />
+                <Button
+                  type="button"
+                  className="Button Button--warning Button--icon Ranks-button"
+                  icon="fa fa-times"
+                  onclick={this.deleteRank.bind(this, rank)}
+                />
+              </div>
+            ))}
+          </div>
+        ) : null}
+        <div className="Ranks--Container-row">
           <input
             className="FormControl Ranks-number"
             value={this.newRank.points()}
@@ -242,12 +314,19 @@ export default class SettingsPage extends ExtensionPage {
 
           <Button
             type="button"
-            className="Button Button--warning Ranks-button"
+            className="Button Button--primary Button--icon Ranks-button"
             icon="fa fa-plus"
             aria-label="add"
             onclick={this.addRank.bind(this)}
           />
         </div>
+      </div>,
+      100
+    );
+
+    items.add(
+      'rankNumbers',
+      <div className="Form-group">
         <label>{app.translator.trans('fof-gamification.admin.page.ranks.number_title')}</label>
         <input
           className="FormControl Ranks-default"
@@ -256,46 +335,10 @@ export default class SettingsPage extends ExtensionPage {
           min="0"
           oninput={withAttr('value', this.values.rankAmt)}
         />
-      </fieldset>,
-      90
-    );
-
-    items.add(
-      'voteSettings',
-      <>
-        <legend>{app.translator.trans('fof-gamification.admin.page.votes.title')}</legend>
-        {this.voteItems().toArray()}
-      </>,
+      </div>,
       80
     );
 
-    items.add(
-      'rankingsPage',
-      <>
-        <legend>{app.translator.trans('fof-gamification.admin.page.rankings.title')}</legend>
-        {this.rankingsItems().toArray()}
-      </>,
-      70
-    );
-
-    items.add(
-      'groups',
-      <fieldset className="SettingsPage-groups">
-        <legend>{app.translator.trans('fof-gamification.admin.page.groups.title')}</legend>
-        <div className="helpText">{app.translator.trans('fof-gamification.admin.page.groups.help')}</div>
-        <GroupSettings value={this.values.autoAssignedGroups()} onchange={this.values.autoAssignedGroups} />
-      </fieldset>,
-      60
-    );
-
-    items.add(
-      'submit',
-      <Button type="submit" className="Button Button--primary Ranks-save" loading={this.loading} disabled={!this.changed()}>
-        {app.translator.trans('fof-gamification.admin.page.save_settings')}
-      </Button>,
-      0
-    );
-
     return items;
   }
 
@@ -304,7 +347,7 @@ export default class SettingsPage extends ExtensionPage {
 
     items.add(
       'icon',
-      <>
+      <div className="Form-group">
         <label>{app.translator.trans('fof-gamification.admin.page.votes.icon_name')}</label>
         <div className="helpText">{app.translator.trans('fof-gamification.admin.page.votes.icon_help')}</div>
         <input
@@ -313,13 +356,13 @@ export default class SettingsPage extends ExtensionPage {
           placeholder="thumbs"
           oninput={withAttr('value', this.values.iconName)}
         />
-      </>,
+      </div>,
       100
     );
 
     items.add(
       'altIcon',
-      <>
+      <div className="Form-group">
         <label>{app.translator.trans('fof-gamification.admin.page.alt_votes.icon_name')}</label>
         <div className="helpText">{app.translator.trans('fof-gamification.admin.page.votes.icon_help')}</div>
         <input
@@ -328,71 +371,87 @@ export default class SettingsPage extends ExtensionPage {
           placeholder="arrow"
           oninput={withAttr('value', this.values.iconNameAlt)}
         />
-      </>,
+      </div>,
       90
     );
 
     items.add(
       'autoUpvote',
-      <Switch state={this.values.autoUpvotePosts() || false} onchange={this.values.autoUpvotePosts} className="votes-switch">
-        {app.translator.trans('fof-gamification.admin.page.votes.auto_upvote')}
-      </Switch>,
+      <div className="Form-group">
+        <Switch state={this.values.autoUpvotePosts() || false} onchange={this.values.autoUpvotePosts} className="votes-switch">
+          {app.translator.trans('fof-gamification.admin.page.votes.auto_upvote')}
+        </Switch>
+      </div>,
       80
     );
 
     items.add(
       'rateLimit',
-      <Switch state={this.values.rateLimit() || false} onchange={this.values.rateLimit} className="votes-switch">
-        {app.translator.trans('fof-gamification.admin.page.votes.rate_limit')}
-      </Switch>,
+      <div className="Form-group">
+        <Switch state={this.values.rateLimit() || false} onchange={this.values.rateLimit} className="votes-switch">
+          {app.translator.trans('fof-gamification.admin.page.votes.rate_limit')}
+        </Switch>
+      </div>,
       70
     );
 
     items.add(
       'opVotesOnDiscussionList',
-      <Switch state={this.values.showVotesOnDiscussionPage() || false} onchange={this.values.showVotesOnDiscussionPage} className="votes-switch">
-        {app.translator.trans('fof-gamification.admin.page.votes.discussion_page')}
-      </Switch>,
+      <div className="Form-group">
+        <Switch state={this.values.showVotesOnDiscussionPage() || false} onchange={this.values.showVotesOnDiscussionPage} className="votes-switch">
+          {app.translator.trans('fof-gamification.admin.page.votes.discussion_page')}
+        </Switch>
+      </div>,
       60
     );
 
     items.add(
       'altDiscussionListLayout',
-      <Switch state={this.values.useAlternateLayout() || false} onchange={this.values.useAlternateLayout} className="votes-switch">
-        {app.translator.trans('fof-gamification.admin.page.votes.alternate_layout')}
-      </Switch>,
+      <div className="Form-group">
+        <Switch state={this.values.useAlternateLayout() || false} onchange={this.values.useAlternateLayout} className="votes-switch">
+          {app.translator.trans('fof-gamification.admin.page.votes.alternate_layout')}
+        </Switch>
+      </div>,
       50
     );
 
     items.add(
       'altPostLayout',
-      <Switch state={this.values.altPostVotingUi() || false} onchange={this.values.altPostVotingUi} className="votes-switch">
-        {app.translator.trans('fof-gamification.admin.page.votes.alternate_post_layout')}
-      </Switch>,
+      <div className="Form-group">
+        <Switch state={this.values.altPostVotingUi() || false} onchange={this.values.altPostVotingUi} className="votes-switch">
+          {app.translator.trans('fof-gamification.admin.page.votes.alternate_post_layout')}
+        </Switch>
+      </div>,
       40
     );
 
     items.add(
       'upvotesOnly',
-      <Switch state={this.values.upVotesOnly() || false} onchange={this.values.upVotesOnly} className="votes-switch">
-        {app.translator.trans('fof-gamification.admin.page.votes.upvotes_only')}
-      </Switch>,
+      <div className="Form-group">
+        <Switch state={this.values.upVotesOnly() || false} onchange={this.values.upVotesOnly} className="votes-switch">
+          {app.translator.trans('fof-gamification.admin.page.votes.upvotes_only')}
+        </Switch>
+      </div>,
       30
     );
 
     items.add(
       'firstPostOnly',
-      <Switch state={this.values.firstPostOnly() || false} onchange={this.values.firstPostOnly} className="votes-switch">
-        {app.translator.trans('fof-gamification.admin.page.votes.first_post_only')}
-      </Switch>,
+      <div className="Form-group">
+        <Switch state={this.values.firstPostOnly() || false} onchange={this.values.firstPostOnly} className="votes-switch">
+          {app.translator.trans('fof-gamification.admin.page.votes.first_post_only')}
+        </Switch>
+      </div>,
       20
     );
 
     items.add(
       'allowSelfVotes',
-      <Switch state={this.values.allowSelfVotes()} onchange={this.values.allowSelfVotes} className="votes-switch">
-        {app.translator.trans('fof-gamification.admin.page.votes.allow_self_votes')}
-      </Switch>,
+      <div className="Form-group">
+        <Switch state={this.values.allowSelfVotes()} onchange={this.values.allowSelfVotes} className="votes-switch">
+          {app.translator.trans('fof-gamification.admin.page.votes.allow_self_votes')}
+        </Switch>
+      </div>,
       10
     );
 
@@ -404,32 +463,34 @@ export default class SettingsPage extends ExtensionPage {
 
     items.add(
       'customImages',
-      <Switch state={this.values.customRankingImages() || false} onchange={this.values.customRankingImages} className="votes-switch">
-        {app.translator.trans('fof-gamification.admin.page.rankings.enable')}
-      </Switch>,
+      <div className="Form-group">
+        <Switch state={this.values.customRankingImages() || false} onchange={this.values.customRankingImages} className="votes-switch">
+          {app.translator.trans('fof-gamification.admin.page.rankings.enable')}
+        </Switch>
+      </div>,
       100
     );
 
     items.add(
       'ignoredUsers',
-      <>
+      <div className="Form-group">
         <label>{app.translator.trans('fof-gamification.admin.page.rankings.blocked.title')}</label>
+        <div className="helpText">{app.translator.trans('fof-gamification.admin.page.rankings.blocked.help')}</div>
         <input
           className="FormControl Ranks-blocked"
           placeholder={app.translator.trans('fof-gamification.admin.page.rankings.blocked.placeholder')}
           value={this.values.blockedUsers() || ''}
           oninput={withAttr('value', this.values.blockedUsers)}
         />
-      </>,
+      </div>,
       90
     );
 
     items.add(
       'customImages',
       <>
-        <div className="helpText">{app.translator.trans('fof-gamification.admin.page.rankings.blocked.help')}</div>
         {[1, 2, 3].map((num) => (
-          <>
+          <div className="Form-group">
             <label className="Upload-label">{app.translator.trans(`fof-gamification.admin.page.rankings.custom_image_${num}`)}</label>
             <UploadImageButton
               className="Upload-button"
@@ -437,8 +498,7 @@ export default class SettingsPage extends ExtensionPage {
               path={`fof/gamification/topimage${num}`}
               aria-label={app.translator.trans(`fof-gamification.admin.page.rankings.custom_image_${num}`)}
             />
-            <br />
-          </>
+          </div>
         ))}
       </>,
       80
diff --git a/resources/less/admin/extension.less b/resources/less/admin/extension.less
index cb55190..acb0d41 100755
--- a/resources/less/admin/extension.less
+++ b/resources/less/admin/extension.less
@@ -3,17 +3,7 @@
 .SettingsPage {
   padding: 20px 0;
 
-
-  legend {
-    margin-top: 25px;
-  }
-
   @media @desktop-up {
-    .container {
-      max-width: 600px;
-      margin: 0;
-    }
-
     fieldset {
       margin-bottom: 30px;
 
@@ -30,42 +20,16 @@
     margin-top: 5px;
     margin-bottom: 5px
   }
-  
+
   .Upload-label {
     margin-right: 15px;
   }
-  
+
   .Upload-button {
     margin-top: 7.5px;
     margin-bottom: 7.5px;
   }
 
-  .helpText {
-    margin-bottom: 20px;
-  }
-  
-  .SettingsPage-ranks {
-      margin-top: 20px;
-  }
-  
-  .Ranks-number {
-    width: 15%;
-    float: left;
-    margin: 5px 5px 5px;
-  }
-  .Ranks-name {
-    width: 30%;
-    float: left;
-    margin: 5px 5px 5px;
-  }
-  .Ranks-color {
-    width: 18%;
-    float: left;
-    margin: 5px 5px 5px;
-  }
-  .Ranks-button {
-    margin: 5px 0 5px;
-  }
   .Ranks-default {
     width: 30%;
     margin-top: 5px;
@@ -74,8 +38,26 @@
   .Ranks-save {
     margin-top: 15px;
   }
-  .votes-switch {
-    margin-top: 20px;
-    margin-bottom: 20px;
+
+  .Ranks--Container-row {
+    display: flex;
+    gap: 4px;
+    width: auto;
+  }
+
+  .Ranks--Container-row > * {
+    flex-shrink: 1;
+    flex-grow: 0;
+  }
+
+  .Ranks--Container-row > button {
+    flex-grow: 1;
+    flex-shrink: 0;
+  }
+
+  .Ranks--Container {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
   }
 }
diff --git a/src/Api/ForumResourceFields.php b/src/Api/ForumResourceFields.php
index 1179721..aec2bba 100644
--- a/src/Api/ForumResourceFields.php
+++ b/src/Api/ForumResourceFields.php
@@ -48,7 +48,7 @@ public function __invoke(): array
             Schema\Relationship\ToMany::make('ranks')
                 ->type('ranks')
                 ->includable()
-                ->get(fn () => Rank::all()),
+                ->get(fn () => Rank::query()->get()->all()),
         ];
     }
 
diff --git a/src/Api/Resource/RankResource.php b/src/Api/Resource/RankResource.php
index 3a7c8fe..c478a94 100644
--- a/src/Api/Resource/RankResource.php
+++ b/src/Api/Resource/RankResource.php
@@ -49,11 +49,14 @@ public function fields(): array
         return [
 
             Schema\Number::make('points')
-                ->requiredOnCreate(),
+                ->requiredOnCreate()
+                ->writable(),
             Schema\Str::make('name')
-                ->requiredOnCreate(),
+                ->requiredOnCreate()
+                ->writable(),
             Schema\Str::make('color')
-                ->requiredOnCreate(),
+                ->requiredOnCreate()
+                ->writable(),
 
         ];
     }