chore(ui): Fix code formatting

.eslintrc.js

@@ -17,11 +17,11 @@ module.exports = {
     project: resolve(__dirname, './tsconfig.json'),
     tsconfigRootDir: __dirname,
     ecmaVersion: 2019, // Allows for the parsing of modern ECMAScript features
-    sourceType: 'module' // Allows for the use of imports
+    sourceType: 'module', // Allows for the use of imports
   },
 
   env: {
-    browser: true
+    browser: true,
   },
 
   // Rules order is important, please avoid shuffling them
@@ -44,7 +44,7 @@ module.exports = {
 
     // https://github.com/prettier/eslint-config-prettier#installation
     // usage with Prettier, provided by 'eslint-config-prettier'.
-    'prettier', //'plugin:prettier/recommended'
+    'plugin:prettier/recommended'
   ],
 
   plugins: [
@@ -54,10 +54,6 @@ module.exports = {
     // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-file
     // required to lint *.vue files
     'vue',
-
-    // https://github.com/typescript-eslint/typescript-eslint/issues/389#issuecomment-509292674
-    // Prettier has not been included as plugin to avoid performance impact
-    // add it as an extension for your IDE
   ],
 
   // add your custom rules here
@@ -66,10 +62,8 @@ module.exports = {
 
     // TypeScript
     quotes: ['warn', 'single', { avoidEscape: true }],
-    '@typescript-eslint/explicit-function-return-type': 'off',
-    '@typescript-eslint/explicit-module-boundary-types': 'off',
 
     // allow debugger during development only
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-  }
+  },
-}
+};

package.json

