I want to create grid list using two components. Parent and child. But it doesn't show anything.
parent(app-messages):
<mat-grid-list cols="2">
<app-message-item
*ngFor="let message of messages"
[message]="message"
(deleteMessage)="deleteMessage(message._id)"
(openUpdateDialog)="openUpdateDialog(message._id)"
>
</app-message-item>
</mat-grid-list>
child(app-message-item):
<mat-grid-tile>
<p>
{{ message.created_at | date:'medium' }}
</p>
<div [innerHTML]="message.content"></div>
<img [src]="message.fileImage ? environment+message.path : message.path" height="100">
<button (click)="onDelete(message._id)" class="del">x</button>
<button (click)="onUpdate(message._id)" class="del">Modify</button>
</mat-grid-tile>
Related
I am new to Vue and am using the Bootstrap modals to display product information. I have grid containers that each have a product picture, description, and two buttons. One of the buttons(More details >>), when clicked, would shoot a modal window that should show the very same product description and picture of the grid it was contained in.
<div id="myapp">
<h1> {{ allRecords() }} </h1>
<div class="wrapper" >
<div class="grid-container" v-for="product in products" v-bind:key="product.ID">
<div class="Area-1">
<img class="product_image" src="https:....single_product.jpg">
</div>
<div class="Area-2">
<div class = "amount">
{{ product.amount }}
</div>
{{ product.Description }}
</div>
<div class="Area-3">
<b-button size="sm" v-b-modal="'myModal'" product_item = "'product'">
More Details >>
</b-button>
<b-modal id="myModal" >
<h1> {{ product.Name }} </h1>
<h3> {{ product.Description }} </h3>
</b-modal>
</div>
<div class="Area-4">
<br><button>Buy</button>
</div>
</div>
</div>
</div>
var app = new Vue({
'el': '#myapp',
data: {
products: "",
productID: 0
},
methods: {
allRecords: function(){
axios.get('ajaxfile.php')
.then(function (response) {
app.products = response.data;
})
.catch(function (error) {
console.log(error);
});
},
}
})
Area 1, 2 and 4 work perfectly fine and they display the product data according to the v-for value and as expected respectively for each grid container. Area 3 is a problem here when I click the More details >> button, I just see a faded black screen. I am not sure what I am doing wrong here, would really appreciate some help.
Add a property selectedProduct, then on More Details button click event, assign the current product to the selectedProduct member as below :
HTML
<div class="Area-3">
<b-button size="sm" v-b-modal="'myModal'"
#click="selectProduct(product)">More Details >> </b-button>
<b-modal id="myModal">
<h1> {{ this.selectedProduct.Name }} </h1>
<h3> {{ this.selectedProduct.Description }} </h3>
</b-modal>
</div>
Javascript:
var app = new Vue({
'el': '#myapp',
data: {
products: "",
productID: 0,
selectedProduct: {Name: '', Description: '', Amount:0}
},
methods: {
allRecords: function(){
...
},
selectProduct: function(product)
{
this.selectedProduct = product;
}
...
}
I can't replicate the issue. I created JSFiddle to test:
https://jsfiddle.net/4289wh0e/1/
However, I realized multiple modal elements are displayed when I click on the "More Details" button.
I suggest you add only one modal in the wrapper and store the chosen product in a data variable.
https://jsfiddle.net/4289wh0e/2/
<div id="myapp">
<h1> {{ allRecords() }} </h1>
<div class="wrapper">
<div class="grid-container" v-for="product in products" v-bind:key="product.ID">
<div class="Area-1"><img class="product_image" src="https:....single_product.jpg"> </div>
<div class="Area-2">
<div class="amount">{{ product.amount }} </div>
{{ product.Description }}</div>
<div class="Area-3">
<b-button size="sm" v-b-modal="'productModal'" #click="chooseProduct(product)" product_item="'product'">More Details >> </b-button>
</div>
<div class="Area-4">
<br>
<button>Buy</button>
</div>
</div>
<b-modal id="productModal" v-if="chosenProduct">
<h1> {{ chosenProduct.Name }} </h1>
<h3> {{ chosenProduct.Description }} </h3>
</b-modal>
</div>
</div>
Vue.use(BootstrapVue)
var app = new Vue({
'el': '#myapp',
data: {
products: [],
chosenProduct: null
},
methods: {
chooseProduct: function (product) {
this.chosenProduct = product
},
allRecords: function(){
this.products = [
{
ID: 1,
Description: 'dek',
Name: 'Name',
amount: 100
},
{
ID: 2,
Description: 'dek 2',
Name: 'Name 2',
amount: 300
}
]
},
}
})
The reason you're just seeing a black screen is because you're not giving the b-modal in your v-for a unique ID.
So when you click the button it's actually opening all the modals at the same time, and stacking the backdrop making it look very dark.
Instead you could use your product ID (I'm guessing it's unique) in your modal ID to make it unique
<div id="myapp">
<h1> {{ allRecords() }} </h1>
<div class="wrapper" >
<div class="grid-container" v-for="product in products" v-bind:key="product.ID">
<div class="Area-1">
<img class="product_image" src="https:....single_product.jpg">
</div>
<div class="Area-2"><div class = "amount">{{ product.amount }} </div>
{{ product.Description }}
</div>
<div class="Area-3">
<b-button size="sm" v-b-modal="`myModal-${product.ID}`" product_item = "'product'">
More Details >>
</b-button>
<b-modal :id="`myModal-${product.ID}`" >
<h1> {{ product.Name }} </h1>
<h3> {{ product.Description }} </h3>
</b-modal>
</div>
<div class="Area-4">
<br><button>Buy</button>
</div>
</div>
</div>
</div>
Example pen:
https://codepen.io/Hiws/pen/qBWJjOZ?editors=1010
I am new with html, javascript and css. I believe that what I'm working with is Vue, which I'm completely new to. I am trying to make my page highlightable when I click on it. Currently, it only highlights when I hover, however I am not able to identify the id for the table from the html portion of the code.
Looked at multiple solutions online, however they all direct towards a premade table, however mine is a table that has multiple pages.
<template>
<div>
<h1>Questions</h1>
<el-row type="flex" justify="end">
<a-button type="primary" #click="createNewQuestion()">New Question</a-button>
<div v-if="this.categoryDetail !== null"> </div>
<a-button-group>
<a-button v-if="this.categoryDetail !== null" type="primary" #click="addQuestion()">Add Question</a-button>
<a-button v-if="this.categoryDetail !== null" :disabled="!hasSelected" type="danger" #click="removeQuestion()">Remove Question</a-button>
</a-button-group>
</el-row>
<hr>
<a-table :dataSource="tdata" :columns="columns"
:customRow="customRow"
#change="onChange" rowKey="id" :loading="loading">
<div
slot="filterDropdown"
slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
class="custom-filter-dropdown"
>
<a-input
v-ant-ref="c => searchInput = c"
:placeholder="`Search ${column.dataIndex}`"
:value="selectedKeys[0]"
#change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
#pressEnter="() => handleSearch(selectedKeys, confirm)"
style="width: 188px; margin-bottom: 8px; display: block;"
/>
<a-button
type="primary"
#click="() => handleSearch(selectedKeys, confirm)"
icon="search"
size="small"
style="width: 90px; margin-right: 8px"
>Search</a-button>
<a-button #click="() => handleReset(clearFilters)" size="small" style="width: 90px">Reset</a-button>
</div>
<a-icon
slot="filterIcon"
slot-scope="filtered"
type="search"
:style="{ color: filtered ? '#108ee9' : undefined }"
/>
<template slot="customRender" slot-scope="text">
<span v-if="searchText">
<template
v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))"
>
<mark
v-if="fragment.toLowerCase() === searchText.toLowerCase()"
:key="i"
class="highlight"
>{{fragment}}</mark>
<template v-else>{{fragment}}</template>
</template>
</span>
<template v-else>{{text}}</template>
</template>
<template slot="viewButton" slot-scope="text,record">
<a-button type="primary" #click="viewClicked(record)">View</a-button>
</template>
</a-table>
<el-dialog title="Question Details" :visible.sync="dialogDetailVisible" width="50%" :close-on-click-modal="false" append-to-body #close='closeQuestionDetailDialog'>
<QuestionDetail #afterSubmitChanges="afterSubmitDetail" :recordData="record_data" ref="question_detail"></QuestionDetail>
</el-dialog>
<el-dialog top="5vh" title="Select Questions" :visible.sync="dialogSelectVisible" width="50%" :close-on-click-modal="false" append-to-body #close='closeQuestionSelectDialog'>
<SelectQuestion #onCloseDialog="closeSelectDialog" ref="question_select"></SelectQuestion>
</el-dialog>
<el-dialog title="New Question" :visible.sync="dialogNewVisible" width="50%" :close-on-click-modal="false" append-to-body #close='afterCloseNewDialog'>
<NewQuestion #onCloseDialog="closeNewDialog" ref="question_new" :categoryDetail="categoryDetail"></NewQuestion>
</el-dialog>
</div>
</template>
Most of the solutions also use jquery while I'm working with javascript.
Please let me know if more detailed code is required. I'm not sure what to put here.
I have two lists , user can drag items from list 1 to list 2 and there is a button with text input so user can add his own input to the list 2 which will be automatically updated in my MYSQL database using axios.
This is AddItem script
addItembh(){
var input = document.getElementById('itemFormbh');
if(input.value !== ''){
// this line makes a new article with input value but no attribute :(
this.tasksNotCompletedNew.unshift({
behv_skilldesc:input.value
});
axios.post('../joborder/addAttrib', {
behv_skilldesc: input.value,
type:'behvnew',
joborder_id: this.joborder_id ,
alljobs_id: this.alljobs_id
}).then((response) => {
console.log(response.data);
}).catch((error) => {
console.log(error);
});
input.value='';
}
},
To be clear on the question : I need to assign an attribute to my new article thats getting created so I can find the text of that attrib later on deleteItem method
UPDATE :
<template>
<div class="row">
<div class="col-md-4 col-md-offset-2">
<section class="list">
<header>Drag or Add Row Here</header>
<draggable class="drag-area" :list="tasksNotCompletedNew" :options="{animation:200, group:'status',handle:'disabled'}" :element="'article'" #add="onAdd($event, false)" #change="update">
<article class="card" v-for="(task, index) in tasksNotCompletedNew" :key="task.prof_id" :data-id="task.prof_id" #change="onChange">
<span >
{{ task.prof_skilldesc }}
</span>
<span v-if="task.prof_skilldesc !== 'Drag Here'">
<button class="pull-left" #click="deleteItem(task.prof_id) + spliceit(index)" ><i class="fa fa-times inline"></i></button>
</span>
</article>
<article class="card" v-if="tasksNotCompletedNew == ''">
<span>
Drag Here
</span>
</article>
</draggable>
<div>
<input id='itemForm' />
<button v-on:click='addItem' class="btn btn-theme btn-success" style='margin-top:5px;' >Add a row </button>
</div>
</section>
</div>
<div class="col-md-4">
<section class="list">
<header>List of Skills ( Hold left click )</header>
<draggable class="drag-area" :list="tasksCompletedNew" :options="{animation:200, group:'status'}" :element="'article'" #add="onAdd($event, true)" #change="update">
<article class="card"
v-for="(task, index) in visibleskills"
:key="task.prof_id" :data-id="task.prof_id"
>
{{ task.prof_skilldesc }}
<div v-if="index == 4" style="display:none" >{{index2 = onChange(index)}}</div>
</article>
<pagination
v-bind:tasksCompletedNew ="tasksCompletedNew"
v-on:page:update ="updatePage"
v-bind:currentPage ="currentPage"
v-bind:pageSize="pageSize">
</pagination>
</draggable>
</section>
</div>
</div>
</template>
So on Add a row our method will be called .
Thanks for any help
I'm trying to reverse the direction of the ion-refresher, but switching the position doesn't seem to work like it does on the Ion-Infinite-Scroll
<ion-refresher [position]="isReverse ? 'bottom' : 'top'" pullingIcon="arrow-dropdown" pullingText="Pull to refresh"
refreshingSpinner="circles" refreshingText="Refreshing..." (ionRefresh)="refresh($event)">
</ion-refresher>
<ion-infinite-scroll *ngIf="!isPagingComplete" (ionInfinite)="doInfinite($event)" [position]="isReverse ? 'bottom' : 'top'">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
<div *ngIf="isNotSliding">
<template *ngFor="let entity of entityList" [ngTemplateOutlet]="template" [ngOutletContext]="{entity: entity}">
</template>
</div>
<div *ngIf="!isNotSliding">
<ion-item-sliding class="page-list-sliding-item" *ngFor="let entity of entityList" #item>
<ion-item class="page-list-inner-item" (click)="config.onItemClick(entity)" >
<template [ngTemplateOutlet]="template" [ngOutletContext]="{entity: entity}"></template>
</ion-item>
<ion-item-options side="right">
<button ion-button color="danger" *ngIf="config && config.canDelete" (click)="delete(entity.id)">
<ion-icon name="trash"></ion-icon>Delete
</button>
<button ion-button color="dark" >
<ion-icon name="more"></ion-icon>More
</button>
</ion-item-options>
</ion-item-sliding>
</div>
How can I reverse the scroll on the Ion-Refresher?
The ion-refresher component is a really special one.
It will always be placed at the top of the nearest ion-content component.
There is no default option or configuration to make the reverse ion-refresher possible.
I'm currently having a problem with ng-repeat and limiting the amount of elements being displayed in my view. I'm wondering if it has to do with being a nested loop. Here is the code:
<li style="cursor:pointer; margin:8px;" class="span3" ng-repeat="psp in preSplitPrompts" ng-click="selectRelatedSplitPanels($index)">
<div ng-class="$first ? 'panelBackground' : 'altPanelBackground'" class="thumbnail splitPanel">
<h3>{{ (psp.promptname) ? psp.promptname : "No Name From API" }}</h3>
<hr>
<h2 ng-repeat="postsplit in psp.postSplit | limitTo: 1">{{ postsplit.metrics.preSplitTotalCount ? postsplit.metrics.preSplitTotalCount : 0 }}</h2>
<p>Visits</p>
</div>
</li>
I've tried limiting the list item by doing limitTo:1 and that works fine. It's only when trying to limit the postsplit. Thanks for the help.
EDIT:
This code works:
<li style="cursor:pointer; margin:8px;" class="span3" ng-repeat="psp in preSplitPrompts | limitTo: 1" ng-click="selectRelatedSplitPanels($index)">
<div ng-class="$first ? 'panelBackground' : 'altPanelBackground'" class="thumbnail splitPanel">
<h3>{{ (psp.promptname) ? psp.promptname : "No Name From API" }}</h3>
<hr>
<h2 ng-repeat="postsplit in psp.postSplit">{{ postsplit.metrics.preSplitTotalCount ? postsplit.metrics.preSplitTotalCount : 0 }}</h2>
<p>Visits</p>
</div>
</li>
Here is the data object:
Try this:
ng-class="{$first ? 'panelBackground' : 'altPanelBackground'}"