Filtrar elementos de una tabla a través de una clave ... - ontimize

Filtrar elementos deuna tabla a travésde una clave delformulario

Created: 07/03/2022

Revised: 07/03/2022

Filtrar elementos de una tabla a través de una clave del formulario

Table of ContentsIntroduction ............................................................................................................................................................................... 3Create a new view .................................................................................................................................................................... 3Modify the DAO and the services ........................................................................................................................................... 3Modify customer detail ............................................................................................................................................................. 8


IntroductionIn this exercise, we will modify the detail form of a customer, adding tabs inside the form, and inside those tabswe will show a list of all the accounts related to the customer.

If you are using the Github repository as a backend, skip to Modify customer detail.

Create a new viewOur database does not contain a table that allows us to know, in a single query, the balance of each of theaccounts or the information of the customers and the accounts simultaneously. We will use 2 approaches tosolve this problem, in the first one, we will create a view, and in the second one, we will add the query directlyto the XML of the DAO. In this exercise, we will use the one we define directly in the *.xml file of the DAO. Thedatabase view will be used later.

In our database, we execute the following SQL query

Consulta SQLCREATE VIEW VACCOUNTBALANCE AS

(

SELECT

SUM( MOVEMENTS.MOVEMENT ) AS BALANCE, ACCOUNTS.ENTITYID + ' ' + ACCOUNTS.OFFICEID

+ ' ' + ACCOUNTS.CDID + ' ' + ACCOUNTS.ANID AS ACCOUNTNUMBER,

ACCOUNTS.ACCOUNTID, ACCOUNTS.ENTITYID, ACCOUNTS.OFFICEID, ACCOUNTS.CDID,

ACCOUNTS.ANID, ACCOUNTS.STARTDATE, ACCOUNTS.ENDDATE,

ACCOUNTS.INTERESRATE, ACCOUNTS.ACCOUNTTYP

FROM

PUBLIC.ACCOUNTS

LEFT JOIN PUBLIC.MOVEMENTS ON

ACCOUNTS.ACCOUNTID = MOVEMENTS.ACCOUNTID

GROUP BY

ACCOUNTS.ACCOUNTID

)

Modify the DAO and the servicesTo query this view, we will modify two DAOs, which will allow us to perform the previously mentioned queries.Therefore, we will modify the interfaces, the DAOs and the services.

• bankmanager-common# src

# main# java

# com# imatia

# jee# bankmanager

# common# base

IBranchService.javapackage

com.imatia.jee.bankmanager.common.base.services;

...

public interface IBranchService {

...

// ---- ACCOUNT BALANCE ----

public EntityResult

accountBalanceQuery(Map<String, Object>


# constants# entities

# Role.java# RoleServerPermission.java# ServerPermission.java# Setting.java# Test.java# User.java# UserRole.java

# ApplicationConstants.java# services

# IAdministrationService.java# IBranchService.java# ICustomerService.java# IEmployeeService.java# IMovementService.java# IUserAndRoleService.java.java

# exception# ApplicationException.java

# pom.xml

keysValues, List<String> attributes) throws

OntimizeJEERuntimeException;

public EntityResult

accountBalanceUpdate(Map<String, Object>

attributes, Map<String, Object> keyValues)

throws OntimizeJEERuntimeException;

public EntityResult

accountBalanceDelete(Map<String,

Object> keyValues) throws


}

ICustomerService.javapackage

com.imatia.jee.bankmanager.common.base.services;

...

