Break out services by component.

app/assets/javascripts/merge_request_widget/approvals/approvals_bundle.js.es6

+//= require_directory ./stores
+//= require_directory ./services
 //= require_directory ./components

app/assets/javascripts/merge_request_widget/approvals/components/approvals_body.js.es6

 (() => {
+  // can the user edit this MR
+  // has this user approved this MR
+  // What is the info about users who can approve this MR but have not yet?
+  // How many approvals are needed?
+  // How many approvals are had?
   gl.MergeRequestWidget.approvalsBody = {
     props: ['approverNames', 'approvalsLeft', 'canApprove'],
     computed: {
@@ -15,11 +20,14 @@
     }, 
     methods: {
       approveMergeRequest() {
-        this.$emit('user-gives-approval');
+        approvalsService.approveMergeRequest();
       },
     },
+    beforeCreate() {
+      approvalsService.fetchApprovals();
+    },
     template: `
-      <div> Hello approval body 
+      <div>
         <h4> Requires {{ approvalsRequiredStringified }} (from {{ approverNamesStringified }})</h4>
         <div class="append-bottom-10">
           <button v-if='canApprove' @click='approveMergeRequest' class="btn btn-primary approve-btn">Approve Merge Request</button>

app/assets/javascripts/merge_request_widget/approvals/components/approvals_footer.js.es6

-(() => {
-
-  const PendingApprover = {
-    data() {
-      return {
-        dottedCircleUrl: '/assets/no_avatar.png'
-      };
-    },
-    template: `
-      <span>
-        <img width="24" alt="Required Approver" :src="dottedCircleUrl" class="avatar avatar-inline s24">
-      </span>
-    `
-  };
+//= require vue_common_component/link_to_member_avatar
 
+(() => {
+  // does the user have permission to edit this thing
+  // has the user already approved this or not
+  // what are the users who have approved this already, with all their info
   gl.MergeRequestWidget.approvalsFooter = {
-    props: ['approverNames', 'canApprove', 'approvedByUsers'],
+    props: ['canUpdateMergeRequest', 'hasApprovedMergeRequest', 'approvedByUsers'],
     methods: {
       removeApproval() {
-        this.$emit('remove-approval');
+        approvalsService.unapproveMergeRequest();
       }
     },
-    components: {
-      'pending-approver': PendingApprover,
-    },
-    methods: {
-
+    beforeCreate() {
+      approvalsService.fetchApprovals();
     },
     template: `
-      <div>
-        Hello Approvals Footer
       <div>
         <div v-for='approver in approvedByUsers'>
           <link-to-member-avatar 
@@ -37,14 +23,12 @@
             :username='approver.username'>
           </link-to-member-avatar>
         </div>
-          <span v-if='canApprove'>
+        <span>
           <i class='fa fa-close'></i>
           <button @click='removeApproval'>Remove your approval</button>
           {{ approvedByUsers[0].name }}
         </span>
       </div>
-      </div>
     `
   };
-
 })();

app/assets/javascripts/merge_request_widget/approvals/services/approvals_service.js.es6

+//= require ../stores/approvals_store
+
+(() => {
+  class ApprovalsService {
+    constructor() {
+      this.isFetching = false;
+      this.hasBeenFetched = true;
+    }
+    fetchApprovals() {
+      return makeRequest().then((data) => {
+        this.isFetching = false;
+        this.hasBeenFetched = true;
+        return data;
+      });
+    }
+    approveMergeRequest(payload) {
+      return payload;
+    }
+    unapproveMergeRequest(payload) {
+      return payload;
+    }
+  }
+  gl.mergeRequestWidget.ApprovalsService = ApprovalsService;
+})();
\ No newline at end of file

app/assets/javascripts/merge_request_widget/approvals/stores/approvals_store.js.es6

+(()=>{
+  
+})()
\ No newline at end of file

app/assets/javascripts/merge_request_widget/services/widget_service.js.es6

+
+(() => {
+  
+})();
\ No newline at end of file

app/assets/javascripts/merge_request_widget/stores/widget_store.js.es6

@@ -3,32 +3,28 @@
     constructor(el) {
       this.dataset = el.dataset;
       this.data = {};
-      
       // TODO: Break each into their own store
       this.initResource();
       this.initPermissions();
       this.initApprovals();
     }
-    
     initResource() {
       Object.assign(this.data, {
         resource: {
-          canEdit: this.dataset.endpoint
+          endpoint: this.dataset.endpoint
         }
       });
     }
-
     initPermissions() {
       Object.assign(this.data, {
         permissions: {
-          canEdit: Boolean(this.dataset.canEdit)
+          canApprove: Boolean(this.dataset.canApprove)
         }
       });
     }
-
     initApprovals() {
       const dataset = this.dataset;
-      Object.assign( this.data, { 
+      Object.assign(this.data, {
         approvals: {
           approvedByUsers: JSON.parse(dataset.approvedByUsers),
           approverNames: JSON.parse(dataset.approverNames),
@@ -40,4 +36,3 @@
   }
   gl.MergeRequestWidgetStore = MergeRequestWidgetStore;
 })()
\ No newline at end of file
-

app/assets/javascripts/merge_request_widget/widget_bundle.js.es6

 //= require ./stores/widget_store
+//= require ./services/widget_service
 //= require ./approvals/approvals_bundle
-
+/**
+ * 
+ * 'data-approved-by-users' => @merge_request.approved_by_users.to_json, 'data-approver-names' => @merge_request.approvers.to_json,'data-approvals-left' => @merge_request.approvals_left, 'data-more-approvals' => (@merge_request.approvals_left - @merge_request.approvers_left.count), 'data-can-approve' => @merge_request.user_is_approver(current_user), 'data-endpoint'=> '/myendpoint/tho' }
+ * 
+ */
 $(() => {
-  const el = document.getElementById('merge-request-widget-app');
-  const Store = new gl.MergeRequestWidgetStore(el);
+  // Move initialization to somewhere else -- all can be conducted before DOM ready
+  new gl.MergeRequestWidgetStore();
+  new gl.MergeRequestWidgetService();
+  
   const app = gl.MergeRequestWidget;
   
   new Vue({
-    el,
+    el: '#merge-request-widget-app',
     data: Store.data,
     components: {
-      'approvals-body' : app.approvalsBody,
-      'approvals-footer' : app.approvalsFooter
-    },
-    methods: {
-      unapproveMergeRequest() {
-        console.log("Parent instance Unapprove MR");
-      },
-      approveMergeRequest() {
-        console.log("Parent instance Approve MR");
+      'approvals-body': app.approvalsBody,
+      'approvals-footer': app.approvalsFooter
     }
-    },
   });
 });
+/**
+ * 
+ *  gl.MergeRequestWidgetApp
+ *    Store
+ *    ApiService
+ *    
+ * 
+ *  TODO: Add documentation for registering new widget components 
+ * 
+ */
+// Need list of approved by, list of those who can approve, and the number required
\ No newline at end of file

app/assets/javascripts/vue_common_component/link_to_member_avatar.js.es6

-
 /* Analogue of link_to_member_avatar in app/helpers/projects_helper.rb 
   TODO: Support gravatar link generation, adding name text, username text
   TODO: 1:1 configuration compared to link_to_member_avatar
   TODO: Backport to CE
 */
-
-Vue.component('link-to-member-avatar', {
+(() => {
+  Vue.component('link-to-member-avatar', {
     props: {
       avatarUrl: {
         type: String,
@@ -53,4 +52,5 @@ Vue.component('link-to-member-avatar', {
       <img :class='avatarClass' :src='preppedAvatarUrl' :width='size' :height='size' :alt='displayName'/>
     </a>
   `
-});
+  });
+})();
\ No newline at end of file

