build: add name to components which failed lint check

components/common/app-lazy-background/index.vue

@@ -1,38 +0,0 @@
-<template>
-  <div v-lazy:background-image="image" class="image" @click="onClick">
-    <slot />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    image: {
-      type: String,
-      required: true
-    },
-    onClick: {
-      type: Function,
-      default: f => f
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.image {
-  height: 100%;
-  width: 100%;
-  max-width: 100%;
-  background-size: cover;
-  background-position: 50% 50%;
-  background-repeat: no-repeat;
-  opacity: 0;
-  transition: opacity 300ms ease;
-  will-change: opacity;
-
-  &[lazy='loaded'] {
-    opacity: 1;
-  }
-}
-</style>

components/common/app-loader/index.vue

@@ -1,96 +0,0 @@
-<template>
-  <div :class="{ 'is-shown': show, 'is-contained': contained }" class="cover">
-    <ul class="loader">
-      <li />
-      <li />
-      <li />
-      <li />
-      <li />
-      <li />
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    show: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    contained: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.cover {
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  z-index: 100000;
-  background-color: rgba(255, 255, 255, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0;
-  pointer-events: none;
-  transition: all 350ms ease;
-
-  &.is-contained {
-    position: absolute;
-  }
-
-  .loader li {
-    background: #535353;
-    margin-left: 1px;
-    width: 14px;
-    height: 22px;
-    display: inline-block;
-    opacity: 0;
-    border-radius: 2px;
-    box-shadow: 0px 0px 1px #b4b4b4;
-    transform: skew(-25deg, 0deg) scale(0.1);
-    animation: loader 0.5s ease-in-out infinite alternate;
-  }
-
-  @keyframes loader {
-    to {
-      transform: skew(-25deg, 0deg) scale(1);
-      opacity: 1;
-    }
-  }
-
-  .loader li:nth-child(2) {
-    animation-delay: 0.1s;
-  }
-  .loader li:nth-child(3) {
-    animation-delay: 0.2s;
-  }
-  .loader li:nth-child(4) {
-    animation-delay: 0.3s;
-  }
-  .loader li:nth-child(5) {
-    animation-delay: 0.4s;
-  }
-  .loader li:nth-child(6) {
-    animation-delay: 0.5s;
-  }
-
-  &.is-shown {
-    pointer-events: all;
-    opacity: 1;
-
-    .spinner {
-      transform: scale(1);
-    }
-  }
-}
-</style>

components/common/app-message/index.vue

@@ -1,53 +0,0 @@
-<template>
-  <div class="message-container">
-    <div class="message">
-      <div class="icon">
-        <slot name="icon" />
-      </div>
-      <h3>{{ message }}</h3>
-      <p>{{ description }}</p>
-      <slot name="extras" />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    message: {
-      type: String,
-      required: true
-    },
-    description: {
-      type: String,
-      required: false,
-      default: ''
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.message-container {
-  margin: 10vh auto;
-  max-width: 420px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.message {
-  padding: 2rem;
-  border-radius: 1rem;
-  text-align: center;
-  box-shadow: 0px 1px 2px #b4b4b494;
-
-  .icon > * {
-    font-size: 3rem;
-  }
-
-  > * {
-    margin: 1rem 0;
-  }
-}
-</style>

components/pages/events/Event/index.vue

@@ -97,6 +97,7 @@
 import dayjs from 'dayjs'
 
 export default {
+  name: 'EventDetail',
   props: {
     event: {
       type: Object,

components/pages/events/List/index.vue

@@ -16,6 +16,7 @@
 import Event from '../Event'
 
 export default {
+  name: 'EventList',
   components: {
     Event
   },

components/pages/events/index.vue

@@ -1,6 +1,5 @@
 <template>
   <div :key="isAuthenticated">
-    <span v-text="isAuthenticated" />
     <v-container fluid grid-list-md class="app-fade-in" :key="range">
       <v-layout row wrap v-if="!isAuthenticated">
         <v-flex xs12>
@@ -97,6 +96,7 @@ import {
 import { useTranslation } from '../../../plugins/i18n'
 
 export default {
+  name: 'EventsPage',
   components: {
     List
   },
@@ -108,7 +108,7 @@ export default {
     const { route, router } = useRouter()
     const range = computed({
       get: () => route.value.query.range || 'ONE_WEEK',
-      set: value => router.push(`/?range=${value}`)
+      set: (value) => router.push(`/?range=${value}`)
     })
     const enabled = ref(false)
     const { result: data, refetch } = useQuery(
@@ -116,11 +116,11 @@ export default {
       { includeOrigins: false },
       () => ({ enabled: enabled.value })
     )
-    const events = useResult(data, [], result => result.events)
-    const origins = useResult(data, [], result => result.origins)
+    const events = useResult(data, [], (result) => result.events)
+    const origins = useResult(data, [], (result) => result.origins)
     watch(
       range,
-      r => {
+      (r) => {
         enabled.value = true
         console.log('isAuthenticated', isAuthenticated.value)
         refetch({
@@ -164,7 +164,7 @@ export default {
     )
     const { mutate: doToggleIgnoreState } = useMutation(toggleIgnoreState)
 
-    const toggleIgnoreSuccess = name => {
+    const toggleIgnoreSuccess = (name) => {
       return () => {
         fetchEvents()
         snackbar.value.color = 'success'
@@ -173,7 +173,7 @@ export default {
       }
     }
 
-    const toggleIgnoreFailed = name => {
+    const toggleIgnoreFailed = (name) => {
       return () => {
         snackbar.value.color = 'error'
         snackbar.value.text = `${name} kunde inte döljas`
@@ -221,7 +221,7 @@ export default {
     )
     const fetchAddressFn = () => {
       if (window.navigator) {
-        window.navigator.geolocation.getCurrentPosition(pos => {
+        window.navigator.geolocation.getCurrentPosition((pos) => {
           addressEnabled.value = true
           doFetchAddress({
             latlng: `${pos.coords.latitude},${pos.coords.longitude}`
@@ -231,7 +231,7 @@ export default {
         })
       }
     }
-    const saveOriginFn = o =>
+    const saveOriginFn = (o) =>
       doSaveOrigin({ origin: o }).then(() => {
         origin.value = ''
         fetchEvents()

components/pages/filters/List/index.vue

@@ -23,6 +23,7 @@
 
 <script>
 export default {
+  name: 'FiltersList',
   props: {
     model: {
       type: Array,

components/pages/filters/index.vue

@@ -74,6 +74,7 @@ import { useAuth } from '../../../plugins/auth'
 import { useTranslation } from '../../../plugins/i18n'
 
 export default {
+  name: 'FiltersPage',
   components: {
     List
   },
@@ -83,11 +84,15 @@ export default {
     setTitle(t('app.links.filters'))
     const { isAuthenticated } = useAuth()
     const { result: data, loading, refetch } = useQuery(fetchFilters)
-    const bands = useResult(data, [], result => result.bands)
-    const cities = useResult(data, [], result => result.cities)
-    const danceHalls = useResult(data, [], result => result.danceHalls)
-    const municipalities = useResult(data, [], result => result.municipalities)
-    const states = useResult(data, [], result => result.states)
+    const bands = useResult(data, [], (result) => result.bands)
+    const cities = useResult(data, [], (result) => result.cities)
+    const danceHalls = useResult(data, [], (result) => result.danceHalls)
+    const municipalities = useResult(
+      data,
+      [],
+      (result) => result.municipalities
+    )
+    const states = useResult(data, [], (result) => result.states)
     const snackbar = ref({ active: false, color: 'success', text: '' })
     const { mutate: doToggleIgnoreBand } = useMutation(toggleIgnoreBand)
     const { mutate: doToggleIgnoreDanceHall } = useMutation(
@@ -99,7 +104,7 @@ export default {
     )
     const { mutate: doToggleIgnoreState } = useMutation(toggleIgnoreState)
 
-    const toggleIgnoreSuccess = name => {
+    const toggleIgnoreSuccess = (name) => {
       return () => {
         refetch()
         snackbar.value.color = 'success'
@@ -108,7 +113,7 @@ export default {
       }
     }
 
-    const toggleIgnoreFailed = name => {
+    const toggleIgnoreFailed = (name) => {
       return () => {
         snackbar.value.color = 'error'
         snackbar.value.text = t('filters.failure', { name })

components/pages/origins/index.vue

@@ -70,6 +70,7 @@ import { useAuth } from '../../../plugins/auth'
 import { useTranslation } from '../../../plugins/i18n'
 
 export default {
+  name: 'OriginsPage',
   setup() {
     const { setTitle } = useMutations(['setTitle'])
     const { t } = useTranslation()
@@ -87,22 +88,22 @@ export default {
     const origin = ref('')
     const fetchAddressFn = () => {
       if (window.navigator) {
-        window.navigator.geolocation.getCurrentPosition(pos => {
+        window.navigator.geolocation.getCurrentPosition((pos) => {
           enabled.value = true
           doFetchAddress({
             latlng: `${pos.coords.latitude},${pos.coords.longitude}`
-          }).then(res => {
+          }).then((res) => {
             origin.value = res.address
           })
         })
       }
     }
-    const saveOriginFn = o =>
+    const saveOriginFn = (o) =>
       doSaveOrigin({ origin: o }).then(() => {
         refetch()
         origin.value = ''
       })
-    const removeOriginFn = o =>
+    const removeOriginFn = (o) =>
       doRemoveOrigin({ origin: o }).then(() => refetch())
     return {
       isAuthenticated,