Client - init OAuth Applications list

fittrackee_client/src/components/Common/Pagination.vue

@@ -50,13 +50,14 @@
   import { toRefs } from 'vue'
 
   import { IPagination, TPaginationPayload } from '@/types/api'
+  import { IOauth2ClientsPayload } from '@/types/oauth'
   import { TWorkoutsPayload } from '@/types/workouts'
   import { rangePagination } from '@/utils/api'
 
   interface Props {
     pagination: IPagination
     path: string
-    query: TWorkoutsPayload | TPaginationPayload
+    query: TWorkoutsPayload | TPaginationPayload | IOauth2ClientsPayload
   }
   const props = defineProps<Props>()
 

fittrackee_client/src/components/User/ProfileDisplay/index.vue

@@ -22,7 +22,7 @@
   const props = defineProps<Props>()
 
   const { user, tab } = toRefs(props)
-  const tabs = ['PROFILE', 'PREFERENCES', 'SPORTS']
+  const tabs = ['PROFILE', 'PREFERENCES', 'SPORTS', 'APPS']
 </script>
 
 <style lang="scss" scoped>

fittrackee_client/src/components/User/UserApps/UserAppsList.vue

@@ -0,0 +1,104 @@
+<template>
+  <div id="oauth2-apps-list">
+    <p class="apps-list">{{ $t('oauth2.APPS_LIST') }}</p>
+    <ul v-if="clients.length > 0">
+      <li v-for="client in clients" :key="client.client_id">
+        {{ client.name }}
+        <span class="app-issued-at">
+          {{ $t('oauth2.APP.ISSUE_AT') }}
+          {{
+            format(
+              getDateWithTZ(client.issued_at, authUser.timezone),
+              'dd/MM/yyyy HH:mm'
+            )
+          }}
+        </span>
+      </li>
+    </ul>
+    <div class="no-apps" v-else>{{ $t('oauth2.NO_APPS') }}</div>
+    <Pagination :pagination="pagination" path="/profile/apps" :query="query" />
+    <button @click="$router.push('/')">{{ $t('common.HOME') }}</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { format } from 'date-fns'
+  import { ComputedRef, computed, onBeforeMount, toRefs, watch } from 'vue'
+  import { LocationQuery, useRoute } from 'vue-router'
+
+  import Pagination from '@/components/Common/Pagination.vue'
+  import { OAUTH2_STORE } from '@/store/constants'
+  import { IPagination } from '@/types/api'
+  import { IOAuth2Client, IOauth2ClientsPayload } from '@/types/oauth'
+  import { IAuthUserProfile } from '@/types/user'
+  import { useStore } from '@/use/useStore'
+  import { defaultPage, getNumberQueryValue } from '@/utils/api'
+  import { getDateWithTZ } from '@/utils/dates'
+
+  interface Props {
+    authUser: IAuthUserProfile
+  }
+  const props = defineProps<Props>()
+
+  const store = useStore()
+  const route = useRoute()
+
+  const { authUser } = toRefs(props)
+  const clients: ComputedRef<IOAuth2Client[]> = computed(
+    () => store.getters[OAUTH2_STORE.GETTERS.CLIENTS]
+  )
+
+  const pagination: ComputedRef<IPagination> = computed(
+    () => store.getters[OAUTH2_STORE.GETTERS.CLIENTS_PAGINATION]
+  )
+  let query: IOauth2ClientsPayload = getClientsQuery(route.query)
+
+  onBeforeMount(() => {
+    loadClients(query)
+  })
+
+  function getClientsQuery(newQuery: LocationQuery): IOauth2ClientsPayload {
+    let clientsQuery: IOauth2ClientsPayload = {}
+    if (newQuery.page) {
+      clientsQuery.page = getNumberQueryValue(newQuery.page, defaultPage)
+    }
+    return clientsQuery
+  }
+  function loadClients(payload: IOauth2ClientsPayload) {
+    store.dispatch(OAUTH2_STORE.ACTIONS.GET_CLIENTS, payload)
+  }
+
+  watch(
+    () => route.query,
+    async (newQuery) => {
+      query = getClientsQuery(newQuery)
+      loadClients(query)
+    }
+  )
+</script>
+
+<style scoped lang="scss">
+  @import '~@/scss/vars.scss';
+
+  #oauth2-apps-list {
+    ul {
+      list-style: square;
+
+      li {
+        padding-bottom: $default-padding;
+      }
+    }
+
+    .app-issued-at {
+      font-size: 0.85em;
+      font-style: italic;
+    }
+    .apps-list {
+      font-size: 1.05em;
+      font-weight: bold;
+    }
+    .no-apps {
+      font-style: italic;
+    }
+  }
+</style>

fittrackee_client/src/components/User/UserApps/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <div id="oauth2-apps">
+    <router-view :authUser="user"></router-view>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { toRefs } from 'vue'
+
+  import { IAuthUserProfile } from '@/types/user'
+
+  interface Props {
+    user: IAuthUserProfile
+  }
+  const props = defineProps<Props>()
+
+  const { user } = toRefs(props)
+</script>

fittrackee_client/src/components/User/UserProfileTabs.vue

@@ -38,6 +38,7 @@
       case 'ACCOUNT':
       case 'PICTURE':
         return `/profile/edit/${tab.toLocaleLowerCase()}`
+      case 'APPS':
       case 'PREFERENCES':
       case 'SPORTS':
         return `/profile${