stuff

frontend/components/Form/Multiselect.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="form-control w-full" ref="menu">
+    <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>
+      </div>
+      <ul
+        tabindex="0"
+        class="dropdown-content mb-1 menu shadow border border-gray-400 rounded bg-base-100 w-full z-[9999] max-h-96 overflow-y-scroll scroll-bar"
+      >
+        <li
+          v-for="(obj, idx) in items"
+          :class="{
+            bordered: selectedIndexes[idx],
+          }"
+        >
+          <button type="button" @click="toggle(idx)">
+            {{ name != '' ? obj[name] : obj }}
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  const emit = defineEmits(['update:modelValue']);
+  const props = defineProps({
+    label: {
+      type: String,
+      default: '',
+    },
+    modelValue: {
+      type: Array as () => any[],
+      default: null,
+    },
+    items: {
+      type: Array as () => any[],
+      required: true,
+    },
+    name: {
+      type: String,
+      default: 'name',
+    },
+    selectFirst: {
+      type: Boolean,
+      default: false,
+    },
+  });
+
+  const selectedIndexes = ref<Record<number, boolean>>({});
+
+  function toggle(index: number) {
+    selectedIndexes.value[index] = !selectedIndexes.value[index];
+
+    const item = props.items[index];
+
+    if (selectedIndexes.value[index]) {
+      console.log(value);
+      value.value = [...value.value, item];
+    } else {
+      console.log(value);
+      value.value = value.value.filter(itm => itm !== 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

@@ -0,0 +1,54 @@
+<template>
+  <div class="form-control w-full">
+    <label class="label">
+      <span class="label-text">{{ label }}</span>
+    </label>
+    <select class="select select-bordered" v-model="value">
+      <option disabled selected>Pick one</option>
+      <option v-for="obj in items" :value="obj">
+        {{ name != '' ? obj[name] : obj }}
+      </option>
+    </select>
+    <!-- <label class="label">
+      <span class="label-text-alt">Alt label</span>
+      <span class="label-text-alt">Alt label</span>
+    </label> -->
+  </div>
+</template>
+
+<script lang="ts" setup>
+  const emit = defineEmits(['update:modelValue']);
+  const props = defineProps({
+    label: {
+      type: String,
+      default: '',
+    },
+    modelValue: {
+      type: Object as any,
+      default: null,
+    },
+    items: {
+      type: Array as () => any[],
+      required: true,
+    },
+    name: {
+      type: String,
+      default: 'name',
+    },
+    selectFirst: {
+      type: Boolean,
+      default: false,
+    },
+  });
+
+  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/TextArea.vue

@@ -0,0 +1,45 @@
+<template>
+  <div 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" />
+    <label v-if="limit" class="label">
+      <span class="label-text-alt"></span>
+      <span class="label-text-alt"> {{ valueLen }}/{{ limit }}</span>
+    </label>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  const emit = defineEmits(['update:modelValue']);
+  const props = defineProps({
+    modelValue: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    type: {
+      type: String,
+      default: 'text',
+    },
+    limit: {
+      type: [Number, String],
+      default: null,
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+  });
+
+  const value = useVModel(props, 'modelValue', emit);
+  const valueLen = computed(() => {
+    console.log(value.value.length);
+
+    return value.value ? value.value.length : 0;
+  });
+</script>

frontend/components/Form/TextField.vue

@@ -9,13 +9,13 @@
 
 <script lang="ts" setup>
   const props = defineProps({
-    modelValue: {
-      type: String,
-      required: true,
-    },
     label: {
       type: String,
-      required: true,
+      default: '',
+    },
+    modelValue: {
+      type: String,
+      default: null,
     },
     type: {
       type: String,