frontend: cleanup

* dummy commit

* cleanup workflows

* setup and run eslint

* add linter to CI

* use eslint for formatting

* reorder rules

* drop editor config

frontend/components/Form/DatePicker.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="dropdown dropdown-end w-full" ref="label">
-    <FormTextField tabindex="0" label="Date" v-model="dateText" :inline="inline" readonly />
-    <div @blur="resetTime" tabindex="0" class="mt-1 card compact dropdown-content shadow bg-base-100 rounded-box w-64">
+  <div ref="label" class="dropdown dropdown-end w-full">
+    <FormTextField v-model="dateText" tabindex="0" label="Date" :inline="inline" readonly />
+    <div tabindex="0" class="mt-1 card compact dropdown-content shadow bg-base-100 rounded-box w-64" @blur="resetTime">
       <div class="card-body">
         <div class="flex justify-between items-center">
           <button class="btn btn-xs" @click="prevMonth">
@@ -13,7 +13,7 @@
           </button>
         </div>
         <div class="grid grid-cols-7 gap-2">
-          <div v-for="d in daysIdx">
+          <div v-for="d in daysIdx" :key="d">
             <p class="text-center">
               {{ d }}
             </p>
@@ -21,12 +21,13 @@
           <template v-for="day in days">
             <button
               v-if="day.number != ''"
+              :key="day.number"
               class="text-center btn-xs btn btn-outline"
               @click="select($event, day.date)"
             >
               {{ day.number }}
             </button>
-            <div v-else></div>
+            <div v-else :key="`${day.number}-empty`"></div>
           </template>
         </div>
       </div>
@@ -35,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-  const emit = defineEmits(['update:modelValue', 'update:text']);
+  const emit = defineEmits(["update:modelValue", "update:text"]);
 
   const props = defineProps({
     modelValue: {
@@ -49,12 +50,12 @@
     },
   });
 
-  const selected = useVModel(props, 'modelValue', emit);
+  const selected = useVModel(props, "modelValue", emit);
   const dateText = computed(() => {
     if (selected.value) {
       return selected.value.toLocaleDateString();
     }
-    return '';
+    return "";
   });
 
   const time = ref(new Date());
@@ -68,7 +69,7 @@
   });
 
   const month = computed(() => {
-    return time.value.toLocaleString('default', { month: 'long' });
+    return time.value.toLocaleString("default", { month: "long" });
   });
 
   const year = computed(() => {
@@ -86,14 +87,14 @@
   }
 
   const daysIdx = computed(() => {
-    return ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+    return ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
   });
 
   function select(e: MouseEvent, day: Date) {
     console.log(day);
     selected.value = day;
     console.log(selected.value);
-    // @ts-ignore
+    // @ts-ignore - this is a vue3 bug
     e.target.blur();
     resetTime();
   }
@@ -116,7 +117,7 @@
 
     for (let i = 0; i < firstDay; i++) {
       days.push({
-        number: '',
+        number: "",
         date: new Date(),
       });
     }

frontend/components/Form/Multiselect.vue

@@ -1,11 +1,13 @@
 <template>
-  <div class="form-control w-full" ref="menu">
+  <div ref="menu" class="form-control w-full">
     <label class="label">
       <span class="label-text">{{ label }}</span>
     </label>
     <div class="dropdown dropdown-top sm:dropdown-end">
       <div tabindex="0" class="w-full min-h-[48px] flex gap-2 p-4 flex-wrap border border-gray-400 rounded-lg">
-        <span class="badge" v-for="itm in value"> {{ name != '' ? itm[name] : itm }} </span>
+        <span v-for="itm in value" :key="name != '' ? itm[name] : itm" class="badge">
+          {{ name != "" ? itm[name] : itm }}
+        </span>
       </div>
       <ul
         tabindex="0"
@@ -13,12 +15,13 @@
       >
         <li
           v-for="(obj, idx) in items"
+          :key="idx"
           :class="{
             bordered: selectedIndexes[idx],
           }"
         >
           <button type="button" @click="toggle(idx)">
-            {{ name != '' ? obj[name] : obj }}
+            {{ name != "" ? obj[name] : obj }}
           </button>
         </li>
       </ul>
@@ -27,11 +30,11 @@
 </template>
 
 <script lang="ts" setup>
