I am using the angular material 12 version drag and drop feature. I have two connected divs while dropping the item I want to identify whether the source (item dragged container) container and target container(item dropped container) are the same or not.
Thanks in advance. please find below the code
<div class="toc_listing" cdkDropList [cdkDropListData]="table_list" [cdkDropListConnectedTo]="table_toc"
#list_toc="cdkDropList" (cdkDropListDropped)="drop($event)">
<p *ngFor="let item of table_list" cdkDrag>
<span class="icons"><i class="fa fa-ellipsis-v" aria-hidden="true"></i>
<i class="fa fa-ellipsis-v" aria-hidden="true"></i></span>
<span class="list-no">{{item.tableNo}}</span>
<span class="list-name">{{item.name}}</span>
</p>
</div>
<div class="table responsive-table">
<table class="table">
<thead>
<td>t.no</td>
<td>name</td>
<td>type</td>
<td>population</td>
<td>actions</td>
</thead>
<tbody cdkDropList [cdkDropListData]="toc_list"
#table_toc="cdkDropList" (cdkDropListDropped)="drop($event)">
<tr *ngFor="let item of toc_list" cdkDragLockAxis="x" cdkDragLockAxis="y" class="dragdrop_table">
<td>{{item?.tlfTocMasterDto?.tableNo}}</td>
<td (click)="viewEditor(item)" data-toggle="tooltip" [matTooltip]="item.selected ? 'Edit Mockshell':'Mockshell is not selected'">{{item?.tlfTocMasterDto?.name}}</td>
<td>{{item?.tlfTocMasterDto?.tableType}}</td>
<td>{{item?.tlfTocMasterDto?.population}}</td>
<td>
<p class="edit" data-bs-toggle="modal" data-bs-target="#editTableOfContent" *ngIf="!item.selected" (click)="editTable(item)"><i class="fa fa-pencil" aria-hidden="true"></i>
</p>
<p class="delete" (click)="deleteTable(item, $event)" *ngIf="!item.selected"><i class="fa fa-trash-o" aria-hidden="true"></i></p>
</td>
</tr>
</tbody>
</table>
</div>
The CdkDragDrop parameter contains the container (dropped container) and previousContainer which you can compare directly
drop(event: CdkDragDrop<string[]>) {
if (event.previousContainer === event.container) {
...your logic
}
}
Related
I am trying to make a filter for my table but i see a problem there. Maybe the problem is from table structure couse i fetch all structure as it is on mysql. Does anyone help to make this filter in right way.
The collapse content under comment is the head i display when i want to filter
<table class="table table-hover align-middle mb-0">
<thead class="">
<tr>
<th><input type="checkbox" class="form-check-input" v-model="selectAll" title="Select All"></th>
<th v-if="!isHidden[index]" v-for="(header, index) in visibleHeaders" :key="index" scope="col">
{{ header }}
</th>
<th>ACTION</th>
</tr>
</thead>
<!-- Collapsed content ./ -->
<thead class="collapse" id="collapseFilter">
<tr>
<th>#</th>
<th v-for="(header, index) in visibleHeaders" scope="col">
<select id="" class="form-select" >
<option v-for="column in leads">
<div v-for="(atr, key, index) in column">
{{atr}}
</div>
</option>
</select>
</th>
</tr>
</thead>
<!-- ./ Collapse contet -->
<tbody>
<tr v-show="leads.length" v-for="column in leads" >
<td>
<input type="checkbox" class="form-check-input" v-model="selected" :value="column.id" />
</td>
<td v-if="!isHidden[index]" v-for="(atr, key, index) in column">
<div v-if="atr == 'new'">
<span class="badge bg-info">{{ atr }}</span>
</div>
<div v-else-if="atr == 'contract'">
<span class="badge bg-success">{{ atr }}</span>
</div>
<div v-else>
<span >{{ atr }}</span>
</div>
</td>
<td>
<button #click="editLead(column.id)" type="button" class="btn btn-sm btn-secondary" data-mdb-toggle="modal" data-mdb-target="#editLeadModal" >
<i class="fa-solid fa-eye"></i>
</button>
</td>
</tr>
<tr v-show="!leads.length">
<td colspan="12" class="text-center">Sorry :( No data found.</td>
</tr>
</tbody>
</table>
If i try to loop only v-for="column in lead"
I'm using larashop admin panel.The datatable shows blank spaces below the datatable..The height blank spaces increases with increase in datatable entries.I don't know what to do..
I tried some css.but none of them helped me.
#extends('templates.admin.layout')
#section('title', 'All Courses')
#section('content')
<div class="">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Courses <i class="fa fa-plus"></i> Create New </h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<table id="datatable-buttons" class="table table-responsive">
<thead>
<tr>
<th>Course Name</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Course Name</th>
<th>Action</th>
</tr>
</tfoot>
<tbody>
#if(count($courses))
#foreach ($courses as $row)
<tr>
<td>{{$row->name}}</td>
<td>
<i class="fa fa-pencil" title="Edit"></i>
<i class="fa fa-trash-o" title="Delete"></i>
</td>
</tr>
#endforeach
#endif
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
#stop
The screenshot of the issue is provided..please check...
https://i.stack.imgur.com/avqf5.png
I am creating a friends component that lists users friends based on a response from an endpoint.
I want to render the responses into rows of a table as part of this I would like to use the bootstrap striped-table class
https://getbootstrap.com/docs/4.0/content/tables/#striped-rows
when I do a v-for the table renders correctly but the rows are only showing one background color
This is my template code
<template>
<div>
<h5 class="mb-4">Friends</h5>
<table class="table table-borderless table-striped ">
<tbody>
<div v-for="(friend, index) in UserStore.friends">
<tr>
<td class="text-center" style="width: 100px;">
<img style="width: 100px;" :src="friend.avatar" alt="User Image" class="rounded-circle">
</td>
<td>
{{friend.name}}<br>
<small>29 years old on Friday</small>
</td>
<td class="text-center" style="width: 80px;">
<i class="fa fa-gift"></i>
</td>
</tr>
</div>
</tbody>
</table>
<div v-if="!UserStore.friends">
<h6>You don't have any friends :(</h6>
Lets solve that Right now!
</div>
</div>
</template>
You should use a template element to render these rows. .table-striped works with sibling rows and in your code the rows are not siblings because they each have a div parent, so each row is seen as the first row.
<tbody>
<template v-for="(friend, index) in UserStore.friends">
<tr>
<td class="text-center" style="width: 100px;">
<img style="width: 100px;" :src="friend.avatar" alt="User Image" class="rounded-circle">
</td>
<td>
{{friend.name}}<br>
<small>29 years old on Friday</small>
</td>
<td class="text-center" style="width: 80px;">
<i class="fa fa-gift"></i>
</td>
</tr>
</template>
</tbody>
I am using following bootstrap menu items with My laravel application,
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-3">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-folder-close">
</span> Content Management</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<table class="table">
<tr>
<td>
<span class="glyphicon glyphicon-pencil text-primary"></span>Category
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-pencil text-primary"></span>Brand
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-pencil text-primary"></span>Model
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-flash text-success"></span>Province
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
and using this menu bar with #include('menubar) with other blade files. now I need highlight current menu item when I visit each pages. how can I do this?
use
{{ request()->route()->getName() }}
or
{{ route()->currentRouteName() }}
then you can do something like
<a class="{{ request()->route()->getName() === "brands.index" ? "active" : "not-active" }}">
You can use this package I've written to do this: https://packagist.org/packages/arcesilas/active-state
Example with your code:
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<table class="table">
<tr>
<td>
<span class="glyphicon glyphicon-pencil text-primary"></span>Category
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-pencil text-primary"></span>Brand
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-pencil text-primary"></span>Model
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-flash text-success"></span>Province
</td>
</tr>
</table>
</div>
</div>
This package also allows you to check a url, a route with given parameters or a query.
I'm really new to MVC hope you can give me a detailed instructions on this.
I have a query in my repository that returns pending users who have a certain role_id. Now my issue is this I when the administrator clicks on the anchor tag of id idMessenger below
<li> Messenger<span class="label label-danger pull-right">{{$messenger->count()}}</span> </li>
I want to show the pending messengers only in the
<div class="col-md-2 left-aside">
<div class="scrollable">
<ul class="inbox-nav capitalize-font">
<li>All Pending Applications </li>
<li>Clients<span class="label label-danger pull-right">{{$elderly->count()}}</span></li>
<li> Messenger<span class="label label-danger pull-right">{{$messenger->count()}}</span> </li>
</ul>
</div>
</div>
<!-- /.left-aside-column-->
<div class="col-md-10 right-aside">
<div class="scrollable">
<div class="table-responsive">
<table id="datable_1" class="table display table-hover contact-list" data-page-size="10">
<thead>
<tr>
<th>Appication ID</th>
<th>Name</th>
<th>Email</th>
<th>Senior Citizen Number</th>
<th>Role/Submitted as</th>
<th>Date of Submission</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
#foreach($allPending as $user)
<tr>
<td>{{$user->id}}</td>
<td>{{$user->name}}</td>
<td>{{$user->email}}</td>
<td>{{$user->scn}}</td>
<td><span class="label label-danger">{{$user->roles->name}}</span></td>
<td>{{$user->created_at}}</td>
<td>
<i class="fa fa-check"></i>Approve
</td>
<td>
<i class="fa fa-trash"></i>Delete
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
Can you please teach me how to do it in ajax.