mirror of
https://github.com/frappe/books.git
synced 2024-12-24 11:55:46 +00:00
fix: Searchbar
- Use Dropdown in Searchbar - Doctypes and Reports searchable
This commit is contained in:
Faris Ansari
parent
f975446801
commit
bddc6bc6e5
@ -1,164 +1,112 @@
|
||||
<template>
|
||||
<div v-on-outside-click="clearInput" class="relative">
|
||||
<div class="rounded-6px relative flex items-center overflow-hidden">
|
||||
<Dropdown :items="suggestions" class="text-sm h-full">
|
||||
<template
|
||||
v-slot="{
|
||||
toggleDropdown,
|
||||
highlightItemUp,
|
||||
highlightItemDown,
|
||||
selectHighlightedItem
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="rounded-6px relative flex items-center overflow-hidden h-full"
|
||||
>
|
||||
<div class="absolute flex justify-center w-8">
|
||||
<SearchIcon class="w-3 h-3 stroke-current text-gray-600" />
|
||||
<feather-icon name="search" class="w-3 h-3 text-gray-800" />
|
||||
</div>
|
||||
<input
|
||||
type="search"
|
||||
class="bg-gray-200 text-sm p-1 pl-8 focus:outline-none"
|
||||
@click="focus(0)"
|
||||
@keydown.down="navigate('down')"
|
||||
@keydown.up="navigate('up')"
|
||||
class="bg-gray-200 text-sm p-1 pl-8 focus:outline-none h-full w-56"
|
||||
placeholder="Search..."
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
v-model="inputValue"
|
||||
@keydown.enter="searchOrSelect"
|
||||
@input="search"
|
||||
ref="input"
|
||||
@focus="$toggleDropdown = toggleDropdown"
|
||||
@keydown.up="highlightItemUp"
|
||||
@keydown.down="highlightItemDown"
|
||||
@keydown.enter="selectHighlightedItem"
|
||||
@keydown.tab="toggleDropdown(false)"
|
||||
@keydown.esc="toggleDropdown(false)"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="inputValue" class="absolute bg-white text-sm rounded shadow-md">
|
||||
<div
|
||||
v-for="(doc, i) in suggestion"
|
||||
:key="i+1"
|
||||
:ref="i+1"
|
||||
:route="doc.route"
|
||||
:class="{ 'border-t uppercase text-xs text-gray-600 mt-3 first:mt-0': doc.seperator, 'bg-gray-200': isFocused(i+1) && !doc.seperator }"
|
||||
class="px-3 py-2 rounded-lg"
|
||||
@click.native="routeTo(doc.route)"
|
||||
>
|
||||
<div :class="doc.seperator ? 'small' : ''">{{ doc.name }}</div>
|
||||
<!-- <div class="small ml-auto">{{ doc.doctype }}</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import frappe from 'frappejs';
|
||||
import SearchIcon from '@/components/Icons/Search';
|
||||
import Dropdown from '@/components/Dropdown';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
inputValue: '',
|
||||
suggestion: [],
|
||||
currentlyFocused: 0
|
||||
searchList: [],
|
||||
suggestions: [],
|
||||
$toggleDropdown: null
|
||||
};
|
||||
},
|
||||
components: {
|
||||
SearchIcon
|
||||
Dropdown
|
||||
},
|
||||
mounted() {
|
||||
this.makeSearchList();
|
||||
},
|
||||
methods: {
|
||||
focus(key) {
|
||||
this.currentlyFocused = key % (this.suggestion.length + 1);
|
||||
},
|
||||
navigate(dir) {
|
||||
const seperatorIndexes = this.suggestion.map((item, i) => {
|
||||
if (item.seperator) return i;
|
||||
});
|
||||
let nextItem = this.currentlyFocused + (dir === 'up' ? -1 : 1);
|
||||
if (seperatorIndexes.includes(this.currentlyFocused)) {
|
||||
nextItem = this.currentlyFocused + (dir === 'up' ? -2 : 2);
|
||||
}
|
||||
this.focus(nextItem);
|
||||
},
|
||||
isFocused(i) {
|
||||
if (i === this.currentlyFocused) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
async searchOrSelect() {
|
||||
if (this.currentlyFocused != 0) {
|
||||
this.routeTo(this.$refs[this.currentlyFocused][0].$attrs.route);
|
||||
return;
|
||||
}
|
||||
async search() {
|
||||
this.$toggleDropdown && this.$toggleDropdown(true);
|
||||
|
||||
const searchableDoctypes = frappe.getDoctypeList({
|
||||
isSingle: 0,
|
||||
isChild: 0
|
||||
this.suggestions = this.searchList.filter(d => {
|
||||
let key = this.inputValue.toLowerCase();
|
||||
return d.label.toLowerCase().includes(key);
|
||||
});
|
||||
const documents = await this.getDocuments(searchableDoctypes);
|
||||
const doctypes = this.getDoctypes(searchableDoctypes);
|
||||
const reports = this.getReports();
|
||||
this.suggestion = documents.concat(doctypes).concat(reports);
|
||||
if (this.suggestion.length === 0)
|
||||
this.suggestion = [{ seperator: true, name: 'No results found.' }];
|
||||
|
||||
if (this.suggestions.length === 0) {
|
||||
this.suggestions = [{ label: 'No results found.' }];
|
||||
}
|
||||
},
|
||||
clearInput(e) {
|
||||
this.inputValue = '';
|
||||
this.$emit('change', null);
|
||||
},
|
||||
async getDocuments(searchableDoctypes) {
|
||||
const promises = searchableDoctypes.map(doctype => {
|
||||
return frappe.db.getAll({
|
||||
doctype,
|
||||
filters: {
|
||||
name: ['includes', this.inputValue],
|
||||
keywords: ['like', this.inputValue]
|
||||
makeSearchList() {
|
||||
const doctypes = this.getDoctypes();
|
||||
const reports = this.getReports();
|
||||
|
||||
let searchList = [].concat(doctypes).concat(reports);
|
||||
this.searchList = searchList.map(d => {
|
||||
if (d.route) {
|
||||
d.action = () => this.routeTo(d.route);
|
||||
}
|
||||
return d;
|
||||
});
|
||||
},
|
||||
fields: ['name']
|
||||
getDoctypes() {
|
||||
let doctypes = Object.keys(frappe.models).sort();
|
||||
let doctypeMetas = doctypes.map(doctype => frappe.getMeta(doctype));
|
||||
let searchableDoctypes = doctypeMetas.filter(meta => {
|
||||
return !meta.isSingle && !meta.isChild;
|
||||
});
|
||||
});
|
||||
const data = await Promise.all(promises);
|
||||
// data contains list of documents, sorted according to position of its doctype in searchableDoctypes
|
||||
const items = [];
|
||||
items.push({
|
||||
seperator: true,
|
||||
name: 'Documents'
|
||||
});
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
// i represents doctype position in searchableDoctypes
|
||||
if (data[i].length > 0) {
|
||||
for (let doc of data[i]) {
|
||||
let doctype = searchableDoctypes[i];
|
||||
items.push({
|
||||
doctype,
|
||||
name: doc.name,
|
||||
route: `/edit/${doctype}/${doc.name}`
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
if (items.length !== 1) return items;
|
||||
return [];
|
||||
},
|
||||
getDoctypes(searchableDoctypes) {
|
||||
const items = [{ seperator: true, name: 'Lists' }];
|
||||
let filteredDoctypes = searchableDoctypes.filter(doctype => {
|
||||
return (
|
||||
doctype.toLowerCase().indexOf(this.inputValue.toLowerCase()) != -1
|
||||
);
|
||||
});
|
||||
filteredDoctypes = filteredDoctypes.map(doctype => {
|
||||
var titleCase = doctype.replace(/([A-Z])/g, ' $1');
|
||||
titleCase = titleCase.charAt(0).toUpperCase() + titleCase.slice(1);
|
||||
return searchableDoctypes.map(meta => {
|
||||
return {
|
||||
name: titleCase,
|
||||
route: `/list/${doctype}`
|
||||
label: meta.label || meta.name,
|
||||
route: `/list/${meta.name}`,
|
||||
group: 'List'
|
||||
};
|
||||
});
|
||||
if (filteredDoctypes.length > 0) return items.concat(filteredDoctypes);
|
||||
return [];
|
||||
},
|
||||
getReports() {
|
||||
const items = [{ seperator: true, name: 'Reports' }];
|
||||
let reports = require('../../reports/view');
|
||||
reports = Object.values(reports);
|
||||
let filteredReports = reports.filter(report => {
|
||||
return (
|
||||
report.title.toLowerCase().indexOf(this.inputValue.toLowerCase()) !=
|
||||
-1
|
||||
);
|
||||
});
|
||||
filteredReports = filteredReports.map(report => {
|
||||
return Object.values(reports).map(report => {
|
||||
return {
|
||||
name: report.title,
|
||||
route: `/report/${report.method}`
|
||||
label: report.title,
|
||||
route: `/report/${report.method}`,
|
||||
group: 'Reports'
|
||||
};
|
||||
});
|
||||
if (filteredReports.length > 0) return items.concat(filteredReports);
|
||||
return [];
|
||||
},
|
||||
routeTo(route) {
|
||||
this.$router.push(route);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user