+ @click="toggleIndex(idx, $event)"
+ @click.shift="shiftClick(idx, $event)"
+ class="d-flex justify-content-between align-items-center list-group-item-action pointer"
+ :class="{active: lastClickIndex === idx}"
+ >
{{ idx.name }}
@@ -36,6 +53,7 @@ export default Vue.extend({
data() {
return {
loading: true,
+ lastClickIndex: null
}
},
computed: {
@@ -53,13 +71,50 @@ export default Vue.extend({
...mapActions({
setSelectedIndices: "setSelectedIndices"
}),
+ shiftClick(index, e) {
+ if (this.lastClickIndex === null) {
+ return;
+ }
+
+ const select = this.isSelected(this.lastClickIndex);
+
+ let leftBoundary = this.indices.indexOf(this.lastClickIndex);
+ let rightBoundary = this.indices.indexOf(index);
+
+ if (rightBoundary < leftBoundary) {
+ let tmp = leftBoundary;
+ leftBoundary = rightBoundary;
+ rightBoundary = tmp;
+ }
+
+ for (let i = leftBoundary; i <= rightBoundary; i++) {
+ if (select) {
+ if (!this.isSelected(this.indices[i])) {
+ this.setSelectedIndices([this.indices[i], ...this.selectedIndices]);
+ }
+ } else {
+ this.setSelectedIndices(this.selectedIndices.filter(idx => idx !== this.indices[i]));
+ }
+ }
+ },
+ selectAll() {
+ this.setSelectedIndices(this.indices);
+ },
+ selectNone() {
+ this.setSelectedIndices([]);
+ },
onSelect(value) {
this.setSelectedIndices(this.indices.filter(idx => value.includes(idx.id)));
},
formatIdxDate(timestamp: number): string {
return format(new Date(timestamp * 1000), "yyyy-MM-dd");
},
- toggleIndex(index) {
+ toggleIndex(index, e) {
+ if (e.shiftKey) {
+ return;
+ }
+
+ this.lastClickIndex = index;
if (this.isSelected(index)) {
this.setSelectedIndices(this.selectedIndices.filter(idx => idx.id != index.id));
} else {
@@ -92,4 +147,21 @@ export default Vue.extend({
overflow-y: auto;
max-height: 132px;
}
+
+.btn-link:focus {
+ box-shadow: none;
+}
+
+.unselectable {
+ user-select: none;
+ -ms-user-select: none;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+}
+
+.list-group-item.active {
+ z-index: 2;
+ background-color: inherit;
+ color: inherit;
+}
\ No newline at end of file
diff --git a/sist2-vue/src/components/ResultsCard.vue b/sist2-vue/src/components/ResultsCard.vue
index 42d1535..25ad174 100644
--- a/sist2-vue/src/components/ResultsCard.vue
+++ b/sist2-vue/src/components/ResultsCard.vue
@@ -23,7 +23,7 @@