@nextcloud/vue
Version:
Nextcloud vue components
212 lines (211 loc) • 7.04 kB
JavaScript
require('../assets/NcSettingsSelectGroup-CzD7YrGm.css');
;
const NcSelect = require("./NcSelect-CKgkjF4m.cjs");
const _l10n = require("./_l10n-Ci9_UR5q.cjs");
const GenRandomId = require("./GenRandomId-BQDud3d4.cjs");
const axios = require("@nextcloud/axios");
const debounce = require("debounce");
const router = require("@nextcloud/router");
const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
const axios__default = /* @__PURE__ */ _interopDefault(axios);
const debounce__default = /* @__PURE__ */ _interopDefault(debounce);
_l10n.register(_l10n.t47);
const _sfc_main = {
name: "NcSettingsSelectGroup",
components: {
NcSelect: NcSelect.NcSelect
},
props: {
/**
* The text of the label element of the select group input
*/
label: {
type: String,
required: true
},
/**
* Placeholder for the input element
* For backwards compatibility it falls back to the `label` value
*/
placeholder: {
type: String,
default: ""
},
/**
* id attribute of the select group element
*/
id: {
type: String,
default: () => "action-" + GenRandomId.GenRandomId(),
validator: (id) => id.trim() !== ""
},
/**
* value of the select group input
* A list of group IDs can be provided
*/
value: {
type: Array,
default: () => []
},
/**
* disabled state of the settings select group input
*/
disabled: {
type: Boolean,
default: false
}
},
emits: [
"input",
"error"
],
data() {
return {
/** Temporary store to cache groups */
groups: {},
randId: GenRandomId.GenRandomId(),
errorMessage: ""
};
},
computed: {
/**
* If the error message should be shown
*/
hasError() {
return this.errorMessage !== "";
},
/**
* Validate input value and only return valid strings (group IDs)
*
* @return {string[]}
*/
filteredValue() {
return this.value.filter((group) => group !== "" && typeof group === "string");
},
/**
* value property converted to an array of group objects used as input for the NcSelect
*/
inputValue() {
return this.filteredValue.map(
(id) => {
if (typeof this.groups[id] === "undefined") {
return {
id,
displayname: id
};
}
return this.groups[id];
}
);
},
/**
* Convert groups object to array of groups required for NcSelect.options
* Filter out currently selected values
*
* @return {object[]}
*/
groupsArray() {
return Object.values(this.groups).filter((g) => !this.value.includes(g.id));
}
},
watch: {
/**
* If the value is changed, check that all groups are loaded so we show the correct display name
*/
value: {
handler() {
const loadedGroupIds = Object.keys(this.groups);
const missing = this.filteredValue.filter((group) => !loadedGroupIds.includes(group));
missing.forEach((groupId) => {
this.loadGroup(groupId);
});
},
// Run the watch handler also when the component is initially mounted
immediate: true
}
},
/**
* Load groups matching the empty query to reduce API calls
*/
async mounted() {
const storageName = "".concat(appName, ":").concat(appVersion, "/initialGroups");
let savedGroups = window.sessionStorage.getItem(storageName);
if (savedGroups) {
savedGroups = Object.fromEntries(JSON.parse(savedGroups).map((group) => [group.id, group]));
this.groups = { ...this.groups, ...savedGroups };
} else {
await this.loadGroup("");
window.sessionStorage.setItem(storageName, JSON.stringify(Object.values(this.groups)));
}
},
methods: {
t: _l10n.t,
/**
* Called when a new group is selected or previous group is deselected to emit the update event
*
* @param {object[]} updatedValue Array of selected groups
*/
update(updatedValue) {
const value = updatedValue.map((element) => element.id);
this.$emit("input", value);
},
/**
* Use provisioning API to search for given group and save it in the groups object
*
* @param {string} query The query like parts of the id oder display name
* @return {boolean}
*/
async loadGroup(query) {
try {
query = typeof query === "string" ? encodeURI(query) : "";
const response = await axios__default.default.get(router.generateOcsUrl("cloud/groups/details?search=".concat(query, "&limit=10"), 2));
if (this.errorMessage !== "") {
window.setTimeout(() => {
this.errorMessage = "";
}, 5e3);
}
if (Object.keys(response.data.ocs.data.groups).length > 0) {
const newGroups = Object.fromEntries(response.data.ocs.data.groups.map((element) => [element.id, element]));
this.groups = { ...this.groups, ...newGroups };
return true;
}
} catch (error) {
this.$emit("error", error);
this.errorMessage = _l10n.t("Unable to search the group");
}
return false;
},
/**
* Custom filter function for `NcSelect` to filter by ID *and* display name
*
* @param {object} option One of the groups
* @param {string} label The label property of the group
* @param {string} search The current search string
*/
filterGroups(option, label, search) {
return "".concat(label || "", " ").concat(option.id).toLocaleLowerCase().indexOf(search.toLocaleLowerCase()) > -1;
},
/**
* Debounce the group search (reduce API calls)
*/
onSearch: debounce__default.default(function(query) {
this.loadGroup(query);
}, 200)
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("div", [_vm.label ? _c("label", { staticClass: "hidden-visually", attrs: { "for": _vm.id } }, [_vm._v(_vm._s(_vm.label))]) : _vm._e(), _c("NcSelect", { attrs: { "value": _vm.inputValue, "options": _vm.groupsArray, "placeholder": _vm.placeholder || _vm.label, "filter-by": _vm.filterGroups, "input-id": _vm.id, "limit": 5, "label": "displayname", "multiple": true, "close-on-select": false, "disabled": _vm.disabled }, on: { "input": _vm.update, "search": _vm.onSearch } }), _c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.hasError, expression: "hasError" }], staticClass: "select-group-error" }, [_vm._v(" " + _vm._s(_vm.errorMessage) + " ")])], 1);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns,
false,
null,
"75b4f01b"
);
const NcSettingsSelectGroup = __component__.exports;
exports.NcSettingsSelectGroup = NcSettingsSelectGroup;