@nextcloud/vue/dist/Components/NcSettingsSelectGroup.cjs.map

Nextcloud vue components

{"version":3,"file":"NcSettingsSelectGroup.cjs","sources":["../../src/components/NcSettingsSelectGroup/NcSettingsSelectGroup.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>\n  -\n  - @author Julius Härtl <jus@bitgrid.net>\n  - @author Greta Doci <gretadoci@gmail.com>\n  - @author Ferdinand Thiessen <opensource@fthiessen.de>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\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":"+bAgFAA,EAAA,CACA,KAAA,wBACA,WAAA,CACA,SAAAC,CACA,EACA,OAAA,CAAAC,EAAAA,IAAA,EACA,MAAA,CAIA,MAAA,CACA,KAAA,OACA,SAAA,EACA,EAMA,YAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,GAAA,CACA,KAAA,OACA,QAAA,IAAA,UAAAC,cAAA,EACA,UAAAC,GAAAA,EAAA,KAAA,IAAA,EACA,EAMA,MAAA,CACA,KAAA,MACA,QAAA,IAAA,CAAA,CACA,EAKA,SAAA,CACA,KAAA,QACA,QAAA,EACA,CACA,EACA,MAAA,CACA,QACA,OACA,EACA,MAAA,CACA,MAAA,CAEA,OAAA,CAAA,EACA,OAAAD,EAAAA,YAAA,CACA,CACA,EACA,SAAA,CAMA,eAAA,CACA,OAAA,KAAA,MAAA,OAAAE,GAAAA,IAAA,IAAA,OAAAA,GAAA,QAAA,CACA,EAKA,YAAA,CACA,OAAA,KAAA,cAAA,IACAD,GACA,OAAA,KAAA,OAAAA,CAAA,EAAA,IACA,CACA,GAAAA,EACA,YAAAA,CACA,EAEA,KAAA,OAAAA,CAAA,CAEA,CACA,EAQA,aAAA,CACA,OAAA,OAAA,OAAA,KAAA,MAAA,EAAA,OAAAE,GAAA,CAAA,KAAA,MAAA,SAAAA,EAAA,EAAA,CAAA,CACA,CACA,EACA,MAAA,CAIA,MAAA,CACA,SAAA,CACA,MAAAC,EAAA,OAAA,KAAA,KAAA,MAAA,EACA,KAAA,cAAA,OAAAF,GAAA,CAAAE,EAAA,SAAAF,CAAA,CAAA,EACA,QAAAG,GAAA,CACA,KAAA,UAAAA,CAAA,CACA,CAAA,CACA,EAEA,UAAA,EACA,CACA,EAIA,MAAA,SAAA,CAEA,MAAAC,EAAA,GAAA,OAAA,IAAA,UAAA,iBAEA,IAAAC,EAAA,OAAA,eAAA,QAAAD,CAAA,EACAC,GACAA,EAAA,OAAA,YAAA,KAAA,MAAAA,CAAA,EAAA,IAAAL,GAAA,CAAAA,EAAA,GAAAA,CAAA,CAAA,CAAA,EACA,KAAA,OAAA,CAAA,GAAA,KAAA,OAAA,GAAAK,CAAA,IAEA,MAAA,KAAA,UAAA,EAAA,EACA,OAAA,eAAA,QAAAD,EAAA,KAAA,UAAA,OAAA,OAAA,KAAA,MAAA,CAAA,CAAA,EAEA,EACA,QAAA,CAMA,OAAAE,EAAA,CACA,MAAAC,EAAAD,EAAA,IAAAE,GAAAA,EAAA,EAAA,EAEA,KAAA,MAAA,QAAAD,CAAA,CACA,EAQA,MAAA,UAAAE,EAAA,CACA,GAAA,CACAA,EAAA,OAAAA,GAAA,SAAA,UAAAA,CAAA,EAAA,GACA,MAAAC,EAAA,MAAAC,EAAA,IAAAC,EAAA,eAAA,+BAAAH,CAAA,YAAA,CAAA,CAAA,EAEA,GAAA,OAAA,KAAAC,EAAA,KAAA,IAAA,KAAA,MAAA,EAAA,OAAA,EAAA,CACA,MAAAG,EAAA,OAAA,YAAAH,EAAA,KAAA,IAAA,KAAA,OAAA,IAAAF,GAAA,CAAAA,EAAA,GAAAA,CAAA,CAAA,CAAA,EACA,OAAA,KAAA,OAAA,CAAA,GAAA,KAAA,OAAA,GAAAK,CAAA,EACA,EAEA,CAAA,OAAAC,EAAA,CAEA,KAAA,MAAA,QAAAA,CAAA,EACAC,YAAAC,EAAAA,EAAA,4BAAA,CAAA,CACA,CACA,MAAA,EACA,EASA,aAAAC,EAAAC,EAAAC,EAAA,CACA,MAAA,GAAAD,GAAA,EAAAD,IAAAA,EAAA,KAAA,kBAAA,EAAA,QAAAE,EAAA,kBAAA,CAAA,EAAA,EACA,EAKA,SAAAC,EAAAA,SAAA,SAAAX,EAAA,CACA,KAAA,UAAAA,CAAA,CACA,EAAA,GAAA,CACA,CACA"}