webapp: filtering projects, WIP modals

webapp/src/App.vue

@@ -13,25 +13,41 @@
           :category_filter="category_filter"
           ></ocrd-processor-list>
       </b-tab>
-      <b-tab title="Projects">
+      <b-tab active title="Projects">
         <ocrd-project-list
           :repos="repos"
           ></ocrd-project-list>
       </b-tab>
     </b-tabs>
+    <!-- <b-modal id="processor-modal">
+    </b-modal> -->
+    <b-modal id="project-modal">
+      <ocrd-project-list-item
+        :repo="repos[modalProjectIndex]"
+        >
+      </ocrd-project-list-item>
+    </b-modal>
   </b-container>
 </template>
 
 <script>
 import OcrdProcessorList from './OcrdProcessorList.vue'
 import OcrdProjectList from './OcrdProjectList.vue'
+import OcrdProcessorListItem from './OcrdProcessorListItem.vue'
+import OcrdProjectListItem from './OcrdProjectListItem.vue'
 export default {
   components: {
     OcrdProcessorList,
-    OcrdProjectList
+    OcrdProjectList,
+    OcrdProcessorListItem,
+    OcrdProjectListItem
   },
   data() {
     return {
+      modalProjectIndex: 0,
+      modalProcessorIndex: 0,
+      modalProjectVisible: false,
+      modalProcessorVisible: false,
       repos_raw: [],
       category_filter: [],
       step_filter: [],
@@ -55,8 +71,10 @@ export default {
     },
     all_processors() {
       return this.repos_raw.reduce((all, repo) => {
+        tool_idx = 0
         if (repo.ocrd_tool)
           all.push(...Object.values(repo.ocrd_tool.tools).map(tool => {
+            tool.idx = tool_idx++
             tool.part_of = repo.org_plus_name
             return tool
           }))
@@ -83,6 +101,7 @@ export default {
   methods: {
     fetchRepoData() {
       fetch('repos.json').then(resp => resp.json()).then(repos => {
+          repos.map((repo, idx) => repo.idx = idx)
           this.repos_raw.splice(0, this.repos_raw.length)
           this.repos_raw.push(...repos)
         }

webapp/src/OcrdProjectList.vue

 <template>
   <div>
+    <b-row>
+      <b-button v-b-toggle.project-controls class="m-1">Toggle Controls</b-button>
+      <b-collapse id="project-controls">
+        <b-container>
+          <b-row>
+            Filter by name: <input type="text" v-model="name_filter"/> (Showing {{ filtered_repos.length }} of {{ repos.length}} repos)
+          </b-row>
+          <b-row>
+            Tabs: <b-button @click="tabIndex -= 1">&lt;</b-button> <b-button @click="tabIndex += 1">&gt;</b-button>
+          </b-row>
+        </b-container>
+      </b-collapse>
+    </b-row>
     <b-row>
       <ocrd-project-list-item
-        v-for="repo in repos"
+        v-for="repo, idx in filtered_repos"
         :key="repo.org_plus_name"
         :repo="repo"
+        :tabIndex="tabIndex"
       >
       </ocrd-project-list-item>
     </b-row>
@@ -15,11 +29,27 @@
 <script>
 import OcrdProjectListItem from './OcrdProjectListItem.vue'
 export default {
+  data() {
+    return {
+      name_filter: '',
+      tabIndex: 0,
+    }
+  },
+  computed: {
+    filtered_repos() {
+      return this.repos.filter(repo => repo.name.toLowerCase().includes(this.name_filter.toLowerCase()))
+    }
+  },
   components: {
     OcrdProjectListItem
   },
   props: {
     repos: {required: true}
+  },
+  methods: {
+    switchTab(delta) {
+      this.tabIndex += delta
+    }
   }
 }
 </script>

webapp/src/OcrdProjectListItem.vue

@@ -4,7 +4,7 @@
     tag="article"
     class="mb-5 ocrd-project-list-item"
     >
-    <b-tabs>
+    <b-tabs v-model="tabIndex">
       <b-tab title="README">
         <div v-html="compiledReadme"></div>
       </b-tab>
@@ -50,8 +50,14 @@ export default {
   components: {
     VueCodeHighlight
   },
+  //  data() {
+  //    return {
+  //      tabIndex: 0
+  //    }
+  //  },
   props: {
     repo: {required: true},
+    tabIndex: {default: 0},
   },
   computed: {
     cleanId() {

webapp/src/main.js

@@ -17,7 +17,7 @@ import 'vue-code-highlight/themes/prism-coy.css'
 // import 'vue-code-highlight/themes/prism-twilight.css'
 // import 'vue-code-highlight/themes/window.css'
 
-new Vue({
+window.kwalitee_app = new Vue({
   el: '#ocrd-kwalitee',
   render: h => h(App)
 })