Skip to content

Commit

Permalink
Add new collaborators
Browse files Browse the repository at this point in the history 
Added select of role when adding collaborator
  • Loading branch information
Lukas Hirt committed Jul 3, 2019
1 parent 6ccacfe commit 93eaa85
Show file tree
Hide file tree
Showing 2 changed files with 120 additions and 77 deletions.
191 changes: 117 additions & 74 deletions apps/files/src/components/FileSharingSidebar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
<span v-translate>Please choose only a single File</span>
</div>
<div v-else>
<oc-spinner v-if="sharesLoading"></oc-spinner>
<template v-if="!sharesLoading">
<!-- TODO: Discuss placement of owner in file details instead of collaborators
<h4><translate>Owner</translate></h4>
Expand All @@ -19,70 +18,104 @@
</template>
</oc-user> -->
<section>
<h4>Collaborators ({{ shares.length }})</h4>
<label class="oc-label"><translate>Invite new collaborators</translate></label>
<oc-autocomplete
v-model="selectedItem" :items="autocompleteResults" :itemsLoading="autocompleteInProgress"
:placeholder="$_ocCollaborationStatus_autocompletePlacholder" @update:input="onAutocompleteInput"
:filter="filterRecipients" id="oc-sharing-autocomplete" class="uk-margin-bottom"
>
:filter="filterRecipients" id="oc-sharing-autocomplete" class="uk-margin-bottom">
<template v-slot:item="{item}">
<span>{{ buildRecipientDisplay(item) }}</span>
</template>
</oc-autocomplete>
<oc-accordion v-if="!sharesLoading" :multiple=true>
<oc-accordion-item v-for="(collaborator, index) in shares" :key="index" class="uk-margin-small-bottom">
<template slot="title">
<oc-user
:avatar="collaborator.avatar"
:user-name="collaborator.name"
:display-name="collaborator.displayName"
>
<template slot="properties">
<span v-translate>{{ collaborator.role }}<template v-if="collaborator.expires"> | <translate :translate-params="{expires: formDateFromNow(collaborator.expires)}">Expires: %{expires}</translate></template></span>
</template>
</oc-user>
</template>
<template slot="content">
<oc-grid gutter="small" class="uk-flex uk-flex-between uk-margin-small-bottom">
<div class="uk-flex uk-flex-column">
<span class="uk-text-meta">Type</span>
<span>User</span>
</div>
<div class="uk-flex uk-flex-column">
<span class="uk-text-meta">Status</span>
<span>Accepted</span>
</div>
<div class="uk-flex uk-flex-column">
<span class="uk-text-meta">Shared from</span>
<span>Administrator</span>
</div>
</oc-grid>
<oc-grid gutter="small" class="uk-margin-bottom">
<div class="uk-width-1-1 uk-width-1-2@xl">
<label class="oc-label">Role</label>
<oc-button :id="`files-collaborators-role-button-${index}`" class="uk-width-1-1 files-collaborators-role-button">{{ roles[collaborator.role].name }}</oc-button>
<p class="uk-text-meta uk-margin-remove">{{ roles[collaborator.role].description }}</p>
<oc-drop id="files-collaborators-roles-dropdown" :toggle="`#files-collaborators-role-button-${index}`" mode="click" :options="{ 'offset': 0 }" class="oc-autocomplete-dropdown">
<ul class="oc-autocomplete-suggestion-list">
<li v-for="(role, key) in roles" :key="key" class="oc-autocomplete-suggestion" :class="{ 'oc-autocomplete-suggestion-selected' : roles[collaborator.role] === role }" @click="onEdit(collaborator); editing.role = key">
<span class="uk-text-bold">{{ role.name }}</span>
<p class="uk-text-meta uk-margin-remove">{{ role.description }}</p>
</li>
</ul>
</oc-drop>
</div>
<div class="uk-width-1-1 uk-width-1-2@xl">
<label class="oc-label">Expiration date <span class="uk-text-meta uk-remove-margin">(optional)</span></label>
<oc-text-input type="date" class="uk-width-1-1 oc-button-role">04 - 07 - 2019</oc-text-input>
</div>
</oc-grid>
<oc-button variation="primary" :disabled="editing.name != collaborator.name || saving" @click="onSave(editing)">Save</oc-button>
<oc-button :aria-label="_deleteButtonLabel" name="delete" icon="delete" @click="onDelete(collaborator)" />
<oc-spinner v-if="saving" small></oc-spinner>
</template>
</oc-accordion-item>
</oc-accordion>
<div v-if="selectedItem" class="uk-margin-medium-bottom">
<div class="uk-flex-inline uk-flex-column uk-flex-middle uk-margin-small-bottom">
<oc-avatar src="https://picsum.photos/64/64?image=1075" />
<span>{{ selectedItem.label }}</span>
</div>
<div>
<oc-grid gutter="small">
<div class="uk-width-1-1 uk-width-1-2@xl">
<label class="oc-label"><translate>Role</translate></label>
<oc-button id="files-collaborators-role-button" class="uk-width-1-1 files-collaborators-role-button"><span v-if="!selectedNewRole">Select role</span><template v-else>{{ selectedNewRole.name }}</template></oc-button>
<p v-if="selectedNewRole" class="uk-text-meta uk-margin-remove">{{ selectedNewRole.description }}</p>
<oc-drop id="files-collaborators-roles-dropdown" toggle="#files-collaborators-role-button" mode="click" :options="{ 'offset': 0 }" class="oc-autocomplete-dropdown">
<ul class="oc-autocomplete-suggestion-list">
<li v-for="(role, key) in roles" :key="key" class="oc-autocomplete-suggestion" @click="$_ocCollaborators_newCollaboratorsSelectRole(role)">
<span class="uk-text-bold">{{ role.name }}</span>
<p class="uk-text-meta uk-margin-remove">{{ role.description }}</p>
</li>
</ul>
</oc-drop>
</div>
<div class="uk-width-1-1 uk-width-1-2@xl">
<label class="oc-label"><translate>Expiration date <span class="uk-text-meta uk-remove-margin">(optional)</span></translate></label>
<oc-text-input type="date" class="uk-width-1-1 oc-button-role">04 - 07 - 2019</oc-text-input>
</div>
<div>
<oc-button @click="$_ocCollaborators_newCollaboratorsCancel"><translate>Cancel</translate></oc-button>
</div>
<div>
<oc-button variation="primary" @click="$_ocCollaborators_newCollaboratorsAdd(selectedItem)" :disabled="!selectedNewRole"><translate>Add collaborators</translate></oc-button>
</div>
</oc-grid>
</div>
</div>
<template v-if="!sharesLoading">
<h4>Collaborators ({{ shares.length }})</h4>
<oc-accordion :multiple=true>
<oc-accordion-item v-for="(collaborator, index) in shares" :key="index" class="uk-margin-small-bottom">
<template slot="title">
<oc-user
:avatar="collaborator.avatar"
:user-name="collaborator.name"
:display-name="collaborator.displayName"
>
<template slot="properties">
<span v-translate>{{ collaborator.role }}<template v-if="collaborator.expires"> | <translate :translate-params="{expires: formDateFromNow(collaborator.expires)}">Expires: %{expires}</translate></template></span>
</template>
</oc-user>
</template>
<template slot="content">
<oc-grid gutter="small" class="uk-flex uk-flex-between uk-margin-small-bottom">
<div class="uk-flex uk-flex-column">
<span class="uk-text-meta" v-translate>Type</span>
<span>User</span>
</div>
<div class="uk-flex uk-flex-column">
<span class="uk-text-meta" v-translate>Status</span>
<span>Accepted</span>
</div>
<div class="uk-flex uk-flex-column">
<span class="uk-text-meta" v-translate>Shared from</span>
<span>Administrator</span>
</div>
</oc-grid>
<oc-grid gutter="small" class="uk-margin-bottom">
<div class="uk-width-1-1 uk-width-1-2@xl">
<label class="oc-label"><translate>Role</translate></label>
<oc-button :id="`files-collaborators-role-button-${index}`" class="uk-width-1-1 files-collaborators-role-button">{{ roles[collaborator.role].name }}</oc-button>
<p class="uk-text-meta uk-margin-remove">{{ roles[collaborator.role].description }}</p>
<oc-drop id="files-collaborators-roles-dropdown" :toggle="`#files-collaborators-role-button-${index}`" mode="click" :options="{ 'offset': 0 }" class="oc-autocomplete-dropdown">
<ul class="oc-autocomplete-suggestion-list">
<li v-for="(role, key) in roles" :key="key" class="oc-autocomplete-suggestion" :class="{ 'oc-autocomplete-suggestion-selected' : roles[collaborator.role] === role }" @click="onEdit(collaborator); editing.role = key">
<span class="uk-text-bold">{{ role.name }}</span>
<p class="uk-text-meta uk-margin-remove">{{ role.description }}</p>
</li>
</ul>
</oc-drop>
</div>
<div class="uk-width-1-1 uk-width-1-2@xl">
<label class="oc-label">Expiration date <span class="uk-text-meta uk-remove-margin">(optional)</span></label>
<oc-text-input type="date" class="uk-width-1-1 oc-button-role">04 - 07 - 2019</oc-text-input>
</div>
</oc-grid>
<oc-button variation="primary" :disabled="editing.name != collaborator.name || saving" @click="onSave(editing)"><translate>Save</translate></oc-button>
<oc-button :aria-label="_deleteButtonLabel" name="delete" icon="delete" @click="onDelete(collaborator)" />
<oc-spinner v-if="saving" small></oc-spinner>
</template>
</oc-accordion-item>
</oc-accordion>
</template>
</section>
</template>
</div>
Expand All @@ -107,18 +140,6 @@ export default {
this.sharesClearState()
}
},
watch: {
selectedItem: function (newSelectedSharee) {
// TODO: handle groups as well
this.addShare({
client: this.$client,
path: this.selectedFiles[0].path,
$gettext: this.$gettext,
shareWith: newSelectedSharee.value.shareWith,
shareType: newSelectedSharee.value.shareType
})
}
},
data () {
return {
autocompleteResults: [],
Expand All @@ -130,21 +151,25 @@ export default {
roles: {
viewer: {
name: this.$gettext('Viewer'),
description: this.$gettext('Download and preview')
description: this.$gettext('Download and preview'),
perms: 1
},
editor: {
name: this.$gettext('Editor'),
description: this.$gettext('Upload, edit, delete, download and preview')
description: this.$gettext('Upload, edit, delete, download and preview'),
perms: 2
},
coowner: {
name: this.$gettext('Co-owner'),
description: this.$gettext('Share, upload, edit, delete, download and preview')
description: this.$gettext('Share, upload, edit, delete, download and preview'),
perms: 16
}
// customRole: {
// name: this.$gettext('Custom role'),
// description: this.$gettext('Set detailed permissions')
// }
}
},
selectedNewRole: null
}
},
computed: {
Expand Down Expand Up @@ -230,14 +255,32 @@ export default {
this.editing = { name: null }
this.saving = false
})
},
$_ocCollaborators_newCollaboratorsCancel () {
this.selectedItem = ''
},
$_ocCollaborators_newCollaboratorsSelectRole (role) {
this.selectedNewRole = role
},
$_ocCollaborators_newCollaboratorsAdd (collaborators) {
this.addShare({
client: this.$client,
path: this.selectedFiles[0].path,
$gettext: this.$gettext,
shareWith: collaborators.value.shareWith,
shareType: collaborators.value.shareType,
permissions: this.selectedNewRole
})
this.selectedItem = null
this.selectedNewRole = null
}
}
}
</script>

