style: apply prettier lint

src/components/Timeline.vue

@@ -1,11 +1,18 @@
 <template>
-  <div class="container" ref="container" :class="{ 'icon-loading': loading > 0 }">
+  <div
+    class="container"
+    ref="container"
+    :class="{ 'icon-loading': loading > 0 }"
+  >
     <!-- Static top matter -->
     <TopMatter ref="topmatter" @updateBoundary="updateBoundary" />
 
     <!-- No content found and nothing is loading -->
-    <NcEmptyContent title="Nothing to show here" :description="emptyViewDescription"
+    <NcEmptyContent
-      v-if="loading === 0 && list.length === 0">
+      title="Nothing to show here"
+      :description="emptyViewDescription"
+      v-if="loading === 0 && list.length === 0"
+    >
       <template #icon>
         <PeopleIcon v-if="routeIsPeople" />
         <ArchiveIcon v-else-if="routeIsArchive" />
@@ -14,9 +21,21 @@
     </NcEmptyContent>
 
     <!-- Main recycler view for rows -->
-    <RecycleScroller ref="recycler" class="recycler" :class="{ empty: list.length === 0 }" :items="list"
+    <RecycleScroller
-      :emit-update="true" :buffer="800" :skipHover="true" key-field="id" size-field="size" type-field="type"
+      ref="recycler"
-      :updateInterval="100" @update="scrollChange" @resize="handleResizeWithDelay">
+      class="recycler"
+      :class="{ empty: list.length === 0 }"
+      :items="list"
+      :emit-update="true"
+      :buffer="800"
+      :skipHover="true"
+      key-field="id"
+      size-field="size"
+      type-field="type"
+      :updateInterval="100"
+      @update="scrollChange"
+      @resize="handleResizeWithDelay"
+    >
       <template #before>
         <!-- Show dynamic top matter, name of the view -->
         <div class="recycler-before" ref="recyclerBefore">
@@ -24,15 +43,24 @@
             {{ viewName }}
           </div>
 
-          <OnThisDay v-if="routeIsBase" :key="config_timelinePath" :viewer="$refs.viewer"
+          <OnThisDay
-            @load="scrollerManager.adjust()">
+            v-if="routeIsBase"
+            :key="config_timelinePath"
+            :viewer="$refs.viewer"
+            @load="scrollerManager.adjust()"
+          >
           </OnThisDay>
         </div>
       </template>
 
       <template v-slot="{ item, index }">
-        <div v-if="item.type === 0" class="head-row" :class="{ selected: item.selected }"
+        <div
-          :style="{ height: item.size + 'px' }" :key="item.id">
+          v-if="item.type === 0"
+          class="head-row"
+          :class="{ selected: item.selected }"
+          :style="{ height: item.size + 'px' }"
+          :key="item.id"
+        >
           <div class="super" v-if="item.super !== undefined">
             {{ item.super }}
           </div>
@@ -43,34 +71,63 @@
         </div>
 
         <template v-else>
-          <div class="photo" v-for="photo of item.photos" :key="photo.key" :style="{
+          <div
+            class="photo"
+            v-for="photo of item.photos"
+            :key="photo.key"
+            :style="{
               height: photo.dispH + 'px',
               width: photo.dispW + 'px',
               transform: `translate(${photo.dispX}px, ${photo.dispY}px`,
-          }">
+            }"
+          >
             <Folder v-if="photo.flag & c.FLAG_IS_FOLDER" :data="photo" />
 
             <Tag v-else-if="photo.flag & c.FLAG_IS_TAG" :data="photo" />
 
-            <Photo v-else :data="photo" :day="item.day" @select="selectionManager.selectPhoto"
+            <Photo
-              @pointerdown="selectionManager.clickPhoto(photo, $event, index)" @touchstart="
+              v-else
+              :data="photo"
+              :day="item.day"
+              @select="selectionManager.selectPhoto"
+              @pointerdown="selectionManager.clickPhoto(photo, $event, index)"
+              @touchstart="
                 selectionManager.touchstartPhoto(photo, $event, index)
-              " @touchend="selectionManager.touchendPhoto(photo, $event, index)"
+              "
-              @touchmove="selectionManager.touchmovePhoto(photo, $event, index)" />
+              @touchend="selectionManager.touchendPhoto(photo, $event, index)"
+              @touchmove="selectionManager.touchmovePhoto(photo, $event, index)"
+            />
           </div>
         </template>
       </template>
     </RecycleScroller>
 
     <!-- Managers -->
-    <ScrollerManager ref="scrollerManager" :rows="list" :height="scrollerHeight" :recycler="$refs.recycler"
+    <ScrollerManager
-      :recyclerBefore="$refs.recyclerBefore" />
+      ref="scrollerManager"
+      :rows="list"
+      :height="scrollerHeight"
+      :recycler="$refs.recycler"
+      :recyclerBefore="$refs.recyclerBefore"
+    />
 
-    <SelectionManager ref="selectionManager" :heads="heads" :rows="list" :isreverse="isMonthView"
+    <SelectionManager
-      :recycler="$refs.recycler" @refresh="softRefresh" @delete="deleteFromViewWithAnimation"
+      ref="selectionManager"
-      @updateLoading="updateLoading" />
+      :heads="heads"
+      :rows="list"
+      :isreverse="isMonthView"
+      :recycler="$refs.recycler"
+      @refresh="softRefresh"
+      @delete="deleteFromViewWithAnimation"
+      @updateLoading="updateLoading"
+    />
 