-  const emit = defineEmits(['update:modelValue']);
+  const emit = defineEmits(["update:modelValue"]);
   const props = defineProps({
     label: {
       type: String,
-      default: '',
+      default: "",
     },
     modelValue: {
       type: Array as () => any[],
@@ -43,7 +46,7 @@
     },
     name: {
       type: String,
-      default: 'name',
+      default: "name",
     },
     selectFirst: {
       type: Boolean,
@@ -74,5 +77,5 @@
     }
   );
 
-  const value = useVModel(props, 'modelValue', emit);
+  const value = useVModel(props, "modelValue", emit);
 </script>

frontend/components/Form/Select.vue

@@ -3,10 +3,10 @@
     <label class="label">
       <span class="label-text">{{ label }}</span>
     </label>
-    <select class="select select-bordered" v-model="value">
+    <select v-model="value" class="select select-bordered">
       <option disabled selected>Pick one</option>
-      <option v-for="obj in items" :value="obj">
-        {{ name != '' ? obj[name] : obj }}
+      <option v-for="obj in items" :key="name != '' ? obj[name] : obj" :value="obj">
+        {{ name != "" ? obj[name] : obj }}
       </option>
     </select>
     <!-- <label class="label">
@@ -17,11 +17,11 @@
 </template>
 
 <script lang="ts" setup>
-  const emit = defineEmits(['update:modelValue']);
+  const emit = defineEmits(["update:modelValue"]);
   const props = defineProps({
     label: {
       type: String,
-      default: '',
+      default: "",
     },
     modelValue: {
       type: Object as any,
@@ -33,7 +33,7 @@
     },
     name: {
       type: String,
-      default: 'name',
+      default: "name",
     },
     selectFirst: {
       type: Boolean,
@@ -50,5 +50,5 @@
     }
   );
 
-  const value = useVModel(props, 'modelValue', emit);
+  const value = useVModel(props, "modelValue", emit);
 </script>

frontend/components/Form/TextArea.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="form-control" v-if="!inline">
+  <div v-if="!inline" class="form-control">
     <label class="label">
       <span class="label-text">{{ label }}</span>
     </label>
-    <textarea class="textarea textarea-bordered h-24" v-model="value" :placeholder="placeholder" />
+    <textarea v-model="value" class="textarea textarea-bordered h-24" :placeholder="placeholder" />
     <label v-if="limit" class="label">
       <span class="label-text-alt"></span>
       <span class="label-text-alt"> {{ valueLen }}/{{ limit }}</span>
@@ -13,12 +13,17 @@
     <label class="label">
       <span class="label-text">{{ label }}</span>
     </label>
-    <textarea class="textarea textarea-bordered col-span-3 mt-3 h-24" auto-grow v-model="value" :placeholder="placeholder" />
+    <textarea
+      v-model="value"
+      class="textarea textarea-bordered col-span-3 mt-3 h-24"
+      auto-grow
+      :placeholder="placeholder"
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
-  const emit = defineEmits(['update:modelValue']);
+  const emit = defineEmits(["update:modelValue"]);
   const props = defineProps({
     modelValue: {
       type: [String],
@@ -30,7 +35,7 @@
     },
     type: {
       type: String,
-      default: 'text',
+      default: "text",
     },
     limit: {
       type: [Number, String],
@@ -38,7 +43,7 @@
     },
     placeholder: {
       type: String,
-      default: '',
+      default: "",
     },
     inline: {
       type: Boolean,
@@ -46,7 +51,7 @@
     },
   });
 
-  const value = useVModel(props, 'modelValue', emit);
+  const value = useVModel(props, "modelValue", emit);
   const valueLen = computed(() => {
     return value.value ? value.value.length : 0;
   });

frontend/components/Form/TextField.vue

@@ -3,13 +3,13 @@
     <label class="label">
       <span class="label-text">{{ label }}</span>
     </label>
-    <input ref="input" :type="type" v-model="value" class="input input-bordered w-full" />
+    <input ref="input" v-model="value" :type="type" class="input input-bordered w-full" />
   </div>
   <div v-else class="sm:grid sm:grid-cols-4 sm:items-start sm:gap-4">
     <label class="label">
       <span class="label-text">{{ label }}</span>
     </label>
-    <input class="input input-bordered col-span-3 w-full mt-2" v-model="value" />
+    <input v-model="value" class="input input-bordered col-span-3 w-full mt-2" />
   </div>
 </template>
 
@@ -17,7 +17,7 @@
   const props = defineProps({
     label: {
       type: String,
-      default: '',
+      default: "",
     },
     modelValue: {
       type: [String, Number],
@@ -25,7 +25,7 @@
     },
     type: {
       type: String,
-      default: 'text',
+      default: "text",
     },
     triggerFocus: {
       type: Boolean,
@@ -48,5 +48,5 @@
     }
   );
 
-  const value = useVModel(props, 'modelValue');
+  const value = useVModel(props, "modelValue");
 </script>