Skip to content
Snippets Groups Projects
Unverified Commit 7207a777 authored by Julius Härtl's avatar Julius Härtl
Browse files

Use nextcloud-vue-collections library 


Signed-off-by: default avatarJulius Härtl <jus@bitgrid.net>
parent cab704f0
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 829 additions and 1625 deletions
apps/files_sharing/src/additionalScripts.js
+ 1
− 1
View file @ 7207a777
__webpack_public_path__ = OC.linkTo('files_sharing', 'js/');
__webpack_public_path__ = OC.linkTo('files_sharing', 'js/dist/');
__webpack_nonce__ = btoa(OC.requestToken);
import './share'
......
apps/files_sharing/src/collaborationresources.js
+ 4
− 1
View file @ 7207a777
......@@ -25,7 +25,10 @@ import Vuex from 'vuex';
import { PopoverMenu } from 'nextcloud-vue';
import ClickOutside from 'vue-click-outside';
import { VTooltip } from 'v-tooltip';
import { CollectionStore as Store } from './collectionstore';
import { CollectionStoreModule } from 'nextcloud-vue-collections';
const Store = () => new Vuex.Store(CollectionStoreModule);
Vue.prototype.t = t;
......
apps/files_sharing/src/collectionservice.js deleted 100644 → 0
+ 0
− 101
View file @ cab704f0
/*
* @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
*
* @author Julius Härtl <jus@bitgrid.net>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
import axios from 'nextcloud-axios';
class CollectionService {
constructor() {
this.http = axios;
this.baseUrl = OC.linkToOCS('collaboration/resources', 2);
}
listCollection(collectionId) {
return this.http.get(`${this.baseUrl}collections/${collectionId}`);
}
renameCollection(collectionId, collectionName) {
const resourceBase = OC.linkToOCS('collaboration/resources/collections', 2);
return this.http.put(`${resourceBase}${collectionId}?format=json`, {
collectionName
}).then(result => {
return result.data.ocs.data;
});
}
getCollectionsByResource(resourceType, resourceId) {
const resourceBase = OC.linkToOCS(`collaboration/resources/${resourceType}`, 2);
return this.http.get(`${resourceBase}${resourceId}?format=json`)
.then(result => {
return result.data.ocs.data;
})
.catch(error => {
console.error(error);
return Promise.reject(error);
});
}
createCollection(resourceType, resourceId, name) {
const resourceBase = OC.linkToOCS(`collaboration/resources/${resourceType}`, 2);
return this.http.post(`${resourceBase}${resourceId}?format=json`, {
name: name
})
.then((response) => {
return response.data.ocs.data;
})
.catch(error => {
console.error(error);
return Promise.reject(error);
});
}
addResource(collectionId, resourceType, resourceId) {
resourceId = '' + resourceId;
const resourceBase = OC.linkToOCS('collaboration/resources/collections', 2);
return this.http.post(`${resourceBase}${collectionId}?format=json`, {
resourceType,
resourceId
}).then((response) => {
return response.data.ocs.data;
});
}
removeResource(collectionId, resourceType, resourceId) {
return this.http.delete(`${this.baseUrl}/collections/${collectionId}`, { params: { resourceType, resourceId } } )
.then((response) => {
return response.data.ocs.data;
});
}
search(query) {
const searchBase = OC.linkToOCS('collaboration/resources/collections/search', 2);
return this.http.get(`${searchBase}%25${query}%25?format=json`)
.then((response) => {
return response.data.ocs.data;
});
}
}
const service = new CollectionService();
export default service;
apps/files_sharing/src/collectionstore.js deleted 100644 → 0
+ 0
− 109
View file @ cab704f0
/*
* @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
*
* @author Julius Härtl <jus@bitgrid.net>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
import Vuex from 'vuex';
import Vue from 'vue';
import service from './collectionservice';
const CollectionStoreModule = {
state: {
collections: []
},
mutations: {
addCollections (state, collections) {
state.collections = collections;
},
addCollection (state, collection) {
state.collections.push(collection);
},
removeCollection (state, collectionId) {
state.collections = state.collections.filter(item => item.id !== collectionId);
},
updateCollection(state, collection) {
let index = state.collections.findIndex((_item) => _item.id === collection.id);
if (index !== -1) {
Vue.set(state.collections, index, collection);
} else {
state.collections.push(collection);
}
}
},
getters: {
collectionsByResource(state) {
return (resourceType, resourceId) => {
return state.collections.filter((collection) => {
return typeof collection.resources.find((resource) => resource && resource.id === ''+resourceId && resource.type === resourceType) !== 'undefined';
});
};
},
getSearchResults(state) {
return (term) => {
return state.collections.filter((collection) => collection.name.contains(term));
};
}
},
actions: {
fetchCollectionsByResource(context, {resourceType, resourceId}) {
return service.getCollectionsByResource(resourceType, resourceId).then((collections) => {
context.commit('addCollections', collections);
return collections;
});
},
createCollection(context, {baseResourceType, baseResourceId, resourceType, resourceId, name}) {
return service.createCollection(baseResourceType, baseResourceId, name).then((collection) => {
context.commit('addCollection', collection);
context.dispatch('addResourceToCollection', {
collectionId: collection.id,
resourceType, resourceId
});
});
},
renameCollection(context, {collectionId, name}) {
return service.renameCollection(collectionId, name).then((collection) => {
context.commit('updateCollection', collection);
return collection;
});
},
addResourceToCollection(context, {collectionId, resourceType, resourceId}) {
return service.addResource(collectionId, resourceType, resourceId).then((collection) => {
context.commit('updateCollection', collection);
return collection;
});
},
removeResource(context, {collectionId, resourceType, resourceId}) {
return service.removeResource(collectionId, resourceType, resourceId).then((collection) => {
if (collection.resources.length > 0) {
context.commit('updateCollection', collection);
} else {
context.commit('removeCollection', collectionId);
}
});
},
search(context, query) {
return service.search(query);
}
}
};
const CollectionStore = () => new Vuex.Store(CollectionStoreModule);
export { CollectionStoreModule, CollectionStore };
apps/files_sharing/src/components/CollectionList.vue deleted 100644 → 0
+ 0
− 198
View file @ cab704f0
<!--
- @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
-
- @author Julius Härtl <jus@bitgrid.net>
-
- @license GNU AGPL version 3 or any later version
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <http://www.gnu.org/licenses/>.
-
-->
<template>
<ul id="shareWithList" class="shareWithList" v-if="collections">
<li @click="showSelect">
<div class="avatar"><span class="icon-category-integration icon-white"></span></div>
<multiselect v-model="value" :options="options" :placeholder="placeholder" tag-placeholder="Create a new collection" ref="select" @select="select" @search-change="search" label="title" track-by="title" :reset-after="true" :limit="5">
<template slot="singleLabel" slot-scope="props">
<span class="option__desc">
<span class="option__title">{{ props.option.title }}</span>
</span>
</template>
<template slot="option" slot-scope="props">
<span class="option__wrapper">
<span v-if="props.option.class" :class="props.option.class" class="avatar"></span>
<avatar v-else :displayName="props.option.title" :allowPlaceholder="true"></avatar>
<span class="option__title">{{ props.option.title }}</span>
</span>
</template>
</multiselect>
</li>
<collection-list-item v-for="collection in collections" :collection="collection" :key="collection.id" />
</ul>
</template>
<style lang="scss" scoped>
.multiselect {
width: 100%;
margin-left: 3px;
}
span.avatar {
padding: 16px;
display: block;
background-repeat: no-repeat;
background-position: center;
opacity: 0.7;
&:hover {
opacity: 1;
}
}
/** TODO provide white icon in core */
.icon-category-integration.icon-white {
filter: invert(100%);
padding: 16px;
display: block;
background-repeat: no-repeat;
background-position: center;
}
.option__wrapper {
display: flex;
.avatar {
display: block;
background-color: var(--color-background-darker) !important;
}
.option__title {
padding: 4px;
}
}
</style>
<style lang="scss">
/** TODO check why this doesn't work when scoped */
.shareWithList .multiselect:not(.multiselect--active ) .multiselect__tags {
border: none !important;
input::placeholder {
color: var(--color-main-text);
}
}
</style>
<script>
import { Multiselect, Avatar } from 'nextcloud-vue';
import CollectionListItem from '../components/CollectionListItem';
const METHOD_CREATE_COLLECTION = 0;
const METHOD_ADD_TO_COLLECTION = 1;
export default {
name: 'CollectionList',
components: {
CollectionListItem,
Avatar,
Multiselect: Multiselect,
},
props: {
'type': {
type: String,
default: ''
}
},
data() {
return {
selectIsOpen: false,
generatingCodes: false,
codes: undefined,
value: null,
model: {},
searchCollections: []
};
},
mounted() {
this.$store.dispatch('fetchCollectionsByResource', {
resourceType: this.type,
resourceId: this.$root.model.id
})
},
computed: {
collections() {
return this.$store.getters.collectionsByResource(this.type, this.$root.model.id)
},
placeholder() {
return t('files_sharing', 'Add to a collection');
},
options() {
let options = [];
let types = window.OCP.Collaboration.getTypes().sort();
for(let type in types) {
options.push({
method: METHOD_CREATE_COLLECTION,
type: types[type],
title: window.OCP.Collaboration.getLabel(types[type]),
class: window.OCP.Collaboration.getIcon(types[type]),
action: () => window.OCP.Collaboration.trigger(types[type])
})
}
for(let index in this.searchCollections) {
if (this.collections.findIndex((collection) => collection.id === this.searchCollections[index].id) === -1) {
options.push({
method: METHOD_ADD_TO_COLLECTION,
title: this.searchCollections[index].name,
collectionId: this.searchCollections[index].id
})
}
}
return options;
}
},
methods: {
select(selectedOption, id) {
if (selectedOption.method === METHOD_CREATE_COLLECTION) {
selectedOption.action().then((id) => {
this.$store.dispatch('createCollection', {
baseResourceType: this.type,
baseResourceId: this.$root.model.id,
resourceType: selectedOption.type,
resourceId: id,
name: this.$root.model.name,
})
}).catch((e) => {
console.error('No resource selected', e);
});
}
if (selectedOption.method === METHOD_ADD_TO_COLLECTION) {
this.$store.dispatch('addResourceToCollection', {
collectionId: selectedOption.collectionId, resourceType: this.type, resourceId: this.$root.model.id
})
}
},
search(query) {
this.$store.dispatch('search', query).then((collections) => {
this.searchCollections = collections
})
},
showSelect() {
this.selectIsOpen = true
this.$refs.select.$el.focus()
},
hideSelect() {
this.selectIsOpen = false
},
isVueComponent(object) {
return object._isVue
}
}
}
</script>
apps/files_sharing/src/components/CollectionListItem.vue deleted 100644 → 0
+ 0
− 198
View file @ cab704f0
<!--
- @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
-
- @author Julius Härtl <jus@bitgrid.net>
-
- @license GNU AGPL version 3 or any later version
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <http://www.gnu.org/licenses/>.
-
-->
<template>
<li class="collection-list" v-click-outside="hideDetails">
<avatar :displayName="collection.name" :allowPlaceholder="true"></avatar>
<span class="username" title="" @click="showDetails" v-if="this.newName === ''">{{ collection.name }}</span>
<form v-else @submit.prevent="renameCollection">
<input type="text" v-model="newName" autocomplete="off" autocapitalize="off">
<input type="submit" value="" class="icon-confirm">
</form>
<transition name="fade">
<div class="linked-icons" v-if="!detailsOpen">
<a v-for="resource in collection.resources" :href="resource.link" v-tooltip="resource.name" :key="resource.id"><span :class="getIcon(resource)"></span></a>
</div>
</transition>
<span class="sharingOptionsGroup">
<div class="share-menu" v-click-outside="close">
<a href="#" class="icon icon-more" @click="toggle"></a>
<span class="icon icon-loading-small hidden"></span>
<div class="popovermenu" :class="{open: isOpen}">
<popover-menu :menu="menu"></popover-menu>
</div>
</div>
</span>
<transition name="fade">
<ul class="resource-list-details" v-if="detailsOpen">
<li v-for="resource in collection.resources">
<a :href="resource.link"><span :class="getIcon(resource)"></span><span class="resource-name">{{ resource.name || '' }}</span></a>
<span class="icon-close" @click="removeResource(collection, resource)"></span>
</li>
</ul>
</transition>
</li>
</template>
<script>
import { Avatar } from 'nextcloud-vue';
export default {
name: 'CollectionListItem',
components: {
Avatar
},
props: {
collection: {
type: Object
}
},
data() {
return {
isOpen: false,
detailsOpen: false,
newName: '',
}
},
computed: {
menu() {
return [
{
action: () => {
this.detailsOpen = true
this.isOpen = false
},
icon: 'icon-info',
text: t('files_sharing', 'Details'),
},
{
action: () => this.openRename(),
icon: 'icon-rename',
text: t('files_sharing', 'Rename collection'),
}
]
},
getIcon() {
return (resource) => [resource.iconClass]
}
},
methods: {
open() {
this.isOpen = true
},
close() {
this.isOpen = false
},
toggle() {
this.isOpen = !this.isOpen
},
showDetails() {
this.detailsOpen = true
},
hideDetails() {
this.detailsOpen = false
},
removeResource(collection, resource) {
this.$store.dispatch('removeResource', {
collectionId: collection.id, resourceType: resource.type, resourceId: resource.id
})
},
openRename() {
this.newName = this.collection.name;
},
renameCollection() {
this.$store.dispatch('renameCollection', {
collectionId: this.collection.id,
name: this.newName
}).then((collection) => {
this.newName = '';
});
}
}
}
</script>
<style scoped lang="scss">
.fade-enter-active, .fade-leave-active {
transition: opacity .3s ease;
}
.fade-enter, .fade-leave-to
/* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
.linked-icons {
display: flex;
span {
padding: 16px;
display: block;
background-repeat: no-repeat;
background-position: center;
opacity: 0.7;
&:hover {
opacity: 1;
}
}
}
.collection-list {
flex-wrap: wrap;
height: auto;
form, .username {
flex-basis: 10%;
flex-grow: 1;
display: flex;
}
.resource-list-details {
flex-basis: 100%;
width: 100%;
li {
display: flex;
margin-left: 44px;
border-radius: 3px;
&:hover {
background-color: var(--color-background-dark);
}
a {
flex-grow: 1;
padding: 3px;
max-width: calc(100% - 30px);
display: flex;
}
}
span {
display: inline-block;
vertical-align: top;
margin-right: 10px;
}
span.resource-name {
text-overflow: ellipsis;
overflow: hidden;
position: relative;
vertical-align: top;
white-space: nowrap;
flex-grow: 1;
}
}
}
</style>
apps/files_sharing/src/files_sharing.js
+ 1
− 1
View file @ 7207a777
__webpack_nonce__ = btoa(OC.requestToken);
__webpack_public_path__ = OC.linkTo('files_sharing', 'js/');
__webpack_public_path__ = OC.linkTo('files_sharing', 'js/dist/');
import '../js/app';
import '../js/sharedfilelist';
apps/files_sharing/src/views/CollaborationView.vue
+ 1
− 1
View file @ 7207a777
......@@ -25,7 +25,7 @@
</template>
<script>
import CollectionList from './../components/CollectionList'
import { CollectionList } from 'nextcloud-vue-collections'
export default {
name: 'CollaborationView',
......
apps/files_sharing/webpack.js
+ 6
− 3
View file @ 7207a777
......@@ -5,7 +5,7 @@ module.exports = {
entry: {
'additionalScripts': path.join(__dirname, 'src', 'additionalScripts.js'),
'files_sharing': path.join(__dirname, 'src', 'files_sharing.js'),
},
},
output: {
path: path.resolve(__dirname, './js/dist/'),
publicPath: '/js/',
......@@ -49,6 +49,9 @@ module.exports = {
alias: {
vue$: 'vue/dist/vue.runtime.esm.js',
},
extensions: ['*', '.js', '.vue', '.json']
}
extensions: ['*', '.js', '.vue', '.json'],
modules: [
path.join(__dirname, '../../node_modules')
]
},
};
package-lock.json
+ 815
− 1012
View file @ 7207a777
This diff is collapsed.
package.json
+ 1
− 0
View file @ 7207a777
......@@ -44,6 +44,7 @@
"nextcloud-axios": "^0.1.3",
"nextcloud-password-confirmation": "^0.4.1",
"nextcloud-vue": "^0.8.0",
"nextcloud-vue-collections": "^0.1.0",
"snap.js": "^2.0.9",
"strengthify": "git+https://github.com/MorrisJobke/strengthify.git",
"underscore": "^1.9.1",
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment