done show surah on content

.gitignore

@@ -31,3 +31,7 @@ yarn-error.log*
 *.ntvs*
 *.njsproj
 *.sln
+
+.quasar-ide-helper
+
+webpack.config.js

package.json

@@ -1,8 +1,8 @@
 {
-  "name": "quasar-electron-vue",
+  "name": "qurann-digital-project",
   "version": "0.0.1",
-  "description": "A Quasar Framework app",
-  "productName": "Quasar App",
+  "description": "Al-Dig, Al - Qura'an Digital",
+  "productName": "Al-Dig, Al - Qura'an Digital",
   "cordovaId": "",
   "capacitorId": "",
   "author": "Efendi Hariyadi <samman.alfariz@gmail.com>",
@@ -31,7 +31,9 @@
     "eslint-plugin-node": "^11.0.0",
     "eslint-plugin-promise": "^4.0.1",
     "eslint-plugin-standard": "^4.0.0",
-    "eslint-plugin-vue": "^6.1.2"
+    "eslint-plugin-vue": "^6.1.2",
+    "numeral-systems": "^2.0.0",
+    "quasar-app-extension-ide-helper": "^1.0.0"
   },
   "engines": {
     "node": ">= 10.18.1",

quasar.conf.js

@@ -57,7 +57,7 @@ module.exports = function (/* ctx */) {
 
       // Quasar plugins
       plugins: [
-        'Meta'
+        'Meta', 'LoadingBar'
       ]
     },
 
@@ -121,9 +121,9 @@ module.exports = function (/* ctx */) {
       workboxPluginMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest'
       workboxOptions: {}, // only for GenerateSW
       manifest: {
-        name: 'Quasar App',
-        short_name: 'Quasar App',
-        description: 'A Quasar Framework app',
+        name: 'Al - Quraan Digital',
+        short_name: 'Al-Dig',
+        description: 'Al - Quraan Digital',
         display: 'standalone',
         orientation: 'portrait',
         background_color: '#ffffff',

quasar.extensions.json

@@ -0,0 +1,5 @@
+{
+  "ide-helper": {
+    "addToGitIgnore": true
+  }
+}

src/http/request/Api.js

@@ -7,5 +7,12 @@ export default {
    */
   getAllSurah () {
     return http.get('/surah')
+  },
+  /**
+   * @param data Object
+   * @returns Promise Object
+   * */
+  selectSurah (data) {
+    return http.get(`/surah/${data.surah_number}`)
   }
 }

src/layouts/MainLayout.vue

@@ -10,9 +10,7 @@
           aria-label="Menu"
           @click="leftDrawerOpen = !leftDrawerOpen"
         />
-
         <q-toolbar-title>
-          <span style="float: right" class="surah-title">بِسْمِ ٱللّٰهِ الرَّحْمٰنِ الرَّحِيْمِ</span>
           Al-Dig (Al-Quran Digital)
         </q-toolbar-title>
 
@@ -35,20 +33,20 @@
         default-opened
         label="Surah (114 surah)">
           <q-list v-for="item in getSurah" :key="item.nomor" bordered>
-          <q-item clickable v-ripple:orange-5>
-            <q-item-section>
-              <q-item-label>
-                <span>{{ item.nomor }} </span> : <span class="surah-title">{{ item.name }} </span>
-              </q-item-label>
-              <q-item-label>
-                <span>{{ item.nama }}</span>
-              </q-item-label>
-            </q-item-section>
-            <q-item-section side top>
-              <q-item-label caption>{{ item.ayat }} ayat </q-item-label>
-            </q-item-section>
-          </q-item>
-        </q-list>
+            <q-item clickable v-ripple:orange-5 @click.stop="surahReading(item.nomor)">
+              <q-item-section>
+                <q-item-label>
+                  <span>{{ item.nomor }} </span> : <span class="surah-title">{{ item.name }} </span>
+                </q-item-label>
+                <q-item-label>
+                  <span>{{ item.nama }}</span>
+                </q-item-label>
+              </q-item-section>
+              <q-item-section side top>
+                <q-item-label caption>{{ item.ayat }} ayat </q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
         </q-expansion-item>
       </q-list>
     </q-drawer>
@@ -90,6 +88,22 @@ export default {
     getSurah () {
       return this.$store.state.QuranModul.surah
     }
+  },
+  methods: {
+    surahReading (surahNumber) {
+      this.$q.loadingBar.start()
+      this.$store.dispatch('QuranModul/SELECT_SURAH', { surah_number: surahNumber })
+        .then(resp => {
+          if (resp.data.code === 200) {
+            this.$q.loadingBar.stop()
+          }
+        })
+        .catch(err => {
+          console.log(err)
+          this.$q.loadingBar.stop()
+        })
+      this.$router.push({ path: `/surah-reading/${surahNumber}` })
+    }
   }
 }
 </script>

src/pages/Index.vue

@@ -1,9 +1,19 @@
 <template>
-  <q-page class="flex flex-center">
-    <img
-      alt="Quasar logo"
-      src="~assets/images/AlQ_Kareem_clear.png"
-    >
+  <q-page>
+    <div class="flex flex-center column">
+      <h2 class="surah-title"> بِسْمِ ٱللّٰهِ الرَّحْمٰنِ الرَّحِيْمِ </h2>
+      <div class="row" style="min-height: 400px; width: 80%; padding: 24px;">
+        <div id="parent" class="full-width column no-wrap justify-between items-center content-start" style="overflow: hidden;">
+          <div style="overflow: auto;">
+            <q-card>
+              <q-card-section>
+                <img alt="Al-Quraanul Kareem" src="~assets/images/AlQ_Kareem_clear.png">
+              </q-card-section>
+            </q-card>
+          </div>
+        </div>
+      </div>
+    </div>
   </q-page>
 </template>
 
@@ -12,3 +22,9 @@ export default {
   name: 'PageIndex'
 }
 </script>
+<style scoped>
+  .surah-title {
+    direction: rtl;
+    font-family: 'me_quran',serif;
+  }
+</style>

src/pages/SurahDetail.vue

@@ -0,0 +1,88 @@
+<template>
+  <!-- TODO create separate as component  -->
+  <q-page padding class="flex flex-center column">
+    <!-- content -->
+    <div class="row" style="min-height: 400px; width: 100%;">
+      <div id="parent" class="full-width row wrap justify-center items-start content-start" style="overflow: hidden;">
+        <div class="" style="overflow: auto;">
+          <q-card>
+            <q-card-section>
+              <img height="40px" alt="Al-Quraanul Kareem" src="~assets/images/surah_title_left.png">
+            </q-card-section>
+          </q-card>
+        </div>
+        <div class="" style="overflow: auto;">
+          <h3 style="line-height: 2px" class="surah-title">{{ this.$store.state.QuranModul.selectSurah.name }}ِ</h3>
+        </div>
+        <div class="" style="overflow: auto;">
+        <q-card>
+          <q-card-section>
+            <img height="40px" alt="Al-Quraanul Kareem" src="~assets/images/surah_title_right.png">
+          </q-card-section>
+        </q-card>
+      </div>
+        <div class="wrap col-12" style="">
+          <q-list v-for="item in getSurah" :key="item.numberInSurah" bordered>
+            <q-item>
+              <q-item-section>
+                <q-item-label>
+                  <span>{{ item.numberInSurah }} </span>
+                  <span style="float: right; direction: rtl" class="text-h5">
+                    {{ (item.numberInSurah === 1 && item.number !== 1 ? item.text.substr(39) : item.text) }} {{ '('+ createArabicNumber(item.numberInSurah) + ')' }}
+                  </span>
+                </q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </div>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script>
+import NS from 'numeral-systems'
+export default {
+  name: 'SurahDetail',
+  data () {
+    return {
+      surah_number: this.$route.params.surah_number,
+      firstSurah: true,
+      dataSelectSurah: {}
+    }
+  },
+  computed: {
+    getSurah () {
+      return this.$store.state.QuranModul.selectSurah.ayahs
+    }
+  },
+  watch: {
+    surah_number (val) {
+      this.firstSurah = val <= 1
+    }
+  },
+  created () {
+    this.initSurah()
+    console.log('NUMBER', this.createArabicNumber(10))
+  },
+  methods: {
+    initSurah () {
+      this.dataSelectSurah = {
+        name: this.$store.state.QuranModul.selectSurah.name
+      }
+    },
+    // TODO create utils
+    createArabicNumber (number) {
+      return NS(number, 'arabic')
+    }
+  }
+}
+</script>
+<style scoped>
+  .surah-title {
+    direction: rtl;
+    font-size: 35px;
+    font-family: 'me_quran',serif;
+    line-height: 1px;
+  }
+</style>

src/router/routes.js

@@ -5,7 +5,11 @@ const routes = [
     component: () => import('layouts/MainLayout.vue'),
     children: [
       { path: '', component: () => import('pages/Index.vue') },
-      { path: '/dashboard', component: () => import('pages/Dashboard') }
+      { path: '/dashboard', component: () => import('pages/Dashboard.vue') },
+      {
+        path: '/surah-reading/:surah_number',
+        component: () => import('pages/SurahDetail.vue')
+      }
     ]
   }
 ]

src/store/QuranModul/actions.js

@@ -5,6 +5,11 @@ export function FETCH_API_SURAH ({ commit }) {
   commit('FETCH_SURAH', staticSurat)
 }
 
+/**
+ * @param commit
+ * @returns {Promise<unknown>}
+ * @constructor
+ */
 export function FETCH_API_INTENASIONAL ({ commit }) {
   // commit('FETCH_SURAH', staticSurat)
   return new Promise((resolve, reject) => {
@@ -34,3 +39,14 @@ export function FETCH_API_INTENASIONAL ({ commit }) {
       .catch(error => { reject(error) })
   })
 }
+
+export function SELECT_SURAH ({ commit }, data) {
+  return new Promise((resolve, reject) => {
+    Api.selectSurah(data)
+      .then((response) => {
+        commit('SELECT_SURAH', response.data.data)
+        resolve(response)
+      })
+      .catch(error => { reject(error) })
+  })
+}

src/store/QuranModul/getters.js

@@ -1,8 +1,7 @@
-/*
-export function someGetter (state) {
-}
-*/
-
+/**
+ * @param state
+ * @returns array map object
+ */
 export function getAllSurah (state) {
   return state.surah.map(function (item) {
     return {
@@ -11,3 +10,7 @@ export function getAllSurah (state) {
     }
   })
 }
+
+export function getSelectedSurah (state) {
+  return state.selectSurah
+}

src/store/QuranModul/mutations.js

@@ -1,3 +1,7 @@
 export function FETCH_SURAH (state, data) {
   state.surah = data
 }
+
+export function SELECT_SURAH (state, data) {
+  state.selectSurah = data
+}

src/store/QuranModul/state.js

@@ -1,6 +1,7 @@
 export default function () {
   return {
     surah: [],
+    selectSurah: [],
     ayat: [],
     juz: []
   }

yarn.lock

@@ -6636,6 +6636,11 @@ number-is-nan@^1.0.0:
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
   integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
 
+numeral-systems@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/numeral-systems/-/numeral-systems-2.0.0.tgz#fb0bdc213f175e974d5553eab9917dc8308edf5f"
+  integrity sha512-KPbJBtaH/rQyxGpFipQyuUVMJbhMusvGH1soEbNHgMMhnxUWDEuepv1Jw7nYHDOEJ4GBY3xYnRE15p2nXBe11A==
+
 oauth-sign@~0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
@@ -7712,6 +7717,13 @@ qs@~6.5.2:
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
   integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
 
+quasar-app-extension-ide-helper@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/quasar-app-extension-ide-helper/-/quasar-app-extension-ide-helper-1.0.0.tgz#597647b9602739e99f8aefde8f487eddcb772762"
+  integrity sha512-N5iwCnBQCiNeVLN3IbcaIQAFaTouZdSsUp2xsDSHVzW3P++B2HasuLUykVFCFW6NlmLdvLLH7qFeGS6/2iSCAg==
+  dependencies:
+    xml-escape "^1.1.0"
+
 quasar@^1.0.0:
   version "1.9.15"
   resolved "https://registry.yarnpkg.com/quasar/-/quasar-1.9.15.tgz#a8ba1f78b943402fc60e08a1600e263b28636138"
@@ -10020,6 +10032,11 @@ ws@^6.0.0, ws@^6.2.1:
   dependencies:
     async-limiter "~1.0.0"
 
+xml-escape@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/xml-escape/-/xml-escape-1.1.0.tgz#3904c143fa8eb3a0030ec646d2902a2f1b706c44"
+  integrity sha1-OQTBQ/qOs6ADDsZG0pAqLxtwbEQ=
+
 xmlbuilder@^9.0.7:
   version "9.0.7"
   resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-9.0.7.tgz#132ee63d2ec5565c557e20f4c22df9aca686b10d"