Intro

This is a package specifically for EUC Development team, which contains helper functions and basic setup for SharePoint front-end development with NuxtJS framework.

At the moment the package can be used to:

• setup Axios
• setup Axios queries (library to interact with SharePoint API)
• import and use User class with specific user functions
• import and use Url class with custom URL functions
• import and use Filter component class with custom URL functions

Installation

npm i @euc-development/shp-helpers

Setup Axios Queries

Axios Queries is a library of functions to easily interact with the SharePoint API. To inject these functions to the project, you need to import setupAxiosQueries function with below arguments and inject the returned value via Nuxt plugin:

• $axios - the axios instance of NuxtJS
• serverRelativeUrl - exact subsite of the SharePoint, for example /sites/study-center_cs

import { SERVER_RELATIVE_URL } from "~/global/config";
import { setupAxiosQueries } from "@euc-development/shp-helpers";

export default ({ $axios }, inject) => {

	axiosQueries = setupAxiosQueries($axios, SERVER_RELATIVE_URL)

	inject('q', axiosQueries)
}

Available Query Functions

List Item Queries

fetchListItems

Fetch items of selected list. Max items (top) is 5000 in a single query.

• listName
• options

const {
	select = "",
	expand = "",
	top = "5000",
	filter = "",
	orderby = "",
	paginate = false,
} = options;

fetchListItemsNoTop

Fetch items of selected list. Fetches all items in 5000 item chunks and merges them to a single array, which is returned.

• listName
• options

const {
	select = "",
	expand = "",
	filter = "",
	orderby = "",
} = options;

fetchListItem

Fetches a list item.

• listName
• itemId
• options

const { select = "", expand = "" } = options;

fetchListItemVersions

Fetches versions of a list item.

• listName
• itemId
• options

const {
			select = "",
			expand = "",
			extendQuery = "" // f.e. '/File/LockedByUser'
		} = options;

getListItemEntityTypeFullName

Gets ListItemEntityTypeFullName parameter of the list item

• listName

createListItem

Creates a list item

• listName
• payload
• options

const { select = "", expand = "" } = options;

updateListItem

Updates a list item

• listName
• itemId
• payload

deleteListItem

Deletes a list item (puts it into the recycle bin)

• listName
• itemId

List Item Permission Queries

listItemHasUniqueRoleAssignments

Determines, whether unique psrmissions are applied to the list item

• listName
• itemId

listItemBreakRoleInheritance

Breakes role inheritence on the list item

• listName
• itemId
• options

const { preservePermissions = true } = options;

listItemResetRoleInheritance

Resets role inheritence on the list item

• listName
• itemId

listItemAddPermission

Adds a new permission to the list item if the role inheritence is broken

• listName
• itemId
• principalId - ID of user or group
• roleDefinitionId - ID of permission

listItemRemovePermission

Removes a permission from the list item if the role inheritence is broken

• listName
• itemId
• principalId - ID of user or group
• roleDefinitionId - ID of permission. If not specified, all permissions are revoked from user or group

fetchListItemRoleAssignments

• listName
• itemId
• options

const { select = "" } = options;

fetchListItemRoleDefinitionBindings

• listName
• itemId
• principalId - ID of user or group

const { select = "", filter = "" } = options;

File / Folder Queries

createFolder

Creates folder in the specified library

• parentFolderPath - path to the folder, f. e. ExampleLibrary/Folder1/Folder2

uploadFileToLibrary

Uploades a file to the specified folder and library

• file - file object
• folderPath - path to the folder, f. e. ExampleLibrary/Folder1/Folder2
• options = {}
• fileName = file.name - name of the file

const { overwrite = true } = options;

deleteFileFromLibrary

Deletes a file from the specified folder and library

• filePath - path to the folder, f. e. ExampleLibrary/Folder1/Folder2/file.xlsx

updateFileAttributes

Updates attributes of a file in the library. Be careful with this funcionality! This data is not stored only on SharePoint, but also inside the file as metadata. This data on the SharePoint can be (and often is) overwritten by the cached metadata from Excel or other Office apps. It is best not to use this.

• filePath - path to the folder, f. e. ExampleLibrary/Folder1/Folder2/file.xlsx
• payload

fetchFilesOfFolder

Retrieves list of files on a folder

• folderPath - path to the folder, f. e. ExampleLibrary/Folder1/Folder2
• options = {}

