From bdc57f0188fa5ab6559a73f0e7e9e6c21fed30b5 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 26 Jul 2022 15:44:21 +0530
Subject: [PATCH] feat(gui-v2): search component layout

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-toolbar/SearchData.vue         | 37 +++++++++++++++++++
 .../components/smartsheet/Toolbar.vue         |  3 +-
 2 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
new file mode 100644
index 0000000000..0ad8bf0d87
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { MetaInj } from '~/context'
+
+const { modelValue, field } = defineProps<{
+  modelValue?: string
+  field?: any
+}>()
+
+const emit = defineEmits(['update:modelValue', 'update:field'])
+
+const localValue = computed({
+  get: () => modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+const localField = computed({
+  get: () => field,
+  set: (val) => emit('update:field', val),
+})
+
+const meta = inject(MetaInj)
+const columns = computed(() =>
+  meta?.value?.columns?.map((c) => ({
+    value: c.id,
+    label: c.title,
+  })),
+)
+</script>
+
+<template>
+  <a-input-search v-model:value="localValue" class="max-w-[250px]">
+    <template #addonBefore>
+      <a-select v-model:value="localField" :options="columns" style="width: 100px" class="!text-xs" />
+    </template>
+  </a-input-search>
+</template>
+
+<style scoped></style>
diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
index 5d1c7ed5da..69d5ec5689 100644
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div dense class="nc-table-toolbar w-100 p-1 flex gap-1" style="z-index: 7">
+  <div dense class="nc-table-toolbar w-100 p-1 flex gap-1 align-center" style="z-index: 7">
+    <SmartsheetToolbarSearchData class="flex-shrink" />
     <SmartsheetToolbarFieldsMenu :show-system-fields="false" />
     <SmartsheetToolbarColumnFilterMenu />
     <SmartsheetToolbarSortListMenu />