From 08db8b718c9a453cd3da1138522fde44d7657b17 Mon Sep 17 00:00:00 2001
From: Andrew Lalis <andrewlalisofficial@gmail.com>
Date: Thu, 16 Feb 2023 19:06:44 +0100
Subject: [PATCH] Removed old pages, added users search.

---
 gymboard-app/src/api/search/models.ts         |  3 +
 .../components/ExerciseSubmissionListItem.vue | 12 ++-
 .../components/UserSearchResultListItem.vue   | 30 +++++++
 gymboard-app/src/i18n/en-US/index.ts          |  3 +
 gymboard-app/src/i18n/nl-NL/index.ts          |  3 +
 gymboard-app/src/layouts/MainLayout.vue       |  2 +-
 gymboard-app/src/pages/AboutPage.vue          | 14 ----
 .../{IndexPage.vue => GymSearchPage.vue}      |  0
 gymboard-app/src/pages/TestingPage.vue        | 33 --------
 gymboard-app/src/pages/UserPage.vue           |  1 +
 gymboard-app/src/pages/UserSearchPage.vue     | 84 +++++++++++++++++++
 gymboard-app/src/pages/gym/GymHomePage.vue    |  1 +
 .../src/pages/gym/GymLeaderboardsPage.vue     |  1 +
 gymboard-app/src/router/routes.ts             | 10 +--
 .../src/main/resources/sql/select-users.sql   |  2 +-
 15 files changed, 142 insertions(+), 57 deletions(-)
 create mode 100644 gymboard-app/src/components/UserSearchResultListItem.vue
 delete mode 100644 gymboard-app/src/pages/AboutPage.vue
 rename gymboard-app/src/pages/{IndexPage.vue => GymSearchPage.vue} (100%)
 delete mode 100644 gymboard-app/src/pages/TestingPage.vue
 create mode 100644 gymboard-app/src/pages/UserSearchPage.vue

