BCMI – formularze

  bcmi

Najnowsze wytyczne:

ogólnie teraz jak będziesz sobie chciał dodać ogólny formularz to tworzysz plik w assets/js/forms

Ogólna zasada działania

  1. tworzysz pliki js i podpinasz w bcmiMaterialPro,
  2. tworzysz plik php
  3. W pliku php dajesz ng-init z pullObjectData.
  4. Jeśli chcesz przekazać jakieś dane z poprzedniego screena, to podajesz je jako trzeci parametr w funkcji popup

  1. Create assets/js/bcmiLaborhoursForm.angular.js
  2. Include bcmiLaborhoursForm.angular.js in bcmiMaterialNowMain.js
  3. Add base code:
app.controller('bcmiLaborhoursFormController',['$scope', '$compile','$filter', '$timeout', '$requestHelper', function($scope, $compile, $filter, $timeout, $requestHelper) {

	$scope.apiv = 'apiv3';

	// INIT FUNCTION - WHATEVER YOU WANT TO INIT
	$scope.initLaborHoursForm = function(parent){
		$timeout(function(){

		});
	}




	$scope.pullObjectData = function(id, parent){

		$scope.setApiVersion($scope.apiv);
		$timeout(function(){
			// THIS FUNCTION PARSES INCOMING DATA, SEE OTHER FORM CONTROLLERS (I.E. bcmiCustomerForm.angular.js, forms in bcmiForm2.angular.js) TO SEE HOW IT WORKS
			$scope.getObjectData(id, parent, function(data){


				return data;
			});
		});
	}

}]);

4. Create form template materialnow/object/forms/laborhoursform.php

5. Add base template code:

<div class="details-box-content forms-in-details" ng-init='setObjectType("laborhours");<?php if( (isset($id) && $id) || $parent ){ ?> pullObjectData(<?php echo isset($id) && $id ? $id : "null"; ?>, <?php echo isset($parent) && $parent ? json_encode($parent) : 'null'; ?>);<?php } ?>'>
 	 		
	<div class="form-scroll-container" bcmi-scrollbar>
		<div class="bcmiFormInputsContainer">
			<?php 
				// SEE OTHER FORM TEMPLATES TO FIND INPUT TYPES 
			
			?>	

		</div>
	</div>

</div>

6. Use $scope.popup function from bcmiApp.angular.js to open the form.

7. Do magic in bcmiForm2.angular.js

Zmiana pobieranego obiektu w popupie

odbywa się w pliku

fuel\app\assets\js\bcmiForm2.angular.js

Funkcja getObjectData

PARSOWANIE PRZED WYSŁANIEM

parsowanie zostało przeniesione do kontrolerów formularzy

trzeba użyć funkcji setParseFormInputFunction

SUBMIT FORM/ ZAPIS FORMULARZA

Trzeba w bcmiForm2.angular.js w funkcji submitForm dopisać sobie case, na jaki adres ma iść request.

Wczytywanie domyślnej wartości

wykonuje się to w pliku js danego formularza, czyli np bcmiOrdercrewForm.angular.js

data.crew_id = $scope.formatDropdownObject('crew', data);

				angular.element( $scope.bcmiForm.find('select[name="crew_id"]')[0]).triggerHandler("setfilter", ['company_id', data.company_id ] );

wczytywanie domyślnej wartości 2

są przygotowane mechanizmy ogarniające to zadanie defaultowo. Znajdują się w funkcji applyValuesToBcmiInputs w pliku bcmiform2

bcmiDropdown

ustawienie match_fields znajduje się w bcmiApp.angular.js w $scope.match_fields

ogarnięcie własnych filtrów do singleobjectangular

angular.element($($scope.bcmiForm).find('select[name="plant_id"]')[0]).triggerHandler('setfilter', ['product_id', '10']);

odpaldasz tego triggera i już wszystko powinno działać prawidłowo

Focus na pierwszym elemencie

Funkcja znajduje się w bcmiform2.angular.js

$scope.prepareToTabKeyPress

Pole informacyjne

<?php
				echo render('materialpro::core/display/infoalert', array(
					'message' =>  \bcmiLang::get('ticket_notes_info_1'),
					'class' => 'reports_info_with_background orange',
					'icon_class' => 'icon-asap-orange',
				));
			?>

<?php
				echo render('materialpro::core/display/infoalert', array(
					'message' =>  \bcmiLang::get('ticket_notes_info_2'),
					'class' => 'reports_info_with_background blue',
					'icon_class' => 'icon-i-blue',
				));
			?>

W inicie forma wrzuć:

$scope.enableHelpSidebar();

Następnie w views/object/forms/helpsidebars tworzysz plik z nazwą swojego object type

Pole informacyjne jako label

Z pewnymi mankamentami dla większości pól istnieje parametr hint, którego można użyć. Jeśli to nie jest wystarczające, można zrobić własny label

<div class="input-label">
                            <div class="input-label-left">
                               <?php echo \bcmiLang::get('affiliated_organization'); ?>
                            </div>
                            <div class="input-label-right">
                                <div class="hint-icon-container">
                                    <?php echo render('materialpro::core/display/infobubbleicon', array(
                                        'title' => \bcmiLang::get('organization_access'),
                                        'explanation' => \bcmiLang::get('organization_access_info'),
                                        'type' => 'info',
                                        'icon' => 'icon-i-lightgray',
                                    )); ?>
                                </div>
                            </div>
                        </div>

Ukrywanie nagłówka formularza

W controllerze forma wrzuć:

$scope.hide_form_header = true;

Pola zagnieżdżone (w tablicy obiektów)

W name trzeba wstawić {{}} żeby wywołać index. W ng_model natomiast nie trzeba.

<?php
    echo render('materialpro::inputs/numeric', array(
        'name' => 'estimates[{{$index}}].estimated_total',
        'value' => null,
        'type' => 'decimal',
        'label' => "{{showDateWithMonthAbbr(item.month_date)}} *",
        'validation_rules' => 'required|greater_than(0)|lower_equal_than(99999)',
        'class' => '',
        'object' => null,
        'suffix' => \bcmiLang::get('yd^3'),
        'ng_model' => 'object.estimates[$index].estimated_total',
    ));
?>

Ukrywanie nagłówka formularza

$scope.hide_form_header = true;

Autouzupełnianie adresu

ogólnie się blokuje na first_load. Generalnie jak nie idzie pullObjectData, to first_load będzie zawsze true

w przypadku opportunity zawsze idzie preview, więc pullObjectData zawsze się wykona

w innych przypadkach (jak projekt, order i order request) trzeba dodać setFirstLoad(false); do ng-init