refactor: separate cluster grid
Signed-off-by: Varun Patil <varunpatil@ucla.edu>pull/563/head
parent
74e4503668
commit
5a7d91d886
|
@ -0,0 +1,81 @@
|
|||
<template>
|
||||
<RecycleScroller
|
||||
ref="recycler"
|
||||
class="grid-recycler hide-scrollbar-mobile"
|
||||
:class="{ empty: !items.length }"
|
||||
:items="items"
|
||||
:skipHover="true"
|
||||
:buffer="400"
|
||||
:itemSize="itemSize"
|
||||
:gridItems="gridItems"
|
||||
:updateInterval="100"
|
||||
key-field="cluster_id"
|
||||
@resize="resize"
|
||||
>
|
||||
<template v-slot="{ item }">
|
||||
<div class="grid-item fill-block">
|
||||
<Cluster :data="item" @click="click(item)" :link="link" />
|
||||
</div>
|
||||
</template>
|
||||
</RecycleScroller>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import Cluster from "./frame/Cluster.vue";
|
||||
import { ICluster } from "../types";
|
||||
|
||||
export default defineComponent({
|
||||
name: "ClusterGrid",
|
||||
|
||||
components: {
|
||||
Cluster,
|
||||
},
|
||||
|
||||
props: {
|
||||
items: {
|
||||
type: Array<ICluster>,
|
||||
required: true,
|
||||
},
|
||||
link: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
itemSize: 200,
|
||||
gridItems: 5,
|
||||
}),
|
||||
|
||||
mounted() {
|
||||
this.resize();
|
||||
},
|
||||
|
||||
methods: {
|
||||
click(item: ICluster) {
|
||||
this.$emit("click", item);
|
||||
},
|
||||
|
||||
resize() {
|
||||
const w = (<any>this.$refs.recycler).$el.clientWidth;
|
||||
this.gridItems = Math.max(Math.floor(w / 200), 3);
|
||||
this.itemSize = Math.floor(w / this.gridItems);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.grid-recycler {
|
||||
flex: 1;
|
||||
max-height: 100%;
|
||||
overflow-y: scroll !important;
|
||||
&.empty {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
.grid-item {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
|
@ -4,25 +4,7 @@
|
|||
|
||||
<EmptyContent v-if="!items.length && !loading" />
|
||||
|
||||
<RecycleScroller
|
||||
ref="recycler"
|
||||
class="grid-recycler hide-scrollbar-mobile"
|
||||
:class="{ empty: !items.length }"
|
||||
:items="items"
|
||||
:skipHover="true"
|
||||
:buffer="400"
|
||||
:itemSize="itemSize"
|
||||
:gridItems="gridItems"
|
||||
:updateInterval="100"
|
||||
key-field="cluster_id"
|
||||
@resize="resize"
|
||||
>
|
||||
<template v-slot="{ item }">
|
||||
<div class="grid-item fill-block">
|
||||
<Cluster :data="item" @click="click(item)" :link="link" />
|
||||
</div>
|
||||
</template>
|
||||
</RecycleScroller>
|
||||
<ClusterGrid :items="items" />
|
||||
</div>
|
||||
|
||||
<Timeline v-else />
|
||||
|
@ -33,7 +15,7 @@ import { defineComponent } from "vue";
|
|||
|
||||
import UserConfig from "../mixins/UserConfig";
|
||||
import TopMatter from "./top-matter/TopMatter.vue";
|
||||
import Cluster from "./frame/Cluster.vue";
|
||||
import ClusterGrid from "./ClusterGrid.vue";
|
||||
import Timeline from "./Timeline.vue";
|
||||
import EmptyContent from "./top-matter/EmptyContent.vue";
|
||||
|
||||
|
@ -46,7 +28,7 @@ export default defineComponent({
|
|||
|
||||
components: {
|
||||
TopMatter,
|
||||
Cluster,
|
||||
ClusterGrid,
|
||||
Timeline,
|
||||
EmptyContent,
|
||||
},
|
||||
|
@ -55,18 +37,9 @@ export default defineComponent({
|
|||
|
||||
data: () => ({
|
||||
items: [] as ICluster[],
|
||||
itemSize: 200,
|
||||
gridItems: 5,
|
||||
loading: 0,
|
||||
}),
|
||||
|
||||
props: {
|
||||
link: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
noParams() {
|
||||
return !this.$route.params.name && !this.$route.params.user;
|
||||
|
@ -74,45 +47,35 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
mounted() {
|
||||
this.routeChange(this.$route);
|
||||
this.resize();
|
||||
this.routeChange();
|
||||
},
|
||||
|
||||
watch: {
|
||||
async $route(to: any, from?: any) {
|
||||
this.routeChange(to, from);
|
||||
async $route() {
|
||||
this.routeChange();
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
async routeChange(to: any, from?: any) {
|
||||
async routeChange() {
|
||||
try {
|
||||
const route = this.$route.name;
|
||||
this.items = [];
|
||||
this.loading++;
|
||||
|
||||
if (to.name === "albums") {
|
||||
if (route === "albums") {
|
||||
this.items = await dav.getAlbums(3, this.config_albumListSort);
|
||||
} else if (to.name === "tags") {
|
||||
} else if (route === "tags") {
|
||||
this.items = await dav.getTags();
|
||||
} else if (to.name === "recognize" || to.name === "facerecognition") {
|
||||
this.items = await dav.getFaceList(to.name);
|
||||
} else if (to.name === "places") {
|
||||
} else if (route === "recognize" || route === "facerecognition") {
|
||||
this.items = await dav.getFaceList(route);
|
||||
} else if (route === "places") {
|
||||
this.items = await dav.getPlaces();
|
||||
}
|
||||
} finally {
|
||||
this.loading--;
|
||||
}
|
||||
},
|
||||
|
||||
click(item: ICluster) {
|
||||
this.$emit("click", item);
|
||||
},
|
||||
|
||||
resize() {
|
||||
const w = (<any>this.$refs.recycler).$el.clientWidth;
|
||||
this.gridItems = Math.max(Math.floor(w / 200), 3);
|
||||
this.itemSize = Math.floor(w / this.gridItems);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
@ -124,15 +87,4 @@ export default defineComponent({
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.grid-recycler {
|
||||
flex: 1;
|
||||
max-height: 100%;
|
||||
overflow-y: scroll !important;
|
||||
&.empty {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
.grid-item {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in New Issue