I'm new sorry if I don't know how to write a help request.
I've created a ToDoList in Vue3 and NodeJs, I've already setted my backend, so now I work on my front.
I have a problem with my Vue script, I want to store my connection state, so when I push the button Login, the button "Créer une tache" appears, and my login button transform into a logout button in my Navigation bar
So my problem, is when I change my view I go for example in "Liste des tâches" my button "Créer une tâche" and "Logout" disappear.
Thank's for the future answers !
So this is my Navbar.vue script :
<template>
<nav class="navbar-light bg-light">
<ul class="ul1">
<li><router-link to="/"> <button id="inscription-button" class="btn inscription-button"> Accueil </button> </router-link></li>
<li><router-link to="/informations" id="inscription-button" class="btn inscription-button"> Informations </router-link></li>
<li><router-link to="/tasklist" id="inscription-button" class="btn inscription-button"> Liste de tâches </router-link></li>
<router-link to="/createtask" v-if="isLoggedIn" id="inscription-button" class="btn inscription-button"> Créer une tâche </router-link>
<li><router-link to="/contact" id="inscription-button" class="btn inscription-button"> Contact </router-link></li>
</ul>
<ul>
<li v-if="!navLoggedIn">
<router-link to="/login">Login</router-link>
</li>
<li v-if="navLoggedIn">
<button #click="logout">Logout</button>
</li>
</ul>
</nav>
</template>
<script>
import { mapActions, mapState } from 'vuex';
export default {
data() {
return{
navLoggedIn : false
}
},
props: {
isLoggedIn: Boolean,
},
name: 'Navbar',
methods: {
...mapActions('navbar', { logout: 'logout' }),
},
async mounted(){
this.navLoggedIn=this.isLoggedIn
},
watch: {
// whenever question changes, this function will run
isLoggedIn(newvalue) {
this.navLoggedIn =newvalue;
}
},
};
</script>
and this is my Login.vue script :
<template>
<navbar :isLoggedIn="return_log()"></navbar>
<section class="vh-100">
<div class="container py-5 h-100">
<div class="row d-flex align-items-center justify-content-center h-100">
<div class="col-md-8 col-lg-7 col-xl-6">
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/draw2.svg"
class="img-fluid" alt="Phone image">
</div>
<div class="col-md-7 col-lg-5 col-xl-5 offset-xl-1">
<form #submit.prevent="submitForm">
<div class="form-outline mb-4">
<input type="email" id="form1Example13" class="form-control form-control-lg" required v-model="email" name="user_mail" />
<label class="form-label" for="form1Example13">Adresse email</label>
</div>
<div class="form-outline mb-4">
<input type="password" id="form1Example23" class="form-control form-control-lg" required v-model="password" name="user_password" />
<label class="form-label" for="form1Example23" >Mot de passe</label>
</div>
<div class="d-flex justify-content-around align-items-center mb-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="form1Example3" checked />
<label class="form-check-label" for="form1Example3"> Se souvenir de moi </label>
</div>
Mot de passe oublié ?
</div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Se connecter</button>
<div class="divider d-flex align-items-center my-4">
</div>
</form>
</div>
</div>
</div>
</section>
</template>
<script>
import { mapActions } from "vuex";
import Navbar from "../components/Navbar.vue"
import Swal from 'sweetalert2'
export default {
components: {Navbar},
// props: {
// isLoggedIn: {
// type: Boolean,
// required: true
// }
// },
data() {
return{
email:'',
password:'',
isLoggedIn : false
}
},
methods: {
return_log : function(){
return this.isLoggedIn
},
submitForm: async function () {
const response = await this.login({
email:this.email,
password:this.password
});
if(response.success) {
Swal.fire({
title: 'Connexion réussie ! ',
text: response.message,
icon: 'success'
});
this.isLoggedIn= true
// this.$router.push('/tasklist')
}
else{
Swal.fire({
title: 'Connexion échouée ',
text: response.message,
icon: 'error'
});
}
},
...mapActions("requests/auth", ["login"]),
}
}
</script>
I tried to add in my App.vue my navbar to get my connection state stored in all my views.
Related
My Blade View 'chat.blade.php'
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading"</div>
<div class="panel-body">Chats
<chat-messages :messages="messages"></chat-messages>
</div>
<div class="panel-footer">
<chat-form
v-on:messagesent="addMessage"
:user="{{ Auth::user() }}"
></chat-form>
</div>
</div>
</div>
</div>
</div>
#endsection
This code is extend from app.blade.php, which probably its not really the main focus of the problem
and here is My 2 Component From My Vue JS
'ChatMessages.vue'
<template>
<ul class="chat">
<li class="left clearfix" v-for="message in messages">
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font">
{{ message.user.name }}
</strong>
</div>
<p>
{{ message.message }}
</p>
</div>
</li>
</ul>
</template>
<script>
export default {
props: ['messages']
};
</script>
and here is the 'ChatForm.vue'
<template>
<div class="input-group">
<input id="btn-input" type="text" name="message" class="form-control input-sm" placeholder="Type your message here..." v-model="newMessage" #keyup.enter="sendMessage">
<span class="input-group-btn">
<button class="btn btn-primary btn-sm" id="btn-chat" #click="sendMessage">
Send
</button>
</span>
</div>
</template>
<script>
export default {
props: ['user'],
data() {
return {
newMessage: ''
}
},
methods: {
sendMessage() {
this.$emit('messagesent', {
user: this.user,
message: this.newMessage
});
this.newMessage = ''
}
}
}
</script>
and here is the following screenshot of the problem
Click here for the Picture
as you can see in the screenshot, the chat component from vue.js listed below, wont show up, its just appear blank, only displaying scrollbar,navbar and 'Chats' text. which is came from app.blade.php]
Please help me :). Thanks
You do not commit any messages to your component. :messages="messages" is Vue syntax.
Assuming your controller assigns $messages to your view:
<chat-messages messages="{{ json_encode($messages) }}"></chat-messages>
should do it. You need to use blade variables to assign
I've got a dashboard component in a lazy loaded module.
In my signin component I have a button that navigates to the dashboard component via router.navigate.
However when I click the button, although it navigates to the correct route, it doesn't display the component. It only displays the app component.
However if I refresh the page it ends up loading. Driving me crazy.If i open up a new tab and go to that same route everything works fine. But it seems when I click the button which navigates via routerlink it doesn't load it.
sign-in.component.html
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button (click) = "authenticateUser()" class="btn btn-primary">Sign In</button>
</form>
<router-outlet></router-outlet>
sign-in.component.ts
import { Component, OnInit } from '#angular/core';
import {Router} from '#angular/router'
#Component({
selector: 'app-sign-in',
templateUrl: './sign-in.component.html',
moduleId: module.id,
styleUrls: ['./sign-in.component.scss']
})
export class SignInComponent implements OnInit {
constructor(private router:Router) { }
authenticateUser(){
//Make request to signin endpoint, if successful save profile details and navigate to dashboard
this.router.navigate(['/dashboard'])
}
ngOnInit() {
}
}
dashboard.component.ts
import { Component} from '#angular/core';
import Chart from 'chart.js';
#Component({
selector: 'dashboard-cmp',
moduleId: module.id,
templateUrl: 'dashboard.component.html'
})
export class DashboardComponent{
constructor(){
}
}
app.component.html
<div *ngIf = "url=='/sign-up' || url =='/sign-in'">
<!-- <div class = "head">
<img class = "logo" src = "assets/img/quickList1.jpeg">
<app-sign-up></app-sign-up>
</div> -->
<div class = "my-container">
<div [ngStyle] = "{'height':url == '/sign-up' ? '500px' : '300px' }" class = "form-box">
<h1 style = "text-align:center;margin-top:12px;">QuickList {{url}}</h1>
<div class = "signForm">
<div *ngIf="url == '/sign-in'; else elseBlock"><app-sign-in></app-sign-in></div>
<ng-template #elseBlock><app-sign-up></app-sign-up></ng-template>
</div>
</div>
<div class = "alternate-box">
<div class = "prompt">
<div *ngIf="url == '/sign-in'; else loginPrompt">Don't have an account? <a routerLink = '/sign-up'>Sign up</a></div>
<ng-template #loginPrompt>Have an account? <a routerLink = '/sign-in'>Sign In</a></ng-template>
</div>
</div>
</div>
</div>
<router-outlet></router-outlet>
app.routing.ts
import { Routes } from '#angular/router';
import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';
import { SignInComponent } from './sign-in/sign-in.component';
import { SignUpComponent } from './sign-up/sign-up.component';
import { TableComponent } from './pages/table/table.component';
import { EmailsFoundComponent } from './emails-found/emails-found.component';
import { AppComponent } from './app.component';
import { EmptyComponent } from './empty/empty.component';
export const AppRoutes: Routes = [
{
path: '',
redirectTo: 'sign-in',
pathMatch: 'full',
},
{
path:'sign-in',
component: EmptyComponent
},
{
path:'sign-up',
component: EmptyComponent
},
{
path: '',
component: AdminLayoutComponent,
children: [
{
path: '',
loadChildren: './layouts/admin-layout/admin-layout.module#AdminLayoutModule'
}]},
]
lazy-loaded module routing
import { Routes } from '#angular/router';
import { DashboardComponent } from '../../pages/dashboard/dashboard.component';
import { UserComponent } from '../../pages/user/user.component';
import { TableComponent } from '../../pages/table/table.component';
import { TypographyComponent } from '../../pages/typography/typography.component';
import { IconsComponent } from '../../pages/icons/icons.component';
import { MapsComponent } from '../../pages/maps/maps.component';
import { NotificationsComponent } from '../../pages/notifications/notifications.component';
import { UpgradeComponent } from '../../pages/upgrade/upgrade.component';
export const AdminLayoutRoutes: Routes = [
{ path: 'dashboard', component: DashboardComponent },
{ path: 'user', component: UserComponent },
{ path: 'maillists', component: TableComponent },
{ path: 'typography', component: TypographyComponent },
{ path: 'icons', component: IconsComponent },
{ path: 'emails-found', component: MapsComponent },
{ path: 'find-emails', component: NotificationsComponent },
{ path: 'upgrade', component: UpgradeComponent }
];
dashboard.component.html
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="card card-stats">
<div class="card-body ">
<div class="row">
<div class="col-5 col-md-4">
<div class="icon-big text-center icon-warning">
<img src = "assets/img/hashtag.png">
</div>
</div>
<div class="col-7 col-md-8">
<div class="numbers">
<p class="card-category">Number of Mail Lists</p>
<p class="card-title">10
<p>
</div>
</div>
</div>
</div>
<div class="card-footer ">
<hr>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="card card-stats">
<div class="card-body ">
<div class="row">
<div class="col-5 col-md-4">
<div class="icon-big text-center icon-warning">
<img src = "assets/img/at.png">
</div>
</div>
<div class="col-7 col-md-8">
<div class="numbers">
<p class="card-category">Total Number of Emails</p>
<p class="card-title">1,345
<p>
</div>
</div>
</div>
</div>
<div class="card-footer ">
<hr>
</div>
</div>
</div>
<!-- <div class="col-lg-3 col-md-6 col-sm-6">
<div class="card card-stats">
<div class="card-body ">
<div class="row">
<div class="col-5 col-md-4">
<div class="icon-big text-center icon-warning">
<i class="nc-icon nc-vector text-danger"></i>
</div>
</div>
<div class="col-7 col-md-8">
<div class="numbers">
<p class="card-category">Errors</p>
<p class="card-title">23
<p>
</div>
</div>
</div>
</div>
<div class="card-footer ">
<hr>
<div class="stats">
<i class="fa fa-clock-o"></i> In the last hour
</div>
</div>
</div>
</div> -->
<div>
<div class="card card-stats">
</div>
</div>
</div>
<!-- <div class="row">
<div class="col-md-12">
<div class="card ">
<div class="card-header ">
<h5 class="card-title">Users Behavior</h5>
<p class="card-category">24 Hours performance</p>
</div>
<div class="card-body ">
<canvas id=chartHours width="400" height="100"></canvas>
</div>
<div class="card-footer ">
<hr>
<div class="stats">
<i class="fa fa-history"></i> Updated 3 minutes ago
</div>
</div>
</div>
</div>
</div> -->
<div class="row">
<div style = "display:block; margin-left:auto; margin-right:auto; margin-top:5%" class="col-md-5">
<div class="card ">
<div class="card-header ">
<h5 class="card-title"><i class="nc-icon nc-bullet-list-67"></i> Manage your mailing lists</h5>
<p class="card-category">Create, delete, add emails etc</p>
</div>
<div class="card-body ">
<ul>
<li>Insurance Companies</li>
<li>Medical Companies</li>
<li>Fin Tech</li>
<li>Web Dev</li>
<li>Accounting</li>
<li>Law Firms</li>
</ul>
</div>
<div class="card-footer ">
<p>Recently created lists.</p>
<!-- <div class="legend">
<i class="fa fa-circle text-primary"></i> Opened
<i class="fa fa-circle text-warning"></i> Read
<i class="fa fa-circle text-danger"></i> Deleted
<i class="fa fa-circle text-gray"></i> Unopened
</div> -->
<hr>
<!-- <div class="stats">
<i class="fa fa-calendar"></i> Number of emails sent
</div> -->
</div>
</div>
</div>
<div style = "display:block; margin-left:auto; margin-right:auto; margin-top:5%;" class="col-md-5">
<div class="card ">
<div class="card-header ">
<h5 class="card-title"><i class="nc-icon nc-zoom-split text-success"></i> Find Emails</h5>
<p class="card-category">Reach your target audience using search!</p>
</div>
<div class="card-body ">
<ul>
<li>info#info.com</li>
<li>info#info.com</li>
<li>info#info.com</li>
<li>info#info.com</li>
<li>info#info.com</li>
<li>info#info.com</li>
</ul>
</div>
<div class="card-footer ">
<p>Recently generated emails</p>
<hr>
<!-- <div class="stats">
<i class="fa fa-calendar"></i> Number of emails sent
</div> -->
</div>
</div>
<typography-cmp></typography-cmp>
<router-outlet></router-outlet>
I am trying to figure out what I am missing here. I am trying to pre-fill some data for a user profile page. That pre-fill data is coming from a Firestore DB collection. I have been able to prefill existing fields when editing requests, however, I am stumped at the user profile portion. I've included a link to a video showing what I am seeing. Also here is an error I am getting:
vue-firestore.js?73c3:1 Uncaught (in promise) Error: This document (profile) is not exist or permission denied.
at Object.eval [as next] (vue-firestore.js?73c3:1)
at next (index.cjs.js?e89a:21048)
at eval (index.cjs.js?e89a:19341)
Video of my issue
I believe I am experiencing a problem with one of the following files. I can supply more info if needed.
Login.vue
<template>
<div class="login">
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="loginTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<ul class="nav nav-fill nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-login" role="tab" aria-controls="pills-login" aria-selected="true">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-register-tab" data-toggle="pill" href="#pills-register" role="tab" aria-controls="pills-register" aria-selected="false">Signup</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-login" role="tabpanel" aria-labelledby="pills-login-tab">
<h5 class="text-center">Login Please</h5>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" v-model="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" #keyup.enter="login" v-model="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<button class="btn btn-primary" #click="login">Login</button>
</div>
</div>
<div class="tab-pane fade" id="pills-register" role="tabpanel" aria-labelledby="pills-register-tab">
<h5 class="text-center">Create New Account</h5>
<div class="form-group">
<label for="name">Your name</label>
<input type="text" v-model="name" class="form-control" id="name" placeholder="Your nice name">
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" v-model="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" v-model="password" class="form-control" id="password" placeholder="Password">
</div>
<div class="form-group">
<button class="btn btn-primary" #click="register">Signup</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {fb, db} from '../firebase'
export default {
name: "Login",
props: {
msg: String
},
data(){
return {
name: null,
email: null,
password: null
}
},
methods:{
login(){
fb.auth().signInWithEmailAndPassword(this.email, this.password)
.then(() => {
$('#login').modal('hide')
this.$router.replace('admin');
})
.catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
if (errorCode === 'auth/wrong-password') {
alert('Wrong password.');
} else {
alert(errorMessage);
}
console.log(error);
});
},
register(){
fb.auth().createUserWithEmailAndPassword(this.email, this.password)
.then((user) => {
$('#login').modal('hide')
// Add a new document in collection "profiles"
db.collection("profiles").doc("user.user.uid").set({
name: this.name,
})
.then(function() {
console.log("Document successfully written!");
})
.catch(function(error) {
console.error("Error writing document: ", error);
});
this.$router.replace('admin');
})
.catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
if (errorCode == 'auth/weak-password') {
alert('The password is too weak.');
} else {
alert(errorMessage);
}
console.log(error);
});
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>
Here is the Profile.vue
<template>
<div class="profile">
<div class="container">
<div class="intro h-100">
<div class="row h-100 align-items-center">
<div class="col-md-6 ml-3">
<h3>Profile settings</h3>
<p>
Change your profile settings here
</p>
</div>
<div class="col-md-5">
<img src="/img/svg/profile.svg" width="300" alt="" class="img-fluid">
</div>
</div>
</div>
<div class="profile-content">
<ul class="nav nav-pills ml-3" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="true">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="account-tab" data-toggle="tab" href="#account" role="tab" aria-controls="account" aria-selected="false">Account settings</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active pt-3" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" name="" v-model="profile.name" placeholder="Full name" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" v-model="profile.phone" placeholder="Phone" class="form-control">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input type="text" v-model="profile.address" placeholder="Address" class="form-control">
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<input type="text" v-model="profile.postCode" placeholder="Postcode" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="submit" #click="updateProfile" value="Save Changes" class="btn btn-primary w-100">
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade pt-3" id="account" role="tabpanel" aria-labelledby="account-tab">
<div class="container">
<div class="row">
<div class="col-md-">
<div class="alert alert-info">
Please use the Reset password email button for reseting the password. The form doens't work currently
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" v-model="account.name" placeholder="User name" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" v-model="account.email" placeholder="Email address" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" v-model="account.password" placeholder="New password" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" v-model="account.confirmPassword" placeholder="Confirm password" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="file" #change="uploadImage" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="submit" value="Save Changes" class="btn btn-primary w-100">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="button" #click="resetPassword" value="Reset password email" class="btn btn-success w-100">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { fb, db } from '../firebase';
export default {
name: "Profile",
components: {
},
props: {
msg: String
},
data(){
return {
profile: {
name:null,
phone:null,
address:null,
postcode:null
},
account:{
name:null,
email:null,
photoUrl:null,
emailVerified:null,
password:null,
confirmPassword:null,
uid:null
}
}
},
firestore(){
const user = fb.auth().currentUser;
return {
profile: db.collection('profiles').doc(user.uid),
}
},
methods:{
resetPassword(){
const auth = fb.auth();
auth.sendPasswordResetEmail(auth.currentUser.email).then(() => {
Toast.fire({
type: 'success',
title: 'Email sent'
})
}).catch((error) => {
console.log(error);
});
},
updateProfile(){
this.$firestore.profile.update(this.profile);
},
uploadImage(){
}
},
created(){
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>
Here is main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import jQuery from "jquery";
import { fb } from "./firebase";
import VueFirestore from "vue-firestore";
import Swal from "sweetalert2";
Vue.use(VueFirestore, {
key: "id",
enumerable: true
});
window.Swal = Swal;
const Toast = Swal.mixin({
toast: true,
position: "top-end",
showConfirmButton: false,
timer: 3000
});
window.Toast = Toast;
window.$ = window.jQuery = jQuery;
Vue.use(VueFirestore);
import "popper.js";
import "bootstrap";
import "./assets/app.scss";
Vue.component("Navbar", require("./components/Navbar.vue").default);
Vue.component("NavAdmin", require("./views/NavAdmin.vue").default);
Vue.component("Requests", require("./views/Requests.vue").default);
Vue.component(
"ViewBulkRequest",
require("./views/ViewBulkRequest.vue").default
);
Vue.config.productionTip = false;
let app = "";
fb.auth().onAuthStateChanged(function(user) {
if (!app) {
new Vue({
router,
render: h => h(App)
}).$mount("#app");
}
});
This was not resolved, we simply switched over to some new code. Thank you.
I have issue with my search script in Vue.js. I can't take property from navbar component to search component. Search component is connected with Search.vue file but it only has appeal to search component.
<template>
<div>
<Navbar></Navbar>
<div class="container">
<br>
<div class="row justify-content-center">
<div class="col-md-8">
<div v-if="showsearch == true">
<div v-for="post in posts.data" :key="post.id">
<div class="card">
<div class="card-header">{{post.title}}</div>
<div class="card-body text-center">
<div id="description">{{post.description}}</div>
<div class="embed-responsive embed-responsive-16by9" v-if="post.source_url !== null && post.source_url !== undefined">
<iframe id="source_url" class="embed-responsive-item" :src="post.source_url + '?showinfo=0'" frameborder="0" allowfullscreen/>
</div>
<div v-if="post.file_name !== null && post.file_name !== 'undefined'">
<img id="file_name" class="img-responsive" :src="'images/' + post.file_name"/>
</div>
<div id="author">Wrzucony przez: {{post.author}}</div>
</div>
</div>
<br>
</div>
</div>
<pagination :meta_data="meta_data" v-on:next="fetchSearch"></pagination>
<div v-if="showsearch == false"></div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
import Pagination from '/resources/js/components/Pagination'
import Navbar from '/resources/js/components/Navbar'
export default {
data(){
return {
posts: [],
post: {
id: '',
title: '',
description: '',
author: '',
source_url: '',
file_name: '',
},
meta_data: {
last_page: null,
current_page: 1,
prev_page_url: null
},
props: ['search'],
showsearch: false,
}
},
mounted() {
this.fetchSearch();
},
components: {
Pagination,
Navbar
},
methods: {
fetchSearch(page = 1){
axios.get('/api/post/search/' + this.props.search + '?page=' + page)
.then(res => {
this.posts = res.data;
this.search = res.data.search;
this.showsearch = true;
this.meta_data.last_page = res.data.last_page;
this.meta_data.current_page = res.data.current_page;
this.meta_data.prev_page_url = res.data.prev_page_url;
})
.catch(err => {
console.log(err);
})
},
},
}
</script>
<template>
<div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<nuxt-link to="/" class="navbar-brand nav-link">PanZiemniak</nuxt-link>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<nuxt-link to="/create" class="nav-link">Dodaj Ziemniaka</nuxt-link>
</li>
</ul>
<form class="form-inline my-2 my-lg-0 navbar-right" action="/search" method="GET">
<input class="form-control mr-sm-2" type="text" placeholder="Podaj tytuł" aria-label="search" id="search" name="search" v-model="search">
<button class="btn btn-primary" type="submit">Wyszukaj</button>
</form>
</nav>
<nuxt/>
</div>
</template>
<script>
export default {
props: ['search'],
data(){
return{
search: '',
}
}
}
</script>
My output in network:
URL Request:http://localhost/api/post/search/undefined?page=1
Method request:GET
Code: 200
Template :
<p-confirmDialog header="Confirmation" icon="fa fa-question-circle" appendTo="body" responsive="true"></p-confirmDialog>
<button type="button" class="btn btn-primary" (click)="confirm()" >Save</button>
Component:
confirm() {
console.log('confirm?');
this.confirmationService.confirm({
message: 'Are you sure that you want to update?',
accept: () => {
console.log('update clicked');
}
});
}
Output display:
Is there any css file etc that I need to include?
Template(full):
<!---------------- Meta and Title ---------------->
<meta charset="utf-8">
<title>Solid Waste Management System</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="tables-basic" data-spy="scroll" data-target="#nav-spy" data-offset="300">
<!-- -------------- Body Wrap -------------- -->
<div id="main">
<p-confirmDialog header="Confirmation" icon="fa fa-question-circle" appendTo="body" responsive="true"></p-confirmDialog>
<!-- -------------- Topbar -------------- -->
<header id="topbar" class="alt">
<div class="topbar-left">
<ol class="breadcrumb">
<li class="breadcrumb-icon">
<a href="#">
<span class="fa fa-eye"></span>
</a>
</li>
<li class="breadcrumb-active">
Organizational User
</li>
</ol>
</div>
<div class="topbar-right">
<a class="btn btn-primary btn-sm" href="Edit.html">
<i class="fa fa-edit"></i> Edit
</a>
<a class="btn btn-dark btn-sm" href="UserList.html">
<i class="fa fa-arrow-left"></i> Back
</a>
</div>
</header>
<!-- -------------- /Topbar -------------- -->
<!-- -------------- Content -------------- -->
<section id="content" class="table-layout animated fadeIn">
<!-- -------------- Column Center -------------- -->
<div class="chute chute-center">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-visible p10">
<div class="panel-body pn mn allcp-form theme-primary">
<form id="form-order" (ngSubmit)="onSubmit(f)" #f="ngForm">
<h6>OrgUser</h6>
<div class="section row ">
</div>
<!-- -------------- /section -------------- -->
<div class="section row">
<div class="col-md-6 ph10 mb5">
<label for="userid">User ID: </label>
<p-autoComplete (ngModelChange)="orguser.userid = $event" class="ui-autocomplete autocomplete" [suggestions]="results" (completeMethod)="search($event)"
(onSelect)="onSelect($event)" (onBlur)="onBlur($event.target.value)" field="userid"></p-autoComplete>
<input type="hidden" name="userid" [ngModel]="orguser?.userid">
</div>
<div class="col-md-6 ph10 mb5">
<label for="perid">Personnel ID:</label>
<input type="text" class="form-control" [ngModel]="orguser?.perid" (ngModelChange)="orguser.perid = $event" name="perid"
id="perid">
</div>
</div>
<div class="section row">
<div class="col-md-6 ph10 mb5">
<label for="Password">Password:</label>
<input type="text" class="form-control" [ngModel]="orguser?.password" (ngModelChange)="orguser.password = $event" name="password"
id="password">
</div>
<div class="col-md-6 ph10 mb5">
<label for="fullname">Name:</label>
<input type="text" class="form-control" name="fullname" disabled [ngModel]="orguser?.perfullname" (ngModelChange)="orguser.perfullname = $event"
id="fullname">
</div>
</div>
<div class="section row">
<div class="col-md-6 ph10 mb5">
<label for="type">CreatedOn:</label>
<input type="text" class="form-control" name="createdon" disabled [ngModel]="orguser?.createdon" (ngModelChange)="orguser.createdon = $event"
id="createdon">
</div>
<div class="col-md-6 ph10 mb5 ">
<label for="CreatedBy ">CreatedBy:</label>
<input type="text" class="form-control" name="createdby" disabled [ngModel]="orguser?.createdby" (ngModelChange)="orguser.createdby = $event"
[(ngModel)]="orguser.createdby" id="createdby">
</div>
</div>
<div class="section row">
<div class="col-md-6 ph10 mb5">
<label for="Deletedby">Deleted By:</label>
<input type="text" class="form-control" disabled name="Deletedby" id="Deletedby">
<div class="col-md-6 ph10 mb5">
<label for="isactive">IsActive:</label>
<input type="checkbox" id="isactive" [ngModel]="orguser?.isactive" (ngModelChange)="orguser.isactive = $event" name="isactive">
</div>
</div>
<div class="section row">
<div class="col-md-6 ph10 mb5">
<label for="isdeleted">Is Deleted:</label>
<input type="checkbox" id="isdeleted" [ngModel]="orguser?.isdeleted" (ngModelChange)="orguser.isdeleted = $event" name="isdeleted">
</div>
</div>
</div>
<!-- -------------- /section -------------- -->
<hr>
<!-- -------------- /section -------------- -->
<div class="section text-right mb10 ">
<button type="button" class="btn btn-primary" (click)="confirm()">Save</button>
</div>
<!-- -------------- /Panel Body -------------- -->
</form>
</div>
</div>
</div>
</div>
</div>
<!-- -------------- /Column Center -------------- -->
</section>
<!-- -------------- /Content -------------- -->
</div>
</div>
Componenet(full):
import { Component, OnInit, ViewChild } from '#angular/core';
import { orguser } from '../../Models/orguser';
import { PersonnelService } from '../../services/personnel.service';
import { OrguserService } from '../../services/orguser.service';
import {ConfirmDialogModule} from 'primeng/confirmdialog';
import {ConfirmationService} from 'primeng/api';
#Component({
selector: 'app-orguseraddedit',
templateUrl: './orguseraddedit.component.html',
styleUrls: ['./orguseraddedit.component.css'],
})
export class OrguseraddeditComponent implements OnInit {
orguser: orguser = new orguser();
val: any;
results: any[];
constructor(private _PersonnelService: PersonnelService, private _OrguserService: OrguserService,private confirmationService: ConfirmationService) {
}
confirm() {
console.log('confirm?');
this.confirmationService.confirm({
message: 'Are you sure that you want to update?',
accept: () => {
console.log('update clicked');
}
});
}
confirm1() {
this.confirmationService.confirm({
message: 'Are you sure that you want to Add?',
accept: () => {
console.log('add clicked');
},
key:"add"
});
}
search(event) {
this._OrguserService.GetOrgUsersForAutocomplete(event.query)
.subscribe((userdata: any[]) => { this.results = userdata;console.log('xxxx'); console.log(this.results); }, (error) => {
//this.statusMessage = 'Problem with service. Please try again.'
console.error(error);
});
}
handleDropdown(event) {
console.log(event.query);
//event.query = current value in input field
}
ngOnInit() {
//this.orguser=null;
}
onBlur(value){
this._OrguserService.selectOrgUsersById(value)
.subscribe((userdata: any[]) => { this.orguser = userdata[0]; }, (error) => {
console.error(error);
});
}
onSelect(value) {
this.getuser(value.userid);
}
getuser(value){
this._OrguserService.selectOrgUsersById(value)
.subscribe((userdata: any[]) => { this.orguser = userdata[0]; console.log(this.orguser); }, (error) => {
console.error(error);
});
}
onSubmit(f) {
this._OrguserService.addupdateOrguser(f.value)
.subscribe((res: any) => {
console.log(res);
this.orguser = res;
{ console.log('success'); this.getuser(f.value.userid); };
}, (error) => {
console.error(error);
});
}
}
interface IAutoCompleteItem {
value: any;
text: string;
markup?: string;
isFocus?: boolean;
}
After removing all the stylesheet references and everything else on the template this is what I am getting:
I am not sure what you exactly wrong. But I'Ll give the proper way to use primeng confirm dialog box. You can get what you missing from that
First you need import ConfirmationService from primeng package
import { ConfirmationService} from 'primeng/primeng';
Then you should inject this via constructor like
constructor(private confirmationService: ConfirmationService) { }
And use the below code while open confirmation dialog box
this.confirmationService.confirm({
message: 'Are you sure to delete this?',
icon: 'fa fa-question-circle',
header: 'Delete Confirmation',
accept: () => {
// do accept criteria
}
},
reject: () => {
//close the dialogue
}
});
And the HTML code Could be
<p-confirmDialog width="500"></p-confirmDialog>
EDIT
While looking your code, You are missing to assign any value for Confirmation object in header="Confirmation".So please remove header="Confirmation" and add that in confirmationservice parameter. also remove appendTo="body". Please try this and let me know
Finally, I have figured out what I was missing.
<link rel="stylesheet" href="https://unpkg.com/primeng#4.1.0/resources/themes/omega/theme.css" />
<link rel="stylesheet" href="https://unpkg.com/primeng#4.1.0/resources/primeng.min.css" />
Since I am new to angular I am not sure about the correct way to reference the local files in node_modules so I have used cdn.
It working.