Basic Vue function for search

atst/routes/workspaces.py

@@ -1,4 +1,4 @@
-import re
+import re, json
 from datetime import date, timedelta
 
 from flask import (
@@ -102,9 +102,16 @@ def workspace_members(workspace_id):
     new_member = next(
         filter(lambda m: m.user_name == new_member_name, workspace.members), None
     )
+    members_list = [
+        {"name": k.user_name, "role": k.role, "num_env": k.num_environment_roles}
+        for k in workspace.members
+    ]
 
     return render_template(
-        "workspaces/members/index.html", workspace=workspace, new_member=new_member
+        "workspaces/members/index.html",
+        workspace=workspace,
+        members=members_list,
+        new_member=new_member,
     )
 
 

js/components/forms/members_list.js

@@ -0,0 +1,29 @@
+
+export default {
+  name: 'members-list',
+
+  template: '#search-template',
+
+  props: {
+    members: Array,
+  },
+
+  data: function () {
+    return {
+      searchValue: '',
+      searchedList: [],
+    }
+  },
+
+  mounted: function () {
+    // console.log(this.members)
+  },
+
+  methods: {
+    search: function () {
+      console.log(this.members)
+      this.searchedList = this.members.filter(member => member.name.includes(this.searchValue))
+      console.log(this.searchedList)
+    },
+  },
+}

js/index.js

@@ -20,6 +20,7 @@ import selector from './components/selector'
 import BudgetChart from './components/charts/budget_chart'
 import SpendTable from './components/tables/spend_table'
 import CcpoApproval from './components/forms/ccpo_approval'
+import MembersList from './components/forms/members_list'
 import LocalDatetime from './components/local_datetime'
 
 Vue.use(VTooltip)
@@ -41,6 +42,7 @@ const app = new Vue({
     BudgetChart,
     SpendTable,
     CcpoApproval,
+    MembersList,
     LocalDatetime,
     EditEnvironmentRole,
     EditProjectRoles,

templates/workspaces/members/index.html

@@ -45,11 +45,16 @@
   ) }}
 {% endif %}
 
+
+
+
+<members-list id="search-template" v-bind:members='{{ members | tojson}}'>
+  <div>
   <form class='search-bar'>
     <div class='usa-input search-input'>
       <label for='members-search'>Search members by name</label>
-      <input type='search' id='members-search' name='members-search' placeholder="Search by name"/>
-      <button type="submit">
+      <input v-model='searchValue' type='search' id='members-search' name='members-search' placeholder="Search by name"/>
+      <button type="button" @click='search'>
         <span class="hide">Search</span>
       </button>
     </div>
@@ -103,6 +108,8 @@
       </tbody>
     </table>
   </div>
+</div>
+</members-list>
 
 {% endif %}