fab-manager/app/assets/templates/projects/_form.html.erb

<div class="row no-gutter">

  <div class=" col-sm-12 col-md-12 col-lg-9 nopadding">

    <section class="panel panel-default bg-light m-lg"> 
    <div class="panel-body m-r">

      <alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>

      <input name="_method" type="hidden" ng-value="method">

      <div class="form-group" ng-class="{'has-error': projectForm['project[name]'].$dirty && projectForm['project[name]'].$invalid}">
        <label for="name" class="col-sm-2 control-label">Nom *</label>
        <div class="col-sm-8">
          <input ng-model="project.name" type="text" name="project[name]" class="form-control" id="project_name" placeholder="" required>
          <span class="help-block" ng-show="projectForm['project[name]'].$dirty && projectForm['project[name]'].$error.required">Nom est obligatoire</span>
        </div>
      </div>


      <div class="form-group">
        <label for="project_image" class="col-sm-2 control-label">Illustration</label>
        <div class="col-sm-10">
          <div class="fileinput" data-provides="fileinput" ng-class="fileinputClass(project.project_image)">
            <div class="fileinput-new thumbnail" style="width: 334px; height: 250px;">
              <img src="data:image/png;base64," data-src="holder.js/100%x100%/text:&#xf03e;/font:FontAwesome/icon" bs-holder ng-if="!project.project_image">
            </div>
            <div class="fileinput-preview fileinput-exists thumbnail" data-trigger="fileinput" style="max-width: 334px;">
              <img ng-src="{{ project.project_image }}" alt="" />
            </div>
            <div>
              <span class="btn btn-default btn-file"><span class="fileinput-new">Ajouter un visuel <i class="fa fa-upload fa-fw"></i></span><span class="fileinput-exists">Modifier</span>
                <input type="file" name="project[project_image_attributes][attachment]"></span>
              <a class="btn btn-danger fileinput-exists" data-dismiss="fileinput">Supprimer</a>
            </div>
          </div>
        </div>
      </div>


      <div class="form-group">
        <label class="col-sm-2 control-label">Fichier CAO</label>
        <div class="col-sm-10">
          <div ng-repeat="file in project.project_caos_attributes" ng-show="!file._destroy">
            <input type="hidden" name="project[project_caos_attributes][][id]" ng-value="file.id" />
            <input type="hidden" name="project[project_caos_attributes][][_destroy]" ng-value="file._destroy" />

            <div class="fileinput input-group" data-provides="fileinput" ng-class="fileinputClass(file.attachment)">
              <div class="form-control" data-trigger="fileinput">
                <i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename">{{file.attachment}}</span>
              </div>
              <span class="input-group-addon btn btn-default btn-file"><span class="fileinput-new">Parcourir</span>
                <span class="fileinput-exists">Modifier</span><input type="file" name="project[project_caos_attributes][][attachment]"></span>
              <a class="input-group-addon btn btn-danger fileinput-exists" data-dismiss="fileinput" ng-click="deleteFile(file)"><i class="fa fa-trash-o"></i></a>
            </div>

          </div>
          <a class="btn btn-default" ng-click="addFile()" role="button">Ajouter un nouveau fichier <i class="fa fa-file-o fa-fw"></i></a>
        </div>
      </div>

      <div class="form-group" ng-class="{'has-error': projectForm['project[description]'].$dirty && projectForm['project[description]'].$invalid}">
        <label for="description" class="col-sm-2 control-label">Description *</label>
        <div class="col-sm-10">
          <textarea ng-model="project.description" rows="16" class="" id="project_description" placeholder="" name="project[description]" redactor required></textarea>
          <span class="help-block" ng-show="projectForm['project[description]'].$dirty && projectForm['project[description]'].$error.required">Description est obligatoire</span>
        </div>
      </div>


      <div class="form-group">
        <label class="col-sm-2 control-label">Étapes</label>
        <div class="col-sm-10">
          <div ng-repeat="step in project.project_steps_attributes" ng-show="!step._destroy">
            <div class="m-t-xs m-b-lg">
              <span class="label label-warning m-t m-b">Étape {{ $index+1 }}/{{project.project_steps_attributes.length}}</span>
              <input type="hidden" name="project[project_steps_attributes][][id]" ng-value="step.id" />
              <input type="hidden" name="project[project_steps_attributes][][_destroy]" ng-value="step._destroy" />
              <input ng-model="step.title" type="text" name="project[project_steps_attributes][][title]" class="form-control m-b-sm m-t-xs" placeholder="Titre de l'étape" required>
              <textarea name="project[project_steps_attributes][][description]" ng-model="step.description" class="m-b-sm form-control" placeholder="" rows="8" redactor></textarea>

              <div class="fileinput" data-provides="fileinput" ng-class="fileinputClass(step.project_step_image)">
                <span class="btn btn-default btn-file"><span class="fileinput-new">Ajouter une image</span><span class="fileinput-exists">Modifier l'image</span>
                  <input type="file" name="project[project_steps_attributes][][project_step_image_attributes][attachment]"></span>
                <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>

              <div>
                <a class="btn btn-sm btn-danger" ng-click="deleteStep(step)" role="button"><i class="fa fa-trash-o"></i> Supprimer l'étape</a>
              </div>
            </div>
          </div>
          <a class="btn btn-default m-b" ng-click="addStep()" role="button">Ajouter une nouvelle étape</a>
        </div>
      </div>



    </div>   <!-- ./panel-body  -->
    <div class="panel-footer no-padder">
      <div ng-show="project.state != 'published'">
        <div class="btn btn-lg btn-block btn-valid btn-success text-u-c r-n" publish-project ng-disabled="projectForm.$invalid">
          Publier votre projet 
        </div>
        <div class="text-center font-bold text-u-c">ou</div>
      </div>
      <input type="submit" ng-value="submitName" class="r-b btn-valid btn btn-warning btn-block p-lg btn-lg text-u-c" ng-disabled="projectForm.$invalid"/>
    </div>
    </section>

  </div>

  <div class="col-sm-12 col-md-12 col-lg-3">


    <div class="widget panel b-a m m-t-lg">
      <div class="panel-heading b-b small">
        <h3>Matériaux utilisés</h3>
      </div>
      <div class="widget-content no-bg wrapper">
        <input type="hidden" name="project[component_ids][]" value="" />
        <select ng-model="project.component_ids" class="form-control form-control-ui-select" name="project[component_ids][]" ui-select2 multiple>
          <option value="{{c.id}}" ng-repeat="c in components">{{c.name}}</option>
        </select>
      </div>
    </div>

    <div class="widget panel b-a m m-t-lg">
      <div class="panel-heading b-b small">
        <h3>Machines utilisées</h3>
      </div>
      <div class="widget-content no-bg wrapper">
        <input type="hidden" name="project[machine_ids][]" value="" />
        <select ng-model="project.machine_ids" class="form-control form-control-ui-select" name="project[machine_ids][]" ui-select2 multiple>
          <option value="{{m.id}}" ng-repeat="m in machines">{{m.name}}</option>
        </select>
      </div>
    </div>

    <div class="widget panel b-a m m-t-lg">
      <div class="panel-heading b-b small">
        <h3>Collaborateurs</h3>
      </div>
      <div class="widget-content no-bg wrapper">
        <input type="hidden" name="project[user_ids][]" value="" />
        <select ng-model="project.user_ids" class="form-control form-control-ui-select" name="project[user_ids][]" ui-select2 multiple>
          <option value="{{m.id}}" ng-repeat="m in members">{{m.name}}</option>
        </select>
      </div>
    </div>

    <div class="widget panel b-a m m-t-lg">
      <div class="panel-heading b-b small">
        <h3>Licences Creative Commons</h3>
      </div>
      <div class="widget-content no-bg wrapper">
        <%# TODO: Bug concerne qu'on ne peut pas déselectionner un option %>
        <select ng-model="project.licence_id" class="form-control" name="project[licence_id]" ui-select2>
          <option value="{{l.id}}" ng-repeat="l in licences">{{l.name}}</option>
        </select>
      </div>
    </div>

    <div class="widget panel b-a m m-t-lg">
      <div class="panel-heading b-b small">
        <h3>Thématiques</h3>
      </div>
      <div class="widget-content no-bg wrapper">
        <input type="hidden" name="project[theme_ids][]" value="" />
        <select ng-model="project.theme_ids" class="form-control form-control-ui-select" name="project[theme_ids][]" ui-select2 multiple>
          <option value="{{t.id}}" ng-repeat="t in themes">{{t.name}}</option>
        </select>
      </div>
    </div>
    
    <div class="widget panel b-a m m-t-lg">
      <div class="panel-heading b-b small">
        <h3>Tags</h3>
      </div>
      <div class="widget-content no-bg wrapper">
        <textarea ng-model="project.tags" class="form-control" id="project_tags" placeholder="" name="project[tags]"></textarea>
      </div>
    </div>

  </div> 

</div>