Salient Soft

Having got CouchDB working under Windows 11 with the legacy places data as per this post here, I then wanted to run the legacy places angular and ionic apps if possible, just for reference and to consider my options going forward.

The angular app was in v6.1.7 which I did not want to revisit and upgrade. Similarly, the ionic app was an earlier legacy version which could be tricky to reinstate under windows 11.

However, I did have already built distributions for both apps, and both were able to run successfully under Windows 11 via http-server without having to install anything else. For angular I used the existing build under the dist subdirectory, and for Ionic I the build is under the www subdirectory. Note that whilst the index.html for the Ionic version did specify that cordova.js was required, and caused a load error in the web console, this was not an issue when using from a browser as it was not needed.

I did want to be able to run them remotely as well, from other PCs and mobiles. I tried installing the distributions under Zen hosting, with remote access to CouchDB running on the local PC. However, this would not run under HTTPS as it meant having mixed content – the access to CouchDB was not HTTPS and I did not want to go to the trouble of installing a self signed cert locally to get it all to work – this excercise was not worth the effort. I could not find an easy way under Zen cpanel of allowing just this app to be HTTP only, with everything else defaulting to HTTPS. If I turned off forced defaulting to HTTPS in cpanel, the app worked fine under HTTP but other access was also allowed to be HTTP only which I did not like, so I dumped the idea of hosting under Zen directly. I did hit a spate of nasty looking cpanel issues when I did this and for a while thought I had broken the domain/ssl/cpanel access entirely whilst messing with domain/alias/redirect settings in cpanel, but in the end it all worked fine again.

I therefore continued to run/host locally via http-server. I did want to be able to potentially remote boot my local PC via Fritz and access the app from anywhere, which would mean auto running the http-servers at boot time. The easiest way to do this turned out to be to use the windows task scheduler, which unlike services can run batch files without any other tools such as srvany which is commonly used to do this for services. Whilst the scheduler is often used with time based triggers, it is perfectly possible to specify a trigger as ‘run at boot time’. I also specified that it should run without any user logged in, therefore with local access only/no user authentication. This worked fine and I could boot the PC and then immediately access the places apps from a mobile without logging in.

Another trick needed was to add some remote port sharing in the Fritz box for both apps, via my static IP addresses. When doing this I also had to add a port share for the CouchDB access, otherwise CouchDB also complained about mixing private CORS stuff with the remote access. Once I did this, and changed the app config to use the remote URL for CouchDB access, it all worked fine. Fortunately, I could also continue to access the same apps locally on the hosting PC even though they were still using the remote URL for CouchDB access – it all worked fine.

I then set up redirects under cpanel from Zen to make the app access look a bit more friendly with salient soft urls, and this all ran fine.

Comments Off on Running Legacy Places Guide under Windows 11 for reference

In V6 or PrimeNG, you could enable drag drop reordering on the picklist and still scroll on a touch device, e.g. on a mobile phone. This was handled nicely by using a click and hold to select an item for drag drop, and a swipe to do scrolling.

In V13 this is now broken – touching on an item instantly selects it for dragging, without using the previous click and hold, so that it is not possible to scroll by swiping the source or target list any more. I have confirmed that it used to work on my old V6 microapps version which used a standard PrimeNG V6.1.3 picklist, and also have checked the current PrimeNG showcase online – the current showcase is broken in exactly the same way when trying to scroll via touch on mobile. Whilst scroll bars are present on the RHS of the list, they are very small for Mobile. I did try to enlarge the scroll bars for mobile, using some webkit specific styling, but this proved problematic as it is not fully supported for Firefox – they cannot be resized on firefox. Even when I did get it working, selecting the scroll thumbtrack for mobile proved intermittent and tricky – not a nice interaction at all.

My simple workaround for this is to disabled dragdrop for the picklist for a touch device by setting dragdrop=false (i.e. dragdrop=!touchDevice). I already have a config property in the fabric to detect a touch device, and have replicated that as a global config parameter which is visible to all the microapps. The picklist can then use this. This is actually better than it sounds – whilst you cannot reorder items within a list any more, you can move between source and target using the buttons, and drag/drop is tricky on a mobile anyway as the source and target lists appear one above the other with typically only one of them visible so dragging between them is tricky as again scrolling is involved.

For reference, changing the scrollbar styling via the webkit styles is documented here and here.

Applying the webkit styles is very picky per the posts above – spacing etc. matters – there must not be a space between the element/class name and for example ::-webkit-scrollbar or it won’t work. In the end this SCSS styling worked for me, and fortunately I was able to get it working with a classname rather than just e.g. a ul element which is the one I wanted to hit:

.p-component.p-picklist {
  .p-picklist-header {
    background: $ss-widget-header;
    color: $ss-widget-header-text;
  }

  .p-picklist-list {
    &::-webkit-scrollbar {
      width: 50px;
      height: 50px;
    }
    &::-webkit-scrollbar-thumb {
      width: 50px;
      height: 50px;
      background: #a8a8a8;
      border-radius: 4px;
    }

As above I dumped this approach anyway, as even with a very large scrollbar and thumb track, it was difficult to consistently scroll on mobile, and anyway  the source and target for drag/drop were not both in view simultaneously anyway.

Comments Off on PrimeNG V13 Picklist Component does not scroll on touch device when drag drop enabled

Unfortunately with V13 of PrimeNG and its supported chart.js versions, the axes do not get removed when switching  chart types and bleed onto the next chart. It appears that the chart must be destroyed and recreated when changing types – a refresh or reinit call are not enough, and explicit angular change detector calls don’t work either, see here.

Therefore as just having a single permanent chart and changing its properties fails as above, I’m explicitly making the chart data undefined to ensure that the *ngIf in the template destroys and recreates the chart. This works fine.

This appears to be a new bug.

Comments Off on PrimeNG V13 Chart Axes Bleedover Issue

I hit an issue where a PrimeNG panel, used in a Dataview component in grid mode, was not centering its header text after upgrading to the latest V13.

The issue was weird – the header container div was set to flex by the Panel component itself, but when I used justify-content: center to center the text in a dependent span, it remained left justified despite all my efforts to check for other style issues, force styling with !important etc.

When I checked the latest PrimeNG showcase online, I noticed that this also has the same problem. I noted that other containers/elements in the Panel such as the content container div did not use flex, so I felt happy to force the styling for the container back to block and use text-align: center instead. I did this locally in the affected microapp component rather than the overall theme, but might rethink this later and standardize if I hit the issue again.

This solved the problem and the text centered correctly.

Comments Off on PrimeNG V13 Panel Header Text Not Centering

I have already noted here and here that Prime have removed themeroller support in favour of a paid for theme designer tool, and more significantly, have removed there actual new theme SCSS api from open source, so this is paid for as well, preventing you from using their new API with manually designed themes.

My solution is to pick one of the free themes which is nearest to the look I want, and then rebadge its compiled css (which you do get a copy of) as SCSS, and then customise that.

Obviously the raw CSS has a lot of duplication compared to the original SCSS. My original strategy was to copy raw rules to the end of the file in a new section, and modify them as required to override the original rules, by making more specific as required (e.g. by adding a p.component class). This would then allow them to be matched to their originals, which sounded attractive from a correlation/derivation point of view.

In the end I gave up on this idea. The section with the modified rules was getting messy with all the duplication, and was harder to make sense of. I therefore adopted a new strategy which was to copy all the rules and modify as required, and then do some fairly straightforward merging of them into single SCSS rules. This dramatically simplified the modifications and made them clearer to read, so I have stuck with this idea going forwards.

There have been oddball cases where I have taken a different approach, and actually edited the original generated css directly. For example, there is a media query to switch the menu bar into hamburger only mode at a certain fixed viewport width. I did not want this, so as the media query covered a lengthy section of css, I removed the media query directly, replacing it with a class based rule so I could still switch in hamburger mode dynamically when I wanted. This still encapsulated the same original css, and seemed the tidiest approach in this case.

Comments Off on PrimeNG Theming Strategy

Firstly I installed the latest current release of node under NVM. This was 18.2.0, so this was installed simply using “nvm install 18.2.0”. This is only needed once as it is global for any project/folder running under NVM.

I then followed the upgrade procedure for angular here. Upgrading is well documented and supported – you can pick any pair of versions along with some details of your app complexity/what you use, and get specific update help here.

I then updated the various dependent components. I needed to add the switches “–force –allow-dirty”. “–force” was to force the updates through even when there were dependency version issues – this would all come out in the wash when finished, it was just a question of the dependency update order which triggered this. “–allow-dirty” allowed the update to proceed even when there were pending git commits present. I am unsure why the process is so picky about this – I did not intend to commit after every individual update command, and did not see why there should be a warning about it. The following updates were done:

npm install primeng@13.4.1 –force –allow-dirty
npm install primeicons@5.0.0 –force –allow-dirty
npm install primeng@13.4.1 –force –allow-dirty
npm install primeflex@3.2.0 –force –allow-dirty
npm install jasmine-core@4.1.1 –force –allow-dirty
npm install @angular/cdk@13.3.7 –force –allow-dirty

for my chart microapp which uses the PrimeNG chart component and therefore chart.js, I had to upgrade chart.js to the latest 3.8.0 or builds won’t work:

npm install chart.js@3.8.0 –force –allow-dirty

I also with noted with charts that the styling changed – charts were too big for browser window and needed unwanted scrolling, so would need to look into styling issues on this. Also the growl when you click on chart points etc. has gone.
This is replaced with a hover “growl” next to where you hover over a point. I confirmed the behaviour change with the primeng showcase.

I also noted that @angular/cdk  slipped the net orignally and needed doing (even adding again) manually as listed above.

After all the updates as above I was able to build and run in the usual way.

Comments Off on Upgrading Angular & PrimeNG Microapps from V11 to V13

… as above – I received the following error in relation to a PrimeNG p-dropdown used with a p-dataview:

Error: The target entry-point “primeng/dataview” has missing dependencies:
– @angular/cdk/scrolling

This issue is covered here.
I haven’t seen this before, but installing @angular/cdk resolved the build failure. This appears to be a transitive dependency issue which should have been resolved by my dependencies on PrimeNG.

Comments Off on PrimeNG 11/Angular 11 build fails due to missing @angular/cdk dependency

My initial attempt on this was to use static positioning when the title bar was unpinned (e.g. scrollable), and fixed positioning when the bar was pinned.

When using fixed positioning as above, the title bar is no longer in the normal flow so the rest of the content (in my case, encapsulated in a main container div) will sit underneath the title bar. I therefore used a top margin when pinned to prevent the top of the content being hidden. Some issues arose with this as follows:

1/ It was necessary therefore to add an additional margin to the main container to avoid occluding the content under the title bar, which meant exactly knowing its height. In addition, to allow a gap between the title bar and the content when pinned, I added a border to the title bar of the same colour as the page background, in effect to act as a kind of margin. This worked fine.

1/ My title bar was floated, so it automatically resized to fit its content. this meant that the margin allowance on the main content div would have to vary dynamically on resize.

2/ One way around this was to set media query breakpoints to trigger on the resize, and to set a fixed height for the title bar rather than floating it, and setting the margin on the content to match in each media query. In addition to this, I implemented a flexbox solution where the container was sized and the content centered within it. I was not so keen on this as it lost the ability to dynamically resize the title bar container as needed by the content resizing, and might cause problems if the layout/text changed in the title bar for example.

3/ Another way was to use a resize event and change the size of the margin on the content programmatically, using an rxjs debounced resize event. This worked pretty well, but I needed to switch the content margin on and off when the title bar was pinned/unpinned. This should have worked ok, but I noticed some slight visual movements in some page elements on pinning change, even though I could not see any style or layout changes in the browser inspector. This was annoying.

4/ I then tried using absolute positioning of the title bar when unpinned, and fixed positioning when pinned. This relied on using the same programmatic margin on the content for both, and in fact simplified the code, as I did not have to switch off the programmatic margin change when unpinning the title bar – it was used all the time, as absolute positioning was also outside the normal flow. Also, the slight glitches I saw on the page were completely eliminated.

I therefore stuck with method 4/ as the final solution. Some sample code showing the programmatic resize is as follows:-

private readonly resizeDebounceTime = 100;
private resizeObservable!: Observable<Event>;
private resizeSubscription!: Subscription;
private readonly formatPixelSize = (pixels: number) => `${pixels}px`;

…

ngAfterViewInit(): void {
   this.initBannerSpacingAdjustment();
}

ngOnDestroy(): void {
   this.destroyBannerSpacingAdjustment();
}

private initBannerSpacingAdjustment(): void {
   this.adjustBannerSpacing();
   this.resizeObservable = fromEvent(window, 
      ‘resize’).pipe(debounceTime(this.resizeDebounceTime));
   this.resizeSubscription = this.resizeObservable.subscribe(event => 
      this.adjustBannerSpacing());
}

private destroyBannerSpacingAdjustment(): void {
   if (this.resizeSubscription) {
      this.resizeSubscription.unsubscribe();
}
}

private adjustBannerSpacing(): void {
   /* note that the offsetHeight is the total height of the banner,
    * including padding and border */
   this.mainContainer.nativeElement.style.marginTop =
      this.formatPixelSize(this.banner.nativeElement.offsetHeight);
}

 

Comments Off on Pinning a title bar on a page with Angular 11/PrimeNG 11

Update 4/3/21

I had problems again when trying to display font-awesome icons in a microapp/web component. In this case, my parent fabric application which loaded the web component had font awesome loaded in package.json but not in angular.json. I removed font-awesome from the web component application in both package.json and angular.json as the parent had loaded it in both places. This then worked correctly. There may be a similar issue with e.g. the prime icons etc. but have not researched this. Clearly PrimeNG itself is needed in both applications as the child web component has development dependencies on it. My theme styling however is only loaded in the parent fabric, and it makes sense that font-awesome behaves the same way.

Original Post

My previous post about using font awesome with Angular  up to v6 and PrimeNG up to v6 is here

With PrimeNG 11, Prime have introduced their own icon set, PrimeIcons.

I wanted to use some font awesome icons as well as they have a larger set, but initially they would not display. When trying again later it all worked fine, and am unsure what I got wrong the first time around. To be clear, the following steps were needed:

1/ Install font awesome and add to package.json (–save adds to package.json)

npm install font-awesome –save

2/ Add a style reference to angular.json

“styles”: [
“node_modules/primeng/resources/primeng.min.css”,
“node_modules/font-awesome/css/font-awesome.min.css”,
“node_modules/primeicons/primeicons.css”,
“src/messages.scss”,
“src/styles.scss”
],

Double check that the referenced css file actually exists under node-modules for the version in use. in my case, this was 4.7.0.

I was looking for pin/unpin icons for a banner bar, and could only find a vertical pin, fa-thumb-tack – I also wanted a horizontal pin to designate the unpinned state. Fortunately, font awesome has the ability to transform icons e.g. to rotate them. This is more limited in v4, but rotation is allowed, so my reference was as follows:

<p-toggleButton [(ngModel)]="bannerPinned" onIcon="fa fa-thumb-tack" offIcon="fa fa-thumb-tack fa-rotate-90"
                class="ss-pin-banner"></p-toggleButton>

This worked perfectly. v5, which was not available directly to install via npm at the time, allows more transformations. The transforms are detailed in this stack overflow post and this font awesome page.

Comments Off on Using Font Awesome with Angular 11/PrimeNG 11

This follows on from this earlier post for Angular 6.

PrimeNG has for some time removed support for legacy themeroller themes and added their own architecture and theme editor. However, for the first time, the theme editor and the SCSS theming interface/standard SCSS files are no longer open source, but are a paid for option. The rest of the component set, including the delivered compiled css for all the standard themes, is available as open source as before.

Therefore, having considered the options, I elected to take a standard theme that was close to what I needed and edit its css directly. This is suggested as an option by Prime for small changes, but it is possible that later changes to the theme architecture could require theme changes as we are editing the compiled css. I decided that the risk and rework that might be needed was small, so have taken this route.

My policy on this is to copy the theme files to a new theme folder under assets/resources/themes/, and then to rename the theme.css file to theme.scss, as the compiled css is also valid scss. This then allows me to add my own variables as required for theme colours etc. to avoid duplication. The intention is to minimise alterations to the original theme, so I would only add variables where I had made changes, to minimise any rework if I had to take a new version of the standard theme and add my changes again.

Whilst doing this, I noted a warning that node-sass, as used previously, is now deprecated. I therefore switched to sass, as per this stackoverflow post, using npm uninstall -g node-sass followed by npm install -g sass. This worked fine, and my changes to the existing compilation script in package.json (also allowing multiple themes to be compiled) were as follows:-

 “scripts”: {
“ng”: “ng”,
“start”: “ng serve”,
“build”: “ng build”,
“test”: “ng test”,
“lint”: “ng lint”,
“e2e”: “ng e2e”,
“scss”: “npm run scss1 && npm run scss2”,
“scss1”: “cd src/assets/resources/themes/salient-new && sass theme.scss:theme.css –source-map .”
“scss2”: “cd src/assets/resources/themes/salient-new2 && sass theme.scss:theme.css –source-map .”
},

Comments Off on Creating and compiling a Custom PrimeNG 11 theme deployed as a static asset