Add profile search

.gitignore

@@ -7,11 +7,10 @@ scratch
 .favorites.json
 dist
 NOTES.md
-server/config/*
-server/!config/default.*
-server/.env
+
 server/sessions
 client/.quasar
 **/tmp/
 client/src/store/store-flag.d.ts
 .env
+**/prod.env

client/src/components/search/ProfileCard.vue

@@ -0,0 +1,35 @@
+<template>
+    <q-card class="col" square flat bordered>                                                                                                                                                                                                                                                  <q-card-section horizontal>
+            <q-card-section class="col-sm-1 col-xs-2">
+                <q-avatar v-if="profile.useGravatar">
+                    <img :src="profile.gravatar.large">
+                </q-avatar>
+                <q-avatar v-else>
+                    <img :src="profile.image.large">
+                </q-avatar>
+            </q-card-section>
+            <q-card-section class="col-sm-11 col-xs-10">
+                <div>{{ fullName }}</div>
+                <div class="q-mt-xs" style="color: gray">Institution placeholder</div>
+                <div class="q-mt-xs" v-if="profile.bio !== null">{{ profile.bio }}</div>
+            </q-card-section>
+        </q-card-section>
+    </q-card>
+</template>
+<script>
+import _ from 'lodash'
+
+export default {
+  name: 'ProfileCard',
+  props: [ 'search', 'profile' ],
+  computed: {
+    fullName: function () {
+      if (!this.profile.displayFullName.toLowerCase().includes(this.search.toLowerCase())) {
+        const fullName = `${this.profile.givenName} ${this.profile.familyName}${this.profile.additionalName ? `. ${this.profile.additionalName}.` : ''}`
+        return _.startCase(fullName)
+      }
+      return _.startCase(this.profile.displayFullName)
+    }
+  }
+}
+</script>

client/src/components/search/ProjectCard.vue

@@ -0,0 +1,33 @@
+<template>
+    <q-card square flat bordered>
+        <q-card-section>
+            <router-link class="text-primary" :to="'search/' + index" exact>
+                <div class="text-h6">Result {{index}}</div>
+            </router-link>
+        </q-card-section>
+
+        <q-card-section>
+            <q-expansion-item
+                label-lines="2"
+                label="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                exercitation ullamco laboris nisi ut aliquip"
+                caption="Admin, AdminSteiger, LisaTesla, Testarosa"
+                >
+                <q-card>
+                    <q-card-section>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                        Quidem, eius reprehenderit eos corrupti
+                    </q-card-section>
+                </q-card>
+            </q-expansion-item>
+        </q-card-section>
+    </q-card>
+</template>
+
+<script>
+export default {
+  name: 'ProjectCard',
+  props: [ 'project' ]
+}
+</script>

client/src/pages/pages/search.vue

@@ -58,43 +58,36 @@
         </q-card>
       </article>
       <article class="col-xs-12 col-sm-12 col-md-9">
-        <q-card square flat bordered class="q-mb-sm" v-for="n in 5" :key="n">
-          <q-card-section>
-            <router-link class="text-primary" :to="'search/' + n" exact>
-              <div class="text-h6">Result {{n}}</div>
-            </router-link>
-          </q-card-section>
-
-          <q-card-section>
-            <q-expansion-item
-              label-lines="2"
-              label="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-              exercitation ullamco laboris nisi ut aliquip"
-              caption="Admin, AdminSteiger, LisaTesla, Testarosa"
-            >
-              <q-card>
-                <q-card-section>
-                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-                  Quidem, eius reprehenderit eos corrupti
-                </q-card-section>
-              </q-card>
-            </q-expansion-item>
-          </q-card-section>
-        </q-card>
-        <q-pagination
-          class="justify-content-center"
-          v-model="currentPage"
-          :max="5"
-          :input="true"
-        >
-        </q-pagination>
+        <div v-if="loading" class="flex">
+          <q-inner-loading :showing="loading">
+            <q-spinner size="50px" color="primary" />
+          </q-inner-loading>
+        </div>
+        <div v-else >
+          <div class="q-mb-sm" v-for="(doc, index) in getData" :key="index">
+            <ProfileCard v-if="doc.index === 'databrary-users'" :search=search :profile=doc />
+            <ProjectCard v-else :project=doc />
+          </div>
+          <q-pagination
+            v-if="data.length > 0"
+            class="justify-content-center"
+            v-model="page"
+            :max="Math.ceil(data.length/cardPerPage)"
+            :input="true"
+          >
+          </q-pagination>
+        </div>
       </article>
     </section>
   </q-page>
 </template>
 
 <script>
