django for loop item list value check - django-models

I want to check if all for loop objects from below model and template have either signed or rejected the record. i.e. can you tell me how to check approve or reject field value for moc.verifiers.all list members?
For instance I have a three verifiers in the record. I want to based on their approve or reject change record status. Could you please give me a hint how I can do it.
Verifier
class Verifier(models.Model):
moc = models.ForeignKey(Moc, related_name='verifiers', on_delete=models.CASCADE, default='1')
verifier_group = models.CharField(max_length=36, blank=True, null=True)
verifier_name = models.ForeignKey(User, blank=True, null=True, on_delete=models.CASCADE,)
verify_due = models.DateField(blank=True, null=True)
approve = models.BooleanField(default=False)
reject = models.BooleanField(default=False)
signoff_date = models.DateField(auto_now_add=True)
note = models.TextField(max_length=256, blank=True)
def __str__(self):
return str(self.id)
Template
{% for obj in moc.verifiers.all %}
<tr style="text-align: center; FONT-SIZE: 7pt; BORDER-TOP: lightgrey 1px solid; HEIGHT: 25px; FONT-FAMILY: Verdana; BORDER-RIGHT: lightgrey 1px solid; BORDER-BOTTOM: lightgrey 1px solid; COLOR: #333333; BORDER-LEFT: lightgrey 1px solid"
valign="middle">
<td>
<form method="post" action="{% url 'delete_verifier' obj.pk %}">
{% csrf_token %}
<a href="{% url 'add_verify_signoff' obj.pk %}" target="_blank" type="button"
class="col-4 btn btn-primary p-1">
<i class="bi bi-pencil-square"></i>
</a>
<button type="button" class="col-4 btn btn-danger p-1" style="color: whitesmoke;" data-bs-toggle="modal"
data-bs-target="#delete-verifier"><i class="bi bi-trash"></i></button>
<!-- Modal -->
<div class="modal fade" id="delete-verifier" data-bs-backdrop="static" data-bs-keyboard="false"
tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="background-color: #e6990a; height: 30px;">
<h5 class="modal-title" id="staticBackdropLabel" style="color: whitesmoke;">Notification
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p style="font-size: medium;">Are you sure that you want to delete this verifier?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
</div>
</form>
{% endif %}
</td>
<td style="WIDTH: 12%">{{ forloop.counter }}{{ obj.verifier_group }}</td>
<td style="WIDTH: 110px">{{ obj.verifier_name }}</td>
<td style="WIDTH: 110px">{{ obj.verify_due|date:'d M Y' }}</td>
{% if obj.approve %}
<td style="WIDTH: 20px"><input class="form-check-input-bg" type="checkbox" value="{{ obj.approve }}" checked
onclick="return false"></td>
<td style="WIDTH: 20px"><input class="form-check-input-bg" type="checkbox" value="{{ obj.reject }}"
onclick="return false">
{% elif obj.reject %}
<td style="WIDTH: 20px"><input class="form-check-input-bg" type="checkbox" value="{{ obj.approve }}"
onclick="return false"></td>
<td style="WIDTH: 20px"><input class="form-check-input-bg" type="checkbox" value="{{ obj.reject }}" checked
onclick="return false">
</td>
{% else %}
<td style="WIDTH: 20px">
<input class="form-check-input-bg" type="checkbox" value="" disabled>
</td>
<td style="WIDTH: 20px">
<input class="form-check-input-bg" type="checkbox" disabled onclick="return false">
</td>
{% endif %}
<td style="WIDTH: 90px">{{ obj.signoff_date|date:'d M Y'}}</td>
<td style="WIDTH: 200px">{{ obj.verifier_name }}</td>
<td style="WIDTH: 200px; text-align: justify;">{{ obj.note }}</td>
{% empty %}
<td colspan="8" style="WIDTH: 130px">No verifiers assigned yet...
</td>
</tr>
{% endfor %}

Related

Protractor- element all count returning zero

