Adding laravel blade content in adminLTE - laravel

I have a problem attaching blade content in the adminLTE dashboard starter package. I am also using vue js components and they are displayed well using router-link. Am managing users with pure laravel without vue Js and I want to include that blade in the same dashboard. Is this possible?
my code:
<li class="nav-item">
<router-link to="/customer" class="nav-link">
<i class="nav-icon fas fa-user text-orange"></i>
<p>
Locations
</p>
</router-link>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-cog text-green"></i>
<p>
Management
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="{{route('usertab')}}" class="nav-link">// I want to include it here
<i class="fas fa-users nav-icon text-teal "></i>
<p>Usersx</p>
</a>
</li>
</ul>
I have added this to content section.
<div class="content-wrapper">
<div class="container-fluid">
<router-view></router-view>
#if(Request::is('/usertab')) //but this is not working
#yield('content')
#endif
</div>
</div>
My router link
import VueRouter from 'vue-router'
Vue.use(VueRouter)
let routes = [
{ path: '/userbio', component: require('./components/UserBioComponent.vue').default},
{ path: '/users', component: require('./components/UsersComponent.vue').default},
{ path: '/customer', component: require('./components/LocationComponent.vue').default},
]
and my blade web route
Route::get('usertab','AdminController#getuserall')->name('usertab');
Any idea to this

Related

Links don't work inside Bootstrap Offcanvas

I have implemented an Offcanvas sidebar. It displays fine but none of the links in the sidebar actually work.
When I clicked on the links, nothing happens. I don't think I understand the mechanism well enough so any guidance here would be appreciated.
I'm using Laravel so this code is inside a view that is loaded for every page (like app.blade.php).
The sidebar works fine and can be properly toggled with the button but the links don't take me anywhere. What am I missing?
Here's the code. Link1 and Link2 are valid Laravel routes in my test app.
<body class="d-flex flex-column min-vh-100">
<a class="btn btn-primary float-end" data-bs-toggle="offcanvas" href="#offcanvas" role="button" aria-controls="offcanvas">
Toggle Menu
</a>
<nav class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" data-bs-keyboard="false" data-bs-backdrop="true" data-bs-scroll="true">
<div class="offcanvas-header border-bottom">
<a href="/" class="d-flex align-items-center text-decoration-none offcanvas-title d-sm-block">
<h4>
My site
</h4>
</a>
</div>
<div class="offcanvas-body px-0" data-bs-target="experience-collapse" data-bs-toggle="collapse">
<ul class="list-unstyled ps-0">
<li class="mb-1">
<button
class="btn btn-toggle align-items-center rounded"
data-bs-toggle="collapse"
data-bs-target="#experience-collapse"
aria-expanded="true"
aria-controls="experience-collapse"
>
<i class="bi bi-list-ol"></i> Links
</button>
<div class="collapse show" id="experience-collapse" style="">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><i class="bi bi-arrow-down-up"></i> Link 1</li>
<li><i class="bi bi-search"></i> Link2</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</body>

Dropdown toggle not working on laravel vue spa

I'm having a trouble on how can I view the toggle when I click the button export in Laravel vue Spa. The problem is when I click the button export, the toggle is not showing, unlike I have example image below that should view the toggle when clicks. I already load all of my JavaScript file in my public views.
I think this is one of disadvantage when using SPA in laravue. One of the problem I observed in SPA, it loads first all the element js file in the public and when I go to SPA vue the js file did not rendered, is there any solution for this? It would be great if anybody could figure out, thank you so much in advance!.
Expected output , should view the toggle
vue template
<div class="card-toolbar">
<div class="dropdown dropdown-inline mr-2">
<button type="button" class="btn btn-light-primary font-weight-bolder dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="svg-icon svg-icon-md">
</span>Export</button> //export button here
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
<ul class="navi flex-column navi-hover py-2">
<li class="navi-header font-weight-bolder text-uppercase font-size-sm text-primary pb-2">Choose an option:</li>
<li class="navi-item">
<a href="#" class="navi-link">
<span class="navi-icon">
<i class="la la-print"></i>
</span>
<span class="navi-text">Print</span>
</a>
</li>
<li class="navi-item">
<a href="#" class="navi-link">
<span class="navi-icon">
<i class="la la-copy"></i>
</span>
<span class="navi-text">Copy</span>
</a>
</li>
<li class="navi-item">
<a href="#" class="navi-link">
<span class="navi-icon">
<i class="la la-file-excel-o"></i>
</span>
<span class="navi-text">Excel</span>
</a>
</li>
<li class="navi-item">
<a href="#" class="navi-link">
<span class="navi-icon">
<i class="la la-file-text-o"></i>
</span>
<span class="navi-text">CSV</span>
</a>
</li>
<li class="navi-item">
<a href="#" class="navi-link">
<span class="navi-icon">
<i class="la la-file-pdf-o"></i>
</span>
<span class="navi-text">PDF</span>
</a>
</li>
</ul>
</div>
</div>
</div>
My webpack.mix.js
const mix = require('laravel-mix');
const path = require('path');
mix.webpackConfig({
resolve: {
alias: {
'^public': path.resolve(__dirname, 'public'),
'^resources': path.resolve(__dirname, 'resources'),
'^lang': path.resolve(__dirname, 'resources/js/lang'),
'^modules': path.resolve(__dirname, 'Modules'),
}
}
});
mix.js('resources/js/app.js', 'public/js')
.vue()
.sass('resources/sass/app.scss', 'public/css');

how i can use vuejs component in laravel blade?

the idea is to use vue component inside file blade but i got this error
Failed to mount component: template or render function not defined.
this my importation in app.js
Vue.component('Notification' ,require('./components/Notification.vue'));
this my component code
<template>
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="fas fa-bell"></i> <span class="badge badge-light">{{unreads.length}}</span>
<span class="badge badge-warning navbar-badge"></span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<notification-item> </notification-item>
</div>
</li>
</template>
<script>
export default {
props :['unreads','userid'],
mounted() {
Echo.private('App.User.'+ this.userid)
.notification((notification) => {
console.log(notification);
});
}
}
</script>
and finally this my code in home.blade.php
<Notification :userid="{{auth()->id()}}" :unreads="{{auth()->user()->unreadNotifications}}"> </Notification>
someone help me please
Compile vuejs files via npm run dev and make sure that you use the correct binding for userid and include app.js into scripts.

Is it possible for me to expand the grid of the main content area?

I'm trying to make my dashboard app more dynamic by adding a collapsable navbar. The nav should resize to only icons, and the main area should expand. But I'm kind of stuck on how to expand it from now on.
The project is based on the PHP Laravel framework 5.6.
I have tried different setups with grid columns.
<div class="container-fluid" id="wrapper">
<div class="row">
#include("test.components.sidenav")
<main class="col-xs-12 col-sm-8 col-lg-9 col-xl-10 pt-3 pl-4 ml-auto">
<div class="container-fluid" id="expandable">
<nav class="sidebar col-xs-12 col-sm-4 col-lg-3 col-xl-2" id="collapseId">
<h1 class="site-title">
<a href="{{ route('home') }}">
<em class="fab fa-accessible-icon"></em>
<span>Ready4It</span>
</a>
</h1>
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">
<em class="fas fa-bars"></em>
</a>
<ul class="nav nav-pills flex-column sidebar-nav">
<li class="nav-item">
<a class="nav-link active" href="">
<em class="fas fa-home"></em>
<span>Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<em class="fas fas fa-ticket-alt nav-bar-icon"></em>
<span>Ticket overzicht</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<em class="fas fa-chart-line"></em>
<span>Statistieken</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<em class="fas fa-envelope"></em>
<span>Mail monitoring</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<em class="fas fa-clock"></em>
<span>Uren invoer</span>
</a>
</li>
</ul>
<a href="#" class="logout-button" id="logout-button">
<em class="fa fa-power-off"></em>
<span>Logout</span>
</a>
</nav>
<section class="row">
<div class="col-sm-12">
<div class="row">
#yield("content")
</div>
</div>
</section>
</div>
</main>
</div>
</div>
<script>
/* This script is for the mobile navbar collapse */
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
$("#menu-collapse").click(function (e) {
e.preventDefault();
$("#collapseId").toggleClass("icons-only");
$("#logout-button").toggleClass("logout-button").toggleClass("logout-button-collapsed")
})
</script>
The nav should resize to only icons, and the main area should expand.
Try this one,
Add a fixed width to the class icons-only also adjust transform translate if needed
.icons-only {
width: some-width;
}
and also make sure you added same width as margin-left for main section ( apply this only if the icons-only class is added to nav )

VueJS get variable as text

I'm working on a Laravel project and i use VueJS for notifications system.
However, i'm a real noob in VueJS dev'. Consequently, i don't know how to print a variable as text.
Situation : System of notifications work and i would like to print the number of notifications in a bootsrap badge. So, i did this :
<i class="fa fa-bell-o" aria-hidden="true"></i> Notifications <span id='badge' class="badge badge-info">{{notifications.length}}</span> <span class="caret"></span>
With this code in my Notification.vue file :
<template>
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
<i class="fa fa-bell-o" aria-hidden="true"></i> Notifications <span id='badge' class="badge badge-info">{{notifications.length}}</span> <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li style="text-align:center" v-for="notification in notifications">
<a href="#" v-on:click="MarkAsRead(notification)">
{{notification.data.idea.name}} a été validée !<br>
</a>
</li>
<li style="text-align: center" v-if="notifications.length==0">
Aucune notification !
</li>
</ul>
</li>
</template>
<script>
export default {
props: ['notifications'],
methods: {
MarkAsRead: function (notification) {
var data = {
id: notification.id
};
axios.post('/notification/read', data).then(response => {
window.location.href = "/manif/";
});
}
}
}
</script>
Finally i only see {{notifications.length}} write in the badge instead of a number...
Can you help me about this ?
Thank's
The raw mustache tags are shown because you've used v-pre directive in the parent element, which tells Vue to not compile the element and its children:
<a id="navbarDropdown" ... v-pre> <!-- Don't use v-pre here -->
...
<span ...>{{notifications.length}}</span>
</a>
Simply removing that directive should resolve the issue: demo

Resources