- Masukkan kata kunci pencarian dalam tulisan arab untuk mulai mencari. + Masukkan kata kunci dan mulai pencarian.
+ Apabila pencarian dengan huruf Latin dipilih, kata kunci dapat + berupa kata dalam huruf Latin yang sesuai dengan + + Pedoman Transliterasi Arab-Latin. + +
++ Untuk mempermudah penulisan, beberapa huruf berikut juga dapat + ditulis menggunakan alternatifnya. +
+Secara default, proses pencarian akan mencari kecocokan setiap kata pada kata kunci yang diberikan. Misalnya dengan kata kunci @@ -218,6 +283,7 @@ import AyahOptionsDialog from "src/components/AyahOptionsDialog.vue"; import ToTop from "src/components/ToTop.vue"; import PageScrollPositionHandler from "src/components/PageScrollPositionHandler.vue"; import surahList from "src/data/surah-list"; +import latinAlternatives from "src/data/latin-alternatives"; export default { name: "QuranSearchByAyah", @@ -233,6 +299,15 @@ export default { page: "quran-search-by-ayah", keyword: "", keywordSearch: "", + keywordTypeOptions: [ + { value: "arabic", label: "Arab", icon: "mdi-abjad-arabic" }, + { + value: "latin", + label: "Latin", + icon: "mdi-alphabetical-variant" + } + ], + keywordType: null, specificSurahs: [], specificSurahOptions: surahList, inputFocus: false, @@ -245,7 +320,28 @@ export default { surahName: "", arabic: "", translation: "" - } + }, + latinAlternatives, + latinAlternativeColumns: [ + { + name: "arabic", + field: "arabic", + label: "Huruf Arab", + align: "center" + }, + { + name: "latin", + field: "latin", + label: "Huruf Latin", + align: "center" + }, + { + name: "alternative", + field: "alternative", + label: "Alternatif", + align: "center" + } + ] }; }, meta() { @@ -257,12 +353,18 @@ export default { fullMatchSearch(val) { this.$store.dispatch("quran/setFullMatchSearch", val); this.onSearch(); + }, + keywordType() { + if (!this.init) { + this.keyword = ""; + this.keywordSearch = ""; + this.onSearch(); + } } }, computed: { ...mapGetters({ searchResults: "quran/getSearchAyahResults", - searchResultTranslations: "quran/getSearchAyahResultTranslations", searchPaging: "quran/getSearchAyahPaging" }), isLoadMoreAvailable() { @@ -277,6 +379,9 @@ export default { (this.keywordSearch ? this.keywordSearch + " | " : "") + this.productName ); + }, + latinKeywordSearch() { + return this.keywordType?.value === "latin"; } }, methods: { @@ -302,10 +407,18 @@ export default { }, saveLastKeyword() { LocalStorage.set("search-keyword", this.keywordSearch); + LocalStorage.set("search-keyword-type", this.keywordType); + LocalStorage.set("search-specific-surahs", this.specificSurahs); }, getLastKeyword() { return LocalStorage.getItem("search-keyword"); }, + getLastKeywordType() { + return LocalStorage.getItem("search-keyword-type"); + }, + getLastSpecificSurahs() { + return LocalStorage.getItem("search-specific-surahs"); + }, onSearch() { this.$store.dispatch("quran/resetSearchAyahPaging"); this.$store.dispatch("quran/resetSearchAyahResults"); @@ -316,8 +429,12 @@ export default { this.track(this.pageTitle); this.saveLastKeyword(); + const action = this.latinKeywordSearch + ? "searchByAyahLatin" + : "searchByAyah"; + this.$store - .dispatch("quran/searchByAyah", { + .dispatch(`quran/${action}`, { keyword: this.keywordSearch, page, specificSurahs: this.specificSurahs @@ -341,17 +458,12 @@ export default { } }); }, - getTranslation(verse_key) { - return this.searchResultTranslations.find( - item => item.verse_key == verse_key - )?.text; - }, onOptionClicked(item) { this.ayahOptionsDialogData = { ayahNumber: item.ayahNumber, surahName: item.surahName, arabic: item.text, - translation: this.getTranslation(item.verse_key) + translation: item.translation }; this.showAyahOptionsDialog = true; } @@ -360,15 +472,19 @@ export default { this.track(this.pageTitle); this.fitContentHeight(); - this.$nextTick(() => { - window.scrollTo(0, this.getScrollPosition()); - this.init = false; - }); - if (this.searchResults.length > 0) { + this.keywordType = this.getLastKeywordType(); + this.specificSurahs = this.getLastSpecificSurahs(); this.keywordSearch = this.getLastKeyword(); this.keyword = this.getLastKeyword(); + } else { + this.keywordType = this.keywordTypeOptions[0]; // Arabic as default } + + this.$nextTick(() => { + window.scrollTo(0, this.getScrollPosition()); + this.init = false; + }); } }; diff --git a/src/store/quran/actions.js b/src/store/quran/actions.js index b6f779c..29ee411 100644 --- a/src/store/quran/actions.js +++ b/src/store/quran/actions.js @@ -1,5 +1,9 @@ -import { filterFullMatchSearchResults } from "src/lib/search-helper"; +import { + filterFullMatchSearchResults, + normalizeLatinText +} from "src/lib/search-helper"; import surahList from "src/data/surah-list"; +import createFuzzySearch from "@nozbe/microfuzz"; export async function fetchSurah(context, surahId) { context.commit("showLoading", "fetchSurah"); @@ -140,7 +144,7 @@ export async function searchByAyah( const perPage = context.state.searchAyah.paging.perPage; - return new Promise((resolve, reject) => { + return new Promise(async (resolve, reject) => { this.$httpQuran({ url: "search", params: { @@ -149,7 +153,7 @@ export async function searchByAyah( page: page } }) - .then(res => { + .then(async res => { if (res.status == 204) { context.commit("hideLoading", "searchAyah"); resolve({ @@ -186,31 +190,36 @@ export async function searchByAyah( } } - // Appending surah name, ayah number & translation - for (let i = 0; i < results.length; i++) { - const item = results[i]; - - const verseKeys = item.verse_key.split(":"); - const surah = surahList.find(s => s.id == verseKeys[0]); - results[i].surahId = surah.id; - results[i].surahName = surah.nameSimple; - results[i].ayahNumber = verseKeys[1]; - - this.$httpQuran({ + const fetchTranslation = async verseKey => { + const response = await this.$httpQuran({ url: "quran/translations/33", - params: { - verse_key: item.verse_key - } - }).then(resT => { - context.commit("addSearchAyahResultsTranslation", { - verse_key: item.verse_key, - text: resT.data.translations[0].text - }); + params: { verse_key: verseKey } }); - } + return response.data.translations[0].text; + }; + + // Add surah name, ayah number & translation + // And keep only used properties + results = await Promise.all( + results.map(async item => { + const [surahId, ayahNumber] = item.verse_key.split(":"); + const surah = surahList.find(s => s.id == surahId); + + const translation = await fetchTranslation(item.verse_key); + + return { + verseKey: item.verse_key, + text: item.text, + surahId: parseInt(surahId), + surahName: surah.nameSimple, + ayahNumber: parseInt(ayahNumber), + translation + }; + }) + ); // Sort by surah and ayah number - results = results.sort((a, b) => { + results.sort((a, b) => { if (a.surahId != b.surahId) { return a.surahId - b.surahId; } @@ -232,6 +241,114 @@ export async function searchByAyah( }); } +export async function searchByAyahLatin( + context, + { keyword, page = 1, specificSurahs = [] } +) { + context.commit("showLoading", "searchAyah"); + + const perPage = context.state.searchAyah.paging.perPage; + + return new Promise(async (resolve, reject) => { + // Only fetch the data once + if (page === 1) { + try { + let data = await this.$http + .get(`${document.baseURI}quran-latin.json`) + .then(res => res.data); + + // Filter the result for specific surahs + if (specificSurahs.length) { + data = data.filter(item => { + return specificSurahs.includes(item.surahId); + }); + } + + const normalizedKeyword = normalizeLatinText(keyword); + const strategy = context.state.searchAyah.fullMatch ? "off" : "smart"; + + const fuzzySearch = createFuzzySearch(data, { + key: "latin", + strategy + }); + + const filtered = fuzzySearch(normalizedKeyword); + + context.commit("updateSearchAyahResultsLatinAll", filtered); + } catch (err) { + reject(err); + } + } + + // Simply read the results from the store + const resultsAll = context.state.searchAyah.resultsLatinAll; + + const paging = { + total: resultsAll.length, + perPage: perPage, + totalPage: Math.ceil(resultsAll.length / perPage), + currentPage: page + }; + + // Get the only data for the current page + let results = resultsAll.slice((page - 1) * perPage, page * perPage); + + // Add arab text and translation + const fetchAyahWithTranslation = async verseKey => { + const response = await this.$httpQuran({ + url: "verses/by_key/" + verseKey, + params: { + words: false, + translations: 33, + fields: "text_uthmani" + } + }); + + const verse = response.data.verse; + + return { + text: verse.text_uthmani, + translation: verse.translations[0].text + }; + }; + + results = await Promise.all( + results.map(async itemRaw => { + const item = itemRaw.item; + const verseKey = `${item.surahId}:${item.ayahNumber}`; + const surah = surahList.find(s => s.id == item.surahId); + + const ayah = await fetchAyahWithTranslation(verseKey); + + return { + verseKey, + surahId: parseInt(item.surahId), + surahName: surah.nameSimple, + ayahNumber: parseInt(item.ayahNumber), + text: ayah.text, + translation: ayah.translation + }; + }) + ); + + // Sort by surah and ayah number + results.sort((a, b) => { + if (a.surahId != b.surahId) { + return a.surahId - b.surahId; + } + return a.ayahNumber - b.ayahNumber; + }); + + context.commit("updateSearchAyahPaging", paging); + context.commit("addSearchAyahResults", results); + context.commit("hideLoading", "searchAyah"); + resolve({ + results, + paging + }); + }); +} + export function resetSearchAyahResults(context) { context.commit("resetSearchAyahResults"); } diff --git a/src/store/quran/getters.js b/src/store/quran/getters.js index a95c6c6..0788f6a 100644 --- a/src/store/quran/getters.js +++ b/src/store/quran/getters.js @@ -10,8 +10,8 @@ export function getSearchAyahResults(state) { return state.searchAyah.results; } -export function getSearchAyahResultTranslations(state) { - return state.searchAyah.resultTranslations; +export function getSearchAyahResultsLatinAll(state) { + return state.searchAyah.resultsLatinAll; } export function getSearchAyahPaging(state) { diff --git a/src/store/quran/mutations.js b/src/store/quran/mutations.js index 6738977..0bb6bff 100644 --- a/src/store/quran/mutations.js +++ b/src/store/quran/mutations.js @@ -17,16 +17,17 @@ export function updateSurahWBW(state, surah) { state.surahWBW = surah; } -export function addSearchAyahResults(state, results) { - state.searchAyah.results.push(...results); +export function updateSearchAyahResultsLatinAll(state, results) { + state.searchAyah.resultsLatinAll = results; } -export function addSearchAyahResultsTranslation(state, translation) { - state.searchAyah.resultTranslations.push(translation); +export function addSearchAyahResults(state, results) { + state.searchAyah.results.push(...results); } export function resetSearchAyahResults(state) { state.searchAyah.results = []; + state.searchAyah.resultsLatinAll = []; } export function resetSearchAyahPaging(state) { diff --git a/src/store/quran/state.js b/src/store/quran/state.js index 355d03a..75e258a 100644 --- a/src/store/quran/state.js +++ b/src/store/quran/state.js @@ -20,7 +20,7 @@ export default function() { totalPage: 0 }, results: [], - resultTranslations: [] + resultsLatinAll: [] }, loading: { fetchSurah: false, diff --git a/yarn.lock b/yarn.lock index 5faaeeb..1a60cef 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1008,6 +1008,11 @@ "@nodelib/fs.scandir" "2.1.5" fastq "^1.6.0" +"@nozbe/microfuzz@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@nozbe/microfuzz/-/microfuzz-1.0.0.tgz#89a2b43d3ee9db1979e1144230253c97e838cc6a" + integrity sha512-XKIg/guk+s1tkPTkHch9hfGOWgsKojT7BqSQddXTppOfVr3SWQhhTCqbgQaPTbppf9gc2kFeG0gpBZZ612UXHA== + "@npmcli/fs@^1.0.0": version "1.0.0" resolved "https://registry.npmjs.org/@npmcli/fs/-/fs-1.0.0.tgz"