feat: add workflow template fields (#63)

* feat: add type detail

* feat: option => agencies type

* feat: agencies i18n

* fix: workflow => add institution type

* refactor: map option specific category, key

* feat: select menu with search components

* feat: workflow => add field step description & agencies

* fix: workflow => table page

* refactor: workflow => floating dialog submit

---------

Co-authored-by: Methapon Metanipat <methapon@frappet.com>

src/components/shared/SelectMenuWithSearch.vue

@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    readonly?: boolean;
+
+    title?: string;
+    width?: string;
+    offset?: number[];
+
+    option: Record<string, unknown>[];
+    optionLabel?: string;
+  }>(),
+  {
+    readonly: false,
+    option: () => [],
+    optionLabel: 'label',
+    offset: () => [0, 12],
+  },
+);
+
+const inputSearch = ref('');
+
+defineEmits<{
+  (e: 'search', value: string | number | null): void;
+  (e: 'select', value: Record<string, unknown>): void;
+  (e: 'hide'): void;
+  (e: 'show'): void;
+  (e: 'beforeHide'): void;
+  (e: 'beforeShow'): void;
+}>();
+</script>
+<template>
+  <q-menu
+    v-if="!readonly"
+    :offset
+    class="bordered"
+    :style="`width: ${width}`"
+    @show="$emit('show')"
+    @hide="$emit('hide')"
+    @before-show="
+      () => {
+        inputSearch = '';
+        $emit('beforeShow');
+      }
+    "
+    @before-hide="$emit('beforeHide')"
+  >
+    <div
+      v-if="title"
+      class="column no-padding"
+      style="padding: 16px !important"
+    >
+      <span class="text-weight-bold q-pb-sm">
+        {{ title }}
+      </span>
+
+      <q-input
+        for="input-search"
+        outlined
+        dense
+        :label="$t('general.search')"
+        class="col responsible-search"
+        :bg-color="$q.dark.isActive ? 'dark' : 'white'"
+        v-model="inputSearch"
+        debounce="200"
+        @update:model-value="(val) => $emit('search', val)"
+      >
+        <template #prepend>
+          <q-icon name="mdi-magnify" />
+        </template>
+      </q-input>
+    </div>
+
+    <template v-if="$slots.prepend">
+      <slot name="prepend"></slot>
+    </template>
+
+    <span v-if="option.length === 0">
+      <q-item dense class="flex items-center app-text-muted">
+        {{ $t('general.noData') }}
+      </q-item>
+    </span>
+    <template v-if="option.length > 0">
+      <q-item
+        v-for="(opt, i) in option"
+        dense
+        :key="i"
+        class="flex items-center"
+        clickable
+        @click.stop="$emit('select', opt)"
+      >
+        <template v-if="$slots.option">
+          <slot name="option" :opt="opt"></slot>
+        </template>
+
+        <span v-if="!$slots.option" class="row items-center">
+          {{ opt.label }}
+        </span>
+      </q-item>
+    </template>
+  </q-menu>
+</template>
+<style scoped></style>