Added pagination to gallery
This commit is contained in:
Joel Collins
parent
e3a45b84d8
commit
e1cca30deb
5 changed files with 177 additions and 152 deletions
|
|
@ -212,8 +212,9 @@ export default {
|
|||
},
|
||||
|
||||
created: function() {
|
||||
this.getTagRequest();
|
||||
this.getAnnotationsRequest();
|
||||
// Get initial metadata from prop
|
||||
this.tags = this.captureState.metadata.image.tags;
|
||||
this.annotations = this.captureState.metadata.annotations;
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@
|
|||
<a href="#">
|
||||
<img
|
||||
class="uk-width-1-1"
|
||||
:data-src="thumbnail"
|
||||
:alt="metadata.image.id"
|
||||
:data-src="scanState.thumbnail"
|
||||
:alt="scanState.metadata.image.id"
|
||||
width="300"
|
||||
height="225"
|
||||
uk-img
|
||||
@click="$root.$emit('globalUpdateCaptureFolder', metadata.image.id)"
|
||||
@click="onClick"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -22,7 +22,8 @@
|
|||
uk-grid
|
||||
>
|
||||
<div class="uk-margin-remove-top uk-padding-remove uk-width-expand">
|
||||
<b>{{ metadata.type || "Dataset" }}: </b> {{ metadata.image.name }}
|
||||
<b>{{ scanState.metadata.type || "Dataset" }}: </b>
|
||||
{{ scanState.metadata.image.name }}
|
||||
</div>
|
||||
<div class="uk-margin-remove-top uk-padding-remove uk-width-auto">
|
||||
<a href="#" class="uk-icon" @click="delAllConfirm()">
|
||||
|
|
@ -34,7 +35,7 @@
|
|||
<div
|
||||
class="uk-text-meta uk-margin-remove-top uk-padding-remove uk-width-expand"
|
||||
>
|
||||
<time>{{ metadata.image.acquisitionDate }}</time>
|
||||
<time>{{ scanState.metadata.image.acquisitionDate }}</time>
|
||||
</div>
|
||||
<div
|
||||
class="uk-text-meta uk-margin-remove-top uk-padding-remove uk-width-auto"
|
||||
|
|
@ -45,7 +46,7 @@
|
|||
|
||||
<div class="uk-card-footer uk-padding-small">
|
||||
<span
|
||||
v-for="tag in metadata.image.tags"
|
||||
v-for="tag in scanState.metadata.image.tags"
|
||||
:key="tag"
|
||||
class="uk-label uk-margin-small-right deletable-label"
|
||||
>
|
||||
|
|
@ -56,13 +57,16 @@
|
|||
<div :id="metadataModalID" uk-modal>
|
||||
<div class="uk-modal-dialog uk-modal-body">
|
||||
<button class="uk-modal-close-default" type="button" uk-close></button>
|
||||
<h2 class="uk-modal-title">{{ metadata.image.name }}</h2>
|
||||
<p><b>Time: </b>{{ metadata.image.acquisitionDate }}</p>
|
||||
<p><b>ID: </b>{{ metadata.image.id }}</p>
|
||||
<h2 class="uk-modal-title">{{ scanState.metadata.image.name }}</h2>
|
||||
<p><b>Time: </b>{{ scanState.metadata.image.acquisitionDate }}</p>
|
||||
<p><b>ID: </b>{{ scanState.metadata.image.id }}</p>
|
||||
|
||||
<hr />
|
||||
|
||||
<div v-for="(value, key) in metadata.image.annotations" :key="key">
|
||||
<div
|
||||
v-for="(value, key) in scanState.metadata.image.annotations"
|
||||
:key="key"
|
||||
>
|
||||
<p>
|
||||
<b>{{ key }}: </b>{{ value }}
|
||||
</p>
|
||||
|
|
@ -80,17 +84,9 @@ export default {
|
|||
name: "ScanCard",
|
||||
|
||||
props: {
|
||||
metadata: {
|
||||
scanState: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
thumbnail: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
captures: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -109,7 +105,7 @@ export default {
|
|||
},
|
||||
allURLs: function() {
|
||||
var urls = [];
|
||||
for (var capture of this.captures) {
|
||||
for (var capture of this.scanState.captures) {
|
||||
urls.push(capture.links.self.href);
|
||||
}
|
||||
return urls;
|
||||
|
|
@ -117,8 +113,12 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
onClick: function() {
|
||||
this.$emit("selectFolder", this.scanState.metadata.image.id);
|
||||
},
|
||||
|
||||
makeModalName: function(prefix) {
|
||||
return prefix + this.metadata.image.id;
|
||||
return prefix + this.scanState.metadata.image.id;
|
||||
},
|
||||
|
||||
delAllConfirm: function() {
|
||||
|
|
@ -131,18 +131,10 @@ export default {
|
|||
},
|
||||
|
||||
deleteAll: function() {
|
||||
axios
|
||||
.all(this.allURLs.map(l => axios.delete(l)))
|
||||
.then
|
||||
//axios.spread(function(...res) {
|
||||
// all requests are now complete
|
||||
//console.log(res);
|
||||
//})
|
||||
()
|
||||
.then(() => {
|
||||
// Emit signal to update capture list
|
||||
this.$root.$emit("globalUpdateCaptures");
|
||||
});
|
||||
axios.all(this.allURLs.map(l => axios.delete(l))).then(() => {
|
||||
// Emit signal to update capture list
|
||||
this.$root.$emit("globalUpdateCaptures");
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -85,11 +85,7 @@
|
|||
v-if="galleryFolder"
|
||||
class="gallery-folder-heading uk-flex uk-flex-middle"
|
||||
>
|
||||
<a
|
||||
class="uk-icon uk-margin-remove"
|
||||
href="#"
|
||||
@click="galleryFolder = ''"
|
||||
>
|
||||
<a class="uk-icon uk-margin-remove" href="#" @click="galleryBack()">
|
||||
<i class="material-icons">arrow_back</i>
|
||||
</a>
|
||||
<div class="uk-margin-left">
|
||||
|
|
@ -102,25 +98,38 @@
|
|||
|
||||
<!-- Gallery capture cards -->
|
||||
<div class="gallery-grid">
|
||||
<div v-for="item in sortedItems" :key="item.metadata.id">
|
||||
<div v-for="item in pagedItems" :key="item.metadata.id">
|
||||
<scanCard
|
||||
v-if="'isScan' in item"
|
||||
:captures="item.captures"
|
||||
:metadata="item.metadata"
|
||||
:thumbnail="item.thumbnail"
|
||||
:scan-state="item"
|
||||
@selectFolder="selectFolder"
|
||||
/>
|
||||
<captureCard v-else :capture-state="item" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Paginate
|
||||
v-model="page"
|
||||
:page-count="numberOfPages"
|
||||
:page-range="3"
|
||||
:margin-pages="1"
|
||||
:container-class="'uk-pagination uk-flex-center'"
|
||||
:prev-text="'Prev'"
|
||||
:next-text="'Next'"
|
||||
:page-class="'page-item'"
|
||||
:disabled-class="'uk-disabled'"
|
||||
>
|
||||
</Paginate>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import Paginate from "vuejs-paginate";
|
||||
|
||||
import captureCard from "./galleryComponents/captureCard.vue";
|
||||
import scanCard from "./galleryComponents/scanCard.vue";
|
||||
|
||||
import ZipDownloader from "./galleryComponents/zipDownloader";
|
||||
|
||||
// Export main app
|
||||
|
|
@ -130,7 +139,8 @@ export default {
|
|||
components: {
|
||||
captureCard,
|
||||
scanCard,
|
||||
ZipDownloader
|
||||
ZipDownloader,
|
||||
Paginate
|
||||
},
|
||||
|
||||
data: function() {
|
||||
|
|
@ -140,7 +150,9 @@ export default {
|
|||
sortDescending: true,
|
||||
galleryFolder: "",
|
||||
scanTag: "scan",
|
||||
unwatchStoreFunction: null
|
||||
unwatchStoreFunction: null,
|
||||
maxitems: 10,
|
||||
page: 1
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -241,7 +253,6 @@ export default {
|
|||
// If galleryFolder (ie inside a scan folder), show scan captures
|
||||
// Otherwise, show root captures and scan cards
|
||||
if (this.galleryFolder) {
|
||||
console.log(this.allScans[this.galleryFolder].captures);
|
||||
return this.allScans[this.galleryFolder].captures;
|
||||
} else {
|
||||
return this.noScanCaptures.concat(this.scanList);
|
||||
|
|
@ -275,6 +286,15 @@ export default {
|
|||
sortedItems: function() {
|
||||
// Sort filteredItems using sortCaptures function
|
||||
return this.sortCaptures(this.filteredItems);
|
||||
},
|
||||
|
||||
pagedItems: function() {
|
||||
let startIndex = (this.page - 1) * this.maxitems;
|
||||
return this.sortedItems.slice(startIndex, startIndex + this.maxitems);
|
||||
},
|
||||
|
||||
numberOfPages: function() {
|
||||
return Math.floor(this.sortedItems.length / this.maxitems);
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -285,10 +305,6 @@ export default {
|
|||
this.$root.$on("globalUpdateCaptures", () => {
|
||||
this.updateCaptures();
|
||||
});
|
||||
// A global signal listener to set the gallery folder
|
||||
this.$root.$on("globalUpdateCaptureFolder", folder => {
|
||||
this.galleryFolder = folder;
|
||||
});
|
||||
},
|
||||
|
||||
created: function() {
|
||||
|
|
@ -312,8 +328,6 @@ export default {
|
|||
beforeDestroy() {
|
||||
// Remove global signal listener to perform a gallery refresh
|
||||
this.$root.$off("globalUpdateCaptures");
|
||||
// Remove global signal listener to set the gallery folder
|
||||
this.$root.$off("globalUpdateCaptureFolder");
|
||||
// Then we call that function here to unwatch
|
||||
if (this.unwatchStoreFunction) {
|
||||
this.unwatchStoreFunction();
|
||||
|
|
@ -375,6 +389,16 @@ export default {
|
|||
} else {
|
||||
return list.sort(compare);
|
||||
}
|
||||
},
|
||||
|
||||
galleryBack: function() {
|
||||
this.galleryFolder = "";
|
||||
this.page = 1;
|
||||
},
|
||||
|
||||
selectFolder: function(folderID) {
|
||||
console.log(folderID);
|
||||
this.galleryFolder = folderID;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -396,6 +420,7 @@ export default {
|
|||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 320px);
|
||||
justify-content: center;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.gallery-grid > div {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue