Using RAD Tool Navogation Properties #4978

0

yekalkan created 6 years ago

When you select a city, id and name of the selected city are saved. ( in getNewCityId() method )

So, you can pass the cityId or cityName variable to lookup component and use it as a filter there.

openSelectSpotModal() {
        this.spotLookupTableModal.id = this.X.spottId;
        this.spotLookupTableModal.displayName = this.spotName;
        this.spotLookupTableModal.filterText = this.X.cityName; // <- add this to filter the spots
        this.spotLookupTableModal.show();
    }

Also, call getAll() when the lookup modal is shown. (in show() method)

Or you can pass the id and use it in getAllSpotForLookupTable method. And it is a better way.

0

avanekar02 created 6 years ago

This is my CreatOrEditModal.js made changes

----------From Here

(function ($) { app.modals.CreateOrEditInstitutionModal = function () {

    var _institutionsService = abp.services.app.institutions;

    var _modalManager;
    var _$institutionInformationForm = null;

	        var _cityLookupTableModal = new app.ModalManager({
        viewUrl: abp.appPath + 'App/Institutions/CityLookupTableModal',
        scriptUrl: abp.appPath + 'view-resources/Areas/App/Views/Institutions/_CityLookupTableModal.js',
        modalClass: 'CityLookupTableModal'
    });        var _schoolLookupTableModal = new app.ModalManager({
        viewUrl: abp.appPath + 'App/Institutions/SchoolLookupTableModal',
        scriptUrl: abp.appPath + 'view-resources/Areas/App/Views/Institutions/_SchoolLookupTableModal.js',
        modalClass: 'SchoolLookupTableModal'
    });        var _gradeLookupTableModal = new app.ModalManager({
        viewUrl: abp.appPath + 'App/Institutions/GradeLookupTableModal',
        scriptUrl: abp.appPath + 'view-resources/Areas/App/Views/Institutions/_GradeLookupTableModal.js',
        modalClass: 'GradeLookupTableModal'
    });        var _sectionLookupTableModal = new app.ModalManager({
        viewUrl: abp.appPath + 'App/Institutions/SectionLookupTableModal',
        scriptUrl: abp.appPath + 'view-resources/Areas/App/Views/Institutions/_SectionLookupTableModal.js',
        modalClass: 'SectionLookupTableModal'
    });        var _academicyearLookupTableModal = new app.ModalManager({
        viewUrl: abp.appPath + 'App/Institutions/AcademicyearLookupTableModal',
        scriptUrl: abp.appPath + 'view-resources/Areas/App/Views/Institutions/_AcademicyearLookupTableModal.js',
        modalClass: 'AcademicyearLookupTableModal'
    });

    this.init = function (modalManager) {
        _modalManager = modalManager;

		var modal = _modalManager.getModal();
        modal.find('.date-picker').datetimepicker({
            locale: abp.localization.currentLanguage.name,
            format: 'L'
        });

        _$institutionInformationForm = _modalManager.getModal().find('form[name=InstitutionInformationsForm]');
        _$institutionInformationForm.validate();
    };

	          $('#OpenCityLookupTableButton').click(function () {

        var institution = _$institutionInformationForm.serializeFormToObject();

        _cityLookupTableModal.open({ id: institution.cityId, displayName: institution.cityCitiName }, function (data) {
            _$institutionInformationForm.find('input[name=CityCitiName]').val(data.displayName); 
            _$institutionInformationForm.find('input[name=CityId]').val(data.id); 
        });
    });
	
	$('#ClearCityCitiNameButton').click(function () {
            _$institutionInformationForm.find('input[name=CityCitiName]').val(''); 
            _$institutionInformationForm.find('input[name=CityId]').val(''); 
    });
	
    $('#OpenSchoolLookupTableButton').click(function () {

        var institution = _$institutionInformationForm.serializeFormToObject();

        _schoolLookupTableModal.open({ id: institution.schoolId, displayName: institution.schoolSchoolName,filterText:institution.cityCitiName}, function (data) {

---------------------------------------------------------------------------------------------------------------------- _$institutionInformationForm.find('input[name=SchoolSchoolName]').val(data.displayName); _$institutionInformationForm.find('input[name=SchoolId]').val(data.id); }); });

	$('#ClearSchoolSchoolNameButton').click(function () {
            _$institutionInformationForm.find('input[name=SchoolSchoolName]').val(''); 
            _$institutionInformationForm.find('input[name=SchoolId]').val(''); 
    });
	
    $('#OpenGradeLookupTableButton').click(function () {

        var institution = _$institutionInformationForm.serializeFormToObject();

        _gradeLookupTableModal.open({ id: institution.gradeId, displayName: institution.gradeGradeName }, function (data) {
            _$institutionInformationForm.find('input[name=GradeGradeName]').val(data.displayName); 
            _$institutionInformationForm.find('input[name=GradeId]').val(data.id); 
        });
    });
	
	$('#ClearGradeGradeNameButton').click(function () {
            _$institutionInformationForm.find('input[name=GradeGradeName]').val(''); 
            _$institutionInformationForm.find('input[name=GradeId]').val(''); 
    });
	
    $('#OpenSectionLookupTableButton').click(function () {

        var institution = _$institutionInformationForm.serializeFormToObject();

        _sectionLookupTableModal.open({ id: institution.sectionId, displayName: institution.sectionSectionName }, function (data) {
            _$institutionInformationForm.find('input[name=SectionSectionName]').val(data.displayName); 
            _$institutionInformationForm.find('input[name=SectionId]').val(data.id); 
        });
    });
	
	$('#ClearSectionSectionNameButton').click(function () {
            _$institutionInformationForm.find('input[name=SectionSectionName]').val(''); 
            _$institutionInformationForm.find('input[name=SectionId]').val(''); 
    });
	
    $('#OpenAcademicyearLookupTableButton').click(function () {

        var institution = _$institutionInformationForm.serializeFormToObject();

        _academicyearLookupTableModal.open({ id: institution.academicyearId, displayName: institution.academicyearYear_Attended }, function (data) {
            _$institutionInformationForm.find('input[name=AcademicyearYear_Attended]').val(data.displayName); 
            _$institutionInformationForm.find('input[name=AcademicyearId]').val(data.id); 
        });
    });
	
	$('#ClearAcademicyearYear_AttendedButton').click(function () {
            _$institutionInformationForm.find('input[name=AcademicyearYear_Attended]').val(''); 
            _$institutionInformationForm.find('input[name=AcademicyearId]').val(''); 
    });
	


    this.save = function () {
        if (!_$institutionInformationForm.valid()) {
            return;
        }

        var institution = _$institutionInformationForm.serializeFormToObject();
		
		 _modalManager.setBusy(true);
		 _institutionsService.createOrEdit(
			institution
		 ).done(function () {
           abp.notify.info(app.localize('SavedSuccessfully'));
           _modalManager.close();
           abp.event.trigger('app.createOrEditInstitutionModalSaved');
		 }).always(function () {
           _modalManager.setBusy(false);
		});
    };
};

})(jQuery);

