More migration

pull/37/head
Varun Patil 2022-09-12 19:36:27 -07:00
parent d496ee57bd
commit dfe88f6aaa
11 changed files with 69 additions and 89 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -46,13 +46,14 @@
</style>
<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator';
import { NcContent, NcAppContent, NcAppNavigation, NcAppNavigationItem, NcAppNavigationSettings} from '@nextcloud/vue'
import Timeline from './components/Timeline.vue'
import Settings from './components/Settings.vue'
import GlobalMixin from './mixins/GlobalMixin';
export default {
name: 'App',
@Component({
components: {
NcContent,
NcAppContent,
@ -63,24 +64,8 @@ export default {
Timeline,
Settings,
},
data() {
return {
loading: false,
show: true,
starred: false,
}
},
methods: {
close() {
this.show = false
console.debug(arguments)
},
newButtonAction() {
console.debug(arguments)
},
log() {
console.debug(arguments)
},
},
})
export default class App extends Mixins(GlobalMixin) {
// Outer element
}
</script>

View File

@ -33,19 +33,19 @@
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import { Component, Prop, Watch, Mixins } from 'vue-property-decorator';
import { IFileInfo, IFolder } from '../types';
import GlobalMixin from '../mixins/GlobalMixin';
import * as dav from "../services/DavRequests";
import constants from "../mixins/constants"
import { getPreviewUrl } from "../services/FileUtils";
@Component({})
export default class Folder extends Vue {
export default class Folder extends Mixins(GlobalMixin) {
@Prop() data: IFolder;
@Prop() rowHeight: number;
private readonly c = constants
// Separate property because the one on data isn't reactive
private previewFileInfos: IFileInfo[] = [];
/** Passthrough */
@ -82,8 +82,10 @@ export default class Folder extends Vue {
}
/** Open folder */
openFolder(id) {
this.$router.push({ name: 'folders', params: { id } });
openFolder(id: number) {
this.$router.push({ name: 'folders', params: {
id: id.toString(),
}});
}
}
</script>

View File

@ -37,18 +37,17 @@
</template>
<script lang="ts">
import { Component, Vue, Prop, Emit } from 'vue-property-decorator';
import { Component, Prop, Emit, Mixins } from 'vue-property-decorator';
import { IDay, IPhoto } from "../types";
import * as dav from "../services/DavRequests";
import constants from "../mixins/constants"
import errorsvg from "../assets/error.svg";
import { getPreviewUrl } from "../services/FileUtils";
import GlobalMixin from '../mixins/GlobalMixin';
@Component({})
export default class Photo extends Vue {
export default class Photo extends Mixins(GlobalMixin) {
private touchTimer = 0;
private readonly c = constants;
@Prop() data: IPhoto;
@Prop() rowHeight: number;
@ -60,12 +59,12 @@ export default class Photo extends Vue {
/** Get URL for image to show */
getUrl() {
if (this.data.flag & constants.FLAG_PLACEHOLDER) {
if (this.data.flag & this.c.FLAG_PLACEHOLDER) {
return undefined;
} else if (this.data.flag & constants.FLAG_LOAD_FAIL) {
} else if (this.data.flag & this.c.FLAG_LOAD_FAIL) {
return errorsvg;
} else if (this.data.flag & constants.FLAG_FORCE_RELOAD) {
this.data.flag &= ~constants.FLAG_FORCE_RELOAD;
} else if (this.data.flag & this.c.FLAG_FORCE_RELOAD) {
this.data.flag &= ~this.c.FLAG_FORCE_RELOAD;
return undefined;
} else {
return getPreviewUrl(this.data.fileid, this.data.etag);
@ -74,7 +73,7 @@ export default class Photo extends Vue {
/** Error in loading image */
error(e: any) {
this.data.flag |= (constants.FLAG_LOADED | constants.FLAG_LOAD_FAIL);
this.data.flag |= (this.c.FLAG_LOADED | this.c.FLAG_LOAD_FAIL);
}
/** Pass to parent */
@ -85,7 +84,7 @@ export default class Photo extends Vue {
/** Open viewer */
async openFile() {
// Check if this is a placeholder
if (this.data.flag & constants.FLAG_PLACEHOLDER) {
if (this.data.flag & this.c.FLAG_PLACEHOLDER) {
return;
}
@ -170,7 +169,7 @@ export default class Photo extends Vue {
}
toggleSelect() {
if (this.data.flag & constants.FLAG_PLACEHOLDER) {
if (this.data.flag & this.c.FLAG_PLACEHOLDER) {
return;
}
this.emitSelect(this.data);

View File

@ -41,14 +41,11 @@ input[type=text] {
<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator';
import GlobalMixin from '../mixins/GlobalMixin';
import UserConfig from '../mixins/UserConfig'
@Component({
mixins: [
UserConfig,
],
})
export default class Settings extends Mixins(UserConfig) {
@Component
export default class Settings extends Mixins(UserConfig, GlobalMixin) {
async updateAll() {
const res = await this.updateSetting('timelinePath');
if (res.status === 200) {

View File

@ -91,17 +91,17 @@
</template>
<script lang="ts">
import { Component, Watch, Vue } from 'vue-property-decorator';
import { Component, Watch, Mixins } from 'vue-property-decorator';
import { IDay, IPhoto, IRow, ITick } from "../types";
import { NcActions, NcActionButton, NcButton } from '@nextcloud/vue';
import { generateUrl } from '@nextcloud/router'
import GlobalMixin from '../mixins/GlobalMixin';
import * as dav from "../services/DavRequests";
import * as utils from "../services/Utils";
import axios from '@nextcloud/axios'
import Folder from "./Folder.vue";
import Photo from "./Photo.vue";
import constants from "../mixins/constants";
const SCROLL_LOAD_DELAY = 100; // Delay in loading data when scrolling
const MAX_PHOTO_WIDTH = 175; // Max width of a photo
@ -128,7 +128,7 @@ for (const [key, value] of Object.entries(API_ROUTES)) {
NcButton
}
})
export default class Timeline extends Vue {
export default class Timeline extends Mixins(GlobalMixin) {
/** Loading days response */
private loading = true;
/** Main list of rows */
@ -180,9 +180,6 @@ export default class Timeline extends Vue {
/** State for request cancellations */
private state = Math.random();
/** Constants for HTML template */
private readonly c = constants;
mounted() {
this.handleResize();
this.fetchDays();
@ -300,7 +297,7 @@ export default class Timeline extends Vue {
row.photos = new Array(row.pct);
for (let j = 0; j < row.pct; j++) {
row.photos[j] = {
flag: constants.FLAG_PLACEHOLDER,
flag: this.c.FLAG_PLACEHOLDER,
fileid: row.dayId * 10000 + i * 1000 + j,
};
}
@ -310,8 +307,8 @@ export default class Timeline extends Vue {
// Force reload all loaded images
if ((i < this.currentStart || i > this.currentEnd) && row.photos) {
for (const photo of row.photos) {
if (photo.flag & constants.FLAG_LOADED) {
photo.flag = (photo.flag & ~constants.FLAG_LOADED) | constants.FLAG_FORCE_RELOAD;
if (photo.flag & this.c.FLAG_LOADED) {
photo.flag = (photo.flag & ~this.c.FLAG_LOADED) | this.c.FLAG_FORCE_RELOAD;
}
}
}
@ -663,11 +660,11 @@ export default class Timeline extends Vue {
// Flag conversion
if (photo.isvideo) {
photo.flag |= constants.FLAG_IS_VIDEO;
photo.flag |= this.c.FLAG_IS_VIDEO;
delete photo.isvideo;
}
if (photo.isfavorite) {
photo.flag |= constants.FLAG_IS_FAVORITE;
photo.flag |= this.c.FLAG_IS_FAVORITE;
delete photo.isfavorite;
}
@ -784,10 +781,10 @@ export default class Timeline extends Vue {
selectPhoto(photo: IPhoto) {
const nval = !this.selection.has(photo);
if (nval) {
photo.flag |= constants.FLAG_SELECTED;
photo.flag |= this.c.FLAG_SELECTED;
this.selection.add(photo);
} else {
photo.flag &= ~constants.FLAG_SELECTED;
photo.flag &= ~this.c.FLAG_SELECTED;
this.selection.delete(photo);
}
this.$forceUpdate();
@ -796,7 +793,7 @@ export default class Timeline extends Vue {
/** Clear all selected photos */
clearSelection() {
for (const photo of this.selection) {
photo.flag &= ~constants.FLAG_SELECTED;
photo.flag &= ~this.c.FLAG_SELECTED;
}
this.selection.clear();
this.$forceUpdate();
@ -844,7 +841,7 @@ export default class Timeline extends Vue {
for (const row of day.rows) {
for (const photo of row.photos) {
if (delIds.has(photo.fileid)) {
photo.flag |= constants.FLAG_LEAVING;
photo.flag |= this.c.FLAG_LEAVING;
}
}
}
@ -859,10 +856,10 @@ export default class Timeline extends Vue {
let nextExit = false;
for (const row of day.rows) {
for (const photo of row.photos) {
if (photo.flag & constants.FLAG_LEAVING) {
if (photo.flag & this.c.FLAG_LEAVING) {
nextExit = true;
} else if (nextExit) {
photo.flag |= constants.FLAG_EXIT_LEFT;
photo.flag |= this.c.FLAG_EXIT_LEFT;
exitedLeft.add(photo);
}
}
@ -881,8 +878,8 @@ export default class Timeline extends Vue {
// Enter from right all photos that exited left
exitedLeft.forEach((photo: any) => {
photo.flag &= ~constants.FLAG_EXIT_LEFT;
photo.flag |= constants.FLAG_ENTER_RIGHT;
photo.flag &= ~this.c.FLAG_EXIT_LEFT;
photo.flag |= this.c.FLAG_ENTER_RIGHT;
});
// clear selection at this point
@ -893,7 +890,7 @@ export default class Timeline extends Vue {
// Clear enter right flags
exitedLeft.forEach((photo: any) => {
photo.flag &= ~constants.FLAG_ENTER_RIGHT;
photo.flag &= ~this.c.FLAG_ENTER_RIGHT;
});
// Reflow timeline

View File

@ -23,19 +23,10 @@ import 'reflect-metadata'
import Vue from 'vue'
import VueVirtualScroller from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import { translate as t, translatePlural as n } from '@nextcloud/l10n'
import App from './App.vue'
import router from './router'
// Adding translations to the whole app
Vue.mixin({
methods: {
t,
n,
},
})
Vue.use(VueVirtualScroller)
// https://github.com/nextcloud/photos/blob/156f280c0476c483cb9ce81769ccb0c1c6500a4e/src/main.js

View File

@ -0,0 +1,21 @@
import { Component, Vue } from 'vue-property-decorator';
import { translate as t, translatePlural as n } from '@nextcloud/l10n'
@Component
export default class GlobalMixin extends Vue {
public readonly t = t;
public readonly n = n;
public readonly c = {
FLAG_PLACEHOLDER: 1 << 0,
FLAG_LOADED: 1 << 1,
FLAG_LOAD_FAIL: 1 << 2,
FLAG_IS_VIDEO: 1 << 3,
FLAG_IS_FAVORITE: 1 << 4,
FLAG_SELECTED: 1 << 5,
FLAG_LEAVING: 1 << 6,
FLAG_EXIT_LEFT: 1 << 7,
FLAG_ENTER_RIGHT: 1 << 8,
FLAG_FORCE_RELOAD: 1 << 9,
}
}

View File

@ -29,7 +29,7 @@ import axios from '@nextcloud/axios'
const eventName = 'memories:user-config-changed'
@Component
export default class MyMixin extends Vue {
export default class UserConfig extends Vue {
timelinePath = loadState('memories', 'timelinePath') || '';
created() {

View File

@ -1,12 +0,0 @@
export default {
FLAG_PLACEHOLDER: 1 << 0,
FLAG_LOADED: 1 << 1,
FLAG_LOAD_FAIL: 1 << 2,
FLAG_IS_VIDEO: 1 << 3,
FLAG_IS_FAVORITE: 1 << 4,
FLAG_SELECTED: 1 << 5,
FLAG_LEAVING: 1 << 6,
FLAG_EXIT_LEFT: 1 << 7,
FLAG_ENTER_RIGHT: 1 << 8,
FLAG_FORCE_RELOAD: 1 << 9,
};