Move sub shelves view to userShelves & fix display

This commit is contained in:
Robbie Antenesse 2019-12-23 16:39:03 -07:00
parent 47812f45d9
commit cf691f5cff
5 changed files with 48 additions and 40 deletions

View File

@ -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);
} }
} }

View File

@ -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)
), ),
]; ];
} }

View File

@ -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>`,
];
}

View File

@ -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>`,
});
}

View File

@ -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>`;
})} })}