@nextcloud/vue
Version:
Nextcloud vue components
238 lines (237 loc) • 7.44 kB
JavaScript
import '../assets/NcSettingsSelectGroup-B9FlWQVH.css';
import axios from "@nextcloud/axios";
import { generateOcsUrl } from "@nextcloud/router";
import debounce from "debounce";
import { N as NcSelect } from "./NcSelect-PvjbF3jF.mjs";
import { u as useModelMigration } from "./useModelMigration-EhAWvqDD.mjs";
import { r as register, h as t49, a as t } from "./_l10n-BEfeU7gr.mjs";
import { G as GenRandomId } from "./GenRandomId-F5ebeBB_.mjs";
import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
register(t49);
const _sfc_main = {
name: "NcSettingsSelectGroup",
components: {
NcSelect
},
model: {
prop: "modelValue",
event: "update:modelValue"
},
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(),
validator: (id) => id.trim() !== ""
},
/**
* Removed in v9 - use `modelValue` (`v-model`) instead
*
* @deprecated
*/
value: {
type: Array,
default: void 0
},
/**
* value of the select group input
* A list of group IDs can be provided
*/
modelValue: {
type: Array,
default: () => []
},
/**
* disabled state of the settings select group input
*/
disabled: {
type: Boolean,
default: false
}
},
emits: [
/**
* Removed in v9 - use `update:modelValue` (`v-model`) instead
*
* @deprecated
*/
"input",
/** Emitted when the groups selection changes<br />**Payload:** `value` (`Array`) - *Ids of selected groups */
"update:modelValue",
/** Same as update:modelValue for Vue 2 compatibility */
"update:model-value",
"error"
],
setup() {
const model = useModelMigration("value", "input");
return {
model
};
},
data() {
return {
/** Temporary store to cache groups */
groups: {},
randId: 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.model.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.model.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 = `${appName}:${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,
/**
* 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.model = 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.get(generateOcsUrl(`cloud/groups/details?search=${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 = 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 `${label || ""} ${option.id}`.toLocaleLowerCase().indexOf(search.toLocaleLowerCase()) > -1;
},
/**
* Debounce the group search (reduce API calls)
*/
onSearch: debounce(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: { "update:model-value": _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__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns,
false,
null,
"9d59765b"
);
const NcSettingsSelectGroup = __component__.exports;
export {
NcSettingsSelectGroup as N
};
//# sourceMappingURL=NcSettingsSelectGroup-C-YAk1f8.mjs.map