Move sub shelves view to userShelves & fix display
This commit is contained in:
parent
47812f45d9
commit
cf691f5cff
|
@ -27,11 +27,13 @@ export class ShelvesController extends ViewController {
|
||||||
}
|
}
|
||||||
|
|
||||||
getUserShelves () {
|
getUserShelves () {
|
||||||
return [
|
return Promise.resolve([
|
||||||
{id:1,name:'Test Shelf',isDeletable:false,isPublilc:false},
|
{id:1,name:'Test Shelf',isDeletable:false,isPublilc:false},
|
||||||
{id:1,name:'Deletable Shelf',isDeletable:true,isPublilc:false},
|
{id:2,name:'Deletable Shelf',isDeletable:true,isPublilc:false},
|
||||||
{id:1,name:'Public Shelf',isDeletable:true,isPublilc:true},
|
{id:3,name:'Public Shelf',isDeletable:true,isPublilc:true},
|
||||||
];
|
]).then(shelves => {
|
||||||
|
this.state.myShelves = shelves;
|
||||||
|
});
|
||||||
// return fetch('/api/shelves/get').then(response => response.json);
|
// return fetch('/api/shelves/get').then(response => response.json);
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -2,7 +2,7 @@ import html from 'choo/html';
|
||||||
|
|
||||||
import { ShelvesController } from './controller'; // The controller for this view, where processing should happen.
|
import { ShelvesController } from './controller'; // The controller for this view, where processing should happen.
|
||||||
import { shelfView } from './shelf';
|
import { shelfView } from './shelf';
|
||||||
import { shelvesView } from './shelves';
|
import { userShelvesView } from './userShelves';
|
||||||
|
|
||||||
// This is the view function that is exported and used in the view manager.
|
// This is the view function that is exported and used in the view manager.
|
||||||
export const shelvesView = (state, emit, i18n) => {
|
export const shelvesView = (state, emit, i18n) => {
|
||||||
|
@ -13,7 +13,7 @@ export const shelvesView = (state, emit, i18n) => {
|
||||||
return [
|
return [
|
||||||
(controller.targetShelf !== null
|
(controller.targetShelf !== null
|
||||||
? shelfView(controller, emit)
|
? shelfView(controller, emit)
|
||||||
: shelvesView(controller, emit)
|
: userShelvesView(controller, emit)
|
||||||
),
|
),
|
||||||
];
|
];
|
||||||
}
|
}
|
|
@ -1,12 +0,0 @@
|
||||||
import html from 'choo/html';
|
|
||||||
|
|
||||||
export const editModal = (shelf, shelvesController) => {
|
|
||||||
const { __ } = shelvesController.i18n;
|
|
||||||
|
|
||||||
// Should add a scale of publicity: private, friends only, friends & followers, public
|
|
||||||
return [
|
|
||||||
html`<article>
|
|
||||||
<p>To Do</p>
|
|
||||||
</article>`,
|
|
||||||
];
|
|
||||||
}
|
|
|
@ -0,0 +1,29 @@
|
||||||
|
import html from 'choo/html';
|
||||||
|
|
||||||
|
import { modal } from '../../partials/modal';
|
||||||
|
|
||||||
|
export const editModal = (shelf, shelvesController) => {
|
||||||
|
const { __ } = shelvesController.i18n;
|
||||||
|
|
||||||
|
const modalId = `editShelf${shelf.id}`;
|
||||||
|
|
||||||
|
// Should add a scale of publicity: private, friends only, friends & followers, public
|
||||||
|
const modalContent = html`<article>
|
||||||
|
<p>To Do</p>
|
||||||
|
</article>`;
|
||||||
|
|
||||||
|
return modal(modalId, shelvesController, modalContent, {
|
||||||
|
buttonHTML: html`<label for=${modalId} class="small pseudo button">
|
||||||
|
${__('interaction.edit')} <i class="icon-edit"></i>
|
||||||
|
</label>`,
|
||||||
|
headerText: `${__('shelves.edit.editing')}: ${shelf.name}`,
|
||||||
|
footerHTML: html`<footer>
|
||||||
|
<button>
|
||||||
|
${__('shelves.edit.save')}
|
||||||
|
</button>
|
||||||
|
<label for=${modalId} class="button dangerous">
|
||||||
|
${__('interaction.close')}
|
||||||
|
</label>
|
||||||
|
</footer>`,
|
||||||
|
});
|
||||||
|
}
|
|
@ -1,7 +1,7 @@
|
||||||
import html from 'choo/html';
|
import html from 'choo/html';
|
||||||
import modal from '../partials/modal';
|
import { editModal } from './editModal';
|
||||||
|
|
||||||
export const shelvesView = (shelvesController, emit) => {
|
export const userShelvesView = (shelvesController, emit) => {
|
||||||
const { __ } = shelvesController.i18n;
|
const { __ } = shelvesController.i18n;
|
||||||
|
|
||||||
if (!shelvesController.isLoggedIn) {
|
if (!shelvesController.isLoggedIn) {
|
||||||
|
@ -30,7 +30,11 @@ export const shelvesView = (shelvesController, emit) => {
|
||||||
return [
|
return [
|
||||||
html`<section>
|
html`<section>
|
||||||
<h2>${__('shelves.title')}</h2>
|
<h2>${__('shelves.title')}</h2>
|
||||||
${controller.state.myShelves.map(shelf => {
|
${shelvesController.state.myShelves.map(shelf => {
|
||||||
|
const deleteButton = html`<button class="small pseudo">
|
||||||
|
${__('interaction.delete')} <i class="icon-delete"></i>
|
||||||
|
</button>`;
|
||||||
|
|
||||||
return html`<article class="card">
|
return html`<article class="card">
|
||||||
<header>
|
<header>
|
||||||
<h3>
|
<h3>
|
||||||
|
@ -38,26 +42,11 @@ export const shelvesView = (shelvesController, emit) => {
|
||||||
</h3>
|
</h3>
|
||||||
${shelf.isDeletable === true
|
${shelf.isDeletable === true
|
||||||
? [
|
? [
|
||||||
modal(`editShelf${shelf.id}`, shelvesController, editModal(shelf, shelvesController), {
|
editModal(shelf, shelvesController),
|
||||||
buttonHTML: html`<button class="small pseudo pull-right tooltip-left" data-tooltip=${__('interaction.edit')}>
|
[deleteButton], // editModal outputs a modal, which returns an array, so any subsequent html items must also be in an array for Choo to handle it correctly.
|
||||||
<i class="icon-edit"></i>
|
|
||||||
</button>`,
|
|
||||||
headerText: `${__('shelves.edit.editing')}: ${shelf.name}`,
|
|
||||||
footerHTML: html`<footer>
|
|
||||||
<button>
|
|
||||||
${__('shelves.edit.save')}
|
|
||||||
</button>
|
|
||||||
<label for=${modalId} class="button dangerous">
|
|
||||||
${__('interaction.close')}
|
|
||||||
</label>
|
|
||||||
</footer>`,
|
|
||||||
}),
|
|
||||||
|
|
||||||
html`<button class="small pseudo pull-right tooltip-left" data-tooltip=${__('interaction.delete')}>
|
|
||||||
<i class="icon-delete"></i>
|
|
||||||
</button>`,
|
|
||||||
]
|
]
|
||||||
: null}
|
: null
|
||||||
|
}
|
||||||
</header>
|
</header>
|
||||||
</article>`;
|
</article>`;
|
||||||
})}
|
})}
|
Loading…
Reference in New Issue