From 79c64763acac55a74ebe9528a6c07b3acb8284a7 Mon Sep 17 00:00:00 2001
From: Matteo Pagliazzi <matteopagliazzi@gmail.com>
Date: Sat, 25 Jul 2020 18:56:19 +0200
Subject: [PATCH] fix(lint): automatically fix lint warnings

---
 .../notifications/groupTaskApproved.vue       |   2 +-
 .../client/src/components/settings/api.vue    |   4 +-
 .../src/components/tasks/approvalHeader.vue   |   2 +-
 .../tasks/modal-controls/lockableLabel.vue    |   2 +-
 .../tasks/modal-controls/multiList.vue        |  52 ++---
 .../tasks/modal-controls/selectDifficulty.vue |  48 +++--
 .../tasks/modal-controls/selectMulti.vue      | 178 ++++++++++--------
 .../modal-controls/selectTranslatedArray.vue  |  32 ++--
 website/client/src/components/tasks/task.vue  |  13 +-
 .../client/src/components/tasks/taskModal.vue |  89 +++++----
 .../client/src/components/ui/selectList.vue   |  29 +--
 .../src/components/ui/toggleCheckbox.vue      |   8 +-
 .../src/components/userMenu/profile.vue       |   7 +-
 13 files changed, 263 insertions(+), 203 deletions(-)

