angular-file-upload

<div id="page-title">
    <h2 class="title-hero" ng-if="!isEdit">
        {{'Create Tenant'|translate}}
    </h2>
    <h2 class="title-hero" ng-if="isEdit">
        {{'Edit Tenant'|translate}}
    </h2>
</div>
<div class="panel">
    <div class="panel-body">
        <div class="panel">
            <div class="panel-heading">
                <h4 class="panel-title">
                    {{'Basic Info'|translate}}
                </h4>
            </div>
            <div class="panel-body">
                <form role="form" name="tenantForm">
                    <div class="form-group row">
                        <label class="col-md-3 control-label required">{{"ID" | translate}}</label>
                        <div class="col-md-6">
                            <input ng-if="!isEdit" name="id" class="form-control" ng-model="tenant.id" required ng-pattern="/^[A-Za-z0-9]*$/" placeholder="{{'please input tenant id'|translate}}...." />
                            <span class="error" ng-messages="tenantForm.id.$touched && tenantForm.id.$error">
                                <span ng-message="required"> {{'tenant id is empty'|translate}}</span>
                                <span ng-message="pattern">{{'tenant id is invalid'|translate}} </span>
                            </span>
                            <input ng-if="isEdit" name="id" readonly class="form-control" ng-model="tenant.id" />
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-3 control-label required">{{"Name" | translate}}</label>
                        <div class="col-md-6">
                            <input name="name" class="form-control" maxlength="50" ng-model="tenant.name" required placeholder="{{'please input tenant name'|translate}}...." />
                            <span class="error" ng-messages="tenantForm.name.$touched && tenantForm.name.$error">
                                <span ng-message="required"> {{'tenant name is empty'|translate}}</span>
                                <span ng-message="maxlength"> {{'Name must be no more than 50 characters'|translate}}</span>
                            </span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-3 control-label">{{"Description" | translate}}</label>
                        <div class="col-md-6">
                            <input name="description" class="form-control" maxlength="500" ng-model="tenant.description" placeholder="{{'please input tenant description'|translate}}...." />
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-3 control-label">{{"Description" | translate}}</label>
                        <div class="col-md-6">
                            <div style="display: flex; align-items: flex-end">
                                <div class="container-flex">
                                    <div class="flex-column">
                                        <input class="filename form-control" type="text" readonly="readonly" ng-model="selectedFile.file.name">
                                    </div>
                                    <div style="margin-left: 5px;width: 60px;">
                                        <label class="btn btn-default">
                                            <input id="logoInput" type="file" nv-file-select uploader="uploader" accept="image/*" style="visibility: collapse;height: 0px;" multiple/>
                                            瀏覽
                                        </label>
                                    </div>
                                    <div style="margin-left: 5px;width: 60px;" ng-if="selectedFile">
                                        <label class="btn btn-default">
                                            <span ng-click="removeSelectedFile()">{{'CANCEL' | translate}}</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <img id="img_review" ng-src="{{tenant.logo | logoFilter}}" alt="{{'Invalid icon, please upload an alternative image'|translate}}" style="height:100px" ng-if="tenant.logo && uploader.queue.length === 0" />
                                <div ng-thumb file="selectedFile" width="128" height="128" ng-if="selectedFile"></div>
                            </div>
                        </div>
                    </div>
                    <!--<div class="form-group row">-->
                        <!--<label class="col-md-3 control-label">{{"Description" | translate}}</label>-->
                        <!--<div class="col-md-6" style="display: flex; align-items: flex-end">-->
                            <!--<img id="img_review" ng-src="{{tenant.logo | logoFilter}}" alt="{{'Invalid icon, please upload an alternative image'|translate}}" style="height:100px" ng-if="tenant.logo && uploader.queue.length === 0" />-->
                            <!--<div ng-thumb file="selectedFile" width="128" height="128" ng-if="selectedFile"></div>-->
                            <!--<input class="control-label" id="logoInput" type="file" nv-file-select uploader="uploader" accept="image/*" />-->
                            <!--<a ng-click="removeSelectedFile()" ng-if="selectedFile">{{'CANCEL' | translate}}</a>-->
                        <!--</div>-->
                    <!--</div>-->
                    
                    <!--<div class="form-group row">-->
                        <!--<label class="col-md-3 control-label">{{"Description" | translate}}</label>-->
                        <!--<div class="col-md-6" style="display: flex; align-items: flex-end">-->
                            <!--<div class="container-flex">-->
                                <!--<div class="flex-column">-->
                                    <!--<input class="filename form-control" type="text" readonly="readonly" data-ng-model="selectedFile.file.name">-->
                                <!--</div>-->
                                <!--<div style="margin-left: 5px;width: 60px;">-->
                                    <!--<div ng-thumb file="selectedFile" width="128" height="128" ng-if="selectedFile"></div>-->
                                    <!--<label class="btn btn-default">-->
                                        <!--<input id="thumbnailInput" type="file" nv-file-select uploader="uploader" accept="image/*" style="visibility: collapse;height: 0px;">-->
                                        <!--瀏覽-->
                                    <!--</label>-->
                                    <!--<a ng-click="removeSelectedFile()" ng-if="selectedFile">{{'CANCEL' | translate}}</a>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                    <div class="form-group row">
                        <div class="col-md-offset-3 col-md-6">
                            <p class="help-block" style="font-size: 12px;">{{'Image in scale 200 * 54 is best' | translate}}</p>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="pull-right">
            <button type="button" class="btn btn-primary" ng-if="(isEdit && tenantPermissionUpdate) || (!isEdit && tenantPermissionCreate)" ng-click="submit(tenant)" ng-disabled="tenantForm.$invalid">{{'Save'|translate}}
            </button>
            <button type="button" class="btn btn-link" ng-click="back()">{{'Back'|translate}}</button>
        </div>
    </div>
