bucket-model.coffee

null

### @ngInject ###
global.cobudgetApp.factory 'BucketModel', (BaseModel) ->
  class BucketModel extends BaseModel
    @singular: 'bucket'
    @plural: 'buckets'
    @indices: ['groupId', 'userId']

    relationships: ->
      @hasMany 'comments', sortBy: 'createdAt', sortDesc: true
      @belongsTo 'group'
      @belongsTo 'author', from: 'users', by: 'userId'

    amountRemaining: ->
      @target - @totalContributions

    percentFunded: ->
      @totalContributions / @target * 100

    #temporary hardcoded value
    ageInDays: ->
      2

bucket_serializer.rb

class BucketSerializer < ActiveModel::Serializer
  embed :ids, include: true
  attributes :id,
             :group_id,
             :user_id,
             :name,
             :target,
             :description,
             :created_at,
             :published,
             :total_contributions,
             :num_of_contributors
end

buckets_controller.rb

class BucketsController < AuthenticatedController
  api :GET, '/buckets?group_id='
  def index 
    group = Group.find(params[:group_id])
    render json: group.buckets
  end

  api :GET, '/buckets/:id', 'Full details of bucket'
  def show
    bucket = Bucket.find(params[:id])
    render json: [bucket]
  end

  api :POST, '/buckets', 'Create a bucket'
  def create
    bucket = Bucket.create(bucket_params_create)
    render json: [bucket]
  end

  api :PUT, '/buckets/:id', 'Update a bucket'
  def update
    update_resource(bucket_params_update)
  end

  api :DELETE, '/buckets/:id', 'Deletes a bucket'
  def destroy
    destroy_resource
  end

  private
    def bucket_params_create
      # TODO: put user_id back in once we have a concept of 'current_user' in the API
      params.require(:bucket).permit(:name, :description, :group_id, :target).merge(user_id: current_user.id)
    end

    def bucket_params_update
      # TODO: put user_id back in once we have a concept of 'current_user' in the API
      params.require(:bucket).permit(:name, :description, :target) 
    end
end

draft-page.coffee

module.exports = 
  url: '/groups/:groupId/drafts/:draftId'
  template: require('./draft-page.html')
  controller: ($scope, Records, $stateParams, $location) ->
    window.scrollHeight = 0;

    groupId = parseInt $stateParams.groupId
    draftId = parseInt $stateParams.draftId

    Records.groups.findOrFetchById(groupId).then (group) ->
      $scope.group = group

    Records.buckets.findOrFetchById(draftId).then (draft) ->
      $scope.draft = draft
      Records.comments.fetchByBucketId(draftId)

    $scope.back = ->
      $location.path("/groups/#{groupId}")

    $scope.showFullDescription = false

    $scope.readMore = ->
      $scope.showFullDescription = true

    $scope.showLess = ->
      $scope.showFullDescription = false

    $scope.newComment = Records.comments.build(bucketId: draftId)
    
    $scope.createComment = ->
      $scope.newComment.save()

    return

draft-page.html