diff --git a/website/client/src/components/header/notifications/groupTaskApproved.vue b/website/client/src/components/header/notifications/groupTaskApproved.vue
index ad6c93c0f5..7f1d5e984e 100644
--- a/website/client/src/components/header/notifications/groupTaskApproved.vue
+++ b/website/client/src/components/header/notifications/groupTaskApproved.vue
@@ -32,8 +32,8 @@ export default {
   components: {
     BaseNotification,
   },
-  props: ['notification', 'canRemove'],
   mixins: [scoreTask, sync],
+  props: ['notification', 'canRemove'],
   methods: {
     async action () {
       const { task, direction } = this.notification.data;
diff --git a/website/client/src/components/settings/api.vue b/website/client/src/components/settings/api.vue
index 5f8fc47b64..e47c278ba5 100644
--- a/website/client/src/components/settings/api.vue
+++ b/website/client/src/components/settings/api.vue
@@ -91,7 +91,9 @@
               <div
                 class="btn btn-primary checklist-icons"
                 @click="saveWebhook(webhook, index)"
-              > {{ $t('subUpdateTitle') }} </div>
+              >
+                {{ $t('subUpdateTitle') }}
+              </div>
             </td>
           </tr>
           <tr>
diff --git a/website/client/src/components/tasks/approvalHeader.vue b/website/client/src/components/tasks/approvalHeader.vue
index 68f2d906dc..b2dfc08d93 100644
--- a/website/client/src/components/tasks/approvalHeader.vue
+++ b/website/client/src/components/tasks/approvalHeader.vue
@@ -3,7 +3,7 @@
     v-if="message"
     class="claim-top-message d-flex align-content-center"
     :class="{ 'approval-action': userIsAdmin || task.group.approval.approved,
-      'approval-pending': !userIsAdmin && !task.group.approval.approved }"
+              'approval-pending': !userIsAdmin && !task.group.approval.approved }"
   >
     <div
       class="m-auto"
diff --git a/website/client/src/components/tasks/modal-controls/lockableLabel.vue b/website/client/src/components/tasks/modal-controls/lockableLabel.vue
index 482c86fc48..7c3e5f012c 100644
--- a/website/client/src/components/tasks/modal-controls/lockableLabel.vue
+++ b/website/client/src/components/tasks/modal-controls/lockableLabel.vue
@@ -4,11 +4,11 @@
     :class="[{ 'opacity-75': locked }, classOverride]"
   >
     <span
+      v-if="locked"
       v-once
       class="svg-icon lock-icon icon-10 mr-1"
       :class="classOverride ? classOverride : 'gray-200'"
       v-html="icons.lock"
-      v-if="locked"
     >
     </span>
     <label
diff --git a/website/client/src/components/tasks/modal-controls/multiList.vue b/website/client/src/components/tasks/modal-controls/multiList.vue
index 0fdb7dfeca..72ff186b13 100644
--- a/website/client/src/components/tasks/modal-controls/multiList.vue
+++ b/website/client/src/components/tasks/modal-controls/multiList.vue
@@ -4,21 +4,23 @@
     :class="{ 'break': maxItems === 0 }"
   >
     <template v-if="items.length === 0">
-      <div class="items-none">{{ emptyMessage }}</div>
+      <div class="items-none">
+        {{ emptyMessage }}
+      </div>
     </template>
     <template v-else>
       <div
+        v-for="item in truncatedSelectedItems"
         :key="item.id"
         :title="item.name"
         class="multi-item mr-1 d-inline-flex align-items-center"
         :class="{'margin-adjust': maxItems !== 0, 'pill-invert': pillInvert}"
-        v-for="item in truncatedSelectedItems"
 
         @click.stop="removeItem($event, item)"
       >
         <div
-          class="multi-label my-auto ml-75 mr-2"
           v-markdown="item.name"
+          class="multi-label my-auto ml-75 mr-2"
         ></div>
         <div
           class="remove ml-auto mr-75"
@@ -26,10 +28,10 @@
         ></div>
       </div>
       <div
-        class="items-more ml-75"
         v-if="remainingSelectedItems.length > 0"
+        class="items-more ml-75"
       >
-        +{{remainingSelectedItems.length}}
+        +{{ remainingSelectedItems.length }}
       </div>
     </template>
   </div>
@@ -135,6 +137,26 @@ export default {
     markdown: markdownDirective,
   },
   components: {},
+  props: {
+    addNew: {
+      type: Boolean,
+      default: false,
+    },
+    emptyMessage: {
+      type: String,
+    },
+    maxItems: {
+      type: Number,
+      default: 3,
+    },
+    pillInvert: {
+      type: Boolean,
+      default: false,
+    },
+    items: {
+      type: Array,
+    },
+  },
   data () {
     return {
       icons: Object.freeze({
@@ -158,26 +180,6 @@ export default {
       return this.items.slice(this.maxItems);
     },
   },
-  props: {
-    addNew: {
-      type: Boolean,
-      default: false,
-    },
-    emptyMessage: {
-      type: String,
-    },
-    maxItems: {
-      type: Number,
-      default: 3,
-    },
-    pillInvert: {
-      type: Boolean,
-      default: false,
-    },
-    items: {
-      type: Array,
-    },
-  },
   methods: {
     removeItem ($event, item) {
       this.$emit('remove-item', item.id);
diff --git a/website/client/src/components/tasks/modal-controls/selectDifficulty.vue b/website/client/src/components/tasks/modal-controls/selectDifficulty.vue
index 81fb61f59a..c6bc8e8d34 100644
--- a/website/client/src/components/tasks/modal-controls/selectDifficulty.vue
+++ b/website/client/src/components/tasks/modal-controls/selectDifficulty.vue
@@ -1,20 +1,28 @@
 <template>
   <div>
-    <select-list :items="items"
-                 :key-prop="'icon'"
-                 class="difficulty-select"
-                 :class="{disabled: disabled}"
-                 :disabled="disabled"
-                 :value="selected"
-                 @select="$emit('select', $event.value)">
+    <select-list
+      :items="items"
+      :key-prop="'icon'"
+      class="difficulty-select"
+      :class="{disabled: disabled}"
+      :disabled="disabled"
+      :value="selected"
+      @select="$emit('select', $event.value)"
+    >
       <template v-slot:item="{ item, button }">
-        <div v-if="item" class="difficulty-item" :class="{ 'isButton': button }">
+        <div
+          v-if="item"
+          class="difficulty-item"
+          :class="{ 'isButton': button }"
+        >
           <span class="label">{{ item.label }}</span>
 
-          <div class="svg-icon" >
-            <span v-for="n in item.stars"
-                  v-html="icons.difficultyTrivial"
-            :key="n">
+          <div class="svg-icon">
+            <span
+              v-for="n in item.stars"
+              :key="n"
+              v-html="icons.difficultyTrivial"
+            >
 
             </span>
           </div>
@@ -135,6 +143,14 @@ export default {
   components: {
     selectList,
   },
+  props: {
+    disabled: {
+      type: Boolean,
+    },
+    value: {
+      type: Number,
+    },
+  },
   data () {
     const items = [
       {
@@ -170,13 +186,5 @@ export default {
       selected: items.find(i => i.value === this.value),
     };
   },
-  props: {
-    disabled: {
-      type: Boolean,
-    },
-    value: {
-      type: Number,
-    },
-  },
 };
 </script>
diff --git a/website/client/src/components/tasks/modal-controls/selectMulti.vue b/website/client/src/components/tasks/modal-controls/selectMulti.vue
index 767b23b8a5..7614f0ab9a 100644
--- a/website/client/src/components/tasks/modal-controls/selectMulti.vue
+++ b/website/client/src/components/tasks/modal-controls/selectMulti.vue
@@ -1,36 +1,40 @@
 multi<template>
   <div>
     <b-dropdown
+      ref="dropdown"
       class="inline-dropdown select-multi"
+      :toggle-class="isOpened ? 'active' : null"
       @show="wasOpened()"
       @hide="hideCallback($event)"
       @toggle="openOrClose($event)"
-      :toggle-class="isOpened ? 'active' : null"
-      ref="dropdown"
     >
       <b-dropdown-header>
         <div class="mb-2">
-          <b-form-input type="text"
-                        :placeholder="searchPlaceholder"
-                        v-model="search"
-                        @keyup.enter="handleSubmit"
+          <b-form-input
+            v-model="search"
+            type="text"
+            :placeholder="searchPlaceholder"
+            @keyup.enter="handleSubmit"
           />
         </div>
 
-        <multi-list v-if="selectedItems.length > 0"
-                    :add-new="addNew"
-                    :pill-invert="pillInvert"
-                    :items="selectedItemsAsObjects"
-                    @remove-item="removeItem($event)"
-                    :max-items="0" />
-
+        <multi-list
+          v-if="selectedItems.length > 0"
+          :add-new="addNew"
+          :pill-invert="pillInvert"
+          :items="selectedItemsAsObjects"
+          :max-items="0"
+          @remove-item="removeItem($event)"
+        />
       </b-dropdown-header>
       <template v-slot:button-content>
-        <multi-list :items="selectedItemsAsObjects"
-                    :add-new="addNew"
-                    :pill-invert="pillInvert"
-                    :empty-message="emptyMessage"
-                    @remove-item="removeItem($event)"/>
+        <multi-list
+          :items="selectedItemsAsObjects"
+          :add-new="addNew"
+          :pill-invert="pillInvert"
+          :empty-message="emptyMessage"
+          @remove-item="removeItem($event)"
+        />
       </template>
       <div
         v-if="addNew || availableToSelect.length > 0"
@@ -43,20 +47,30 @@ multi<template>
         <b-dropdown-item-button
           v-for="item in availableToSelect"
           :key="item.id"
-          @click.prevent.stop="selectItem(item)"
           class="ignore-hide multi-item"
           :class="{ 'none': item.id === 'none', selectListItem: true }"
+          @click.prevent.stop="selectItem(item)"
         >
-          <div class="label" v-markdown="item.name"></div>
-          <div class="challenge" v-if="item.challenge">{{$t('challenge')}}</div>
+          <div
+            v-markdown="item.name"
+            class="label"
+          ></div>
+          <div
+            v-if="item.challenge"
+            class="challenge"
+          >
+            {{ $t('challenge') }}
+          </div>
         </b-dropdown-item-button>
 
-        <div v-if="addNew" class="hint">
-          {{$t('pressEnterToAddTag', { tagName: search })}}
+        <div
+          v-if="addNew"
+          class="hint"
+        >
+          {{ $t('pressEnterToAddTag', { tagName: search }) }}
         </div>
       </div>
     </b-dropdown>
-
   </div>
 </template>
 
@@ -165,6 +179,28 @@ export default {
   components: {
     MultiList,
   },
+  props: {
+    addNew: {
+      type: Boolean,
+      default: false,
+    },
+    allItems: {
+      type: Array,
+    },
+    emptyMessage: {
+      type: String,
+    },
+    pillInvert: {
+      type: Boolean,
+      default: false,
+    },
+    searchPlaceholder: {
+      type: String,
+    },
+    selectedItems: {
+      type: Array,
+    },
+  },
   data () {
     return {
       preventHide: true,
@@ -173,12 +209,48 @@ export default {
       search: '',
     };
   },
+  computed: {
+    selectedItemsIdList () {
+      return this.selectedItems
+        ? this.selectedItems.map(t => t)
+        : [];
+    },
+    allItemsMap () {
+      const obj = {};
+      this.allItems.forEach(t => {
+        obj[t.id] = t;
+      });
+      return obj;
+    },
+    selectedItemsAsObjects () {
+      return this.selectedItems.map(t => this.allItemsMap[t]);
+    },
+    availableToSelect () {
+      const availableItems = this.allItems.filter(t => !this.selectedItemsIdList.includes(t.id));
+
+      const searchString = this.search.toLowerCase();
+
+      const filteredItems = availableItems.filter(i => i.name.toLowerCase().includes(searchString));
+
+      return filteredItems;
+    },
+  },
+  watch: {
+    selected () {
+      this.$emit('changed', this.selected);
+    },
+  },
   created () {
     document.addEventListener('keyup', this.handleEsc);
   },
   beforeDestroy () {
     document.removeEventListener('keyup', this.handleEsc);
   },
+  mounted () {
+    this.$refs.dropdown.clickOutHandler = () => {
+      this.closeSelectPopup();
+    };
+  },
   methods: {
     closeSelectPopup () {
       this.preventHide = false;
@@ -232,63 +304,5 @@ export default {
       this.search = '';
     },
   },
-  computed: {
-    selectedItemsIdList () {
-      return this.selectedItems
-        ? this.selectedItems.map(t => t)
-        : [];
-    },
-    allItemsMap () {
-      const obj = {};
-      this.allItems.forEach(t => {
-        obj[t.id] = t;
-      });
-      return obj;
-    },
-    selectedItemsAsObjects () {
-      return this.selectedItems.map(t => this.allItemsMap[t]);
-    },
-    availableToSelect () {
-      const availableItems = this.allItems.filter(t => !this.selectedItemsIdList.includes(t.id));
-
-      const searchString = this.search.toLowerCase();
-
-      const filteredItems = availableItems.filter(i => i.name.toLowerCase().includes(searchString));
-
-      return filteredItems;
-    },
-  },
-  props: {
-    addNew: {
-      type: Boolean,
-      default: false,
-    },
-    allItems: {
-      type: Array,
-    },
-    emptyMessage: {
-      type: String,
-    },
-    pillInvert: {
-      type: Boolean,
-      default: false,
-    },
-    searchPlaceholder: {
-      type: String,
-    },
-    selectedItems: {
-      type: Array,
-    },
-  },
-  watch: {
-    selected () {
-      this.$emit('changed', this.selected);
-    },
-  },
-  mounted () {
-    this.$refs.dropdown.clickOutHandler = () => {
-      this.closeSelectPopup();
-    };
-  },
 };
 </script>
diff --git a/website/client/src/components/tasks/modal-controls/selectTranslatedArray.vue b/website/client/src/components/tasks/modal-controls/selectTranslatedArray.vue
index f3e80d64a3..2add616e24 100644
--- a/website/client/src/components/tasks/modal-controls/selectTranslatedArray.vue
+++ b/website/client/src/components/tasks/modal-controls/selectTranslatedArray.vue
@@ -1,11 +1,13 @@
 <template>
   <div>
-    <select-list :items="items"
-                 :value="selected"
-                 class="array-select"
-                 :class="{disabled: disabled}"
-                 :disabled="disabled"
-                 @select="selectItem($event)">
+    <select-list
+      :items="items"
+      :value="selected"
+      class="array-select"
+      :class="{disabled: disabled}"
+      :disabled="disabled"
+      @select="selectItem($event)"
+    >
       <template v-slot:item="{ item }">
         <span class="label">{{ $t(item) }}</span>
       </template>
@@ -50,6 +52,15 @@ export default {
   components: {
     selectList,
   },
+  props: {
+    items: {
+      type: Array,
+    },
+    disabled: {
+      type: Boolean,
+    },
+    value: [String, Number, Object],
+  },
   data () {
     return {
       selected: this.items.find(i => i === this.value),
@@ -61,14 +72,5 @@ export default {
       this.$emit('select', item);
     },
   },
-  props: {
-    items: {
-      type: Array,
-    },
-    disabled: {
-      type: Boolean,
-    },
-    value: [String, Number, Object],
-  },
 };
 </script>
diff --git a/website/client/src/components/tasks/task.vue b/website/client/src/components/tasks/task.vue
index a86c4e0753..094c4f752f 100644
--- a/website/client/src/components/tasks/task.vue
+++ b/website/client/src/components/tasks/task.vue
@@ -3,9 +3,9 @@
     <div
       class="task transition"
       :class="[{
-        'groupTask': task.group.id,
-        'task-not-editable': !teamManagerAccess},
-        `type_${task.type}`
+                 'groupTask': task.group.id,
+                 'task-not-editable': !teamManagerAccess},
+               `type_${task.type}`
       ]"
       @click="castEnd($event, task)"
     >
@@ -187,9 +187,10 @@
                 :class="{open: !task.collapseChecklist}"
                 @click="collapseChecklist(task)"
               >
-                <div v-once
-                     class="svg-icon"
-                     v-html="icons.checklist"
+                <div
+                  v-once
+                  class="svg-icon"
+                  v-html="icons.checklist"
                 ></div>
                 <span>{{ checklistProgress }}</span>
               </div>
diff --git a/website/client/src/components/tasks/taskModal.vue b/website/client/src/components/tasks/taskModal.vue
index aa84dcdf75..6669042b85 100644
--- a/website/client/src/components/tasks/taskModal.vue
+++ b/website/client/src/components/tasks/taskModal.vue
@@ -4,10 +4,10 @@
     :no-close-on-esc="true"
     :no-close-on-backdrop="true"
     size="sm"
+    :hide-footer="true"
     @hidden="onClose()"
     @show="handleOpen()"
     @shown="focusInput()"
-    :hide-footer="true"
   >
     <div
       v-if="task"
@@ -26,9 +26,11 @@
           <button
             class="cancel-task-btn mr-3"
             :class="cssClass('headings')"
-            @click="cancel()"
             type="button"
-          >{{ $t('cancel') }}</button>
+            @click="cancel()"
+          >
+            {{ $t('cancel') }}
+          </button>
           <button
             class="btn btn-secondary d-flex align-items-center justify-content-center"
             :class="{disabled: !canSave}"
@@ -52,7 +54,7 @@
       </div>
       <div class="form-group">
         <lockable-label
-          :classOverride="cssClass('headings')"
+          :class-override="cssClass('headings')"
           :locked="groupAccessRequiredAndOnPersonalPage || challengeAccessRequired"
           :text="`${$t('text')}*`"
         />
@@ -69,8 +71,8 @@
         >
       </div>
       <div
-        class="form-group mb-0"
         v-if="isUserTask || isChallengeTask || isOriginalChallengeTask"
+        class="form-group mb-0"
       >
         <label
           class="d-flex align-items-center justify-content-between mb-1"
@@ -94,11 +96,11 @@
         ></textarea>
       </div>
       <div
-        class="form-group mb-0 mt-3"
         v-if="showManagerNotes"
+        class="form-group mb-0 mt-3"
       >
         <lockable-label
-          :classOverride="cssClass('headings')"
+          :class-override="cssClass('headings')"
           :locked="groupAccessRequiredAndOnPersonalPage"
           :text="$t('managerNotes')"
         />
@@ -143,7 +145,10 @@
           class="option mt-3"
         >
           <div class="form-group">
-            <label v-once class="mb-1">{{ $t('cost') }}</label>
+            <label
+              v-once
+              class="mb-1"
+            >{{ $t('cost') }}</label>
             <div class="input-group">
               <div class="input-group-prepend input-group-icon align-items-center">
                 <div
@@ -167,9 +172,10 @@
           v-if="checklistEnabled"
           class="option mt-3"
         >
-          <checklist :items.sync="task.checklist"
-                     :disableItems="groupAccessRequiredAndOnPersonalPage"
-                     :disableDrag="groupAccessRequiredAndOnPersonalPage"
+          <checklist
+            :items.sync="task.checklist"
+            :disable-items="groupAccessRequiredAndOnPersonalPage"
+            :disable-drag="groupAccessRequiredAndOnPersonalPage"
           />
         </div>
         <div
@@ -243,10 +249,9 @@
           </div>
           <select-difficulty
             :value="task.priority"
-            @select="setDifficulty($event)"
             :disabled="groupAccessRequiredAndOnPersonalPage || challengeAccessRequired"
+            @select="setDifficulty($event)"
           />
-
         </template>
         <div
           v-if="task.type === 'todo' && (task.date
@@ -332,7 +337,6 @@
                   required="required"
                   :disabled="challengeAccessRequired || groupAccessRequiredAndOnPersonalPage"
                 >
-
               </div>
               <div class="input-group-spaced input-group-text">
                 {{ repeatSuffix }}
@@ -352,8 +356,8 @@
             <div class="toggle-group">
               <toggle-checkbox
                 v-for="(day, dayNumber) in ['su','m','t','w','th','f','s']"
-                :tab-index="dayNumber"
                 :key="dayNumber"
+                :tab-index="dayNumber"
                 :checked.sync="task.repeat[day]"
                 :disabled="groupAccessRequiredAndOnPersonalPage || challengeAccessRequired"
                 :text="weekdaysMin(dayNumber)"
@@ -410,14 +414,16 @@
               class="col-12 mb-1"
             >{{ $t('tags') }}</label>
             <div class="col-12">
-              <select-multi :selected-items="task.tags"
-                            :all-items="user.tags"
-                            :add-new="true"
-                            :empty-message="$t('addTags')"
-                            :search-placeholder="$t('enterTag')"
-                            @changed="task.tags = $event"
-                            @addNew="addTag"
-                            ref="selectTag" />
+              <select-multi
+                ref="selectTag"
+                :selected-items="task.tags"
+                :all-items="user.tags"
+                :add-new="true"
+                :empty-message="$t('addTags')"
+                :search-placeholder="$t('enterTag')"
+                @changed="task.tags = $event"
+                @addNew="addTag"
+              />
             </div>
           </div>
         </div>
@@ -446,7 +452,10 @@
             v-if="task.type === 'todo'"
             class="form-group"
           >
-            <label v-once class="mb-1">{{ $t('sharedCompletion') }}</label>
+            <label
+              v-once
+              class="mb-1"
+            >{{ $t('sharedCompletion') }}</label>
             <select-translated-array
               :items="['recurringCompletion', 'singleCompletion', 'allAssignedCompletion']"
               :value="sharedCompletion"
@@ -460,18 +469,21 @@
             >{{ $t('assignedTo') }}</label>
             <div class="col-12">
               <select-multi
+                ref="assignMembers"
                 :all-items="membersNameAndId"
                 :empty-message="$t('unassigned')"
                 :pill-invert="true"
                 :search-placeholder="$t('chooseTeamMember')"
                 :selected-items="assignedMembers"
                 @toggle="toggleAssignment($event)"
-                ref="assignMembers"
               />
             </div>
           </div>
           <div class="form-group flex-group mt-3 mb-4">
-            <label v-once class="mb-0 flex">{{ $t('approvalRequired') }}</label>
+            <label
+              v-once
+              class="mb-0 flex"
+            >{{ $t('approvalRequired') }}</label>
             <toggle-switch
               class="d-inline-block"
               :checked="requiresApproval"
@@ -506,12 +518,15 @@
                 class="option mt-3"
               >
                 <div class="form-group">
-                  <label v-once class="mb-1">{{ $t('restoreStreak') }}</label>
+                  <label
+                    v-once
+                    class="mb-1"
+                  >{{ $t('restoreStreak') }}</label>
                   <div class="input-group">
                     <div class="input-group-prepend streak-addon input-group-icon">
                       <div
-                        class="svg-icon"
                         v-once
+                        class="svg-icon"
                         v-html="icons.streak"
                       ></div>
                     </div>
@@ -531,8 +546,14 @@
                 class="option mt-3"
               >
                 <div class="form-group">
-                  <label v-once class="mb-1">{{ $t('restoreStreak') }}</label>
-                  <div class="row streak-inputs" :class="{'both': task.up && task.down}">
+                  <label
+                    v-once
+                    class="mb-1"
+                  >{{ $t('restoreStreak') }}</label>
+                  <div
+                    class="row streak-inputs"
+                    :class="{'both': task.up && task.down}"
+                  >
                     <div
                       v-if="task.up"
                       class="positive"
@@ -541,8 +562,8 @@
                       <div class="input-group">
                         <div class="input-group-prepend positive-addon input-group-icon">
                           <div
-                            class="svg-icon"
                             v-once
+                            class="svg-icon"
                             v-html="icons.positive"
                           ></div>
                         </div>
@@ -563,8 +584,8 @@
                       <div class="input-group">
                         <div class="input-group-prepend negative-addon input-group-icon">
                           <div
-                            class="svg-icon"
                             v-once
+                            class="svg-icon"
                             v-html="icons.negative"
                           ></div>
                         </div>
@@ -595,8 +616,8 @@
             @click="destroy()"
           >
             <div
-              class="svg-icon"
               v-once
+              class="svg-icon"
               v-html="icons.destroy"
             ></div>
             <span class="delete-text mt-1">
@@ -613,8 +634,8 @@
             class="btn btn-primary btn-footer
             d-flex align-items-center justify-content-center"
             :class="{disabled: !canSave}"
-            @click="submit()"
             type="button"
+            @click="submit()"
           >
             {{ $t('create') }}
           </button>
diff --git a/website/client/src/components/ui/selectList.vue b/website/client/src/components/ui/selectList.vue
index 4c7d938876..7f57027361 100644
--- a/website/client/src/components/ui/selectList.vue
+++ b/website/client/src/components/ui/selectList.vue
@@ -2,13 +2,17 @@
   <div>
     <b-dropdown
       class="inline-dropdown"
-      @show="isOpened = true"
-      @hide="isOpened = false"
       :toggle-class="isOpened ? 'active' : null"
       :disabled="disabled"
+      @show="isOpened = true"
+      @hide="isOpened = false"
     >
       <template v-slot:button-content>
-        <slot name="item" v-bind:item="selected" v-bind:button="true">
+        <slot
+          name="item"
+          :item="selected"
+          :button="true"
+        >
           <!-- Fallback content -->
           {{ value }}
         </slot>
@@ -20,13 +24,16 @@
         :class="{active: item === selected, selectListItem: true}"
         @click="selectItem(item)"
       >
-        <slot name="item" v-bind:item="item" v-bind:button="false">
+        <slot
+          name="item"
+          :item="item"
+          :button="false"
+        >
           <!-- Fallback content -->
           {{ item }}
         </slot>
       </b-dropdown-item>
     </b-dropdown>
-
   </div>
 </template>
 
@@ -37,12 +44,6 @@
 
 <script>
 export default {
-  data () {
-    return {
-      isOpened: false,
-      selected: this.value,
-    };
-  },
   props: {
     items: {
       type: Array,
@@ -58,6 +59,12 @@ export default {
       type: String,
     },
   },
+  data () {
+    return {
+      isOpened: false,
+      selected: this.value,
+    };
+  },
   methods: {
     selectItem (item) {
       this.selected = item;
diff --git a/website/client/src/components/ui/toggleCheckbox.vue b/website/client/src/components/ui/toggleCheckbox.vue
index 992b0eb551..8516ff1c1a 100644
--- a/website/client/src/components/ui/toggleCheckbox.vue
+++ b/website/client/src/components/ui/toggleCheckbox.vue
@@ -1,9 +1,11 @@
 <template>
-  <button class="toggle-checkbox"
+  <button
+    class="toggle-checkbox"
     :class="{checked: isChecked}"
-    @click="isChecked = !isChecked"
     type="button"
-    :disabled="disabled">
+    :disabled="disabled"
+    @click="isChecked = !isChecked"
+  >
     {{ text }}
   </button>
 </template>
diff --git a/website/client/src/components/userMenu/profile.vue b/website/client/src/components/userMenu/profile.vue
index c19758e8ce..2c97a9989e 100644
--- a/website/client/src/components/userMenu/profile.vue
+++ b/website/client/src/components/userMenu/profile.vue
@@ -18,9 +18,10 @@
             v-b-tooltip.hover.left="$t('sendMessage')"
             class="btn btn-secondary message-icon"
           >
-            <div class="svg-icon message-icon"
-                 v-html="icons.message"
-                 v-once
+            <div
+              v-once
+              class="svg-icon message-icon"
+              v-html="icons.message"
             ></div>
           </button>
         </router-link>