Activities of "paul.harriman"

• ABP Framework version: v4.3.3

• UI type: Angular

• DB provider: EF Core

• Tiered (MVC) or Identity Server Separated (Angular): no

• Exception message and stack trace:

• Steps to reproduce the issue:"

• i created a new project using the cmd: abp new Angular.TypeAhead -t app-pro -u angular --mobile none --database-provider ef -csf

• in suite I create 2 entities Author and Book

• i create a navigational property from Book to Author

• I run the project add an Author and then try and add a book

• I can see items are brought in Chrome DevTools back when I type into the authors fields, but no choices are displayed

• If I change the typeahead to a dropdown in suite and then go back into books, i can select the author and save the item.

• ABP Framework version: v4.3.0
• UI type: Angular
• DB provider: EF Core
• Tiered (MVC) or Identity Server Separated (Angular): yes / no
• Exception message and stack trace:
• Steps to reproduce the issue:

i have a ngbNav, with 7 tabs. i click save without some fields entered. the fields are required. i want the user to see what errors are. i change tabs after clicking submit and get the error. the error breaks the modal, i cannot cancel out of the moda. after googling it appears the error is becuase the validation component is being injected dynamically. short of disabling the save button if there are errors, i don't know how to prevent the issue happening.

It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook?\n at throwErrorIfNoChangesMode (http://localhost:4200/vendor.js:11512:11)\n at bindingUpdated (http://localhost:4200/vendor.js:17623:17)\n at Module.ɵɵproperty (http://localhost:4200/vendor.js:19438:9)\n at ValidationErrorComponent_Template (http://localhost:4200/vendor.js:91900:65)\n at executeTemplate (http://localhost:4200/vendor.js:14286:9)\n at refreshView (http://localhost:4200/vendor.js:14155:13)\n at refreshComponent (http://localhost:4200/vendor.js:15321:13)\n at refreshChildComponents (http://localhost:4200/vendor.js:13952:9)\n at refreshView (http://localhost:4200/vendor.js:14205:13)\n at refreshEmbeddedViews (http://localhost:4200/vendor.js:15275:17)

• ABP Framework version: v4.2.2
• UI type: Angular
• DB provider: EF Core
• Tiered (MVC) or Identity Server Separated (Angular): yes / no
• Exception message and stack trace:
• Steps to reproduce the issue:

is there any documentation on how to use the control 'abp-lookup-typeahead' in angular? This what i tried so far. I see another parameter called filter that might be needed, but not sure how to use it

<abp-lookup-typeahead 
    [getFn]="settings"
    displayNameProp="displayName"
    lookupFilterProp="displayName"
    formControlName="category">
</abp-lookup-typeahead>

Thanks for the response. I will give this a try when 4.3 is released and we upgrade our solutions. It looks like the code which I got caught in has been changed.

fromEvent(window, 'beforeunload')
  .pipe(takeUntil(this.destroy$))
  .subscribe(event => {
    event.preventDefault();
    if (this.isFormDirty && !this.suppressUnsavedChangesWarning) {
      event.returnValue = true;

** } else { delete event.returnValue; }** });

• ABP Framework version: v4.2.0
• UI type: Angular
• DB provider: EF Core
• Tiered (MVC) or Identity Server Separated (Angular): yes / no
• Exception message and stack trace:
• Steps to reproduce the issue:

We are using a npm package that determines if the user has been idle for x minutes. The package works ok when the user is not in a modal. If the user is in a modal, the user gets the dialog below after calling authService.logout

To try and get around this, I added some code to remove all .ng-dirty before calling authService.logout, but I am still presented with the dialog from the window:beforeunload. I still want the user to be presented with a dialog if they make changes to a form and then forget to save the form, so I do not want to shut off the "are you sure you want to leave" entirely, just when they have been idle for more than x minutes. How do I logout the user and bring them back to the login screen without the dialogs?

Mehmet, is there any documentation that talks about being able to disable the dynamic loading of css? I assume this will stop all the Style1-6 from being loaded? Which version of ABP is this enhancement in?

This solution still have problems, when you have both lepton theme source code and account source code, you cannot change the style of the theme, (you still read the value from node module)

Hi Paul

1. The theme-lepton library gets style files from node_modules/@volo/abp.ng.theme.lepton/dist folder. You should overwrite the CSS files after building. So you can use a command to achieve this like the following:

yarn ng build theme-lepton && cp -r packages/theme-lepton/dist dist/theme-lepton  

Then check the styles in dist/theme-lepton/dist/styles folder. You will see your edited styles there.

2. You should add a variable named appInfo. This custom footer component works:

import { EnvironmentService } from '@abp/ng.core';  
import { Component } from '@angular/core';  
  
@Component({  
  selector: 'app-footer',  
  template: `  
    <footer class="lp-footer">  
      <div class="d-flex">  
        <div class="mr-auto">  
          <span>2019 - {{ currentYear }} © {{ appInfo.name }}</span  

> > ><br />

    </div>  
  </div>  
</footer>  

`,
styleUrls: ['./footer.component.scss'],
})
export class FooterComponent {
currentYear = new Date().getFullYear();

get appInfo() {
return this.environment.getEnvironment().application;
}

constructor(private environment: EnvironmentService) {}
}

  
3. Here is the `tsconfig.prod.json`:   
  

{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"typeRoots": ["node_modules/@types"],
"lib": ["es2018", "dom"],
"types": ["jest"]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}

  
`tsconfig.json`:  
  

{
"extends": "./tsconfig.prod.json",
"compilerOptions": {
"paths": {
"@volo/abp.commercial.ng.ui": ["packages/commercial-ui/src/public-api.ts"],
"@volo/abp.ng.account": ["packages/account/src/public-api.ts"],
"@volo/abp.ng.account/config": ["packages/account/config/src/public-api.ts"],
"@volo/abp.ng.account/admin": ["packages/account/admin/src/public-api.ts"],
"@volo/abp.ng.audit-logging": ["packages/audit-logging/src/public-api.ts"],
"@volo/abp.ng.audit-logging/config": ["packages/audit-logging/config/src/public-api.ts"],
"@volo/abp.ng.identity-server": ["packages/identity-server/src/public-api.ts"],
"@volo/abp.ng.identity-server/config": ["packages/identity-server/config/src/public-api.ts"],
"@volo/abp.ng.identity": ["packages/identity/src/public-api.ts"],
"@volo/abp.ng.identity/config": ["packages/identity/config/src/public-api.ts"],
"@volo/abp.ng.saas": ["packages/saas/src/public-api.ts"],
"@volo/abp.ng.saas/config": ["packages/saas/config/src/public-api.ts"],
"@volo/abp.ng.theme.lepton": ["packages/theme-lepton/src/public-api.ts"],
"@volo/abp.ng.theme.lepton/": ["packages/theme-lepton/src/lib/"],
"@volo/abp.ng.language-management": ["packages/language-management/src/public-api.ts"],
"@volo/abp.ng.language-management/config": [
"packages/language-management/config/src/public-api.ts"
],
"@volo/abp.ng.language-management/locale": ["packages/language-management/locale/src/public-api.ts"],
"@volo/abp.ng.text-template-management": [
"packages/text-template-management/src/public-api.ts"
],
"@volo/abp.ng.text-template-management/config": [
"packages/text-template-management/config/src/public-api.ts"
]
}
}
}

Yes we are already doing what u r describing. Every new version of ABP we repeat the procedure again, so not an ideal solution. It would make things even easier if ABP would use the vars they create (perhaps they do this b/c of older browsers). Another method which we use is i load the style being used as a class in the body. then in style.scss i can create styles like

.Style1 .lp-footer { // these styles only affect this style and not globally. this is being done so i can use Style1 as our specific brand. this allows // me to change the background color of the footer. We still run into issues where ABP uses styles that are !important that I am // not able to override. an example of this is with the pick lists and errors, like the user submitted and didn't enter the data // required (we do not disable the submit button if there are form errors, b/c we feel it's a bad user experience if the user cannot // see any visual of what is wrong with the form).
}

As for footer, i was able to replace the footer component with a custom footer component.

Check the docs before asking a question: https://docs.abp.io/en/commercial/latest/ Check the samples, to see the basic tasks: https://docs.abp.io/en/commercial/latest/samples/index The exact solution to your question may have been answered before, please use the search on the homepage.

• ABP Framework version: v4.2.0
• UI type: Angular
• DB provider: EF Core
• Tiered (MVC) or Identity Server Separated (Angular): yes / no
• Exception message and stack trace:
• Steps to reproduce the issue:

1. create a modal that will scroll
2. add the control abp-lookup-input
3. show the modal
4. modal will scroll fine.
5. click pick to show choices, then either pick or cancel
6. you are brought back to the modal, you cannot scroll the modal. the page behind the modal does scroll
7. with dev tools, notice on the html > body the class modal-open is missing, add it back with dev-tools and modal will scroll again.
8. so the abp-lookup-input is removing the modal-open class prematurely.
9. follow the advice for https://support.abp.io/QA/Questions/771/Scroll-up-and-down-get-Freeze-after-select-the-data-in-pick-up-view, add modalClass="modal-dialog-scrollable" to abp-modal control. you get a modal that has 2 scrolls. repeat steps 5-6 and you get clipping on the top or bottom of the modal

double scroll, scroll on inside, visible, and if you look very closely on the right hand edge you can see a very thin scrollbar

clipping - header is un-reachable

Which r u looking for? Solution 2?

I', going with the first solution. I have to do some ui repair as moving the footer creates some visual issues. the send solution did not work for me.