Create shelves view without adding to routes

This commit is contained in:
Robbie Antenesse 2019-12-21 20:16:52 -07:00
parent c6bcdeeb41
commit 805ebef01c
6 changed files with 158 additions and 0 deletions

View File

@ -0,0 +1,37 @@
import { ViewController } from '../controller';
export class ShelvesController extends ViewController {
constructor(state, i18n) {
// Super passes state, view name, and default state to ViewController,
// which stores state in this.appState and the view controller's state to this.state
super(state, i18n, 'shelves', {
openModal: null, // state value for edit modals
myShelves: [], // array of objects in sort order with name, id, and deletability.
loadedShelves: {}, // object key is shelf id with name and shelfItems
});
// If using controller methods in an input's onchange or onclick instance,
// either bind the class's 'this' instance to the method first...
// or use `onclick=${() => controller.submit()}` to maintain the 'this' of the class instead.
}
get openModal () {
return this.state.openModal;
}
set openModal (modalId) {
this.state.openModal = modalId;
}
get targetShelf () {
return typeof this.appState.query.shelf !== 'undefined' ? parseInt(this.appState.query.shelf) : null;
}
getUserShelves () {
return [
{id:1,name:'Test Shelf',isDeletable:false,isPublilc:false},
{id:1,name:'Deletable Shelf',isDeletable:true,isPublilc:false},
{id:1,name:'Public Shelf',isDeletable:true,isPublilc:true},
];
// return fetch('/api/shelves/get').then(response => response.json);
}
}

View File

@ -0,0 +1,19 @@
import html from 'choo/html';
import { ShelvesController } from './controller'; // The controller for this view, where processing should happen.
import { shelfView } from './shelf';
import { shelvesView } from './shelves';
// This is the view function that is exported and used in the view manager.
export const shelvesView = (state, emit, i18n) => {
const controller = new ShelvesController(state, i18n);
// Returning an array in a view allows non-shared parent HTML elements.
// This one doesn't have the problem right now, but it's good to remember.
return [
(controller.targetShelf !== null
? shelfView(controller, emit)
: shelvesView(controller, emit)
),
];
}

View File

@ -0,0 +1,11 @@
import html from 'choo/html';
export const shelfView = (homeController, emit) => {
const { __ } = homeController.i18n;
return [
html`<section>
<h2>To Do</h2>
</section>`,
];
}

View File

@ -0,0 +1,12 @@
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,66 @@
import html from 'choo/html';
import modal from '../partials/modal';
export const shelvesView = (shelvesController, emit) => {
const { __ } = shelvesController.i18n;
if (!shelvesController.isLoggedIn) {
return [
html`<section>
<h2>${__('shelves.no_shelf_selected')}</h2>
<article class="card">
<header>
<p>${__('shelves.not_logged_in')}</p>
</header>
<footer>
<button>${__('global.menu_login')}</button>
</footer>
</article>
</section>`,
];
}
if (shelvesController.state.myShelves.length <= 0) {
shelvesController.getUserShelves().then(result => {
emit('render');
});
}
// Should add a scale of publicity: private, friends only, friends & followers, public
return [
html`<section>
<h2>${__('shelves.title')}</h2>
${controller.state.myShelves.map(shelf => {
return html`<article class="card">
<header>
<h3>
<a href="/shelves?shelf=${shelf.id}">${shelf.name}</a>
</h3>
${shelf.isDeletable === true
? [
modal(`editShelf${shelf.id}`, shelvesController, editModal(shelf, shelvesController), {
buttonHTML: html`<button class="small pseudo pull-right tooltip-left" data-tooltip=${__('interaction.edit')}>
<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}
</header>
</article>`;
})}
</section>`,
];
}

View File

@ -7,6 +7,19 @@ async function routes(fastify, options) {
return false; return false;
}); });
fastify.post('/api/shelves/get', async (request, reply) => {
if (!request.isLoggedInUser) {
return reply.code(400).send({
error: true,
message: 'api.not_logged_in',
});
}
return request.user.getShelves({
attributes: ['id', 'name', 'isDeletable', 'isPublic'],
});
});
fastify.post('/api/shelf/create', async (request, reply) => { fastify.post('/api/shelf/create', async (request, reply) => {
if (!request.isLoggedInUser) { if (!request.isLoggedInUser) {
return reply.code(400).send({ return reply.code(400).send({