Beta 16, showing missing 'uncategorized' category and fixed #3

js/src/admin/components/SortableBadge.js

@@ -1,4 +1,4 @@
-import Component from "flarum/Component";
+import Component from "flarum/common/Component";
 import Button from "flarum/components/Button";
 import ConfirmModal from "./ConfirmModal";
 import EditBadgeModal from "./EditBadgeModal";

js/src/forum/components/BadgeModal.js

@@ -171,7 +171,16 @@ export default class BadgeModal extends Modal {
             </b>
           </p>
           <p>
-            {this.attrs.badge.category().name()}
+            {this.attrs.badge.category() && (
+              this.attrs.badge.category().name()
+            )}
+
+            {/* Uncategorized */}
+            {!this.attrs.badge.category() && (
+              app.translator.trans(
+                "v17development-flarum-badges.forum.uncategorized"
+              )
+            )}
             {/* <Link
               href={app.route("badges.category", {
                 category: this.attrs.badge.category().id(),

js/src/forum/components/BadgesProfilePage.js

@@ -1,4 +1,5 @@
 import UserPage from "flarum/components/UserPage";
+import LoadingIndicator from "flarum/components/LoadingIndicator";
 import UserBadgeList from "./UserBadgeList";
 
 export default class BadgesProfilePage extends UserPage {
@@ -7,10 +8,18 @@ export default class BadgesProfilePage extends UserPage {
 
     this.user = null;
 
+    this.loading = true;
+
     this.loadUser(m.route.param("username"));
   }
 
   content() {
+    if (!this.user || this.loading) {
+      return (
+        <LoadingIndicator size={46} />
+      );
+    }
+
     return UserBadgeList.component({
       user: this.user,
     });
@@ -19,5 +28,12 @@ export default class BadgesProfilePage extends UserPage {
   show(user) {
     super.show(user);
     this.user = user;
+
+    app.store.find('users', user.id(), {
+      include: 'userBadges,userBadges.badge,userBadges.badge.category'
+    }).then(() => {
+      this.loading = false;
+      m.redraw();
+    });
   }
 }

js/src/forum/components/GiveBadgeModal.js

@@ -27,7 +27,9 @@ export default class GiveBadgeModal extends Modal {
     this.description = Stream(this.badge.description());
 
     // List of available bagges
-    this.availableBadges = [];
+    this.categories = {};
+
+    this.uncategorizedBadges = [];
 
     this.loading = false;
 
@@ -36,11 +38,29 @@ export default class GiveBadgeModal extends Modal {
       this.loading = true;
 
       app.store
-        .find("badge_categories", {
-          include: "badges",
+        .find('badges', {
+          include: 'category'
         })
-        .then((badgeCategories) => {
-          this.availableBadges = badgeCategories;
+        .then(badges => {
+          badges.forEach(badge => {
+            // Categorized
+            if(badge.category()) {
+              const category = badge.category();
+
+              if (!this.categories[category.id()]) {
+                this.categories[category.id()] = {
+                  category,
+                  badges: [badge],
+                };
+              } else {
+                this.categories[category.id()].badges.push(badge);
+              }
+            }
+            // Uncategorized
+            else{
+              this.uncategorizedBadges.push(badge);
+            }
+          });
 
           this.loading = false;
 
@@ -121,13 +141,22 @@ export default class GiveBadgeModal extends Modal {
 
             {/* When no badge is selected, show all available badges */}
             {!this.attrs.badge &&
-              this.availableBadges.map((category) => (
+              Object.values(this.categories).map(({ category, badges}) => (
                 <optgroup label={category.name()}>
-                  {category.badges().map((badge) => (
+                  {badges.map((badge) => (
                     <option value={badge.id()}>{badge.name()}</option>
                   ))}
                 </optgroup>
               ))}
+
+            {!this.attrs.badge &&
+              this.uncategorizedBadges.length >= 1 && (
+                <optgroup label={app.translator.trans("v17development-flarum-badges.forum.uncategorized")}>
+                  {this.uncategorizedBadges.map((badge) => (
+                    <option value={badge.id()}>{badge.name()}</option>
+                  ))}
+                </optgroup>
+              )}
 
             {/* When a badge is already assigned */}
             {!!this.attrs.badge && (

js/src/forum/components/UserBadge.js

@@ -1,4 +1,4 @@
-import Component from "flarum/Component";
+import Component from "flarum/common/Component";
 import BadgeModal from "./BadgeModal";
 
 export default class UserBadge extends Component {

js/src/forum/components/UserBadgeList.js

@@ -1,30 +1,42 @@
-import Component from "flarum/Component";
+import Component from "flarum/common/Component";
 import UserBadge from "./UserBadge";
 
 export default class UserBadgeList extends Component {
   view() {
     const categories = {};
+    const uncategorized = [];
 
     this.attrs.user.userBadges().map((userBadge) => {
       if (!userBadge) return null;
 
-      const category = userBadge.badge().category();
+      // Categorized
+      if(userBadge.badge().category()) {
+        const category = userBadge.badge().category();
 
-      if (!categories[category.id()]) {
-        categories[category.id()] = {
-          category,
-          badges: [userBadge],
-        };
-      } else {
-        categories[category.id()].badges.push(userBadge);
+        if (!categories[category.id()]) {
+          categories[category.id()] = {
+            category,
+            badges: [userBadge],
+          };
+        } else {
+          categories[category.id()].badges.push(userBadge);
+        }
+      }
+      // Uncategorized
+      else{
+        uncategorized.push(userBadge);
       }
     });
 
     return (
       <div className="UserBadges">
         {Object.keys(categories).length === 0 && (
           <div className={"Placeholder"}>
-            <p>This user does not have any badges yet.</p>
+            <p>
+              {app.translator.trans(
+                "v17development-flarum-badges.forum.user_no_badges"
+              )}
+            </p>
           </div>
         )}
 
@@ -57,6 +69,26 @@ export default class UserBadgeList extends Component {
                 </div>
               );
             })}
+
+        {/* Uncategorized badges */}
+        {uncategorized.length >= 1 && (
+          <div className={"UserBadgesCategory"}>
+            <h3>
+              {app.translator.trans(
+                "v17development-flarum-badges.forum.uncategorized"
+              )}
+            </h3>
+
+            {uncategorized
+              .sort((a, b) => a.badge().order() - b.badge().order())
+              .map((userBadge) => (
+                <UserBadge
+                  badge={userBadge.badge()}
+                  userBadgeData={userBadge}
+                />
+              ))}
+          </div>
+        )}
       </div>
     );
   }

locale/en.yaml

@@ -42,6 +42,8 @@ v17development-flarum-badges:
     update_badge: Update badge
     select_badge: Select badge
     user_has_badge: The user already has this badge.
+    user_no_badges: This user does not have any badges yet.
+    uncategorized: => v17development-flarum-badges.admin.uncategorized
 
     badge:
       badge: Badge