0

alper created 6 years ago

Support Team

please format your code with the `` tags.

0

yekalkan created 6 years ago

@avanekar02 i assumed you are working on angular, my bad.

But key point is same. Pass the selected city id value to spot lookup modal and use it as a filter.

in create or edit modal:

$('#OpenSpotLookupTableButton').click(function () {

            var entity = _$entityInformationForm.serializeFormToObject();

            _spotLookupTableModal.open({ id: entity.spotId, displayName: entity.spotName, cityId: entity.cityId}, function (data) { // we added  cityId: entity.cityId parameter here
                _$entityInformationForm.find('input[name=SpotName]').val(data.displayName); 
                _$entityInformationForm.find('input[name=SpotId]').val(data.id); 
            });
        });

it passed cityId to controller:

In controller:

public PartialViewResult SpotLookupTableModal(long? id, string displayName, int cityId)
        {
            var viewModel = new SpotLookupTableViewModel()
            {
                Id = id,
                DisplayName = displayName,
                CityId = cityId, // declare a CityId variable in SpotLookupTableViewModel
                FilterText = ""
            };

            return PartialView("_SpotLookupTableModal", viewModel);
        }

Then Create a hidden input in _SpotLookupTableViewModal

<input class="form-control"  id="CityIdFilter"  value="@Model.CityId" type="text" name="CityId"  hidden/>

Now you can use it to filter spots when you call getAllSpotForLookupTable.

0

avanekar02 created 6 years ago

hello

i followed the instruction but the cityId is not passed to the controller, it is always 0

regards Anwar

0

yekalkan created 6 years ago

are other parameters also not passed?

0

avanekar02 created 6 years ago

yes, no other parameters are passed....

0

yekalkan created 6 years ago

Use "CityId" instead of "cityId". Looks like There is a case mismatch.

0

avanekar02 created 6 years ago

Hello i did the following

*** This is my CreateOrEditModal.js part

$('#OpenSchoolLookupTableButton').click(function () {

            var institution = _$institutionInformationForm.serializeFormToObject();

            _schoolLookupTableModal.open({ id: institution.schoolId, displayName: institution.schoolSchoolName, cityId: institution.CityId}, function (data) {
                _$institutionInformationForm.find('input[name=SchoolSchoolName]').val(data.displayName); 
                _$institutionInformationForm.find('input[name=SchoolId]').val(data.id); 
            });
        });
		
		$('#ClearSchoolSchoolNameButton').click(function () {
                _$institutionInformationForm.find('input[name=SchoolSchoolName]').val(''); 
                _$institutionInformationForm.find('input[name=SchoolId]').val(''); 
        });

