<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/kwc-i18n/kwc-i18n.html">
<link rel="import" href="/bower_components/kwc-callout/kwc-callout.html">
<!-- ... -->
<kwc-callout type="warning" closeable>
<!-- kwc-i18n converts given key into translated text from external JSON. -->
<p><kwc-i18n key="global.use-cookies" show></kwc-i18n></p>
</kwc-callout>
<!-- ... -->
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/kwc-table/kwc-table.html">
<link rel="import" href="/bower_components/kwc-i18n/kwc-i18n.html">
<link rel="import" href="/dist/lib/vep/services/show-service/show-service.html">
<link rel="import" href="/dist/lib/vep/services/company-service/company-service.html">
<dom-module id="page-shows">
<template>
<h1><kwc-i18n key="page-shows.title" show></kwc-i18n></h1>
<!-- Creates a table with [[shows]] as data -->
<kwc-table data="[[shows]]">
<!-- Defines the column which can be used to sort data -->
<kwc-table-column header="[[i18nTitle]]" property="title" sortable>
<!-- Defines how the cell will be rendered -->
<kwc-table-cell>
<template>
<a href="/show/read/[[row.canonical]]">[[value]]</a>
</template>
</kwc-table-cell>
</kwc-table-column>
<!-- Defines another column with default cell rendering -->
<kwc-table-column header="[[i18nAuthor]]" property="author" sortable></kwc-table-column>
<kwc-table-column header="[[i18nDirector]]" property="director" sortable></kwc-table-column>
<kwc-table-column header="[[i18nCompany]]" property="company" sortable>
<kwc-table-cell>
<template>
<!-- Calls a function into my component when rendering -->
{{getCompany(value)}}
</template>
</kwc-table-cell>
</kwc-table-column>
</kwc-table>
<kwc-i18n key="page-shows.table.title" var="{{i18nTitle}}"></kwc-i18n>
<kwc-i18n key="page-shows.table.author" var="{{i18nAuthor}}"></kwc-i18n>
<kwc-i18n key="page-shows.table.director" var="{{i18nDirector}}"></kwc-i18n>
<kwc-i18n key="page-shows.table.company" var="{{i18nCompany}}"></kwc-i18n>
</template>
<!-- In dev, I have two files, but my build system "inline" the script for prod version. -->
<script src="./page-shows.js" inline></script>
</dom-module>
(function () {
const showService = window.vep.services.show;
const companyService = window.vep.services.company;
class PageShows {
beforeRegister() {
this.is = "page-shows";
this.properties = {
shows: {
type: Array,
value: []
},
companies: {
type: Array,
value: []
}
};
}
attached() {
const that = this;
showService.findAll().then((shows) => that.shows = shows);
companyService.findAll().then((companies) => that.companies = companies);
}
getCompany(companyCanonical) {
const company = this.companies.find((c) => c.canonical === companyCanonical);
return company ? company.name : null;
}
}
Polymer(PageShows);
})();