require('../assets/NcCollectionList-yjTCAR46.css'); "use strict"; const debounce = require("debounce"); const Vue = require("vue"); const _l10n = require("./_l10n-CjO_W5Dt.cjs"); const NcAvatar = require("./NcAvatar-CQtsmbBW.cjs"); const NcSelect = require("./NcSelect-YHwbPAJD.cjs"); const autolink = require("./autolink-BAgL31EZ.cjs"); const NcActions = require("./NcActions-DTICeoTz.cjs"); const NcActionButton = require("./NcActionButton-DcpUnqA7.cjs"); const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs"); const axios = require("@nextcloud/axios"); const router = require("@nextcloud/router"); const _interopDefault = (e) => e && e.__esModule ? e : { default: e }; const debounce__default = /* @__PURE__ */ _interopDefault(debounce); const axios__default = /* @__PURE__ */ _interopDefault(axios); _l10n.register(_l10n.t6); _l10n.register(_l10n.t26); const _sfc_main$1 = { name: "NcCollectionListItem", components: { NcAvatar: NcAvatar.NcAvatar, NcActions: NcActions.NcActions, NcActionButton: NcActionButton.NcActionButton }, props: { collection: { type: Object, default: null }, error: { type: String, default: void 0 } }, emits: ["remove-resource", "rename-collection"], data() { return { detailsOpen: false, newName: null }; }, computed: { getIcon() { return (resource) => [resource.iconClass]; }, typeClass() { return (resource) => "resource-type-" + resource.type; }, resources() { return this.collection.resources?.filter((resource) => !Array.isArray(resource)) ?? []; }, getComponent() { return (resource) => { const route = autolink.getRoute(this.$router, resource.link); return route ? { component: "router-link", to: route, href: void 0 } : { component: "a", to: void 0, href: resource.link }; }; }, iconUrl() { return (resource) => { if (resource.mimetype) { return OC.MimeType.getIconUrl(resource.mimetype); } if (resource.iconUrl) { return resource.iconUrl; } return ""; }; } }, methods: { t: _l10n.t, toggleDetails() { this.detailsOpen = !this.detailsOpen; }, showDetails() { this.detailsOpen = true; }, removeResource(collection, resource) { this.$emit("remove-resource", { collectionId: collection.id, resourceType: resource.type, resourceId: resource.id }); }, openRename() { this.newName = this.collection.name; }, renameCollection() { if (this.newName) { this.$emit("rename-collection", { collectionId: this.collection.id, name: this.newName }); } this.newName = null; } } }; var _sfc_render$1 = function render() { var _vm = this, _c = _vm._self._c; return _c("li", { staticClass: "collection-list-item" }, [_c("NcAvatar", { staticClass: "collection-avatar", attrs: { "display-name": _vm.collection.name, "allow-placeholder": "" } }), _vm.newName === null ? _c("span", { staticClass: "collection-item-name", attrs: { "title": "" }, on: { "click": _vm.showDetails } }, [_vm._v(_vm._s(_vm.collection.name))]) : _c("form", { class: { "should-shake": _vm.error }, on: { "submit": function($event) { $event.preventDefault(); return _vm.renameCollection.apply(null, arguments); } } }, [_c("input", { directives: [{ name: "model", rawName: "v-model", value: _vm.newName, expression: "newName" }], attrs: { "type": "text", "autocomplete": "off", "autocapitalize": "off" }, domProps: { "value": _vm.newName }, on: { "input": function($event) { if ($event.target.composing) return; _vm.newName = $event.target.value; } } }), _c("input", { staticClass: "icon-confirm", attrs: { "type": "submit", "value": "" } })]), !_vm.detailsOpen && _vm.newName === null ? _c("div", { staticClass: "linked-icons" }, _vm._l(_vm.resources.slice(0, 2), function(resource) { return _c(_vm.getComponent(resource).component, { key: resource.type + "|" + resource.id, tag: "component", class: _vm.typeClass(resource), attrs: { "title": resource.name, "to": _vm.getComponent(resource).to, "href": _vm.getComponent(resource).href } }, [_c("img", { attrs: { "src": _vm.iconUrl(resource), "alt": resource.name } })]); }), 1) : _vm._e(), _vm.newName === null ? _c("span", { staticClass: "sharingOptionsGroup" }, [_c("NcActions", [_c("NcActionButton", { attrs: { "icon": "icon-info" }, on: { "click": function($event) { $event.preventDefault(); return _vm.toggleDetails.apply(null, arguments); } } }, [_vm._v(" " + _vm._s(_vm.detailsOpen ? _vm.t("Hide details") : _vm.t("Show details")) + " ")]), _c("NcActionButton", { attrs: { "icon": "icon-rename" }, on: { "click": function($event) { $event.preventDefault(); return _vm.openRename.apply(null, arguments); } } }, [_vm._v(" " + _vm._s(_vm.t("Rename project")) + " ")])], 1)], 1) : _vm._e(), _c("transition", { attrs: { "name": "fade" } }, [_vm.error ? _c("div", { staticClass: "error" }, [_vm._v(" " + _vm._s(_vm.error) + " ")]) : _vm._e()]), _c("transition", { attrs: { "name": "fade" } }, [_vm.detailsOpen ? _c("ul", { staticClass: "resource-list-details" }, _vm._l(_vm.resources, function(resource) { return _c("li", { key: resource.type + "|" + resource.id, class: _vm.typeClass(resource) }, [_c(_vm.getComponent(resource).component, { tag: "component", attrs: { "to": _vm.getComponent(resource).to, "href": _vm.getComponent(resource).href } }, [_c("img", { attrs: { "src": _vm.iconUrl(resource), "alt": resource.name } }), _c("span", { staticClass: "resource-name" }, [_vm._v(_vm._s(resource.name || ""))])]), _c("span", { staticClass: "icon-close", on: { "click": function($event) { return _vm.removeResource(_vm.collection, resource); } } })], 1); }), 0) : _vm._e()])], 1); }; var _sfc_staticRenderFns$1 = []; var __component__$1 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent( _sfc_main$1, _sfc_render$1, _sfc_staticRenderFns$1, false, null, "878b819f" ); const NcCollectionListItem = __component__$1.exports; function extractOcsData(response) { return response.data.ocs.data; } function renameCollectionService(collectionId, collectionName) { return axios__default.default.put(router.generateOcsUrl("collaboration/resources/collections/{collectionId}", { collectionId }), { collectionName }).then(extractOcsData); } function getCollectionsByResourceService(resourceType, resourceId) { return axios__default.default.get(router.generateOcsUrl("collaboration/resources/{resourceType}/{resourceId}", { resourceType, resourceId })).then(extractOcsData); } function createCollectionService(resourceType, resourceId, name) { return axios__default.default.post(router.generateOcsUrl("collaboration/resources/{resourceType}/{resourceId}", { resourceType, resourceId }), { name }).then(extractOcsData); } function addResourceService(collectionId, resourceType, resourceId) { return axios__default.default.post(router.generateOcsUrl("collaboration/resources/collections/{collectionId}", { collectionId }), { resourceType, resourceId }).then(extractOcsData); } function removeResourceService(collectionId, resourceType, resourceId) { return axios__default.default.delete(router.generateOcsUrl("collaboration/resources/collections/{collectionId}", { collectionId }), { params: { resourceType, resourceId } }).then(extractOcsData); } function searchService(query) { return axios__default.default.get(router.generateOcsUrl("collaboration/resources/collections/search/{query}", { query })).then(extractOcsData); } function useCollections() { const storedCollections = Vue.ref([]); const addCollections = (collections) => { Vue.set(storedCollections, "value", collections); }; const addCollection = (collection) => { Vue.set(storedCollections, "value", [...storedCollections.value, collection]); }; const removeCollection = (collectionId) => { Vue.set(storedCollections, "value", storedCollections.value.filter((item) => item.id !== collectionId)); }; const updateCollection = (collection) => { const index = storedCollections.value.findIndex((item) => item.id === collection.id); if (index !== -1) { Vue.set(storedCollections.value, index, collection); } else { addCollection(collection); } }; const fetchCollectionsByResource = async ({ resourceType, resourceId }) => { const collections = await getCollectionsByResourceService(resourceType, resourceId); addCollections(collections); }; const createCollection = async ({ baseResourceType, baseResourceId, resourceType, resourceId, name }) => { const collection = await createCollectionService(baseResourceType, baseResourceId, name); addCollection(collection); await addResourceToCollection({ collectionId: collection.id, resourceType, resourceId }); }; const renameCollection = async ({ collectionId, name }) => { const collection = await renameCollectionService(collectionId, name); updateCollection(collection); }; const addResourceToCollection = async ({ collectionId, resourceType, resourceId }) => { const collection = await addResourceService(collectionId, resourceType, String(resourceId)); updateCollection(collection); }; const removeResourceFromCollection = async ({ collectionId, resourceType, resourceId }) => { const collection = await removeResourceService(collectionId, resourceType, String(resourceId)); if (collection.resources.length > 0) { updateCollection(collection); } else { removeCollection(collectionId); } }; return { storedCollections, fetchCollectionsByResource, createCollection, renameCollection, addResourceToCollection, removeResourceFromCollection }; } const METHOD_CREATE_COLLECTION = 0; const METHOD_ADD_TO_COLLECTION = 1; const _sfc_main = { name: "NcCollectionList", components: { NcCollectionListItem, NcAvatar: NcAvatar.NcAvatar, NcSelect: NcSelect.NcSelect }, props: { /** * Resource type identifier */ type: { type: String, default: null }, /** * Unique id of the resource */ id: { type: String, default: null }, /** * Name of the resource */ name: { type: String, default: "" }, /** * Whether the component is active (to start fetch resources) */ isActive: { type: Boolean, default: true } }, setup() { const { storedCollections, fetchCollectionsByResource, createCollection, addResourceToCollection, removeResourceFromCollection, renameCollection } = useCollections(); const searchCollections = Vue.ref([]); const search = debounce__default.default(function(query, loading) { if (query !== "") { loading(true); searchService(query).then((collections) => { searchCollections.value = collections; }).catch((e) => { console.error("Failed to search for collections", e); }).finally(() => { loading(false); }); } }, 500); return { storedCollections, fetchCollectionsByResource, createCollection, addResourceToCollection, removeResourceFromCollection, renameCollection, searchCollections, search }; }, data() { return { selectIsOpen: false, generatingCodes: false, codes: void 0, value: null, model: {}, collectionsError: {}, error: null, isSelectOpen: false }; }, computed: { collections() { return this.storedCollections.filter( (collection) => collection.resources.some((resource) => resource && resource.id === String(this.id) && resource.type === this.type) ); }, placeholder() { return this.isSelectOpen ? _l10n.t("Type to search for existing projects") : _l10n.t("Add to a project"); }, options() { const options = []; window.OCP.Collaboration.getTypes().sort().forEach((type) => { options.push({ method: METHOD_CREATE_COLLECTION, type, title: window.OCP.Collaboration.getLabel(type), class: window.OCP.Collaboration.getIcon(type), action: () => window.OCP.Collaboration.trigger(type) }); }); for (const index in this.searchCollections) { if (!this.collections.find((collection) => collection.id === this.searchCollections[index].id)) { options.push({ method: METHOD_ADD_TO_COLLECTION, title: this.searchCollections[index].name, collectionId: this.searchCollections[index].id }); } } return options; }, resourceIdentifier() { return { resourceType: this.type, resourceId: this.id, isActive: this.isActive }; } }, watch: { resourceIdentifier: { deep: true, immediate: true, handler(resourceIdentifier) { if (!resourceIdentifier.isActive || !resourceIdentifier.resourceId || !resourceIdentifier.resourceType) { return; } this.fetchCollectionsByResource(resourceIdentifier); } } }, methods: { t: _l10n.t, select(selectedOption) { if (selectedOption.method === METHOD_CREATE_COLLECTION) { selectedOption.action().then((resourceId) => { this.createCollection({ baseResourceType: this.type, baseResourceId: this.id, resourceType: selectedOption.type, resourceId, name: this.name }).catch((e) => { this.setError(_l10n.t("Failed to create a project"), e); }); }).catch((e) => { console.error("No resource selected", e); }); } if (selectedOption.method === METHOD_ADD_TO_COLLECTION) { this.addResourceToCollection({ collectionId: selectedOption.collectionId, resourceType: this.type, resourceId: this.id }).catch((e) => { this.setError(_l10n.t("Failed to add the item to the project"), e); }); } this.value = null; }, showSelect() { this.selectIsOpen = true; this.$refs.select.$el.focus(); }, setError(error, e) { console.error(error, e); this.error = error; setTimeout(() => { this.error = null; }, 5e3); }, renameCollectionFromItem({ collectionId, name }) { this.renameCollection({ collectionId, name }).catch((e) => { console.error(_l10n.t("Failed to rename the project"), e); this.collectionsError[collectionId] = _l10n.t("Failed to rename the project"); setTimeout(() => { this.collectionsError[collectionId] = null; }, 5e3); }); } } }; var _sfc_render = function render2() { var _vm = this, _c = _vm._self._c; return _vm.collections && _vm.type && _vm.id ? _c("ul", { staticClass: "collection-list", attrs: { "id": "collection-list" } }, [_c("li", { on: { "click": _vm.showSelect } }, [_vm._m(0), _c("div", { attrs: { "id": "collection-select-container" } }, [_c("NcSelect", { ref: "select", attrs: { "aria-label-combobox": _vm.t("Add to a project"), "options": _vm.options, "placeholder": _vm.placeholder, "label": "title", "limit": 5 }, on: { "close": function($event) { _vm.isSelectOpen = false; }, "open": function($event) { _vm.isSelectOpen = true; }, "option:selected": _vm.select, "search": _vm.search }, scopedSlots: _vm._u([{ key: "selected-option", fn: function(option) { return [_c("span", { staticClass: "option__desc" }, [_c("span", { staticClass: "option__title" }, [_vm._v(_vm._s(option.title))])])]; } }, { key: "option", fn: function(option) { return [_c("span", { staticClass: "option__wrapper" }, [option.class ? _c("span", { staticClass: "avatar", class: option.class }) : option.method !== 2 ? _c("NcAvatar", { attrs: { "allow-placeholder": "", "display-name": option.title } }) : _vm._e(), _c("span", { staticClass: "option__title" }, [_vm._v(_vm._s(option.title))])], 1)]; } }], null, false, 2397208459), model: { value: _vm.value, callback: function($$v) { _vm.value = $$v; }, expression: "value" } }, [_c("p", { staticClass: "hint" }, [_vm._v(" " + _vm._s(_vm.t("Connect items to a project to make them easier to find")) + " ")])])], 1)]), _c("transition", { attrs: { "name": "fade" } }, [_vm.error ? _c("li", { staticClass: "error" }, [_vm._v(" " + _vm._s(_vm.error) + " ")]) : _vm._e()]), _vm._l(_vm.collections, function(collection) { return _c("NcCollectionListItem", { key: collection.id, attrs: { "collection": collection, "error": _vm.collectionsError[collection.id] }, on: { "rename-collection": _vm.renameCollectionFromItem, "remove-resource": _vm.removeResourceFromCollection } }); })], 2) : _vm._e(); }; var _sfc_staticRenderFns = [function() { var _vm = this, _c = _vm._self._c; return _c("div", { staticClass: "avatar" }, [_c("span", { staticClass: "icon-projects" })]); }]; var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent( _sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, "efe8beb8" ); const NcCollectionList = __component__.exports; exports.NcCollectionList = NcCollectionList;