moved team/user selection dropdown to top left rather than in dropdown

Signed-off-by: Trey <73353716+TreyWW@users.noreply.github.com>

backend/core/api/teams/switch_team.py

@@ -7,17 +7,17 @@
 
 
 def switch_team(request: HtmxHttpRequest, team_id: str | int | None = None):
-
     if not team_id:
         team_id = request.POST.get("join_team", None)
 
     if not team_id:
         if not request.user.logged_in_as_team:
-            messages.error(request, "You are not logged into an organization")
+            messages.warning(request, "You are not logged into an organization")
+        else:
+            messages.success(request, "You are now logged into your personal account")
 
         request.user.logged_in_as_team = None
         request.user.save()
-        messages.success(request, "You are now logged into your personal account")
         response = HttpResponse(status=200)
         response["HX-Refresh"] = "true"
         return response
@@ -36,7 +36,7 @@ def switch_team(request: HtmxHttpRequest, team_id: str | int | None = None):
         messages.error(request, "You are not a member of this team")
         return render(request, "partials/messages_list.html")
 
-    messages.success(request, f"Now signing in for {team.name}")
+    messages.success(request, f"Now signing into the organization '{team.name}'")
     request.user.logged_in_as_team = team
     request.user.save()
 

backend/core/models.py

@@ -1,5 +1,6 @@
 from __future__ import annotations
 
+import itertools
 import typing
 from datetime import datetime, date, timedelta
 from typing import Literal, Union
@@ -92,6 +93,14 @@ class Role(models.TextChoices):
     def name(self):
         return self.first_name
 
+    @property
+    def teams_apart_of(self) -> set[QuerySet[Organization]]:
+        return set(itertools.chain(self.teams_joined.all(), self.teams_leader_of.all()))
+
+    @property
+    def is_org(self):
+        return False
+
 
 def add_3hrs_from_now():
     return timezone.now() + timezone.timedelta(hours=3)
@@ -249,9 +258,14 @@ def is_logged_in_as_team(self, request) -> bool:
             return True
         return False
 
+    @property
     def is_authenticated(self):
         return True
 
+    @property
+    def is_org(self):
+        return True
+
 
 class TeamMemberPermission(models.Model):
     team = models.ForeignKey(Organization, on_delete=models.CASCADE, related_name="permissions")

frontend/templates/base/topbar/_topbar.html

@@ -15,18 +15,7 @@
             </label>
         </div>
         <div class="flex items-center gap-x-0 gap-x-3 ms-4 md:gap-x-5">
-            <a href="/" class="hidden lg:block">
-                <label for="service_list_drawer"
-                       id="service_list_button"
-                       aria-label="close sidebar"
-                       class="flex items-center swap-rotate drawer-overlay swap">
-                    <input type="checkbox" id="logo_single_service_list_toggler" />
-                    <img src="{% static "img/logo_single.png" %}" class="h-10 swap-off">
-                    <i class="absolute flex items-center justify-center fa fa-solid fa-x swap-on"></i>
-                </label>
-            </a>
-            <a class="font-semibold text-base-content md:text-2xl"
-               href="/dashboard/">My Finances</a>
+            {% include 'base/topbar/team_selector/selector.html' %}
         </div>
     </div>
     <div class="z-50 hidden navbar-center lg:flex">
@@ -112,26 +101,10 @@
     </details>
     <div class="dropdown dropdown-end">
         <label tabindex="0" class="btn btn-ghost btn-circle">
-            {% component "profile_picture" image_type="small" extra_classes="max-w-12 max-h-12 w-12 h-12 avatar-img-ring" url=request.user.user_profile.profile_picture_url %}
+            {% component "profile_picture" image_type="small" extra_classes="max-w-8 max-h-8 w-8 h-8 avatar-img-ring" url=request.user.user_profile.profile_picture_url %}
         </label>
         <ul tabindex="0"
             class="border menu menu-sm dropdown-content border-primary">
