UI Components

Models

Representable

UI Components

newRepresentableModalButton

<!-- Use: -->
<div gg-new-representable-modal-button lang-code="langCode" model="lexicalEntry.lemma"></div>

// Controller
$scope.openModal = function() {
    $rootScope.$broadcast('new:representable:modal:button:clicked', {
        //langCode: $scope.langCode, @fixme Should be included in Representable
        model: $scope.model
    });
};

newRepresentableModal

<!-- Use: -->
<div gg-new-representable-modal></div>

// Controller
$scope.$on('new:representable:modal:button:clicked', function(params) {
    $scope.model = params.form;

    // The form should be empty when the modal is opened.
    // Send an event to the `newFormForm` to clear the fields.
    $scope.$broadcast('new:representable:form:clear');

    // Open the modale
    $('#newRepresentableModal').modal('show');
})

newRepresentableForm

<!-- Use (should it take `langCode` ?) -->
<div gg-new-representable-form model="model" on-success="callback()"></div>

// Controller

// Empty fields before modal open
$scope.$on('new:representable:modal:before:open', function() {
    // @todo Clear fields
});

// Check form validity each time fields are edited
$scope.$on('form:fields:modified', function() {
    $scope.valid = formIsValid(); 
});

$scope.submit = function() {
    if ($scope.valid) {
        // @todo POST form
    }
};

function formIsValid() {
    // @todo Check is form is valid
}

langRepresentableInput

No isolate scope, but expect langCode and model from parent scope.

<!-- Use -->
<div gg-lang-representable-input></div>