Add initial teams feature

Dockerfile

@@ -6,6 +6,7 @@ FROM node as builder
 ARG VITE_TDEI_API_URL
 ARG VITE_TDEI_USER_API_URL
 ARG VITE_API_URL
+ARG VITE_NEW_API_URL
 ARG VITE_OSM_URL
 ARG VITE_RAPID_URL
 ARG VITE_PATHWAYS_EDITOR_URL
@@ -29,8 +30,8 @@ COPY --from=builder /app/.output/public /usr/share/nginx/html/
 # https://stackoverflow.com/questions/44438637/arg-substitution-in-run-command-not-working-for-dockerfile
 ARG CODE_VERSION
 
-RUN echo "This is (frontend, cgimap, osmrails, pathways, rapid, taskingmanager) $CODE_VERSION"
-RUN echo "This is (frontend, cgimap, osmrails, pathways, rapid, taskingmanager) $CODE_VERSION" > /usr/share/nginx/html/VERSION
+RUN echo "This is (frontend, api, cgimap, osmrails, pathways, rapid, taskingmanager) $CODE_VERSION"
+RUN echo "This is (frontend, api, cgimap, osmrails, pathways, rapid, taskingmanager) $CODE_VERSION" > /usr/share/nginx/html/VERSION
 
 RUN chown -R nginx:nginx /usr/share/nginx/html/
 

app.vue

@@ -1,5 +1,7 @@
 <template>
-  <nuxt-layout>
-    <nuxt-page />
-  </nuxt-layout>
+  <b-app>
+    <nuxt-layout>
+      <nuxt-page />
+    </nuxt-layout>
+  </b-app>
 </template>

assets/scss/main.scss

@@ -1,6 +1,7 @@
 @import "theme.scss";
 @import "bootstrap/scss/bootstrap.scss";
 @import "maplibre-gl/dist/maplibre-gl.css";
+@import "vue3-toastify/dist/index.css";
 
 :root {
   --ws-create-color: $review-create-color;

components/AppNavbar.vue

@@ -1,12 +1,12 @@
 <template>
   <nav class="app-navbar navbar navbar-expand-md shadow">
     <div class="container-lg">
       <nuxt-link class="navbar-brand" to="/">
         <app-logo />
         <span>TDEI</span>&nbsp;<span>Workspaces</span>
       </nuxt-link>
 
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
 
@@ -29,18 +29,21 @@
         <span class="mx-auto" />
 
         <nuxt-link v-show="!auth.ok" to="/signin" class="btn">Sign In</nuxt-link>
-        <span v-show="auth.ok" class="nav-item dropdown">
-          <a class="nav-link" href="#" id="navbarAccountMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+        <b-dropdown
+          v-show="auth.ok"
+          class="nav-item"
+          placement="bottom-end"
+          :variant="null"
+          is-nav
+          no-caret
+        >
+          <template #button-content>
             <app-icon variant="account_circle" size="24" />{{ auth.displayName }}
-          </a>
-          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarAccountMenuLink">
-            <li>
-              <nuxt-link class="dropdown-item" to="/" @click="auth.clear()">
-                <app-icon variant="logout" class="me-3" />Logout
-              </nuxt-link>
-            </li>
-          </ul>
-        </span>
+          </template>
+          <b-dropdown-item to="/" @click="auth.clear()">
+            <app-icon variant="logout" class="me-3" />Logout
+          </b-dropdown-item>
+        </b-dropdown>
       </div>
     </div>
   </nav>

components/ReturnToDashboardButton.vue

@@ -0,0 +1,20 @@
+<template>
+  <b-button
+    :variant="props.variant"
+    to="/dashboard"
+  >
+    Return to Dashboard
+  </b-button>
+</template>
+
+<script setup lang="ts">
+import type { BButtonProps } from 'bootstrap-vue-next/types';
+
+interface Props {
+  variant?: BButtonProps['variant'];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'primary',
+});
+</script>

components/review/FilterDropdown.vue

@@ -1,73 +1,72 @@
 <template>
-  <div class="dropdown ms-auto">
-    <button
-      id="reviewSettingsBtn"
-      type="button"
-      class="btn btn-light btn-sm border"
-      data-bs-toggle="dropdown"
-      aria-haspopup="true"
-      aria-expanded="false"
-    >
+  <b-dropdown
+    class="ms-auto"
+    toggle-class="border"
+    variant="light"
+    size="sm"
+    placement="bottom-end"
+    auto-close="outside"
+    no-caret
+  >
+    <template #button-content>
       <app-icon variant="settings" no-margin />
       <span class="visually-hidden">Settings</span>