-            <details class="flex flex-col dropdown dropdown-left">
-                <summary class="block h-full max-h-full p-2 text-left btn"
-                         data-htmx-swap="logged_in_for"
-                         hx-trigger="click"
-                         hx-target='[data-htmx-swap="organization_dropdown_list"]'
-                         hx-get="{% url "api:teams:get_dropdown" %}"
-                         hx-swap="innerHTML">{% component "components:logged_in_for" %}</summary>
-                <ul class="border menu menu-sm dropdown-content border-primary gap-1"
-                    data-htmx-swap="organization_dropdown_list">
-                    <div class="flex items-center justify-center gap-2">
-                        <i class="loading"></i>
-                        Loading
-                    </div>
-                </ul>
-            </details>
-            <div class="mt-0 mb-0 divider"></div>
             {% component "base:topbar:icon_dropdown" %}
         </ul>
     </div>

frontend/templates/base/topbar/team_selector/selector.html

@@ -0,0 +1,50 @@
+<div class="dropdown" data-hx-container="team_selector">
+    <label tabindex="0"
+           class="flex flex-row justify-between items-center w-48 border h-8 rounded cursor-pointer pe-4">
+        <div class="flex flex-row">
+            {% if request.actor.is_org or not request.user.user_profile.profile_picture %}
+                <img class="p-1 ms-2 h-6 w-6 object-contain"
+                     src="https://raw.githubusercontent.com/TreyWW/MyFinances/main/frontend/static/img/logo_single.png"
+                     alt="Logo" />
+                <div class="font-bold ms-2">{{ request.actor.name }}</div>
+            {% else %}
+                <img class="p-1 ms-2 h-6 w-6 object-contain"
+                     src="{{ request.user.user_profile.profile_picture.url }}"
+                     alt="Logo" />
+                <div class="font-bold ms-2">{{ request.user.name }}</div>
+            {% endif %}
+        </div>
+        <div class="fa-layers fa-fw fa-xs">
+            <span class="fas fa-chevron-up" data-fa-transform="up-6"></span>
+            <span class="fas fa-chevron-down" data-fa-transform="down-6"></span>
+        </div>
+    </label>
+    <ul tabindex="0"
+        class="dropdown-content menu p-2 border shadow bg-base-100 !w-full !rounded mt-2"
+        data-hx-container="dropdown_items">
+        <div class="font-bold p-2">Personal Account</div>
+        <button class="font-semibold flex flex-row hover:bg-base-100 rounded items-center py-1 pe-4 justify-between {% if not request.actor.is_org %}bg-base-100{% endif %}"
+                hx-post="{% url 'api:teams:switch_team' team_id=0 %}"
+                hx-swap="none">
+            <div class="items-center flex flex-row">
+                {% component "profile_picture" image_type="small" extra_classes="p-1 h-6 w-6 object-contain" url=request.user.user_profile.profile_picture_url %}
+                <a>{{ request.user.first_name|default_if_none:"You" }}</a>
+            </div>
+            {% if not request.actor.is_org %}<i class="fa fa-check"></i>{% endif %}
+        </button>
+        <div class="font-bold mt-2 p-2">Teams</div>
+        {% for team in request.user.teams_apart_of %}
+            <button class="flex flex-row hover:bg-base-100 rounded items-center py-1 pe-4 justify-between {% if request.actor.is_org and team.id == request.actor.id %}bg-base-100{% endif %}"
+                    hx-post="{% url 'api:teams:switch_team' team_id=team.id %}"
+                    hx-swap="none">
+                <div class="items-center flex flex-row">
+                    <img class="p-1 h-6 w-6 object-contain"
+                         src="https://raw.githubusercontent.com/TreyWW/MyFinances/main/frontend/static/img/logo_single.png"
+                         alt="Logo" />
+                    <p>{{ team.name }}</p>
+                </div>
+                {% if request.actor.is_org and team.id == request.actor.id %}<i class="fa fa-check"></i>{% endif %}
+            </button>
+        {% endfor %}
+    </ul>
+</div>

frontend/templates/components/+logged_in_for.html

@@ -1,13 +0,0 @@
-<div hx-swap-oob='innerHTML:[data-htmx-swap="logged_in_for"]'>
-    {% if request.user.logged_in_as_team %}
-        <h2 class="text-xl mb-1">Organization</h2>
-        <h2 class="text-md">
-            Logged in for <strong>{{ request.user.logged_in_as_team.name }}</strong>
-        </h2>
-    {% else %}
-        <h2 class="text-xl mb-1">Personal</h2>
-        <h2 class="text-md">
-            Logged in as <strong>{{ request.user.first_name | default_if_none:"You" }}</strong>
-        </h2>
-    {% endif %}
-</div>