#12 Can read Quran from option (Manzil, Rukuk, and Juz)

feat: start read Quran from option (Manzil, Rukuk, and Juz)

src/components/QuranSajdaCard.vue

@@ -1,5 +1,5 @@
 <template>
-<router-link class="cursor-default sm:cursor-pointer" :to="{name: 'QuranAyatDetail', query:{ sn: sajda.surat, an: sajda.ayat}}">
+<router-link class="cursor-default sm:cursor-pointer" :to="{name: 'QuranAyatDetail', query:{ sn: sajda.surat, an: sajda.ayat, sajda: true}}">
 
    <div class="bg-white select-none shadow-sm relative overflow-hidden hover:shadow-xl font-quran group transition sm:cursor-pointer flex flex-col max-h-48 w-full max-w-md h-full mx-auto mb-2 rounded-md p-5">
      <div :class="[sajda.recommended ? 'bg-pink-200': 'bg-green-200']" class="absolute -left-10 -top-5 w-64 h-64 rounded-r-full bg-opacity-25">

src/store/index.js

@@ -5,6 +5,7 @@ import juz from "./modules/juz";
 import manzil from "./modules/manzil";
 import rukuk from "./modules/rukuk";
 import ayat from "./modules/ayat";
+import filterAyat from "./modules/filterAyat";
 
 export default createStore({
   state: {},
@@ -17,5 +18,6 @@ export default createStore({
     manzil,
     rukuk,
     ayat,
+    filterAyat,
   },
 });

src/store/modules/filterAyat.js

@@ -0,0 +1,99 @@
+import { firestore } from "../../service/firebase";
+
+const ayatFilter = {
+  namespaced: true,
+  state: () => {
+    return {
+      isLoading: false,
+      ayats: [],
+      surat: {},
+      last_ayat: {},
+    };
+  },
+  mutations: {
+    SET_IS_LOADING: (state, loading) => (state.isLoading = loading),
+    SET_AYAT: (state, data) => (state.ayats = data),
+    SET_NEXT_AYAT: (state, data) => state.ayats.push(...data),
+    SET_LAST_AYAT: (state, data) => (state.last_ayat = data),
+    SET_SURAT: (state, data) => (state.surat = data),
+  },
+  actions: {
+    setAyatDetail({ commit, dispatch }, payload) {
+      commit("SET_IS_LOADING", true);
+
+      firestore
+        .collection("ayah_collections")
+        .where("sura_id", "==", parseInt(payload.surat))
+        .where("aya_number", "==", parseInt(payload.ayat))
+        .get()
+        .then((aya) => {
+          if (aya.docs.length > 0) {
+            var initialAyat = aya.docs[0];
+
+            firestore
+              .collection("ayah_collections")
+              .orderBy("aya_id", "asc")
+              .startAt(initialAyat)
+              .limit(25)
+              .get()
+              .then((ayats) => {
+                var lastVisible = ayats.docs[ayats.docs.length - 1];
+                dispatch("setLastAyat", lastVisible);
+
+                let dataAyah = [];
+
+                ayats.forEach((ayat) => {
+                  dataAyah.push(ayat.data());
+                });
+
+                commit("SET_AYAT", dataAyah);
+                commit("SET_IS_LOADING", false);
+              });
+          }
+        });
+    },
+
+    setSuratDetail({ commit, dispatch }, payload) {
+      commit("SET_IS_LOADING", true);
+
+      firestore
+        .collection("surah_collections")
+        .doc(payload.surat.toString())
+        .get()
+        .then((doc) => {
+          if (doc.exists) {
+            const surat_detail = doc.data();
+
+            commit("SET_SURAT", surat_detail);
+            dispatch("setAyatDetail", payload);
+            commit("SET_IS_LOADING", false);
+          }
+        });
+    },
+    nextAyat({ commit, dispatch, state }) {
+      var next = firestore
+        .collection("ayah_collections")
+        .orderBy("aya_id", "asc")
+        .startAfter(state.last_ayat)
+        .limit(25);
+
+      next.get().then((doc) => {
+        var lastVisible = doc.docs[doc.docs.length - 1];
+        dispatch("setLastAyat", lastVisible);
+
+        let tempData = [];
+
+        doc.forEach((ayat) => {
+          tempData.push(ayat.data());
+        });
+
+        commit("SET_NEXT_AYAT", tempData);
+      });
+    },
+    setLastAyat({ commit }, payload) {
+      commit("SET_LAST_AYAT", payload);
+    },
+  },
+};
+
+export default ayatFilter;

src/store/modules/surah.js

@@ -21,9 +21,7 @@ const surah = {
     SET_AYAH_PAGINATE: (state, data) => (state.ayahsPagination = data),
     SET_AYAH_FIRSTV: (state, data) => (state.firstAyahVisible = data),
     SET_AYAH_LASTV: (state, data) => (state.lastAyahVisible = data),
-    SET_NEXT_AYAH: (state, data) => {
-      state.ayahs.push(...data);
-    },
+    SET_NEXT_AYAH: (state, data) => state.ayahs.push(...data),
   },
   actions: {
     async setSurahs({ commit }) {

src/views/QuranAyatDetail.vue

@@ -44,7 +44,18 @@
             <div class="font-quran text-center mb-2 text-xl font-semibold">بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ</div>
             <p class="text-center text-sm text-gray-600">Dengan nama Allah Yang Maha Pengasih, Maha Penyayang.</p>
         </div>
-        <QuranAyatCard  :ayat="ayats"/>
+         <div v-if="$route.query.sajda=== 'true'">
+            <QuranAyatCard :ayat="ayat"/>
+         </div>
+         <div v-else>
+            <QuranAyatCard v-for="ayat in ayats" :key="ayat.aya_id"  :ayat="ayat"/>
+         </div>
+     </div>
+     <div v-if="$route.query.sajda != 'true'" class="flex items-center my-4 justify-center">
+        <button @click="nextAyat" class="py-2 px-3 inline-flex items-center space-x-2 transition rounded-lg bg-green-500 hover:bg-green-600 text-gray-100 focus:ring-1 focus:ring-green-500 focus:outline-none"><span>Selanjutnya</span> <span><svg class="w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+         <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
+         </svg></span> 
+      </button>
      </div>
    </section>
     <p class="text-center text-sm py-5 text-gray-700">From ExoApp &copy;{{new Date().getFullYear()}} All right reserved</p> 
@@ -75,8 +86,11 @@ export default {
 
       const state = reactive({
          isProcess: computed(()=> store.state.surah.isLoading),
-         surah: computed(()=> store.state.ayat.surat_detail),
-         ayats: computed(()=> store.state.ayat.ayat_detail)
+         surah: route.query.sajda === 'true' 
+         ? computed(()=> store.state.ayat.surat_detail)
+         : computed(()=> store.state.filterAyat.surat),
+         ayats: [],
+         ayat: {}
       })
 
       onMounted( async ()=>{ 
@@ -88,7 +102,14 @@ export default {
             surat:route.query.sn,
             ayat: route.query.an
          }
-         await store.dispatch('ayat/setSuratDetail', payload);
+
+         if (route.query.sajda === 'true') {
+            await store.dispatch('ayat/setSuratDetail', payload);
+            state.ayat = computed(()=> store.state.ayat.ayat_detail);
+         }else{
+            await store.dispatch('filterAyat/setSuratDetail', payload);
+            state.ayats = computed(()=> store.state.filterAyat.ayats);
+         }
       }
 
       const convertToArab = (str) => {
@@ -107,6 +128,10 @@ export default {
          router.back();
       }
 
+       const nextAyat = async ()=>{
+          await store.dispatch('filterAyat/nextAyat');
+       }
+
       const pageUp = ref(null)
       const scrollToPageUp = () => {
          pageUp.value.scrollIntoView({behavior: 'smooth'});
@@ -118,6 +143,7 @@ export default {
          pageUp,
          scrollToPageUp,
          convertToArab,
+         nextAyat,
          back
       }
    }