From 01ed4cef693c6c52a539bc774db730434776a7e9 Mon Sep 17 00:00:00 2001
From: Zhigang Wang <zhigangw@hotmail.com>
Date: Thu, 6 Jun 2024 15:00:03 -0700
Subject: [PATCH] add implementation of contact page

---
 frontend/src/pages/public/About.vue   |  2 +-
 frontend/src/pages/public/Blogs.vue   |  7 +++-
 frontend/src/pages/public/Career.vue  | 20 +++++++++---
 frontend/src/pages/public/Contact.vue | 46 +++++++++++++++++++++++++--
 frontend/src/utils/backend/content.js |  4 +++
 5 files changed, 70 insertions(+), 9 deletions(-)

diff --git a/frontend/src/pages/public/About.vue b/frontend/src/pages/public/About.vue
index 67d19da..6e1287a 100644
--- a/frontend/src/pages/public/About.vue
+++ b/frontend/src/pages/public/About.vue
@@ -52,7 +52,7 @@ export default {
   @extend .container;
   cursor: pointer;
 }
-.directory_cover_image{
+.directory_cover_image {
   height: 20vh;
 }
 </style>
diff --git a/frontend/src/pages/public/Blogs.vue b/frontend/src/pages/public/Blogs.vue
index 5a1fd5b..d226d4f 100644
--- a/frontend/src/pages/public/Blogs.vue
+++ b/frontend/src/pages/public/Blogs.vue
@@ -1,6 +1,11 @@
 <template>
   <div v-if="blogs" class="blogs_containter">
-    <div class="blog_containter" v-for="(blog, index) in blogs" :key="index" @click="view_blog(blog)">
+    <div
+      class="blog_containter"
+      v-for="(blog, index) in blogs"
+      :key="index"
+      @click="view_blog(blog)"
+    >
       <h2>{{ blog.blog_name }}</h2>
       <img class="blog_cover_image" :src="blog.cover_picture" />
       <p v-text="retrieve_summary(blog)"></p>
diff --git a/frontend/src/pages/public/Career.vue b/frontend/src/pages/public/Career.vue
index 58656dd..f99041d 100644
--- a/frontend/src/pages/public/Career.vue
+++ b/frontend/src/pages/public/Career.vue
@@ -1,8 +1,18 @@
 <template>
   <div class="directories_containter">
-    <div class="directory_container" v-for="(directory, index) in directories" :key="index" @click="view_link(directory)">
-      <p class="directory_title_txt" v-tooltip :title="directory.summary_text" delay='{"show":"500", "hide":"100"}'><u>{{
-        directory.title_text }}</u>
+    <div
+      class="directory_container"
+      v-for="(directory, index) in directories"
+      :key="index"
+      @click="view_link(directory)"
+    >
+      <p
+        class="directory_title_txt"
+        v-tooltip
+        :title="directory.summary_text"
+        delay='{"show":"500", "hide":"100"}'
+      >
+        <u>{{ directory.title_text }}</u>
       </p>
     </div>
   </div>
@@ -35,7 +45,6 @@ export default {
       directories: null
     }
   }
-
 }
 </script>
 <style scoped lang="scss">
@@ -48,5 +57,6 @@ export default {
   cursor: pointer;
 }
 
-.directory_title_txt {}
+.directory_title_txt {
+}
 </style>
diff --git a/frontend/src/pages/public/Contact.vue b/frontend/src/pages/public/Contact.vue
index 6fe8223..713e8b1 100644
--- a/frontend/src/pages/public/Contact.vue
+++ b/frontend/src/pages/public/Contact.vue
@@ -1,11 +1,53 @@
 <template>
-  <div class="">Contact</div>
+  <div class="directories_containter">
+    <div class="directory_container" v-for="(directory, index) in directories" :key="index">
+      <img class="directory_cover_image" :src="directory.cover_picture" />
+      <div v-html="directory.content_html"></div>
+    </div>
+  </div>
 </template>
 <script>
+import { ContentApi } from '../../utils/index'
 export default {
   name: 'Contact',
   components: {},
   computed: {},
-  methods: {}
+  mounted() {
+    this.retrieve_directories()
+  },
+  methods: {
+    retrieve_directories() {
+      ContentApi.retrieve_contact_directories()
+        .then((response) => {
+          this.directories = response.data
+        })
+        .catch((error) => {
+          this.mnx_backendErrorHandler(error)
+        })
+    }
+  },
+  data() {
+    return {
+      directories: null
+    }
+  }
 }
 </script>
+<style scoped lang="scss">
+.directories_containter {
+  @extend .container;
+}
+
+.directory_container {
+  @extend .container;
+  cursor: pointer;
+}
+
+.directory_cover_image {
+  height: 20vh;
+}
+
+.directory_content_html {
+  @extend .text-start;
+}
+</style>
diff --git a/frontend/src/utils/backend/content.js b/frontend/src/utils/backend/content.js
index 7cafecf..91fbd9c 100644
--- a/frontend/src/utils/backend/content.js
+++ b/frontend/src/utils/backend/content.js
@@ -23,5 +23,9 @@ class ContentApi {
     const request = backendAxios.post('/api/content/retrieve-career-directories', {}, {})
     return request
   }
+  static retrieve_contact_directories() {
+    const request = backendAxios.post('/api/content/retrieve-contact-directories', {}, {})
+    return request
+  }
 }
 export { ContentApi }