const { select = "" } = options;

fetchFile

Fetches attributes of a file

• filePath - path to the folder, f. e. ExampleLibrary/Folder1/Folder2/file.xlsx
• options

const { select = "", expand = "" } = options;

renameFileInLibrary

Renames file

• filePath - path to the folder, f. e. ExampleLibrary/Folder1/Folder2/file.xlsx
• newName

File / Folder Permission Queries

folderBreakRoleInheritance

Breakes role inheritence on the folder

• folderPath - path to the folder, f. e. ExampleLibrary/Folder1/Folder2
• options = {}

const { preservePermissions = true } = options;

folderResetInheritance

Resets role inheritence on the folder

folderAddPermission

Adds a new permission to the folder if the role inheritence is broken

• folderPath - path to the folder, f. e. ExampleLibrary/Folder1/Folder2
• principalId - ID of user or group
• roleDefinitionId - ID of permission

folderRemovePermission

Removes a permission from the folder if the role inheritence is broken

• folderPath - path to the folder, f. e. ExampleLibrary/Folder1/Folder2
• principalId - ID of user or group
• roleDefinitionId - ID of permission. If not specified, all permissions are revoked from user or group

User Queries

fetchUserList

Fetches all users present on current SharePoint

• options = {}

const { select = "", expand = "" } = options;

ensureUser

Adds the user to internal DB, if not present and returnes the user's properties

• email - email of the user
• options = {}

const { select = "" } = options;

fetchCurrentUser

Fetches properties of current user

• options = {}

const { select = "", expand = "" } = options;

fetchUserById

Fetches properties of user by ID

• userId
• options = {}

const { select = "", expand = "" } = options;

fetchGroupsOfUser

Fetches groups of the user

• userId
• options = {}

const { select = "" } = options;

fetchUserProperties

Fetches AD properties of the user

• email - email of the user
• options = {}

const { select = "" } = options;

fecthManager

Fetches line manager of the user

• emailOfSubordinate - email of the subordinate user
• options = {}

const { select = "" } = options;

Group Queries

fetchAllGroups

Fetches all SharePoint groups

• options = {}

const { select = "" } = options;

fetchGroupMembers

Fetches all members of the SharePoint group

• groupName
• options = {}

const { select = "" } = options;

addUserToGroup

Adds a user to a SharePoint group

• email
• groupId

removeUserFromGroup

Removes a user from a SharePoint group

• userEmailOrId - user's email (string) or ID (integer)
• groupId

createGroup

Creates a new SharePoint group

• payload

updateGroup

Updates the SharePoint group

• groupId
• payload

changeGroupOwner

Changes the owner of the SharePoint group

• targetGroupId - ID of the group
• ownerId - ID of owner user or group

deleteGroup

Deletes the SharePoint group

• groupId

Site Queries

fetchSiteId

Fetches the ID of the site

fetchToken

Fetches new token for currently logged in user

fetchRoleDefinitions

Fetches existing permissions on the site

• options = {}

const { select = "" } = options;

getSiteId

Fetches the ID of the current site

Setup Axios

The package was written to work with the @nuxtjs/axios. This step will set up basic headers for axios to use in all queries. Furthermore it will set the base URL to use in the whole project. To make the setup complete, you only need to import and call setupAxios function via Nuxt plugins with arguments:

• $axios - the axios instance of NuxtJS
• store - the store instance of NuxtJS
• server - base URL of the server or local host, for example http://localhost:8080 or https://xyz.sharepoint.com
• serverRelativeUrl - exact subsite of the SharePoint, for example /sites/study-center_cs

import { SERVER_RELATIVE_URL, LOCAL_HOST_URL, SHAREPOINT_SERVER_URL, } from "~/global/config";
import { setupAxios } from "@euc-development/shp-helpers";

export default function ({ store, $axios }) {
	let server;

	if (process.env.NODE_ENV === "development") server = LOCAL_HOST_URL;
	else server = SHAREPOINT_SERVER_URL;

	setupAxios($axios, store, server, SERVER_RELATIVE_URL);

	window.setInterval(function () {
		store.dispatch("auth/fetchUser");
	}, 480000);
}

User Class

To use the User class, simply import it:

import { User } from "@euc-development/shp-helpers"

User Class Functions and Parameters

Constructor

Maps user object keys directly to class.

