@appscode/design-system 2.17.67 → 2.17.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.17.67",
+  "version": "2.17.68",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/v3/navbar/User.vue

@@ -8,6 +8,7 @@ import type { User } from "../../types/user";
 
 export interface FormatedOrgs extends User {
   isPersonalAccount?: boolean;
+  orgType?: number;
 }
 
 export interface Props {
@@ -43,19 +44,28 @@ const dropDownSectionHeight = ref<string | null>(null);
 const dropdownItems = ref(null as { $el: HTMLElement } | null);
 
 const formattedOrganizations = computed(() => {
-  let activeUser: User | undefined = undefined;
+  let activeUser: FormatedOrgs | undefined = undefined;
   const filteredList = props.organizations.filter((item) => {
     if (item.username === props.user.username) {
       activeUser = item;
-    } else {
-      return true;
+      return false;
     }
-    return false;
+    return true;
   });
 
-  if (activeUser) filteredList.unshift(activeUser);
+  filteredList.sort((a, b) => {
+    if (a.orgType === 6 && b.orgType !== 6) return -1;
+    if (a.orgType !== 6 && b.orgType === 6) return 1;
+    return 0;
+  });
+
+  if (activeUser) {
+    const insertAt = filteredList.findIndex((item) => item.orgType !== 6);
+    if (insertAt === -1) filteredList.push(activeUser);
+    else filteredList.splice(insertAt, 0, activeUser);
+  }
 
-  return filteredList || [];
+  return filteredList;
 });
 
 const toggleList = () => {
@@ -65,8 +75,8 @@ const toggleList = () => {
   });
 };
 
-const onOrganizationClick = (orgName: string, idx: number) => {
-  if (idx === 0) return;
+const onOrganizationClick = (orgName: string) => {
+  if (orgName === props.user.username) return;
   dropdownItems.value?.$el.scrollTo(0, 0);
   emit("activeorg$set", orgName);
   handleIsActiveChange("");
@@ -128,7 +138,13 @@ function handleIsActiveChange(isActive: string) {
                   <div class="profile-info" style="width: calc(100% - 60px)">
                     <strong> {{ user.username }} </strong>
                     <p>
-                      {{ user.isPersonalAccount || user.is_admin ? "Personal Account" : "Organization" }}
+                      {{
+                        user.orgType === 6
+                          ? "Administrative Org"
+                          : user.isPersonalAccount || user.is_admin
+                            ? "Personal Account"
+                            : "Organization"
+                      }}
                     </p>
                   </div>
                 </div>
@@ -152,8 +168,8 @@ function handleIsActiveChange(isActive: string) {
                     ref="dropdownItems"
                     :style="{ maxHeight: dropDownSectionHeight }"
                   >
-                    <li v-for="(org, idx) in formattedOrganizations" :key="org.username">
-                      <a class="is-flex is-align-items-center" @click="onOrganizationClick(org.username, idx)">
+                    <li v-for="org in formattedOrganizations" :key="org.username">
+                      <a class="is-flex is-align-items-center" @click="onOrganizationClick(org.username)">
                         <div class="width-30 height-30 image">
                           <img :src="org.avatar_url" class="ac-user-profile is-rounded" alt="icon" />
                         </div>
@@ -163,10 +179,19 @@ function handleIsActiveChange(isActive: string) {
                               org.username
                             }}</strong>
                             <p>
-                              {{ org.isPersonalAccount ? "Personal Account" : "Organization" }}
+                              {{
+                                org.orgType === 6
+                                  ? "Administrative Org"
+                                  : org.isPersonalAccount
+                                    ? "Personal Account"
+                                    : "Organization"
+                              }}
                             </p>
                           </div>
-                          <span v-if="idx === 0" class="material-icons font-size-18 ml-10 is-pulled-right">
+                          <span
+                            v-if="org.username === user.username"
+                            class="material-icons font-size-18 ml-10 is-pulled-right"
+                          >
                             <HeroiconsCheck />
                           </span>
                         </div>