Why can't Handlebars check if the Custom Claims Admin is true it automatically goes to the else statement even though the statement for the custom claims is true. Photo of the CustomClaims attached.
{{#each listusersarray}}
<tr>
<td>{{email}}</td>
<td>{{metadata.lastSignInTime}}</td>
<td>{{#if metadata.customClaims.admin}}Admin{{else}}User{{/if}}</td>
<td>
{{!-- <input type="hidden" value="{{uid}}" id="user-uid"> --}}
{{#if disabled}}
<button class="btn btn-success " type="button" onclick="enableaccountFunction('{{uid}}')">Enable Account</button>
{{else}}
<button class="btn btn-danger " type="button" onclick="disableaccountFunction('{{uid}}')">Disable Account</button>
{{/if }}
<input type="hidden" value="{{email}}" id="admin-email">
<button class="btn btn-primary " onclick="makeadminFunction('{{uid}}')">Make Admin</button>
</td>
</tr>
{{/each}}
my bad customClaims is not under metadata thats why it is undefined its only customClaims.admin
Related
When I click the edit button, the whole row disappears, as if it was deleted, and does not go into the editMode of the template. The row comes back if you refresh the page. I have tried commenting out code to find an issue there, but that comes back clean. I have referenced other code that does work in editMode, and there is no difference. And I have tried googling.
How can I change/add to the code to get it to engage editMode?
Created using Meteor platform.
html:
<template name="SingleContact">
{{#if editMode}}
<form class="editForm">
<td class="input-field">
<input id="full_name" name="full_name" value="{{fullname}}" type="text" class="validate" />
</td>
<td class="input-field">
<input id="email" name="email" value="{{email}}" type="email" class="validate" />
</td>
<td class="input-field">
<input id="phone" name="phone" value="{{phone}}" type="tel" class="validate" />
</td>
<td class="input-field">
<input id="phone2" name="phone2" value="{{phone2}}" type="tel" class="validate" />
</td>
{{#if customerIsEnterprise}}
<td>
<p>
{{#if clientContact}}
<input type="checkbox" id="primaryContact" name="primaryContact" checked="checked" />
{{else}}
<input type="checkbox" id="primaryContact" name="primaryContact" />
{{/if}}
<label for="primaryContact">Primary Contact?</label>
</p>
</td>
{{/if}}
<td><button type="submit" class="submit waves-effect waves-light btn">Save<i class="material-icons right">done</i></button></td>
<td><a class="edit waves-effect waves-light btn red" href="#">Cancel<i class="material-icons right">delete</i></a></td>
</form>
{{else}}
<tr>
<td>{{fullname}}</td>
<td>{{email}}</td>
<td>{{phone}}</td>
<td>{{phone2}}</td>
{{#if customerIsEnterprise}}
<td>
{{#if clientContact}}
Yes
{{else}}
No
{{/if}}
</td>
{{/if}}
<td class="button-cell"><a class="edit waves-effect waves-light btn" href="#">Edit<i class="material-icons right">mode_edit</i></a></td>
<td class="button-cell"><a class="modal-trigger waves-effect waves-light btn red" href="#contactModal{{_id}}">Delete<i class="material-icons right">delete</i></a></td>
<!-- Modal Structure -->
<div id="contactModal{{_id}}" class="modal">
<div class="modal-content">
<h4>Delete Contact?</h4>
<p>Are you sure you want to delete <strong><em>{{fullname}}</em></strong> from the system permanently?</p>
</div>
<div class="modal-footer">
Close
Confirm
</div>
</div>
</tr>
{{/if}}
</template>
js:
Template.SingleContact.onCreated(function(){
this.editMode = new ReactiveVar(false);
Blaze._allowJavascriptUrls();
});
Template.SingleContact.onRendered(function(){
$('.modal-trigger').leanModal();
});
Template.SingleContact.helpers({
editMode: function(){
return Template.instance().editMode.get();
}
});
Template.SingleContact.events({
//delete contact
'click .delete'(event){
event.preventDefault();
Meteor.call("removeContact", this._id);
sAlert.error('Contact removed successfully!');
},
//engage edit mode
'click .edit': function(event, template){
event.preventDefault();
template.editMode.set(!template.editMode.get());
},
//edit autosave function
'submit .editForm'(event, template){
event.preventDefault();
const target = event.target;
id = this._id;
const editName = target.full_name.value;
const editEmail = target.email.value;
const editPhone = target.phone.value;
const editPhone2 = target.phone2.value;
if(target.primaryContact){
let isChecked = target.primaryContact.checked;
}else{
isChecked = false;
}
Meteor.call("updateContactInfo", id,editName,editEmail,editPhone,editPhone2,isChecked);
template.editMode.set(!template.editMode.get());
sAlert.success(editName + ' updated successfully!');
}
});
This is how my code looks like
'<td class="text-center ">
<form action="/patients/{{$patient->id}}" method="post"
class="delete_link">
{{ csrf_field() }}
{{ method_field(\'DELETE\') }}
<button type="submit" class="btn btn-danger btn-sm pullright">Delete</button>
</form>
</td>'
Remember my table is under single quotations. Someone help me to get this thing working, Please.!!
'<td class="text-center ">
<form action="/patients/{{$patient->id}}" method="post" class="delete_link">
{{ csrf_field() }}
<input type="hidden" name="_method" value="DELETE">
<button type="submit" class="btn btn-danger btn-sm pullright">Delete</button>
</form>
</td>'
I am trying to insert an input in the header of Angular-UI's accordion, but the accordion messes up when the input is shown. I think it might be because I hide the actual heading text so the height of the header changes and the accordion messes up. Ideally, I would like to keep the height dynamic (responsive point-of-view), but a fixed height will do as well.
When the edit button is clicked, I want to show an input field in the header so the user can update the text (saving, or binding the value is not a concern.. just want to show the input field correctly).
I have a demo of what I am wanting using a table, and I would like to replicate that functionality into the accordion header.
<table class="table table-bordered table-striped table-hover">
<thead>
<tr id="th-row">
<th>Name</th>
<th class="col-xs-1">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span ng-show="!edit" ng-model="personName">John Smith</span>
<div ng-show="edit" class="col-xs-12">
<input type="text" ng-model="personName" ng-required="true" value="" class="form-control" placeholder="Person Name">
</div>
</td>
<td>
<button ng-show="!edit" class="btn btn-xs btn-primary" ng-click="edit = true">
<i class="glyphicon glyphicon-edit"></i>
</button>
<button ng-show="edit" class="btn btn-xs btn-danger" ng-click="edit = false">
<i class="glyphicon glyphicon-remove"></i>
</button>
</td>
</tr>
</tbody>
</table>
Now my accordion code:
<accordion-group>
<accordion-heading>
<span ng-show="!edit1" ng-model="headingName">Header with Button group</span>
<div ng-show="edit1" class="col-xs-12">
<input type="text" ng-model="headingName" ng-required="true" value="" class="form-control" placeholder="Heading Name">
</div>
<div class="pull-right">
<button ng-show="!edit1" class="btn btn-info btn-xs" ng-click="edit1 = true; $event.stopPropagation();"><i class="glyphicon glyphicon-edit"></i></button>
<button ng-show="edit1" class="btn btn-danger btn-xs" ng-click="edit1 = false; $event.stopPropagation();"><i class="glyphicon glyphicon-remove"></i></button>
</div>
</accordion-heading>
This is just some content to illustrate fancy headings.
</accordion-group>
Here is a Plunker Demo
I'm experimenting with Autoforms and an array field in a html table. So far I can modify rows and delete them, but am having trouble working out how to add a new row. The add button doesn't seem to do anything.
My code so far:
{{#autoForm id="eventDatesForm" type="update" collection="Events" doc=this buttonContent="Save"}}
<h2>Event Dates</h2>
{{> afQuickField name="timezone"}}
<table class="table table-bordered table-hover table-condensed">
<thead>
<tr>
<th>Slice Start</th>
<th>Slice End</th>
<th><button type="button" class="btn btn-primary autoform-add-item" data-autoform-field="{{this.atts.name}}" data-autoform-minCount="{{this.atts.minCount}}" data-autoform-maxCount="{{this.atts.maxCount}}"><span class="glyphicon glyphicon-plus"></span></button></th>
</tr>
</thead>
{{#afEachArrayItem name="WiFiOffloadSettings"}}
<tbody>
<tr>
<td>{{> afFieldInput name=this.current.offloadSliceStart type=datetime}}</td>
<td>{{> afFieldInput name=this.current.offloadSliceEnd type=datetime}}</td>
<td><button type="button" class="btn btn-danger btn-sm autoform-remove-item"><span class="glyphicon glyphicon-minus"></span></button></td>
</tr>
</tbody>
{{/afEachArrayItem}}
</table>
<button type="submit" class="btn btn-primary">Save</button>
{{/autoForm}}
In the Add button, try using the name "WiFiOffloadSettings".
That is,
<button type="button" class="btn btn-primary autoform-add-item"
data-autoform-field="WiFiOffloadSettings" data-autoform-minCount="
{{this.atts.minCount}}" data-autoform-maxCount= {this.atts.maxCount}}">
<span class="glyphicon glyphicon-plus"></span> </button>
lets say I have the following markup:
<div class="fild-group">
<label for="form-users">User</label>
<button type="button" class="inactive btn btn-default" data-id="form-users"><span>Select an User</span></button>
</div>
<div class="fild-group to-hide">
<label for="form-projects">Projects</label>
<button type="button" class="inactive" data-id="form-projects"><span>Select a Project</span></button>
</div>
<div class="fild-group to-hide">
<label for="form-parallel-env">Parallel Environment</label>
<button type="button" class="inactive" data-id="form-parallel-env"><span>Select a PE</span></button>
</div>
<div class="fild-group to-hide">
<label for="form-start-date">Start Date</label>
<button type="button" class="inactive" data-id="date1"><span>Select a Date</span></button>
</div>
<div class="fild-group to-hide">
<label for="form-end-date">End Date</label>
<button type="button" class="inactive" data-id="date2"><span>Select a Date</span></button>
</div>
<div class="fild-group to-hide">
<label for="form-no-slots">Number of slots</label>
<button type="button" class="inactive btn" data-id="form-slots"><span>Slots</span></button>
<input type="number" class="form-control" id="form-no-slots" min="1" max="9999">
</div>
depending on where the user is I would like to show some, all or none of these div.fild-group so I was thinking to create ONLY one template like this
<template name="first-line-button">
<div class="fild-group">
<label for="{{ id }}">{{ label }}</label>
<button type="button" class="inactive btn btn-default " data-id="{{ data }}"><span>{{ message }}</span></button>
</div>
</template>
but so far I know how to use that template for one thing at the time, so the question is how can I use this single template for multiple things at the same time???
thanks in advance!
You need to provide a data context for the template to render. You can do that individually, or pass an array of button data.
Template.parent.formUsers = function () {
return {
id: "for-users",
label: "User",
message: "Select a User"
}
};
or
Template.parent.formButtons = function () {
return [{
id: "form-users",
label: "User",
message: "Select a User"
}, {
id: "form-projects",
label: "Projects",
message: "Select a Project"
}, {
...
}]
};
And the parent template would have this in it somewhere.
{{> first-line-button formUsers}}
or
{{#each formButtons}}
{{> first-line-button}}
{{/each}}