LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: Reports filter components (#9204)

Browse Source 
* 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
This commit is contained in:
Sivin Varghese
2024-04-08 16:16:08 +05:30
committed by GitHub
parent aef4b582db
commit 7ae09ce1bf
6 changed files with 201 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/javascript/dashboard/assets/scss/widgets/_base.scss
View File

@@ -63,12 +63,12 @@ input:focus {
}
// Inputs
input[type='text'],
input[type='number'],
input[type='password'],
input[type='date'],
input[type='email'],
input[type='url'] {
input[type='text']:not(.reset-base),
input[type='number']:not(.reset-base),
input[type='password']:not(.reset-base),
input[type='date']:not(.reset-base),
input[type='email']:not(.reset-base),
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] {

26
app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterButton.vue Normal file
View File

@@ -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>

15
app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterDropdownEmptyState.vue Normal file
View File

@@ -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>

45
app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterDropdownSearch.vue Normal file
View File

@@ -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>

73
app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterListDropdown.vue Normal file
View File

@@ -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>

36
app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterListItemButton.vue Normal file
View File

@@ -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>