Base solution for your next web application

Activities of "john_kattenhorn"

Answer

Thanks ever so much, it's probably something to do with my lack of experience for AngularJS but I really appreciate your help.

Answer

So I'm still stuck, I've read up on the ui-router and it looks really clever, I like it but I cannot make it work for me. I get on JS errors it simple refuses to do anything.

Here is the snippet from the app.js

if (abp.auth.hasPermission('Pages.Tenants')) {
            $urlRouterProvider.otherwise("/host/tenants"); // Entrance page for the host
            $stateProvider.state('host.tenants', {
                url: '/tenants',
                templateUrl: '~/App/host/views/tenants/index.cshtml',
                menu: 'Organisations'
            });

            $stateProvider.state('host.tenants.create', {
                url: '/create',
                templateUrl: '~/App/host/views/tenants/create.cshtml'
            });

            $stateProvider.state('host.tenants.edit', {
                url: '/edit/:tenantId',
                templateUrl: '~/App/host/views/tenants/edit.cshtml'                
            });

        }

        if (abp.auth.hasPermission('Pages.Administration.Host.Settings')) {
            $stateProvider.state('host.settings', {
                url: '/settings',
                templateUrl: '~/App/host/views/settings/index.cshtml',
                menu: 'Administration.Settings.Host'
            });
        }

I'm hoping that the nesting of host.tenants and host.tenants.create and host.tenants.edit gove the urls #/host/tenant, #/host/tenant/create and #host/tenant/edit respectively.

This is how I'm trying to call the create function (it doesn't work even if you try the url manually though).

<div class="col-xs-6 text-right">
            <a ng-if="vm.permissions.create" class="btn btn-primary blue" ng-href="#/host/tenants/create/"><i class="fa fa-plus"></i> @L("CreateNewTenant")</a>
        </div>

The Create.cshtml

<div ng-controller="host.views.tenants.create as vm">
    <div class="row margin-bottom-5">
        <div class="col-xs-6">
            <div class="page-head">
                <div class="page-title">
                    <h1>
                        <span>PAGE_NAME</span> <small>PAGE_NAME_INFO</small>
                    </h1>
                </div>
            </div>
        </div>
        <div class="col-xs-6 text-right">
            <button class="btn btn-primary blue" @*ng-click="vm.doIt1()"*@><i class="fa fa-plus"></i> ACTION_ONE</button>
            <button class="btn btn-primary blue" @*ng-click="vm.doIt2()"*@><i class="fa fa-plus"></i> ACTION_TWO</button>
        </div>
    </div>
    <div class="portlet light">
        <div class="portlet-body">
            <p>PAGE_CONTENT_HERE</p>
        </div>
    </div>
</div>

The create js file :

(function () {

    appModule.controller('host.views.tenants.create', [
         '$scope', '$modal', 'uiGridConstants', 'abp.services.app.tenant',
         function ($scope, $modal, uiGridConstants, tenantService) {
             var vm = this;

             $scope.$on('$viewContentLoaded', function () {
                 Metronic.initAjax();
             });
             

            //start from here...
        }
    ]);
})();

I'd really appreciate some help on this as I've now spent an entire day on this function and it's running late.

Thanks

Answer

OK, I've made some headway, but I think I've not done the routing correctly :

if (abp.auth.hasPermission('Pages.Tenants')) {
            $urlRouterProvider.otherwise("/host/tenants"); // Entrance page for the host
            $stateProvider.state('host.tenants', {
                url: '/tenants',
                templateUrl: '~/App/host/views/tenants/index.cshtml',
                menu: 'Organisations'
            });

            $stateProvider.state('host.tenants.create', {
                url: '/tenants/create',
                templateUrl: '~/App/host/views/tenants/create.cshtml'
            });

            $stateProvider.state('host.tenants.edit', {
                url: '/tenants/edit/:tenantId',
                templateUrl: '~/App/host/views/tenants/edit.cshtml'                
            });

        }

On the create button I have:

<div class="col-xs-6 text-right">
            <button ng-if="vm.permissions.create" class="btn btn-primary blue" href="#/tenants/create/"><i class="fa fa-plus"></i> @L("CreateNewTenant")</button>
        </div>

I think I have the navigation routes wrong maybe, I'm just going to have some dinner and then I will come back to it :-)

Question

Hi,

Sorry if this sounds like a too simple question :-)

I've extended Tenant but I'd like the edit or create to go to new pages rather than dialogue panel.

I figure I need to modify:

vm.editTenant and vm.createTenant js funcitons in index.js, is there a sample in AbpBoilerPlate that would give me a correct implementation of the navigation.

Thanks

John

Showing 11 to 14 of 14 entries