feat: Reports filter components (#9204)

* feat: Reports filter components

* Update FilterButton.vue

* Update FilterDropdownSearch.vue

* feat: Adds component level search

* Update FilterDropdownSearch.vue

* chore: Set max height

* feat: Add focus

* chore: Uses picoSearch package

app/javascript/dashboard/assets/scss/widgets/_base.scss

@@ -63,12 +63,12 @@ input:focus {
 }
 
 // Inputs
-input[type='text'],
+input[type='text']:not(.reset-base),
-input[type='number'],
+input[type='number']:not(.reset-base),
-input[type='password'],
+input[type='password']:not(.reset-base),
-input[type='date'],
+input[type='date']:not(.reset-base),
-input[type='email'],
+input[type='email']:not(.reset-base),
-input[type='url'] {
+input[type='url']:not(.reset-base) {
   @apply block box-border w-full transition-colors focus:border-woot-500 dark:focus:border-woot-600 duration-[0.25s] ease-[ease-in-out] h-10 appearance-none mx-0 mt-0 mb-4 p-2 rounded-md text-base font-normal bg-white dark:bg-slate-900 focus:bg-white focus:dark:bg-slate-900 text-slate-900 dark:text-slate-100 border border-solid border-slate-200 dark:border-slate-600;
 
   &[disabled] {

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterButton.vue

@@ -0,0 +1,26 @@
+<script setup>
+defineProps({
+  buttonText: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+<template>
+  <button
+    class="inline-flex relative items-center p-1.5 w-fit h-8 gap-1.5 bg-white dark:bg-slate-900 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 active:bg-slate-75 dark:active:bg-slate-800"
+    @click="$emit('click')"
+  >
+    <slot name="leftIcon" />
+    <span
+      v-if="buttonText"
+      class="text-sm font-medium text-slate-900 dark:text-slate-50"
+    >
+      {{ buttonText }}
+    </span>
+    <slot name="rightIcon" />
+    <div v-if="$slots.dropdown" class="absolute right-0 top-10" @click.stop>
+      <slot name="dropdown" />
+    </div>
+  </button>
+</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterDropdownEmptyState.vue

@@ -0,0 +1,15 @@
+<script setup>
+defineProps({
+  message: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+<template>
+  <div
+    class="flex items-center justify-center h-10 text-sm text-slate-500 dark:text-slate-300"
+  >
+    {{ message }}
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterDropdownSearch.vue

@@ -0,0 +1,45 @@
+<script setup>
+defineProps({
+  buttonText: {
+    type: String,
+    default: '',
+  },
+  inputValue: {
+    type: String,
+    default: '',
+  },
+  inputPlaceholder: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+<template>
+  <div
+    class="flex items-center justify-between h-10 min-h-[40px] sticky top-0 bg-white z-10 dark:bg-slate-800 gap-2 px-3 border-b rounded-t-xl border-slate-50 dark:border-slate-700"
+  >
+    <div class="flex items-center gap-2">
+      <fluent-icon
+        icon="search"
+        size="18"
+        class="text-slate-400 dark:text-slate-400"
+      />
+      <input
+        type="text"
+        class="w-full mb-0 text-sm bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-75 reset-base"
+        :placeholder="inputPlaceholder"
+        :value="inputValue"
+        @input="$emit('input', $event.target.value)"
+      />
+    </div>
+    <woot-button
+      size="small"
+      variant="clear"
+      color-scheme="primary"
+      class="!px-1 !py-1.5"
+      @click="$emit('click')"
+    >
+      {{ buttonText }}
+    </woot-button>
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterListDropdown.vue

@@ -0,0 +1,73 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { picoSearch } from '@scmmishra/pico-search';
+import FilterListItemButton from './FilterListItemButton.vue';
+import FilterDropdownSearch from './FilterDropdownSearch.vue';
+import FilterDropdownEmptyState from './FilterDropdownEmptyState.vue';
+
+const props = defineProps({
+  listItems: {
+    type: Array,
+    default: () => [],
+  },
+  enableSearch: {
+    type: Boolean,
+    default: false,
+  },
+  inputButtonText: {
+    type: String,
+    default: '',
+  },
+  emptyListMessage: {
+    type: String,
+    default: '',
+  },
+  inputPlaceholder: {
+    type: String,
+    default: '',
+  },
+});
+
+const searchTerm = ref('');
+
+const onSearch = value => {
+  searchTerm.value = value;
+};
+
+const filteredListItems = computed(() => {
+  if (!searchTerm.value) return props.listItems;
+  return picoSearch(props.listItems, searchTerm.value, ['name']);
+});
+
+const isDropdownListEmpty = computed(() => {
+  return !filteredListItems.value.length;
+});
+</script>
+<template>
+  <div
+    class="z-20 w-40 bg-white border shadow dark:bg-slate-800 rounded-xl border-slate-50 dark:border-slate-700/50 max-h-72"
+  >
+    <slot name="search">
+      <filter-dropdown-search
+        v-if="enableSearch && listItems.length"
+        :button-text="inputButtonText"
+        :input-value="searchTerm"
+        :input-placeholder="inputPlaceholder"
+        @input="onSearch"
+        @click="onSearch('')"
+      />
+    </slot>
+    <slot name="listItem">
+      <filter-dropdown-empty-state
+        v-if="isDropdownListEmpty"
+        :message="emptyListMessage"
+      />
+      <filter-list-item-button
+        v-for="item in filteredListItems"
+        :key="item.id"
+        :button-text="item.name"
+        @click="$emit('click', item)"
+      />
+    </slot>
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterListItemButton.vue

@@ -0,0 +1,36 @@
+<script setup>
+defineProps({
+  buttonText: {
+    type: String,
+    default: '',
+  },
+  isActive: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+<template>
+  <button
+    class="relative inline-flex items-center justify-start w-full p-3 border-0 rounded-none first:rounded-t-xl last:rounded-b-xl h-11 hover:bg-slate-50 dark:hover:bg-slate-700 active:bg-slate-75 dark:active:bg-slate-800"
+    @click="$emit('click')"
+    @mouseenter="$emit('mouseenter')"
+    @mouseleave="$emit('mouseleave')"
+    @focus="$emit('focus')"
+  >
+    <div class="inline-flex items-center gap-3 overflow-hidden">
+      <span
+        class="text-sm font-medium truncate text-slate-900 dark:text-slate-50"
+      >
+        {{ buttonText }}
+      </span>
+      <fluent-icon
+        v-if="isActive"
+        icon="checkmark"
+        size="18"
+        class="flex-shrink-0 text-slate-900 dark:text-slate-50"
+      />
+    </div>
+    <slot name="dropdown" />
+  </button>
+</template>