@@ -15,7 +15,7 @@
   "main": "src/index.ts",
   "types": "src/api.d.ts",
   "scripts": {
-    "pretty": "prettier --config ./package.json  --write '{,!(node_modules)/**/}*.ts'",
+    "format": "prettier --config ./package.json  --write '{,!(node_modules|backend)/**/}*.{js,ts,vue}'",
     "lint": "eslint --ext .js,.ts,.vue ./src"
   },
   "dependencies": {

src/components/Widget.vue

@@ -2,9 +2,9 @@
   <q-card style="text-align: center">
     <q-card-section class="row justify-center items-center content-center">
       <div class="col-5">
-      <q-icon :name="jobs == 0 ? 'mdi-calendar-blank' : 'mdi-calendar-alert'" :size="divHeight" />
+        <q-icon :name="jobs == 0 ? 'mdi-calendar-blank' : 'mdi-calendar-alert'" :size="divHeight" />
       </div>
-      <div v-if="(jobs || 0) >  0" ref="div" class="col-7">
+      <div v-if="(jobs || 0) > 0" ref="div" class="col-7">
         <div class="text-h6">Anstehende Dienste</div>
         <div class="text-body1">{{ jobs }}</div>
         <div class="text-h6">Nächster Dienst</div>

src/components/management/EditEvent.vue

@@ -140,16 +140,6 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     const store = useEventStore();
-    const startDate = computed(() => {
-      const d = date.buildDate({ milliseconds: 0, seconds: 0, minutes: 0, hours: 0 });
-      if (!props.date || !date.isValid(props.date)) return d;
-      const split = props.date.split('-');
-      return date.adjustDate(d, {
-        year: parseInt(split[0]),
-        month: parseInt(split[1]),
-        date: parseInt(split[2]),
-      });
-    });
 
     const active = ref(0);
     const activeJob = ref<{ validate: () => Promise<boolean> }>();
@@ -166,9 +156,12 @@ export default defineComponent({
       void store.getTemplates();
     });
 
-    watch(props, (n, o) => {
+    watch(
-      if (event.value?.id !== n.modelValue?.id) reset();
+      () => props.modelValue,
-    });
+      (newModelValue) => {
+        if (event.value?.id !== newModelValue?.id) reset();
+      }
+    );
 
     function addJob() {
       if (!activeJob.value) event.value.jobs.push(emptyJob());

src/components/management/EditJobSlot.vue

@@ -57,7 +57,12 @@
       </q-form>
     </q-card-section>
     <q-card-actions>
-      <q-btn label="Schicht löschen" color="negative" :disabled="canDelete" @click="$emit('remove-job')" />
+      <q-btn
+        label="Schicht löschen"
+        color="negative"
+        :disabled="canDelete"
+        @click="$emit('remove-job')"
+      />
     </q-card-actions>
   </q-card>
 </template>
@@ -126,7 +131,7 @@ export default defineComponent({
     }
 
     expose({
-      validate: () => form.value?.validate() || Promise.resolve(true)
+      validate: () => form.value?.validate() || Promise.resolve(true),
     });
 
     return {
@@ -140,7 +145,6 @@ export default defineComponent({
     };
   },
 });
-
 </script>
 
 <style></style>

src/components/management/ManageTypes.vue

@@ -3,14 +3,27 @@
     <q-dialog v-model="dialogOpen">
       <q-card>
         <q-card-section>
-          <div class="text-h6">Editere {{title}} {{ actualType.name }}</div>
+          <div class="text-h6">Editere {{ title }} {{ actualType.name }}</div>
         </q-card-section>
         <q-card-section>
-          <q-input ref="dialogInput" v-model="actualType.name" :rules="rules" dense label="name" filled />
+          <q-input
+            ref="dialogInput"
+            v-model="actualType.name"
+            :rules="rules"
+            dense
+            label="name"
+            filled
+          />
         </q-card-section>
         <q-card-actions>
           <q-btn flat color="danger" label="Abbrechen" @click="discardChanges()" />
-          <q-btn flat color="primary" label="Speichern" :disable="!!dialogInput && !dialogInput.validate()" @click="saveChanges()" />
+          <q-btn
+            flat
+            color="primary"
+            label="Speichern"
+            :disable="!!dialogInput && !dialogInput.validate()"
+            @click="saveChanges()"
+          />
         </q-card-actions>
       </q-card>
     </q-dialog>
@@ -33,11 +46,7 @@
           </template>
           <template #body-cell-actions="props">
             <q-td :props="props" align="right" :auto-width="true">
-              <q-btn
+              <q-btn round icon="mdi-pencil" @click="editType(props.row.id)" />
-                round
-                icon="mdi-pencil"
-                @click="editType(props.row.id)"
-              />
               <q-btn round icon="mdi-delete" @click="deleteType(props.row.id)" />
             </q-td>
           </template>
@@ -56,9 +65,9 @@ import { useQuasar, QInput } from 'quasar';
 export default defineComponent({
   name: 'ManageTypes',
   components: {},
-  props:{
+  props: {
-    type: {type: String as PropType<'EventType' | 'JobType'>, required: true},
+    type: { type: String as PropType<'EventType' | 'JobType'>, required: true },
-    title: {type: String, required: true}
+    title: { type: String, required: true },
   },
   setup(props) {
     const store = useEventStore();
@@ -69,17 +78,16 @@ export default defineComponent({
     const actualType = ref(emptyType);
     const input = ref<QInput>();
     const dialogInput = ref<QInput>();
-    const storeName = computed(() => props.type == 'EventType' ? 'eventTypes' : 'jobTypes')
+    const storeName = computed(() => (props.type == 'EventType' ? 'eventTypes' : 'jobTypes'));
 
     onBeforeMount(async () => await store[`get${props.type}s`]());
 
-    const rows = computed(() => <(FG.EventType|FG.JobType)[]>store[storeName.value]);
+    const rows = computed(() => <(FG.EventType | FG.JobType)[]>store[storeName.value]);
 
     const rules = [
       (s: unknown) => !!s || 'Darf nicht leer sein!',
       (s: string) =>
-        rows.value.find((e) => e.name === s) === undefined ||
+        rows.value.find((e) => e.name === s) === undefined || 'Der Name wird bereits verwendet',
-        'Der Name wird bereits verwendet',
     ];
 
     const columns = [
@@ -100,8 +108,7 @@ export default defineComponent({
 
     function addType() {
       if (input.value === undefined || input.value.validate())
-        store
+        store[`add${props.type}`](actualType.value.name)
-          [`add${props.type}`](actualType.value.name)
           .then(() => {
             actualType.value.name = '';
           })
@@ -121,12 +128,17 @@ export default defineComponent({
 
     function editType(id: number) {
       dialogOpen.value = true;
-      actualType.value = Object.assign({}, rows.value.find((v) => v.id === id));
+      actualType.value = Object.assign(
+        {},
+        rows.value.find((v) => v.id === id)
+      );
     }
 
     function saveChanges() {
       if (dialogInput.value === undefined || dialogInput.value.validate())
-        void store[`rename${props.type}`](actualType.value.id, actualType.value.name).then(() => discardChanges());
+        void store[`rename${props.type}`](actualType.value.id, actualType.value.name).then(() =>
+          discardChanges()
+        );
     }
 
     function discardChanges() {

src/components/management/RecurrenceRule.vue

@@ -63,7 +63,7 @@ export default defineComponent({
     const rule = new Proxy(props.modelValue, {
       get(target, prop) {
         if (typeof prop === 'string') {
-          return ((props.modelValue as unknown) as Record<string, unknown>)[prop];
+          return (props.modelValue as unknown as Record<string, unknown>)[prop];
         }
       },
       set(target, prop, value) {

src/components/overview/ListView.vue

@@ -18,7 +18,7 @@
   </q-dialog>
   <div class="q-pa-md">
     <q-card style="height: 70vh; max-width: 1800px" class="q-pa-md">
-      <div class="scroll" ref="scrollDiv" style="height: 100%">
+      <div ref="scrollDiv" class="scroll" style="height: 100%">
         <q-infinite-scroll :offset="250" @load="load">
           <q-list>
             <q-item id="bbb">

src/pages/EventOverview.vue

@@ -54,10 +54,10 @@ export default defineComponent({
   setup() {
     const quasar = useQuasar();
 
-    const tabs = computed(() => ([
+    const tabs = computed(() => [
       { name: 'listView', label: 'Liste' },
-      { name: 'agendaView', label: 'Kalendar' }
+      { name: 'agendaView', label: 'Kalendar' },
-    ]));
+    ]);
 
     const drawer = ref<boolean>(false);