diff --git a/gymboard-app/src/api/search/models.ts b/gymboard-app/src/api/search/models.ts
index 224a4f4..ecc728a 100644
--- a/gymboard-app/src/api/search/models.ts
+++ b/gymboard-app/src/api/search/models.ts
@@ -15,4 +15,7 @@ export interface GymSearchResult {
 export interface UserSearchResult {
   id: string;
   name: string;
+  submissionCount: number;
+  accountPrivate: boolean;
+  locale: string;
 }
diff --git a/gymboard-app/src/components/ExerciseSubmissionListItem.vue b/gymboard-app/src/components/ExerciseSubmissionListItem.vue
index 7c39d5a..36bcb33 100644
--- a/gymboard-app/src/components/ExerciseSubmissionListItem.vue
+++ b/gymboard-app/src/components/ExerciseSubmissionListItem.vue
@@ -5,9 +5,12 @@
         {{ submission.rawWeight }}&nbsp;{{ WeightUnitUtil.toAbbreviation(submission.weightUnit) }}
         {{ submission.exercise.displayName }}
       </q-item-label>
-      <q-item-label caption>
+      <q-item-label caption v-if="showName">
         {{ submission.user.name }}
       </q-item-label>
+      <q-item-label caption v-if="showGym">
+        {{ submission.gym.displayName }}
+      </q-item-label>
     </q-item-section>
     <q-item-section side top>
       {{ submission.performedAt.setLocale($i18n.locale).toLocaleString(DateTime.DATETIME_MED) }}
@@ -21,8 +24,13 @@ import { DateTime } from 'luxon';
 
 interface Props {
   submission: ExerciseSubmission;
+  showName?: boolean;
+  showGym?: boolean;
 }
-defineProps<Props>();
+withDefaults(defineProps<Props>(), {
+  showName: true,
+  showGym: true,
+});
 </script>
 
 <style scoped></style>
diff --git a/gymboard-app/src/components/UserSearchResultListItem.vue b/gymboard-app/src/components/UserSearchResultListItem.vue
new file mode 100644
index 0000000..e433225
--- /dev/null
+++ b/gymboard-app/src/components/UserSearchResultListItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <q-item :to="`/users/${user.id}`">
+    <q-item-section>
+      <q-item-label>{{ user.name }}</q-item-label>
+    </q-item-section>
+    <q-item-section side top>
+      <q-badge color="primary" :label="submissionCountLabel"/>
+    </q-item-section>
+  </q-item>
+</template>
+
+<script setup lang="ts">
+import {UserSearchResult} from 'src/api/search/models';
+import {computed} from 'vue';
+
+interface Props {
+  user: UserSearchResult;
+}
+const props = defineProps<Props>();
+const submissionCountLabel = computed(() => {
+  const c = props.user.submissionCount;
+  if (c < 1000) return '' + c;
+  if (c < 1000000) return Math.floor(c / 1000) + 'k';
+  return Math.floor(c / 1000000) + 'm';
+});
+</script>
+
+<style scoped>
+
+</style>
diff --git a/gymboard-app/src/i18n/en-US/index.ts b/gymboard-app/src/i18n/en-US/index.ts
index 6389ee7..765bf9f 100644
--- a/gymboard-app/src/i18n/en-US/index.ts
+++ b/gymboard-app/src/i18n/en-US/index.ts
@@ -48,6 +48,9 @@ export default {
     accountPrivate: 'This account is private.',
     recentLifts: 'Recent Lifts',
   },
+  userSearchPage: {
+    searchHint: 'Search for a user'
+  },
   userSettingsPage: {
     title: 'Account Settings',
     password: 'Password',
diff --git a/gymboard-app/src/i18n/nl-NL/index.ts b/gymboard-app/src/i18n/nl-NL/index.ts
index c8b31d6..d83c6f4 100644
--- a/gymboard-app/src/i18n/nl-NL/index.ts
+++ b/gymboard-app/src/i18n/nl-NL/index.ts
@@ -48,6 +48,9 @@ export default {
     accountPrivate: 'Dit account is privaat.',
     recentLifts: 'Recente liften',
   },
+  userSearchPage: {
+    searchHint: 'Zoek een gebruiker'
+  },
   userSettingsPage: {
     title: 'Account instellingen',
     password: 'Wachtwoord',
diff --git a/gymboard-app/src/layouts/MainLayout.vue b/gymboard-app/src/layouts/MainLayout.vue
index c4f881e..54cf531 100644
--- a/gymboard-app/src/layouts/MainLayout.vue
+++ b/gymboard-app/src/layouts/MainLayout.vue
@@ -27,7 +27,7 @@
         </q-item-label>
         <q-item clickable to="/">Gyms</q-item>
         <q-item clickable>Global Leaderboard</q-item>
-        <q-item clickable to="/testing">Testing Page</q-item>
+        <q-item clickable to="/users">Users</q-item>
         <q-item clickable to="/about">About</q-item>
       </q-list>
     </q-drawer>
diff --git a/gymboard-app/src/pages/AboutPage.vue b/gymboard-app/src/pages/AboutPage.vue
deleted file mode 100644
index 83fe221..0000000
--- a/gymboard-app/src/pages/AboutPage.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <StandardCenteredPage>
-    <h3 class="text-center">About Gymboard</h3>
-    <p>
-      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error fugit quia
-      laboriosam eaque? Deserunt, accusantium dicta assumenda debitis incidunt
-      eius provident magnam, est quasi officia voluptas, nam neque omnis
-      reiciendis.
-    </p>
-  </StandardCenteredPage>
-</template>
-<script setup lang="ts">
-import StandardCenteredPage from 'src/components/StandardCenteredPage.vue';
-</script>
diff --git a/gymboard-app/src/pages/IndexPage.vue b/gymboard-app/src/pages/GymSearchPage.vue
similarity index 100%
rename from gymboard-app/src/pages/IndexPage.vue
rename to gymboard-app/src/pages/GymSearchPage.vue
diff --git a/gymboard-app/src/pages/TestingPage.vue b/gymboard-app/src/pages/TestingPage.vue
deleted file mode 100644
index 4ae6ca7..0000000
--- a/gymboard-app/src/pages/TestingPage.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <q-page>
-    <StandardCenteredPage>
-      <h3>Testing Page</h3>
-      <p>
-        Use this page to test new functionality, before adding it to the main
-        app. This page should be hidden on production.
-      </p>
-      <div style="border: 3px solid red">
-        <h4>Auth Test</h4>
-        <q-btn label="Do auth" @click="doAuth()" />
-        <q-btn label="Logout" @click="api.auth.logout(authStore)" />
-      </div>
-    </StandardCenteredPage>
-  </q-page>
-</template>
-
-<script setup lang="ts">
-import StandardCenteredPage from 'src/components/StandardCenteredPage.vue';
-import api from 'src/api/main';
-import { useAuthStore } from 'stores/auth-store';
-
-const authStore = useAuthStore();
-
-async function doAuth() {
-  await api.auth.login(authStore, {
-    email: 'andrew.lalis@example.com',
-    password: 'testpass',
-  });
-}
-</script>
-
-<style scoped></style>
diff --git a/gymboard-app/src/pages/UserPage.vue b/gymboard-app/src/pages/UserPage.vue
index 166e544..d237304 100644
--- a/gymboard-app/src/pages/UserPage.vue
+++ b/gymboard-app/src/pages/UserPage.vue
@@ -19,6 +19,7 @@
             v-for="sub in recentSubmissions"
             :submission="sub"
             :key="sub.id"
+            :show-name="false"
           />
         </q-list>
       </div>
diff --git a/gymboard-app/src/pages/UserSearchPage.vue b/gymboard-app/src/pages/UserSearchPage.vue
new file mode 100644
index 0000000..f7e471c
--- /dev/null
+++ b/gymboard-app/src/pages/UserSearchPage.vue
@@ -0,0 +1,84 @@
+<template>
+  <q-page>
+    <StandardCenteredPage>
+      <q-input
+        v-model="searchQuery"
+        :label="$t('userSearchPage.searchHint')"
+        clearable
+        :loading="searchBarLoadingState"
+        @update:modelValue="onSearchQueryUpdated"
+        class="q-mt-lg"
+      >
+        <template v-slot:append>
+          <q-icon name="search"/>
+        </template>
+      </q-input>
+
+      <q-list>
+        <UserSearchResultListItem
+          v-for="result in searchResults"
+          :user="result"
+          :key="result.id"
+        />
+      </q-list>
+    </StandardCenteredPage>
+  </q-page>
+</template>
+
+<script setup lang="ts">
+import StandardCenteredPage from 'components/StandardCenteredPage.vue';
+import {onMounted, Ref, ref} from 'vue';
+import {UserSearchResult} from 'src/api/search/models';
+import {useRoute, useRouter} from 'vue-router';
+import {sleep} from 'src/utils';
+import searchApi from 'src/api/search';
+import UserSearchResultListItem from 'components/UserSearchResultListItem.vue';
+
+const route = useRoute();
+const router = useRouter();
+
+const searchQuery = ref('');
+const searchBarLoadingState = ref(false);
+const searchResults: Ref<UserSearchResult[]> = ref([]);
+
+let timer: ReturnType<typeof setTimeout> | null = null;
+
+const SEARCH_TIMEOUT = 500;
+
+onMounted(async () => {
+  if (route.query.search_query) {
+    searchQuery.value = route.query.search_query as string;
+    searchBarLoadingState.value = true;
+    await sleep(500);
+    await doSearch();
+  }
+});
+
+function onSearchQueryUpdated() {
+  if (timer !== null) {
+    clearTimeout(timer);
+  }
+  timer = setTimeout(doSearch, SEARCH_TIMEOUT);
+  searchBarLoadingState.value = true;
+}
+
+async function doSearch() {
+  const searchQueryText = searchQuery.value;
+  let query = {};
+  if (searchQueryText && searchQueryText.length > 0) {
+    query = { search_query: searchQueryText };
+  }
+  await router.push({ path: '/users', query: query });
+  try {
+    searchResults.value = await searchApi.searchUsers(searchQueryText);
+  } catch (error) {
+    console.error(error);
+  } finally {
+    searchBarLoadingState.value = false;
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/gymboard-app/src/pages/gym/GymHomePage.vue b/gymboard-app/src/pages/gym/GymHomePage.vue
index c32dafe..5df2aec 100644
--- a/gymboard-app/src/pages/gym/GymHomePage.vue
+++ b/gymboard-app/src/pages/gym/GymHomePage.vue
@@ -34,6 +34,7 @@
           v-for="sub in recentSubmissions"
           :submission="sub"
           :key="sub.id"
+          :show-gym="false"
         />
       </q-list>
     </div>
diff --git a/gymboard-app/src/pages/gym/GymLeaderboardsPage.vue b/gymboard-app/src/pages/gym/GymLeaderboardsPage.vue
index a86d500..133f12e 100644
--- a/gymboard-app/src/pages/gym/GymLeaderboardsPage.vue
+++ b/gymboard-app/src/pages/gym/GymLeaderboardsPage.vue
@@ -22,6 +22,7 @@
         v-for="sub in submissions"
         :submission="sub"
         :key="sub.id"
+        :show-gym="false"
       />
     </q-list>
   </q-page>
diff --git a/gymboard-app/src/router/routes.ts b/gymboard-app/src/router/routes.ts
index 35f2e7e..5cbebfa 100644
--- a/gymboard-app/src/router/routes.ts
+++ b/gymboard-app/src/router/routes.ts
@@ -1,12 +1,10 @@
 import { RouteRecordRaw } from 'vue-router';
 import MainLayout from 'layouts/MainLayout.vue';
-import IndexPage from 'pages/IndexPage.vue';
-import AboutPage from 'pages/AboutPage.vue';
+import GymSearchPage from 'pages/GymSearchPage.vue';
 import GymPage from 'pages/gym/GymPage.vue';
 import GymSubmissionPage from 'pages/gym/GymSubmissionPage.vue';
 import GymHomePage from 'pages/gym/GymHomePage.vue';
 import GymLeaderboardsPage from 'pages/gym/GymLeaderboardsPage.vue';
-import TestingPage from 'pages/TestingPage.vue';
 import LoginPage from 'pages/auth/LoginPage.vue';
 import RegisterPage from 'pages/auth/RegisterPage.vue';
 import RegistrationSuccessPage from 'pages/auth/RegistrationSuccessPage.vue';
@@ -14,6 +12,7 @@ import ActivationPage from 'pages/auth/ActivationPage.vue';
 import SubmissionPage from 'pages/SubmissionPage.vue';
 import UserPage from 'pages/UserPage.vue';
 import UserSettingsPage from 'pages/auth/UserSettingsPage.vue';
+import UserSearchPage from 'pages/UserSearchPage.vue';
 
 const routes: RouteRecordRaw[] = [
   // Auth-related pages, which live outside the main layout.
@@ -27,8 +26,8 @@ const routes: RouteRecordRaw[] = [
     path: '/',
     component: MainLayout,
     children: [
-      { path: '', component: IndexPage },
-      { path: 'testing', component: TestingPage },
+      { path: '', component: GymSearchPage },
+      { path: 'users', component: UserSearchPage },
       {
         path: 'users/:userId',
         children: [
@@ -48,7 +47,6 @@ const routes: RouteRecordRaw[] = [
         ],
       },
       { path: 'submissions/:submissionId', component: SubmissionPage },
-      { path: 'about', component: AboutPage },
     ],
   },
 
diff --git a/gymboard-search/src/main/resources/sql/select-users.sql b/gymboard-search/src/main/resources/sql/select-users.sql
index 6df9427..282a217 100644
--- a/gymboard-search/src/main/resources/sql/select-users.sql
+++ b/gymboard-search/src/main/resources/sql/select-users.sql
@@ -5,7 +5,7 @@ SELECT
     (
         SELECT COUNT(id)
         FROM submission
-        WHERE submission.id = u.id
+        WHERE submission.user_id = u.id
     ) as submission_count,
     p.account_private as account_private,
     p.locale as locale