We Keep Coding

Fetching values from database and showing it in a form upon button click in Laravel

We have a table whose contents are fetched from database. Now, we want to fill a form by data of the relevant row of table that was clicked in Laravel.
This is how the table (left) and the form looks
Table code:
<table id="category_table" class="table table-bordered table-hover">
<thead>
</thead>
<tbody>
#foreach($cat as $c)
<tr>
<?php $index=1;?>
<td>{{$c->cat_name}}</td>
<td width="5%"><button class="btn btn-info" onclick=fill(this)><i class="fa fa-arrow-right"></i></button>
</tr>
<?php $index=$index+1;?>
#endforeach
</tbody>
<tfoot>
</tfoot>
</table>
This is a part of form code:
<div class="card-body">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter Name" value="">
</div>
<div class="form-group">
<label for="short_name">Short Name</label>
<input type="text" class="form-control" id="short_name" placeholder="Short Name">
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea class="form-control" id="description" placeholder="Description"></textarea>
</div>
This is the javascript part that fetched the selected table row value through which we need to fetch other values from the database into form:
<script type="text/javascript">
function fill(e)
{
var $item = $(e).closest("tr").find("td:first").text();
document.getElementById("name").value= $item;
}
}
</script>

You can do something like this:
<button class="btn btn-info" data-model='{{$c->toJson()}}' onclick="fill()">
// then in js something like
function fill() {
let $item = $(this).attr("data-model");
console.log($item); // item should have all the data
}
Edit:
The questioner didn't make use of Laravel Eloquent Models. That's why the solution, in this case, deals with normal php objects like so:
data-model='{{ json_encode($c)}}'

Copy input fields created from *ngFor to input fields in an outer modal

I want to build a pop-up modal edit form to change individual table values in a dynamic grid. Right now, the input fields appear on button click using the function editToggle(i). No more than 4 input fields will ever appear because they are meant to edit the 4 values in my data model. However, the input fields (and values) are being dynamically generated with *ngFor. I need some way to pass/copy those input fields to my modal to edit there instead of on the grid itself (where they currently appear after clicking the edit button).
I have tried to use [(ngModel)] to clone but it does not work. I have tried to pass them using functions but the values return null. Because the HTML only shows one input field (because they are being dynamically created with *ngFor) I do not know of a way to individually pass the values.
<div>
<table align="center">
<tr>
<th>
List of Providers
</th>
</tr>
</table>
<table id="thetable" align="center">
<tr>
<th>Application ID</th>
<th>Client Name</th>
<th>Version</th>
<th>API Key</th>
<th>Protected Secret</th>
<th>EDIT/DELETE</th>
</tr>
<tr ng-app="tblRowApp" *ngFor="let prov of providers; let i = index">
<td *ngFor="let col of columns">
<span class="field" *ngIf="i !== index">
{{prov[col]}}
</span>
<span *ngIf="i === index">
<input [(ngModel)]="inputClientName" class="table" value="{{prov[col]}}" (change)="EditItem(i, col, $event.target.value)" type="text" placeholder="{{prov[col]}}">
</span>
<td>
<span *ngIf="editing && i === index">
<button (click)="save()">Save</button>
</span>
<span *ngIf="i !== index">
<button class="edit" name="editButton" (click)="editToggle(i); openEditForm()">/</button>
<button class="delete" (click)="deleteRow(i)">x</button>
</span>
</td>
</tr>
</table>
<!-- The EDITING Modal -->
<div id="editForm" class="modal_edit">
<div class="modal-content_edit">
<span (click)="save()" class="close">×</span>
<h2 style="margin-bottom: 70px">Edit OAuthAppProvider</h2>
<div>
<label style="margin-bottom: 20px">
Client Name:
</label>
<input [(ngModel)]="inputClientName" id="editClientName" type="text">
</div>
<div>
<label style="margin-bottom: 20px">
Version
</label>
<input id="editClientVersion" type="text">
</div>
<div>
<label style="margin-bottom: 20px">
API Key:
</label>
<input id="editClientAPIKey" type="text">
</div>
<div>
<label style="margin-bottom: 20px">
Protected Secret
</label>
<input id="editClientProtectedSecret" type="text">
</div>
<button style="float: right" class="add" (click)="save()">
<h4 style="font-style: bold">Save</h4>
</button>
<button class="cancel" (click)="save()">
<h4 style="font-style: bold">Cancel</h4>
</button>
</div>
</div>
</div>
export const PROVIDERS: any[] =
[
{
AppID: "11",
ClientName: "sampleclientname1",
apiKey: "sampleapikey1",
Version: "1.0",
protectedsecret: "samplesecret1"
},
{
AppID: "12",
ClientName: "sampleclientname2",
apiKey: "sampleapikey2",
Version: "1.0",
protectedsecret: "samplesecret2"
},
{
AppID: "13",
ClientName: "sampleclientname3",
apiKey: "sampleapikey3",
Version: "1.0",
protectedsecret: "samplesecret3"
},
{
AppID: "14",
ClientName: "sampleclientname4",
apiKey: "sampleapikey4",
Version: "1.0",
protectedsecret: "samplesecret4"
}
]