+import ProjectCard from '../../components/search/ProjectCard'
+import ProfileCard from '../../components/search/ProfileCard'
+import _ from 'lodash'
+import axios from 'axios'
+
 export default {
   name: 'PageSearch',
   data () {
@@ -103,14 +96,24 @@ export default {
       startDate: null,
       endDate: null,
       tags: null,
-      currentPage: 1
+      data: [],
+      page: 1,
+      cardPerPage: 10,
+      loading: false
     }
   },
+  components: {
+    ProjectCard,
+    ProfileCard
+  },
   mounted () {
     this.search = this.$route.query.q
   },
   watch: {
-    search () {
+    async search () {
+      await this.esSearch()
+      // Note: No need to push the search as a query string
+      // It will call the backend (syncSession) after each event in search input
       this.$router.push({
         path: 'search',
         query: { ...this.$route.query, q: this.search }
@@ -136,12 +139,33 @@ export default {
     }
   },
   computed: {
-    // a computed getter
-    // queryString: function () {
-    //   return {
-    //     q: this.search,
-    //   }
-    // }
+    getData () {
+      return this.data.slice((this.page - 1) * this.cardPerPage, (this.page - 1) * this.cardPerPage + this.cardPerPage)
+    }
+  },
+  methods: {
+    async esSearch () {
+      try {
+        this.data = []
+        this.loading = true
+
+        if (_.isEmpty(this.search)) return
+
+        const { data } = await axios({ url: '/search', method: 'POST', data: { search: this.search } })
+
+        if (!_.isEmpty(data)) {
+          this.data = data
+        }
+      } catch (error) {
+        console.error(error)
+      } finally {
+        // this.loading = false
+        // TODO(Reda): Remove this timeout when
+        setTimeout(() => {
+          this.loading = false
+        }, 1000)
+      }
+    }
   }
 }
 </script>

client/src/store/app.js

@@ -37,26 +37,26 @@ const actions = {
     }
   },
   async syncSessionAsync ({ commit }) {
-    const response = await axios({ url: '/session', method: 'GET' })
-    if (_.get(response.data, 'dbId')) {
-      console.log(`Session response`, JSON.stringify(response.data))
+    const { data } = await axios({ url: '/session', method: 'GET' })
+    if (_.get(data, 'dbId')) {
+      console.log(`Session response`, JSON.stringify(data))
       commit('isLoggedIn', true)
-      commit('dbId', response.data.dbId)
-      commit('gravatarURL', response.data.gravatarURL)
-      commit('useGravatar', response.data.useGravatar === true)
-      commit('avatar', response.data.useGravatar === true
-        ? response.data.gravatarURL.large : response.data.avatarURL.large)
-      commit('thumbnail', response.data.useGravatar === true
-        ? response.data.gravatarURL.thumbnail : response.data.avatarURL.thumbnail)
-      commit('avatarURL', response.data.avatarURL)
+      commit('dbId', data.dbId)
+      commit('useGravatar', data.useGravatar === true)
+      commit('avatar', data.useGravatar === true
+        ? data.gravatarURL.large : data.avatarURL.large)
+      commit('thumbnail', data.useGravatar === true
+        ? data.gravatarURL.thumbnail : data.avatarURL.thumbnail)
+      commit('avatarURL', data.avatarURL)
+      commit('gravatarURL', data.gravatarURL)
     } else {
       commit('isLoggedIn', false)
       commit('dbId', null)
       commit('useGravatar', false)
       commit('avatar', null)
       commit('thumbnail', null)
-      commit('gravatarURL', null)
       commit('avatarURL', null)
+      commit('gravatarURL', null)
     }
   }
 }

docker-compose.yml

@@ -25,7 +25,7 @@ services:
       HASURA_GRAPHQL_ENABLE_CONSOLE: ${HASURA_ENABLE_CONSOLE}
       HASURA_GRAPHQL_ENABLED_LOG_TYPES: startup, http-log, webhook-log, websocket-log, query-log
       HASURA_GRAPHQL_AUTH_HOOK: http://${DOCKER_HOST_IP}:8000/${HASURA_WEBHOOK}
-      UPDATE_USER_WEBHOOK: http://${DOCKER_HOST_IP}:8000/${USER_WEBHOOK}
+      ELASTICSEARCH_WEBHOOK: http://${DOCKER_HOST_IP}:8000/${ELASTICSEARCH_WEBHOOK}
 
   minio:
     image: minio/minio:latest
@@ -71,17 +71,28 @@ services:
       - ./server/sessions:/sessions
     restart: always
 
-  # dejavu:
-  #   image: appbaseio/dejavu
-  #   restart: unless-stopped
-  #   networks:
-  #     - search
-  #   ports:
-  #     - 1358:1358
-  #   depends_on:
-  #     - search
+  elasticsearch:
+    image: docker.elastic.co/elasticsearch/elasticsearch:7.6.2
+    environment:
+      - node.name=elasticsearch
+      - discovery.type=single-node
+      - bootstrap.memory_lock=true
+      - "ES_JAVA_OPTS=-Xms512m -Xmx512m"
+    volumes:
+      - es:/usr/share/elasticsearch/data
+    ports:
+      - "9200:9200"
+
+  kibana:
+    image: docker.elastic.co/kibana/kibana:7.6.2
+    ports:
+      - 5601:5601
+    environment:
+      ELASTICSEARCH_URL: http://elasticsearch:9200
+      ELASTICSEARCH_HOSTS: http://elasticsearch:9200
 
 volumes:
   minio_events:
   postgres_data:
-  file_data:
+  file_data:
+  es:

gql/getUserByAuthId.gql

@@ -12,5 +12,6 @@
       displayFullName
       useGravatar
       image
+      gravatar
     }
   }

gql/getUserByEmail.gql

@@ -10,5 +10,8 @@
       authServerId
       emailPrimary
       displayFullName
+      useGravatar
+      image
+      gravatar
     }
   }

