<ul class="col-12">
<div v-for="(todo, n) in todos">
<i class="fas fa-cart-arrow-down mr-1 ml-2"></i>
**<li class="mt-2 todo" #click="myFilter(n)"** :class="todo.isActive ? 'active' : '' ">
<!-- {{ todo.name }} -->
</li>
<li class="button-container bg-light">
**<button** class="ml-1 btn btn-primary rounded-circle btn-sm" #click="toggleHidden(n)" v-
if="todo.isHidden == true" **:disabled='false'**><i class="fas fa-pencil-alt"></i>
</button>
</li>
</div>
</ul>
I have this code and I want that, when you click on li with "myFilter (n)", in the button :disabled it changes from "false" to "true"
Related
I create a delete function for a notification list, but before it executes the drop-down list close ,and i can't find a solution to this problem.
component.ts:
clearNotification( idx ){
console.log('estas emitiendo esto 1', idx)
this._notificationsService.markNotificationsAsReaded(this.notification).then(res=>{
this._notificationsService.deleteNotific(res)
})
service.ts:
deleteNotific(notif: Notification){
let eliminar= this.notifications.findIndex(i => i.id == notif.id);
if(eliminar > -1){
this.notifications.splice(eliminar , 1 );
this.notificationsList.next(this.notifications);
console.log('Borrando Notificacion 4')
}
return this.notifications;
}
component.html:
<!-- notice -->
<div
class="notification notice"
[ngClass]="{
'notice-warning': notification.notification_type_id!=61,
'notice-danger': notification.notification_type_id==61,
'not_view': !notification.datetime_view,
'view': notification.datetime_view
}"
>
<!-- class="icon" -->
<div class="col-md-1" [ngSwitch]="notification.notification_type_id">
<i *ngSwitchCase="17" class="fas fa-shipping-fast"></i>
<i *ngSwitchCase="20" class="fas fa-hand-paper"></i>
<i *ngSwitchCase="61" class="fas fa-exclamation-circle"></i>
<i *ngSwitchDefault class="fas fa-info"></i>
</div>
<!-- class="details" -->
<div class="col-md-10 estilo-texto-notificaciones" (click)="showPointMap( notification );">
<!-- <div class="message"> -->
{{ notification.short_message }}
<i class="details pull-right"> {{ notification.datetime | tiempoTranscurrido }} </i>
<!-- </div> -->
</div>
<div class="col-md-1" *ngIf="!holdMenu" (click)="clearNotification( notification )" >
<i type="button" class="fas fa-check-double"></i>
</div>
</div>
I want to set sidebar menu active when clicked. Now only the first menu is selected as active. If other menus are selected, the first menu still remains as active menu. How to implement this ?
My code:
<div id="mobile_sidebar_display">
<div
class="logo_section d-flex justify-content-center align-items-center"
>
<a v-on:click="closeSideDrawer" :href="base + '/'">
<img src="../../assets/images/logo_2.svg" class="w-100" />
</a>
</div>
<div style="height: 10px"></div>
<a
v-on:click="closeSideDrawer"
class="sidebar_link active"
:href="base + '/'"
><i class="fas fa-home"></i> <span class="ml-2">Home</span></a
>
<a v-on:click="closeSideDrawer" class="sidebar_link" href="#"
><i class="far fa-user"></i> <span class="ml-2">Courses</span></a
>
<router-link class="sidebar_link" to="/QuizGrid"
><i class="fas fa-puzzle-piece"></i>
<span v-on:click="closeSideDrawer" class="ml-2"
>Puzzles</span
></router-link
>
</div>
I'm trying to use ngx-datatable's sort feature to perform the action like this link: https://swimlane.github.io/ngx-datatable/
However, it does not work.
I've tried without luck to use properties like:
sortable="true"
[sortType]="'multi'"
[sorts]="[{prop: 'id_pessoa', dir: 'asc'}]"
Below is the code and version of ngx-datatable:
"#swimlane/ngx-datatable": "^15.0.2"
<section class="basic-elements">
<!-- Breadcrumbs -->
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a routerLink="/">Home</a>
</li>
<li class="breadcrumb-item active">
Pessoas
</li>
</ol>
</nav>
<div id="mb-4" class="row mb-4">
<div class="col-md">
<h1 class="h2">Pessoas</h1>
</div>
<div class="col-md">
<button routerLink="novo" type="button" class="btn btn-raised btn-raised btn-success btn-no-margin float-right btn-heigh2">
+ Nova Pessoa
</button>
</div>
</div>
<div id="mb-4" class="row mb-4">
<div class="col-md-11">
<input type="text" class="form-control" id="email" >
</div>
<div class="col-md-1">
<button [disabled]="submittingForm " type="submit" class="btn btn-raised btn-raised btn-no-margin btn-primary float-right btn-heigh button-margin-top">
Buscar
</button>
</div>
</div>
<div class="row text-left">
<div class="col-md-12">
<div class="card">
<div class="card-content">
<ngx-datatable
class="bootstrap"
[rows]="rows"
[columns]="columns"
[columnMode]="'force'"
[headerHeight]="10"
[footerHeight]="35"
[rowHeight]="35"
[externalPaging]="true"
[externalSorting]="true"
[scrollbarH]="true"
[count]="page.count"
[offset]="page.offset"
[limit]="page.limit"
[sortType]="'multi'"
[sorts]="[{prop: 'id_pessoa', dir: 'asc'}]"
(page)="pageCallback($event)">
<ngx-datatable-column name="Ações" sortable="true" prop="id_pessoa" width=140>
<ng-template let-row="data" let-value="value" ngx-datatable-cell-template>
<a class="btn btn-outline-primary mr-1" [routerLink]="[value,'editar']" href="javascript:void(0)">
<i class="fa fa-edit" title="Editar"></i>
</a>
<a class="btn btn-outline-primary mr-1" [routerLink]="[value,'subst']" href="javascript:void(0)">
<i class="fa fa-exchange" title="Substituir"></i>
</a>
<a class="btn btn-outline-primary mr-1" (click)="deletePessoa(value)" href="javascript:void(0)">
<i class="fa fa-trash" title="Remover"></i>
</a>
</ng-template>
</ngx-datatable-column>
<!--<ngx-datatable-column name="Pré-cad." prop="pre_cadastro" width=75>
<ng-template ngx-datatable-cell-template let-value="value">
<span *ngIf="value">
<i class="fa fa-check fa-2x"></i>
</span>
<span *ngIf="!value">
-
</span>
</ng-template>
</ngx-datatable-column>-->
<ngx-datatable-column *ngFor="let col of columns" [sortable]="true" [name]="col.name" [prop]="col.prop" [width]="col.width" [headerClass]="col.headerClass" [cellClass]="col.cellClass">
</ngx-datatable-column>
<ngx-datatable-column name="Inativo" prop="inativo" width=70>
<ng-template ngx-datatable-cell-template let-value="value">
<span *ngIf="value">
<i class="fa fa-check fa-2x"></i>
</span>
<span *ngIf="!value">
-
</span>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
</div>
</div>
</div>
</div>
there's an output for sort called sort you can use it and make your callback function
(sort)="onSort($event)"
It looks like you have [externalSorting]="true".
Try changing this to false or removing externalSorting (It defaults to false).
I have knockout sortable bookmark page where it is possible to group your bookmarks and change the position. I have all my functions working but i can't seem to get the "afterMove" to work. This is my view:
<div class="col-lg-12">
<div class="bookmarkIconsBox">
<div data-bind="droppable: newGroup, connectClass : 'lists'" class="lists col-lg-6 bookmarkIcons bookmarkActionsBackground"><i class="fa fa-5x fa-plus"></i>Nieuwe groep aanmaken</div>
<div data-bind="droppable: deleteItem, connectClass : 'lists'" class="lists col-lg-6 bookmarkIcons bookmarkActionsBackground"><i class="fa fa-5x fa-trash"></i>Bookmark verwijderen</div>
</div>
<div class="bookmarkBoxTitle" data-bind="visible: $root.visible()">
<input class="title" data-bind="textInput: $root.groupname()" />
<span data-bind="click: function() { $root.setVisible(), $root.changeGroupName($root.groupname())}"><i class="fa fa-2x fa-save"></i></span>
<span data-bind="click: $root.setVisible, visible: $root.visible()"><i class="fa fa-2x fa-close"></i></span>
</div>
<div class="bookmarkBoxTitle" data-bind="visible: $root.visibleBookmarkName()">
<input class="title" data-bind="textInput: $root.bookmarkname()" />
<span data-bind="click: function() { $root.setVisibleBookmarkName(), $root.changeName($root.bookmarkname())}"><i class="fa fa-2x fa-save"></i></span>
<span data-bind="click: $root.setVisibleBookmarkName, visible: $root.visibleBookmarkName()"><i class="fa fa-2x fa-close"></i></span>
</div>
</div>
<div data-bind="foreach: allBookmarks.bookmarkGroups" class="col-lg-12">
<div class="bookmarkBoxTitle">
<h3 class="title" data-bind="text: Description" />
<span data-bind="click: function(){$root.edit(Description)}" class="editName"><i class="fa fa-2x fa-edit"></i></span>
</div>
<div data-bind="sortable: { template: 'itemTmpl', data: bookmarks, connectClass : 'lists', afterMove: $root.update($parent.allBookmarks.bookmarkGroups)}" id="sortable" class="lists bookmarkBackground">
</div>
</div>
<script id="itemTmpl" type="text/html">
<div class="card col-lg-4">
<div>
<span class="moveItem"><i class="fa fa-2x fa-arrows"></i></span>
<span data-bind="click: function(){$root.editBookmarkName(Description)}" class="editName"><i class="fa fa-2x fa-edit" data-bind="visible: !$root.visibleBookmarkName()"></i></span>
</div>
<div class="card-block">
<div class="bookmarkBoxTitle">
<h4 class="card-title" data-bind="text: Description " />
<h4 class="card-title" data-bind="text: $index" />
</div>
<ul class="card-text">
<li data-bind="text: workspace"></li>
<li data-bind="text: role"></li>
</ul>
<a class="btn btn-primary" data-bind="attr : {'href': '/#page/' + link }">Ga naar</a>
</div>
</div>
When i move an item in in a group or to a different group i want it to execute the $root.update() but i can't seem to get it to work.
I want to know how to change display style and element class when I click on element:
and also I'm loading " jquery.min.js version: 2.1.4 " and " bootstrap.min.js "
Before click on element:
<ul class"nav navbar-nav" >
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" id="nav-link-search" href="#" title="Search Posts">
<i class="fa fa-fw fa-search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>
And after click on element:
<nav class="nav navbar-nav">
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" href="#" title="Search articles">
<i class="fa fa-fw fa-times" title="Close search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area" style="display: block;">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>
$("a").click(function(){
var i =$(this);
i.removeAttr('title');
i.attr('title','Search articles');
i.removeAttr('id');
var j = $('i.fa-search');
j.removeAttr('class');
j.attr('class','fa fa-fw fa-times');
j.attr('title','Close search');
$('.search-area').css('display',"block");
});
if u want to (display:none) again
$("a").click(function(){
var i =$(this);
i.removeAttr('title');
i.attr('title','Search Posts');
i.attr('id','nav-link-search');
var j = $('i.fa-times');
j.removeAttr('class');
j.attr('class','fa fa-fw fa-search');
j.removeAttr('title');
$('.search-area').css('display',"none");
});
$(document).on('click', ".search-toggle", function(e) {
e.preventDefault();
$(".search-area").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div><ul class="nav navbar-nav">
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" id="nav-link-search" href="#" title="Search Posts">
<i class="fa fa-fw fa-search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area" style="display: none;">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>
The code below will add the display: block to the element "search-area". This is given you have a clicking element with the class "element".
$(".element").click(function(){
$(".search-area").css( "display", "block" );
});
To change an element when you click on a link, the general concept is
$('a').on('click',function(e) {
e.preventDefault(); // don't follow the link
$('.search-area').addClass('something').removeClass('somethngElse'); // change .search-area
$('i.fa').addClass('something').removeClass('somethingElse').attr('title','foobar'); // change your i element
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class"nav navbar-nav" >
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" id="nav-link-search" href="#" title="Search Posts">
<i class="fa fa-fw fa-search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>