get rid of window.adminforth and replace it with @/adminforth import

Author: ivictbor

adminforth/documentation/docs/tutorial/03-Customization/06-customPages.md

@@ -98,6 +98,7 @@ import { ref, onMounted } from 'vue';
 import ApexCharts from 'apexcharts';
 import dayjs from 'dayjs';
 import { callApi } from '@/utils';
+import adminforth from '@adminforth';
 
 const data = ref({});
 
@@ -343,7 +344,7 @@ onMounted(async () => {
   try {
     data.value = await callApi({path: '/api/dashboard/', method: 'GET'});
   } catch (error) {
-    window.adminforth.alert({
+    adminforth.alert({
       message: `Error fetching data: ${error.message}`,
       variant: 'danger',
       timeout: 'unlimited'

adminforth/documentation/docs/tutorial/03-Customization/07-alert.md

@@ -19,15 +19,15 @@ Create a Vue component in the custom directory of your project, e.g. Alerts.vue:
     </div>
 </template>
 <script setup>
-
+import adminforth from '@/adminforth';
 import { useI18n } from 'vue-i18n';
 const { t } = useI18n();
 
 function callAlert(message,variant='success'){
-    window.adminforth.alert({message: message, variant: variant})
+    adminforth.alert({message: message, variant: variant})
 };
 async function callConfirmation(){
-    const isConfirmed = await window.adminforth.confirm({message: t('Are you sure?'), yes: t('Yes'), no: t('No')})
+    const isConfirmed = await adminforth.confirm({message: t('Are you sure?'), yes: t('Yes'), no: t('No')})
 }
 </script>
 ```

adminforth/documentation/docs/tutorial/03-Customization/08-pageInjections.md

@@ -39,6 +39,7 @@ Now create file `ApartsPie.vue` in the `custom` folder of your project:
 import { onMounted, ref, Ref } from 'vue';
 import ApexCharts from 'apexcharts';
 import { callApi } from '@/utils';
+import adminforth from '@/adminforth';
 
 
 const data: Ref<any[]> = ref([]);
@@ -56,10 +57,10 @@ const chatOptions = {
       dataPointSelection: function (event, chartContext, config) {
         if (config.selectedDataPoints[0].length) {
           const selectedRoomsCount = data.value[config.dataPointIndex].rooms;
-          window.adminforth.list.updateFilter({field: 'number_of_rooms', operator: 'eq', value: selectedRoomsCount});
+          adminforth.list.updateFilter({field: 'number_of_rooms', operator: 'eq', value: selectedRoomsCount});
         } else {
           // clear filter
-          window.adminforth.list.updateFilter({field: 'number_of_rooms', value: undefined});
+          adminforth.list.updateFilter({field: 'number_of_rooms', value: undefined});
         }
       }
     },
@@ -117,7 +118,7 @@ onMounted(async () => {
   try {
     data.value = await callApi({path: '/api/aparts-by-room-percentages', method: 'GET'});
   } catch (error) {
-    window.adminforth.alert({
+    adminforth.alert({
       message: `Error fetching data: ${error.message}`,
       variant: 'danger',
       timeout: 'unlimited'
@@ -177,7 +178,7 @@ Also we have to add an Api to get percentages:
   admin.express.serve(app)
 ```
 
-> ☝️ Please note that we are using [Frontend API](/docs/api/types/FrontendAPI/interfaces/FrontendAPIInterface/) `window.adminforth.list.updateFilter({field: 'number_of_rooms', operator: 'eq', value: selectedRoomsCount});` to set filter when we are located on apartments list page
+> ☝️ Please note that we are using [Frontend API](/docs/api/types/FrontendAPI/interfaces/FrontendAPIInterface/) `adminforth.list.updateFilter({field: 'number_of_rooms', operator: 'eq', value: selectedRoomsCount});` to set filter when we are located on apartments list page
 
 Here is how it looks:
 ![alt text](<Page Injections.png>)
@@ -294,17 +295,18 @@ Now create file `CheckReadingTime.vue` in the `custom` folder of your project:
 
 <script setup>
 import { getReadingTime} from "text-analyzer";
+import adminforth from '@/adminforth';
 
 function checkReadingTime() {
   const text = document.querySelector('[data-af-column="description"]')?.innerText;
   if (text) {
     const readingTime = getReadingTime(text);
-    window.adminforth.alert({
+    adminforth.alert({
       message: `Reading time: ${readingTime.minutes} minutes`,
       variant: 'success',
     });
   }
-  window.adminforth.list.closeThreeDotsDropdown();
+  adminforth.list.closeThreeDotsDropdown();
 }
 </script>
 ```
@@ -319,7 +321,7 @@ npm install text-analyzer --save
 ```
 
 
-> ☝️ Please note that we are using AdminForth [Frontend API](/docs/api/types/FrontendAPI/interfaces/FrontendAPIInterface/) `window.adminforth.list.closeThreeDotsDropdown();` to close the dropdown after the item is clicked.
+> ☝️ Please note that we are using AdminForth [Frontend API](/docs/api/types/FrontendAPI/interfaces/FrontendAPIInterface/) `adminforth.list.closeThreeDotsDropdown();` to close the dropdown after the item is clicked.
 
 
 ## List table custom action icons
@@ -392,7 +394,7 @@ You have opportunity to inject custom components to the global layout. For examp
 
 ![alt text](<Group 6.png>)
 
-use `window.adminforth.closeUserMenuDropdown();` to close the dropdown after the item is clicked.
+use `adminforth.closeUserMenuDropdown();` to close the dropdown after the item is clicked.
 
 ```ts title="/index.ts"
 {
@@ -418,12 +420,14 @@ Now create file `CustomUserMenuItem.vue` in the `custom` folder of your project:
 </template>
 
 <script setup>
+import adminforth from '@/adminforth';
+
 function openCustomPage() {
-  window.adminforth.alert({
+  adminforth.alert({
     message: 'Custom page is opened',
     variant: 'success',
   });
-  window.adminforth.closeUserMenuDropdown();
+  adminforth.closeUserMenuDropdown();
 }
 </script>
 ```

adminforth/documentation/docs/tutorial/03-Customization/10-menuConfiguration.md

@@ -222,6 +222,8 @@ Most times you need to refresh the badge from some backend API or hook. To do th
 More rare case when you need to refresh menu item from the frontend component. You can achieve this by calling the next method:
 
 ```typescript
-window.adminforth.menu.refreshMenuBadges()
+import adminforth from '@/adminforth';
+
+adminforth.menu.refreshMenuBadges()
 ```
 

adminforth/documentation/docs/tutorial/05-Plugins/10-i18n.md

@@ -329,6 +329,7 @@ For simple example let's move previous example to format string on the backend s
 import type { AdminForthResourceColumnCommon, AdminForthResourceCommon, AdminUser } from '@/types/Common';
 import { callApi } from '@/utils';
 import { ref, onMounted } from 'vue';
+import adminforth from '@/adminforth';
 
 const greeting: Ref<string> = ref('');
 
@@ -337,7 +338,7 @@ onMounted(async () => {
     const data = await callApi({path: '/api/greeting', method: 'GET'});
     greeting.value = data.text;
   } catch (error) {
-    window.adminforth.alert({
+    adminforth.alert({
       message: `Error fetching data: ${error.message}`,
       variant: 'danger',
       timeout: 'unlimited'

adminforth/documentation/docs/tutorial/06-Advanced/01-plugin-development.md

@@ -210,6 +210,31 @@ Now we have to create custom Vue component which will be used in plugin. To do i
 mkdir -p af-plugin-chatgpt/custom
 ```
 
+Also create `tsconfig.ts` file so your IDE will be able to resolve adminforth spa imports: 
+
+```json title='./af-plugin-chatgpt/custom/tsconfig.json'
+{
+  "compilerOptions": {
+    "baseUrl": ".", // This should point to your project root
+    "paths": {
+      "@/*": [
+        // "node_modules/adminforth/dist/spa/src/*"
+        "../../../spa/src/*"
+      ],
+      "*": [
+        // "node_modules/adminforth/dist/spa/node_modules/*"
+        "../../../spa/node_modules/*"
+      ],
+      "@@/*": [
+        // "node_modules/adminforth/dist/spa/src/*"
+        "."
+      ]
+    }
+  }
+}
+```
+
+
 We will use `vue-suggestion-input` package in our frontend component. 
 To install package into frontend component, first of all we have to initialize npm package in custom folder:
 

adminforth/plugins/email-password-reset/custom/ResetPassword.vue

@@ -159,6 +159,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { IconEyeSolid, IconEyeSlashSolid } from '@iconify-prerendered/vue-flowbite';
 import Button from '@/afcl/Button.vue';
 import Link from '@/afcl/Link.vue';
+import adminforth from '@/adminforth';
 
 const inProgress = ref(false);
 
@@ -279,7 +280,7 @@ async function setNewPassword() {
   } else {
     error.value = null;
     router.push('/login');
-    window.adminforth.alert({
+    adminforth.alert({
       message: 'Password reset successfully. Please login with your new password',
       variant: 'success',
       timeout: 15,

adminforth/plugins/email-password-reset/custom/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".", // This should point to your project root
+    "paths": {
+      "@/*": [
+        // "node_modules/adminforth/dist/spa/src/*"
+        "../../../spa/src/*"
+      ],
+      "*": [
+        // "node_modules/adminforth/dist/spa/node_modules/*"
+        "../../../spa/node_modules/*"
+      ],
+      "@@/*": [
+        // "node_modules/adminforth/dist/spa/src/*"
+        "."
+      ]
+    }
+  }
+}

adminforth/plugins/import-export/custom/ExportCsv.vue

@@ -15,6 +15,7 @@ import { onMounted, ref } from 'vue';
 import { useCoreStore } from '@/stores/core';
 import { callAdminForthApi, loadFile } from '@/utils';
 import { useFiltersStore } from '@/stores/filters';
+import adminforth from '@/adminforth';
 
 
 const filtersStore = useFiltersStore();
@@ -55,16 +56,16 @@ async function exportCsv() {
   });
   inProgress.value = false;
   if (resp.error) {
-    window.adminforth.alert({
+    adminforth.alert({
       message: resp.error,
     })
   } else {
     loadFile(resp.data, `export-${coreStore.resource.resourceId}-${new Date().toISOString()}.csv`);
-    window.adminforth.alert({
+    adminforth.alert({
       message: `Exported ${resp.exportedCount} item${resp.exportedCount > 1 ? 's' : ''} successfully. Check your downloads folder`,
     })
   }
-  window.adminforth.list.closeThreeDotsDropdown();
+  adminforth.list.closeThreeDotsDropdown();
 }
 
 

adminforth/plugins/import-export/custom/ImportCsv.vue

@@ -11,6 +11,7 @@
 <script setup lang="ts">
 import { ref, Ref } from 'vue';
 import { callAdminForthApi } from '@/utils';
+import adminforth from '@/adminforth';
 
 const inProgress: Ref<boolean> = ref(false);
 
@@ -33,16 +34,16 @@ async function postData(data: Record<string, string[]>) {
   inProgress.value = false;
 
   if (resp.importedCount > 0) {
-    window.adminforth.list.refresh();
+    adminforth.list.refresh();
   }
-  window.adminforth.alert({
+  adminforth.alert({
     message: `Imported count ${resp.importedCount || 0} records. ${resp.errors?.length ? `Errors: ${resp.errors.join(', ')}` : ''}`,
     variant: resp.errors?.length ? (
       resp.importedCount ? 'warning' : 'danger'
     ) : 'success'
   });
 
-  window.adminforth.list.closeThreeDotsDropdown();
+  adminforth.list.closeThreeDotsDropdown();
 }
 
 async function importCsv() {