Skip to content
This repository has been archived by the owner on Apr 20, 2024. It is now read-only.

ml-archive/admin-panel

Repository files navigation

admin-panel

Login screen

Successful login

Manage users

Features

Confirm Modal

Admin Panel includes a generic confirmation modal for links, out of the box. Using HTML data attributes on <a>-tags the modal can be configured in different ways. Just add a data attribute to your link and you're all set.

Triggering the modal will append a HTML-element form to the DOM, containing title, text, confirm button and dismiss button.

By default confirm submits the form and dismiss will remove the HTML-element from the DOM

Basic usage

<a href="#" data-confirm="true">Open modal</a>

Data Attributes

Attribute Description example
data-confirm Initialize the modal data-confirm="true"
data-title Sets the title of the modal data-title="Please confirm"
data-text Sets the text of the modal data-text="Are you sure you want to continue?"
data-button Sets bootstrap css selector for the confirm button data-button="danger" [primary,secondary,success,danger,warning,info,light,dark]
data-confirm-btn Set the text label on the "confirm"-button data-confirm-btn="Yes"
data-dismiss-btn Set the text label on the "dismiss"-button data-confirm-btn="No"

Override default behavior

// Override modal confirm action
modalConfirmation.actions.confirm = function(event) {
    alert("Confirmed");
}

// Overríde modal dismiss action
modalConfirmation.actions.dismiss = function(event) {
    alert("Dismissed");
}

Leaf tags

Admin panel comes with a variety of leaf tags for generating certain HTML/js elements

#adminPanel:avatarURL

Use user image or fallback to Adorable avatars

Parameter Type Description
email String user's email
url String image url

Example usage

<img src="#adminPanel:avatarURL(user.email, user.avatarURL)" alt="Profile picture" class="img-thumbnail" width="40">

#adminPanel:config

Convenience method to output configuration strings such as app or environment name or paths to certain templates

Supported input values and what they output

  • name: App name
  • baseURL: App base URL
  • sidebarMenuPath: Path to sidebar menu view template
  • dashboardPath: Path to dashboard view template
  • environment: Environment name
Parameter Type Description
configName String Config variable name

Example usage

<!-- outputs app name ->
#adminPanel:config("name")

#adminPanel:user

Outputs a field on the current user object as a string

Parameter Type Description
fieldName String User field name

Example usage

<!-- outputs user's name ->
#adminPanel:user("name")

#adminPanel:user:requireRole

Make sure user has required role to output element. If not throws an error.

Parameter Type Description
roleName String User role

Example usage

#adminPanel:user:requireRole("superAdmin") {
    <div>I show if user is super admin</div>
}

#adminPanel:user:hasRequiredRole

Check if user has a required role

Parameter Type Description
roleName String User role

Example usage

#if(adminPanel:user:hasRequiredRole("superAdmin")) {
    // Do something
} else {
    // Do something else
}

#adminPanel:sidebar:heading

Renders a header, styled in a certain way, for the navigation sidebar.

Example usage

#adminPanel:sidebar:heading() { Super Admin }

#adminPanel:sidebar:menuItem

Renders a sidebar menu item, styled in a certain way, for the navigation sidebar.

Parameter Type Description
url String Menu item link reference
icon String Feather icon for menu item
activeURLPatterns String URL pattern to determine active state

Example usage

#adminPanel:sidebar:menuItem("/admin/dashboard", "home", "/admin/dashboard*") { Home }