@nextcloud/vue
Version:
Nextcloud vue components
226 lines (225 loc) • 7.24 kB
JavaScript
import '../assets/NcSettingsSelectGroup-BxvEAWNm.css';
import axios from "@nextcloud/axios";
import { generateOcsUrl } from "@nextcloud/router";
import debounce from "debounce";
import { N as NcSelect } from "./NcSelect-Czzsi3P_.mjs";
import { r as register, e as t49, a as t } from "./_l10n-DrTiip5c.mjs";
import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
import { resolveComponent, createElementBlock, openBlock, createCommentVNode, createVNode, withDirectives, toDisplayString, createElementVNode, vShow } from "vue";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
register(t49);
const _sfc_main = {
name: "NcSettingsSelectGroup",
components: {
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-" + createElementId(),
validator: (id) => id.trim() !== ""
},
/**
* 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: [
"error",
"input",
"update:modelValue"
],
data() {
return {
/** Temporary store to cache groups */
groups: {},
randId: createElementId(),
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.modelValue.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.modelValue.includes(g.id));
}
},
watch: {
/**
* If the value is changed, check that all groups are loaded so we show the correct display name
*/
modelValue: {
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.$emit("update:modelValue", 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)
}
};
const _hoisted_1 = ["for"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_NcSelect = resolveComponent("NcSelect");
return openBlock(), createElementBlock("div", null, [
$props.label ? (openBlock(), createElementBlock("label", {
key: 0,
for: $props.id,
class: "hidden-visually"
}, toDisplayString($props.label), 9, _hoisted_1)) : createCommentVNode("", true),
createVNode(_component_NcSelect, {
"model-value": $options.inputValue,
options: $options.groupsArray,
placeholder: $props.placeholder || $props.label,
"filter-by": $options.filterGroups,
"input-id": $props.id,
limit: 5,
label: "displayname",
multiple: true,
"close-on-select": false,
disabled: $props.disabled,
"onUpdate:modelValue": $options.update,
onSearch: $options.onSearch
}, null, 8, ["model-value", "options", "placeholder", "filter-by", "input-id", "disabled", "onUpdate:modelValue", "onSearch"]),
withDirectives(createElementVNode("div", { class: "select-group-error" }, toDisplayString($data.errorMessage), 513), [
[vShow, $options.hasError]
])
]);
}
const NcSettingsSelectGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-21e2bf0c"]]);
export {
NcSettingsSelectGroup as N
};
//# sourceMappingURL=NcSettingsSelectGroup-CuRTrvVN.mjs.map