Refactor ph and s to flag

src/components/Photo.vue

@@ -1,6 +1,10 @@
 <template>
-    <div class="photo-container" :class="{ 'selected': selected }">
-        <div class="icon-checkmark select" v-if="!data.ph" @click="toggleSelect"></div>
+    <div class="photo-container"
+        :class="{ 'selected': (data.flag & c.FLAG_SELECTED) }">
+
+        <div class="icon-checkmark select"
+             v-if="!(data.flag & c.FLAG_PLACEHOLDER)"
+             @click="toggleSelect"></div>
 
         <div v-if="data.isvideo" class="icon-video-white"></div>
         <div class="img-outer" :style="{
@@ -14,7 +18,7 @@
                 @touchmove="touchend"
                 @touchend="touchend"
                 @touchcancel="touchend"
-                :src="data.ph ? undefined : getPreviewUrl(data.fileid, data.etag)"
+                :src="(data.flag & c.FLAG_PLACEHOLDER) ? undefined : getPreviewUrl(data.fileid, data.etag)"
                 :key="data.fileid"
                 @load = "data.l = Math.random()"
                 @error="(e) => e.target.src='/apps/memories/img/error.svg'" />
@@ -24,6 +28,7 @@
 
 <script>
 import * as dav from "../services/DavRequests";
+import constants from "../mixins/constants"
 import { getPreviewUrl } from "../services/FileUtils";
 
 export default {
@@ -31,6 +36,7 @@ export default {
     data() {
         return {
             touchTimer: 0,
+            c: constants,
         }
     },
     props: {
@@ -46,10 +52,6 @@ export default {
             type: Object,
             required: true,
         },
-        selected: {
-            type: Boolean,
-            required: true,
-        },
     },
     methods: {
         /** Passthrough */
@@ -63,7 +65,7 @@ export default {
         /** Open viewer */
         async openFile() {
             // Check if this is a placeholder
-            if (this.data.ph) {
+            if (this.data.flag & constants.FLAG_PLACEHOLDER) {
                 return;
             }
 
@@ -153,7 +155,7 @@ export default {
         },
 
         toggleSelect() {
-            if (this.data.ph) {
+            if (this.data.flag & constants.FLAG_PLACEHOLDER) {
                 return;
             }
             this.$emit('select', this.data);

src/components/Timeline.vue

@@ -25,7 +25,6 @@
                             :data="photo" :rowHeight="rowHeight" />
                     <Photo v-else
                             :data="photo" :rowHeight="rowHeight" :day="item.day"
-                            :selected="photo.s || false"
                             @select="selectPhoto"
                             @reprocess="processDay"
                             @clickImg="clickPhoto" />
@@ -75,6 +74,7 @@ import * as dav from "../services/DavRequests";
 import axios from '@nextcloud/axios'
 import Folder from "./Folder";
 import Photo from "./Photo";
+import constants from "../mixins/constants";
 import { generateUrl } from '@nextcloud/router'
 
 const MAX_PHOTO_WIDTH = 175;
@@ -133,6 +133,9 @@ export default {
 
             /** State for request cancellations */
             state: Math.random(),
+
+            /** Constants for HTML template */
+            c: constants,
         }
     },
 
@@ -399,7 +402,7 @@ export default {
                     const rowCount = leftNum > this.numCols ? this.numCols : leftNum;
                     for (let j = 0; j < rowCount; j++) {
                         row.photos.push({
-                            ph: true, // placeholder
+                            flag: constants.FLAG_PLACEHOLDER,
                             fileid: `${day.dayid}-${i}-${j}`,
                         });
                     }
@@ -540,7 +543,7 @@ export default {
 
                 // Add the photo to the row
                 const photo = data[dataIdx];
-                photo.s = false; // selected
+                photo.flag = 0; // flags
                 photo.d = day; // backref to day
                 this.list[rowIdx].photos.push(photo);
                 dataIdx++;
@@ -654,10 +657,12 @@ export default {
 
         /** Add a photo to selection list */
         selectPhoto(photo) {
-            photo.s = !this.selection.has(photo);
-            if (photo.s) {
+            const nval = !this.selection.has(photo);
+            if (nval) {
+                photo.flag |= constants.FLAG_SELECTED;
                 this.selection.add(photo);
             } else {
+                photo.flag &= ~constants.FLAG_SELECTED;
                 this.selection.delete(photo);
             }
             this.$forceUpdate();
@@ -666,7 +671,7 @@ export default {
         /** Clear all selected photos */
         clearSelection() {
             for (const photo of this.selection) {
-                photo.s = false;
+                photo.flag &= ~constants.FLAG_SELECTED;
             }
             this.selection.clear();
             this.$forceUpdate();

src/mixins/constants.js

@@ -0,0 +1,4 @@
+export default {
+    FLAG_PLACEHOLDER: 1,
+    FLAG_SELECTED: 2,
+};