You can set a variable named something like selectedRowData and set the provider as its value when the user clicks the edit button. The value attribute of the inputs on the modal can be set to the properties of the selected row. It's difficult to tell what the functionality of the other methods is supposed to be without the component code so I made some assumptions. Let me know if you have any other questions about it.
Here's a link to a StackBlitz.
EDIT
The data is only being bound one way via the [value] attribute and there isn't a form object keeping track of all the changes like there would be using Reactive Forms so a model should be created first.
I commented out the original solution and added updates below. The selectedRowData variable is instantiated with a provider object with empty properties. The modal has been updated to use two-way binding with [(ngModel)]. The StackBlitz has also been updated.
The table is updated as the user types their edits into the form. The save button doesn't need to be used unless the data needs to be persisted somewhere.
Check out the Angular Forms Documentation it should help with how to pass form data around between components. What you've created here is similar to Template-driven Forms.
Component
// selectedRowData = null;
selectedRowData = {
AppID: "",
ClientName: "",
apiKey: "",
Version: "",
protectedsecret: ""
};
editToggle(rowData) {
this.selectedRowData = rowData;
}
Table
<div>
<table align="center">
<tr>
<th>
List of Providers
</th>
</tr>
</table>
<table id="thetable" align="center">
<tr>
<th>Application ID</th>
<th>Client Name</th>
<th>Version</th>
<th>API Key</th>
<th>Protected Secret</th>
<th>EDIT/DELETE</th>
</tr>
<tr ng-app="tblRowApp" *ngFor="let prov of providers; let i = index">
<td *ngFor="let col of columns">
<span class="field" *ngIf="i !== index">
{{prov[col]}}
</span>
<span *ngIf="i === index">
<input [(ngModel)]="inputClientName" class="table" value="{{prov[col]}}"
(change)="EditItem(value)" type="text" placeholder="{{prov[col]}}">
</span>
<td>
<span *ngIf="editing && i === index">
<button (click)="save()">Save</button>
</span>
<span *ngIf="i !== index">
<button class="edit" name="editButton" (click)="editToggle(prov); openEditForm()">/</button>
<button class="delete" (click)="deleteRow(i)">x</button>
</span>
</td>
</tr>
</table>
Modal
<!-- The EDITING Modal -->
<div id="editForm" class="modal_edit">
<div class="modal-content_edit">
<span (click)="save()" class="close">×</span>
<h2 style="margin-bottom: 70px">Edit OAuthAppProvider</h2>
<div>
<label style="margin-bottom: 20px">
Client Name:
</label>
<!-- <input id="editClientName" type="text" [value]="selectedRowData?.ClientName"> -->
<input id="editClientName" type="text" [(ngModel)]="selectedRowData.ClientName">
</div>
<div>
<label style="margin-bottom: 20px">
Version
</label>
<!-- <input id="editClientVersion" type="text" [value]="selectedRowData?.Version"> -->
<input id="editClientVersion" type="text" [(ngModel)]="selectedRowData.Version">
</div>
</div>
<div>
<label style="margin-bottom: 20px">
API Key:
</label>
<!-- <input id="editClientAPIKey" type="text" [value]="selectedRowData?.apiKey"> -->
<input id="editClientAPIKey" type="text" [(ngModel)]="selectedRowData.apiKey">
</div>
<div>
<label style="margin-bottom: 20px">
Protected Secret
</label>
<!-- <input id="editClientProtectedSecret" type="text" [value]="selectedRowData?.protectedsecret"> -->
<input id="editClientProtectedSecret" type="text" [(ngModel)]="selectedRowData.protectedsecret">
</div>
<button style="float: right" class="add" (click)="save()">
<h4 style="font-style: bold">Save</h4>
</button>
<button class="cancel" (click)="save()">
<h4 style="font-style: bold">Cancel</h4>
</button>
</div>
</div>
</div>

How to edit and update form input values in vue.js?