• user - SharePoint user object
• options - (optional) an object with options
  • eucGroupName - name of the EUC Dev (admin) group. By default EUC Development

setUser

Maps user object keys directly to class.

• user - SharePoint user object

setGroups

Sets groups parameter

• groups - SharePoint groups of user

setToken

Sets token parameter

• token - SharePoint token of user

setAdProperties

Sets adProperties parameter

• adProperties - SharePoint AD properties of user

setManager

Sets manager parameter

• manager - manager of user

isAdmin

Checks if user is site admin or has EUC group, returns bool

hasGroup

Checks if user has a group by title, returns bool

• groupTitle

hasGroupOrAdmin

Checks if user has a group by title, or is admin. Returns bool

• groupTitle

Filter Component

To use the filter component, first import the lang file to your project:

import { filtersEnLocales } from "@euc-development/shp-helpers";

export default {
	$vuetify: en,

	...iamEnLocales,
	...migrationsEnLocales,
	...filtersEnLocales,

Next import the component to your Vue page / component:

components: {
      "filter-component": require("@euc-development/shp-helpers/components/filter/filter.vue").default,
   },

Send the required props to it:

<filter-component :items="reviews" v-model="filteredReviews" :filter-data="filterData" />

• items - array of items you would like to filter
• v-model - should be empty array initially, filtered items will be returned this way
• filter-data - setup of the folder, see next section

Optional props:

• cols (default: 12) - vuetify row columns setup
• sm (default: 6) - vuetify row columns setup
• md (default: 3) - vuetify row columns setup
• lg - vuetify row columns setup
• xl - vuetify row columns setup

Filter Data

Array of objects, where each object represent a filter field. Required parameters for each field:

• type - type of the filter
  • number - the corresponding parameter should be a number. A free text field is generated (limited to numbers), searches number in a number field.
  • string - the corresponding parameter should be a string. A free text field is generated, searches string in a string field.
  • bool - the corresponding parameter should be a boolean. Two options (yes/no) are generated to a dropdown list.
  • selectNumber - the corresponding parameter should be a number. All available options are generated to a dropdown field, where multiselect is possible.
  • selectString - the corresponding parameter should be a string. All available options are generated to a dropdown field, where multiselect is possible.
  • selectObject - the corresponding parameter should be an object with Id and Title values. All available options are generated to a dropdown field.
  • selectObjectMulti - the corresponding parameter should be an array of objects with Id and Title values. All available options are generated to a dropdown field.
  • date - the corresponding parameter should be a date in any string format acceptable by Moment package
• paramPath - path to the parameter of the item
• label - label / placeholder in the input field

Optional parameters:

• queryParam - Default: paramPath. The query parameter for the field in the URL.
• sortBy - Default: Title. Available for selectObject and selectObjectMulti. Available values: Id or Title.
• idParam - Default: Id. Available for selectObject and selectObjectMulti. The id value available at paramPath.
• titleParam - Default: Title. Available for selectObject and selectObjectMulti. The title/text value available at paramPath.
• cols, sm, md, lg, xl - overrides the column settings for the specific field
• dateType - available only for date filter, possible values:
  • exact - this is the default if not provided
  • from - filters dates equal or bigger than the search string
  • to - filters dates equal or smaller than the search string

Data Table Pagination Mixin

This mixin works together with the data table component of Vuetify. It adds query parameters to the url, when pagination, items per page or sorting is changed, so that after refresh the table looks the same.

First import the mixin:

<script>
import { dataTablePaginationMixin } from "@euc-development/shp-helpers";

export default {
   mixins: [dataTablePaginationMixin],

Then add the parameters @update:options="updateOptions" and :options.sync="options" to the data table.

 <v-data-table
         @update:options="updateOptions"
         :options.sync="options"
         :search="search"
         :items="filteredAssets"
         :headers="headers"
      >

URL Class

This is a custom class to manage the URL and its query parameters. To use it, simply import it:

import { Url } from "@euc-development/shp-helpers"

getParam

Gets parameter from URL

• key
• type (optional) default: string. How to return the parameter. Other possibilities: int or bool.

getParams

Gets multiple parameters from URL

• keyTypeArr array of objects with key and return type (optional)

setParam

Sets qeury parameter in URL

• key
• value

setParams

Sets multiple parameters

• keyValueArr array of objects with key and value

clearParams

Clears all parameters