Merge pull request #60 from xebia-france/feat/ui-cv-updates

✨ cv updates (ui)

package.json

@@ -8,9 +8,11 @@
     "preview": "vite preview",
     "build-only": "vite build",
     "type-check": "vue-tsc --noEmit",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "deploy": "firebase deploy --only hosting"
   },
   "dependencies": {
+    "axios": "^1.2.2",
     "contentful": "^9.2.14",
     "contentful-rich-text-vue-renderer": "^3.0.1",
     "dayjs": "^1.11.7",

src/components/CvUpdates.vue

@@ -0,0 +1,107 @@
+<template>
+  <h2 class="title">CV updates</h2>
+  <div
+    class="body"
+    :key="update.firstName + update.name"
+    v-for="update in cvUpdates"
+  >
+    <span class="body__left">{{ dayjs(update.updatedAt).fromNow(true) }}</span>
+    <span class="body__middle">{{ update.firstName }} {{ update.name }}</span>
+    <span class="body__right">
+      <button class="body__button" @click="goCv(update.id, 'full', 'fr')">
+        🇫🇷
+      </button>
+      <button class="body__button" @click="goCv(update.id, 'full', 'en')">
+        🇺🇸
+      </button>
+      <button class="body__button" @click="goCv(update.id, 'mini', 'fr')">
+        🇫🇷 mini
+      </button>
+      <button class="body__button" @click="goCv(update.id, 'mini', 'en')">
+        🇺🇸 mini
+      </button>
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import axios from "axios";
+import { auth } from "@/firebase/init";
+import dayjs from "dayjs";
+
+interface CvUpdate {
+  firstName: string;
+  name: string;
+  updatedAt: Date;
+  id: string;
+}
+
+export default defineComponent({
+  data() {
+    return {
+      cvUpdates: [] as CvUpdate[],
+    };
+  },
+  methods: {
+    dayjs,
+    async getCvUpdates(accessToken: string) {
+      const res = await axios.get<CvUpdate[]>(
+        "https://europe-central2-contentful-cv.cloudfunctions.net/fcvUpdates",
+        {
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+          },
+        }
+      );
+      this.cvUpdates = res.data;
+    },
+    goCv(id: string, type: "full" | "mini", lang: "fr" | "en") {
+      this.$router.push({
+        name: type !== "mini" ? "cv" : "mini-cv",
+        query: { lang, id },
+      });
+    },
+  },
+  mounted() {
+    auth.onAuthStateChanged(async (user) => {
+      const accessToken = await user?.getIdToken();
+      await this.getCvUpdates(accessToken!);
+    });
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.title {
+  margin-bottom: 15px;
+}
+
+.body {
+  display: flex;
+  width: 100%;
+  margin-bottom: 5px;
+
+  &__middle {
+    flex: 1;
+  }
+
+  &__right {
+    display: flex;
+    gap: 5px;
+  }
+
+  &__button {
+    background-color: #fe414d;
+    color: #ffffff;
+    height: 30px;
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: darken(#fe414d, 10);
+    }
+  }
+}
+</style>

src/main.ts

@@ -3,6 +3,10 @@ import { createI18n } from "vue-i18n";
 import App from "./App.vue";
 import router from "./router";
 import { messages } from "@/lang/messages";
+import relativeTime from "dayjs/plugin/relativeTime";
+import dayjs from "dayjs";
+
+dayjs.extend(relativeTime);
 
 const i18n = createI18n({
   locale: "en",

src/views/HomeView.vue

@@ -2,8 +2,10 @@
 import { defineComponent } from "vue";
 import { auth } from "@/firebase/init";
 import type { User } from "@firebase/auth";
+import CvUpdates from "@/components/CvUpdates.vue";
 
 export default defineComponent({
+  components: { CvUpdates },
   data() {
     return {
       email: "",
@@ -54,14 +56,16 @@ export default defineComponent({
           Consult 🇺🇸 mini CV
         </button>
       </div>
+      <CvUpdates />
     </div>
   </main>
 </template>
 
 <style scoped lang="scss">
 .auth {
-  width: 500px;
   margin: auto;
+  min-width: 500px;
+  max-width: 800px;
   text-align: center;
   padding: 50px;