@nextcloud/vue
Version:
Nextcloud vue components
429 lines (428 loc) • 14.6 kB
JavaScript
import '../assets/NcRelatedResourcesPanel-BE9CQ8s8.css';
import axios from "@nextcloud/axios";
import { generateOcsUrl } from "@nextcloud/router";
import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
import { C as ChevronDown } from "./ChevronDown-D3Tfshug.mjs";
import { C as ChevronUp } from "./ChevronUp-ljACquzS.mjs";
import NcButton from "../Components/NcButton.mjs";
import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-DjrkBUkC.mjs";
import { r as register, R as t39, a as t, S as t36, T as t9 } from "./_l10n-JYjUKekn.mjs";
import { g as getRoute } from "./autolink-cbuFALXr.mjs";
const _sfc_main$4 = {
name: "AccountGroupIcon",
emits: ["click"],
props: {
title: {
type: String
},
fillColor: {
type: String,
default: "currentColor"
},
size: {
type: Number,
default: 24
}
}
};
var _sfc_render$4 = function render() {
var _vm = this, _c = _vm._self._c;
return _c("span", _vm._b({ staticClass: "material-design-icon account-group-icon", attrs: { "aria-hidden": _vm.title ? null : true, "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
return _vm.$emit("click", $event);
} } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
};
var _sfc_staticRenderFns$4 = [];
var __component__$4 = /* @__PURE__ */ normalizeComponent(
_sfc_main$4,
_sfc_render$4,
_sfc_staticRenderFns$4,
false,
null,
null
);
const AccountGroup = __component__$4.exports;
const _sfc_main$3 = {
name: "OpenInNewIcon",
emits: ["click"],
props: {
title: {
type: String
},
fillColor: {
type: String,
default: "currentColor"
},
size: {
type: Number,
default: 24
}
}
};
var _sfc_render$3 = function render2() {
var _vm = this, _c = _vm._self._c;
return _c("span", _vm._b({ staticClass: "material-design-icon open-in-new-icon", attrs: { "aria-hidden": _vm.title ? null : true, "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
return _vm.$emit("click", $event);
} } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
};
var _sfc_staticRenderFns$3 = [];
var __component__$3 = /* @__PURE__ */ normalizeComponent(
_sfc_main$3,
_sfc_render$3,
_sfc_staticRenderFns$3,
false,
null,
null
);
const OpenInNew = __component__$3.exports;
register(t39);
const _sfc_main$2 = {
name: "NcTeamResources",
components: {
AccountGroup,
ChevronDown,
ChevronUp,
OpenInNew,
NcButton,
NcIconSvgWrapper
},
props: {
providerId: {
type: String,
default: null
},
itemId: {
type: [String, Number],
default: null
}
},
data() {
var _a, _b;
return {
appEnabled: ((_a = OC == null ? void 0 : OC.appswebroots) == null ? void 0 : _a.circles) !== void 0 && ((_b = OC.config.version.split(".")[0]) != null ? _b : 0) >= 29,
loading: false,
teamResources: null,
teamOpen: []
};
},
computed: {
isVisible() {
var _a;
return !this.loading && ((_a = this.teamResources) == null ? void 0 : _a.length) > 0;
},
teamProviders() {
return (teamId) => {
var _a;
const team = this.teamResources.find((t2) => t2.teamId === teamId);
return (_a = team.resources) == null ? void 0 : _a.reduce((acc, resource) => {
if (resource.provider.id === this.providerId && resource.id === String(this.itemId)) {
return acc;
}
if (!acc[resource.provider.id]) {
acc[resource.provider.id] = resource.provider;
acc[resource.provider.id].resources = [];
}
if (resource.provider.id === this.providerId && resource.id === String(this.itemId)) {
return acc;
}
acc[resource.provider.id].resources.push(resource);
return acc;
}, {});
};
},
open() {
return (teamId) => {
return this.teamOpen.indexOf(teamId) !== -1;
};
}
},
watch: {
providerId() {
this.fetchTeamResources();
},
itemId() {
this.fetchTeamResources();
}
},
created() {
this.fetchTeamResources();
},
methods: {
t,
async fetchTeamResources() {
var _a;
try {
this.loading = true;
const response = await axios.get(generateOcsUrl("/teams/resources/".concat(this.providerId, "/").concat(this.itemId)));
this.teamResources = response.data.ocs.data.teams;
this.teamOpen = [(_a = this.teamResources[0]) == null ? void 0 : _a.teamId];
} catch (e) {
this.teamResources = null;
console.error(e);
} finally {
this.loading = false;
}
},
toggleOpen(teamId, open) {
if (open) {
this.teamOpen.push(teamId);
} else {
this.teamOpen.splice(this.teamOpen.indexOf(teamId), 1);
}
}
}
};
var _sfc_render$2 = function render3() {
var _vm = this, _c = _vm._self._c;
return _vm.appEnabled && _vm.isVisible ? _c("div", { staticClass: "team-resources" }, [_c("h5", { staticClass: "team-resources__header" }, [_vm._v(" " + _vm._s(_vm.t("Related team resources")) + " ")]), _vm._l(_vm.teamResources, function(team) {
return _c("details", { key: team.teamId, staticClass: "related-team", attrs: { "name": "Team resources", "open": _vm.open(team.teamId) }, on: { "toggle": (event) => _vm.toggleOpen(team.teamId, event.target.open) } }, [_c("summary", { staticClass: "related-team__header" }, [_c("h5", { staticClass: "related-team__name" }, [_c("AccountGroup", { attrs: { "size": 20 } }), _vm._v(" " + _vm._s(team.displayName) + " ")], 1), _c("NcButton", { attrs: { "type": "tertiary", "href": team.link, "aria-label": _vm.t("View team"), "title": _vm.t("View team") }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
return [_c("OpenInNew", { attrs: { "size": 20 } })];
}, proxy: true }], null, true) }), _vm.open(team.teamId) ? _c("ChevronUp", { attrs: { "size": 20 } }) : _c("ChevronDown", { attrs: { "size": 20 } })], 1), _c("div", _vm._l(_vm.teamProviders(team.teamId), function(provider) {
return _c("div", { key: provider.id, staticClass: "related-team-provider" }, [provider.resources.length > 0 ? _c("h6", [_vm._v(" " + _vm._s(provider.name) + " ")]) : _vm._e(), _c("ul", _vm._l(provider.resources, function(resource) {
return _c("li", { key: resource.url, staticClass: "related-team-resource" }, [_c("a", { staticClass: "related-team-resource__link", attrs: { "href": resource.url } }, [resource.iconEmoji ? _c("span", { staticClass: "resource__icon" }, [_vm._v(" " + _vm._s(resource.iconEmoji) + " ")]) : resource.iconSvg ? _c("NcIconSvgWrapper", { staticClass: "resource__icon", attrs: { "svg": resource.iconSvg, "size": 20 } }) : resource.iconURL ? _c("span", { staticClass: "resource__icon" }, [_c("img", { attrs: { "src": resource.iconURL, "alt": "" } })]) : _vm._e(), _c("span", { staticClass: "resource__name" }, [_vm._v(" " + _vm._s(resource.label) + " ")])], 1)]);
}), 0)]);
}), 0)]);
})], 2) : _vm._e();
};
var _sfc_staticRenderFns$2 = [];
var __component__$2 = /* @__PURE__ */ normalizeComponent(
_sfc_main$2,
_sfc_render$2,
_sfc_staticRenderFns$2,
false,
null,
"de46bdbe"
);
const NcTeamResources = __component__$2.exports;
register(t36);
const _sfc_main$1 = {
name: "NcResource",
components: {
NcButton
},
props: {
icon: {
type: String,
required: true
},
name: {
type: String,
required: true
},
url: {
type: String,
required: true
}
},
data() {
return {
labelTranslated: t('Open link to "{resourceName}"', { resourceName: this.name })
};
},
computed: {
route() {
return getRoute(this.$router, this.url);
}
},
methods: {
t
}
};
var _sfc_render$1 = function render4() {
var _vm = this, _c = _vm._self._c;
return _c("li", { staticClass: "resource" }, [_c("NcButton", { staticClass: "resource__button", attrs: { "aria-label": _vm.labelTranslated, "type": "tertiary", "to": _vm.route, "href": _vm.route ? null : _vm.url }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
return [_c("div", { staticClass: "resource__icon" }, [_c("img", { attrs: { "src": _vm.icon } })])];
}, proxy: true }]) }, [_vm._v(" " + _vm._s(_vm.name) + " ")])], 1);
};
var _sfc_staticRenderFns$1 = [];
var __component__$1 = /* @__PURE__ */ normalizeComponent(
_sfc_main$1,
_sfc_render$1,
_sfc_staticRenderFns$1,
false,
null,
"ac1115a7"
);
const NcResource = __component__$1.exports;
register(t9);
const _sfc_main = {
name: "NcRelatedResourcesPanel",
components: {
NcResource,
NcTeamResources
},
props: {
/**
* The provider id implemented with `\OCA\RelatedResources\IRelatedResourceProvider::getProviderId()`
*/
providerId: {
type: String,
default: null
},
/**
* The item id which uniquely identities the e.g. Calendar event, Deck board, file, Talk room, etc.
*/
itemId: {
type: [String, Number],
default: null
},
/**
* Limits to specific resource type. i.e. any provider id implemented with `\OCA\RelatedResources\IRelatedResourceProvider::getProviderId()`
*/
resourceType: {
type: String,
default: ""
},
/**
* Set the maximum number of resources to load
*/
limit: {
type: Number,
default: 0
},
/**
* Only used by the files sidebar
*
* File info is passed when registered with `OCA.Sharing.ShareTabSections.registerSection()`
*/
fileInfo: {
type: Object,
default: null
},
/**
* Make the header name dynamic
*/
header: {
type: String,
default: t("Related resources")
},
description: {
type: String,
default: t("Anything shared with the same group of people will show up here")
},
/**
* If this element is used on a primary element set to true for primary styling.
*/
primary: {
type: Boolean,
default: false
}
},
emits: [
"has-error",
"has-resources"
],
data() {
var _a;
return {
appEnabled: ((_a = OC == null ? void 0 : OC.appswebroots) == null ? void 0 : _a.related_resources) !== void 0,
loading: false,
error: null,
resources: []
};
},
computed: {
isVisible() {
var _a;
if (this.loading) {
return false;
}
return (_a = this.error) != null ? _a : this.resources.length > 0;
},
subline() {
if (this.error) {
return t("Error getting related resources. Please contact your system administrator if you have any questions.");
}
return this.description;
},
hasResourceInfo() {
if (this.providerId !== null && this.itemId !== null) {
return true;
}
if (this.fileInfo !== null) {
return true;
}
return false;
},
isFiles() {
var _a;
return ((_a = this.fileInfo) == null ? void 0 : _a.id) !== void 0;
},
url() {
let providerId = null;
let itemId = null;
if (this.isFiles) {
providerId = "files";
itemId = this.fileInfo.id;
} else {
providerId = this.providerId;
itemId = this.itemId;
}
return generateOcsUrl("/apps/related_resources/related/{providerId}?itemId={itemId}&resourceType={resourceType}&limit={limit}&format=json", {
providerId,
itemId,
resourceType: this.resourceType,
limit: this.limit
});
}
},
watch: {
providerId() {
this.fetchRelatedResources();
},
itemId() {
this.fetchRelatedResources();
},
fileInfo() {
this.fetchRelatedResources();
},
error(error) {
this.$emit("has-error", Boolean(error));
},
resources(resources) {
this.$emit("has-resources", resources.length > 0);
}
},
created() {
this.fetchRelatedResources();
},
methods: {
t,
async fetchRelatedResources() {
var _a;
if (!this.appEnabled || !this.hasResourceInfo) {
return;
}
this.loading = true;
this.error = null;
this.resources = [];
try {
const response = await axios.get(this.url);
this.resources = (_a = response.data.ocs) == null ? void 0 : _a.data;
} catch (e) {
this.error = e;
console.error(e);
} finally {
this.loading = false;
}
}
}
};
var _sfc_render = function render5() {
var _vm = this, _c = _vm._self._c;
return _c("div", [_c("NcTeamResources", { attrs: { "provider-id": _vm.providerId, "item-id": _vm.itemId } }), _vm.appEnabled && _vm.isVisible ? _c("div", { staticClass: "related-resources" }, [_c("div", { staticClass: "related-resources__header" }, [_c("h5", [_vm._v(_vm._s(_vm.header))]), _c("p", [_vm._v(_vm._s(_vm.subline))])]), _vm._l(_vm.resources, function(resource) {
return _c("NcResource", { key: resource.itemId, staticClass: "related-resources__entry", attrs: { "icon": resource.icon, "name": resource.title, "url": resource.url } });
})], 2) : _vm._e()], 1);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns,
false,
null,
"badd46a9"
);
const NcRelatedResourcesPanel = __component__.exports;
export {
NcRelatedResourcesPanel as N
};