feat: items-editor (#5)

* format readme

* update logo

* format html

* add logo to docs

* repository for document and document tokens

* add attachments type and repository

* autogenerate types via scripts

* use autogenerated types

* attachment type updates

* add insured and quantity fields for items

* implement HasID interface for entities

* implement label updates for items

* implement service update method

* WIP item update client side actions

* check err on attachment

* finish types for basic items editor

* remove unused var

* house keeping

frontend/components/Form/Checkbox.vue

@@ -0,0 +1,35 @@
+<template>
+  <div v-if="!inline" class="form-control w-full">
+    <label class="label cursor-pointer">
+      <span class="label-text"> {{ label }}</span>
+      <input v-model="value" type="checkbox" class="checkbox" />
+    </label>
+  </div>
+  <div v-else class="label cursor-pointer sm:grid sm:grid-cols-4 sm:items-start sm:gap-4">
+    <label>
+      <span class="label-text">
+        {{ label }}
+      </span>
+    </label>
+    <input v-model="value" type="checkbox" class="checkbox" />
+  </div>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps({
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
+    inline: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: "",
+    },
+  });
+
+  const value = useVModel(props, "modelValue");
+</script>

frontend/components/Form/DatePicker.vue

@@ -52,9 +52,14 @@
 
   const selected = useVModel(props, "modelValue", emit);
   const dateText = computed(() => {
+    if (!validDate(selected.value)) {
+      return "";
+    }
+
     if (selected.value) {
       return selected.value.toLocaleDateString();
     }
+
     return "";
   });
 
@@ -91,9 +96,7 @@
   });
 
   function select(e: MouseEvent, day: Date) {
-    console.log(day);
     selected.value = day;
-    console.log(selected.value);
     // @ts-ignore - this is a vue3 bug
     e.target.blur();
     resetTime();

frontend/components/Form/Multiselect.vue

@@ -17,7 +17,7 @@
           v-for="(obj, idx) in items"
           :key="idx"
           :class="{
-            bordered: selectedIndexes[idx],
+            bordered: selected[idx],
           }"
         >
           <button type="button" @click="toggle(idx)">
@@ -37,10 +37,12 @@
       default: "",
     },
     modelValue: {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       type: Array as () => any[],
       default: null,
     },
     items: {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       type: Array as () => any[],
       required: true,
     },
@@ -54,28 +56,23 @@
     },
   });
 
-  const selectedIndexes = ref<Record<number, boolean>>({});
+  const value = useVModel(props, "modelValue", emit);
+
+  const selected = computed<Record<number, boolean>>(() => {
+    const obj: Record<number, boolean> = {};
+    value.value.forEach(itm => {
+      const idx = props.items.findIndex(item => item[props.name] === itm.name);
+      obj[idx] = true;
+    });
+    return obj;
+  });
 
   function toggle(index: number) {
-    selectedIndexes.value[index] = !selectedIndexes.value[index];
-
     const item = props.items[index];
-
-    if (selectedIndexes.value[index]) {
-      value.value = [...value.value, item];
+    if (selected.value[index]) {
+      value.value = value.value.filter(itm => itm.name !== item.name);
     } else {
-      value.value = value.value.filter(itm => itm !== item);
+      value.value = [...value.value, item];
     }
   }
-
-  watchOnce(
-    () => props.items,
-    () => {
-      if (props.selectFirst && props.items.length > 0) {
-        value.value = props.items[0];
-      }
-    }
-  );
-
-  const value = useVModel(props, "modelValue", emit);
 </script>

frontend/components/Form/Select.vue

@@ -3,9 +3,9 @@
     <label class="label">
       <span class="label-text">{{ label }}</span>
     </label>
-    <select v-model="value" class="select select-bordered">
+    <select v-model="selectedIdx" class="select select-bordered">
       <option disabled selected>Pick one</option>
-      <option v-for="obj in items" :key="name != '' ? obj[name] : obj" :value="obj">
+      <option v-for="(obj, idx) in items" :key="name != '' ? obj[name] : obj" :value="idx">
         {{ name != "" ? obj[name] : obj }}
       </option>
     </select>
@@ -24,10 +24,12 @@
       default: "",
     },
     modelValue: {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       type: Object as any,
       default: null,
     },
     items: {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       type: Array as () => any[],
       required: true,
     },
@@ -45,10 +47,16 @@
     () => props.items,
     () => {
       if (props.selectFirst && props.items.length > 0) {
-        value.value = props.items[0];
+        selectedIdx.value = 0;
       }
     }
   );
 
-  const value = useVModel(props, "modelValue", emit);
+  const selectedIdx = ref(0);
+  watch(
+    () => selectedIdx.value,
+    () => {
+      emit("update:modelValue", props.items[selectedIdx.value]);
+    }
+  );
 </script>

frontend/components/Form/TextArea.vue

@@ -1,9 +1,9 @@
 <template>
-  <div v-if="!inline" class="form-control">
+  <div v-if="!inline" class="form-control w-full">
     <label class="label">
       <span class="label-text">{{ label }}</span>
     </label>
-    <textarea v-model="value" class="textarea textarea-bordered h-24" :placeholder="placeholder" />
+    <textarea ref="el" v-model="value" class="textarea w-full textarea-bordered h-28" :placeholder="placeholder" />
     <label v-if="limit" class="label">
       <span class="label-text-alt"></span>
       <span class="label-text-alt"> {{ valueLen }}/{{ limit }}</span>
@@ -14,10 +14,12 @@
       <span class="label-text">{{ label }}</span>
     </label>
     <textarea
+      ref="el"
       v-model="value"
-      class="textarea textarea-bordered col-span-3 mt-3 h-24"
+      class="textarea textarea-bordered w-full col-span-3 mt-3 h-28"
       auto-grow
       :placeholder="placeholder"
+      auto-height
     />
   </div>
 </template>
@@ -51,6 +53,19 @@
     },
   });
 
+  const el = ref();
+  function setHeight() {
+    el.value.style.height = "auto";
+    el.value.style.height = el.value.scrollHeight + 5 + "px";
+  }
+
+  onUpdated(() => {
+    console.log("updated");
+    if (props.inline) {
+      setHeight();
+    }
+  });
+
   const value = useVModel(props, "modelValue", emit);
   const valueLen = computed(() => {
     return value.value ? value.value.length : 0;