- ${this.collInfo.lists.length ? html`
-
-
`;
}
+ renderDownloadMenu() {
+ return html`
+ `;
+ }
+
renderPageHeader() {
return html`
- `;
+
+
+
${this.formatResults()}
+ `;
}
renderPages() {
//const name = this.currList === 0 ? "All Pages" : this.collInfo.lists[this.currList - 1].title;
return html`
+
${this.sortedPages.map((p) => html`
@@ -392,6 +476,24 @@ class Pages extends LitElement
}
}
+ onSort(event) {
+ event.preventDefault();
+
+ const key = event.currentTarget.getAttribute("data-key");
+ if (key === this.sortKey) {
+ this.sortDesc = !this.sortDesc;
+ } else {
+ this.sortDesc = false;
+ this.sortKey = key;
+ }
+ }
+
+ onSortChanged(event) {
+ this.sortedPages = event.detail.sortedData;
+ this.sortKey = event.detail.sortKey;
+ this.sortDesc = event.detail.sortDesc;
+ }
+
onSelectToggle(event) {
const {page, selected} = event.detail;
if (selected) {
@@ -546,8 +648,8 @@ class PageEntry extends LitElement
.delete {
position: absolute;
- top: 0px;
- right: 0px;
+ top: 8px;
+ right: 8px;
}
.delete:hover {
diff --git a/src/sorter.js b/src/sorter.js
index 1c8f2fd..c3251ea 100644
--- a/src/sorter.js
+++ b/src/sorter.js
@@ -80,7 +80,11 @@ class Sorter extends LitElement
}
sendSortChanged() {
- const detail = {sortedData: this.sortedData.slice(0, this.numResults)};
+ const detail = {
+ sortKey: this.sortKey,
+ sortDesc: this.sortDesc,
+ sortedData: this.sortedData.slice(0, this.numResults)
+ };
this.dispatchEvent(new CustomEvent("sort-changed", {detail}));
}
diff --git a/src/url-resources.js b/src/url-resources.js
index c0cb6c8..ae4a638 100644
--- a/src/url-resources.js
+++ b/src/url-resources.js
@@ -23,6 +23,27 @@ class URLResources extends LitElement
];
}
+ static get sortKeys() {
+ return [
+ {
+ "key": "url",
+ "name": "URL"
+ },
+ {
+ "key": "ts",
+ "name": "Date"
+ },
+ {
+ "key": "mime",
+ "name": "Mime Type",
+ },
+ {
+ "key": "status",
+ "name": "Status"
+ }
+ ];
+ }
+
constructor() {
super();
this.collInfo = null;
@@ -32,6 +53,7 @@ class URLResources extends LitElement
this.urlSearchType = "";
this.filteredResults = [];
+ this.sortedResults = [];
this.results = [];
@@ -51,8 +73,8 @@ class URLResources extends LitElement
query: { type: String },
urlSearchType: { type: String },
filteredResults: { type: Array },
+ sortedResults: { type: Array },
loading: { type: Boolean },
-
sortKey: { type: String },
sortDesc: { type: Boolean }
}
@@ -174,16 +196,6 @@ class URLResources extends LitElement
}
this.filteredResults = filteredResults;
-
- if (this.sortKey && !(this.sortKey === "url" && !this.sortDesc)) {
- this.filteredResults.sort((first, second) => {
- if (first[this.sortKey] === second[this.sortKey]) {
- return 0;
- }
-
- return (this.sortDesc == (first[this.sortKey] < second[this.sortKey])) ? 1 : -1;
- });
- }
}
onScroll(event) {
@@ -205,58 +217,38 @@ class URLResources extends LitElement
.notification {
width: 100%;
}
- .main-scroll {
- /*height: calc(100vh - 180px);*/
- flex-grow: 1;
- width: 100vw;
- }
- table {
- table-layout: fixed;
- word-wrap: break-word;
- text-overflow: ellipsis;
- height: 100%;
+ .all-results {
+ margin: 0 0 0 0.5em;
display: flex;
flex-direction: column;
min-height: 0;
}
- thead {
- display: table;
+ .main-scroll {
+ flex-grow: 1;
}
- tr > th {
- cursor: pointer;
+ .minihead {
+ font-size: 10px;
+ font-weight: bold;
}
- tbody > tr {
- display: table;
- width: 100%;
+ .columns {
+ margin: 0px;
+ }
+ .result {
+ border-bottom: 1px #dbdbdb solid;
}
- .col-url {
- width: 66%;
- max-width: 66%;
- min-width: 66%;
+ .results-head {
+ border-bottom: 2px #dbdbdb solid;
+ margin-right: 16px;
+ }
+ .results-head a {
+ color: black;
+ }
+ .all-results .column {
word-break: break-word;
}
- .col-ts {
- width: 16%;
- max-width: 16%;
- min-width: 16%;
- word-break: break-word;
- }
- td.col-mime {
- width: 10%;
- word-break: break-word;
- }
- td.col-status {
- text-align: center;
- }
- .loading-cog {
- width: 100vw;
- display: flex;
- }
- .flex-column {
- display: flex;
- flex: auto;
- max-width: 80%;
- flex-direction: column;
+ div.sort-header {
+ padding: 10px;
+ margin-bottom: 0px !important;
}
.flex-auto {
flex: auto;
@@ -269,7 +261,10 @@ class URLResources extends LitElement
content: "▲";
font-size: 0.75em;
}
-
+ .num-results {
+ margin-left: 1em;
+ font-style: italic;
+ }
`);
}
@@ -302,36 +297,48 @@ class URLResources extends LitElement
- (${this.filteredResults.length} Results)
+ ${this.filteredResults.length} Result(s)