feat(frontend): Organisations are now sorted alphabetically in dashboard and on user pages (#3755)

* feat: Organisations are now sorted alphabetically in dashboard and on user pages

* Use computed ref

---------

Co-authored-by: Prospector <prospectordev@gmail.com>
Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>

Author: worldwidepixel

apps/frontend/src/pages/dashboard/organizations.vue

@@ -14,7 +14,7 @@
       <template v-if="orgs?.length > 0">
         <div class="orgs-grid">
           <nuxt-link
-            v-for="org in orgs"
+            v-for="org in sortedOrgs"
             :key="org.id"
             :to="`/organization/${org.slug}`"
             class="universal-card button-base recessed org"
@@ -67,6 +67,8 @@ const { data: orgs, error } = useAsyncData("organizations", () => {
   });
 });
 
+const sortedOrgs = computed(() => orgs.value.sort((a, b) => a.name.localeCompare(b.name)));
+
 const onlyAcceptedMembers = (members) => members.filter((member) => member?.accepted);
 
 if (error.value) {

apps/frontend/src/pages/user/[id].vue

@@ -303,7 +303,7 @@
           <h2 class="text-lg text-contrast">{{ formatMessage(messages.profileOrganizations) }}</h2>
           <div class="flex flex-wrap gap-2">
             <nuxt-link
-              v-for="org in organizations"
+              v-for="org in sortedOrgs"
               :key="org.id"
               v-tooltip="org.name"
               class="organization"
@@ -516,6 +516,8 @@ try {
   });
 }
 
+const sortedOrgs = computed(() => organizations.value.sort((a, b) => a.name.localeCompare(b.name)));
+
 if (!user.value) {
   throw createError({
     fatal: true,