<div class="status-table ">
<table class="status-table__table tablesaw tablesaw-stack" data-tablesaw-mode="stack" data-tablesaw-hide-empty>
<thead class="status-table__head">
<tr class="status-table__row">
<th class="status-table__header status-table__header--component" scope="col">
<div class="check
check__stat status-table__check--header">
<input type="checkbox" id="check18" name="check" value="" class="check__input" data-tablesaw-checkall>
<label for="check18" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Vali kõik</span>
</label>
</div>
</th>
<th class="status-table__header" data-key="pakkumiseNr" scope="col">
<span class="status-table__title">Pakkumise nr</span>
</th>
<th class="status-table__header" data-key="objektiKood" scope="col">
<span class="status-table__title">Obj. k.</span>
</th>
<th class="status-table__header" data-key="esindus" scope="col">
<span class="status-table__title">Esindus</span>
</th>
<th class="status-table__header" data-key="müügiisik" scope="col">
<span class="status-table__title">Müügiisik</span>
</th>
<th class="status-table__header" data-key="kontakt" scope="col">
<span class="status-table__title">Kontakt</span>
</th>
<th class="status-table__header" data-key="koostatud" scope="col">
<span class="status-table__title">Koostatud</span>
</th>
<th class="status-table__header" data-key="lepinguAlgus" scope="col">
<span class="status-table__title">Lepingu algus</span>
</th>
<th class="status-table__header" data-key="staatus" scope="col">
<span class="status-table__title">Staatus</span>
</th>
<th class="status-table__header status-table__header--empty" scope="col">
</th>
<th class="status-table__header status-table__header--component" scope="col">
<div class="dropdown js-dropdown status-table__dropdown js-status-table-dropdown" data-offset-x="0" data-offset-y="0">
<button type="button" class="button button--text button--text-color status-table__dropdown-button dropdown__trigger button--icon">
<span class="button__inner">
<svg class="icon button__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#dots"></use>
</svg>
<span class="button__text">Valikud</span>
</span>
</button>
<div class="dropdown__content">
<div class="dropdown__content-inner">
Kuva tabeli veerge
<fieldset class="choice-group
dropdown__choices">
<legend class="choice-group__label h-visually-hidden">Kuva tabeli veerge</legend>
<div class="choice-group__inner">
<div class="check
choice-group__item">
<input type="checkbox" id="check1" name="check" value="" class="check__input" checked data-key="pakkumiseNr">
<label for="check1" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Pakkumise nr</span>
</label>
</div>
<div class="check
choice-group__item">
<input type="checkbox" id="check2" name="check" value="" class="check__input" checked data-key="objektiKood">
<label for="check2" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Objekti kood</span>
</label>
</div>
<div class="check
choice-group__item">
<input type="checkbox" id="check3" name="check" value="" class="check__input" checked data-key="esindus">
<label for="check3" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Esindus</span>
</label>
</div>
<div class="check
choice-group__item">
<input type="checkbox" id="check4" name="check" value="" class="check__input" checked data-key="müügiisik">
<label for="check4" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Müügisik</span>
</label>
</div>
<div class="check
choice-group__item">
<input type="checkbox" id="check5" name="check" value="" class="check__input" checked data-key="kontakt">
<label for="check5" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Kontakt</span>
</label>
</div>
<div class="check
choice-group__item">
<input type="checkbox" id="check6" name="check" value="" class="check__input" checked data-key="koostatud">
<label for="check6" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Koostatud</span>
</label>
</div>
<div class="check
choice-group__item">
<input type="checkbox" id="check7" name="check" value="" class="check__input" checked data-key="lepinguAlgus">
<label for="check7" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Lepingu algus</span>
</label>
</div>
<div class="check
choice-group__item is-disabled">
<input type="checkbox" id="check8" name="check" value="" class="check__input" checked disabled data-key="staatus">
<label for="check8" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Staatus</span>
</label>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody class="status-table__body">
<tr class="status-table__row">
<td class="status-table__item ">
<div class="check
check__stat status-table__check">
<input type="checkbox" id="check12" name="check" value="" class="check__input">
<label for="check12" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text "></span>
</label>
</div>
</td>
<td class="status-table__item " data-key="pakkumiseNr">
<span class="text-truncate"><a href="#">RP011802</a></span>
</td>
<td class="status-table__item " data-key="objektiKood">
O4
</td>
<td class="status-table__item " data-key="esindus">
<span class="text-truncate"><a href="#">1011</a></span>
</td>
<td class="status-table__item " data-key="müügiisik">
<div class="cell-edit js-cell-edit">
<div class="cell-edit__inner">
<button type="button" class="cell-edit__content js-cell-edit-cell">
<span class="cell-edit__content-inner">
<span class="cell-edit__text ">
Rendipunkt
</span>
<svg class="icon cell-edit__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#edit"></use>
</svg>
</span>
</button>
<div class="cell-edit__textfield-wrapper js-cell-edit-input">
<div class="textfield cell-edit__textfield">
<label class="textfield__label h-visually-hidden" for="input1">
Textfield label
</label>
<div class="textfield__inner">
<input class="textfield__input" type="text" id="input1" name="textfield" value="Rendipunkt">
</div>
</div>
<button type="button" class="cell-edit__button js-cell-edit-button">
<span class="cell-edit__button-inner">
<span class="cell-edit__button-text">text</span>
<svg class="icon cell-edit__button-icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
</button>
</div>
</div>
</div>
</td>
<td class="status-table__item " data-key="kontakt">
Tiit Krediit
</td>
<td class="status-table__item " data-key="koostatud">
15.06.2022
</td>
<td class="status-table__item " data-key="lepinguAlgus">
18.06.2022
</td>
<td class="status-table__item " data-key="staatus">
<div class="status status--type-success">
<span class="status__bullet"></span>
<span class="status__text">Kinnitatud</span>
</div>
</td>
<td class="status-table__item " data-tablesaw-no-labels>
<button type="button" class="button button--tiny status-table__button">
<span class="button__inner">
<span class="button__text">Kinnitamata</span>
</span>
</button>
</td>
</tr>
<tr class="status-table__row">
<td class="status-table__item ">
<div class="check
check__stat status-table__check">
<input type="checkbox" id="check13" name="check" value="" class="check__input">
<label for="check13" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text "></span>
</label>
</div>
</td>
<td class="status-table__item " data-key="pakkumiseNr">
<span class="text-truncate"><a href="#">RP011802</a></span>
</td>
<td class="status-table__item " data-key="objektiKood">
O4
</td>
<td class="status-table__item " data-key="esindus">
<span class="text-truncate"><a href="#">1011</a></span>
</td>
<td class="status-table__item " data-key="müügiisik">
Rendipunkt
</td>
<td class="status-table__item " data-key="kontakt">
Teet Deebet
</td>
<td class="status-table__item " data-key="koostatud">
15.06.2022
</td>
<td class="status-table__item " data-key="lepinguAlgus">
18.06.2022
</td>
<td class="status-table__item " data-key="staatus">
<div class="status status--type-error">
<span class="status__bullet"></span>
<span class="status__text">Kinnituse ootel</span>
</div>
</td>
<td class="status-table__item " data-tablesaw-no-labels>
<button type="button" class="button button--tiny status-table__button">
<span class="button__inner">
<span class="button__text">Kinnitamata</span>
</span>
</button>
</td>
</tr>
<tr class="status-table__row">
<td class="status-table__item ">
<div class="check
check__stat status-table__check">
<input type="checkbox" id="check14" name="check" value="" class="check__input">
<label for="check14" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text "></span>
</label>
</div>
</td>
<td class="status-table__item " data-key="pakkumiseNr">
<span class="text-truncate"><a href="#">RP011802</a></span>
</td>
<td class="status-table__item " data-key="objektiKood">
O4
</td>
<td class="status-table__item " data-key="esindus">
<span class="text-truncate"><a href="#">1011</a></span>
</td>
<td class="status-table__item " data-key="müügiisik">
Rendipunkt
</td>
<td class="status-table__item " data-key="kontakt">
Teet Deebet
</td>
<td class="status-table__item " data-key="koostatud">
15.06.2022
</td>
<td class="status-table__item " data-key="lepinguAlgus">
18.06.2022
</td>
<td class="status-table__item " data-key="staatus">
<div class="status status--type-info">
<span class="status__bullet"></span>
<span class="status__text">Koostamisel</span>
</div>
</td>
<td class="status-table__item " data-tablesaw-no-labels>
<button type="button" class="button button--tiny status-table__button">
<span class="button__inner">
<span class="button__text">Kinnitamata</span>
</span>
</button>
</td>
</tr>
<tr class="status-table__row">
<td class="status-table__item ">
<div class="check
check__stat status-table__check">
<input type="checkbox" id="check15" name="check" value="" class="check__input">
<label for="check15" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text "></span>
</label>
</div>
</td>
<td class="status-table__item " data-key="pakkumiseNr">
<span class="text-truncate"><a href="#">RP011802</a></span>
</td>
<td class="status-table__item " data-key="objektiKood">
O4
</td>
<td class="status-table__item " data-key="esindus">
<span class="text-truncate"><a href="#">1011</a></span>
</td>
<td class="status-table__item " data-key="müügiisik">
Rendipunkt
</td>
<td class="status-table__item " data-key="kontakt">
Teet Deebet
</td>
<td class="status-table__item " data-key="koostatud">
15.06.2022
</td>
<td class="status-table__item " data-key="lepinguAlgus">
18.06.2022
</td>
<td class="status-table__item " data-key="staatus">
<div class="status status--type-inactive">
<span class="status__bullet"></span>
<span class="status__text">Tagasi lükatud</span>
</div>
</td>
<td class="status-table__item " data-tablesaw-no-labels>
<button type="button" class="button button--tiny status-table__button">
<span class="button__inner">
<span class="button__text">Kinnitamata</span>
</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="status-table {{ class }} {{ modifier }}">
<table class="status-table__table tablesaw tablesaw-stack" data-tablesaw-mode="stack" data-tablesaw-hide-empty>
{% if data.headers %}
<thead class="status-table__head">
<tr class="status-table__row">
{% for header in data.headers %}
<th class="status-table__header{% if header.component %} status-table__header--component{% endif %}{% if header.label|length == 0 and not (header.component is defined) %} status-table__header--empty{% endif %}"{% if header.key %} data-key="{{ header.key }}"{% endif %} scope="col">
{% if header.component %}
{% include ('@' ~ header.component) with { data: header.componentData, class: header.componentData.componentClass, modifier: header.componentData.modifier } %}
{% elseif (header.label|length > 0) %}
<span class="status-table__title">{{ header.label }}</span>
{% endif %}
</th>
{% endfor %}
</tr>
</thead>
{% endif %}
{% if data.rows %}
<tbody class="status-table__body">
{% for row in data.rows %}
<tr class="status-table__row">
{% for cell in row.cells %}
<td class="status-table__item {{ cell.class }}"{% if cell.component == 'button' %} data-tablesaw-no-labels{% endif %}{% if cell.key %} data-key="{{ cell.key }}"{% endif %} >
{% if cell.component %}
{% include ('@' ~ cell.component) with { data: cell.componentData, class: cell.componentData.componentClass, modifier: cell.componentData.modifier } %}
{% else %}
{{cell.content}}
{% endif %}
</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
{% endif %}
</table>
</div>
{
"language": "en-US",
"data": {
"headers": [
{
"component": "check",
"componentData": {
"id": "check18",
"name": "check",
"label": "Vali kõik",
"componentClass": "status-table__check--header",
"modifier": "check__stat",
"attributes": "data-tablesaw-checkall"
}
},
{
"label": "Pakkumise nr",
"key": "pakkumiseNr"
},
{
"label": "Obj. k.",
"key": "objektiKood"
},
{
"label": "Esindus",
"key": "esindus"
},
{
"label": "Müügiisik",
"key": "müügiisik"
},
{
"label": "Kontakt",
"key": "kontakt"
},
{
"label": "Koostatud",
"key": "koostatud"
},
{
"label": "Lepingu algus",
"key": "lepinguAlgus"
},
{
"label": "Staatus",
"key": "staatus"
},
{
"label": ""
},
{
"component": "dropdown",
"componentData": {
"componentClass": "status-table__dropdown js-status-table-dropdown",
"buttonModifier": "button--text button--text-color status-table__dropdown-button",
"trigger": {
"text": "Valikud",
"icon": "dots",
"iconPosition": null
},
"triggerIconAnimated": false,
"content": "Kuva tabeli veerge",
"options": null,
"choices": {
"label": "Kuva tabeli veerge",
"type": "check",
"choices": [
{
"id": "check1",
"label": "Pakkumise nr",
"isChecked": true,
"name": "check",
"attributes": "data-key=\"pakkumiseNr\""
},
{
"id": "check2",
"label": "Objekti kood",
"isChecked": true,
"name": "check",
"attributes": "data-key=\"objektiKood\""
},
{
"id": "check3",
"label": "Esindus",
"isChecked": true,
"name": "check",
"attributes": "data-key=\"esindus\""
},
{
"id": "check4",
"label": "Müügisik",
"isChecked": true,
"name": "check",
"attributes": "data-key=\"müügiisik\""
},
{
"id": "check5",
"label": "Kontakt",
"isChecked": true,
"name": "check",
"attributes": "data-key=\"kontakt\""
},
{
"id": "check6",
"label": "Koostatud",
"isChecked": true,
"name": "check",
"attributes": "data-key=\"koostatud\""
},
{
"id": "check7",
"label": "Lepingu algus",
"isChecked": true,
"name": "check",
"attributes": "data-key=\"lepinguAlgus\""
},
{
"id": "check8",
"label": "Staatus",
"isChecked": true,
"name": "check",
"attributes": "data-key=\"staatus\"",
"isDisabled": true
}
],
"isLabelHidden": true
}
}
}
],
"rows": [
{
"cells": [
{
"component": "check",
"componentData": {
"id": "check12",
"name": "check",
"componentClass": "status-table__check",
"modifier": "check__stat"
}
},
{
"content": "<span class=\"text-truncate\"><a href=\"#\">RP011802</a></span>",
"key": "pakkumiseNr"
},
{
"content": "O4",
"key": "objektiKood"
},
{
"content": "<span class=\"text-truncate\"><a href=\"#\">1011</a></span>",
"key": "esindus"
},
{
"component": "cell-edit",
"componentData": {
"text": "Rendipunkt",
"textfield": {
"label": "Textfield label",
"id": "input1",
"name": "textfield",
"isLabelHidden": true
},
"buttonText": "text"
},
"key": "müügiisik"
},
{
"content": "Tiit Krediit",
"key": "kontakt"
},
{
"content": "15.06.2022",
"key": "koostatud"
},
{
"content": "18.06.2022",
"key": "lepinguAlgus"
},
{
"component": "status",
"componentData": {
"text": "Kinnitatud",
"type": "success"
},
"key": "staatus"
},
{
"component": "button",
"componentData": {
"componentClass": "status-table__button",
"modifier": "button--tiny",
"text": "Kinnitamata"
}
}
]
},
{
"cells": [
{
"component": "check",
"componentData": {
"id": "check13",
"name": "check",
"componentClass": "status-table__check",
"modifier": "check__stat"
}
},
{
"content": "<span class=\"text-truncate\"><a href=\"#\">RP011802</a></span>",
"key": "pakkumiseNr"
},
{
"content": "O4",
"key": "objektiKood"
},
{
"content": "<span class=\"text-truncate\"><a href=\"#\">1011</a></span>",
"key": "esindus"
},
{
"content": "Rendipunkt",
"key": "müügiisik"
},
{
"content": "Teet Deebet",
"key": "kontakt"
},
{
"content": "15.06.2022",
"key": "koostatud"
},
{
"content": "18.06.2022",
"key": "lepinguAlgus"
},
{
"component": "status",
"componentData": {
"text": "Kinnituse ootel",
"type": "error"
},
"key": "staatus"
},
{
"component": "button",
"componentData": {
"text": "Kinnitamata",
"modifier": "button--tiny",
"componentClass": "status-table__button"
}
}
]
},
{
"cells": [
{
"component": "check",
"componentData": {
"id": "check14",
"name": "check",
"componentClass": "status-table__check",
"modifier": "check__stat"
}
},
{
"content": "<span class=\"text-truncate\"><a href=\"#\">RP011802</a></span>",
"key": "pakkumiseNr"
},
{
"content": "O4",
"key": "objektiKood"
},
{
"content": "<span class=\"text-truncate\"><a href=\"#\">1011</a></span>",
"key": "esindus"
},
{
"content": "Rendipunkt",
"key": "müügiisik"
},
{
"content": "Teet Deebet",
"key": "kontakt"
},
{
"content": "15.06.2022",
"key": "koostatud"
},
{
"content": "18.06.2022",
"key": "lepinguAlgus"
},
{
"component": "status",
"componentData": {
"text": "Koostamisel",
"type": "info"
},
"key": "staatus"
},
{
"component": "button",
"componentData": {
"text": "Kinnitamata",
"modifier": "button--tiny",
"componentClass": "status-table__button"
}
}
]
},
{
"cells": [
{
"component": "check",
"componentData": {
"id": "check15",
"name": "check",
"componentClass": "status-table__check",
"modifier": "check__stat"
}
},
{
"content": "<span class=\"text-truncate\"><a href=\"#\">RP011802</a></span>",
"key": "pakkumiseNr"
},
{
"content": "O4",
"key": "objektiKood"
},
{
"content": "<span class=\"text-truncate\"><a href=\"#\">1011</a></span>",
"key": "esindus"
},
{
"content": "Rendipunkt",
"key": "müügiisik"
},
{
"content": "Teet Deebet",
"key": "kontakt"
},
{
"content": "15.06.2022",
"key": "koostatud"
},
{
"content": "18.06.2022",
"key": "lepinguAlgus"
},
{
"component": "status",
"componentData": {
"text": "Tagasi lükatud",
"type": "inactive"
},
"key": "staatus"
},
{
"component": "button",
"componentData": {
"text": "Kinnitamata",
"modifier": "button--tiny",
"componentClass": "status-table__button"
}
}
]
}
]
}
}
.status-table {
width: 100%;
text-align: left;
}
.status-table__table {
width: 100%;
}
.status-table__head {
background-color: $L-border-table;
}
.status-table__header {
display: none;
padding: 8px 8px;
vertical-align: middle;
@include bp(lg-min) {
display: table-cell;
}
}
.status-table__header--component {
display: inline-block;
flex: 1 1 100%;
@include bp(lg-min) {
display: table-cell;
}
}
.status-table__header--empty {
@include bp(lg-min) {
display: none;
}
}
.status-table__check--header {
margin-left: 3px;
@include bp(lg-min) {
margin-left: 12px;
}
}
.status-table__check {
position: absolute;
margin-top: 2px;
left: 0;
right: 0;
@include bp(lg-min) {
position: relative;
transform: translateY(0);
margin-top: 0;
}
}
.check__indicator {
.status-table__item & {
position: absolute;
z-index: 1;
top: 32px;
margin-left: 12px;
pointer-events: auto;
@include bp(lg-min) {
top: 50%;
transform: translateY(-50%);
}
}
}
.check__text {
.status-table__check,
.status-table__check--header & {
@include bp(lg-min) {
@include visually-hidden;
}
}
}
.status-table__text--bold {
font-weight: $font-weight-medium;
}
.status-table__dropdown {
display: flex;
align-items: center;
justify-content: flex-end;
}
.status-table__dropdown-button {
padding: 0;
}
.status-table__item {
display: flex;
align-items: center;
padding: 8px 8px;
min-height: 24px;
@include bp(lg-min) {
display: table-cell;
padding: 12px 8px;
vertical-align: middle;
}
}
.status-table__row {
position: relative;
@include bp(lg-min) {
display: table-row;
}
.status-table__head & {
display: flex;
align-items: center;
justify-content: space-between;
@include bp(lg-min) {
display: table-row;
}
}
.status-table__body & {
border-bottom: 1px solid $L-table-border-color;
}
&.is-selected {
background-color: $L-background-none-hover;
}
}
.status-table__title {
letter-spacing: $letter-spacing-50;
text-transform: none;
}
.status-table__button {
margin: 0 auto 16px;
min-width: auto;
@include bp(lg-min) {
margin: 0;
float: right;
}
}
// Tablesaw styling:
.tablesaw-cell-label {
.status-table & {
flex: 0 0 33%;
padding-right: $status-table-gutter-xs * .5;
margin-left: 40px;
font-weight: $font-weight-regular;
text-overflow: ellipsis;
overflow: hidden;
@include bp(lg-min) {
display: none;
padding: 0;
}
}
}
.tablesaw-cell-content {
.status-table & {
flex: 1 1 auto;
padding-right: $status-table-gutter-xs * .5;
padding-left: $status-table-gutter-xs * .5;
text-overflow: ellipsis;
@include bp(lg-min) {
padding: 0;
}
}
}
import 'tablesaw/dist/tablesaw.jquery.js';
import 'tablesaw/dist/tablesaw-init.js';
import Component from '../component/component';
import './status-table.scss';
export interface IStatusTableSettings {
cellSelector?: string;
inputSelector?: string;
rowSelector?: string;
headerInputSelector?: string;
tableBodySelector?: string;
selectedClass?: string;
dropdownSelector: string;
}
export const statusTableSettings: IStatusTableSettings = {
cellSelector: '.status-table__item',
inputSelector: '.status-table__check .check__input',
headerInputSelector: '.status-table__check--header',
rowSelector: '.status-table__row',
tableBodySelector: '.status-table__body',
selectedClass: 'is-selected',
dropdownSelector: '.js-status-table-dropdown',
};
export default class StatusTable extends Component {
static initSelector: string = '.status-table';
input: JQuery<HTMLElement>;
headerInput: JQuery<HTMLElement>;
rows: JQuery<HTMLElement>;
tableBody: JQuery<HTMLElement>;
settings: IStatusTableSettings;
dropdown: JQuery<HTMLElement>;
dropdownInputs: JQuery<HTMLElement>;
constructor(target: HTMLElement) {
super(target);
this.settings = statusTableSettings;
this.headerInput = this.element.find(this.settings.headerInputSelector);
this.tableBody = this.element.find(this.settings.tableBodySelector);
this.rows = this.tableBody.find(this.settings.rowSelector);
this.dropdown = this.element.find(this.settings.dropdownSelector);
this.dropdownInputs = this.dropdown.find('.check__input[data-key]');
this.dropdownInputs.on('change', this.onSortCheckboxChange.bind(this));
const hasCheckAllOption: boolean = this.headerInput.find('.check__input[data-tablesaw-checkall]').length > 0;
if (hasCheckAllOption) {
this.rows.each((index: number, el: HTMLElement) => {
const firstCell: JQuery<HTMLElement> = $(el).find(this.settings.cellSelector).eq(0);
const firstInput: JQuery<HTMLElement> = firstCell.find(this.settings.inputSelector);
if (this.input) {
this.input = this.input.add(firstInput);
} else {
this.input = firstInput;
}
});
this.input.on('change', this.onInputChange.bind(this));
this.headerInput.find('.check__input[data-tablesaw-checkall]').on('change', this.onHeadInputChange.bind(this));
}
}
onInputChange(event: JQuery.ChangeEvent): void {
const checkbox: JQuery<HTMLElement> = $(event.currentTarget);
const row: JQuery<HTMLElement> = checkbox.closest(this.rows);
if (checkbox.is(':checked')) {
$(row).addClass(this.settings.selectedClass);
} else {
$(row).removeClass(this.settings.selectedClass);
}
}
onHeadInputChange(event: JQuery.ChangeEvent): void {
const headCheck: JQuery<HTMLElement> = $(event.currentTarget);
const checkboxes: JQuery<HTMLElement> = this.tableBody.find(this.input);
if (headCheck.is(':checked')) {
checkboxes.prop('checked', true);
this.tableBody.find(this.rows).addClass(this.settings.selectedClass);
} else {
checkboxes.prop('checked', false);
this.tableBody.find(this.rows).removeClass(this.settings.selectedClass);
}
}
onSortCheckboxChange(event: Event): void {
const target: HTMLInputElement = event.target as HTMLInputElement;
const key: string = target.dataset.key;
const checked: boolean = target.checked;
const header: JQuery<HTMLElement> = $('.status-table__head th[data-key="' + key + '"]');
const cells: JQuery<HTMLElement> = $('.status-table__body td[data-key="' + key + '"]');
if (checked) {
header.removeClass('h-hidden');
cells.removeClass('h-hidden');
} else {
header.addClass('h-hidden');
cells.addClass('h-hidden');
}
}
}
<div class="status-table ">
<table class="status-table__table tablesaw tablesaw-stack" data-tablesaw-mode="stack" data-tablesaw-hide-empty>
<thead class="status-table__head">
<tr class="status-table__row">
<th class="status-table__header" scope="col">
<span class="status-table__title">Pakkumise nr</span>
</th>
<th class="status-table__header" scope="col">
<span class="status-table__title">Obj. k.</span>
</th>
<th class="status-table__header" scope="col">
<span class="status-table__title">Esindus</span>
</th>
<th class="status-table__header" scope="col">
<span class="status-table__title">Müügiisik</span>
</th>
<th class="status-table__header" scope="col">
<span class="status-table__title">Kontakt</span>
</th>
<th class="status-table__header" scope="col">
<span class="status-table__title">Koostatud</span>
</th>
<th class="status-table__header" scope="col">
<span class="status-table__title">Lepingu algus</span>
</th>
<th class="status-table__header" scope="col">
<span class="status-table__title">Staatus</span>
</th>
<th class="status-table__header status-table__header--empty" scope="col">
</th>
<th class="status-table__header status-table__header--component" scope="col">
<div class="dropdown js-dropdown status-table__dropdown" data-offset-x="0" data-offset-y="0">
<button type="button" class="button button--text button--text-color status-table__dropdown-button dropdown__trigger button--icon">
<span class="button__inner">
<svg class="icon button__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#dots"></use>
</svg>
<span class="button__text">Valikud</span>
</span>
</button>
<div class="dropdown__content">
<div class="dropdown__content-inner">
Kuva tabeli veerge
<fieldset class="choice-group
dropdown__choices">
<legend class="choice-group__label h-visually-hidden">Kuva tabeli veerge</legend>
<div class="choice-group__inner">
<div class="check
choice-group__item">
<input type="checkbox" id="check1-1" name="check" value="" class="check__input" checked>
<label for="check1-1" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Lepingu nr</span>
</label>
</div>
<div class="check
choice-group__item">
<input type="checkbox" id="check2-1" name="check" value="" class="check__input" checked>
<label for="check2-1" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Objekti kood</span>
</label>
</div>
<div class="check
choice-group__item">
<input type="checkbox" id="check3-1" name="check" value="" class="check__input" checked>
<label for="check3-1" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Tellija kood</span>
</label>
</div>
<div class="check
choice-group__item">
<input type="checkbox" id="check4-1" name="check" value="" class="check__input" checked>
<label for="check4-1" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Lepingu nr</span>
</label>
</div>
<div class="check
choice-group__item">
<input type="checkbox" id="check5-1" name="check" value="" class="check__input" checked>
<label for="check5-1" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Objekti kood</span>
</label>
</div>
<div class="check
choice-group__item">
<input type="checkbox" id="check6-1" name="check" value="" class="check__input" checked>
<label for="check6-1" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Tellija</span>
</label>
</div>
<div class="check
choice-group__item">
<input type="checkbox" id="check7-1" name="check" value="" class="check__input" checked>
<label for="check7-1" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Esindus</span>
</label>
</div>
<div class="check
choice-group__item">
<input type="checkbox" id="check8-1" name="check" value="" class="check__input" checked>
<label for="check8-1" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Tüüp</span>
</label>
</div>
<div class="check
choice-group__item">
<input type="checkbox" id="check9-1" name="check" value="" class="check__input" checked>
<label for="check9-1" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Toote kood</span>
</label>
</div>
<div class="check
choice-group__item">
<input type="checkbox" id="check10-1" name="check" value="" class="check__input" checked>
<label for="check10-1" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Toote kirjeldus</span>
</label>
</div>
<div class="check
choice-group__item">
<input type="checkbox" id="check11-1" name="check" value="" class="check__input" checked>
<label for="check11-1" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Arve kp</span>
</label>
</div>
<div class="check
choice-group__item">
<input type="checkbox" id="check16-1" name="check" value="" class="check__input" checked>
<label for="check16-1" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Saadetud/Tagastatud/Renditud</span>
</label>
</div>
<div class="check
choice-group__item is-disabled">
<input type="checkbox" id="check17-1" name="check" value="" class="check__input" checked disabled>
<label for="check17-1" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
</span>
<span class="check__text ">Staatus</span>
</label>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody class="status-table__body">
<tr class="status-table__row">
<td class="status-table__item " data-key="pakkumiseNr">
<span class="text-truncate"><a href="#">RP011802</a></span>
</td>
<td class="status-table__item ">
O4
</td>
<td class="status-table__item ">
<span class="text-truncate"><a href="#">1011</a></span>
</td>
<td class="status-table__item ">
Rendipunkt
</td>
<td class="status-table__item ">
Teet Deebet
</td>
<td class="status-table__item ">
15.06.2022
</td>
<td class="status-table__item ">
18.06.2022
</td>
<td class="status-table__item ">
<div class="status status--type-inactive">
<span class="status__bullet"></span>
<span class="status__text">Tagasi lükatud</span>
</div>
</td>
<td class="status-table__item " data-tablesaw-no-labels>
<button type="button" class="button button--tiny status-table__button">
<span class="button__inner">
<span class="button__text">Kinnitamata</span>
</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="status-table {{ class }} {{ modifier }}">
<table class="status-table__table tablesaw tablesaw-stack" data-tablesaw-mode="stack" data-tablesaw-hide-empty>
{% if data.headers %}
<thead class="status-table__head">
<tr class="status-table__row">
{% for header in data.headers %}
<th class="status-table__header{% if header.component %} status-table__header--component{% endif %}{% if header.label|length == 0 and not (header.component is defined) %} status-table__header--empty{% endif %}"{% if header.key %} data-key="{{ header.key }}"{% endif %} scope="col">
{% if header.component %}
{% include ('@' ~ header.component) with { data: header.componentData, class: header.componentData.componentClass, modifier: header.componentData.modifier } %}
{% elseif (header.label|length > 0) %}
<span class="status-table__title">{{ header.label }}</span>
{% endif %}
</th>
{% endfor %}
</tr>
</thead>
{% endif %}
{% if data.rows %}
<tbody class="status-table__body">
{% for row in data.rows %}
<tr class="status-table__row">
{% for cell in row.cells %}
<td class="status-table__item {{ cell.class }}"{% if cell.component == 'button' %} data-tablesaw-no-labels{% endif %}{% if cell.key %} data-key="{{ cell.key }}"{% endif %} >
{% if cell.component %}
{% include ('@' ~ cell.component) with { data: cell.componentData, class: cell.componentData.componentClass, modifier: cell.componentData.modifier } %}
{% else %}
{{cell.content}}
{% endif %}
</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
{% endif %}
</table>
</div>
{
"language": "en-US",
"data": {
"headers": [
{
"label": "Pakkumise nr"
},
{
"label": "Obj. k."
},
{
"label": "Esindus"
},
{
"label": "Müügiisik"
},
{
"label": "Kontakt"
},
{
"label": "Koostatud"
},
{
"label": "Lepingu algus"
},
{
"label": "Staatus"
},
{
"label": ""
},
{
"component": "dropdown",
"componentData": {
"componentClass": "status-table__dropdown",
"buttonModifier": "button--text button--text-color status-table__dropdown-button",
"trigger": {
"text": "Valikud",
"icon": "dots",
"iconPosition": null
},
"triggerIconAnimated": false,
"content": "Kuva tabeli veerge",
"options": null,
"choices": {
"label": "Kuva tabeli veerge",
"type": "check",
"choices": [
{
"id": "check1-1",
"label": "Lepingu nr",
"isChecked": true,
"name": "check"
},
{
"id": "check2-1",
"label": "Objekti kood",
"isChecked": true,
"name": "check"
},
{
"id": "check3-1",
"label": "Tellija kood",
"isChecked": true,
"name": "check"
},
{
"id": "check4-1",
"label": "Lepingu nr",
"isChecked": true,
"name": "check"
},
{
"id": "check5-1",
"label": "Objekti kood",
"isChecked": true,
"name": "check"
},
{
"id": "check6-1",
"label": "Tellija",
"isChecked": true,
"name": "check"
},
{
"id": "check7-1",
"label": "Esindus",
"isChecked": true,
"name": "check"
},
{
"id": "check8-1",
"label": "Tüüp",
"isChecked": true,
"name": "check"
},
{
"id": "check9-1",
"label": "Toote kood",
"isChecked": true,
"name": "check"
},
{
"id": "check10-1",
"label": "Toote kirjeldus",
"isChecked": true,
"name": "check"
},
{
"id": "check11-1",
"label": "Arve kp",
"isChecked": true,
"name": "check"
},
{
"id": "check16-1",
"label": "Saadetud/Tagastatud/Renditud",
"isChecked": true,
"name": "check"
},
{
"id": "check17-1",
"label": "Staatus",
"name": "check",
"isChecked": true,
"isDisabled": true
}
],
"isLabelHidden": true
}
}
}
],
"rows": [
{
"cells": [
{
"content": "<span class=\"text-truncate\"><a href=\"#\">RP011802</a></span>",
"key": "pakkumiseNr"
},
{
"content": "O4"
},
{
"content": "<span class=\"text-truncate\"><a href=\"#\">1011</a></span>"
},
{
"content": "Rendipunkt"
},
{
"content": "Teet Deebet"
},
{
"content": "15.06.2022"
},
{
"content": "18.06.2022"
},
{
"component": "status",
"componentData": {
"text": "Tagasi lükatud",
"type": "inactive"
}
},
{
"component": "button",
"componentData": {
"text": "Kinnitamata",
"modifier": "button--tiny",
"componentClass": "status-table__button"
}
}
]
}
]
}
}
.status-table {
width: 100%;
text-align: left;
}
.status-table__table {
width: 100%;
}
.status-table__head {
background-color: $L-border-table;
}
.status-table__header {
display: none;
padding: 8px 8px;
vertical-align: middle;
@include bp(lg-min) {
display: table-cell;
}
}
.status-table__header--component {
display: inline-block;
flex: 1 1 100%;
@include bp(lg-min) {
display: table-cell;
}
}
.status-table__header--empty {
@include bp(lg-min) {
display: none;
}
}
.status-table__check--header {
margin-left: 3px;
@include bp(lg-min) {
margin-left: 12px;
}
}
.status-table__check {
position: absolute;
margin-top: 2px;
left: 0;
right: 0;
@include bp(lg-min) {
position: relative;
transform: translateY(0);
margin-top: 0;
}
}
.check__indicator {
.status-table__item & {
position: absolute;
z-index: 1;
top: 32px;
margin-left: 12px;
pointer-events: auto;
@include bp(lg-min) {
top: 50%;
transform: translateY(-50%);
}
}
}
.check__text {
.status-table__check,
.status-table__check--header & {
@include bp(lg-min) {
@include visually-hidden;
}
}
}
.status-table__text--bold {
font-weight: $font-weight-medium;
}
.status-table__dropdown {
display: flex;
align-items: center;
justify-content: flex-end;
}
.status-table__dropdown-button {
padding: 0;
}
.status-table__item {
display: flex;
align-items: center;
padding: 8px 8px;
min-height: 24px;
@include bp(lg-min) {
display: table-cell;
padding: 12px 8px;
vertical-align: middle;
}
}
.status-table__row {
position: relative;
@include bp(lg-min) {
display: table-row;
}
.status-table__head & {
display: flex;
align-items: center;
justify-content: space-between;
@include bp(lg-min) {
display: table-row;
}
}
.status-table__body & {
border-bottom: 1px solid $L-table-border-color;
}
&.is-selected {
background-color: $L-background-none-hover;
}
}
.status-table__title {
letter-spacing: $letter-spacing-50;
text-transform: none;
}
.status-table__button {
margin: 0 auto 16px;
min-width: auto;
@include bp(lg-min) {
margin: 0;
float: right;
}
}
// Tablesaw styling:
.tablesaw-cell-label {
.status-table & {
flex: 0 0 33%;
padding-right: $status-table-gutter-xs * .5;
margin-left: 40px;
font-weight: $font-weight-regular;
text-overflow: ellipsis;
overflow: hidden;
@include bp(lg-min) {
display: none;
padding: 0;
}
}
}
.tablesaw-cell-content {
.status-table & {
flex: 1 1 auto;
padding-right: $status-table-gutter-xs * .5;
padding-left: $status-table-gutter-xs * .5;
text-overflow: ellipsis;
@include bp(lg-min) {
padding: 0;
}
}
}
import 'tablesaw/dist/tablesaw.jquery.js';
import 'tablesaw/dist/tablesaw-init.js';
import Component from '../component/component';
import './status-table.scss';
export interface IStatusTableSettings {
cellSelector?: string;
inputSelector?: string;
rowSelector?: string;
headerInputSelector?: string;
tableBodySelector?: string;
selectedClass?: string;
dropdownSelector: string;
}
export const statusTableSettings: IStatusTableSettings = {
cellSelector: '.status-table__item',
inputSelector: '.status-table__check .check__input',
headerInputSelector: '.status-table__check--header',
rowSelector: '.status-table__row',
tableBodySelector: '.status-table__body',
selectedClass: 'is-selected',
dropdownSelector: '.js-status-table-dropdown',
};
export default class StatusTable extends Component {
static initSelector: string = '.status-table';
input: JQuery<HTMLElement>;
headerInput: JQuery<HTMLElement>;
rows: JQuery<HTMLElement>;
tableBody: JQuery<HTMLElement>;
settings: IStatusTableSettings;
dropdown: JQuery<HTMLElement>;
dropdownInputs: JQuery<HTMLElement>;
constructor(target: HTMLElement) {
super(target);
this.settings = statusTableSettings;
this.headerInput = this.element.find(this.settings.headerInputSelector);
this.tableBody = this.element.find(this.settings.tableBodySelector);
this.rows = this.tableBody.find(this.settings.rowSelector);
this.dropdown = this.element.find(this.settings.dropdownSelector);
this.dropdownInputs = this.dropdown.find('.check__input[data-key]');
this.dropdownInputs.on('change', this.onSortCheckboxChange.bind(this));
const hasCheckAllOption: boolean = this.headerInput.find('.check__input[data-tablesaw-checkall]').length > 0;
if (hasCheckAllOption) {
this.rows.each((index: number, el: HTMLElement) => {
const firstCell: JQuery<HTMLElement> = $(el).find(this.settings.cellSelector).eq(0);
const firstInput: JQuery<HTMLElement> = firstCell.find(this.settings.inputSelector);
if (this.input) {
this.input = this.input.add(firstInput);
} else {
this.input = firstInput;
}
});
this.input.on('change', this.onInputChange.bind(this));
this.headerInput.find('.check__input[data-tablesaw-checkall]').on('change', this.onHeadInputChange.bind(this));
}
}
onInputChange(event: JQuery.ChangeEvent): void {
const checkbox: JQuery<HTMLElement> = $(event.currentTarget);
const row: JQuery<HTMLElement> = checkbox.closest(this.rows);
if (checkbox.is(':checked')) {
$(row).addClass(this.settings.selectedClass);
} else {
$(row).removeClass(this.settings.selectedClass);
}
}
onHeadInputChange(event: JQuery.ChangeEvent): void {
const headCheck: JQuery<HTMLElement> = $(event.currentTarget);
const checkboxes: JQuery<HTMLElement> = this.tableBody.find(this.input);
if (headCheck.is(':checked')) {
checkboxes.prop('checked', true);
this.tableBody.find(this.rows).addClass(this.settings.selectedClass);
} else {
checkboxes.prop('checked', false);
this.tableBody.find(this.rows).removeClass(this.settings.selectedClass);
}
}
onSortCheckboxChange(event: Event): void {
const target: HTMLInputElement = event.target as HTMLInputElement;
const key: string = target.dataset.key;
const checked: boolean = target.checked;
const header: JQuery<HTMLElement> = $('.status-table__head th[data-key="' + key + '"]');
const cells: JQuery<HTMLElement> = $('.status-table__body td[data-key="' + key + '"]');
if (checked) {
header.removeClass('h-hidden');
cells.removeClass('h-hidden');
} else {
header.addClass('h-hidden');
cells.addClass('h-hidden');
}
}
}