RPJosh
/
memories
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: move topmatter to component

old-stable24
Varun Patil 2022-10-14 14:34:58 -07:00
parent 28581c53f8
commit 01fda17f19
2 changed files with 55 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/Timeline.vue
View File

@ -1,11 +1,7 @@
<template>
<div class="container" ref="container" :class="{ 'icon-loading': loading > 0 }">
<!-- Static top matter -->
<div ref="topmatter" class="top-matter" v-if="topMatterType">
<FolderTopMatter v-if="topMatterType === 1" />
<TagTopMatter v-else-if="topMatterType === 2" />
<FaceTopMatter v-else-if="topMatterType === 3" />
</div>
<TopMatter ref="topmatter" />
<!-- No content found and nothing is loading -->
<NcEmptyContent title="Nothing to show here" v-if="loading === 0 && list.length === 0">
@ -32,7 +28,7 @@
>
<template #before>
<!-- Show dynamic top matter, name of the view -->
<div class="recycler-before" ref="recyclerbefore" v-if="!topMatterType && list.length > 0">
<div class="recycler-before" ref="recyclerbefore" v-if="!$refs.topmatter.type && list.length > 0">
{{ getViewName() }}
</div>
</template>
@ -119,7 +115,7 @@
<script lang="ts">
import { Component, Watch, Mixins } from 'vue-property-decorator';
import { IDay, IFolder, IHeadRow, IPhoto, IRow, IRowType, ITick, TopMatterType } from "../types";
import { IDay, IFolder, IHeadRow, IPhoto, IRow, IRowType, ITick } from "../types";
import { generateUrl } from '@nextcloud/router'
import { showError } from '@nextcloud/dialogs'
import { getCanonicalLocale } from '@nextcloud/l10n';
@ -133,10 +129,8 @@ import axios from '@nextcloud/axios'
import Folder from "./Folder.vue";
import Tag from "./Tag.vue";
import Photo from "./Photo.vue";
import TopMatter from "./TopMatter.vue";
import SelectionManager from './SelectionManager.vue';
import FolderTopMatter from "./FolderTopMatter.vue";
import TagTopMatter from "./TagTopMatter.vue";
import FaceTopMatter from "./FaceTopMatter.vue";
import UserConfig from "../mixins/UserConfig";
import ArchiveIcon from 'vue-material-design-icons/PackageDown.vue';
@ -164,10 +158,8 @@ for (const [key, value] of Object.entries(API_ROUTES)) {
Folder,
Tag,
Photo,
TopMatter,
SelectionManager,
FolderTopMatter,
TagTopMatter,
FaceTopMatter,
NcEmptyContent,
CheckCircle,
@ -231,9 +223,6 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
/** Set of selected file ids */
private selection = new Map<number, IPhoto>();
/** Static top matter type for current page */
private topMatterType: TopMatterType = TopMatterType.NONE;
/** State for request cancellations */
private state = Math.random();
@ -268,9 +257,6 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
/** Create new state */
async createState() {
// Initializations in this tick cycle
this.setTopMatter();
// Wait for one tick before doing anything
await this.$nextTick();
@ -300,18 +286,6 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
this.loadedDays.clear();
}
/** Create top matter */
setTopMatter() {
this.topMatterType = (() => {
switch (this.$route.name) {
case 'folders': return TopMatterType.FOLDER;
case 'tags': return this.$route.params.name ? TopMatterType.TAG : TopMatterType.NONE;
case 'people': return this.$route.params.name ? TopMatterType.FACE : TopMatterType.NONE;
default: return TopMatterType.NONE;
}
})();
}
/** Get view name for dynamic top matter */
getViewName() {
switch (this.$route.name) {
@ -355,8 +329,7 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
/** Handle window resize and initialization */
handleResize() {
const e = this.$refs.container as Element;
const tm = this.$refs.topmatter as Element;
let height = e.clientHeight - (tm?.clientHeight || 0);
let height = e.clientHeight;
let width = e.clientWidth;
this.timelineHeight = height;

49
src/components/TopMatter.vue 100644
View File

@ -0,0 +1,49 @@
<template>
<div class="top-matter" v-if="type">
<FolderTopMatter v-if="type === 1" />
<TagTopMatter v-else-if="type === 2" />
<FaceTopMatter v-else-if="type === 3" />
</div>
</template>
<script lang="ts">
import { Component, Mixins, Watch } from 'vue-property-decorator';
import FolderTopMatter from "./FolderTopMatter.vue";
import TagTopMatter from "./TagTopMatter.vue";
import FaceTopMatter from "./FaceTopMatter.vue";
import GlobalMixin from '../mixins/GlobalMixin';
import { TopMatterType } from '../types';
@Component({
components: {
FolderTopMatter,
TagTopMatter,
FaceTopMatter,
},
})
export default class TopMatter extends Mixins(GlobalMixin) {
public type: TopMatterType = TopMatterType.NONE;
@Watch('$route')
async routeChange(from: any, to: any) {
this.setTopMatter();
}
mounted() {
this.setTopMatter();
}
/** Create top matter */
setTopMatter() {
this.type = (() => {
switch (this.$route.name) {
case 'folders': return TopMatterType.FOLDER;
case 'tags': return this.$route.params.name ? TopMatterType.TAG : TopMatterType.NONE;
case 'people': return this.$route.params.name ? TopMatterType.FACE : TopMatterType.NONE;
default: return TopMatterType.NONE;
}
})();
}
}
</script>