Delete an Item

.travis.yml

@@ -1,7 +1,7 @@
 language: node_js
 sudo: false
 node_js:
-- 6.6.0
+- 7.2.0
 deploy:
   provider: heroku
   api_key:

declarations/database/models.js

@@ -6,6 +6,7 @@ declare type Item = {
   starred: boolean;
   parent_id: number;
   user_id: number;
+  is_deleted: boolean;
 };
 
 declare type User = {

migrations/20161220192127-add-is-deleted-to-items.js

@@ -0,0 +1,11 @@
+'use strict';
+
+
+module.exports = {
+  up: function (queryInterface, Sequelize) {
+    queryInterface.addColumn( 'Items', 'is_deleted', { type: Sequelize.BOOLEAN, defaultValue: false, allowNull: false } )
+  },
+  down: function (queryInterface, Sequelize) {
+    queryInterface.removeColumn( 'Items', 'is_deleted')
+  }
+};

models/item.js

@@ -10,7 +10,8 @@ module.exports = function(sequelize, DataTypes) {
     is_root: DataTypes.BOOLEAN,
     starred: DataTypes.BOOLEAN,
     parent_id: DataTypes.INTEGER,
-    user_id: DataTypes.INTEGER
+    user_id: DataTypes.INTEGER,
+    is_deleted: DataTypes.BOOLEAN
   }, {
     classMethods: {
       associate: function(models) {

public/javascripts/client.js

@@ -0,0 +1,29 @@
+$( document ).ready( () => {
+  const modal = document.querySelector( '.modal' )
+
+  document.querySelector( '.export-link' ).onclick = event => {
+    event.preventDefault()
+
+    modal.style.display = 'block'
+  }
+
+  document.querySelector( '.preview-window--footer__close-link' ).onclick = event => {
+    event.preventDefault()
+
+    modal.style.display = 'none'
+  }
+
+  document.getElementById( 'plain-text-preview' ).onclick = event => {
+    $( '#preview-text-text.item-page.text__tree.hidden' ).removeClass( 'hidden' ).addClass( 'show' )
+    $( '#preview-text.item-page.html__tree.show' ).removeClass( 'show' ).addClass( 'hidden' )
+    $( '.plain-text-download' ).removeClass( 'hidden' ).addClass( 'show' )
+    $( '.html-text-download' ).removeClass( 'show' ).addClass( 'hidden' )
+  }
+
+  document.getElementById( 'formatted-text-preview' ).onclick = event => {
+    $( '#preview-text.item-page.html__tree.hidden' ).removeClass( 'hidden' ).addClass( 'show' )
+    $( '#preview-text-text.item-page.text__tree.show' ).removeClass( 'show' ).addClass( 'hidden' )
+    $( '.html-text-download' ).removeClass( 'hidden' ).addClass( 'show' )
+    $( '.plain-text-download' ).removeClass( 'show' ).addClass( 'hidden' )
+  }
+})

public/javascripts/items.js

@@ -18,6 +18,8 @@ const titleEdited = event => {
   const elementToHide = $( event.target )
   const id = elementToHide.data( 'id' )
   const elementToShow = $( selector( 'item__title', id, 'span' ) )
+  console.log('element', elementToHide);
+
 
   if( event.keyCode === RETURN_KEY ) {
     let updatedTitle = elementToHide[0].value
@@ -50,7 +52,7 @@ const descriptionEdited = event => {
 
 const completedClicked = event => {
   const element = $( event.target )
-  const id = element.data( 'id' )
+  const id = element.parent().data( 'id' )
   const completed = ! element.data( 'completed' )
 
   fetch( `/items/${id}`, params({ completed: completed } ) )
@@ -128,14 +130,24 @@ const completedClicked = event => {
       )
     }
 
+  const deleteItem = event => {
+    const elementToHide = $( event.target ).closest( '.item' )
+    const id = elementToHide.data( 'id' )
+    const elementToDelete = $( `.title__data[data-id='${id}']` )
+
+    fetch( `/items/${id}`, fetchParams( 'DELETE' ))
+      .then( result => $( elementToHide[0] ).addClass( 'item--hidden' ))
+  }
+
 $(document).ready( () => {
   $( '.item__edit-title' ).keypress( titleEdited )
   $( '.item__title > span' ).click( clickToUpdate( 'item__title' ))
   $( '.item__edit-description' ).keypress( descriptionEdited )
   $( '.item__description > span' ).click( clickToUpdate( 'item__description' ))
-  $( '.item__toggle' ).click( completedClicked )
+  $( '.item__menu > ul > li:first-child' ).click( completedClicked )
   $( '.dropdown__toggle' ).click( dropdownToggle )
   $( '.star' ).click( starredToggle )
+  $( '.delete' ).click( deleteItem )
   getFilterStatus()
   getCheckedStatus()
 })

public/javascripts/task-dropdown.js

@@ -0,0 +1,12 @@
+const taskMenuTriggers = document.querySelectorAll( '.item__toggle' )
+
+taskMenuTriggers.forEach( trigger => {
+  trigger.addEventListener( 'mouseenter', event => {
+    event.target.children[ 0 ].style.display = 'block'
+  })
+
+  trigger.addEventListener( 'mouseleave', event => {
+    event.target.children[ 0 ].style.display = 'none'
+  })
+})
+

public/stylesheets/authenticated.css

@@ -69,6 +69,7 @@
 }
 
 .item__toggle {
+  position: relative;
   display: inline;
   font-size: 14px;
   padding: 0 6px;

public/stylesheets/exportmodal.css

@@ -0,0 +1,113 @@
+.modal {
+  display: none;
+  font-family: 'Open Sans', Arial;
+  background-color: white;
+  width: 65%;
+  font-size: 15px;
+  height: 500px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+  bottom: 20%;
+  right: 20%;
+  overflow: auto;
+  z-index: 101;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  outline: .5px #888 solid;
+}
+
+a.preview-window--footer__download-link, a.preview-window--footer__download-link:visited {
+  font-size: 15px;
+  color: blue;
+}
+
+.hidden {
+  display: none;
+}
+
+.show {
+  display: block;
+  font-size: 14px;
+}
+
+.preview-window--header {
+  display: flex;
+  padding-left: 15px;
+  padding-right: 15px;
+  width: 100%;
+  color: #4F4F4F;
+  text-align: left;
+  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
+  flex-direction: row;
+  background: rgba(226,226,226,1);
+  background: -moz-linear-gradient(left, rgba(226,226,226,1) 0%, rgba(221,221,221,1) 41%, rgba(219,219,219,1) 58%, rgba(244,244,244,1) 87%, rgba(254,254,254,1) 98%);
+  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(226,226,226,1)), color-stop(41%, rgba(221,221,221,1)), color-stop(58%, rgba(219,219,219,1)), color-stop(87%, rgba(244,244,244,1)), color-stop(98%, rgba(254,254,254,1)));
+  background: -webkit-linear-gradient(left, rgba(226,226,226,1) 0%, rgba(221,221,221,1) 41%, rgba(219,219,219,1) 58%, rgba(244,244,244,1) 87%, rgba(254,254,254,1) 98%);
+  background: -o-linear-gradient(left, rgba(226,226,226,1) 0%, rgba(221,221,221,1) 41%, rgba(219,219,219,1) 58%, rgba(244,244,244,1) 87%, rgba(254,254,254,1) 98%);
+  background: -ms-linear-gradient(left, rgba(226,226,226,1) 0%, rgba(221,221,221,1) 41%, rgba(219,219,219,1) 58%, rgba(244,244,244,1) 87%, rgba(254,254,254,1) 98%);
+  background: linear-gradient(to right, rgba(226,226,226,1) 0%, rgba(221,221,221,1) 41%, rgba(219,219,219,1) 58%, rgba(244,244,244,1) 87%, rgba(254,254,254,1) 98%);
+}
+
+.preview-window--body {
+  outline: .5px #888 solid;
+  margin-left: 15px;
+  margin-right: 15px;
+  margin-top: 15px;
+  padding-top: 15px;
+  padding-left: 15px;
+  padding-right: 15px;
+  overflow-y: auto;
+  justify-content: center;
+  overflow: auto;
+  height: 200px;
+  width: auto;
+}
+
+.preview-window--body__item {
+  margin-right: 14px;
+  margin-left: 14px;
+  padding: 15px;
+  background-color: #EEE;
+  align-content: center;
+  justify-content: space-between;
+  border: .25px #B6B6B6 solid;
+}
+
+.preview-window--footer {
+  color: #666;
+  font-size: 15px;
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+}
+
+p.preview-window--footer__item {
+  margin: 5px;
+}
+
+.preview-window--footer__separator {
+  border-top: .5px #888 solid;
+  margin-top: 10px;
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+}
+
+.preview-window--footer__close-link {
+  position: relative;
+  margin-top: 10px;
+  margin-bottom: 5px;
+  padding: 5px;
+  font-size: 13px;
+  color: white;
+  width: 25%;
+  border: 1px solid #111;
+}
+
+.preview-window--footer__close-link:hover {
+  background-color: #888;
+}

public/stylesheets/item-menu.css

@@ -0,0 +1,50 @@
+.item__menu {
+  display: none;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 14px;
+  background-color: #e8e8e8;
+  padding: 10px 5px;
+  width: 80px;
+  margin-bottom: 10px;
+  border-radius: 4px;
+  border: 1px solid #bbb ;
+  z-index: 8;
+}
+
+.item__menu::before {
+  content: '';
+  position: absolute;
+  top: -15px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-bottom: 15px solid hsl(0, 0%, 91%);
+  border-left: 15px solid transparent;
+  border-right: 15px solid transparent;
+}
+
+.item__menu ul {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}  
+
+.item__menu li {
+  border-top: 1px solid #bbb;
+  padding: 5px 0;
+}
+
+.item__menu li:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.item__menu li:first-child {
+  border-top: none;
+  padding-top: 0;
+}
+
+.item__menu li:last-child {
+  padding-bottom: 0;
+}

public/stylesheets/navbar.css

@@ -148,7 +148,8 @@
   text-decoration: none;
   color: #fff;
   width: 100%;
-  padding: 6px 0;
+  padding-top: 10px;
+  padding-bottom: 10px;
   display: block;
 }
 
@@ -157,10 +158,6 @@
   cursor: pointer;
 }
 
-.dropdown__item--label {
-  margin-left: 10px;
-}
-
 .dropdown__toggle--open {
   border-bottom: none;
   background-color: #666;

public/stylesheets/style.css

@@ -1,4 +1,4 @@
-body{
+body {
   min-width: 100%;
   top: 0;
   left: 0;

routes/items.js

@@ -9,7 +9,6 @@ const buildStarredItemArray = require( './items/build_starred_item_array' )
 
 router.get( '/', ( request, response ) => {
   const { Item } = request.app.get( 'models' )
-
   const { user, query } = request
 
   buildFilteredItemTree( Item, user, query )
@@ -25,6 +24,17 @@ router.get( '/starred', ( request, response ) => {
     .then( data => response.json( { data } ) )
 })
 
+router.get( '/download/:type', ( request, response ) => {
+  const { Item } = request.app.get( 'models' )
+
+  const { user, query } = request
+
+  response.set( 'Content-Type', 'text/plain' )
+  buildFilteredItemTree( Item, user, query )
+    .then( generateBreadcrumbs )
+    .then( respondWithItems( user, data => response.render( `items/${request.params.type}`, data )))
+})
+
 router.get( '/:item_id', ( request, response ) => {
   const { Item } = request.app.get( 'models' )
 
@@ -64,4 +74,19 @@ router.post( '/:id', ( request, response ) => {
     )
 })
 
+router.delete( '/:id', ( request, response ) => {
+  const { Item, Audit } = request.app.get( 'models' )
+  const id = parseInt( request.params.id )
+  const user_id = parseInt( request.user.id )
+
+  Item.findOne({ where: { id, user_id } })
+    .then( item => {
+      item.update({ is_deleted: true })
+
+      return item
+    })
+    .then( createAuditEntries( Item, Audit, user_id ) )
+    .then( result => response.status( 200 ).send({}) )
+})
+
 module.exports = router