Alerts and confirmations

When you are writing custom components or pages you might need to show alerts or confirmations to the user.

For example if fetch to the API fails you might want to show an error message to the user.

AdminForth has very simple frontend API for this.

Alerts

To show an alert use adminforth.alert method:

import adminforth from '@/adminforth';

adminforth.alert({message: 'Hello world', variant: 'success'})

Next variants are supported:

• success
• danger
• warning
• info

Confirmations

To show a confirmation dialog use adminforth.confirm method:

import adminforth from '@/adminforth';

const isConfirmed = await adminforth.confirm({message: 'Are you sure?', yes: 'Yes', no: 'No'})

Ussage example

Create a Vue component in the custom directory of your project, e.g. Alerts.vue:

./custom/Alerts.vue

<template>
    <div class="ml-3 mt-16">
        <Button @click="successAlert($t('Example success alert'))" >
            {{$t('Call success alert')}}
        </Button>

        <Button @click="warningAlert($t('Example danger alert'))" >
            {{$t('Call warning alert')}}
        </Button>

        <Button @click="doConfirm" >
            {{$t('Call confirm dialog')}}
        </Button>
    </div>
</template>
<script setup>
import adminforth from '@/adminforth';
import { Button } from '@/afcl'
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

function successAlert(message) {
    adminforth.alert({message, variant: 'success'})
};

function warningAlert(message) {
    adminforth.alert({message, variant: 'warning'})
};

async function doConfirm() {
    const isConfirmed = await adminforth.confirm({message: t('Are you sure?'), yes: t('Yes'), no: t('No')})
    if (isConfirmed){
        adminforth.alert({message: t('Confirmed'), variant: 'success'})
    } else {
        adminforth.alert({message: t('Not confirmed'), variant: 'warning'})
    }
}
</script>

Now let's add this page to the AdminForth menu:

/index.ts

menu: [
{
    label: 'Alerts',
    icon: 'flowbite:bell-active-alt-solid',
    component: '@@/Alerts.vue',
    path: '/alerts'
}

Here is how alert looks:

And here is how confirmation looks:

Announcement

You can notify users of important information by displaying an announcement badge in side bar:

/index.ts

  customization: {
    announcementBadge: (adminUser: AdminUser) => {
      return { 
        html: '⭐ <a href="https://github.com/devforth/adminforth" style="font-weight: bold; text-decoration: underline" target="_blank">Star us on GitHub</a> to support a project!',
        closable: true,
        title: 'Support us for free',
      }
    }
  },

Here's what the announcement will look like: