In my homepage I have a search bar and a list of user favorite cards. Only If there is no favorited cards on the initial browser load and when a user removed all their favorite cards then it'll show a banner "Add a favorite...".
The problem I have right now is the banner is displaying when I search something on the search-bar and found no favorited card. How do I fix that?. I don't want to show my banner if there is no search result found.
If I do favorites.size == 0 instead then the banner is not showing up at all when browser load or user removed all their cards.
<div class="input">
<form class="search-form">
<input #searchValue id="input-field" class="input-field" type="search"
name="insightSearchFilter" (ngModelChange)="filterChanged($event)" [formControl]="inputCtrl"/>
<p class="hint" *ngIf="inputCtrl.value">
<strong> {{ favorites?.length }} Search Result for </strong><em>"{{ inputCtrl?.value }}".</em>
<strong> The Results listed below are exact matches for your query.</strong>
</p>
</form>
</div>
<div *ngIf="favorites">
<div *ngIf="favorites.length > 0">
<app-card-list [cards]="favorites"></app-card-list>
</div>
<div *ngIf="favorites.length == 0" class="empty-faves-container">
<div class="add-faves-container">
<div class="add-faves-ico"></div>
<div class="text">Add a Favorite</div>
</div>
</div>
</div>
Since you are filtering this.favorites in filterChanged methods. You should apply check for search text also along with length check.
like
(favorites.length == 0 && !(inputCtrl.value))
Related
I have this layout. What I want to do is, when a button Join is clicked, hide that button and show an input field in its place like this, and if another button is clicked the first one returns to its normal state and another input field is displayed like this.
I'm working with Angular 13. Here is a code snippet of the concerned div.
<div *ngIf='show === "default"' class="list">
<div class="form-listItem" *ngFor="let room of roomList">
{{ room }}
<button class="formBtn" (click)="enterPassword($event.target)" id="{{ room }}">Join</button>
<div class="joinRoomPasswordContainer" id="{{ room }}-">
<input class="joinRoomPassword" type="password" placeholder="********">
<button class="joinRoomBtn">
<img class="rightArrow" src="/assets/rightArrow.svg" alt="">
</button>
</div>
</div>
</div>
In the Ts file you initialize two variable with boolean type true and false.
and create write a fun like:-
func1(){
this.a = true;
this.b = false;
}
call this function on the button and the panel you want to open on click that div give - *ngIf with these two variable.
you could add a property for room object, some like 'joined', then add ngIf directive for view change
<button class="formBtn" *ngIf="!room.joined" (click)="enterPassword($event.target); room.joined = true" id="{{ room
}}">Join</button>
<div class="joinRoomPasswordContainer" id="{{ room }}-" *ngIf="room.joined">
<input class="joinRoomPassword" type="password" placeholder="********">
<button class="joinRoomBtn">
<img class="rightArrow" src="/assets/rightArrow.svg" alt="">
</button>
</div>
I have a panel which shows a progress of a certain task with a trace of the log.
I want to change the color of that panel from gray(current) to green when the log prints a certain line.
The log is also present in the view so I could do all this in the view with razor sharp, but how so ?
This is the view :
<input type="checkbox" id="reveal-email" role="button">
<div class="alert alert-dark" role="alert" style="width:50%;margin-left:375px;font-family:'Advent Pro', sans-serif;">
<div class="row">
<div class="col-3">
<strong> Export processing...</strong><br />
</div>
<div class="col-3">
<div class="loader"></div>
</div>
<div class="col-3" style="padding-left:300px">
<label for="reveal-email" class="btn">
<i class="icon ion-ios-toggle" style="color:rgb(49,52,55);"></i>
Log
</label>
</div>
</div>
</div>
<!-- THIS IS THE LOGGING PART !-->
<div id="email" class="alert alert-warning" role="alert" style="width:50%;margin-left:375px;font-family:'Advent Pro', sans-serif;">
<p> Log Started at #DateTime.Now </p>
<ul style="color:#222;font-style:oblique" id="messagesList"></ul>
</div>
Basically the ul in the logging div appends the log each time the server detects a new line (in the backend)...One of the lines is :
Log :
Job "TN_LR_DEV1"."SYS_EXPORT_SCHEMA_05" successfully completed at Sun May 10 17:58:24 2020 elapsed 0 00:01:23
Which basically means that the task is completed..only then I want to remove the first div (panel) and add another panel below everything with a green color(or show it if it's marked as hidden)
You can use Jquery to hide/show the element . For example , you can add another div and set background to green :
<div id="completedDiv" style="display:none;background:aquamarine;">
</div>
And in your js function that getting log from server side , you can check the log and show/hide related div using JQuery/Javascript :
let log = 'Log : Job "TN_LR_DEV1"."SYS_EXPORT_SCHEMA_05" successfully completed at Sun May 10 17:58:24 2020 elapsed 0 00:01:23';
if (log.indexOf("successfully completed") >= 0) {
$("#completedDiv").show();
}
Solved the issue with checking if a certain string exists in the new log line appended to the view, if boolean is true then :
document.getElementById("succ").style.display = "block";
with succ being the panel showing a success message and by default its display is set to none.
Good Morning,
Hope everyone had a great Easter,
Before I begin, I want to point out this is being developed in ServiceNow Orlando release, it uses AngularJS 1.6.10
I'm stuck on a tricky piece of code I can't get right, I'm using an ng-repeat to build out a catalog of hardware devices, in this case its Laptops, we have added a button which quickly allows people to add the device to the cart, we now want to add a quantity field so that multiple devices can be added at the same time, I got it working but AngularJS adds in an empty cell at the beginning, I need to get it to default to 1, I did get it to do this but it broke the cart experience as every item added to the cart is a 1 no matter what quantity is selected.
so this is most of the html code which also includes the ng-repeat that builds out the hardware devices, I am using an ng-options that everyone seems to recommend, been reading a lot in Stack Overflow.
The problem is the ng-model, as this is set to $scope.items[0] it never gets updated, I have been looking at getterSetter but very much going over my head at the moment, can't get it to work.
<div class="col-sm-6 col-md-4 funky-show-hide" ng-show="selectedCat==item.categoryBelongTo" ng-repeat="item in data.items track by $index">
<div class="panel panel- b" >
<a target="" ng-href="" ng-click="onClick($event, item)" class="panel-body block">
<div class="overflow-100">
<h4 class="m-t-none m-b-xs hrline"><span ng-if="item.content_type == 'external'"> <i ng-if="data.isDownloadable.indexOf(item.sys_id) ==-1" class="fa fa-external-link-square" aria-hidden="true" style="color: #498fcc;"></i><i ng-if="data.isDownloadable.indexOf(item.sys_id) >-1" class="fa fa-download" aria-hidden="true" style="color: #498fcc;"></i></span></h4>
<img ng-src="" ng-if="item.picture" class="m-r-sm m-b-sm item-image pull-left" />
<div class="text-muted item-short-desc"></div>
</div>
</a>
<div class="panel-footer" >
<span ng-if="item.u_show_price == 'true'" class="pull-right item-price font-bold"></span>
<button ng-if="item.u_show_add_to_cart_button == 'true' " name="submit" ng-disabled="submitted" ng-click="triggerAddToCart(item.sys_id, selected.label)" class="btn btn-primary">${Add to Cart}</button>
<select ng-if="item.u_show_quantity_button == 'true'"
name="Quantity"
id="quantity"
ng-disabled="submitted"
ng-model="selected"
class="form-control quantity-selector"
data-toggle="tooltip"
tooltip-top="true"
data-original-title="${Quantity}"
ng-options="item as item.label for item in items track by item.id">
</select>
</div>
</div>
</div>
Controller:
$scope.items = [{
id: 1,
label: '1'
}, {
id: 2,
label: '2'
}, {
id: 3,
label: '3'
}];
$scope.selected = $scope.items[0];
What it all looks like:
So I have selected "3" on the Performance PC Laptop but if you look at the console log on the right, you can see the value added is 1.
Picture to display value added to cart
Shame really, I was happy with the empty cell but its what the client would like, I know I can update the empty cell with some text but they would really like it to default to 1.
Any suggests and I would be grateful,
Bored Panda
Replacing the ng-if with ng-show resolved my problem, days lost trying to figure this out, also developed a simpler solution with number increment
Code Here:
<input type="number" value="1" min="1" max="20" step="1" ng-model="items_increment" title="Quantity" ng-show="item.u_show_quantity_button == 'true'"/>
$scope.items_increment = 1;
Hope it helps another person.
I'm working on a web application, and I have a datatable where you can filter via an API call. Upon adding filters, Material Design chips get added in horizontal orientation. When I add too much chips, my text in my div goes over the text above it.
This is my code:
<!-- ABOVE IS ANOTHER MAT TOOLBAR ROW WITH 3 INPUTS AS SHOWN IN THE PICTURE BELOW -->
<mat-toolbar-row class="controls">
<div class="col-md-9">
<span>Filtering {{getTotalDataSize()}}
<span *ngIf="type === 'user'" i18n>users</span>
<span *ngIf="type === 'role'" i18n>roles</span>
<span *ngIf="type === 'entitlement'" i18n>entitlements</span>
<span *ngIf="type === 'application'" i18n>applications</span>:</span>
<span *ngIf="clusterConditions.length == 0"> no filters applied</span>
<div *ngIf="clusterConditions.length > 0 || isInGroupByMode()">
<mat-chip-list>
<mat-chip *ngFor="let condition of clusterConditions" [selectable]="false" [removable]="true" (removed)="removeCondition(condition)">
<span *ngIf="condition.attr.name">{{condition.attr.name | capitalize}} {{condition.match}} "{{condition.val}}"</span>
<span *ngIf="!condition.attr.name">Contains "{{condition.val}}"</span>
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
<mat-chip *ngIf="isInGroupByMode()" [selectable]="false" [removable]="true" (removed)="changeGroupByMode(false)">
<span>Grouped by {{groupByAttribute.name}}</span>
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
</mat-chip-list>
</div>
</div>
<div class="col-md-3">
<mat-paginator #paginator [length]="getDataSize()" [pageIndex]="0" [pageSize]="10"></mat-paginator>
</div>
</mat-toolbar-row>
I tried fiddling with some display: block/flex; and box-sizing: border-box;, but I can't seem to figure it out!
An example of what it looks like when adding too much chips:
I'd like the 'Filtering ...' to show beneath the input fields!
EDIT: Wanted behaviour:
Note: The row has two columns, the chips column and the navigator on the right. When there are to much pills, a next row has to start as shown in the picture above, in the column div of the pills, not of the paginator.
Either the pills start next to the 'Filtering ... :' or beneath it (doesn't really matter)
Thanks in advance!
My target is to search my notes by Title and truncate Body by a letters or words limit. I don't know if its possible to do that and how. I don't want to mess up with any custom filters , directives etc.
This is a idea of the html:
<section class="notespage" ng-controller="NotesController">
<h2>Notes list</h2>
<div>
Search:
<input type="text" ng-model="searchText">
</div>
<div class="notesleft">
<div class="notelist">
<div ng-repeat="note in notes | filter:searchText | truncate:{body:letterLimit}">
<div><h3>{{note.title}}</h3></div>
<div>{{note.body}}</div>
</div>
</div>
</div>
</section>
Where this should be ? In NotesController ?
$scope.letterLimit = 20 ;
Since you don't want to "mess up" with custom filters etc, you can use the built-in limitTo filter to limit the number of characters displayed as note.body:
$scope.letterLimit = 20;
<div>Search:<input type="search" ng-model="searchText" /></div>
<div ng-repeat="note in notes | filter:searchText">
<div><h3>{{note.title}}</h3></div>
<div>{{note.body | limitTo:letterLimit}}</div>
<div>
See, also, this short demo.