Use prettier for all frontend projects

.github/workflows/continuous-integration.yml

@@ -138,10 +138,10 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-node-
 
-      - run: npm ci
+      - run: npm ci --no-audit
         working-directory: frontend
 
-      - run: npm run lint-check
+      - run: npm run lint:check
         working-directory: frontend
 
   print-eslint:
@@ -162,10 +162,10 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-node-
 
-      - run: npm ci
+      - run: npm ci --no-audit
         working-directory: print
 
-      - run: npm run lint
+      - run: npm run lint:check
         working-directory: print
 
   api-tests:
@@ -312,7 +312,7 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-node-
 
-      - run: npm ci
+      - run: npm ci --no-audit
         working-directory: frontend
 
       - run: npm run build
@@ -349,7 +349,7 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-node-
 
-      - run: npm ci
+      - run: npm ci --no-audit
         working-directory: print
 
       - run: npm run build
@@ -428,10 +428,10 @@ jobs:
       # run end-to-end tests
       - run: docker run -v $PWD:/e2e -w /e2e --network host -e CYPRESS_BASE_URL=http://localhost:3000 cypress/included:10.1.0
         working-directory: frontend
-          
+
       # print docker container logs (good for debugging; can be disabled again lateron)
       - run: docker-compose logs --tail="all"
-      
+
   coveralls-finished:
     name: "Finish coveralls report"
     needs:

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "semi": false,
+  "bracketSameLine": false,
+  "bracketSpacing": true,
+  "printWidth": 90
+}

common/helpers/dateHelperVCalendar.js

@@ -10,7 +10,4 @@ function utcStringToTimestamp (string) {
   return dayjs(dayjs.utc(string).format('YYYY-MM-DD HH:mm')).valueOf()
 }
 
-export {
-  timestampToUtcString,
-  utcStringToTimestamp
-}
+export { timestampToUtcString, utcStringToTimestamp }

common/locales/de-CH-scout.json

@@ -1,2 +1 @@
-{
-}
+{}

common/locales/de.json

@@ -158,4 +158,4 @@
       "title": "Grobprogramm für {period}"
     }
   }
-}
+}

common/locales/en-CH-scout.json

@@ -1,2 +1 @@
-{
-}
+{}

common/locales/en.json

@@ -176,4 +176,4 @@
       "title": "Program overview for {period}"
     }
   }
-}
+}

common/locales/fr-CH-scout.json

@@ -1,2 +1 @@
-{
-}
+{}

common/locales/fr.json

@@ -62,4 +62,4 @@
       "name": "Inscription au calendrier"
     }
   }
-}
+}

common/locales/it-CH-scout.json

@@ -1,2 +1 @@
-{
-}
+{}

common/locales/it.json

@@ -62,4 +62,4 @@
       "name": "Inserimento nel programma"
     }
   }
-}
+}

frontend/README.md

@@ -1,31 +1,37 @@
 # frontend
 
 ## Project setup
+
 ```
 npm install
 ```
 
 ### Compiles and hot-reloads for development
+
 ```
 npm run serve
 ```
 
 ### Compiles and minifies for production
+
 ```
 npm run build
 ```
 
 ### Lints and fixes files
+
 ```
 npm run lint
 ```
 
 ### Run your unit tests
+
 ```
 npm run test:unit
 ```
 
 ### Run your end-to-end tests
+
 ```
 npm run test:e2e
 ```

frontend/babel.config.js

@@ -1,12 +1,8 @@
 module.exports = {
-  presets: [
-    '@vue/app'
-  ],
+  presets: ['@vue/app'],
   env: {
     test: {
-      plugins: [
-        'require-context-hook'
-      ]
+      plugins: ['require-context-hook']
     }
   }
 }

frontend/src/App.vue

@@ -10,11 +10,12 @@
     </v-main>
 
     <!-- footer -->
-    <v-footer v-if="$vuetify.breakpoint.smAndUp"
-              app color="grey lighten-5">
-      <small>eCamp <a v-if="version" :href="versionLink" target="_blank">
-        {{ version }}
-      </a> <span class="ml-1">{{ deploymentTime }}</span></small>
+    <v-footer v-if="$vuetify.breakpoint.smAndUp" app color="grey lighten-5">
+      <small>eCamp
+        <a v-if="version" :href="versionLink" target="_blank">
+          {{ version }}
+        </a>
+        <span class="ml-1">{{ deploymentTime }}</span></small>
       <v-spacer />
       <language-switcher />
     </v-footer>
