<table class="spreadsheet">
<tr class="table-header table-row">
</tr>
</table>
<table class="spreadsheet">
<tr class="table-header table-row">
{{#each columns }}
<th class="table-cell {{ columnClass }}">
<span class="text">{{ title }}</span>
{{#if unit }}
<span class="unit">{{ unit }}</span>
{{/if}}
</th>
{{/each}}
</tr>
{{#each rows }}
<tr class="table-row">
{{#each data }}
<td class="table-cell {{ columnClass }}">
<input aria-label="{{ label }}" value="{{ value }}">
</td>
{{/each}}
</tr>
{{/each}}
</table>
/* No context defined for this component. */
.spreadsheet {
.table-row {
&:not(.table-header) {
border: {
bottom: 1px solid $color-irma-silver;
left: 1px solid $color-irma-silver;
}
box-shadow: -1px 0 0 $color-irma-silver inset;
.table-cell {
height: 10rem;
overflow: hidden;
&:not(:first-child) {
box-shadow: -1px 0 0 $color-irma-silver;
}
}
}
}
.table-row, .table-cell {
&.-invalid {
input, textarea, select, .dropdown .dropdown-label, .cke {
box-shadow: 0 0 0 1px $color-irma-danger;
color: $color-irma-danger;
}
}
&.-valid {
input, textarea, select, .dropdown .dropdown-label, .cke {
box-shadow: 0 0 0 1px $color-irma-spearmint;
color: $color-irma-spearmint;
}
}
}
.table-header {
padding: 0 3rem;
height: 10rem;
color: rgba($color-irma-slate, 0.7);
border-bottom: 1px solid $color-irma-silver;
background: rgba($color-irma-fog, (1 / 3));
@include font-primary-bold;
text-transform: uppercase;
.table-cell {
padding: 0 2rem;
color: $color-irma-navy;
line-height: 10rem;
white-space: nowrap;
text-overflow: ellipsis;
&:not(:first-child) {
box-shadow: -1px 0 0 rgba($color-irma-fog, (2 / 3));
}
&.-align-right {
text-align: right !important;
}
.unit {
opacity: 0.8;
@include font-primary-regular;
&::before {
content: '(';
}
&::after {
content: ')';
}
}
}
}
.table-cell {
min-width: 21rem;
color: rgba($color-irma-slate, 0.8);
line-height: 1.2em;
text-align: left;
&.-align-right {
* {
text-align: right !important;
}
}
input, select {
position: relative;
z-index: 1;
height: calc(100% - 2px) !important;
width: calc(100% - 3px) !important;
margin: 1px 0 0 1px;
padding: 0 2rem;
box-shadow: none;
line-height: 8rem;
&:focus {
box-shadow: 0 0 0 1px $color-irma-focus inset;
}
&.-disabled {
box-shadow: none;
}
}
select {
width: 100%;
background-position: calc(100% - 2rem) center;
}
.dropdown {
height: 8rem;
&:focus {
.dropdown-label {
box-shadow: 0 0 0 1px $color-irma-focus inset;
}
}
.dropdown-label {
box-shadow: 0 0 0 1px $color-irma-silver inset;
line-height: 8.5rem;
@include font-size;
}
.dropdown-options {
transform: translateY(-1px) translateZ(0);
padding: 0;
box-shadow: 0 5px 14px 0 rgba(0, 0, 0, 0.075),
0 0 0 1px $color-irma-silver inset;
.dropdown-item {
padding: 2rem 4rem;
}
}
}
}
}
.table {
&.-sortable {
.table-header {
.table-cell {
padding-right: 10rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
.table-input {
width: 100%;
}
.table-row {
&.table-header {
padding: 0 3rem;
color: rgba($color-irma-slate, 0.7);
@include font-primary-bold;
text-transform: uppercase;
.table-cell {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.unit {
opacity: 0.8;
@include font-primary-regular;
&::before {
content: '(';
}
&::after {
content: ')';
}
}
}
}
&:not(.table-header) {
border-bottom: 1px solid $color-irma-silver;
// color: rgba($color-irma-slate, 0.8);
.table-cell:not(.answer-cell) {
display: flex;
align-items: center;
height: 10rem;
&:not(.cell-actions):not(.table-actions) {
overflow: hidden;
& > * {
&:not(input):not(.dropdown):not(select):not(.form-field) {
max-height: 7rem;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
}
}
}
}
}
&:not(.table-header):not(.-with-input) {
padding: 0 3rem;
transition: all $transition;
}
&.table-link {
&.-active, &:hover {
cursor: pointer;
}
&.-active {
background: $color-irma-selected;
color: $color-irma-navy;
.table-cell {
.btn-action {
&.-active {
color: $color-irma-selected;
}
}
}
}
&.-hover:not(.-active), &:focus:not(.-active) {
background: $color-irma-hover-select;
color: $color-irma-navy;
.table-cell {
.btn-action {
&.-active {
color: $color-irma-hover-select;
}
}
}
}
}
&.-with-input {
position: relative;
&.-hover {
.table-group {
&::before {
box-shadow: 0 0 0 1px $color-irma-mint;
}
&::after {
opacity: 0.5;
}
}
}
input {
position: absolute;
z-index: 1;
top: 50%;
transform: translateY(-50%);
&[type='checkbox'] {
left: 3rem;
}
&:focus {
& + .table-group {
&::before {
box-shadow: 0 0 0 1px $color-irma-mint;
}
&::after {
opacity: 0.5;
}
}
}
&:checked {
& + .table-group {
box-shadow: 0 0 0 1px white;
background: rgba($color-irma-mint, 0.15);
&::before {
box-shadow: 0 0 0 1px $color-irma-mint;
}
&::after {
opacity: 1;
}
}
}
}
.table-group {
position: relative;
padding: 0 3rem;
margin: 0;
cursor: pointer;
transition: all $transition;
&::before, &::after {
left: 5.5rem;
transform: translate(-50%, -50%);
}
&::before {
box-shadow: 0 0 0 1px $color-irma-mist;
}
&::after {
background: $color-irma-mint;
}
}
.table-cell {
&:first-child {
padding-left: 10rem;
}
}
}
&.-highlight-completed {
background: rgba($color-irma-success, 0.1);
}
}
.table-row, .table-cell {
&.-invalid {
input, textarea, select, .dropdown .dropdown-label, .cke {
box-shadow: 0 0 0 1px $color-irma-danger inset !important;
color: $color-irma-danger;
}
}
&.-valid {
input, textarea, select, .dropdown .dropdown-label, .cke {
box-shadow: 0 0 0 1px $color-irma-spearmint inset !important;
color: $color-irma-spearmint;
}
}
}
.table-header {
height: 10rem;
border-bottom: 1px solid $color-irma-silver;
background: rgba($color-irma-fog, (1 / 3));
& + .table-row {
margin-top: 2px;
}
.table-cell {
color: $color-irma-navy;
line-height: 10rem;
&.-inactive {
opacity: 0.8;
&:hover {
.table-sort {
opacity: 0.33;
}
}
}
&.-active {
opacity: 1;
.table-sort {
opacity: 1;
}
}
&.-dragging {
opacity: 0.1;
}
&.-asc {
.table-sort {
&::after {
transform: rotate(180deg);
}
}
}
&.-desc {
.table-sort {
&::after {
transform: rotate(0);
}
}
}
&.table-actions {
padding-right: 2rem;
}
}
}
.table-group {
width: calc(100% - 20rem);
color: inherit;
text-decoration: none;
&.actions-group {
position: relative;
width: 20rem;
min-width: 15rem;
&.status-group {
width: 6rem;
min-width: 6rem;
}
.table-actions {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 100%;
height: 100%;
}
.cell-status {
position: relative;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: $color-irma-gray;
&:hover, &:focus {
&::after {
opacity: 1;
visibility: visible;
}
}
&::after {
content: 'Status: ' attr(data-submitted);
position: absolute;
bottom: 150%;
left: 50%;
display: block;
padding: 0 3rem;
background: $color-irma-navy;
border-radius: 2px;
color: white;
opacity: 0;
visibility: hidden;
@include font-size;
line-height: 6rem;
text-transform: capitalize;
white-space: nowrap;
transition: all $transition;
}
&[data-submitted="submitted"] {
background: $color-irma-success;
}
}
}
&.checkbox-group {
width: 10rem;
input {
margin-top: 2.5rem;
}
}
}
.table-cell {
position: relative;
overflow-x: hidden;
padding-right: 6rem;
color: rgba($color-irma-slate, 0.8);
line-height: 1.2em;
&.-em {
color: $color-irma-slate;
@include font-primary-medium;
@include font-size-other(14px);
}
&.-with-input {
color: $color-irma-slate;
}
&.-with-icon {
.icon {
margin-left: 1rem;
.fa {
padding: 0 1rem;
opacity: 0.33;
}
}
}
&.-with-actions {
.btn-action {
flex: 0 0 auto;
&:not(:first-child) {
margin-left: 3rem;
}
& + * {
margin-left: 3rem;
}
}
}
&.-dragging {
opacity: 0.1;
}
&.table-actions {
position: relative;
flex: 1 1 auto;
overflow: visible;
padding-right: 2rem;
.actions-list {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
}
.action-item {
display: inline-block;
&:not(:first-child) {
margin-left: 1rem;
}
}
}
&.cell-actions {
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 0;
.action-item {
flex: 0 0 auto;
}
}
&.-hidden {
display: none;
}
&[data-unit] {
&::before {
content: attr(data-unit);
}
&.-with-input {
&::before {
position: absolute;
top: 50%;
left: 1px;
transform: translateY(-50%);
display: flex;
justify-content: center;
align-items: center;
width: calc(8rem - 2px);
height: calc(8rem - 2px);
background: $color-irma-white;
border-right: 1px solid #EAEAEA;
border: {
top-right-radius: 0;
bottom-right-radius: 0;
}
@include font-primary-bold;
}
}
input {
padding-left: 10rem;
}
}
.table-sort {
position: absolute;
top: 0;
left: 0;
width: calc(100% - 6.3rem);
height: 100%;
padding-right: 0;
opacity: 0;
color: currentColor;
font-family: $font-icon;
text-align: right;
line-height: 10.6rem;
transition: opacity $transition;
&::after {
content: '';
transform: rotate(180deg) translateZ(0);
display: inline-block;
width: 3rem;
height: 3rem;
background: {
image: url('../img/svg/icon-arrow-down-slate.svg');
size: 100%;
position: center;
}
}
}
.table-handle {
position: absolute;
top: 50%;
right: 2rem;
transform: translateY(-50%);
height: calc(100% - 3rem - 2px);
padding: 0 1.5rem;
&.js-table-handle {
&:hover {
cursor: col-resize;
}
}
&::after {
content: '';
display: block;
margin: 0 auto;
width: 1px;
height: 100%;
background: $color-irma-navy;
opacity: 0.1;
}
}
.status {
color: $color-irma-slate;
}
a {
@include font-primary-bold;
@include font-size-other(14px);
text-decoration: none;
cursor: pointer;
&:hover, &:focus {
text-decoration: underline;
}
}
}
.column-drag {
position: fixed;
background: white;
box-shadow: 0 5px 20px 0 rgba(black, 0.1);
.table-cell {
padding: 4rem 6rem;
min-height: 16rem;
border-bottom: 1px solid $color-irma-silver;
&:first-child {
min-height: 10rem;
padding: 0 6rem 0 3rem;
background: rgba($color-irma-fog, (1 / 3));
color: $color-irma-navy;
@include font-primary-bold;
text-transform: uppercase;
line-height: 10rem;
}
.table-handle {
display: none;
}
}
}
// table forms
.table-cell {
&.-with-input {
overflow: visible !important;
}
.input-group {
input[type='checkbox'] {
margin: 2px 0;
&:focus {
+ .label {
&::before {
box-shadow: 0 0 0 1px $color-irma-focus;
}
}
}
&:hover {
+ .label {
&::before {
box-shadow: 0 0 0 1px $color-irma-focus;
}
}
}
+ .label {
&::before {
box-shadow: 0 0 0 1px #ACB2BC;
transition: all $transition;
}
}
}
}
input, select {
max-width: 100%;
width: auto;
&.-disabled {
box-shadow: none;
}
&:not([type='checkbox']):not([type='radio']) {
height: 8rem;
width: 100%;
line-height: 8rem;
box-shadow: 0 0 0 1px $color-irma-silver inset;
&:focus {
box-shadow: 0 0 0 1px $color-irma-focus inset;
}
}
&[type='checkbox'] {
width: 5rem;
}
}
select {
width: 100%;
padding-right: 8rem;
background-position: calc(100% - 2rem) center;
}
input {
&[disabled] {
+ .search-advanced-cell {
border-left: 1px solid rgba(black, 0.1);
}
}
}
.search-box {
input {
padding-right: 10rem;
text-overflow: ellipsis;
}
}
.dropdown {
height: 8rem;
&:focus {
.dropdown-label {
box-shadow: 0 0 0 1px $color-irma-focus inset;
}
}
.dropdown-label {
box-shadow: 0 0 0 1px $color-irma-silver inset;
line-height: 8.5rem;
@include font-size;
}
.dropdown-options {
transform: translateY(-1px) translateZ(0);
padding: 0;
box-shadow: 0 5px 14px 0 rgba(0, 0, 0, 0.075),
0 0 0 1px $color-irma-silver inset;
.dropdown-item {
padding: 2rem 4rem;
}
}
}
.date-field {
input {
padding-right: 12rem;
}
}
.btn-date-picker {
width: 8rem;
height: calc(8rem - 2px);
margin-top: 1px;
&::after {
line-height: 8rem;
}
}
.form-field {
width: 100%;
input:not([type='checkbox']) {
width: 100%;
}
}
.search-advanced-cell {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
height: calc(8rem - 2px);
border-left: 1px solid $color-irma-silver;
.btn {
width: 8rem;
height: 100%;
color: $color-irma-navy;
border: {
bottom-right-radius: 0.5rem;
top-right-radius: 0.5rem;
}
text-align: center;
* {
margin: 0;
color: inherit;
}
&:hover, &:focus {
background: $color-irma-navy;
color: white;
}
}
}
.search-tags {
left: 0;
padding-left: 2rem;
padding-right: 10rem;
width: 100%;
height: 6rem;
pointer-events: none;
.tag-item {
max-width: 100%;
width: auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
pointer-events: auto;
}
}
}
}
/*
* _table-actions.js
*/
irma.tableActions = (function () {
'use strict';
var $body = $('body');
var doAction = function (name, data, $btn) {
// console.log('Doing \"' + name + '\"', data);
switch(name) {
case "details":
var id = data.return ? data.return : data.value;
var searchValue = data.customModalSearchValue ? data.customModalSearchValue : $btn.data().customModalSearchValue;
actionDetails(id, searchValue, $btn);
break;
case "search-delete":
actionDeleteSearch(data.id, data.title, $btn);
break;
case "record-delete":
actionDeleteRecord(data.id, $btn.closest('.table').data().module);
break;
case "record-edit":
actionGetRecord(data.id, $btn.closest('.table').data().module);
break;
case "record-clone":
actionCloneRecord(data.id, $btn.closest('.table').data().module);
break;
case "gui-new":
irma.searchPanel.newGUI($('.modal-gui-new'));
break;
case "gui-select":
irma.searchPanel.loadGUIList();
break;
case "gui-update":
irma.searchPanel.newGUI($('.modal-gui-update'), irma.storage.get('userSettings').customGUI);
break;
case "gui-delete":
irma.searchPanel.deleteGUI(data.title, data.id);
break;
case "new-row":
actionGetRecord("New", data.module);
break;
case "view-document":
actionViewDocument(data, $btn);
break;
case "clear-code":
clearCode($btn);
break;
default:
break;
}
};
var documentWindow;
var clearCode = function ($btn) {
$btn.closest('.table-row').find('input').val('');
};
var actionViewDocument = function (data, $target) {
documentWindow = window.open('');
var url = irma.baseURL + "getMyDocument.asp?" + irma.urlParams + "&irmaWebServiceLookupID=" + irma.userId + "&moduleName=" + data.moduleName + "&moduleRecordID=" + data.documentId;
$.ajax({
url: url,
success: function (res) {
if (res.status == "success") {
if (res.data[0].irmaDocumentStatus == "success") {
displayDocument(res.data[0]);
}
else {
irma.alert.createAlert({
title: "Error loading document",
info: (res.data[0].irmaDocumentMessage)
}, $target.closest('.card-section'));
documentWindow.close();
}
}
else {
irma.alert.createAlert({
title: "Error loading document",
info: (res.reason)
}, $target.closest('.card-section'));
documentWindow.close();
}
},
error: function (jqXHR, textStatus) {
},
complete: function () {
}
});
};
var displayDocument = function (data) {
documentWindow.location = data.irmaDocumentURL;
};
var actionDetails = function (id, searchValue, $btn) {
var active = $btn.is('.-active');
$('.btn-action').removeClass('-active');
irma.tooltip.removeAll();
var url = irma.baseURL + "createMyModal.asp?" + irma.urlParams + "&irmaWebServiceLookupID=" + id + "&searchValue=" + searchValue;
if (active || $btn.is('.-active')) {
}
else {
$btn.addClass('-active');
$.ajax({
url: url
}).done(function (results) {
if (results.data && results.data.length > 0 && results.data[0].lineType) {
sortDetails(results.data, $btn);
}
else {
console.log("Please check createMyModal response data.");
}
}).fail(function (jqXHR, textStatus) {
irma.logger.postLog(textStatus, url);
});
}
};
var sortDetails = function (res, $btn) {
var lines = _.filter(res, function (r) {
return r.lineType.toLowerCase() != 'header';
});
// var externalLinks = irma.hasOwnProperty("debug") && irma.debug.hasOwnProperty("tooltip") && irma.debug.tooltip.hasOwnProperty("newWindow") ? irma.debug.tooltip.newWindow : true;
var rows = _.map(lines, function (row) {
var data = [];
for (var j = 1; j <= 2; j++) {
var link = row['lineLinkType' + j].toLowerCase(),
value = row['lineData' + j],
href = value,
display = row['lineDataDisplay' + j] && row['lineLinkType' + j].length > 0 ? row['lineDataDisplay' + j] : value;
switch (link) {
case 'hyperlink':
if (href.indexOf('http') < 0) {
href = "http://" + href;
}
break;
case 'email':
href = "mailto:" + href;
break;
case 'telephone':
href = "tel:" + href;
break;
default:
break;
}
if (row['lineData' + j].length > 0) {
data.push({
value: value,
link: link.length > 0,
href: href,
external: link == 'hyperlink',
display: display
});
}
}
var rowClass = '';
switch (row.lineType.toLowerCase()) {
case 'heading':
rowClass = 'subheadline';
break;
case 'line':
rowClass = 'divider';
break;
default:
rowClass = 'row';
break;
}
var r = {
class: rowClass,
label: row.lineLabel,
columns: 1 + data.length,
align: row.lineDataJustify.toLowerCase(),
data: data
};
if (r.align == 'left' && data.length > 0) {
r.columns = 3;
}
return r;
});
var context = {
rows: rows,
title: _.find(res, { lineType: 'Header' }).lineLabel
};
showDetails(context, $btn);
};
var showDetails = function (context, $btn) {
$.get(irma.assetPath + '/templates/tooltip/tooltip--custom.hbs?v=' + irma.templateVersion, function (template) {
var templateScript = Handlebars.compile(template);
var html = templateScript(context);
var $tooltip, position, yMin, yMax,
translate = 0;
if ($('.modal.-active').length) {
$tooltip = $btn.closest('.modal-inner').append(html).find('.tooltip');
position = {
x: $btn.offset().left,
y: $btn.offset().top + $btn.height() / 2 - $body.scrollTop()
};
yMax = window.innerHeight - $tooltip.height() / 2 - 20;
yMin = $tooltip.height() / 2 + 20;
}
else {
$tooltip = $btn.closest('.content').append(html).find('.tooltip');
position = {
x: $btn.offset().left,
y: $btn.offset().top + $btn.height() / 2 - $(window).scrollTop()
};
yMax = window.innerHeight - $tooltip.height() / 2 - 20;
yMin = $tooltip.height() / 2 + 20 + $('.site-header').height();
}
if (position.y > yMax) {
translate = yMax - position.y;
}
else if (position.y < yMin) {
translate = yMin - position.y;
}
$tooltip.addClass('-active').css({
'left': '' + position.x + 'px',
'top': '' + position.y + 'px'
}).find('.tooltip-inner').css({
'transform': 'translateY(' + translate + 'px)'
});
irma.units.init();
});
};
var actionGetRecord = function (id, module) {
// pass id = 'New' for new record;
var url = irma.baseURL + "getMyRecord.asp?" + irma.urlParams + "&irmaWebServiceLookupID=" + irma.userId + "&moduleRecordID=" + id + "&moduleName=" + module;
$.ajax({
url: url
}).done(function (results) {
var data = results.data[0];
if (data && data.irmaURLredirect && data.irmaURLredirect.length) {
window.location = data.irmaURLredirect;
}
}).fail(function (jqXHR, textStatus) {
irma.logger.postLog(textStatus, url);
});
};
var actionCreateRecord = function (id, parent, module) {
// pass id = 'New' for new record;
var url = irma.baseURL + "createMyRecord.asp?" + irma.urlParams + "&moduleRecordID=" + id + "&moduleParentRecordID=" + parent + "&moduleName=" + module;
$.ajax({
url: url
}).done(function (results) {
var data = results.data[0];
if (data && data.irmaURLredirect && data.irmaURLredirect.length) {
window.location = data.irmaURLredirect;
}
}).fail(function (jqXHR, textStatus) {
irma.logger.postLog(textStatus, url);
});
};
var actionDeleteRecord = function (id, module) {
var url = irma.baseURL + "deleteMyRecord.asp?" + irma.urlParams + "&irmaWebServiceLookupID=" + irma.userId + "&moduleRecordID=" + id + "&moduleName=" + module;
$.ajax({
url: url
}).done(function (results) {
var data = results.data[0];
if (data && data.irmaURLredirect && data.irmaURLredirect.length) {
window.location = data.irmaURLredirect;
}
}).fail(function (jqXHR, textStatus) {
irma.logger.postLog(textStatus, url);
});
};
var actionCloneRecord = function (id, module) {
var url = irma.baseURL + "cloneMyRecord.asp?" + irma.urlParams + "&irmaWebServiceLookupID=" + irma.userId + "&moduleRecordID=" + id + "&moduleName=" + module;
$.ajax({
url: url
}).done(function (results) {
var data = results.data[0];
if (data && data.irmaURLredirect && data.irmaURLredirect.length) {
window.location = data.irmaURLredirect;
}
}).fail(function (jqXHR, textStatus) {
irma.logger.postLog(textStatus, url);
});
};
var actionDeleteSearch = function (id, title, $btn) {
var url = irma.baseURL + "saveMySearchState.asp?" + irma.urlParams + "&SearchModule=" + irma.searchModule + "&SearchTitle=" + title + "&SearchID=" + id + "&SearchType=delete";
$.ajax({
url: url
}).done(function (results) {
irma.searchPanel.loadSavedSearches($btn.closest('.modal'));
}).fail(function (jqXHR, textStatus) {
irma.logger.postLog(textStatus, url);
});
};
var init = function () {
$(document).on('click', '.js-table-action', function (e) {
e.stopPropagation();
doAction($(this).data().action, $(this).closest('.table-row').data(), $(this));
}).on('click', '.js-page-action', function (e) {
e.stopPropagation();
var action = $(this).data().action;
irma.modal.openModal(action);
doAction(action, $(this).data());
}).on('click', '.js-cell-action', function (e) {
e.stopPropagation();
doAction($(this).data().action, $(this).data(), $(this));
}).on('click', '.js-edit-record', function (e) {
e.stopPropagation();
actionGetRecord($(this).data().id, $(this).closest('.table').data().module);
}).on('click', '.js-create-record', function (e) {
e.stopPropagation();
var data = $(this).closest('.search-results').data();
actionCreateRecord($(this).closest('.table-row').data().return, data.parent, data.module);
}).on('click', '.js-parent-create-record', function (e) {
e.stopPropagation();
var data = $(this).data();
actionCreateRecord(data.create, data.parent, data.module);
}).on('mouseover click', '.table-actions, .cell-actions .action-item', function (e) {
$(this).blur();
e.stopPropagation();
}).on('mouseover', '.js-table-action, .js-cell-action', function (e) {
e.stopPropagation();
}).on('click', '.js-table-link', function (e) {
if (!$(e.target).is('.btn')) {
window.location = $(this).data().href;
}
}).on('click', '.js-open-document', function (e) {
e.preventDefault();
actionViewDocument($(this).data(), $(this));
});
};
return {
init: init
};
}());
/*
* _table.js
*/
irma.table = (function () {
'use strict';
var ct = {},
resizing = false,
dragging = false,
minWidth = 10,
$body = $('body'),
dragStart,
$searchForm;
var resizeTable = function (e) {
var t = ct,
deltaX = t.mouse.x - e.pageX,
width = [];
if (t.width[0] - deltaX > t.min && t.width[1] + deltaX > t.min) {
for (var i = 0; i < 2; i++) {
width[i] = t.width[i] + (2 * i - 1) * deltaX;
t.$column[i].css({
width: "" + width[i] + "px"
});
}
}
};
var isDragging = function () {
return resizing || dragging;
};
var saveTable = function () {
var t = ct,
pct = [];
for (var i = 0; i < 2; i++) {
pct[i] = 100 * t.$column[i].outerWidth() / t.$column[i].closest('.table-group').width();
t.$column[i].css('width', '' + pct[i] + '%');
}
var customGUI = irma.storage.get('userSettings').customGUI || { columns: [] };
_.forEach(customGUI.columns, function (column, i) {
for (var j = 0; j < 2; j++) {
if (t.$column[j].data().name == column.name) {
customGUI.columns[i].width = '' + pct[j] + '';
}
}
});
irma.settings.saveGUI(customGUI, ($searchForm.length > 0));
};
var dragColumn = function (e) {
var position = {
x: ct.position.x - (ct.mouse.x - e.pageX),
y: ct.position.y - (ct.mouse.y - e.pageY)
};
ct.$drag.css({
left: '' + position.x + 'px',
top: '' + position.y + 'px'
});
if (Math.abs(ct.mouse.x - e.pageX) > 20) {
_.forEach(ct.grid, function (line, i) {
if ((i === 0 && position.x < line) || (position.x < line && position.x >= ct.grid[i - 1] - 40)) {
ct.$column.css('order', i * 10 + 5);
ct.newOrder = i;
}
else if (position.x >= line - 40) {
ct.$column.css('order', i * 10 + 15);
ct.newOrder = i + 1;
}
});
}
else {
ct.$column.css('order', ct.column * 10);
ct.newOrder = ct.column;
}
};
var setColumn = function () {
$('.column-drag').animate({
opacity: 0
}, 300, function () {
$(this).remove();
});
ct.$column.removeClass('-dragging');
if (ct.column != ct.newOrder) {
var settings = irma.storage.get('userSettings'),
customGUI = settings.customGUI,
columns = customGUI.columns,
order = ct.column - 1,
mover = columns[order],
prev;
ct.newOrder += ct.newOrder > order ? -1 : 0;
_.forEach(columns, function (column, i) {
if (ct.newOrder > order) {
if (i > order && i <= ct.newOrder) {
columns[i - 1] = column;
}
}
else if (ct.newOrder < order) {
if (i >= ct.newOrder && i < order) {
if (i == ct.newOrder) {
prev = column;
}
var c = columns[i + 1];
columns[i + 1] = prev;
prev = c;
}
}
});
columns[ct.newOrder] = mover;
customGUI.columns = columns;
irma.settings.saveGUI(customGUI, ($searchForm.length > 0));
var searchResults = irma.storage.get('searchResults');
irma.searchPanel.sortRecords(searchResults.results, searchResults.data);
}
};
var init = function () {
$searchForm = $('.search-form');
$(document).on('mousedown', '.js-table-handle', function (e) {
e.stopPropagation();
ct = {
$table: $(this).closest('.table'),
$group: $(this).closest('.table-group'),
column: $(this).closest('.table-cell').index(),
$handle: $(this),
mouse: {
x: e.pageX,
y: e.pageY
}
};
ct.min = ct.$group.width() * minWidth / 100;
ct.$column = [];
ct.width = [];
ct.pct = [];
for (var i = 0; i < 2; i++) {
ct.$column[i] = ct.$table.find('.table-cell:not(.table-actions)').filter(":nth-child(" + (ct.column + i + 1).toString() + ")");
ct.width[i] = ct.$column[i].outerWidth();
ct.pct[i] = 100 * ct.width[i] / ct.$group.outerWidth();
}
resizing = true;
$('body, .table-row').css({
'cursor': 'col-resize',
'user-select': 'none'
});
}).on('mousemove', function (e) {
if (resizing) {
resizeTable(e);
}
}).on('mouseup', function () {
if (resizing) {
resizing = false;
$('body').css({
'cursor': 'auto',
'user-select': 'auto'
});
$('.table-row').css({
'cursor': 'pointer',
'user-select': 'auto'
});
saveTable();
}
});
$(document).on('mousedown', '.js-table-drag', function (e) {
ct = {
$table: $(this).closest('.table'),
column: $(this).closest('.table-cell').index() + 1,
mouse: {
x: e.pageX,
y: e.pageY
},
width: $(this).closest('.table-cell').outerWidth(),
grid: []
};
ct.newOrder = ct.column;
ct.position = {
x: $(this).offset().left,
y: $(this).offset().top - $(window).scrollTop()
};
ct.$table.find('.table-row .table-group:not(.actions-group)').eq(0).find('.table-cell').each(function (i) {
ct.grid[i] = $(this).offset().left + 20;
});
ct.$column = ct.$table.find('.table-group:not(.actions-group) .table-cell:nth-child(' + ct.column +')');
var $html = $('<div></div>').addClass('column-drag').css({
left: '' + ct.position.x + 'px',
top: '' + ct.position.y + 'px',
width: '' + ct.width + 'px'
});
ct.$column.each(function () {
$html.append($(this).clone().removeAttr('style'));
});
$('body').css('user-select', 'none');
dragStart = setTimeout(function () {
dragging = true;
ct.$table.append($html);
ct.$drag = ct.$table.find('.column-drag');
ct.$column.addClass('-dragging');
}, 200);
}).on('mousemove', function (e) {
if (dragging) {
dragColumn(e);
}
}).on('mouseup', function (e) {
clearInterval(dragStart);
if (dragging) {
dragging = false;
setColumn();
}
$('body').css('user-select', 'auto');
});
$(document).on('mouseover', '.table-link', function (e) {
$(this).addClass('-hover');
}).on('mouseout', '.table-link', function (e) {
$(this).removeClass('-hover');
});
$(document).on('click', '.js-table-checkbox', function () {
$(this).find('*').blur();
}).on('click', '.js-table-select', function () {
var $table = $(this).closest('.table'),
$form = $(this).closest('form'),
message = $(this).data().message;
$table.find('input:checked').not($(this).find('input')).prop('checked', false);
if ($table.find('input:checked').length) {
message = message && message.length ? message : "No message provided";
$form.find('.approval-message .body').html(message);
$form.find('.hidden-group').removeClass('-hidden');
}
else {
$form.find('.hidden-group').addClass('-hidden');
}
}).on('click', '.js-table-link', function () {
window.location = $(this).data().href;
}).on('click', '.table-cell input', function (e) {
e.stopPropagation();
var $row = $(this).closest('.js-table-checkbox'),
$checkbox = $row.find("input[type='checkbox']");
if ($row.length && !$checkbox.is(':checked')) {
$checkbox.prop('checked', true);
}
}).on('mouseover', '.table-row.-with-input', function () {
$(this).addClass('-hover');
}).on('mouseout', '.table-row.-with-input', function () {
$(this).removeClass('-hover');
});
// table addition
$(document).on('keyup change', '.js-table-addend', function () {
var $row = $(this).closest('.table-row'),
$addends = $row.find('.js-table-addend input'),
$sum = $row.find('.js-table-sum');
var sum = function ($array) {
var addend = $array.eq(0).val();
return ($array.length === 0) ? 0 : (addend.length ? parseInt(addend) : 0) + sum($array.slice(1));
};
$sum.find('.text').text(sum($addends));
$sum.find('input').val(sum($addends));
});
};
return {
init: init,
isDragging: isDragging
};
}());
There are no notes for this item.