chore: set default layout on app level #10

teritorio · Apr 17, 2024 · 4c6e1de · 4c6e1de
1 parent c83d17b
commit 4c6e1de
Show file tree

Hide file tree

Showing 5 changed files with 152 additions and 104 deletions.
diff --git a/app.vue b/app.vue
@@ -1,3 +1,87 @@
+<script setup lang="ts">
+import type { User } from '~/libs/apiTypes'
+
+const back = ref(true)
+const { locale, locales, setLocale } = useI18n()
+
+const user = useState<User>('user')
+const authToken = useCookie('_interslice_session')
+if (authToken.value) {
+  await callOnce(async () => {
+    try {
+      user.value = await $fetch<User>(`${useRuntimeConfig().public.API}/users/me`, { credentials: 'include' })
+    }
+    catch (error) {
+      console.error(error)
+    }
+  })
+}
+
+const availableLocales = computed(() => {
+  return locales.value.filter((i) => i.code !== locale.value)
+})
+
+// Function from https://dev.to/jorik/country-code-to-flag-emoji-a21
+function getFlagEmoji(countryCode: string) {
+  const codePoints = countryCode
+    .toUpperCase()
+    .split('')
+    .map((char) => 127397 + char.charCodeAt(0))
+  return String.fromCodePoint(...codePoints)
+}
+</script>
+
 <template>
-  <NuxtPage />
+  <NuxtLayout>
+    <el-menu mode="horizontal" :ellipsis="false">
+      <el-menu-item v-if="back" index="0">
+        <a href="/" :title="$t('app.back')">
+          <img src="/favicon.svg" style="width: 6em" />
+        </a>
+      </el-menu-item>
+      <el-menu-item v-else index="0">
+        <img src="/favicon.svg" style="width: 6em" />
+      </el-menu-item>
+      <div class="flex-grow" />
+      <el-menu-item index="1">
+        <slot name="header" />
+      </el-menu-item>
+      <div class="flex-grow" />
+      <el-menu-item index="2">
+        <el-select
+          v-model="locale"
+          class="m-2"
+          placeholder="Language"
+          size="small"
+          @change="setLocale"
+        >
+          <el-option
+            v-for="l in availableLocales"
+            :key="l.code"
+            :label="`${getFlagEmoji(l.flag)} ${l.name}`"
+            :value="l.code"
+            :fit-input-width="true"
+          />
+        </el-select>
+      </el-menu-item>
+      <el-menu-item index="3">
+        <User :user="user" />
+      </el-menu-item>
+    </el-menu>
+    <NuxtPage />
+    <footer>
+      <p>
+        {{ $t('app.attribution.data') }}
+        <a href="https://www.openstreetmap.org/copyright" target="_blank">{{
+          $t('app.attribution.osm')
+        }}</a>
+      </p>
+    </footer>
+  </NuxtLayout>
 </template>
