Add modal to project page itself

code-corps · Mar 21, 2017 · 9a0fd00 · 9a0fd00
1 parent ba6e94b
commit 9a0fd00
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 8 deletions.
diff --git a/app/components/project-details.js b/app/components/project-details.js
@@ -3,7 +3,7 @@ import Ember from 'ember';
 const {
   Component,
   computed,
-  computed: { alias },
+  computed: { alias, mapBy },
   get,
   getProperties,
   inject: { service }
@@ -64,6 +64,8 @@ export default Component.extend({
     });
   }),
 
+  projectSkills: mapBy('project.projectSkills', 'skill'),
+
   actions: {
     // TODO: This should go outside the component, but with the way the
     // project, project.index, project.settings and project.tasks templates are

diff --git a/app/controllers/project/index.js b/app/controllers/project/index.js
@@ -9,6 +9,7 @@ const {
 
 export default Controller.extend({
   currentUser: service(),
+  flashMessages: service(),
   store: service(),
 
   projectUsers: mapBy('project.projectUsers', 'user'),
@@ -17,10 +18,26 @@ export default Controller.extend({
   user: alias('currentUser.user'),
 
   actions: {
+    joinProject(project) {
+      let user = get(this, 'currentUser.user');
+      let store = get(this, 'store');
+
+      return store.createRecord('project-user', { project, user, role: 'pending' })
+                  .save()
+                  .then(() => {
+                    this._flashSuccess('Your request has been sent.');
+                  });
+    },
+
     saveSubscription(amount) {
       let project = get(this, 'project');
       let queryParams = { amount };
       this.transitionToRoute('project.donate', project, { queryParams });
     }
+  },
+
+  _flashSuccess(message) {
+    let options = { fixed: true, sticky: false, timeout: 5000 };
+    get(this, 'flashMessages').clearMessages().success(message, options);
   }
 });
diff --git a/app/styles/components/project-details.scss b/app/styles/components/project-details.scss
@@ -32,7 +32,7 @@
       vertical-align: middle;
     }
 
-    span {
+    > span {
       color: $blue;
     }
   }

diff --git a/app/templates/components/project-details.hbs b/app/templates/components/project-details.hbs
@@ -19,12 +19,17 @@
     <a class="button default small external-link" href="{{project.website}}">Join project<span></span></a>
   {{else}}
     {{#if session.isAuthenticated}}
+      {{#if currentProjectMembership.isLoaded}}
+        {{#if (eq currentProjectMembership.role 'pending')}}
+          <button class="clear small" disabled>Request sent</button>
+        {{else}}
+          <button class="clear small" disabled>Member</button>
+        {{/if}}
+      {{/if}}
+
       {{#unless currentProjectMembership}}
-        <button class="default small" {{action "joinProject" project}}>Join project</button>
+        {{project-join-modal onJoin=onJoin project=project skills=projectSkills}}
       {{/unless}}
-      {{#if (eq currentProjectMembership.role 'pending')}}
-        <button class="clear small" disabled>Request sent</button>
-      {{/if}}
     {{else}}
       {{link-to "Join project" "signup" class="button default small"}}
     {{/if}}

diff --git a/app/templates/components/project-join-modal.hbs b/app/templates/components/project-join-modal.hbs
@@ -22,7 +22,7 @@
       {{related-skills isClickable=true skills=skills}}
     </div>
     <div class="project-join-modal__button">
-      <button class="button default" {{action (action onJoin project)}}>Send Request</button>
+      <button class="button default" {{action (action onJoin project)}}>Request to Join</button>
     </div>
   {{/modal-dialog}}
 {{/if}}
diff --git a/app/templates/project/index.hbs b/app/templates/project/index.hbs
@@ -1,7 +1,7 @@
 {{title project.title " by " project.organization.name}}
 
 <div class="container">
-  {{project-details project=project expanded=true}}
+  {{project-details onJoin=(action 'joinProject') project=project expanded=true}}
 </div>
 
 {{project-menu project=project}}