style: apply prettier lint

2023-01-26 12:51:42 +08:00 · 2023-01-26 12:51:42 +08:00 · 2097f26d17
parent ea8d08eba7
commit 2097f26d17
4 changed files with 182 additions and 113 deletions
--- a/lib/Controller/PageController.php
+++ b/lib/Controller/PageController.php
@ -66,29 +66,29 @@ class PageController extends Controller
        $this->initialState->provideInitialState(
            'timelinePath',
            $this->config->getUserValue(
-            $uid,
-            Application::APPNAME,
-            'timelinePath',
-            'EMPTY'
-        )
+                $uid,
+                Application::APPNAME,
+                'timelinePath',
+                'EMPTY'
+            )
        );
        $this->initialState->provideInitialState(
            'foldersPath',
            $this->config->getUserValue(
-            $uid,
-            Application::APPNAME,
-            'foldersPath',
-            '/'
-        )
+                $uid,
+                Application::APPNAME,
+                'foldersPath',
+                '/'
+            )
        );
        $this->initialState->provideInitialState(
            'showHidden',
            $this->config->getUserValue(
-            $uid,
-            Application::APPNAME,
-            'showHidden',
-            false
-        )
+                $uid,
+                Application::APPNAME,
+                'showHidden',
+                false
+            )
        );

        // Apps enabled
--- a/src/components/Timeline.vue
+++ b/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"
-      v-if="loading === 0 && list.length === 0">
+    <NcEmptyContent
+      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"
-      :emit-update="true" :buffer="800" :skipHover="true" key-field="id" size-field="size" type-field="type"
-      :updateInterval="100" @update="scrollChange" @resize="handleResizeWithDelay">
+    <RecycleScroller
+      ref="recycler"
+      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"
-            @load="scrollerManager.adjust()">
+          <OnThisDay
+            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 }"
-          :style="{ height: item.size + 'px' }" :key="item.id">
+        <div
+          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="{
-            height: photo.dispH + 'px',
-            width: photo.dispW + 'px',
-            transform: `translate(${photo.dispX}px, ${photo.dispY}px`,
-          }">
+          <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"
-              @pointerdown="selectionManager.clickPhoto(photo, $event, index)" @touchstart="
+            <Photo
+              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"
-      :recyclerBefore="$refs.recyclerBefore" />
+    <ScrollerManager
+      ref="scrollerManager"
+      :rows="list"
+      :height="scrollerHeight"
+      :recycler="$refs.recycler"
+      :recyclerBefore="$refs.recyclerBefore"
+    />

-    <SelectionManager ref="selectionManager" :heads="heads" :rows="list" :isreverse="isMonthView"
-      :recycler="$refs.recycler" @refresh="softRefresh" @delete="deleteFromViewWithAnimation"
-      @updateLoading="updateLoading" />
+    <SelectionManager
+      ref="selectionManager"
+      :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;
--- a/src/components/top-matter/LocationTopMatter.vue
+++ b/src/components/top-matter/LocationTopMatter.vue
@ -1,89 +1,91 @@
 <template>
-    <div class="location-top-matter">
-        <l-map 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>
-        </l-map>
-    </div>
+  <div class="location-top-matter">
+    <l-map
+      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>
+    </l-map>
+  </div>
 </template>

 <script lang="ts">
 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;
+  _getIconUrl?: string;
 };

 delete (Icon.Default.prototype as D)._getIconUrl;

 Icon.Default.mergeOptions({
-    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
-    iconUrl: require('leaflet/dist/images/marker-icon.png'),
-    shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
+  iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
+  iconUrl: require("leaflet/dist/images/marker-icon.png"),
+  shadowUrl: require("leaflet/dist/images/marker-shadow.png"),
 });

 export default defineComponent({
-    name: "LocationTopMatter",
-    components: {
-        LMap,
-        LTileLayer,
-        LMarker,
-        LPopup,
-        'v-marker-cluster': Vue2LeafletMarkerCluster,
+  name: "LocationTopMatter",
+  components: {
+    LMap,
+    LTileLayer,
+    LMarker,
+    LPopup,
+    "v-marker-cluster": Vue2LeafletMarkerCluster,
+  },
+
+  data: () => ({
+    name: "locations", // add for test
+    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,
+  }),
+
+  watch: {
+    $route: function (from: any, to: any) {
+      this.createMatter();
+    },
+  },
+
+  mounted() {
+    this.createMatter();
+  },
+
+  computed: {
+    getPhotos() {
+      let photos: IPhoto[] = [];
+      return photos;
+    },
+  },
+
+  methods: {
+    createMatter() {
+      this.name = <string>this.$route.params.name || "";
    },

-    data: () => ({
-        name: "locations", // add for test
-        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,
-    }),
-
-    watch: {
-        $route: function (from: any, to: any) {
-            this.createMatter();
-        },
-    },
-
-    mounted() {
-        this.createMatter();
-    },
-
-    computed: {
-        getPhotos() {
-            let photos: IPhoto[] = [];
-            return photos;
-        }
-    },
-
-    methods: {
-        createMatter() {
-            this.name = <string>this.$route.params.name || "";
-        },
-
-        getBoundary() {
-            let map = this.$refs.map as LMap;
-            let boundary = map.mapObject.getBounds();
-            this.$parent.$emit("updateBoundary", {
-                minLat: boundary.getSouth(),
-                maxLat: boundary.getNorth(),
-                minLng: boundary.getWest(),
-                maxLng: boundary.getEast(),
-            });
-        },
+    getBoundary() {
+      let map = this.$refs.map as LMap;
+      let boundary = map.mapObject.getBounds();
+      this.$parent.$emit("updateBoundary", {
+        minLat: boundary.getSouth(),
+        maxLat: boundary.getNorth(),
+        minLng: boundary.getWest(),
+        maxLng: boundary.getEast(),
+      });
    },
+  },
 });
-
-
 </script>

 <style lang="scss" scoped>
@ -92,8 +94,8 @@ export default defineComponent({
@import "~leaflet.markercluster/dist/MarkerCluster.Default.css";

 .location-top-matter {
-    display: flex;
-    vertical-align: middle;
-    height: 20em;
+  display: flex;
+  vertical-align: middle;
+  height: 20em;
 }
 </style>