I am getting up the details in a form for a hotel entry with basic details and viewing it in Room.vue. The created values were displayed here but here i need to give edit option for the filled details. When i click the edit, the page should redirect to RoomsEdit.vue and i should get the filled up contents in that page with form inputs. For that i have tried the following codes but nothing solves my issue.. Kindly have a go through and help me in solving the issue.
Room.vue:
<table class="table table-striped table-hover rooms-table">
<thead>
<tr>
<td>Title<i class="fa fa-sort"></i></td>
<td>Sub Title<i class="fa fa-sort"></i></td>
<td> Edit </td>
<td> Delete </td>
</tr>
</thead>
<tbody>
<tr v-for="room in items">
<td>{{ room.title }}</td>
<td>{{ room.subtitle }}</td>
<td>
<router-link class="btn btn-primary" v-bind:to="'rooms/edit/'+id">Edit</router-link>
</td>
<td>
<button class="btn btn-primary" v-on:click="deleteRoom(room)">Delete</button>
</td>
</tr>
</tbody>
</table>
Here i am giving edit option and making a redirect to edit page..
Script of Rooms.vue:
<script>
import config from '../../../config';
export default {
data(){
return{
items: [],
itemsData:{
title : '',
subtitle : '',
}
}
},
methods: {
deleteRoom: function (room) {
var index = this.items.indexOf(room);
this.items.splice(index, 1);
}
},
mounted() {
axios.get(config.apiDomain+'/Rooms').then((response)=>this.items = response.data);
}
}
</script>
RoomsEdit.vue:
<form #submit.prevent="updateItems" class="form-horizontal" enctype="multipart/form-data">
<div class="form-group">
<label for="title" class="col-sm-2 control-label">Title<span class="red">*</span></label>
<div class="col-sm-6">
<input type="text" name="title" class="form-control" id="title" v-model="itemsData.title">
<span class="text-danger">{{ errors.title?errors.title[0]:"" }}</span>
</div>
</div>
<div class="form-group">
<label for="subtitle" class="col-sm-2 control-label">Subtitle<span class="red">*</span></label>
<div class="col-sm-6">
<input type="text" name="subtitle" class="form-control" id="subtitle" v-model="itemsData.subtitle">
<span class="text-danger">{{ errors.subtitle?errors.subtitle[0]:"" }}</span>
</div>
</div>
</form>
Script of RoomsEdit:
<script>
import config from '../../../config';
export default {
data(){
return{
items: [],
itemsData:{
title : '',
subtitle : '',
},
errors: {
}
}
},
methods:{
fetchRoom(id){
axios.get(config.apiDomain+'/Rooms').then((response)=>this.items = response.data);
},
updateItems(e){
axios.put(config.apiDomain+'/Rooms/edit'+this.$route.params.id,this.itemsData).then(response=>{
this.this.itemsData = "";
this.$router.push('/admin/rooms');
}).catch(error=>{
this.errors = error.response.data;
});
}
},
created: function() {
this.fetchRoom(this.$route.params.id);
}
}
</script>
RoomsCreate.vue:
<form #submit.prevent="addItems" class="form-horizontal" enctype="multipart/form-data">
<div class="form-group">
<label for="title" class="col-sm-2 control-label">Title<span class="red">*</span></label>
<div class="col-sm-6">
<input type="text" name="title" class="form-control" id="title" v-model="itemsData.title">
<span class="text-danger">{{ errors.title?errors.title[0]:"" }}</span>
</div>
</div>
<div class="form-group">
<label for="subtitle" class="col-sm-2 control-label">Subtitle<span class="red">*</span></label>
<div class="col-sm-6">
<input type="text" name="subtitle" class="form-control" id="subtitle" v-model="itemsData.subtitle">
<span class="text-danger">{{ errors.subtitle?errors.subtitle[0]:"" }}</span>
</div>
</div>
Script of RoomsCreate.vue:
<script>
import config from '../../../config';
export default {
data(){
return{
items: [],
itemsData:{
title : '',
subtitle : '',
},
errors: {
}
}
},
methods:{
addItems(){
axios.post(config.apiDomain+'/Rooms',this.itemsData).then(response=>{
this.this.itemsData = "";
this.$router.push('/admin/rooms');
}).catch(error=>{
this.errors = error.response.data;
});
}
}
</script>
The issue i am facing is when i click the edit in Room.vue, it redirects to the RoomsEdit.vue where i am not getting the values that was already created, i need to get those value when i go to RoomsEdit.vue there i should edit and update the content.

Sum of properties in an object array AngularJS

I am fairly new to both angularjs and javascript and am in need of some guidance. I am making an application which records time logs for a project. One of the columns needs to be delta time - the time difference between starting a log and finishing it and taking away interval time (for example if I started a project at 1pm, finished at 3pm but had a 30 minute break inbetween the delta time would be 2 & 1/2 hours).
Here is my code so far, whatever I try do either comes up with the wrong time or NaN. Any help would be appreciated!
View:
<div class="main" ng-controller="MainController">
<div class="container-fluid">
<div class="header">
<div class="container-fluid">
<h1>{{ title }}</h1>
</div>
</div>
<div class="row container-fluid">
<!--<div class="col-md-4">-->
<div class="panel panel-default">
<div class="panel-body">
<!--<<form ng-submit="addNew(timeLogs)" >-->
<form>
<div class="form-group col-md-6">
<label>Project</label>
<input type="text" class="form-control" placeholder="Project" ng-model="project" >
</div>
<div class="form-group col-md-6">
<label>Phase</label>
<input type="text" class="form-control" placeholder="Phase" ng-model="phase" >
</div>
<div class="form-group col-md-6">
<label>Date</label>
<input type="date" class="form-control" placeholder="dd-MM-yyyy" ng-model="date" >
</div>
<div class="form-group col-md-6">
<label>Start Time</label>
<input type="time" class="form-control" placeholder="HH:mm:ss" ng-model="startTime" required>
</div>
<div class="form-group col-md-6">
<label>Interval Time (mins)</label>
<input type="text" class="form-control without" placeholder="Int Time" ng-model="intTime" >
</div>
<div class="form-group col-md-6">
<label>End Time</label>
<input type="time" class="form-control" placeholder="HH:mm:ss" ng-model="endTime" required>
</div>
<div class="form-group col-md-6">
<label>Comments</label>
<input type="text" class="form-control" placeholder="Comments" ng-model="comments" >
</div>
<button ng-click="addLog()">Add</button>
</form>
</div>
</div>
<!--</div>-->
</div>
<table class="table table-striped col-md-4">
<tr>
<th>Project</th>
<th>Phase</th>
<th>Date</th>
<th>Start Time</th>
<th>Int Time (mins)</th>
<th>Stop Time</th>
<th>Delta Time</th>
<th>Comments</th>
<th>Make Changes</th>
</tr>
<tr data-ng-repeat="log in logs">
<td>{{ log.project }}</td>
<td>{{ log.phase }}</td>
<td>{{ log.date | date:'dd/MM/yyyy' }}</td>
<td>{{ log.startTime | date:'hh:mma' }}</td>
<td>{{ log.intTime }}</td>
<td>{{ log.endTime | date:'hh:mma' }}</td>
<td>{{ log.startTime -- log.endTime | date:'hh:mma' }}</td>
<td>{{ log.comments }}</td>
<td>
<button class="btn btn-primary" ng-click="main.editClickHandler(item)">Edit</button>
<button class="btn btn-danger" ng-click="main.removeClickHandler(item)">Remove</button>
</td>
</tr>
</table>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
Controller:
app.controller('MainController', ['$scope', function($scope) {
$scope.title = 'Time Log';
//$scope.promo = 'The most popular books this month.';
$scope.logs = [];
$scope.addLog = function() {
$scope.logs.push({
project: $scope.project,
phase: $scope.phase,
date: $scope.date,
startTime: $scope.startTime,
intTime: $scope.intTime,
endTime: $scope.endTime,
comments: $scope.comments
});
// Clear input fields after push
$scope.project = "";
$scope.phase = "";
$scope.date = "";
$scope.startTime = "";
$scope.intTime = "";
$scope.endTime = "";
$scope.comments = "";
};
$scope.deltaTime = function(logs) {
return $scope.startTime - $scope.endTime;
;
}
}]);

Try like this
$scope.deltaTime = function(logs) {
return new Date($scope.startTime) - new Date($scope.endTime);
}

getting input value in angularjs

I'm new to angular.js and i have been having trouble getting form input value.
So i have looked for an answer all over including stackoverflow i could not find any answer.
I want to get the input values using the controller but on each attempt i try i get in the console that its undefined on just using either an object or just text
here is the javascript code:
$scope.url = '';
$scope.user = {
password : '',
repassword : ''
};
$scope.registerUser = function()
{
$log.info($scope.email);
$log.info($scope.user);
}
here is the html code:
<table class="table-responsive">
<tbody>
<form class="form-inline" action="" method="post">
<div class="form-group">
<tr>
<td><label for="email">E-mail</label></td>
<td>
<div class="input-group">
<input type="email" class="form-control" name="email" ng-model="email">
<div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>
</div>
</td>
</tr>
</div>
<div class="form-group">
<tr>
<td><label for="password">Password</label></td>
<td><input type="password" class="form-control" name="password" ng-value="user.password"><td>
</tr>
</div>
<div class="form-group">
<tr>
<td><label for="Repassword">Reenter Password:</label></td>
<td><input type="password" class="form-control" name="Repassword" ng-value="user.repassword"></td>
</tr>
</div>
<tr><td><input class="btn btn-default" type="button" value="Register" ng-click="registerUser()"></td></tr>
</form>
</tbody>
</table>

You're using ng-value instead of ng-model:
<input type="password" ng-model="user.password">
<input type="password" ng-model="user.repassword">
You might also want to pass in user to your ng-click for convenience and less typing in the function:
ng-click="registerUser(user)"
$scope.registerUser = function(user) {
console.log(user);
}