The bootstrap-vue <b-modal> does not appear - bootstrap-vue

I need to create a modal that pop-ups when the button is clicked; i tried with bootstrap-vue, following the documentation but it didn't worked.
I put in my vue project but it doesn't work. The button is there, but when i click the modal doesn't appear. When i go to the console, it says that the directive is not recognized. I will put the code and the error below
<template>
...
<c-card>
<div>
<b-button v-b-modal.exclude class="center" size="lg" variant="danger">Excluir conta</b-button>
<b-modal id="exclude" title="bootstrapVue">
<p class="my-4">Are you sure that you want to exclude your account?</p>
</b-modal>
</div>
</c-card>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import cCard from '#/components/Card'
import pStatusAchievements from './_partials/StatusAchievements'
import pStatusApps from './_partials/StatusApps'
import pStatusNetwork from './_partials/StatusNetwork'
import pStatus from './_partials/Status'
import pStatusPublication from './_partials/StatusPublication'
import pMyAccount from './MyAccount'
import pPowerUp from './_partials/PowerUp'
import {BModal, VBModal} from 'bootstrap-vue'
const cContentHeader = () => import('#/components/ContentMiddleHeader')
export default {
name: 'Perfil',
components: {
cContentHeader,
cCard,
pStatusPublication,
pStatusNetwork,
pStatusApps,
pMyAccount,
pStatusAchievements,
pStatus,
pPowerUp,
BModal,
},
data () {
return {
pubStatus: 1200,
networkApps: [
{ name: 'network', title: 'rede' },
{ name: 'appsUsage', title: 'uso dos apps' }
]
}
},
directives: {
'b-modal': VBModal
},
That is the vue-warn
[Vue warn]: Unknown custom element: <b-modal> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <Perfil> at src/views/perfil/Perfil.vue
<MFeed> at src/views/mobile/mFeed.vue
<SlideXLeftTransition>
<NavbarContent> at src/views/mobile/mContent.vue
<NavbarContent> at src/layouts/main/MainLayout.vue
<FadeTransition>
<App> at src/App.vue
<Root

Related

Click event for group header on ag-grid angular

I am using ag-angular-grid in this I have group header and child columns also.
I want to know click event of that group header click.
below how I create header :
{
headerName: "<span id='performanceData'>Performance</span> <i class='fa fa-eye group-open-settings-button' aria-hidden='true' data-group='PerformanceData' ></i>",
groupId: "PerformanceData",
marryChildren: false,
onCellValueChanged:event=>{
console.log('trst');
},
children: [
{
headerName: "Talent Decision",
headerTooltip: "Talent Decision",
on click this i wants to open a popup.
any idea?
You will need to create a separate component for your custom group header. This can be done by implementing the IHeaderGroupAngularComp and using headerGroupComponentFramework, as stated on the documentation for the Header Group component.
Here is a rough sketch on how you can get it done.
First and foremost, on your main component that is using ag-grid, we will need to bind the input properties for frameworkComponents, and import your custom header group component.
On the component.html,
<ag-grid-angular style="width: 100%; height: 350px;" class="ag-theme-balham"
[columnDefs]="columnDefs"
[frameworkComponents]="frameworkComponents"
<!-- other properties -->
</ag-grid-angular>
On the component.ts, define the component which will be binded to your frameworkComponents, and for your custom header.
import { CustomHeaderGroupComponent } from '../custom-header-group-component/custom-header-group.component';
constructor() {
this.frameworkComponents = {
customHeaderGroupComponent: CustomHeaderGroupComponent,
};
this.columnDefs = [
{
headerGroupComponent: 'customHeaderGroupComponent',
// other properties for your group header
}
];
}
Do not forget to include your custom header group component on your module.ts too:
import { CustomHeaderGroupComponent } from "./custom-header-group-component/custom-header-group.component";
#NgModule({
imports: [
AgGridModule.withComponents(
[
CustomHeaderGroupComponent
]
),
// other imports
],
declarations: [
CustomHeaderGroupComponent,
// other components
],
// others
})
On your custom component.html template for the header group, you can then bind the (click) event to the header to it:
<div (click)="openPopup($event)"><span id='performanceData'>Performance</span> <i class='fa fa-eye group-open-settings-button' aria-hidden='true' data-group='PerformanceData' ></i></div>
And on your component.ts for the header group, you can define the openPopup() method:
import { Component } from '#angular/core';
import { IHeaderGroupAngularComp } from 'ag-grid-angular';
import { IHeaderGroupParams } from 'ag-grid-community';
.
.
.
export class CustomHeaderGroupComponent implements IHeaderGroupAngularComp {
params: IHeaderGroupParams;
agInit(params: IHeaderGroupParams) {
this.params = params;
}
.
.
openPopup() {
// handle the rest to enable to opening of the popup
}
}
The full working demo is actually available here, though it is a complete demo for all the features.

How to onRowClick redirected to another page with mui-datatables npm package?

I have a react app that uses package mui-datatables. I want to be redirected to "/edit-form" onRowClick, but it didn't work (nothing happens, no errors either).
import React, { Component } from "react";
import { Link as RouterLink } from "react-router-dom";
import Link from "#material-ui/core/Link";
import MUIDataTable from "mui-datatables";
class DataTable extends Component {
state={...}
redirectToForm = props => <RouterLink to="/edit-form" {...props}/>
render() {
const options = {
onRowClick: rowData => this.redirectToForm(rowData)
};
return (
<Link
color="secondary"
className={classes.button}
component={this.goToDetailedTable}
>
Detail
</Link>
<MUIDataTable
title={title}
columns={value.state.columnName}
data={value.state.rowData}
options={options}
/>
)
}
When I console.log(rowData), it did print out the row data:
const options = {
onRowClick: rowData => console.log(rowData)
};
Instead of using <Link/> try calling history from the history package and then just history.push('edit/form').

Angular 4 Data table implementation into my APP

I have created custom component DisplayTableComponent in my project. I want to incorporate Angular 4 Data table on my data for display purpose.
DisplayTableComponent.TS is as follows
import { Component, OnInit } from '#angular/core';
import { DataTableResource } from 'angular-4-data-table';
import { DataTableModule } from 'angular-4-data-table';
import persons from './data-table-demo1-data';
#Component({
selector: 'app-display-table',
templateUrl: './display-table.component.html',
styleUrls: ['./display-table.component.css']
})
export class DisplayTableComponent implements OnInit {
itemResource = new DataTableResource(persons);
items = [];
itemCount = 0;
constructor() {
this.itemResource.count().then(count => this.itemCount = count);
}
ngOnInit() {
}
reloadItems(params) {
// this.itemResource.query(params).then(items => this.items = items);
}
// special properties:
rowClick(rowEvent) {
console.log('Clicked: ' + rowEvent.row.item.name);
}
rowDoubleClick(rowEvent) {
alert('Double clicked: ' + rowEvent.row.item.name);
}
rowTooltip(item) { return item.jobTitle; }
}
My Html Template is as follows
<p>
display-table works!
</p>
<div style="margin: auto; max-width: 1000px; margin-bottom: 50px;">
<data-table id="persons-grid"
headerTitle="Employees"
[items]="items"
[itemCount]="itemCount"
(reload)="reloadItems($event)"
(rowClick)="rowClick($event)"
(rowDoubleClick)="rowDoubleClick($event)"
[rowTooltip]="rowTooltip"
>
<data-table-column
[property]="'name'"
[header]="'Name'"
[sortable]="true"
[resizable]="true">
</data-table-column>
<data-table-column
[property]="'date'"
[header]="'Date'"
[sortable]="true">
<ng-template #dataTableCell let-item="item">
<span>{{item.date | date:'yyyy-MM-dd'}}</span>
</ng-template>
</data-table-column>
<data-table-column
property="phoneNumber"
header="Phone number"
width="150px">
</data-table-column>
<data-table-column
[property]="'jobTitle'"
[header]="'Job title'"
[visible]="false">
</data-table-column>
<data-table-column
[property]="'active'"
[header]="'Active'"
[width]="100"
[resizable]="true">
<ng-template #dataTableHeader let-item="item">
<span style="color: rgb(232, 0, 0)">Active</span>
</ng-template>
<ng-template #dataTableCell let-item="item">
<span style="color: grey">
<span class="glyphicon glyphicon-ok" *ngIf="item.active"></span>
<span class="glyphicon glyphicon-remove" *ngIf="!item.active"></span>
</span>
</ng-template>
</data-table-column>
</data-table>
</div>
Now, The temporary source data file (data-table-demo1-data.ts) is as
export default [
{ 'name': 'Aaron 2Moore', 'email': 'aaa#aa.com', 'jobTitle': 'Regional Configuration Producer',
'active': true, 'phoneNumber': '611-898-6201', 'date': '2015-11-06T07:21:25.510Z' },
{ 'name': 'Yvonne Conroy Mrs.', 'email': 'sss#ssss.com', 'jobTitle': 'Global Mobility Orchestrator',
'active': false, 'phoneNumber': '115-850-0969', 'date': '2014-12-20T00:48:40.276Z' },
]
My app.Module.TS is as follows
import { BrowserModule } from '#angular/platform-browser';
import { NgModule,CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
import { Routes, RouterModule} from '#angular/router';
import { DataTableModule } from 'angular-4-data-table';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { MovieComponent } from './movie/movie.component';
import { DisplayTableComponent } from './display-table/display-table.component';
const appRoute: Routes =[
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{path:'home', component:HomeComponent},
{path:'Movie', component:MovieComponent},
{path:'table', component:DisplayTableComponent},
];
#NgModule({
declarations: [
AppComponent,
HomeComponent,
MovieComponent,
DisplayTableComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(appRoute)
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Could you please help me. I am getting below error
ERROR in ./node_modules/angular-4-data-table/src/index.ts
Module build failed: Error: C:\projects\Handson\website1\node_modules\angular-4-data-table\src\index.ts is missing from the TypeScript compilation. Please make sure
it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format
at AngularCompilerPlugin.getCompiledFile (C:\projects\Handson\website1\node_modules\#ngtools\webpack\src\angular_compiler_plugin.js:656:23)
at plugin.done.then (C:\projects\Handson\website1\node_modules\#ngtools\webpack\src\loader.js:467:39)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
# ./src/app/display-table/display-table.component.ts 13:29-60
# ./src/app/app.module.ts
# ./src/main.ts
# multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts
It seems you are using angular 5 cli and need to integrate Angular 4 Data table on to your project.
My advice is to use angular5-data-table instead of version 4 if you are using angular 5.You can find it on https://www.npmjs.com/package/angular5-data-table

Invisible react-jsonschema-form

I'm playing around the interesting approach to make forms just modeling json.
So I've read about react-jsonschema-form.
So, I've create a custom component which renders a form like this:
import React, { Component } from "react";
import Form from "react-jsonschema-form";
const schema = {
title: "Todo",
type: "object",
required: ["title"],
properties: {
title: {type: "string", title: "Title", default: "A new task"},
done: {type: "boolean", title: "Done?", default: false}
}
};
const log = (type) => console.log.bind(console, type);
export default class myFrom extends Component {
render(){
return (
<Form schema={schema}
onChange={log("changed")}
onSubmit={log("submitted")}
onError={log("errors")} />
);
}
}
Then I've referenced it in my create-react-app dummy project's App.js:
import myFrom from './custom-forms-test'
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<myFrom/>
</div>
);
}
}
export default App;
But nothing renders.
Now I'm stuck, maybe the form can't be a nested component? Is it possible?
Any hints?
Thanks!
React component names must start with a capital letter. Try renaming myForm to MyForm.

PrimeNG new Chart Release in R.C.1

I have update my primeNG to version to RC.1.
While doing so, I have made all the necessary changes required to run the application. Its been running fine.
Problem is that in this updated version, the Chart implementation has been changed.
Rather than using we have to use
After doing this change, I am not getting the component rendered on my browser. It is not giving any error in the console.
following is my code:
app.component.ts File:
import {Component} from '#angular/core';
import {HTTP_PROVIDERS} from '#angular/http';
import {InputText,DataTable,Button,Dialog,Column,Header,Footer} from 'primeng/primeng';
export class AppComponent {
data :any;
constructor(private carService: CarService) {
this.data = {
labels: ['A','B','C'],
datasets: [
{
data: [300, 50, 100],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
};
}
}
app.conponent.html:
<div>
<p-chart type="pie" [data]="data"></p-chart>
</div>
Please help.
Thanks in Advance.