haditha pull

.env.haditha

@@ -1,5 +1,5 @@
-VITE_API_NAME=api/
+NUXT_PUBLIC_API_NAME=api/
-VITE_BASE_URL=http://192.168.23.60/
+NUXT_PUBLIC_BASE_URL=http://192.168.23.60/
 
 VITE_APP_NAME=Hadith
 

COMPOSITION_API.md

@@ -0,0 +1,289 @@
+1. Organize Your Code into Logical Sections
+
+Structure your component script into clear sections to improve readability. A common approach is to group related logic together.
+Example Structure:
+
+<script setup>
+// 1. Imports
+import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+// 2. Reactive State
+const count = ref(0)
+const name = ref('')
+
+// 3. Computed Properties
+const doubledCount = computed(() => count.value * 2)
+
+// 4. Functions / Methods
+function increment() {
+  count.value++
+}
+
+// 5. Lifecycle Hooks
+onMounted(() => {
+  console.log('Component mounted')
+})
+
+// 6. Watchers
+watch(count, (newValue, oldValue) => {
+  console.log(`Count changed from ${oldValue} to ${newValue}`)
+})
+</script>
+
+---
+
+2. Use script setup Syntax
+
+The <script setup> syntax is the recommended way to write Composition API components. It provides a more concise and intuitive syntax.
+Example:
+
+<script setup>
+const message = ref('Hello, Vue 3!')
+</script>
+
+<template>
+  <p>{{ message }}</p>
+</template>
+
+---
+
+3. Use Descriptive Variable and Function Names
+
+Choose meaningful names for variables, functions, and computed properties to make your code self-documenting.
+Example:
+// Bad
+const x = ref(0)
+
+// Good
+const userCount = ref(0)
+
+---
+
+4. Extract Reusable Logic into Composables
+   Move reusable logic into composables (custom hooks) to keep your components clean and promote code reuse.
+   Example Composable:
+
+// composables/useCounter.js
+import { ref } from 'vue'
+
+export function useCounter(initialValue = 0) {
+const count = ref(initialValue)
+
+function increment() {
+count.value++
+}
+
+function reset() {
+count.value = initialValue
+}
+
+return {
+count,
+increment,
+reset,
+}
+}
+
+Usage in a Component:
+
+<script setup>
+import { useCounter } from '~/composables/useCounter'
+
+const { count, increment } = useCounter()
+</script>
+
+<template>
+  <p>Count: {{ count }}</p>
+  <button @click="increment">Increment</button>
+</template>
+
+---
+
+5. Use ref for Primitive Values and reactive for Objects
+
+   - Use ref for primitive values (e.g., numbers, strings, booleans).
+   - Use reactive for objects or arrays.
+
+Example:
+const count = ref(0) // Primitive value
+const user = reactive({ name: 'John', age: 30 }) // Object
+
+---
+
+6. Use Computed Properties for Derived State
+
+Use computed to create reactive properties that depend on other state. This ensures the derived state is always up-to-date.
+Example:
+const firstName = ref('John')
+const lastName = ref('Doe')
+
+const fullName = computed(() => `${firstName.value} ${lastName.value}`)
+
+---
+
+7. Use Watchers Sparingly
+
+Watchers (watch and watchEffect) are powerful but can make your code harder to understand if overused. Prefer computed properties or event-driven updates where possible.
+Example:
+watch(count, (newValue, oldValue) => {
+console.log(`Count changed from ${oldValue} to ${newValue}`)
+})
+
+---
+
+8. Group Related Logic Together
+
+Keep related reactive state, computed properties, and functions together to make your code easier to follow.
+Example:
+// User-related logic
+const user = reactive({ name: 'John', age: 30 })
+const isAdult = computed(() => user.age >= 18)
+function updateUser(newName) {
+  user.name = newName
+}
+
+-----------
+
+9. Use Lifecycle Hooks for Side Effects
+
+Use lifecycle hooks (onMounted, onUnmounted, etc.) for side effects like fetching data or setting up event listeners.
+Example:
+onMounted(() => {
+  console.log('Component mounted')
+  fetchData()
+})
+
+onUnmounted(() => {
+  console.log('Component unmounted')
+  cleanup()
+})
+
+----------------
+
+10. Use TypeScript for Better Type Safety
+If your project uses TypeScript, leverage it to add type safety to your components.
+Example:
+<script setup lang="ts">
+interface User {
+  name: string
+  age: number
+}
+
+const user = ref<User>({ name: 'John', age: 30 })
+</script>
+
+--------------
+
+11. Keep Templates Clean
+
+Avoid putting too much logic in your template. Instead, move complex logic into the script or composables.
+Example:
+<template>
+  <div>
+    <p>{{ fullName }}</p>
+    <button @click="increment">Increment</button>
+  </div>
+</template>
+
+<script setup>
+const firstName = ref('John')
+const lastName = ref('Doe')
+const fullName = computed(() => `${firstName.value} ${lastName.value}`)
+
+function increment() {
+  // Logic here
+}
+</script>
+
+------------
+
+12. Use provide and inject for Prop Drilling
+Avoid prop drilling by using provide and inject to share state across deeply nested components.
+Example:
+// Parent component
+import { provide, ref } from 'vue'
+
+const theme = ref('dark')
+provide('theme', theme)
+
+// Child component
+import { inject } from 'vue'
+
+const theme = inject('theme')
+
+-----------------
+
+13. Use v-model for Two-Way Binding
+
+Use v-model to simplify two-way binding between parent and child components.
+Example:
+<!-- Parent component -->
+<template>
+  <ChildComponent v-model:name="userName" />
+</template>
+
+<script setup>
+const userName = ref('John')
+</script>
+
+<!-- Child component -->
+<template>
+  <input :value="name" @input="$emit('update:name', $event.target.value)" />
+</template>
+
+<script setup>
+defineProps(['name'])
+defineEmits(['update:name'])
+</script>
+
+----------
+
+14. Use defineProps and defineEmits for TypeScript Support
+
+When using TypeScript, use defineProps and defineEmits to define props and emits with type safety.
+Example:
+<script setup lang="ts">
+const props = defineProps<{
+  title: string
+  count: number
+}>()
+
+const emit = defineEmits<{
+  (event: 'update:count', value: number): void
+}>()
+</script>
+
+-------------
+
+15. Use Scoped Styles
+
+Use scoped styles (<style scoped>) to ensure styles are component-specific and don’t leak into other components.
+Example:
+<style scoped>
+.button {
+  background-color: blue;
+}
+</style>
+
+------------------
+
+16. Use Environment Variables
+
+Use environment variables for configuration (e.g., API URLs) to keep your code flexible and secure.
+Example:
+const apiUrl = import.meta.env.VITE_API_URL
+
+-------------
+
+17. Write Unit Tests
+
+Write unit tests for your components and composables to ensure they work as expected.
+Example:
+import { render } from '@testing-library/vue'
+import MyComponent from '@/components/MyComponent.vue'
+
+test('renders correctly', () => {
+  const { getByText } = render(MyComponent)
+  expect(getByText('Hello, Vue 3!')).toBeInTheDocument()
+})

