I'm so new in VueJS and still don't control much of its funcionalities,
I'm trying when I update or delete something in my window not need to refresh to see the changes...how can I do it, please?
My functions work perfectly in my controller, just need to solve the question of seeing changes.
Here I post my code if it helps...thank you very much!!
UpdateProfile.vue:
<div class="field">
<label class="label">Schedules</label>
<!--Edit and Delete Schedules-->
<div v-for="schedule in sortedDays(data.schedulesDisplayed)" class="control">
<div class="container">
<div class="field">
<label class="label">Week Day: {{schedule.week_day}}</label>
</div>
<div class="row">
<div class="col">
<div class="row">
Opening Time: <input class="input" type="text" placeholder="Pub schedules" v-model="schedule.opening_time">
</div>
</div>
<div class="col">
<div class="row">
Closing Time: <input class="input" type="text" placeholder="Pub schedules" v-model="schedule.closing_time">
</div>
</div>
</div>
<div class="field">
<div class="buttons is-left">
<div class="button is-info" #click="updatePubSchedule(schedule)">
<span class="icon"><i class="fas fa-save fa-lg"></i></span>
<span>Save</span>
</div>
<div class="button is-danger" #click="deletePubSchedule(schedule)">
<span class="icon"><i class="far fa-trash-alt"></i></span>
<span>Delete Schedule</span>
</div>
</div>
</div>
</div>
</div>
</div>
updatePubSchedule(schedule){
var instance = this;
this.api.put('/pubschedules/update/' + this.data.id, schedule).then(response => {
console.log(schedule);
//data = response.data;
instance = response.data;
});
},
deletePubSchedule(schedule){
var instance = this;
this.api.delete('/pubschedules/delete/' + this.data.id, schedule).then(response => {
//data = response.data;
instance = response.data;
});
},
And in my controller:
/**
* #param Pub $pub
*/
public function updatePubSchedule(Pub $pub)
{
//json_die(request()->all());
Schedule::where([
['pub_id','=', $pub->id],
['week_day' ,'=', request()->get('week_day')]
])->update(request()->all());
}
/**
* #param Pub $pub
*/
public function deletePubSchedule(Pub $pub)
{
Schedule::where([
['pub_id','=', $pub->id],
['week_day' ,'=', request()->get('week_day')]
])->delete();
}
I don't know how you get your initial data but you can have a GET request that gets fresh data from the laravel after you update/delete initial data.
With the response from that request you can update your data.schedulesDisplayed prop.
Important! You need to set the :key attribute in the div that uses v-for rendering like this
<div v-for="(schedule, index) in sortedDays(data.schedulesDisplayed)" :key="index" class="control">
I used the index for the sake of this example but you should use a unique property of sortedDays return.
Related
I'm working with Reactive Forms and I'm trying to pass my form down to child components, but I'm running into the error above. Initially at the top level of the form I was using a FormArray to hold my form and that was working fine before I tried passing it down to the child components. Thanks to this post I now know that the top level of a form should be a FormGroup and the FormArray should be a child of the FormGroup.
So now I am nesting my FormArray inside of a FormGroup and I'm getting the error above. I'm not sure what I'm doing wrong? Below in the relevant code.
// Parent component.ts
ngOnInit() {
if (!!this.rows) {
this.tableForm = new FormArray([]);
this.rows.forEach((row) => {
this.rowGroup = new FormGroup({})
this.columns.forEach(column => {
this.rowGroup.addControl(column.key, new FormControl(row[column.key]));
});
this.tableForm.push(this.rowGroup);
})
this.tableGroup = new FormGroup({
rows: new FormControl(this.tableForm)
})
}
}
// Parent HTML
<section
*ngIf="!!modal"
class="modal__mask">
<section
class="modal__container"
#carousel
[ngStyle]="{'left': start + 'px'}"
(window:resize)="onResize($event)"
[formGroup]="tableGroup">
<div
*ngFor='let row of selectedRows; let i = index'
class="modal modal__large"
[formArrayName]="rows">
<div
[formGroupName]="i"
[ngClass]="{'opacity': modalPage !== i}">
<div class="modal__header modal__header--large">
<h6>Edit Employee Details</h6>
</div>
<div class="u-flex u-wrap">
<div
class="u-flex modal__body"
style="width: 50%"
*ngFor="let column of columns">
<div
*ngIf="column.label"
class="input__wrapper"
[ngClass]="{'input__wrapper--inline': layout === 'horizontal'}">
<z-input
*ngIf="column.label"
class="u-maxX"
[group]="tableGroup"
[config]="column">
</z-input>
<!-- <div>
<label
class="input__label">
<p class="t-bold t-data">{{column.label}}</p>
</label>
<div class="z-input__default">
<input
class="input u-maxX"
[formControlName]="column.key"
[value]="row[column.key]">
</div>
</div> -->
</div>
</div>
<section class="modal__footer u-fillRemaining">
<div class="u-flex">
<button
class="button button--medium"
(click)="nextSelectedRow()">
<div class="button__content">
<i
class="icon icon--medium"
*ngIf="!!icon">
{{icon}}
</i>
<span>Skip</span>
</div>
</button>
</div>
<div class="u-flex">
<button
class="button button--low"
(click)="reset(row, i)">
<div class="button__content">
<i
class="icon icon--medium"
*ngIf="!!icon">
{{icon}}
</i>
<span>Reset</span>
</div>
</button>
<button
class="button button--low"
(click)="saveChanges(row, i)">
<div class="button__content">
<i
class="icon icon--medium"
*ngIf="!!icon">
{{icon}}
</i>
<span>Save Changes</span>
</div>
</button>
</div>
</section>
</div>
</div>
</div>
// Child component.ts
#Input() config;
#Input() group: FormGroup;
#Input() view: string;
#Input() layout: string;
// Child HTML
<div
class="input__wrapper"
[ngClass]="{'input__wrapper--inline': layout === 'horizontal'}"
[formGroup]="group"
[ngSwitch]="config.type">
<label
class="input__label"
*ngIf="!!config.label">
<p class="t-bold t-data">{{config.label}}</p>
</label>
<z-select
*ngSwitchCase="'select'"
[config]="config"
[group]="group"
[view]="view"
gridColumn="1 / 5">
</z-select>
<div class="z-input__default">
<input
*ngSwitchDefault
class="input u-maxX"
[formControlName]="config.key"
[attr.type]="config.type"
[attr.placeholder]="config.placeholder">
</div>
I've shown part f the code because it is a big controller and view. I'm trying to pass k-options with data to the modal but it isn't set.
vm.subItemOptions = {};
vm.editPlanSubItem = function() {
// some custom logic to get the data
var params = {
planItems: planItems,
child: child,
index: index,
key: key
};
vm.subItemOptions = params; // trying to pass data to modal unsuccessfully
vm.editPopup.center();
vm.editPopup.open();
}
<div ng-controller="MainCtrl as vm">
<div class="demo-section k-content">
<button class="k-button" ng-click="vm.editPlanSubItem()">Edit</button>
</div>
<div kendo-window="vm.editPopup" k-options="vm.subItemOptions"
k-width="600" k-height="200" k-visible="false"
k-content="{ url: siteURL + '/public/scripts/views/edit-sub-item.html'}"
k-on-open="win2visible = true" k-on-close="win2visible = false"></div>
</div>
Part of the modal view edit-sub-item.html is:
<div class="modal-dialog small-dialog" id="modal-edit-sub-planner">
<div class="modal-content">
<div class="color-line"></div>
<div class="modal-header">
<h3 class="modal-title" ng-bind="message"></h3>
<div class="row">
<div class="col-md-12">
<label class="item-goal">Goal</label>
<div class="plan-items-td">
<input ng-disabled="params.planItems[0].Status === 'Approved'" type="text"
class="k-textbox plan-items"
ng-model="params.planItems[params.index].children[params.key].Goal">
</div>
</div>
</div>
//other code
</div>
</div>
</div>
How could I pass params to the modal?
If you are using angularjs 1.5+ I would recommend to use a component
(and if you even have an opportunity go with the component based architecture like React, Angular and Vue.js are going with). Anyways, with the components it's pretty straight forward. First the parent component:
<div ng-controller="MainCtrl as vm">
<div class="demo-section k-content">
<button class="k-button" ng-click="vm.editPlanSubItem()">Edit</button>
</div>
<div kendo-window="vm.editPopup" k-options="vm.subItemOptions"
k-width="600" k-height="200" k-visible="false"
k-on-open="win2visible = true" k-on-close="win2visible = false">
<edit-sub-item params="vm.subItemOptions"></edit-sub-item>
</div>
</div>
Then in the edit-sub-item component:
// Add any injected param in this component like $scope if you need, or any service that you created
function editSubItemController(){
var vm = this;
// Need to be in one of the component lifecycle hooks
vm.$onChanges = function(props){
console.log(vm.params);
}
}
angular.module('ApplicationName').component("editSubItem", {
controllerAs: 'vm',
controller: editSubItemController,
templateUrl: './public/scripts/views/edit-sub-item.html',
bindings: {
params: '<' //one way binding
}
});
<div class="modal-dialog small-dialog" id="modal-edit-sub-planner">
<div class="modal-content">
<div class="color-line"></div>
<div class="modal-header">
<h3 class="modal-title" ng-bind="message"></h3>
<div class="row">
<div class="col-md-12">
<label class="item-goal">Goal</label>
<div class="plan-items-td">
<input ng-disabled="vm.params.planItems[0].Status === 'Approved'" type="text"
class="k-textbox plan-items"
ng-model="vm.params.planItems[vm.params.index].children[vm.params.key].Goal">
</div>
</div>
</div>
//other code
</div>
</div>
</div>
I have parent component with all teams and child component for displaying each of team in box using *ngFor and #Input. All child components are displayed fine but when I want to change each of them opening modal I always get the data from first object in array of teams.
team.component.html
<app-team-box *ngFor="let team of teams" [team]="team"></app-team-box>
team-box.component.html
<div class="ibox">
<div class="ibox-title">
<h5>{{this.team.name}}</h5>
<a class="btn btn-xs" (click)="openEditTeamModal(this.team)">Edit</a>
</div>
</div>
<div class="modal fade" id="edit_team_modal">
<div class="modal-dialog">
<div class="modal-content">
<form role="form" (ngSubmit)="editTeam()" novalidate>
<div class="modal-body">
<div class="row" *ngIf="this.team">
<label>Team name:</label>
<input type="text" id="name" name="name" [(ngModel)]="this.team.name" #name="ngModel">
</div>
</div>
<div class="modal-footer">
<button type="submit">Save</button>
</div>
</form>
</div>
</div>
team-box.component.ts
export class TeamBoxComponent implements OnInit {
#Input() team;
constructor(private teamService: TeamService) {}
openEditTeamModal(selectedTeam): void {
this.team = selectedTeam;
$("#edit_team_modal").modal();
$(".modal").appendTo("html");
}
editTeam(): void {
this.teamService.update(this.team).subscribe((team: Response) => {
$("#edit_team_modal").modal("hide");
});
}
}
The problem is when I change first one everything is fine, modal is populated with name and after changing it's get saved. But when I click on edit button for example second team, in modal I get the data for first team. Why this.team is always referencing to first object in array of teams?
I have an issue in removing the particular item from an array.I have tried using splice but, the last row is removing instead of the particular row.I am providing the plunker link here :
$scope.rows.splice($index, 1);
https://plnkr.co/edit/WETSLqOXlTwiHq4p9IUt?p=preview
Any help would be appreciated . Thanks
just try the following
http://jsfiddle.net/oymo9g2f/2/
you have some problem with your array splice
Not quite sure what you're trying to accomplish (as your code looks like you are quite new to AngularJS, but I created a different (but similar) implementation that should fit your needs (it's easier to read IMHO and is scalable):
HTML:
<div class="card ">
<form name="add_destination_form" class="col s12" ng-submit="add_destination_form.$valid && addDestination_Details(destination_details)" novalidate>
<div class="row" ng-repeat="row in rows track by $index">
<div class="col s12 m4" >
<label for="destination_features1" >Features</label>
<textarea id="destination_features1" name="destination_features1_{{$index}}" ng-model="destination_details.destination_features1[$index]" placeholder="Data Here" type="text" ></textarea>
</div>
<button ng-show="show_removebtn" id="removeButton" ng-click="removeDynamically($index)" type="button">Remove</button>
</div>
<div class="col s12 m4">
<button class="waves-effect waves-light btn" ng-click="addDynamically()" type="button">Add More</button>
</div>
<div class="row">
<div class="col s12 m4">
<button type="submit">Submit</button>
</div>
</div>
</form>
</div>
JavaScript:
$scope.rows = [{
"row_num": 0,
"text": ""
}];
$scope.addDynamically = function (index) {
console.log(index);
$scope.rows.push({
"row_num": index,
"text": ""
});
};
$scope.removeDynamically = function (index) {
$scope.rows.splice(index, 1);
};
Plunker
just use this code. For text area used ng-model="row.value" and related change in controller
in html: just shown ng-repeat part
<div class="row" ng-repeat="row in rows track by $index">
<div class="col s12 m4" >
<label for="destination_features1" >Features</label>
<textarea id="destination_features1" name="destination_features1_{{$index}}" ng-model="row.value" placeholder="Data Here" type="text" ></textarea>
</div>
<button ng-show="show_removebtn" id="removeButton" ng-click="removeDynamically($index)" type="button">Remove</button>
</div>
and in controller:
$scope.rows = [];
$scope.current_rows = 0;
$scope.destination_details = {};
$scope.rows.push({
row_num: $scope.current_rows,
value: ''
});
$scope.addDynamically = function() {
$scope.current_rows += 1;
$scope.rows.push({
row_num: $scope.current_rows,
value: ''
});
if ($scope.rows.length > 1) {
$scope.show_removebtn = true;
}
};
$scope.removeDynamically = function(index) {
if (index > -1) {
$scope.rows.splice(index, 1);
}
};
You need to add line:
$scope.destination_details = {"destination_features1": ['1']};
at the beginning.
Also need to remove model properly when removing element:
$scope.destination_details.destination_features1.splice($index, 1);
https://plnkr.co/edit/pe44Moqe7ymegYFTrXJu?p=preview
I want the user to press the $scope.getJobList button to get the value of the $scope.getIdJobs variable. I am trying to solve this with the push functionality but it is not working.
Am I doing something wrong?
jsfidle
Example
$scope.getIdJobs = function(getIdJobs) {
$scope.getIdJobs = $filter('filter')( $scope.products, {id:getIdJobs})[0];
$scope.getJobList = function(currObj){
$scope.workflows[0].Steps.push($scope.getIdJobs); // It will add a new step ($scope.newStep) in first workflow's Steps
console.log($scope.workflows);
//$scope.workflows.push($scope.getIdJobs); // line that changed
$scope.workflows = job_detail.addJob(currObj)
console.log($scope.workflows);
};
//console.log("Estou dentro do getidJobs " + getIdJobs);
}
html
<article dir-paginate="product in filteredJobs | filter:searchTerm | orderBy: sorting.order:sorting.direction | itemsPerPage:5" id="{{product.id}}" class="productlist product col-sm-12">
<div class="inner-content">
<div class="clearfix">
<div class="col-md-8 col-sm-8 col-xs-8">
<h4 class="productname" name="{{product.Categoria}}"><a data-ng-href="#/job/{{product.id}}" ng-click="getIdJobs(product.id)">{{product.Title}}</a></h4>
<!--<h4 class="productname" name="{{product.Categoria}}"><a data-ng-href="#/job/{{filteredJobs.indexOf(product)}}">{{product.Title}}</a></h4>-->
<h4 style="color: gray;"><a data-ng-href="#/empresa">{{product.Empresa}}</a></h4>
</div>
</div>
</div>
</article>