<style>
/* TODO: Move to design system */
.uk-accordion-title .oc-avatar {
#oc-files-sharing-sidebar .oc-avatar {
width: 50px;
}
Expand Down
6 changes: 3 additions & 3 deletions apps/files/src/store/actions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -389,11 +389,11 @@ export default {
console.log(e)
})
},
addShare (context, { client, path, $gettext, shareWith, shareType }) {
addShare (context, { client, path, $gettext, shareWith, shareType, permissions }) {
context.commit('SHARES_LOADING', true)

if (shareType === 0) {
client.shares.shareFileWithUser(path, shareWith)
client.shares.shareFileWithUser(path, shareWith, permissions)
.then(share => {
context.commit('SHARES_ADD_SHARE', _buildShare(share.shareInfo))
context.commit('SHARES_LOADING', false)
Expand All @@ -407,7 +407,7 @@ export default {
context.commit('SHARES_LOADING', false)
})
} else {
client.shares.shareFileWithGroup(path, shareWith)
client.shares.shareFileWithGroup(path, shareWith, permissions)
.then(share => {
context.commit('SHARES_ADD_SHARE', _buildShare(share.shareInfo))
context.commit('SHARES_LOADING', false)
Expand Down

0 comments on commit 93eaa85

Please sign in to comment.