gql/registerUser.gql

@@ -5,7 +5,8 @@ mutation registerUser($authServerId: String!,
                         $middleName: String,
                         $displayFullName: String,
                         $emails: jsonb,
-                        $urls: jsonb) {
+                        $urls: jsonb,
+                        $gravatar: jsonb) {
     insert_users(objects: {
       authServerId: $authServerId,
       emailPrimary: $emailPrimary,
@@ -14,7 +15,8 @@ mutation registerUser($authServerId: String!,
       additionalName: $middleName,
       displayFullName: $displayFullName,
       emails: $emails,
-      urls: $urls
+      urls: $urls,
+      gravatar: $gravatar
     }) {
       returning {
         id
@@ -23,6 +25,7 @@ mutation registerUser($authServerId: String!,
         displayFullName
         useGravatar
         image
+        gravatar
       }
     }
   }

hasura/migrations/1587408499195_create_trigger_update_user/up.yaml

@@ -25,5 +25,5 @@
       - datetimeRegistered
       - authServerId
       - id
-    webhook: UPDATE_USER_WEBHOOK
+    webhook: ELASTICSEARCH_WEBHOOK
   type: create_event_trigger

hasura/migrations/1587417840890_modify_tr_update_user_ops/down.yaml

@@ -26,5 +26,5 @@
       - datetimeRegistered
       - authServerId
       - id
-    webhook: UPDATE_USER_WEBHOOK
+    webhook: ELASTICSEARCH_WEBHOOK
   type: create_event_trigger

hasura/migrations/1587417840890_modify_tr_update_user_ops/up.yaml

@@ -26,5 +26,5 @@
       - givenName
       - orcid
       - datetimeRegistered
-    webhook: UPDATE_USER_WEBHOOK
+    webhook: ELASTICSEARCH_WEBHOOK
   type: create_event_trigger

hasura/migrations/1587655322265_modify_tr_update_user_webhook/down.yaml

@@ -26,5 +26,5 @@
       - givenName
       - orcid
       - datetimeRegistered
-    webhook: UPDATE_USER_WEBHOOK
+    webhook: ELASTICSEARCH_WEBHOOK
   type: create_event_trigger

hasura/migrations/1587655322265_modify_tr_update_user_webhook/up.yaml

@@ -26,5 +26,5 @@
       - givenName
       - orcid
       - datetimeRegistered
-    webhook_from_env: UPDATE_USER_WEBHOOK
+    webhook_from_env: ELASTICSEARCH_WEBHOOK
   type: create_event_trigger

hasura/migrations/1588700199185_alter_table_public_users_add_column_gravatar/down.yaml

@@ -0,0 +1,5 @@
+- args:
+    cascade: false
+    read_only: false
+    sql: ALTER TABLE "public"."users" DROP COLUMN "gravatar";
+  type: run_sql