GIT_SUBMODULE.md

@@ -36,7 +36,7 @@ If it is, remove it from the index
 git rm --cached systems/chat_ui
 
 If system/chat_ui exits, remote it(chat_ui)
-rm -rf systems/chat_ui
+rm -r systems/chat_ui
 
 Add the submodule
 git submodule add https://github.com/example/repo.git systems/chat_ui

app.vue

@@ -2,27 +2,9 @@
   <UApp :locale="fa_ir">
     <NuxtLoadingIndicator />
     <NuxtRouteAnnouncer />
-    <!-- <DevOnly> -->
-    <!-- this component will only be rendered during development -->
-    <!-- <LazyDebugBar /> -->
-
-    <!-- if you ever require to have a replacement during production -->
-    <!-- be sure to test these using `nuxt preview` -->
-    <!-- <template #fallback> -->
-    <!-- <div>empty div for flex.justify-between</div> -->
-    <!-- </template> -->
-    <!-- </DevOnly> -->
 
     <NuxtLayout>
-      <!-- this component will be rendered on client-side -->
-      <!-- <NuxtClientFallback
-        fallback-tag="span"
-        fallback="NuxtClientFallback"
-        @ssr-error="logSomeError"
-      > -->
       <NuxtPage />
-      <!-- <BrokeInSsr /> -->
-      <!-- </NuxtClientFallback> -->
     </NuxtLayout>
   </UApp>
 </template>