Following is our html page content
<div class="list-container ng-scope" ng-if="nodes.viewType == 'list'">
<table>
<tbody class="ng-scope ng-isolate-scope" ng-repeat="node in nodes.search.results track by node._id" content-list-row="" ct-node="node" access-parent="true" view-source="search">
<tr id="listrow-590828ac3a058f6a908976cc" class="listrow ng-scope" ng-if="!node.isContainer" ng-class="{'editing-tags': editingTags}" ui-draggable="$parent.canDrag()" drag-channel="N" drag="node" draggable="true">
<td class="background_2_pdf" ng-class="('background_'+node.type +'_'+(node.attachments[0].mimeType | mimeTypeToGroup))" width="2px"></td>
<td style="padding: 8px 5px 8px 10px" width="30px" align="center">
<td class="node-name" ng-style="getNameWidth()" style="cursor: pointer; min-width: 250px;" colspan="1" nowrap="">
<td class="hidden-xs ng-scope" ng-if="$parent.viewSource =='search'" style="padding-left: 2px; padding-right: 2px" nowrap="">
<span class="ng-scope" ng-if="$parent.node.search.highlight.n_searchContent"> </span>
<span class="fa fa-file-text ng-scope" style="color:#618FE7" ng-if="$parent.node.search.highlight.n_searchContent" popover-trigger="mouseenter" uib-popover-html="$parent.node.search.highlight.n_searchContent[0]"></span>
</td>
<td class="hidden-xs ng-scope" style="padding-left: 2px; padding-right: 2px" ng-if="!editingTags && !editingName" nowrap="">
<td class="node-updated hidden-xs ng-binding ng-scope" style="padding-left: 2px; padding-right: 2px" ng-if="!editingTags && $parent.viewSource !=='metadata'" nowrap="">Updated 85 days ago</td>
<td class="node-owner hidden-xs hidden-sm ng-binding ng-scope" style="padding-left: 2px; padding-right: 2px" ng-if="!editingTags && $parent.viewSource !=='metadata'" nowrap="">Sagar Ladwa</td>
<td class="node-date hidden-xs hidden-sm ng-binding ng-scope" style="padding-left: 2px; padding-right: 2px" ng-if="!editingTags && audit.activity === 'create' && $parent.viewSource !=='metadata'" ng-repeat="audit in node.audit" nowrap="">02/05/2017</td>
<td class="node-options ng-scope" ng-if="!editingTags && !editingMetaTags" nowrap="">
</tr>
</tbody>
<tbody class="ng-scope ng-isolate-scope" ng-repeat="node in nodes.search.results track by node._id" content-list-row="" ct-node="node" access-parent="true" view-source="search">
<tbody class="ng-scope ng-isolate-scope" ng-repeat="node in nodes.search.results track by node._id" content-list-row="" ct-node="node" access-parent="true" view-source="search">
<tbody class="ng-scope ng-isolate-scope" ng-repeat="node in nodes.search.results track by node._id" content-list-row="" ct-node="node" access-parent="true" view-source="search">
<tbody class="ng-scope ng-isolate-scope" ng-repeat="node in nodes.search.results track by node._id" content-list-row="" ct-node="node" access-parent="true" view-source="search">
<tbody class="ng-scope ng-isolate-scope" ng-repeat="node in nodes.search.results track by node._id" content-list-row="" ct-
In this page we have multiple tbody's. My requirement is to get all class="fa fa-file-text ng-scope" from all tbody and iterate. Following samples i tried get count/length of element
but all giving either 0 or no result
var list1= element.all(by.css('.fa fa-file-text ng-scope'));
list1.count().then(function (size){
console.log('------------------------------'+size);
});
and
element.all(by.css('.fa fa-file-text ng-scope')).count().then(function(size){
console.log('------------------------------'+size);
});
and
element.all(by.css('.fa fa-file-text ng-scope')).map(function(files){
return files;
}).then(function(files1){
console.log('------------------------------'+files1.length);
});

Combo box with multiple checkbox in bootstrap

In bootstrap how to use comboBox with multiple checkbox option as in the attached image.
I used multiple checkbox option in dropdown list as below, but i do not wish drop down list with checkbox, instead wish to have like the image attached.
<select multiple="multiple"> .... </select>
From the below way i got the solution
<table>
<tr>
<td>
<div
style="max-height: 350px; overflow-y: scroll; width: 375px;background: white;"
class="scrollbar style-2">
<table class="table">
<thead align="center">
<tr>
<th style="text-align: center;background: #5cb85c;color : white;">List</th>
<th style="background: white;background: #5cb85c;color : white;"></th>
</tr>
</thead>
<tbody style="background: white;">
<%
for (int i = 0; i < 10; i++) {
%>
<tr style="border: 0">
<td style="border: 0">
<div class="[ form-group ]">
<input type="checkbox" name="fancy-checkbox-default_p3_ii<%=i%>"
id="fancy-checkbox-default_p3_ii<%=i%>" autocomplete="off" />
<div class="[ btn-group ]">
<label for="fancy-checkbox-default_p3_ii<%=i%>"
class="[ btn btn-success ]" style="top: 5px;"> <span
class="[ glyphicon glyphicon-ok ]"></span> <span> </span>
</label> <label for="fancy-checkbox-default_p3_ii<%=i%>"
class="[ btnCustom active ]"> Default Checkbox<%=i%>
</label>
</div>
</div>
</td>
</tr>
<%
}
%>
</tbody>
</table>
</div>
</td>
</tr>
</table>

