Merge pull request #446 from devforth/feature/AdminForth/1125/please-rework-all-frontend-api

Feature/admin forth/1125/please rework all frontend api

Author: ivictbor

adminforth/commands/createCustomComponent/templates/customCrud/afterBreadcrumbs.vue.hbs

@@ -13,11 +13,13 @@
 <script setup lang="ts">
 import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import { AdminForthResourceCommon, AdminUser } from "@/types/Common";
 
 const { t } = useI18n();
 
+const { alert } = useAdminforth();
+
 const props = defineProps<{
   record: any
   resource: AdminForthResourceCommon
@@ -30,7 +32,7 @@ onMounted(() => {
 });
 
 function handleClick() {
-  adminforth.alert({
+  alert({
     message: t('Confirmed'),
     variant: 'success',
   });

adminforth/commands/createCustomComponent/templates/customCrud/beforeActionButtons.vue.hbs

@@ -13,9 +13,10 @@
 <script setup lang="ts">
 import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import { AdminForthResourceCommon, AdminUser } from "@/types/Common";
 
+const { alert } = useAdminforth();
 const { t } = useI18n();
 
 const props = defineProps<{
@@ -30,7 +31,7 @@ onMounted(() => {
 });
 
 function handleClick() {
-  adminforth.alert({
+  alert({
     message: t('Confirmed'),
     variant: 'success',
   });

adminforth/commands/createCustomComponent/templates/customCrud/beforeBreadcrumbs.vue.hbs

@@ -13,11 +13,13 @@
 <script setup lang="ts">
 import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import { AdminForthResourceCommon, AdminUser } from "@/types/Common";
 
 const { t } = useI18n();
 
+const { alert } = useAdminforth();
+
 const props = defineProps<{
   record: any
   resource: AdminForthResourceCommon
@@ -30,7 +32,7 @@ onMounted(() => {
 });
 
 function handleClick() {
-  adminforth.alert({
+  alert({
     message: t('Confirmed'),
     variant: 'success',
   });

adminforth/commands/createCustomComponent/templates/customCrud/bottom.vue.hbs

@@ -13,11 +13,13 @@
 <script setup lang="ts">
 import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import { AdminForthResourceCommon, AdminUser } from "@/types/Common";
 
 const { t } = useI18n();
 
+const { alert } = useAdminforth();
+
 const props = defineProps<{
   record: any
   resource: AdminForthResourceCommon
@@ -30,7 +32,7 @@ onMounted(() => {
 });
 
 function handleClick() {
-  adminforth.alert({
+  alert({
     message: t('Confirmed'),
     variant: 'success',
   });

adminforth/commands/createCustomComponent/templates/customCrud/threeDotsDropdownItems.vue.hbs

@@ -12,12 +12,14 @@
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
-import adminforth from '@/adminforth';
+import { useAdminforth} from '@/adminforth';
 import { onMounted } from 'vue';
 import { AdminForthResourceCommon, AdminUser } from "@/types/Common";
 
 const { t } = useI18n();
 
+const { alert } = useAdminforth();
+
 const props = defineProps<{
   record: any
   resource: AdminForthResourceCommon
@@ -29,7 +31,7 @@ const menuItems = [
   {
     label: 'Show Success Alert',
     action: () => {
-      adminforth.alert({
+      alert({
         message: t('Success Alert'),
         variant: 'success',
       });

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

@@ -182,14 +182,16 @@ import { ref, type Ref, onMounted, computed } from 'vue';
 import dayjs from 'dayjs';
 import { callApi } from '@/utils';
 import { useI18n } from 'vue-i18n';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import { AreaChart, BarChart, PieChart } from '@/afcl';
 
 const data: Ref<{listedVsUnlistedPriceByDays: any, listedVsUnlistedByDays: any, 
   apartsByDays: any, apartsCountsByRooms: any, topCountries: any, totalAparts: any} | null> = ref(null);
 
 const { t } = useI18n();
 
+const { alert } = useAdminforth();
+
 const COLORS = ["#4E79A7", "#F28E2B", "#E15759", "#76B7B2", "#59A14F"]
 
 const apartsCountsByDaysChart = computed(() => {
@@ -246,7 +248,7 @@ onMounted(async () => {
   try {
     data.value = await callApi({path: '/api/dashboard/', method: 'GET'});
   } catch (error) {
-    adminforth.alert({
+    alert({
       message: t(`Error fetching data: {message}`, { message: error.message }),
       variant: 'danger',
     });

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

@@ -12,9 +12,11 @@ AdminForth has very simple [frontend API](/docs/api/FrontendAPI/interfaces/Front
 To show an alert use `adminforth.alert` method:
 
 ```ts
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 
-adminforth.alert({message: 'Hello world', variant: 'success'})
+const { alert } = useAdminforth();
+
+alert({message: 'Hello world', variant: 'success'})
 ```
 
 Next variants are supported:
@@ -62,9 +64,11 @@ Here's how the alert looks now:
 To show a confirmation dialog use `adminforth.confirm` method:
 
 ```ts
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
+
+const { confirm } = useAdminforth();
 
-const isConfirmed = await adminforth.confirm({message: 'Are you sure?', yes: 'Yes', no: 'No'})
+const isConfirmed = await confirm({message: 'Are you sure?', yes: 'Yes', no: 'No'})
 ```
 
 ## Usage example
@@ -88,26 +92,28 @@ Create a Vue component in the custom directory of your project, e.g. `Alerts.vue
     </div>
 </template>
 <script setup>
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 import { Button } from '@/afcl'
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
 
+const { alert, confirm } = useAdminforth();
+
 function successAlert(message) {
-    adminforth.alert({message, variant: 'success'})
+    alert({message, variant: 'success'})
 };
 
 function warningAlert(message) {
-    adminforth.alert({message, variant: 'warning'})
+    alert({message, variant: 'warning'})
 };
 
 async function doConfirm() {
-    const isConfirmed = await adminforth.confirm({message: t('Are you sure?'), yes: t('Yes'), no: t('No')})
+    const isConfirmed = await confirm({message: t('Are you sure?'), yes: t('Yes'), no: t('No')})
     if (isConfirmed){
-        adminforth.alert({message: t('Confirmed'), variant: 'success'})
+        alert({message: t('Confirmed'), variant: 'success'})
     } else {
-        adminforth.alert({message: t('Not confirmed'), variant: 'warning'})
+        alert({message: t('Not confirmed'), variant: 'warning'})
     }
 }
 </script>

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

@@ -72,11 +72,12 @@ Now create file `ApartsPie.vue` in the `custom` folder of your project:
   import { onMounted, ref, Ref, computed } from 'vue';
   import { PieChart } from '@/afcl';
   import { callApi } from '@/utils';
-  import adminforth from '@/adminforth';
+  import { useAdminforth } from '@/adminforth';
   
   
   const data: Ref<any[]> = ref([]);
 
+  const { alert } = useAdminforth(); 
 
   const COLORS = ["#4E79A7", "#F28E2B", "#E15759", "#76B7B2", "#59A14F"]
   const rooms = computed(() => {
@@ -93,7 +94,7 @@ Now create file `ApartsPie.vue` in the `custom` folder of your project:
     try {
     data.value = await callApi({ path: '/api/aparts-by-room-percentages', method: 'GET' });
     } catch (error) {
-      adminforth.alert({
+      alert({
         message: `Error fetching data: ${error.message}`,
         variant: 'danger',
         timeout: 'unlimited'
@@ -296,22 +297,24 @@ Now create file `CheckReadingTime.vue` in the `custom` folder of your project:
 
 <script setup>
 import { getReadingTime} from "text-analyzer";
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 
 defineExpose({
   click,
 });
 
+const { alert, list } = useAdminforth();
+
 function checkReadingTime() {
   const text = document.querySelector('[data-af-column="description"]')?.innerText;
   if (text) {
     const readingTime = getReadingTime(text);
-    adminforth.alert({
+    alert({
       message: `Reading time: ${readingTime.minutes} minutes`,
       variant: 'success',
     });
   }
-  adminforth.list.closeThreeDotsDropdown();
+  list.closeThreeDotsDropdown();
 }
 
 function click() {
@@ -330,7 +333,7 @@ npm i text-analyzer
 ```
 
 
-> ☝️ Please note that we are using AdminForth [Frontend API](/docs/api/FrontendAPI/interfaces/FrontendAPIInterface/) `adminforth.list.closeThreeDotsDropdown();` to close the dropdown after the item is clicked.
+> ☝️ Please note that we are using AdminForth [Frontend API](/docs/api/FrontendAPI/interfaces/FrontendAPIInterface/) `list.closeThreeDotsDropdown();` to close the dropdown after the item is clicked.
 
 >☝️ Please note that the injected component might have an exposed click function as well as a defined click function, which executes the click on component logic.
 
@@ -541,7 +544,7 @@ You have opportunity to inject custom components to the global layout. For examp
 
 ![alt text](<Group 6.png>)
 
-use `adminforth.closeUserMenuDropdown();` to close the dropdown after the item is clicked.
+use `closeUserMenuDropdown();` to close the dropdown after the item is clicked.
 
 ```ts title="/index.ts"
 {
@@ -567,14 +570,16 @@ Now create file `CustomUserMenuItem.vue` in the `custom` folder of your project:
 </template>
 
 <script setup>
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
+
+const { alert, closeUserMenuDropdown } = useAdminforth()
 
 function openCustomPage() {
-  adminforth.alert({
+  alert({
     message: 'Custom page is opened',
     variant: 'success',
   });
-  adminforth.closeUserMenuDropdown();
+  closeUserMenuDropdown();
 }
 </script>
 ```
@@ -620,9 +625,12 @@ Now create file `AnyPageWelcome.vue` in the `custom` folder of your project:
 
 <script setup>
 import { onMounted } from 'vue';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
+
+const { alert } = useAdminforth();
+
 onMounted(() => {
-  adminforth.alert({
+  alert({
     message: 'Welcome!',
     variant: 'success',
   });

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

@@ -248,9 +248,11 @@ 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
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
 
-adminforth.menu.refreshMenuBadges()
+const { menu } = useAdminforth();
+
+menu.refreshMenuBadges()
 ```
 
 ## Avatars

adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md

@@ -445,7 +445,6 @@ Imagine you have some button which does some API call
 
 <script setup lang="ts">
 import { callApi } from '@/utils';
-import adminforth from '@/adminforth';
 
 async function callAdminAPI() {
   const verificationResult = await window.adminforthTwoFaModal.get2FaConfirmationResult();
@@ -486,7 +485,9 @@ You might want to protect this call with a second factor also. To do it, we need
 
 <script setup lang="ts">
 import { callApi } from '@/utils';
-import adminforth from '@/adminforth';
+import { useAdminforth } from '@/adminforth';
+
+const { alert } = useAdminforth();
 
 async function callAdminAPI() {
   // diff-add
@@ -505,7 +506,7 @@ async function callAdminAPI() {
   // diff-add
   if (!res?.ok) {
   // diff-add
-    adminforth.alert({ message: res.error, variant: 'danger' });
+    alert({ message: res.error, variant: 'danger' });
   // diff-add
   }
 }