126 lines
2.9 KiB
Vue
126 lines
2.9 KiB
Vue
<template lang="html">
|
|
<div class="d-flex flex-column fill-height">
|
|
<v-fade-transition mode="out-in">
|
|
<v-toolbar
|
|
v-if="libraryId"
|
|
dark
|
|
flat
|
|
color="secondary"
|
|
>
|
|
<v-btn
|
|
icon
|
|
@click="libraryId = undefined"
|
|
>
|
|
<v-icon>mdi-close</v-icon>
|
|
</v-btn>
|
|
<v-toolbar-title
|
|
key="library-name"
|
|
class="d-flex"
|
|
>
|
|
<div class="flex-shrink-1">
|
|
{{ library && library.name }}
|
|
</div>
|
|
<v-spacer />
|
|
</v-toolbar-title>
|
|
<v-btn
|
|
v-if="library && ($route.params.id !== library._id)"
|
|
icon
|
|
@click="libraryId = undefined; $router.push({ name: 'singleLibrary', params: { id: library._id }})"
|
|
>
|
|
<v-icon>mdi-arrow-right-bold</v-icon>
|
|
</v-btn>
|
|
</v-toolbar>
|
|
<v-toolbar
|
|
v-else
|
|
dark
|
|
flat
|
|
color="secondary"
|
|
>
|
|
<v-toolbar-title
|
|
key="no-library"
|
|
>
|
|
<v-btn
|
|
icon
|
|
@click="$emit('close')"
|
|
>
|
|
<v-icon>mdi-close</v-icon>
|
|
</v-btn>
|
|
Select Library
|
|
</v-toolbar-title>
|
|
</v-toolbar>
|
|
</v-fade-transition>
|
|
<v-sheet
|
|
class="pa-3 flex-grow-1 flex-shrink-1"
|
|
style="overflow: auto;"
|
|
>
|
|
<v-fade-transition mode="out-in">
|
|
<library-list
|
|
v-if="!libraryId"
|
|
selection
|
|
single-select
|
|
@select-library="id => libraryId = id"
|
|
/>
|
|
<library-contents-container
|
|
v-else
|
|
:library-id="libraryId"
|
|
:organize-mode="canEditLibrary"
|
|
should-subscribe
|
|
:selected-node="selectedNode"
|
|
@selected="e => $emit('selected', e)"
|
|
/>
|
|
</v-fade-transition>
|
|
</v-sheet>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="js">
|
|
import LibraryList from '/imports/client/ui/library/LibraryList.vue';
|
|
import LibraryContentsContainer from '/imports/client/ui/library/LibraryContentsContainer.vue';
|
|
import Libraries from '/imports/api/library/Libraries.js';
|
|
import { assertEditPermission } from '/imports/api/sharing/sharingPermissions.js';
|
|
|
|
export default {
|
|
components: {
|
|
LibraryList,
|
|
LibraryContentsContainer,
|
|
},
|
|
props: {
|
|
selectedNode: {
|
|
type: Object,
|
|
default: undefined,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
libraryId: undefined
|
|
};
|
|
},
|
|
meteor: {
|
|
$subscribe: {
|
|
'library'(){
|
|
if (this.libraryId){
|
|
return [this.libraryId]
|
|
} else {
|
|
return [];
|
|
}
|
|
},
|
|
},
|
|
library() {
|
|
return Libraries.findOne(this.libraryId);
|
|
},
|
|
canEditLibrary(){
|
|
if (!this.libraryId) return;
|
|
try {
|
|
assertEditPermission(this.library, Meteor.userId());
|
|
return true;
|
|
} catch (e){
|
|
return false;
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="css" scoped>
|
|
</style>
|