How do I show different modal data on each subjects displayed?

How do I show different modal data on each subjects displayed?
My Problem: Showing same modal data on each subjects displayed.
My blade view
#section('content')
<!-- Main content -->
<section class="content" style="background-color:#fff; padding-bottom:50px;" id="subjects">
<div class="subjects-content">
<h3>List of Subjects</h3>
<div class="box-body box-self-evaluation" v-show="subjects.length > 0">
<table id="example2" class="table table-hover table-striped sortable">
<thead>
<tr>
<th>Subject Area</th>
<th>Course Title</th>
<th>Failed</th>
<th>View more</th>
</tr>
</thead>
#foreach ($all_subjects as $subject)
<tbody>
<tr>
<td>
<span> {{ $subject->subject_code }}</span>
</td>
<td>
<span> {{ $subject->description }} </span>
</td>
<td>
<span> {{ $subject->grade()->where('grade','F')->count() }} </span>
</td>
<td><span> <div class="btn btn-crimson btn-inline-block" data-toggle="modal" data-target="#myModal">View more info</div> </span></td>
</tr>
</tbody>
#endforeach
</table>
</div>
<div class="confirmation-buttons-self-evaluation">
<div class="btn btn-blueviolet btn-inline-block btn-create">Go to Self-Evaluation Page</div>
</div>
#foreach ($all_subjects as $subject)
<!--MODAL -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- MODAL content -->
<div class="modal-content" style="width:70%; margin:0 auto; margin-top:100px; max-height: calc(100vh - 210px); overflow-y: auto;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Subject: {{ $subject->subject_code }}</h4>
</div>
<div class="modal-body" style="padding-top:0">
<center>
<table class="table">
<thead>
<th colspan="3" style="text-align:center">List of Disgraceful Students</th>
</thead>
<thead class="failed-header">
<th>Section: <span style="color:#000"> CS <!-- SECTION --> </span></th>
<th>Professor: <span style="color:#000"> John Doe <!-- PROF --> </span></th>
<th>Failed: <span style="color:#000"> 2 <!-- NUMBER OF FAILED SA SECTION --> </span></th>
</thead>
<tbody>
<tr>
<td><img src="{{ asset('dist/img/default.png')}}" class="img-square" alt="User Image" style="height:50px; width:50px"></td>
<td style="padding-top: 20px" colspan="2"> John Jashuel </td>
</tr>
<tr>
<td><img src="{{ asset('dist/img/default.png')}}" class="img-square" alt="User Image" style="height:50px; width:50px"></td>
<td style="padding-top: 20px" colspan="2"> John Caezar </td>
</tr>
</tbody>
</center>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<!-- /. modal content-->
#endforeach
</section>
#endsection
what is wrong with my code?
how do I solve this?
help me please...
any suggestion or comments are well appreciated thank you!
try to change
data-target="#myModal"
to
data-target="#{{$subject->id}}"
and id in <--modal-->
From
id="myModal"
to
id="{{$subject->id}}"

Not able to enter text in CKeditor

