@nextcloud/vue

Version:

Nextcloud vue components

github.com/nextcloud-libraries/nextcloud-vue

1 lines • 10.3 kB

Source Map (JSON)

{"version":3,"file":"NcSettingsSelectGroup.mjs","sources":["../../src/components/NcSettingsSelectGroup/NcSettingsSelectGroup.vue"],"sourcesContent":["\n\n<docs>\n```vue\n<template>\n\t<section>\n\t\t<NcSettingsSelectGroup v-model=\"groups\" placeholder=\"Select user groups\" label=\"The hidden label\" />\n\t\t<NcSettingsSelectGroup v-model=\"otherGroups\" :disabled=\"true\" label=\"Also a fallback for the placeholder\" />\n\t\t<div>You have selected: <code>{{ groups }}</code> and <code>{{ otherGroups }}</code></div>\n\t</section>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tgroups: [],\n\t\t\totherGroups: ['admin']\n\t\t}\n\t}\n}\n</script>\n<style scoped>\nsection * {\n\tpadding: 6px 0px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<div>\n\t\t<label v-if=\"label\" :for=\"id\" class=\"hidden-visually\">{{ label }}</label>\n\t\t<NcSelect :value=\"inputValue\"\n\t\t\t:options=\"groupsArray\"\n\t\t\t:placeholder=\"placeholder || label\"\n\t\t\t:filter-by=\"filterGroups\"\n\t\t\t:input-id=\"id\"\n\t\t\t:limit=\"5\"\n\t\t\tlabel=\"displayname\"\n\t\t\t:multiple=\"true\"\n\t\t\t:close-on-select=\"false\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t@input=\"update\"\n\t\t\t@search=\"onSearch\" />\n\t</div>\n</template>\n\n<script>\nimport NcSelect from '../../components/NcSelect/index.js'\nimport { t } from '../../l10n.js'\nimport l10n from '../../mixins/l10n.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport axios from '@nextcloud/axios'\nimport { showError } from '@nextcloud/dialogs'\nimport { generateOcsUrl } from '@nextcloud/router'\nimport { debounce } from 'debounce'\n\nexport default {\n\tname: 'NcSettingsSelectGroup',\n\tcomponents: {\n\t\tNcSelect,\n\t},\n\tmixins: [l10n],\n\tprops: {\n\t\t/**\n\t\t * The text of the label element of the select group input\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Placeholder for the input element\n\t\t * For backwards compatibility it falls back to the `label` value\n\t\t */\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * id attribute of the select group element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'action-' + GenRandomId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\n\t\t/**\n\t\t * value of the select group input\n\t\t * A list of group IDs can be provided\n\t\t */\n\t\tvalue: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/**\n\t\t * disabled state of the settings select group input\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\temits: [\n\t\t'input',\n\t\t'error',\n\t],\n\tdata() {\n\t\treturn {\n\t\t\t/** Temporary store to cache groups */\n\t\t\tgroups: {},\n\t\t\trandId: GenRandomId(),\n\t\t}\n\t},\n\tcomputed: {\n\t\t/**\n\t\t * Validate input value and only return valid strings (group IDs)\n\t\t *\n\t\t * @return {string[]}\n\t\t */\n\t\tfilteredValue() {\n\t\t\treturn this.value.filter((group) => group !== '' && typeof group === 'string')\n\t\t},\n\n\t\t/**\n\t\t * value property converted to an array of group objects used as input for the NcSelect\n\t\t */\n\t\tinputValue() {\n\t\t\treturn this.filteredValue.map(\n\t\t\t\t(id) => {\n\t\t\t\t\tif (typeof this.groups[id] === 'undefined') {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\tid,\n\t\t\t\t\t\t\tdisplayname: id,\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn this.groups[id]\n\t\t\t\t},\n\t\t\t)\n\t\t},\n\n\t\t/**\n\t\t * Convert groups object to array of groups required for NcSelect.options\n\t\t * Filter out currently selected values\n\t\t *\n\t\t * @return {object[]}\n\t\t */\n\t\tgroupsArray() {\n\t\t\treturn Object.values(this.groups).filter(g => !this.value.includes(g.id))\n\t\t},\n\t},\n\twatch: {\n\t\t/**\n\t\t * If the value is changed, check that all groups are loaded so we show the correct display name\n\t\t */\n\t\tvalue: {\n\t\t\thandler() {\n\t\t\t\tconst loadedGroupIds = Object.keys(this.groups)\n\t\t\t\tconst missing = this.filteredValue.filter(group => !loadedGroupIds.includes(group))\n\t\t\t\tmissing.forEach((groupId) => {\n\t\t\t\t\tthis.loadGroup(groupId)\n\t\t\t\t})\n\t\t\t},\n\t\t\t// Run the watch handler also when the component is initially mounted\n\t\t\timmediate: true,\n\t\t},\n\t},\n\t/**\n\t * Load groups matching the empty query to reduce API calls\n\t */\n\tasync mounted() {\n\t\t// version scoped to prevent issues with different library versions\n\t\tconst storageName = `${appName}:${appVersion}/initialGroups`\n\n\t\tlet savedGroups = window.sessionStorage.getItem(storageName)\n\t\tif (savedGroups) {\n\t\t\tsavedGroups = Object.fromEntries(JSON.parse(savedGroups).map(group => [group.id, group]))\n\t\t\tthis.groups = { ...this.groups, ...savedGroups }\n\t\t} else {\n\t\t\tawait this.loadGroup('')\n\t\t\twindow.sessionStorage.setItem(storageName, JSON.stringify(Object.values(this.groups)))\n\t\t}\n\t},\n\tmethods: {\n\t\t/**\n\t\t * Called when a new group is selected or previous group is deselected to emit the update event\n\t\t *\n\t\t * @param {object[]} updatedValue Array of selected groups\n\t\t */\n\t\tupdate(updatedValue) {\n\t\t\tconst value = updatedValue.map((element) => element.id)\n\t\t\t/** Emitted when the groups selection changes<br />**Payload:** `value` (`Array`) - *Ids of selected groups */\n\t\t\tthis.$emit('input', value)\n\t\t},\n\n\t\t/**\n\t\t * Use provisioning API to search for given group and save it in the groups object\n\t\t *\n\t\t * @param {string} query The query like parts of the id oder display name\n\t\t * @return {boolean}\n\t\t */\n\t\tasync loadGroup(query) {\n\t\t\ttry {\n\t\t\t\tquery = typeof query === 'string' ? encodeURI(query) : ''\n\t\t\t\tconst response = await axios.get(generateOcsUrl(`cloud/groups/details?search=${query}&limit=10`, 2))\n\n\t\t\t\tif (Object.keys(response.data.ocs.data.groups).length > 0) {\n\t\t\t\t\tconst newGroups = Object.fromEntries(response.data.ocs.data.groups.map((element) => [element.id, element]))\n\t\t\t\t\tthis.groups = { ...this.groups, ...newGroups }\n\t\t\t\t\treturn true\n\t\t\t\t}\n\t\t\t} catch (error) {\n\t\t\t\t/** Emitted if groups could not be queried.<br />**Payload:** `error` (`object`) - The Axios error */\n\t\t\t\tthis.$emit('error', error)\n\t\t\t\tshowError(t('Unable to search the group'))\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\n\t\t/**\n\t\t * Custom filter function for `NcSelect` to filter by ID *and* display name\n\t\t *\n\t\t * @param {object} option One of the groups\n\t\t * @param {string} label The label property of the group\n\t\t * @param {string} search The current search string\n\t\t */\n\t\tfilterGroups(option, label, search) {\n\t\t\treturn `${label || ''} ${option.id}`.toLocaleLowerCase().indexOf(search.toLocaleLowerCase()) > -1\n\t\t},\n\n\t\t/**\n\t\t * Debounce the group search (reduce API calls)\n\t\t */\n\t\tonSearch: debounce(function(query) {\n\t\t\tthis.loadGroup(query)\n\t\t}, 200),\n\t},\n}\n</script>\n"],"names":["_sfc_main","NcSelect","l10n","GenRandomId","id","group","g","loadedGroupIds","groupId","storageName","savedGroups","updatedValue","value","element","query","response","axios","generateOcsUrl","newGroups","error","showError","t","option","label","search","debounce"],"mappings":"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"}