---feature:roselia-dom---
Roselia.TODO 是您的代办清单，只要您登陆了Roselia-Blog，您就可以云端同步您的代办。
Roselia.TODO empower every person and every organization on the planet to achieve more.
予力全球每一人、每一组织，成就不凡。
r{{ (function () { defState('window', ''.constructor.constructor('return window')) defState('userData', () => window.JSON.parse(window.localStorage.getItem('loginData'))) def('tick', useState()[1]) defState('loading', false) def('application', 'Roselia.TODO') def('p', post) def('key', 'todo-' + p.id) defState('items', []) defState('recordExists', false) defState('forMeOnly', !!userData) def('MyInput', ({ value, setValue, onEnter, placeholder }) => { return createElement('input', { value, onInput() { setValue(this.value) }, onKeyUp(key) { if (key.code === 'Enter') onEnter() }, style: { border: '1px solid #ccc' }, placeholder }) }) def('handleItems', item => { recordExists = item != null if(recordExists) { items = window.JSON.parse(item.content || '[]')} else { items = []; } loading = false; }) def('getContent', () => pluginStorage.getContent({ application, key, forMe: forMeOnly }).then(handleItems)) defState('currentItem', '') def('SingleItem', item => { const displayPart = item.completed ? createElement('del', {className: 'grey--text'}, [createElement('i', null, item.name)]) : item.name; return createElement('span', { onClick() { if(!item.editing) item.completed = !item.completed; tick(); } }, [ createElement('input', { checked: item.completed, type: 'checkbox' }), item.editing ? createElement(MyInput, { value: item.name, setValue(v) { item.name = v; tick(); }, onEnter() { item.editing = false; tick(); } }, []) : createElement('span', {onDblClick() { item.editing = true; tick(); } }, [displayPart]) ]) }) def('TodoList', todos => { return createElement(todos.map((item, index) => { return createElement('div', null, [ SingleItem(item), item.draft || btn(icon('delete'), () => { items = items.filter((_, idx) => idx !== index) }, 'v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--small error--text ma-2') ]) })) }) def('saveItems', (privateItems, cachedItems) => { if (typeof privateItems === 'undefined') privateItems = forMeOnly; if(typeof cachedItems === 'undefined') cachedItems = items; const content = cachedItems.map(({name, completed}) => ({name, completed})) const p = pluginStorage.upsertRecord({ application, key, content, all: !privateItems }) p.then(x => toast('Tasks saved!', 'success')).catch(err => toast(err.toString(), 'error')) }) def('completedCount', items.filter(x => x.completed).length) useEffect(() => { if (userData) { const privateItems = forMeOnly; return undefined; // () => saveItems(privateItems) } }, [forMeOnly]) useEffect(() => {getContent()}, [forMeOnly]) })() }}
r{{ forMeOnly ? userData.nickname : '所有人' }}的清单： r{{ userData && btn('显示'+ (forMeOnly ? '公共' : '私人') +'的任务', () => forMeOnly = !forMeOnly, forMeOnly ? '' : 'primary') }} r{{ items.some(x => x.completed) && btn('清除已完成', () => { items=items.filter(x=>!x.completed) }, 'success') }}
完成：r{{ completedCount }} 个项目，一共 r{{ items.length }} 个项目 r{{ userData && btn('save', () => saveItems(), 'info') }} r{{ userData && btn('delete all', () => { pluginStorage.deleteRecord({application, key, all: !forMeOnly}).then(x => { items = []; }) }, 'error') }}
r{{ loading && btn('Loading...', null, 'info') }}
r{{ TodoList(items.concat(currentItem ? { completed: false, name: currentItem, draft: true } : [])) }}
r{{ createElement(MyInput, { value: currentItem, setValue(v) { currentItem = v; }, onEnter() { if(!currentItem) { toast('请输入内容', 'warning'); return; } items = items.concat({ name: currentItem, completed: false }) currentItem = '' }, placeholder: 'New Task...' }, []) }}
r{{ changeExtraDisplaySettings({blurMainImage: true}) }}