I have too many ck editors(wysiwyg) in single page which are embedded in iframes. How do I switch to frame and send text to it. All frames have same classnames. I am using C#. If you are not able to view the image, let me know. I will send the code
Below is my code:
IWebElement actioninputissue = driver.FindElement(By.XPath(".//iframe[#class='cke_wysiwyg_frame'][1]"));
driver.SwitchTo().Frame(actioninputissue);
actioninputissue.SendKeys("Helllo");
I am attaching the code.
Edit 1
Thanks you so much for your reply!.
code for two ckeditors and I have also attached screenshot
Code<tr id="actionIssueRow" class="Controls">
<th valign="top">
<div id="issueLabel">
</th>
<td colspan="3">
<textarea id="actrpnlIssueInputissue" class="wide_input richtext" name="issue" rows="3" cols="84" style="line-height: 14px; visibility: hidden; display: none;"></textarea>
<div id="cke_actrpnlIssueInputissue" class="cke_1 cke cke_reset cke_chrome cke_editor_actrpnlIssueInputissue cke_ltr cke_browser_gecko" lang="en" aria-labelledby="cke_actrpnlIssueInputissue_arialbl" role="application" dir="ltr" style="width: 500px;">
<span id="cke_actrpnlIssueInputissue_arialbl" class="cke_voice_label">Rich Text Editor, actrpnlIssueInputissue</span>
<div class="cke_inner cke_reset" role="presentation">
<span id="cke_1_top" class="cke_top cke_reset_all" style="height: auto; -moz-user-select: none;" role="presentation">
<div id="cke_1_contents" class="cke_contents cke_reset" role="presentation" style="height: 170px;">
<span id="cke_52" class="cke_voice_label">Press ALT 0 for help</span>
<iframe class="cke_wysiwyg_frame cke_reset" frameborder="0" src="" style="width: 100%; height: 100%;" title="Rich Text Editor, actrpnlIssueInputissue" aria-describedby="cke_52" tabindex="0" allowtransparency="true">
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<body class="cke_editable cke_editable_themed cke_contents_ltr cke_show_borders" contenteditable="true" spellcheck="true">
<br _moz_editor_bogus_node="TRUE">
</body>
</html>
</iframe>
</div>
<span id="cke_1_bottom" class="cke_bottom cke_reset_all" role="presentation" style="-moz-user-select: none;">
<span id="cke_1_resizer" class="cke_resizer cke_resizer_ltr" onmousedown="CKEDITOR.tools.callFunction(0, event)" title="Resize">◢</span>
</span>
</div>
</div>
<input id="actrpnlIssueInputissue_txt" type="hidden" value="" name="issue_txt">
</td>
</tr>
<tr class="Controls">
<th valign="top"> </th>
<td colspan="4"> </td>
</tr>
<tr class="Controls">
<th valign="top">
<td colspan="4">
<textarea id="actrpnlActionDescriptionInputactn" class="wide_input richtext" name="actn" rows="3" cols="84" style="line-height: 14px; visibility: hidden; display: none;"></textarea>
<div id="cke_actrpnlActionDescriptionInputactn" class="cke_2 cke cke_reset cke_chrome cke_editor_actrpnlActionDescriptionInputactn cke_ltr cke_browser_gecko" lang="en" aria-labelledby="cke_actrpnlActionDescriptionInputactn_arialbl" role="application" dir="ltr" style="width: 500px;">
<span id="cke_actrpnlActionDescriptionInputactn_arialbl" class="cke_voice_label">Rich Text Editor, actrpnlActionDescriptionInputactn</span>
<div class="cke_inner cke_reset" role="presentation">
<span id="cke_2_top" class="cke_top cke_reset_all" style="height: auto; -moz-user-select: none;" role="presentation">
<div id="cke_2_contents" class="cke_contents cke_reset" role="presentation" style="height: 170px;">
<span id="cke_92" class="cke_voice_label">Press ALT 0 for help</span>
<iframe class="cke_wysiwyg_frame cke_reset" frameborder="0" src="" style="width: 100%; height: 100%;" title="Rich Text Editor, actrpnlActionDescriptionInputactn" aria-describedby="cke_92" tabindex="0" allowtransparency="true">
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<body class="cke_editable cke_editable_themed cke_contents_ltr cke_show_borders" contenteditable="true" spellcheck="true">
<p>
</body>
</html>
</iframe>
</div>
<span id="cke_2_bottom" class="cke_bottom cke_reset_all" role="presentation" style="-moz-user-select: none;">
</div>
</div>
<input id="actrpnlActionDescriptionInputactn_txt" type="hidden" value="" name="actn_txt">
</td>

How to align bootstrap dropdown and others together in a grid layout?