app/models/concerns/approvable.rb

@@ -114,6 +114,11 @@ module Approvable
       approvers.any? || approver_groups.any?
     end
     
+    def user_is_approver(user)
+      return false unless approvers.any?
+      approvers.include?(user)
+    end
+    
     def can_approve?(user)
       return false unless user
       return true if approvers_left.include?(user)

app/views/projects/merge_requests/widget/_open.html.haml

-#merge-request-widget-app.mr-state-widget{ 'data-approved-by-users' => @merge_request.approved_by_users.to_json, 'data-approver-names' => @merge_request.approvers_left.map(&:name),'data-approvals-left' => @merge_request.approvals_left,
-    'data-more-approvals' => (@merge_request.approvals_left - @merge_request.approvers_left.count),'data-can-edit' => @merge_request.can_approve?(current_user), 'data-endpoint'=> '/myendpoint/tho' }
+#merge-request-widget-app.mr-state-widget
   = render 'projects/merge_requests/widget/heading'
   .mr-widget-body
     -# After conflicts are resolved, the user is redirected back to the MR page.
@@ -25,7 +24,8 @@
     - elsif @merge_request.work_in_progress?
       = render 'projects/merge_requests/widget/open/wip'
     - elsif @merge_request.requires_approve? && !@merge_request.approved?
-      %approvals-body{ '@give-approval' => 'approveMergeRequest', ':approver-names' => 'approvals.approverNames', ':approvals-left' => 'approvals.approvalsLeft', ':more-approvals' => 'approvals.moreApprovals', ':can-approve' => 'permissions.canEdit' }
+      %approvals-body{ '@give-approval' => 'approveMergeRequest', '@fetch-approvals' => 'fetchApprovals', :approver-names' => 'approvals.approverNames', ':approvals-left' => 'approvals.approvalsLeft', ':more-approvals' => 'approvals.moreApprovals', ':can-approve' => 'permissions.canApprove', ':needs-approval' => (@merge_request.requires_approve? && !@merge_request.approved?) }
+        = icon('spinner spin', class: 'loading-icon')
     - elsif @merge_request.merge_when_build_succeeds?
       = render 'projects/merge_requests/widget/open/merge_when_build_succeeds'
     - elsif !@merge_request.can_be_merged_by?(current_user)
@@ -50,5 +50,6 @@
 
   - if @merge_request.approvals.any?
     .mr-widget-footer.approved-by-users
-      %approvals-footer{ '@remove-approval' => 'unapproveMergeRequest', ':approved-by-users' => 'approvals.approvedByUsers', ':approver-names' => 'approvals.approverNames', ':approvals-left' => 'approvals.approvalsLeft', ':more-approvals' => 'approvals.moreApprovals', ':can-approve' => 'permissions.canEdit' }
+      %approvals-footer{ '@remove-approval' => 'unapproveMergeRequest', '@fetch-approvals' => 'fetchApprovals', ':approved-by-users' => 'approvals.approvedByUsers', ':approver-names' => 'approvals.approverNames', ':approvals-left' => 'approvals.approvalsLeft', ':more-approvals' => 'approvals.moreApprovals', ':can-approve' => 'permissions.canApprove', 'has-approvals' => @merge_request.approvals.any? }
+        = icon('spinner spin', class: 'loading-icon'')