Vue-ify requests listing page

js/components/forms/requests_list.js

@@ -0,0 +1,50 @@
+import Modal from '../../mixins/modal'
+
+export default {
+    name: 'requests-list',
+
+    mixins: [Modal],
+
+    components: {
+      Modal,
+    },
+
+    props: {
+      initialData: {
+        type: Array,
+        default: [],
+      },
+      isExtended: {
+        type: Boolean,
+        default: false,
+      },
+    },
+
+    data: function () {
+      const requests = this.initialData
+      return {
+        requests,
+        searchValue: '',
+        statusValue: '',
+      }
+    },
+
+    mounted: function () {
+    },
+
+    computed: {
+      filteredRequests: function () {
+        return this.applySearch(this.searchValue)
+      }
+    },
+
+    methods: {
+      applySearch: function(query) {
+        return this.requests.filter(
+          (request) => query !== '' ?
+            request.name.toLowerCase().includes(query.toLowerCase()) :
+            true
+        )
+      }
+    },
+  }

js/index.js

@@ -22,6 +22,7 @@ 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'
+import RequestsList from './components/forms/requests_list'
 
 Vue.use(VTooltip)
 
@@ -46,6 +47,7 @@ const app = new Vue({
     LocalDatetime,
     EditEnvironmentRole,
     EditProjectRoles,
+    RequestsList,
   },
 
   mounted: function() {