I am trying to create filters whose layout should match something like below screenshot.
So far I am able to achieve something like the given below screenshot.
Problem is I am unable to evenly distribute items in terms of space as shown in 1st screenshot. Also is it good way to create this kind of layout using table?
Please help me in understanding and creating this layout.
Below is my code
<div class="panel panel-default">
<div class="panel-heading" style="padding: 20px;">
<div class="panel-title pull-left text-label-emphasize" style="margin-top: -8px;"><b>Filter</b></div>
<div class="panel-title pull-right text-label" style="margin-top: -8px;">Reset</div>
</div>
<div class="panel-body">
<table width="100%">
<tr>
<td colspan="1">
<div class="dropdown" ng-show="!loadinga" style="text-align: left;" width="100%">
<button class="btn btn-custom dropdown-toggle" type="button" style="text-align: left; background-color: #fff; border-color: #C3C3C3; " ng-disabled="loading">
{{dropDownTitle}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu scroll-menu nav" role="menu">
<li ng-repeat="agent in agentListData">
<a role="menuitem" href="#" ng-click="">{{agent}}</a>
</li>
</ul>
</div>
</td>
<td align="left" colspan="1">
<div class="dropdown" ng-show="!loadinga" style="text-align: left;" width="100%">
<button class="btn btn-custom dropdown-toggle" type="button" style="text-align: left; background-color: #fff; border-color: #C3C3C3; " ng-disabled="loading">
{{dropDownAllTaskStatusTitle}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu scroll-menu nav" role="menu">
<li ng-repeat="task in taskStatusListData">
<a role="menuitem" href="#" ng-click="">{{task.title}}</a>
</li>
</ul>
</div>
</td>
<td align="left" colspan="1">
<div ng-show="!loadinga">
<input id="autoComplete" type="text" ng-model="selected" typeahead="task.name for task in taskList | filter:$viewValue | limitTo:20" class="form-control" typeahead-on-select='' placeholder="Search Tasks here" typeahead-focus-first="true" ng-disabled="loading" />
</div>
</td>
<td colspan="1" style="padding-right: 200px"></td>
</tr>
<tr ng-show="isAdvancedFilterAvailable" style="padding:2px">
<td colspan="4">
<hr/>
</td>
</tr>
<tr ng-show="isAdvancedFilterAvailable" class="fadein fadeout">
<td align="left" colspan="1">
<div style="margin-right: 5px;margin-left: 5px; margin-top:2px" ng-show="!loadinga">
<input type="checkbox" ng-model="isChecked" ng-click="checkboxClicked(isChecked)" ng-disabled="loading" />
<label for="excludeMinutesStep">Exclude tasks running < </label>
<input id="excludeMinutesStep" type="number" min="0" max="10" ng-disabled="!isChecked || loading" ng-model="excludeValue" ng-change="" size="2" style="width:40px" /> <b>minutes</b>
</div>
</td>
<td align="left" colspan="1">
<div style="margin-right: 5px; margin-top:2px" ng-show="!loadinga">
<input id="datalabels" type="checkbox" ng-model="isLabelShowChecked" ng-click="" ng-disabled="loading" />
<label for="datalabels">Show Labels</label>
</div>
</td>
<td colspan="1" style="padding-right: 200px"></td>
<td colspan="1" style="padding-right: 200px"></td>
</tr>
<tr style="padding:2px">
<td colspan="4">
<hr/>
</td>
</tr>
<tr>
<td colspan="4">
<a ng-show="!isAdvancedFilterAvailable" ng-click="isAdvancedFilterAvailable=true">Show Advanced Filters</a>
<a ng-show="isAdvancedFilterAvailable" ng-click="isAdvancedFilterAvailable=false">Hide Advanced Filters</a>
</td>
</tr>
</table>
</div>
</div>
css
.text-label {
color: #aab2bd;
font: 8pt;
}
.text-label-emphasize {
color: #575F64;
}
Bootstrap have tons of weeks dedicated to making all the "style elements" into classes, use them. As blunt as that is, read the documentation when stuck it truly can help you.
Apart from that lets get stuck into your issue.
If you really need to use table in your panel then, the best practice is to place it below or before .panel-body but since we want to maintain responsive mobile first technology for all our future projects, try to avoid it unless you actually want a table for data. Nested columns are the best practice to maintain this.
An example of how to nest any column is to use .row followed by the column size you wish to nest, example below.
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"></div>
</div>
This would create good breakpoints and allow you to maintain a good UI/UX for your application.
Its important to understand bootstrap doesn't provide all the answers but it's a good style framework to expand from, so we make overriding css changes.
I added a few css overrides to make the borders square, and tried to
maintain your angular.js (you may need to review that)
Completed code with preview hosted on bootply
For the style checkboxes, take a look at Awesome Bootstrap Checkboxes, full documentation by them is available on their github.
Edit (Full width dropdown menu) --
To have the dropdown menu match the width of the button add the following css code to your overriding stylesheet.
.open>.dropdown-menu {
min-width: 100%;
}
Hope I helped ;)

Resources