*** This is my Controller.js part

[AbpMvcAuthorize(AppPermissions.Pages_Institutions_Create, AppPermissions.Pages_Institutions_Edit)]
        public PartialViewResult SchoolLookupTableModal(int? id, string displayName, int cityId)
        {
            var viewModel = new SchoolLookupTableViewModel()
            {
                Id = id,
                CityId = cityId,
                DisplayName = displayName,
                FilterText = ""
            };

            return PartialView("_SchoolLookupTableModal", viewModel);
        }

*** This is my Service part

public async Task<PagedResultDto<SchoolLookupTableDto>> GetAllSchoolForLookupTable(GetAllForLookupTableInput input)
         {
     
             var query = _schoolRepository.GetAll().WhereIf(
                    !string.IsNullOrWhiteSpace(input.Filter),
                   e=> e.SchoolName.ToString().Contains(input.Filter) 
                                      
                );

            var totalCount = await query.CountAsync();

            var schoolList = await query
                .PageBy(input)
                .ToListAsync();

			var lookupTableDtoList = new List<SchoolLookupTableDto>();
			foreach(var school in schoolList){
				lookupTableDtoList.Add(new SchoolLookupTableDto
				{
					Id = school.Id,
					DisplayName = school.SchoolName.ToString()
				});
			}

            return new PagedResultDto<SchoolLookupTableDto>(
                totalCount,
                lookupTableDtoList
            );
         }

*** This is my GetAllForLookupTableInput part

public class GetAllForLookupTableInput : PagedAndSortedResultRequestDto
    {
        public int? CityId { get; set; }
		public string Filter { get; set; }
    }

*** This is my SchoolLookupTableViewModel part added line marked with ****

public class SchoolLookupTableViewModel
    {
        public int? Id { get; set; }

        public int? CityId { get; set; }

        public string DisplayName { get; set; }

        public string FilterText { get; set; }
    }

*** This is my part SchoolLookupTableViewModel

@using NOOR.Sched.Authorization
@using NOOR.Sched.Web.Areas.App.Models.Institutions
@using NOOR.Sched.Web.Areas.App.Startup
@using NOOR.Sched.Web.Areas.App.Models.Common.Modals
@model SchoolLookupTableViewModel

@section Scripts
    {
    <script abp-src="/view-resources/Areas/App/Views/Institutions/_SchoolLookupTableModal.js" asp-append-version="true"></script>
}

@Html.Partial("~/Areas/App/Views/Common/Modals/_ModalHeader.cshtml", new ModalHeaderViewModel(L("PickSchool")))


    
<div class="m-content">
    <div class="m-portlet m-portlet--mobile">
        <div class="m-portlet__body">
            <div class="m-form m-form--label-align-right">
                <div class="row align-items-center m--margin-bottom-10">
                    <div class="col-xl-12">
                        <div class="form-group m-form__group align-items-center">
                            <div class="input-group">
                 ****             <input class="form-control" id="CityIdFilter" value="@Model.CityId" type="text" name="CityId" hidden /> ****
                                <input type="text" id="SchoolTableFilter" class="form-control m-input" placeholder="@L("SearchWithThreeDot")" value="@Model.FilterText">
                                <span class="input-group-btn">
                                    <button id="GetSchoolButton" class="btn btn-primary" type="submit"><i class="flaticon-search-1"></i></button>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row align-items-center">
                <table id="SchoolTable" class="display table table-striped table-bordered table-hover dt-responsive nowrap">
                    <thead>
                        <tr>
                            <th>@L("Actions")</th>
                            <th>@L("SchoolName")</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>


@Html.Partial("~/Areas/App/Views/Common/Modals/_ModalFooterWithClose.cshtml")

0

yekalkan created 6 years ago

To send city Id as filter (lookup table js file)

listAction: {
                ajaxFunction: _institutionsService.getAll{{NP_Foreign_Entity_Name_Here}}ForLookupTable,
                inputFilter: function () {
                    return {
                        filter: $('#SchoolTableFilter').val(),
                        cityId:$('#CityIdFilter').val(), // <---
                    };
                }
            },

To filter the schools by cityId,

var query = _schoolRepository.GetAll()
                   .WhereIf( !string.IsNullOrWhiteSpace(input.Filter),  e=> e.SchoolName.ToString().Contains(input.Filter))
                   .WhereIf( input.CityId != null, e=> e.CityId == input.CityId); // <---

0

avanekar02 created 6 years ago

Thanks

Using RAD Tool Navogation Properties #4978

11 Answer(s)