</div>

/* Copyright 2016 Qianyun, Inc. All rights reserved. -- Qianyun Confidential */
/*
 *
 */

'use strict';

angular.module('yacmpApp').controller('TenantEditController', ['$scope', '$window', 'DataService', 'UtilService',
        '$uibModal', '$stateParams', '$q', '$timeout', '$location', '$translate', '$filter', 'permissionService', 'commonService', 'FileUploader',

        function ($scope, $window, DataService, UtilService, $uibModal, $stateParams, $q, $timeout, $location, $translate,
            $filter, permissionService, commonService, FileUploader) {
            $scope.table_columns_user = ["User Id", "Name", "Email", "Role"];

            $scope.isEdit = false;
            $scope.tenant = {};

            var uploader = $scope.uploader = new FileUploader({
                url: UtilService.getBaseUrl() + "/icon/upload",
                queueLimit: 1
            });

            uploader.filters.push({
                name: 'imageFilter',
                fn: function(item, options) {
                    var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|';
                    return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
                }
            });

            $scope.removeSelectedFile = function(item) {
                $scope.selectedFile = null;
                $scope.uploader.clearQueue();
            };

            uploader.onAfterAddingFile = function(item) {
                $scope.selectedFile = item;
                $scope.$digest();
            };

            uploader.onWhenAddingFileFailed = function(item, filter, options) {
                if (filter.name === "queueLimit") {
                    uploader.clearQueue();

                    // NOTE: the angular-file-upload has one trick bug, the item here is now is FileLikeObject but
                    // not File, so use input element here as a workaround.
                    var files = $("#logoInput")[0].files;
                    if (files) {
                        uploader.addToQueue(files[0], filter, options);
                    }
                }
            };

            var id = $stateParams.id;

            if ($stateParams.id) {
                $scope.isEdit = true;
                DataService.get(CONSTANTS.SERVICE_TENANT_MGMT.PATH + "/" + id + "/with-users").success(function (tenant, status) {
                    $scope.tenant = tenant;
                    var requestParam = {};
                    requestParam.hierarchy = $scope.hierarchy;
                    requestParam.hierarchyInstanceId = $stateParams.id;

                }).error(function (data, status, headers, config) {
                    UtilService.alert($scope,"Couldn't load the tenant, error#",data);
                });
            }

            function postTenant(tenant) {
                if ($scope.isEdit) {
                    //update tenant
                    DataService.put(CONSTANTS.SERVICE_TENANT_MGMT.PATH + "/" + tenant.id, tenant)
                        .then(function successCallback() {
                            UtilService.showMessage('Tenant saved', function () {
                                $location.path('/main/admin/tenant');
                            }, "SUCCESS");
                        }, function errorCallback(data) {
                            UtilService.alert($scope, "Couldn't edit tenant, error#", data);
                        });
                } else {
                    //create a new tenant
                    DataService.post(CONSTANTS.SERVICE_TENANT_MGMT.PATH, tenant)
                        .then(function successCallback() {
                            UtilService.showMessage('Tenant created', function () {
                                $location.path('/main/admin/tenant');
                            }, "SUCCESS");
                        }, function errorCallback(data) {
                            UtilService.alert($scope,"Couldn't create tenant, error#",data);
                        });
                }
            }

            $scope.submit = function (tenant) {
                if (uploader.queue.length > 0) {
                    uploader.uploadAll();
                    uploader.onCompleteItem = function(fileItem, response, status, headers) {
                        console.info('onCompleteItem, response:', response);
                        tenant.logo = response;
                        postTenant(tenant);
                    };
                } else {
                    postTenant(tenant);
                }

            };

            $scope.back = function() {
                $location.path('/main/admin/tenant');
            };

            permissionService.tenantPermission.update.then(
                function(permission) {
                    $scope.tenantPermissionUpdate = permission;
                }, function(reject) {
                    $scope.tenantPermissionUpdate = false;
                }
            );

            permissionService.tenantPermission.create.then(
                function(permission) {
                    $scope.tenantPermissionCreate = permission;
                }, function(reject) {
                    $scope.tenantPermissionCreate = false;
                }
            );
        }
    ]
);