+
+<style scoped>
+.flex-grow {
+  flex-grow: 1;
+}
+</style>
diff --git a/components/Logs.vue b/components/Logs.vue
@@ -19,10 +19,6 @@ export default defineNuxtComponent({
       type: String,
       required: true,
     },
-    user: {
-      type: Object as PropType<User | null>,
-      default: null,
-    },
     logs: {
       type: Array as PropType<Logs>,
       required: true,
@@ -51,6 +47,12 @@ export default defineNuxtComponent({
     }
   },
 
+  setup() {
+    const user = useState<User>('user')
+
+    return { user }
+  },
+
   watch: {
     filterByAction() {
       this.updateUrl()

diff --git a/pages/[project]/changes_logs.vue b/pages/[project]/changes_logs.vue
@@ -1,12 +1,8 @@
 <script setup lang="ts">
-import type { User } from '~/libs/apiTypes'
-import { getUser } from '~/libs/apiTypes'
 import {
-  getAsyncDataOrNull,
   getAsyncDataOrThrows,
   setAsyncRef,
 } from '~/libs/getAsyncData'
-import LogsCompo from '~/components/Logs.vue'
 import type { Logs, ObjectId, Project } from '~/libs/types'
 import { getLogs, getProject } from '~/libs/types'
 
@@ -18,14 +14,9 @@ definePageMeta({
 
 const params = useRoute().params
 const project: string = params.project as string
-
-const user = ref<User>()
 const projectDetails = ref<Project>()
 const logs = ref<Logs>()
 
-getAsyncDataOrNull('fetchUser', () =>
-  getUser(useRuntimeConfig().public.API)).then(setAsyncRef(user))
-
 getAsyncDataOrThrows('fetchProject', () =>
   getProject(useRuntimeConfig().public.API, project)).then(setAsyncRef(projectDetails))
 
@@ -43,19 +34,13 @@ function removeLogs(objectIds: ObjectId[]) {
 </script>
 
 <template>
-  <Layout :user="user">
-    <template #header>
-      <ProjectLight v-if="projectDetails" :project="projectDetails" />
-      <template v-else>
-        <div v-loading="true" />
-      </template>
-    </template>
-    <LogsCompo
-      v-if="logs !== undefined" :project="project" :user="user" :logs="logs"
+  <div>
+    <ProjectLight v-if="projectDetails" :project="projectDetails" />
+    <Logs
+      v-if="logs !== undefined"
+      :project="project"
+      :logs="logs"
       @remove-logs="removeLogs($event)"
     />
-    <template v-else>
-      <div v-loading="true" />
-    </template>
-  </Layout>
+  </div>
 </template>
diff --git a/pages/[project]/index.vue b/pages/[project]/index.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import type { User } from '~/libs/apiTypes'
-import { getUser } from '~/libs/apiTypes'
 import {
-  getAsyncDataOrNull,
   getAsyncDataOrThrows,
   setAsyncRef,
 } from '~/libs/getAsyncData'
@@ -18,22 +15,12 @@ definePageMeta({
 
 const params = useRoute().params
 const project: string = params.project as string
-
-const user = ref<User>()
 const projectDetails = ref<Project>()
 
-getAsyncDataOrNull('fetchUser', () =>
-  getUser(useRuntimeConfig().public.API)).then(setAsyncRef(user))
-
 getAsyncDataOrThrows('fetchProject', () =>
   getProject(useRuntimeConfig().public.API, project)).then(setAsyncRef(projectDetails))
 </script>
 
 <template>
-  <Layout :user="user">
-    <ProjectCompo v-if="projectDetails" :project="projectDetails" />
-    <template v-else>
-      <div v-loading="true" />
-    </template>
-  </Layout>
+  <ProjectCompo v-if="projectDetails" :project="projectDetails" />
 </template>
diff --git a/pages/index.vue b/pages/index.vue
@@ -1,22 +1,14 @@
 <script setup lang="ts">
 import _ from 'underscore'
 import type { User } from '~/libs/apiTypes'
-import { getUser } from '~/libs/apiTypes'
-import {
-  getAsyncDataOrNull,
-  getAsyncDataOrThrows,
-  setAsyncRef,
-} from '~/libs/getAsyncData'
+import { getAsyncDataOrThrows } from '~/libs/getAsyncData'
 import type { Projects } from '~/libs/types'
 import { getProjects } from '~/libs/types'
 
-const user = ref<User>()
+const user = useState<User>('user')
 const myProjects = ref<Projects>()
 const otherProjects = ref<Projects>()
 
-getAsyncDataOrNull('fetchUser', () =>
-  getUser(useRuntimeConfig().public.API)).then(setAsyncRef(user))
-
 getAsyncDataOrThrows('fetchSettings', () =>
   getProjects(useRuntimeConfig().public.API)).then((data) => {
   const projects = data.data as Ref<Projects>
@@ -31,59 +23,57 @@ getAsyncDataOrThrows('fetchSettings', () =>
 </script>
 
 <template>
-  <Layout :user="user" :back="false">
-    <div>
-      <h1>{{ $t('app.title') }}</h1>
-      <el-row>
-        <el-col :span="18">
-          <p>
-            <i>{{ $t('app.summary') }}</i>
-            <br />
-            <a href="https://github.com/teritorio/clearance">{{
-              $t('app.github')
-            }}</a>
-          </p>
-          <p>
-            {{ $t('app.project.new') }}
-            <a
-              href="https://www.openstreetmap.org/user/frodrigo"
-              target="_blank"
-            >frodrigo</a>
-          </p>
-        </el-col>
-        <el-col :span="6">
-          <img src="/Clearance-process.svg" style="width: 100%" />
-        </el-col>
-      </el-row>
+  <div>
+    <h1>{{ $t('app.title') }}</h1>
+    <el-row>
+      <el-col :span="18">
+        <p>
+          <i>{{ $t('app.summary') }}</i>
+          <br />
+          <a href="https://github.com/teritorio/clearance">{{
+            $t('app.github')
+          }}</a>
+        </p>
+        <p>
+          {{ $t('app.project.new') }}
+          <a
+            href="https://www.openstreetmap.org/user/frodrigo"
+            target="_blank"
+          >frodrigo</a>
+        </p>
+      </el-col>
+      <el-col :span="6">
+        <img src="/Clearance-process.svg" style="width: 100%" />
+      </el-col>
+    </el-row>
 
-      <template v-if="myProjects !== undefined && myProjects?.length > 0">
-        <h2>{{ $t('page.index.myProjects') }}</h2>
-        <el-space :fill="true" wrap :size="20">
-          <Project
-            v-for="project in myProjects"
-            :key="project.id"
-            :project="project"
-          />
-        </el-space>
-      </template>
-      <h2>{{ $t('page.index.publicProjects') }}</h2>
-      <template v-if="otherProjects === undefined">
-        <el-empty
-          v-loading="true"
-          :description="$t('page.index.empty')"
-          :image-size="50"
+    <template v-if="myProjects !== undefined && myProjects?.length > 0">
+      <h2>{{ $t('page.index.myProjects') }}</h2>
+      <el-space :fill="true" wrap :size="20">
+        <Project
+          v-for="project in myProjects"
+          :key="project.id"
+          :project="project"
+        />
+      </el-space>
+    </template>
+    <h2>{{ $t('page.index.publicProjects') }}</h2>
+    <template v-if="otherProjects === undefined">
+      <el-empty
+        v-loading="true"
+        :description="$t('page.index.empty')"
+        :image-size="50"
+      />
+    </template>
+    <template v-else-if="otherProjects.length > 0">
+      <el-space :fill="true" wrap :size="20">
+        <Project
+          v-for="project in otherProjects"
+          :key="project.id"
+          :project="project"
         />
-      </template>
-      <template v-else-if="otherProjects.length > 0">
-        <el-space :fill="true" wrap :size="20">
-          <Project
-            v-for="project in otherProjects"
-            :key="project.id"
-            :project="project"
-          />
-        </el-space>
-      </template>
-      <el-empty v-else :description="$t('page.index.empty')" :image-size="50" />
-    </div>
-  </Layout>
+      </el-space>
+    </template>
+    <el-empty v-else :description="$t('page.index.empty')" :image-size="50" />
+  </div>
 </template>