Playlist builder UI

Nuxt-Listing repository.

Display and manage any type of list and playlists with learning content.

This library provides a set of handy components to build list.

Prerequisites

This library uses the following dependencies:

  • Pugjs instead of plain HTML for templating

  • Vuetifyjs As UI design framework based on Material

  • NuxtJS 2 (use in Vuejs or Nuxt 3 on your own risk)

  • Lodash Library which provide functions for working with arrays, numbers, objects, strings

  • MomentJs Library to parse, validate, manipulate, and display date/time

  • VueSlickSort Library to perform drag and drop of items in a list

Components

ListingLists

Description

This component renders the view of the application, allows to choose any list & displays the data of the current list.

Usage example:

listing-lists(
 :bookmark-url="https://www.example.com/e/1?m=1&slide=#slide1"
 :http="axios"
 :shared-url="https://www.example.com/list"
 :stored-list="[{}]"
 :open-list-id="1"
 :user-id="3"
 @uppdate-list="updateList"
 @delete-event="refreshEventsInLists"
 @navigate-to-bookmark="navigateToBookmark"
)

Props

Events

@update-list (Emits a flag when the item was successfully added) @delete-event (Emits a flag when any wish list or event added in any wish list was removed) @navigate-to-bookmark (Emits the saved note url when the chip button is clicked)

HTTP Requests

It uses GET request to fetch the lists of the current user.

It uses GET request to fetch the notes of the current list.

It uses POST request to create lists.

It uses PATCH request to edit lists.

It uses DELETE request to remove lists.

ListingShared

Description

This component allows to render any public list as read only in a custom page.

Usage example:

listing-shared(:http="axios" :slug="XXXXXXXXX")

Props

Events

(This component does not have any emit)

HTTP Requests

It uses GET request to fetch the items from a public list.

ListingAddItemList

Description

This component allows to render a selector that allow to add the current event into a list.

Usage example:

listing-add-item-list(
 :fetching-list="false"
 :http="axios"
 :refresh-events-in-lists="getRefreshEventsInLists"
 :list-item="course"
 :stored-list="[{}]"
 :user-id="3
 @item-added="newItemAdded"
 @update-list="updateList"
 @fetching-list="fetchList"
 @refresh-lists="refreshEventsInLists"
)

Props

Events

@item-added (Emits a flag when the item was successfully added) @update-list (Emits the response of the GET list request) @fetching-list (Emits a flag to handle the GET list request to don't send the same request multiple times) @refresh-lists (Emits a flag to notify the app to handle the GET list request with url parameter to fetch if the current event itd added in any list)

HTTP Requests

It uses GET request to fetch the items from a list.

It uses GET request to fetch the lists.

It uses GET request to fetch if the current event is already added in any list.

It uses POST request to add an item to a lists.

ListingAddItemListIconDesign

Description

This component allows to render a button that allow to add the current event into the first list. It extends from the component ListingAddItemList

Usage example:

listing-add-item-list-icon-design(
 add-icon="mdi-heart-plus"
 already-added-icon="mdi-heart-multiple"  
 :fetching-list="false"
 :http="axios"
 icon-color="#ff0000"
 :icon-size="30"
 :refresh-events-in-lists="getRefreshEventsInLists"
 :list-item="course"
 :stored-list="[{}]" 
 :user-id="3 
 @item-added="newItemAdded"
 @update-list="updateList"
 @fetching-list="fetchList"
 @refresh-lists="refreshEventsInLists"
)

Props

Events

@item-added (Emits a flag when the item was successfully added) @update-list (Emits the response of the GET list request) @fetching-list (Emits a flag to handle the GET list request to don't send the same request multiple times) @refresh-lists (Emits a flag to notify the app to handle the GET list request with url parameter to fetch if the current event itd added in any list)

HTTP Requests

It uses GET request to fetch the items from a list.

It uses GET request to fetch the lists.

It uses GET request to fetch the events from the first list.

It uses GET request to fetch if the current event is already added in any list.

It uses POST request to add an item to a lists.

Other internal components

Internationalization

Nuxt I18n is used.

Some files already translated are located in the directory lib/i18n. Those files can be directly imported in the base project using i18n.mergeLocaleMessage:

this.$i18n.mergeLocaleMessage(this.$i18n.locale, require('../../lib/i18n/' + this.$i18n.locale + '/views'))

Development

  • Clone the repository git clone https://gitlab.com/eduplex-api/nuxt-listing.git in the root of any Nuxtjs app.

  • Import statically components manually when needed using import { ListingLists } from '../../nuxt-listing/index'

  • Import dynamically components manually using ListingShared: () => import('../../nuxt-listing/shared')

  • Build your project as usual

License

The source code for the site is licensed under the MIT license, which you can find in the LICENSE file.

Last updated