allow add more picture for project step

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## next release
 
+- Allow add more picture for project step
 - Ability to use HTML in event's descriptions using a WYSIWYG editor
 - Fix a bug: statistics graphs were not showing
 - In the sign-up modal, the translation for 'i_accept_to_receive_information_from_the_fablab' was not loaded

app/assets/javascripts/controllers/projects.coffee.erb

@@ -124,7 +124,7 @@ class ProjectsController
     ##
     $scope.addStep = ->
       $scope.totalSteps += 1
-      $scope.project.project_steps_attributes.push { step_nb: $scope.totalSteps }
+      $scope.project.project_steps_attributes.push { step_nb: $scope.totalSteps, project_step_images_attributes: [] }
 
 
 
@@ -185,6 +185,26 @@ class ProjectsController
         console.error(error)
 
 
+    ##
+    # This will create a single new empty entry into the project's step image list.
+    ##
+    $scope.addProjectStepImage = (step)->
+      step.project_step_images_attributes.push {}
+
+
+
+    ##
+    # This will remove the given image from the project's step image list.
+    # @param step {Object} the project step has images
+    # @param image {Object} the image to delete
+    ##
+    $scope.deleteProjectStepImage = (step, image) ->
+      index = step.project_step_images_attributes.indexOf(image)
+      if image.id?
+        image._destroy = true
+      else
+        step.project_step_images_attributes.splice(index, 1)
+
 
 ##
 #  Controller used on projects listing page

app/assets/stylesheets/app.plugins.scss

@@ -24,6 +24,10 @@
   .modal-header {
     padding: 15px;
   }
+
+  .note-group-select-from-files {
+    display: none;
+  }
 }
 
 

app/assets/templates/projects/_form.html.erb

@@ -100,15 +100,31 @@
               <input type="hidden" name="project[project_steps_attributes][][description]" ng-value="step.description" />
               <summernote ng-model="step.description" placeholder="" config="summernoteOpts" name=project[project_steps_attributes][][description]></summernote>
 
-              <div class="fileinput" data-provides="fileinput" ng-class="fileinputClass(step.project_step_image)">
+              <div class="row">
-                <span class="btn btn-default btn-file"><span class="fileinput-new">{{ 'add_a_picture' | translate }} <i class="fa fa-file-image-o m-l-sm" aria-hidden="true"></i></span><span class="fileinput-exists" translate>{{ 'change_the_picture' }}</span>
+                <div class="col-md-4" ng-repeat="image in step.project_step_images_attributes" ng-show="!image._destroy">
-                  <input type="file"
+                  <input type="hidden" name="project[project_steps_attributes][][project_step_images_attributes][][id]" ng-value="image.id" />
-                         name="project[project_steps_attributes][][project_step_image_attributes][attachment]"></span>
+                  <input type="hidden" name="project[project_steps_attributes][][project_step_images_attributes][][_destroy]" ng-value="image._destroy" />
-                <span class="fileinput-filename">{{step.project_step_image}}</span>
+
-                <a class="close fileinput-exists" data-dismiss="fileinput" style="float: none"><i class="fa fa-trash-o"></i></a>
+                  <div class="fileinput" data-provides="fileinput" ng-class="fileinputClass(image.attachment)" style="width: 100%;">
+                    <div class="fileinput-new thumbnail" style="width: 100%; height: 200px;">
+                      <img src="data:image/png;base64," data-src="holder.js/100%x100%/text:&#xf03e;/font:FontAwesome/icon" bs-holder ng-if="!image.attachment">
+                    </div>
+                    <div class="fileinput-preview fileinput-exists thumbnail" data-trigger="fileinput" style="max-width: 334px;">
+                      <img ng-src="{{ image.attachment_url }}" alt="{{image.attachment}}" />
+                    </div>
+                    <div>
+                      <span class="btn btn-default btn-file"><span class="fileinput-new">{{ 'browse' | translate }} <i class="fa fa-upload fa-fw"></i></span><span class="fileinput-exists" translate>{{ 'change' }}</span>
+                        <input type="file" name="project[project_steps_attributes][][project_step_images_attributes][][attachment]"></span>
+                      <a class="btn btn-danger fileinput-exists" data-dismiss="fileinput" ng-click="deleteProjectStepImage(step, image)" translate>{{ 'delete' }}</a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div>
+                <a class="btn btn-default" ng-click="addProjectStepImage(step)" role="button">{{ 'add_a_picture' | translate }} <i class="fa fa-file-o fa-fw"></i></a>
               </div>
 
-              <div>
+              <div class="m-t">
                 <a class="btn btn-sm btn-danger" ng-click="deleteStep(step)" role="button"><i class="fa fa-trash-o m-r-xs"></i> {{ 'delete_the_step' | translate }}</a>
               </div>
             </div>

app/assets/templates/projects/show.html.erb

@@ -42,10 +42,10 @@
           <div class="col-md-12 m-b-xs">
              <h3 class="well well-simple step-title">{{ 'step_N' | translate:{INDEX:step.step_nb} }} : {{step.title}}</h3>
           </div>
-          <div class="col-md-4" ng-if="step.project_step_image">
+          <div class="col-md-4" ng-repeat="image in step.project_step_images_attributes">
-            <a href="{{step.project_step_full_image_url}}" target="_blank"><img class="img-responsive m-b" ng-src="{{step.project_step_image_url}}" alt="{{step.title}}" ></a>
+            <a href="{{image.attachment_full_url}}" target="_blank"><img class="img-responsive m-b" ng-src="{{image.attachment_url}}" alt="{{image.attachment}}" ></a>
           </div>
-          <div class="col-md-8" ng-class="{'col-md-12' : step.project_step_image == undefined}">
+          <div class="col-md-8" ng-class="{'col-md-12' : step.project_step_images_attributes.length > 1 || step.project_step_images_attributes.length == 0}">
 
               <p ng-bind-html="step.description | toTrusted"></p>
           </div>

app/controllers/api/projects_controller.rb

@@ -71,6 +71,6 @@ class API::ProjectsController < API::ApiController
                                       user_ids: [], machine_ids: [], component_ids: [], theme_ids: [], project_image_attributes: [:attachment],
                                       project_caos_attributes: [:id, :attachment, :_destroy],
                                       project_steps_attributes: [:id, :description, :title, :_destroy, :step_nb,
-                                        :project_step_image_attributes => :attachment])
+                                        :project_step_images_attributes => [:id, :attachment, :_destroy]])
     end
 end

app/models/project_step.rb

@@ -1,5 +1,5 @@
 class ProjectStep < ActiveRecord::Base
   belongs_to :project
-  has_one :project_step_image, as: :viewable, dependent: :destroy
+  has_many :project_step_images, as: :viewable, dependent: :destroy
-  accepts_nested_attributes_for :project_step_image, allow_destroy: true
+  accepts_nested_attributes_for :project_step_images, allow_destroy: true, reject_if: :all_blank
 end

app/views/api/projects/show.json.jbuilder

@@ -51,9 +51,12 @@ json.project_steps_attributes @project.project_steps.order('project_steps.step_n
   json.id s.id
   json.description s.description
   json.title s.title
-  json.project_step_image s.project_step_image.attachment_identifier if s.project_step_image
+  json.project_step_images_attributes s.project_step_images do |si|
-  json.project_step_image_url s.project_step_image.attachment.medium.url if s.project_step_image
+    json.id si.id
-  json.project_step_full_image_url s.project_step_image.attachment.url if s.project_step_image
+    json.attachment si.attachment_identifier
+    json.attachment_url si.attachment.medium.url
+    json.attachment_full_url si.attachment.url
+  end
   json.step_nb s.step_nb
 end
 json.state @project.state