-    </button>
+    </template>
 
-    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="reviewSettingsBtn">
-      <div class="px-3 py-2">
-        <div class="form-check form-switch">
-          <label class="form-check-label">
-            <input
-              v-model="filter.includeChangesets"
-              type="checkbox"
-              class="form-check-input"
-            />
-            Changesets
-          </label>
-        </div>
-        <div class="form-check form-switch">
-          <label class="form-check-label">
-            <input
-              v-model="filter.includeFeedback"
-              type="checkbox"
-              class="form-check-input"
-            />
-            Feedback
-          </label>
-        </div>
-        <div class="form-check form-switch">
-          <label class="form-check-label">
-            <input
-              v-model="filter.includeNotes"
-              type="checkbox"
-              class="form-check-input"
-            />
-            Notes
-          </label>
-        </div>
+    <div class="px-3 py-2">
+      <div class="form-check form-switch">
+        <label class="form-check-label">
+          <input
+            v-model="filter.includeChangesets"
+            type="checkbox"
+            class="form-check-input"
+          />
+          Changesets
+        </label>
       </div>
+      <div class="form-check form-switch">
+        <label class="form-check-label">
+          <input
+            v-model="filter.includeFeedback"
+            type="checkbox"
+            class="form-check-input"
+          />
+          Feedback
+        </label>
+      </div>
+      <div class="form-check form-switch">
+        <label class="form-check-label">
+          <input
+            v-model="filter.includeNotes"
+            type="checkbox"
+            class="form-check-input"
+          />
+          Notes
+        </label>
+      </div>
+    </div>
 
-      <div class="dropdown-divider" />
+    <b-dropdown-divider />
 
-      <div class="px-3 py-2">
-        <div class="form-check form-switch">
-          <label class="form-check-label">
-            <input
-              v-model="filter.includeResolved"
-              type="checkbox"
-              class="form-check-input"
-            />
-            Show Resolved
-          </label>
-        </div>
+    <div class="px-3 py-2">
+      <div class="form-check form-switch">
+        <label class="form-check-label">
+          <input
+            v-model="filter.includeResolved"
+            type="checkbox"
+            class="form-check-input"
+          />
+          Show Resolved
+        </label>
       </div>
+    </div>
 
-      <div class="dropdown-divider" />
+    <div class="dropdown-divider" />
 
-      <div class="px-3 py-2">
-        <button class="d-block btn btn-primary btn-sm" @click="apply">Apply</button>
-      </div>
-    </div><!-- .dropdown-menu -->
-  </div><!-- .dropdown -->
+    <div class="px-3 py-2">
+      <button class="d-block btn btn-primary btn-sm" @click="apply">Apply</button>
+    </div>
+  </b-dropdown>
 </template>
 
 <script setup lang="ts">

components/settings/Nav.vue

@@ -0,0 +1,19 @@
+<template>
+  <nav class="list-group mb-4">
+    <settings-nav-link
+      to=""
+      icon="settings"
+    >
+      General
+    </settings-nav-link>
+    <settings-nav-link
+      to="/teams"
+      icon="group"
+    >
+      Teams
+    </settings-nav-link>
+  </nav>
+</template>
+
+<script setup lang="ts">
+</script>

components/settings/NavLink.vue

@@ -0,0 +1,29 @@
+<template>
+  <nuxt-link
+    class="list-group-item"
+    :class="{ active }"
+    :to="to"
+  >
+    <app-icon :variant="props.icon" />
+    <slot />
+  </nuxt-link>
+</template>
+
+<script setup lang="ts">
+import type { Workspace } from '~/types/workspaces';
+
+interface Props {
+  to: string;
+  icon: string;
+}
+
+const props = defineProps<Props>();
+const route = useRoute();
+
+const workspace = inject<Workspace>('workspace')!;
+const to = computed(() => `/workspace/${workspace.id}/settings${props.to}`);
+
+const active = computed(() =>
+  (route.path.endsWith('/settings') && to.value.endsWith('/settings'))
+  || (!to.value.endsWith('/settings') && route.path.startsWith(to.value)));
+</script>