@nextcloud/vue/dist/chunks/NcCollectionList-CAM0Gyhi.mjs

Nextcloud vue components

import '../assets/NcCollectionList-ETQTqkqt.css';
import debounce from "debounce";
import { ref, set } from "vue";
import { r as register, J as t7, K as t27, a as t } from "./_l10n-JYjUKekn.mjs";
import { N as NcAvatar } from "./NcAvatar-lRUjWiR6.mjs";
import { N as NcSelect } from "./NcSelect-DRRPiPZG.mjs";
import { g as getRoute } from "./autolink-cbuFALXr.mjs";
import { N as NcActions } from "./NcActions-BgYpDq2n.mjs";
import NcActionButton from "../Components/NcActionButton.mjs";
import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
import axios from "@nextcloud/axios";
import { generateOcsUrl } from "@nextcloud/router";
register(t7);
register(t27);
const _sfc_main$1 = {
  name: "NcCollectionListItem",
  components: {
    NcAvatar,
    NcActions,
    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() {
      var _a, _b;
      return (_b = (_a = this.collection.resources) == null ? void 0 : _a.filter((resource) => !Array.isArray(resource))) != null ? _b : [];
    },
    getComponent() {
      return (resource) => {
        const route = 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,
    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__ */ 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.put(generateOcsUrl("collaboration/resources/collections/{collectionId}", { collectionId }), { collectionName }).then(extractOcsData);
}
function getCollectionsByResourceService(resourceType, resourceId) {
  return axios.get(generateOcsUrl("collaboration/resources/{resourceType}/{resourceId}", { resourceType, resourceId })).then(extractOcsData);
}
function createCollectionService(resourceType, resourceId, name) {
  return axios.post(generateOcsUrl("collaboration/resources/{resourceType}/{resourceId}", { resourceType, resourceId }), { name }).then(extractOcsData);
}
function addResourceService(collectionId, resourceType, resourceId) {
  return axios.post(generateOcsUrl("collaboration/resources/collections/{collectionId}", { collectionId }), { resourceType, resourceId }).then(extractOcsData);
}
function removeResourceService(collectionId, resourceType, resourceId) {
  return axios.delete(generateOcsUrl("collaboration/resources/collections/{collectionId}", { collectionId }), { params: { resourceType, resourceId } }).then(extractOcsData);
}
function searchService(query) {
  return axios.get(generateOcsUrl("collaboration/resources/collections/search/{query}", { query })).then(extractOcsData);
}
function useCollections() {
  const storedCollections = ref([]);
  const addCollections = (collections) => {
    set(storedCollections, "value", collections);
  };
  const addCollection = (collection) => {
    set(storedCollections, "value", [...storedCollections.value, collection]);
  };
  const removeCollection = (collectionId) => {
    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) {
      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,
    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 = ref([]);
    const search = debounce(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 ? t("Type to search for existing projects") : 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,
    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(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(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(t("Failed to rename the project"), e);
        this.collectionsError[collectionId] = 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__ */ normalizeComponent(
  _sfc_main,
  _sfc_render,
  _sfc_staticRenderFns,
  false,
  null,
  "efe8beb8"
);
const NcCollectionList = __component__.exports;
export {
  NcCollectionList as N
};