-    <Viewer ref="viewer" @deleted="deleteFromViewWithAnimation" @fetchDay="fetchDay" @updateLoading="updateLoading" />
+    <Viewer
+      ref="viewer"
+      @deleted="deleteFromViewWithAnimation"
+      @fetchDay="fetchDay"
+      @updateLoading="updateLoading"
+    />
   </div>
 </template>
 
@@ -83,7 +140,15 @@ import { subscribe, unsubscribe } from "@nextcloud/event-bus";
 import NcEmptyContent from "@nextcloud/vue/dist/Components/NcEmptyContent";
 
 import { getLayout } from "../services/Layout";
-import { IDay, IFolder, IHeadRow, IPhoto, IRow, IRowType, MapBoundary } from "../types";
+import {
+  IDay,
+  IFolder,
+  IHeadRow,
+  IPhoto,
+  IRow,
+  IRowType,
+  MapBoundary,
+} from "../types";
 import Folder from "./frame/Folder.vue";
 import Photo from "./frame/Photo.vue";
 import Tag from "./frame/Tag.vue";
@@ -666,7 +731,6 @@ export default defineComponent({
 
     /** Fetch timeline main call */
     async fetchDays(noCache = false) {
-
       let url = "";
       if (this.$route.name === "locations") {
         url = API.Q(API.DAYS_WITH_BOUNDS(this.mapBoundary), this.getQuery());
@@ -839,7 +903,10 @@ export default defineComponent({
     /** API url for Day call */
     getDayUrl(dayId: number | string) {
       if (this.$route.name === "locations") {
-        return API.Q(API.DAY_WITH_BOUNDS(dayId, this.mapBoundary), this.getQuery());
+        return API.Q(
+          API.DAY_WITH_BOUNDS(dayId, this.mapBoundary),
+          this.getQuery()
+        );
       } else {
         return API.Q(API.DAY(dayId), this.getQuery());
       }
@@ -1313,7 +1380,7 @@ export default defineComponent({
   padding-left: 3px;
   font-size: 0.9em;
 
-  >div {
+  > div {
     position: relative;
 
     &.super {
@@ -1381,7 +1448,7 @@ export default defineComponent({
 .recycler-before {
   width: 100%;
 
-  >.text {
+  > .text {
     font-size: 1.2em;
     padding-top: 13px;
     padding-left: 8px;

src/components/top-matter/LocationTopMatter.vue

@@ -1,10 +1,14 @@
 <template>
   <div class="location-top-matter">
-        <l-map style="height: 100%; width: 100%; margin-right: 3.5em; z-index: 0;" :zoom="zoom" ref="map"
+    <l-map
-            @moveend="getBoundary" @zoomend="getBoundary">
+      style="height: 100%; width: 100%; margin-right: 3.5em; z-index: 0"
+      :zoom="zoom"
+      ref="map"
+      @moveend="getBoundary"
+      @zoomend="getBoundary"
+    >
       <l-tile-layer :url="url" :attribution="attribution" />
-            <v-marker-cluster>
+      <v-marker-cluster> </v-marker-cluster>
-            </v-marker-cluster>
     </l-map>
   </div>
 </template>
@@ -13,10 +17,10 @@
 import { defineComponent, PropType } from "vue";
 import { LMap, LTileLayer, LMarker, LPopup } from "vue2-leaflet";
 import Vue2LeafletMarkerCluster from "vue2-leaflet-markercluster";
-import "leaflet/dist/leaflet.css"
+import "leaflet/dist/leaflet.css";
 import { IRow, IPhoto } from "../../types";
 
-import { Icon } from 'leaflet';
+import { Icon } from "leaflet";
 
 type D = Icon.Default & {
   _getIconUrl?: string;
@@ -25,9 +29,9 @@ type D = Icon.Default & {
 delete (Icon.Default.prototype as D)._getIconUrl;
 
 Icon.Default.mergeOptions({
-    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
+  iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
-    iconUrl: require('leaflet/dist/images/marker-icon.png'),
+  iconUrl: require("leaflet/dist/images/marker-icon.png"),
-    shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
+  shadowUrl: require("leaflet/dist/images/marker-shadow.png"),
 });
 
 export default defineComponent({
@@ -37,12 +41,12 @@ export default defineComponent({
     LTileLayer,
     LMarker,
     LPopup,
-        'v-marker-cluster': Vue2LeafletMarkerCluster,
+    "v-marker-cluster": Vue2LeafletMarkerCluster,
   },
 
   data: () => ({
     name: "locations", // add for test
-        url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+    url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
     attribution:
       '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
     zoom: 1,
@@ -62,7 +66,7 @@ export default defineComponent({
     getPhotos() {
       let photos: IPhoto[] = [];
       return photos;
-        }
+    },
   },
 
   methods: {
@@ -82,8 +86,6 @@ export default defineComponent({
     },
   },
 });
-
-
 </script>
 
 <style lang="scss" scoped>