create urgent list page

resources/assets/vue/components/bookings/sections/UrgentListSectionComponent.vue

@@ -1,7 +1,8 @@
 <template>
     <div class="table-responsive">
-        <list-component class="hide" ref="paymentProofList" section="paymentProofSection" :endpoint="route('api.transaction.list')" :options="{status: 2, type: 3, per_page: 10000}"></list-component>
-        <table class="table table-hover" v-show="!$store.getters.getListData(section).length && !$store.getters.isLoading(section)">
+
+        </list-component>
+        <table class="table table-hover">
             <thead>
             <tr>
                 <th style="width:20%">Date</th>
@@ -11,8 +12,26 @@
             </tr>
             </thead>
             <tbody>
-            <urgent-transaction-component v-for="item in $store.getters.getListData('paymentProofSection')" v-bind:key="item.id" :data="item" :data="data"></urgent-transaction-component>
+            <urgent-transaction-component v-for="item in list" v-bind:key="item.id" :data="item" :data="data"></urgent-transaction-component>
             </tbody>
         </table>
     </div>
-</template>
+</template>
+<script>
+    export default {
+        data(){
+            return {
+                list: []
+            }
+        },
+        created(){
+            this.setDecoratorDefault();
+            this.submit(route('api.transaction.list') + '?filters=' + JSON.stringify({status: 2, type: 3}), 'get', 'urgentListSection', false, false)
+        },
+        methods: {
+            successHandler(response){
+                this.list = response.payload.data;
+            }
+        }
+    }
+</script>