@@ -42,15 +43,19 @@ export default {
       return window.environment.VERSION || ''
     },
     versionLink () {
-      return parseTemplate(window.environment.VERSION_LINK_TEMPLATE).expand({ version: this.version }) || '#'
+      return (
+        parseTemplate(window.environment.VERSION_LINK_TEMPLATE).expand({
+          version: this.version
+        }) || '#'
+      )
     }
   },
   created () {
     this.$store.commit('setLanguage', this.$store.state.lang.language)
   },
   async mounted () {
     if (this.$auth.isLoggedIn()) {
-      this.profile._meta.load.then(profile => {
+      this.profile._meta.load.then((profile) => {
         if (VueI18n.availableLocales.includes(profile.language)) {
           this.$store.commit('setLanguage', profile.language)
         }
@@ -60,101 +65,103 @@ export default {
 }
 </script>
 <style lang="scss">
-  @import "src/scss/global";
-  @import "~@mdi/font/css/materialdesignicons.css";
+@import 'src/scss/global';
+@import '~@mdi/font/css/materialdesignicons.css';
+
+.v-btn.ec-drawer-open,
+.v-btn.ec-drawer-collapse {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}
 
-  .v-btn.ec-drawer-open,
-  .v-btn.ec-drawer-collapse {
-    position: absolute;
-    right: 0;
-    bottom: 0;
+@media #{map-get($display-breakpoints, 'xs-only')} {
+  html,
+  body,
+  .v-application {
+    height: 100%;
   }
 
-  @media #{map-get($display-breakpoints, 'xs-only')}{
-    html,body,.v-application {
-      height: 100%;
-    }
-
-    .v-application--wrap {
-      min-height: 100%!important;
-    }
+  .v-application--wrap {
+    min-height: 100% !important;
   }
+}
 
-  .v-app-bar .v-toolbar__content {
-    padding-left: 0;
-    padding-right: 0;
-    width: 100%;
-  }
+.v-app-bar .v-toolbar__content {
+  padding-left: 0;
+  padding-right: 0;
+  width: 100%;
+}
 
-  .user-nav {
-    border-top-left-radius: 0 !important;
-    border-top-right-radius: 0 !important;
-  }
+.user-nav {
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+}
 
-  .v-btn--open {
-    background: #B0BEC5 !important;
-    color: rgba(0, 0, 0, 0.87) !important;
-  }
+.v-btn--open {
+  background: #b0bec5 !important;
+  color: rgba(0, 0, 0, 0.87) !important;
+}
 
-  .ec-usermenu {
-    border-top-left-radius: 0 !important;
-    border-top-right-radius: 0 !important;
-    right: 0;
-    left: inherit !important;
+.ec-usermenu {
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+  right: 0;
+  left: inherit !important;
 
-    .v-list {
-      border-radius: 0;
-    }
+  .v-list {
+    border-radius: 0;
   }
+}
 
-  .v-app-bar .v-toolbar__content {
-    padding-left: 0;
-    padding-right: 0;
-    width: 100%;
-  }
+.v-app-bar .v-toolbar__content {
+  padding-left: 0;
+  padding-right: 0;
+  width: 100%;
+}
 
-  .v-navigation-drawer__content .v-card {
-    border-top-left-radius: 0 !important;
-    border-top-right-radius: 0 !important;
-  }
+.v-navigation-drawer__content .v-card {
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+}
 
-  @media #{map-get($display-breakpoints, 'xs-only')}{
-    .v-main > .v-main__wrap > .container {
-      min-height: 100%;
-      display: flex;
+@media #{map-get($display-breakpoints, 'xs-only')} {
+  .v-main > .v-main__wrap > .container {
+    min-height: 100%;
+    display: flex;
 
-      .v-card {
-        margin-left: 0 !important;
-        margin-right: 0 !important;
-        flex: auto;
-      }
+    .v-card {
+      margin-left: 0 !important;
+      margin-right: 0 !important;
+      flex: auto;
     }
   }
+}
 
-  .ec-menu-left {
-    left: 0 !important;
-    font-feature-settings: 'tnum';
-  }
+.ec-menu-left {
+  left: 0 !important;
+  font-feature-settings: 'tnum';
+}
 
-  @media #{map-get($display-breakpoints, 'sm-and-down')}{
-    // TODO: this changes look & feel of all v-containers. Do we really want this?
-    .container.container--fluid {
-      padding: 0;
+@media #{map-get($display-breakpoints, 'sm-and-down')} {
+  // TODO: this changes look & feel of all v-containers. Do we really want this?
+  .container.container--fluid {
+    padding: 0;
 
-      & > .v-card {
-        border-radius: 0;
-      }
-    }
-    .sr-only-sm-and-down {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      padding: 0;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap;
-      clip-path: inset(50%);
-      border: 0;
+    & > .v-card {
+      border-radius: 0;
     }
   }
+  .sr-only-sm-and-down {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    clip-path: inset(50%);
+    border: 0;
+  }
+}
 </style>