<div class="draft-page">
  <md-toolbar class="draft-page__toolbar">
    <div class="md-toolbar-tools draft-page__menu-bar">
      <md-button class="md-icon-button" aria-label="Settings" ng-click="back()">
        <div layout="column" layout-align="center center">
          <i class="material-icons draft-page__menu-icon">arrow_back</i>
        </div>
      </md-button>

      <span class="draft-page__group-name">{{ group.name | limitTo: 16 }} <span ng-if="draft.name.length > 16">...</span></span>

      <span flex></span>

      <md-button class="md-icon-button draft-page-menu-button" aria-label="More">
        <div layout="column" layout-align="center center">
          <i class="material-icons draft-page__menu-icon">more_vert</i>
        </div>
      </md-button>
    </div>
   </md-toolbar> 

  <md-content class="draft-page__content">
    <md-card class="draft-page__header-card">
      <md-card-content class="draft-page__header-card-content">
        <div class="draft-page__title">{{ draft.name }}</div>
        <div class="draft-page__author">created by {{ draft.author().name }} {{ draft.ageInDays() }} days ago</div>
      </md-card-content>

      <md-card-content class="draft-page__description-card">
        <div layout="row" ng-if="draft.target > 0">
          <span class="draft-page__description-header">Funding Target</span>
          <span flex="10"></span>
          <span class="draft-page__description-header" flex>{{ draft.target | currency : "$" : 0  }}</span>
        </div>

        <div ng-hide="showFullDescription">
          <p class="draft-page__description-text">{{ draft.description | limitTo:100 }} <span ng-if="draft.description.length > 100">...</span></p>
          <md-button md-no-ink class="md-primary draft-page__more-button" ng-click="readMore()">Read More</md-button>          
        </div>

        <div ng-show="showFullDescription">
          <p class="draft-page__description-text">{{ draft.description }}</p>
          <md-button md-no-ink class="md-primary draft-page__more-button" ng-click="showLess()">Show Less</md-button>
        </div>
      </md-card-content>
    </md-card>

    <md-card class="draft-page__status-card">
      <md-card-content class="draft-page__status-card-content">
        <div class="draft-page__status-header">Status</div>
        <div class="draft-page__status-flagpoints" layout="row" layout-align="space-between center">
          <div class="draft-page__status-flagpoint">
            <div layout="column" layout-align="center center">
              <i class="material-icons draft-page__status-flagpoint-icon-active">radio_button_on</i>
              <span class="draft-page__status-flagpoint-text">Draft</span>
            </div>
          </div>

          <div class="draft-page__status-flagpoint-divider" flex></div>

          <div class="draft-page__status-flagpoint">
            <div layout="column" layout-align="center center">
              <i class="material-icons draft-page__status-flagpoint-icon-inactive">radio_button_off</i>
              <span class="draft-page__status-flagpoint-text">Live</span>
            </div>
          </div>

          <div class="draft-page__status-flagpoint-divider" flex></div>

          <div class="draft-page__status-flagpoint">
            <div layout="column" layout-align="center center">
              <i class="material-icons draft-page__status-flagpoint-icon-inactive">radio_button_off</i>
              <span class="draft-page__status-flagpoint-text">Funded</span>
            </div>
          </div>

          <div class="draft-page__status-flagpoint-divider" flex></div>

          <div class="draft-page__status-flagpoint">
            <div layout="column" layout-align="center center">
              <i class="material-icons draft-page__status-flagpoint-icon-inactive">radio_button_off</i>
              <span class="draft-page__status-flagpoint-text">Done</span>
            </div>
          </div>
        </div>
        <div class="draft-page__status-description">
          <em>This project is still being discussed + designed</em>
        </div>
      </md-card-content>
    </md-card>

    <md-card class="draft-page__discussion-card">
      <md-card-content class="draft-page__discussion-card-content">
        <div class="draft-page__discussion-header" layout="row">
          <span>
            <div layout="column" layout-align="center center">
              Discussion
            </div>
          </span>
          <span flex></span>
          <span>
            <div layout="column" layout-align="center center">
              <i class="material-icons draft-page__comment-count-icon">messenger</i>
              <div class="draft-page__comment-count">{{ draft.comments().length }}</div>
            </div>
          </span>
        </div>

        <form name='commentForm' class="draft-page__comment-form" ng-submit="createComment()">
          <md-input-container>
            <label>Add a comment</label>
            <input name="text" type="text" ng-model="newComment.text">
          </md-input-container>

          <md-input-container class="cob-hidden-submit-button">
            <input type="submit" aria-label="submit">
          </md-input-container>
        </form>

      </md-card-content>

      <md-list>
        <md-list-item class="draft-page__comment" ng-repeat="comment in draft.comments()" layout="column" layout-align="center start">
          <md-divider></md-divider>
          <div class="draft-page__comment-author">{{ comment.author().name }}</div>
          <div class="draft-page__comment-text">{{ comment.text }}</div>
        </md-list-item>
      </md-list>

    </md-card>
  </md-content>

</div>

user-model.coffee

null

### @ngInject ###
global.cobudgetApp.factory 'UserModel', (BaseModel) ->
  class UserModel extends BaseModel
    @singular: 'user'
    @plural: 'users'