composables/useHadithaSearchComposable.ts

@@ -0,0 +1,26 @@
+// composables/useHadithaSearchComposable.js
+import { useStorage } from "@vueuse/core";
+
+export const useHadithaSearchComposable = <T>(url: string, options = {}) => {
+  // Get the authentication token (e.g., from a cookie or local storage)
+  // const token = useCookie('auth-token') // Assuming you store the token in a cookie
+  let token = useStorage("id_token", "GuestAccess");
+  const config = useRuntimeConfig();
+  console.info(config);
+
+  const baseURL =
+    config.public.NUXT_PUBLIC_BASE_URL + config.public.NUXT_PUBLIC_API_NAME;
+
+  // Add headers to the request
+  const headers = {
+    Authorization: token.value,
+    ...options.headers, // Merge with any existing headers
+  };
+
+  // Use useFetch with the headers
+  return useFetch<T>(url, {
+    ...options,
+    baseURL,
+    headers,
+  });
+};

plugins/api.ts

@@ -13,7 +13,7 @@ export default defineNuxtPlugin((nuxtApp) => {
     onRequest({ request, options, error }) {
       options.baseURL =
         import.meta.env.VITE_BASE_URL +
-        import.meta.env.VITE_API_NAME +
+        import.meta.env.NUXT_PUBLIC_API_NAME+
         options.baseURL;
 
       if (token) {

plugins/httpService.ts

@@ -3,12 +3,13 @@ import { useStorage } from "@vueuse/core";
 
 export default defineNuxtPlugin((nuxtApp) => {
   let token = useStorage("id_token", "GuestAccess").value;
+  const config = useRuntimeConfig();
 
   const api = $fetch.create({
     onRequest({ request, options, error }) {
       options.baseURL =
-        import.meta.env.VITE_BASE_URL +
+        config.public.NUXT_PUBLIC_BASE_URL +
-        import.meta.env.VITE_API_NAME +
+        config.public.NUXT_PUBLIC_API_NAME +
         options.baseURL;
 
       if (token) {
@@ -40,13 +41,14 @@ export default defineNuxtPlugin((nuxtApp) => {
     getRequest: (url, options = {}) => api(url, { method: "GET", ...options }),
     postRequest: (url, body, options = {}) =>
       api(url, { method: "POST", body, ...options }),
-    deleteRequest: (url, options = {}) => api(url, { method: "DELETE", ...options }),
+    deleteRequest: (url, options = {}) =>
+      api(url, { method: "DELETE", ...options }),
   };
 
   // Expose to useNuxtApp().$api and useNuxtApp().$http
   return {
     provide: {
-      http
+      http,
     },
   };
 });

routes/haditha.ts

@@ -9,6 +9,12 @@ export default [
     path: "/haditha/search",
     file: "~/systems/hadith_ui/pages/haditha/search/index.vue",
   },
+  {
+    name: "hadithaSearchShow",
+    path: "/haditha/search/:id/:slug?",
+    file: "~/systems/hadith_ui/pages/haditha/search/[id]/[slug]/index.vue",
+  },
+
   {
     name: "hadithaChatBot",
     path: "/haditha/chat-bot",

systems/hadith_ui

@@ -1 +1 @@
-Subproject commit 953d98f3beb62044c320f5fcfb8a000f5e8264d0
+Subproject commit 832f5dbf525ebddbcfa8873b5b3c88325f446a3c

utils/globalMixin.ts

@@ -275,7 +275,7 @@ export const userAvatar = (user = undefined) => {
       if (user?.avatar && user?.avatar?.length) {
         return (
           import.meta.env.VITE_BASE_URL +
-          import.meta.env.VITE_API_NAME +
+          import.meta.env.NUXT_PUBLIC_API_NAME+
           fileUrl() +
           user.avatar
         );

utils/useApi.ts

@@ -4,7 +4,7 @@ export async function useAPI<T>(
   url: string | (() => string),
   options?: UseFetchOptions<T>
 ) {
-  const prexFixUrlWithApiName = import.meta.env.VITE_API_NAME + url;
+  const prexFixUrlWithApiName = import.meta.env.NUXT_PUBLIC_API_NAME+ url;
 
   return await useFetch(prexFixUrlWithApiName, {
     ...options,