[projects] Allow to search in projects

src/components/pages/OpenProductions.vue

@@ -25,6 +25,14 @@
       class="open-productions-box"
       v-if="!isOpenProductionsLoading && openProductions.length > 0"
     >
+      <div class="flexrow search-area" v-if="openProductions.length > 6">
+        <search-field
+          ref="search-field"
+          class="search-field"
+          @change="onSearchChange"
+        />
+      </div>
+
       <div
         :class="{
           'open-productions-list': true,
@@ -34,7 +42,7 @@
         <div
           class="open-production has-text-centered"
           :key="production.id"
-          v-for="production in openProductions"
+          v-for="production in filteredProductions"
         >
           <router-link :to="getPath(production)">
             <div
@@ -94,20 +102,26 @@
 <script>
 import { mapGetters, mapActions } from 'vuex'
 
-import colors from '@/lib/colors.js'
+import { buildNameIndex } from '@/lib/indexing'
+
+import colors from '@/lib/colors'
 import EditProductionModal from '@/components/modals/EditProductionModal'
+import SearchField from '@/components/widgets/SearchField'
 import Spinner from '@/components/widgets/Spinner'
 
 export default {
   name: 'open-productions',
 
   components: {
     EditProductionModal,
+    SearchField,
     Spinner
   },
 
   data() {
     return {
+      filteredProductions: [],
+      search: '',
       errors: {
         edit: false
       },
@@ -120,6 +134,12 @@ export default {
     }
   },
 
+  mounted() {
+    this.$refs['search-field'].focus()
+    this.filteredProductions = this.openProductions
+    this.productionIndex = buildNameIndex(this.openProductions)
+  },
+
   computed: {
     ...mapGetters([
       'isCurrentUserAdmin',
@@ -196,6 +216,15 @@ export default {
 
     hideNewModal() {
       this.modals.isNewDisplayed = false
+    },
+
+    onSearchChange(search) {
+      console.log(search)
+      if (search === '') {
+        this.filteredProductions = this.openProductions
+      } else {
+        this.filteredProductions = this.productionIndex[search]
+      }
     }
   },
 
@@ -385,6 +414,10 @@ a.secondary:hover {
   }
 }
 
+.search-area {
+  justify-content: center;
+}
+
 @media screen and (max-width: 768px) {
   .title {
     margin-top: 1em;