feat: add sorting

FriendsOfFlarum · Oct 27, 2024 · c7b0bee · c7b0bee
1 parent f92b50d
commit c7b0bee
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 5 deletions.
diff --git a/js/src/forum/components/ModeratorNotes.tsx b/js/src/forum/components/ModeratorNotes.tsx
@@ -9,6 +9,8 @@ import ItemList from 'flarum/common/utils/ItemList';
 import User from 'flarum/common/models/User';
 import Mithril from 'mithril';
 import ModeratorNote from '../model/ModeratorNote';
+import Dropdown from 'flarum/common/components/Dropdown';
+import Placeholder from 'flarum/common/components/Placeholder';
 
 export interface ModeratorNotesAttrs extends ComponentAttrs {
   user: User;
@@ -20,6 +22,7 @@ export default class ModeratorNotes extends Component<ModeratorNotesAttrs> {
   notes: ModeratorNote[] = [];
   user!: User;
   loadLimit: number = 20;
+  sort: string = 'newest';
 
   oninit(vnode: Mithril.Vnode<ModeratorNotesAttrs>) {
     super.oninit(vnode);
@@ -47,17 +50,59 @@ export default class ModeratorNotes extends Component<ModeratorNotesAttrs> {
                 </li>
               );
             })}
-            {!this.loading && this.notes.length === 0 && <label>{app.translator.trans('fof-moderator-notes.forum.moderatorNotes.noNotes')}</label>}
+            {!this.loading && this.notes.length === 0 && (
+              <Placeholder text={app.translator.trans('fof-moderator-notes.forum.moderatorNotes.noNotes')} />
+            )}
           </ul>
         )}
       </div>
     );
   }
 
+  sortmap() {
+    const map: any = {};
+
+    map.newest = '-createdAt';
+    map.oldest = 'createdAt';
+
+    return map;
+  }
+
   actionItems(): ItemList<Mithril.Children> {
     const items = new ItemList<Mithril.Children>();
     const canCreateNote = app.session.user?.canCreateModeratorNotes();
 
+    const sortOptions = Object.keys(this.sortmap()).reduce((acc: any, sortId) => {
+      acc[sortId] = app.translator.trans(`core.forum.index_sort.${sortId}_button`);
+      return acc;
+    }, {});
+
+    items.add(
+      'sort',
+      <Dropdown
+        buttonClassName="Button"
+        label={sortOptions[this.sort] || sortOptions[Object.keys(this.sortmap())[0]]}
+        accessibleToggleLabel={app.translator.trans('core.forum.index_sort.toggle_dropdown_accessible_label')}
+      >
+        {Object.keys(sortOptions).map((value) => {
+          const label = sortOptions[value];
+          const active = this.sort === value;
+
+          return (
+            <Button
+              icon={active ? 'fas fa-check' : true}
+              onclick={() => {
+                this.setSort(value);
+              }}
+              active={active}
+            >
+              {label}
+            </Button>
+          );
+        })}
+      </Dropdown>
+    );
+
     canCreateNote &&
       items.add(
         'create_note',
@@ -69,6 +114,11 @@ export default class ModeratorNotes extends Component<ModeratorNotesAttrs> {
     return items;
   }
 
+  setSort(sort: string) {
+    this.sort = sort;
+    this.loadResults();
+  }
+
   async loadResults(offset = 0) {
     this.loading = true;
 
@@ -77,13 +127,11 @@ export default class ModeratorNotes extends Component<ModeratorNotesAttrs> {
         subject: this.user.id() as string,
       },
       page: { offset, limit: this.loadLimit },
-      sort: '-createdAt',
+      sort: this.sortmap()[this.sort],
     });
 
     this.notes = results;
-
     this.loading = false;
-
     m.redraw();
   }
 

diff --git a/js/src/forum/components/ModeratorNotesCreate.tsx b/js/src/forum/components/ModeratorNotesCreate.tsx
@@ -61,7 +61,7 @@ export default class ModeratorNotesCreate extends Modal<ModeratorNotesCreateAttr
     this.loading = true;
 
     app.store
-      .createRecord('fof-moderator-note')
+      .createRecord('moderatorNote')
       .save(
         {
           userId: this.user?.id(),