feat(search-bar): project title search

components/ui/search-bar/search-bar.sass

@@ -0,0 +1,8 @@
+input
+  @apply shadow bg-ps-secondary rounded-lg text-ps-white
+  @apply w-full h-10 px-4
+  @apply bg-no-repeat bg-right
+
+  background-image: url('../../../static/search.svg')
+  background-position: 97% center
+  border-radius: 50px

components/ui/search-bar/search-bar.vue

@@ -0,0 +1,22 @@
+<template lang="pug">
+input(type='text', @input='onChange($event.target.value)', placeholder='Zační psát...')
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'nuxt-composition-api';
+
+export default defineComponent({
+  setup(_, { emit }) {
+    const onChange = (value: string) => {
+      // Emit keywords
+      emit('input', value);
+    };
+
+    return {
+      onChange,
+    };
+  },
+});
+</script>
+
+<style lang="sass" src="./search-bar.sass" scoped />

package.json

@@ -24,6 +24,7 @@
     "nuxt-composition-api": "0.11.0",
     "pinia": "0.0.7",
     "short-uuid": "^4.1.0",
+    "ts-debounce": "^2.1.0",
     "vue-clickaway": "2.2.2",
     "vue-material-design-icons": "4.11.0"
   },

pages/admin.vue

@@ -89,11 +89,30 @@
             ps-text-field.mt-8(v-model='password', type='text', label='Heslo', name='password')
             ps-btn.mt-8.self-end(@click='createTeacher', :disabled='teacherBtn', :loading='teacherBtn') vytvořit účet
     ps-tab(:active='selectedTab == "vyhledávání"')
+      ps-search-bar(v-model='query')
+      ps-admin-project.mt-2(
+        v-for='project in searchedProjects',
+        :key='project.projectId',
+        :projectId='project.projectId',
+        :currentYear='project.currentYear',
+        :opponentId='project.opponentId',
+        :publicProject='project.publicProject',
+        :reviews='project.reviews',
+        :studentId='project.studentId',
+        :submittedDate='project.submittedDate',
+        :teacherId='project.teacherId',
+        :title='project.title',
+        :displayName='project.displayName',
+        :profilePicture='project.profilePicture',
+        :teachers='teachers'
+      )
   ps-snackbar(v-model='displaySnack', :delay='5000') {{ message }}
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted } from 'nuxt-composition-api';
+import { defineComponent, ref, onMounted, watch } from 'nuxt-composition-api';
+
+import { debounce } from 'ts-debounce';
 
 import axios from 'axios';
 
@@ -553,6 +572,37 @@ export default defineComponent({
       );
     };
 
+    // Title based search
+
+    const query = ref('');
+    const searchedProjects = ref([] as Array<Project>);
+
+    const getDocuments = async () => {
+      try {
+        const projectDocs = (
+          await firebase
+            .firestore()
+            .collection('projects')
+            .where('titleLower', '>=', query.value.toLowerCase())
+            .where('titleLower', '<=', query.value.toLowerCase() + '\uF8FF')
+            .get()
+        ).docs;
+
+        const usersDocs = await getUserDocs(projectDocs);
+
+        searchedProjects.value = formatProjectArray(projectDocs, usersDocs);
+      } catch (_) {}
+    };
+    const fetch = debounce(getDocuments, 1000);
+
+    watch(query, (query) => {
+      if (query === '') {
+        searchedProjects.value = [];
+        fetch.cancel();
+        return;
+      }
+      fetch();
+    });
     return {
       message,
       displaySnack,
@@ -577,6 +627,8 @@ export default defineComponent({
       deadlineModal,
       updateDeadline,
       updatingDeadline,
+      query,
+      searchedProjects,
     };
   },
 });

pages/index.vue

@@ -6,6 +6,7 @@
       ps-select.flex-grow.md-mr-6(v-model='currentYear', placeholder='Rok maturity', :options='graduationYears')
       ps-btn.mt-4.float-right(:disabled='btnLoading', :loading='btnLoading', @click='sumbitSchoolYear') 
         span.px-10 uložit
+  ps-search-bar(v-model='kekw')
 </template>
 
 <script lang="ts">
@@ -72,6 +73,10 @@ export default defineComponent({
       btnLoading.value = false;
     };
 
+    const kekw = ref('');
+
+    watchEffect(() => console.log(kekw.value));
+
     return {
       yearModalDisplay: yearModalDisplay.value,
       currentYear,
@@ -80,6 +85,7 @@ export default defineComponent({
       sumbitSchoolYear,
       btnLoading,
       closeModal,
+      kekw,
     };
   },
 });

server/api/project/update.ts

@@ -48,6 +48,7 @@ export default async (req: Request, res: Response) => {
         public: updatedProject.public,
         teacherId: updatedProject.teacherId,
         title: updatedProject.title,
+        titleLower: updatedProject.title.toLowerCase(),
       };
 
       if (sfDoc.data()?.teacherId !== updatedProject.teacherId) {

server/api/proposal/accept.ts

@@ -19,8 +19,8 @@ export default async (req: Request, res: Response) => {
     return res.status(401).send('Unauthorized');
   }
 
-  await admin.firestore().runTransaction(async (transaction) => {
-    try {
+  try {
+    await admin.firestore().runTransaction(async (transaction) => {
       const sfDoc = await transaction.get(proposalRef);
 
       const schoolYear = (await transaction.get(admin.firestore().collection('system').doc('schoolYear'))).data();
@@ -31,6 +31,7 @@ export default async (req: Request, res: Response) => {
 
       transaction.set(projectRef, {
         title: sfDoc.data()?.title,
+        titleLower: sfDoc.data()?.title.toLowerCase(),
         description: '',
         studentId: sfDoc.data()?.studentId,
         teacherId: sfDoc.data()?.teacherId,
@@ -43,10 +44,10 @@ export default async (req: Request, res: Response) => {
       transaction.delete(proposalRef);
 
       return transaction;
-    } catch (e) {
-      return res.status(500).send(e);
-    }
-  });
+    });
+  } catch (e) {
+    return res.status(500).send(e);
+  }
 
   return res.status(200).send('Proposal accepted');
 };

yarn.lock

@@ -13404,6 +13404,11 @@ tryer@^1.0.1:
   resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
   integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
 
+ts-debounce@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/ts-debounce/-/ts-debounce-2.1.0.tgz#9a164c794692217d371449fc6572524751d70f19"
+  integrity sha512-jlrN8iK/Iif5pQd+pIsH8uEexj3vvUT+BwqNrJt5xgZB+ucwVfQVAUMC8Dnx0vlk7AktHxoD9ZDYYVYUtxd5wA==
+
 ts-loader@^8.0.3:
   version "8.0.4"
   resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-8.0.4.tgz#02b9c91fbcfdb3114d8b1e98a3829265270eee7a"