public interface ICustomerService {

...

// ---- VCUSTOMERACCOUNT ----

public EntityResult

vCustomerAccountQuery(Map<String, Object>



public EntityResult

vCustomerAccountDelete(Map<String,

Object> keyValues) throws


}

• bankmanager-server# src

# main# db

# templateDB.properties# templateDB.script# templateDB.txt

# java# com

# imatia# jee

# bankmanager# server

# dao# setup

# OCDatabaseBundleDao.java# OCDatabaseBundleValueDao.java# OCLoginProfilesDao.java# OCRequestStatisticsDao.java# OCSettingsDao.java# OCUserPreferenceDao.java

# AccountDao.java# BranchDao.java# CustomerAccountDao.java# CustomerDao.java

AccountDao.xml<?xml version="1.0" encoding="UTF-8"?>

<JdbcEntitySetup xmlns="http://

www.ontimize.com/schema/jdbc"

xmlns:xsi="http://www.w3.org/2001/

XMLSchema-instance"

xsi:schemaLocation="http://

www.ontimize.com/schema/jdbc http://

www.ontimize.com/schema/jdbc/ontimize-jdbc-

dao.xsd"

table="ACCOUNTS"

datasource="mainDataSource"

sqlhandler="sqlStatementHandler">

<DeleteKeys>

<Column>ACCOUNTID</Column>

</DeleteKeys>

<UpdateKeys>

<Column>ACCOUNTID</Column>

</UpdateKeys>

<GeneratedKey>ACCOUNTID</GeneratedKey>

<Queries>

<Query id="ACCOUNTBALANCE">

<Sentence>

<![CDATA[

SELECT


# CustomerTypeDao.java# EmployeeDao.java# EmployeeTypeDao.java# MovementDao.java# MovementTypeDao.java

# services# rest

# AdministrationRestController.java# BranchRestController.java# CustomerRestController.java# EmployeeRestController.java# MovementRestController.java# UsersRestController.java

# AdministrationServiceImpl.java# BranchService.java# CustomerService.java# EmployeeService.java# MovementService.java# UserAndRoleServiceImpl.java

# tools# SettingsHelper.java

# RoleDao.java# ServerRoleDao.java# UserDao.java# UserRoleDao.java

# resources# base-dao

# setup# OCDatabaseBundleDao.xml# OCDatabaseBundleValueDao.xml# OCLoginProfilesDao.xml# OCRequestStatisticsDao.xml# OCSettingsDao.xml# OCUserPreferenceDao.xml

# AccountDao.xml# BranchDao.xml# CustomerAccountDao.xml# CustomerDao.xml# CustomerTypeDao.xml# EmployeeDao.xml# EmployeeTypeDao.xml# MovementDao.xml# MovementTypeDao.xml# placeholders.properties# RoleDao.xml# ServerRoleDao.xml# UserDao.xml# UserRoleDao.xml

# logback.xml# ontimize-

dberrorstranslator.properties# spring-config-

base.properties# spring-config-base.xml# spring-config-hessian.xml# spring-config-jackson.xml

#COLUMNS#

FROM

VACCOUNTBALANCE

#WHERE#

#ORDER#

]]>

</Sentence>

</Query>

</Queries>

</JdbcEntitySetup>

CustomerAccountDao.xml<?xml version="1.0" encoding="UTF-8"?>

<JdbcEntitySetup xmlns="http://

www.ontimize.com/schema/jdbc"

xmlns:xsi="http://www.w3.org/2001/

XMLSchema-instance"

xsi:schemaLocation="http://

www.ontimize.com/schema/jdbc http://

www.ontimize.com/schema/jdbc/ontimize-jdbc-

dao.xsd"

table="CUSTOMERACCOUNTS"

datasource="mainDataSource"

sqlhandler="sqlStatementHandler">

<DeleteKeys>

<Column>CUSTOMERACCOUNTID</Column>

</DeleteKeys>

<UpdateKeys>

<Column>CUSTOMERACCOUNTID</Column>

</UpdateKeys>

<GeneratedKey>CUSTOMERACCOUNTID</

GeneratedKey>

<Queries>

<Query id="CUSTOMERACCOUNT">

<AmbiguousColumns>

<AmbiguousColumn

name="CUSTOMERID" prefix="CA"

databaseName="CUSTOMERID" />

<AmbiguousColumn

name="ACCOUNTID" prefix="CA"

databaseName="ACCOUNTID" />

</AmbiguousColumns>

<Sentence>

<![CDATA[

SELECT

#COLUMNS#

FROM

${mainschema}.CUSTOMERACCOUNTS

AS CA

INNER JOIN

${mainschema}.CUSTOMERS AS CU ON

CA.CUSTOMERID = CU.CUSTOMERID

INNER JOIN

${mainschema}.ACCOUNTS AS A ON CA.ACCOUNTID =

A.ACCOUNTID

#WHERE#


# spring-config-ontimize.xml# spring-config-security.xml

# pom.xml

#ORDER#

]]>

</Sentence>

</Query>

</Queries>

</JdbcEntitySetup>

AccountDao.javapackage

com.imatia.jee.bankmanager.server.dao;

...

@Repository(value = "AccountDao")

@Lazy

@ConfigurationFile(configurationFile

= "base-dao/AccountDao.xml",

configurationFilePlaceholder = "base-dao/

placeholders.properties")

public class AccountDao extends

OntimizeJdbcDaoSupport {

...

public static final String

QUERY_VACCOUNTBALANCE = "ACCOUNTBALANCE";

public AccountDao() {

super();

}

...

}

CustomerAccountDao.javapackage

com.imatia.jee.bankmanager.server.dao;

...

@Repository(value = "CustomerAccountDao")

@Lazy

@ConfigurationFile(configurationFile

= "base-dao/CustomerAccountDao.xml",

configurationFilePlaceholder = "base-dao/

placeholders.properties")

public class CustomerAccountDao extends

OntimizeJdbcDaoSupport {

public static final String

QUERY_VCUSTOMERACCOUNT = "CUSTOMERACCOUNT";

public CustomerAccountDao() {

super();

}

}

BranchService.javapackage

com.imatia.jee.bankmanager.server.services;

...

@Service("BranchService")

public class BranchService implements

IBranchService{

...


// ---- ACCOUNTS BALANCE ----

@Override

public EntityResult

accountBalanceQuery(Map<String, Object>


OntimizeJEERuntimeException {

return

this.daoHelper.query(this.accountDao,

keysValues, attributes,

AccountDao.QUERY_VACCOUNTBALANCE);

}

@Override

public EntityResult

accountBalanceUpdate(Map<String, Object>

attributes, Map<String, Object> keyValues)

throws OntimizeJEERuntimeException {

return this.accountUpdate(attributes,

keyValues);

}

@Override

public EntityResult

accountBalanceDelete(Map<String, Object>

keyValues) throws OntimizeJEERuntimeException

{

return this.accountDelete(keyValues);

}

}

CustomerService.javapackage

com.imatia.jee.bankmanager.server.services;

...

@Service("CustomerService")

public class CustomerService implements

ICustomerService {

...

// ---- CUSTOMER ACCOUNT BALANCE ----

@Override

public EntityResult

vCustomerAccountQuery(Map<String, Object>


OntimizeJEERuntimeException {

return

this.daoHelper.query(this.customerAccountDao,

keysValues, attributes,

CustomerAccountDao.QUERY_VCUSTOMERACCOUNT);

}

@Override

public EntityResult

vCustomerAccountDelete(Map<String, Object>

keyValues) throws OntimizeJEERuntimeException

{

return

this.daoHelper.delete(this.customerAccountDao,

keyValues);


}

}

Modify customer detail

• bankmanager-web# e2e

# src# app.e2e-spec.ts# app.po.ts

# protractor.conf.js# tsconfig.json

# src# app

# login# login-routing.module.ts# login.component.html# login.component.scss# login.component.ts# login.module.ts# login.theme.scss

# main# accounts

# accounts-home# account-

number-render

customers.module.tsimport { NgModule } from '@angular/core';

import { CommonModule } from '@angular/

common';

import { OntimizeWebModule } from 'ontimize-

web-ngx';

import { CustomersRoutingModule } from './

customers-routing.module';

import { CustomersHomeComponent } from './

customers-home/customers-home.component';

import { CustomersDetailComponent } from './

customers-detail/customers-detail.component';

import { CustomersNewComponent } from './

customers-new/customers-new.component';

import { SharedModule } from 'src/app/shared/

shared.module';

@NgModule({

declarations: [CustomersHomeComponent,

CustomersDetailComponent,

CustomersNewComponent],

imports: [

CommonModule,

SharedModule,


# account-number-render.component.css

# account-number-render.component.html

# account-number-render.component.ts

# accounts-home.component.css

# accounts-home.component.html

# accounts-home.component.ts

# accounts-routing.module.ts

# accounts.module.ts# branches

# branches-home# branches-

home.component.css# branches-

home.component.html# branches-

home.component.ts# branches-

routing.module.ts# branches.module.ts

# customers# customers-detail

# customers-detail.component.css

# customers-detail.component.html

# customers-detail.component.ts

# customers-home# customers-

home.component.css# customers-

home.component.html# customers-

home.component.ts# customers-new

# customers-new.component.css

# customers-new.component.html

# customers-new.component.ts

# customers-routing.module.ts

# customers.module.ts# employees

# employees-detail# employees-

detail.component.css

OntimizeWebModule,

CustomersRoutingModule

]

})

export class CustomersModule { }

customers-detail.component.html<o-form service="customers" entity="customer"

keys="CUSTOMERID" header-actions="R;I;U;D"

show-header-navigation="no">

<o-text-input attr="CUSTOMERID" sql-

type="INTEGER" enabled="no"></o-text-input>

<o-row>

<o-column>

<o-image id="CUSTOMER_PHOTO"

attr="PHOTO" empty-image="assets/images/no-

image.png" sql-type="OTHER"></o-image>

</o-column>

<mat-tab-group fxFlex>

<mat-tab

label="{{ 'CUSTOMER_PERSONAL_INFORMATION' |

oTranslate }}">

<o-column fxFlex layout-padding>

<o-row>

<o-text-input class="input-

padding" attr="NAME" fxFlex="40"

required="yes"></o-text-input>

<o-text-input class="input-

padding" attr="SURNAME" fxFlex="40"

required="yes"></o-text-input>

<o-date-input attr="STARTDATE"

fxFlex="20"></o-date-input>

</o-row>

<o-row>

<o-nif-input attr="ID"

class="input-padding" fxFlex="40"

required="yes"></o-nif-input>

<o-integer-input attr="PHONE"

class="input-padding" step="5" grouping="no"

fxFlex="40"></o-integer-input>

<o-list-picker

attr="CUSTOMERTYPEID" class="input-padding"

fxFlex="20" service="customers"

entity="customerType"

keys="CUSTOMERTYPEID"

columns="CUSTOMERTYPEID;DESCRIPTION"

visible-columns="DESCRIPTION"

value-column="CUSTOMERTYPEID"></o-list-

picker>

</o-row>

<o-row>

<o-email-input attr="EMAIL"

fxFlex></o-email-input>

</o-row>

<o-row>


# employees-detail.component.html

# employees-detail.component.ts

# employees-home# employees-

home.component.css# employees-

home.component.html# employees-

home.component.ts# employees-

routing.module.ts# employees.module.ts

# home# home-

routing.module.ts# home.component.html# home.component.scss# home.component.ts# home.module.ts

# main-routing.module.ts# main.component.html# main.component.scss# main.component.ts# main.module.ts

# shared# app.menu.config.ts# app.services.config.ts# shared.module.ts

# app-routing.module.ts# app.component.html# app.component.scss# app.component.ts# app.config.ts# app.module.ts

# assets# css

# app.scss# loader.css

# i18n# en.json# es.json

# icons# ontimize128.png# ontimize16.png# ontimize256.png# ontimize32.png# ontimize48.png# ontimize64.png# ontimize72.png# ontimize96.png

# images# login_bg.png

<o-text-input attr="ADDRESS"

fxFlex></o-text-input>

</o-row>

<o-row>

<o-real-input attr="LONGITUDE"

decimal-separator="," max-decimal-digits="10"

min-decimal-digits="0" class="input-padding"

fxFlex="50"></o-real-input>

<o-real-input attr="LATITUDE"

decimal-separator="," max-decimal-digits="10"

min-decimal-digits="0" fxFlex="50"></o-real-

input>

</o-row>

<o-row>

<o-textarea-input attr="COMMENTS"

fxFlex></o-textarea-input>

</o-row>

</o-column>

</mat-tab>

<mat-tab label="{{ 'ACCOUNTS' |

oTranslate }}">

<o-table fxFlex attr="accountsTable"

service="customers" entity="vCustomerAccount"

keys="ACCOUNTID" insert-button="no"

refresh-button="no" detail-

mode="none" delete-button="no" query-

rows="20" parent-keys="CUSTOMERID"

columns="CUSTOMERID;ACCOUNTID;ENTITYID;OFFICEID;CDID;ANID;STARTDATE;ENDDATE;INTERESRATE;ACCOUNTTYP"

visible-

columns="ACCOUNTNUMBER;STARTDATE;ENDDATE;INTERESRATE;INTERESRATE_MONTHLY;ACCOUNTTYP"

>

<o-table-column attr="STARTDATE"

title="STARTDATE" type="date" format="LL"></

o-table-column>

<o-table-column attr="ENDDATE"

title="ENDDATE" type="date" format="LL"></o-

table-column>

<o-table-column attr="INTERESRATE"

title="INTERESRATE" type="percentage"

width="150px" decimal-separator=","></o-

table-column>

<o-table-column attr="ACCOUNTNUMBER"

title="ACCOUNTNUMBER" class="o-table-column-

centered">

<app-account-number-render></app-

account-number-render>

</o-table-column>

<o-table-column-calculated

attr="INTERESRATE_MONTHLY"

title="INTERESRATE_MONTHLY"

[operation-

function]="intRateMonthly" type="percentage"

decimal-separator="," class="o-

table-column-centered">

</o-table-column-calculated>

</o-table>


# no-image.png# ontimize.png# ontimize_web_log.png# sidenav-closed.png# sidenav-opened.png# user_profile.png

# js# domchange.js# keyboard.js

# .gitkeep# environments

# environment.prod.ts# environment.ts

# favicon.ico# index.html# main.ts# manifest.webmanifest# polyfills.ts# styles.scss# test.ts

# .editorconfig# .gitignore# .npmrc# angular.json# browserslist# karma.conf.js# ngsw-config.json# package.json# README.md# tsconfig.app.json# tsconfig.json# tsconfig.spec.json# tslint.json

</mat-tab>

</mat-tab-group>

</o-row>

</o-form>

To add tabs, we must declare a container <mat-tab-group> (more information in the following documentation)and add tags <mat-tab> for each tab. The filtering ofthe tables is done by adding the parameter parent-keys="CUSTOMERID" being this column a column present inthe parent form.

We add the following configuration to the customer-detail.component.ts file

customer-detail.component.tsimport { Component, OnInit } from '@angular/

core';

import { intRateMonthlyFunction } from

'../../../shared/shared.module';

@Component({

selector: 'app-customers-detail',

templateUrl: './customers-

detail.component.html',

styleUrls: ['./customers-

detail.component.css']

})

export class CustomersDetailComponent

implements OnInit {

public intRateMonthly =

intRateMonthlyFunction;

constructor() { }

ngOnInit() {

}

}

https://material.angular.io/components/tabs/overview


<< Previoustutorial

Index Nexttutorial >>

http://www.ontimize.com/xwiki/bin/view/Ontimize+Web+Training/Creating+a+column+renderer+and+a+calculated+column

http://www.ontimize.com/xwiki/bin/view/Ontimize+Web+Training/Creating+a+column+renderer+and+a+calculated+column

http://www.ontimize.com/xwiki/bin/view/Ontimize+Web+Training/

http://www.ontimize.com/xwiki/bin/view/Ontimize+Web+Training/Add+details+to+branches

http://www.ontimize.com/xwiki/bin/view/Ontimize+Web+Training/Add+details+to+branches

Filtrar elementos de una tabla a través de una clave ... - ontimize

Documents

Transcript of Filtrar elementos de una tabla a través de una clave ... - ontimize