From de576d54d99613d9eca37aed2db53570e6a26512 Mon Sep 17 00:00:00 2001 From: Benjamin ter Kuile Date: Tue, 1 Jul 2014 15:18:51 +0200 Subject: [PATCH] Supplier section management improvements --- .../app/components/dropdown_link.js.coffee | 8 +---- .../modal_dialog_component.js.coffee | 4 +++ .../modal_confirm_controller.js.coffee | 8 +++++ .../controllers/modal_controller.js.coffee | 4 +++ .../modal_info_controller.js.coffee | 5 +++ ...al_section_add_tables_controller.js.coffee | 25 +++++++++++++ .../controllers/section_controller.js.coffee | 4 +-- .../app/routes/application_route.js.coffee | 16 +++++++++ .../supplier/app/templates/application.emblem | 2 ++ .../supplier/app/templates/application.hbs | 1 - .../templates/components/modal-dialog.emblem | 2 ++ .../supplier/app/templates/modal.emblem | 4 +++ .../app/templates/modal_confirm.emblem | 6 ++++ .../supplier/app/templates/modal_info.emblem | 5 +++ .../templates/modal_section_add_tables.emblem | 24 +++++++++++++ .../supplier/app/templates/section.emblem | 16 ++++++--- .../app/views/section_table_view.js.coffee | 2 +- .../foundation1/_ember_dropdown.css.sass | 7 ---- .../supplier/foundation1/_qmodal.css.sass | 16 +++++++++ .../supplier/foundation1/_qsections.css.sass | 36 +++++++++++++++++++ .../supplier/foundation1/_qtables.css.sass | 5 ++- .../supplier/foundation1/application.css.sass | 1 + .../suppliers/sections_controller.rb | 4 +-- 23 files changed, 180 insertions(+), 25 deletions(-) create mode 100644 app/assets/javascripts/supplier/app/components/modal_dialog_component.js.coffee create mode 100644 app/assets/javascripts/supplier/app/controllers/modal_confirm_controller.js.coffee create mode 100644 app/assets/javascripts/supplier/app/controllers/modal_controller.js.coffee create mode 100644 app/assets/javascripts/supplier/app/controllers/modal_info_controller.js.coffee create mode 100644 app/assets/javascripts/supplier/app/controllers/modal_section_add_tables_controller.js.coffee create mode 100644 app/assets/javascripts/supplier/app/templates/application.emblem delete mode 100644 app/assets/javascripts/supplier/app/templates/application.hbs create mode 100644 app/assets/javascripts/supplier/app/templates/components/modal-dialog.emblem create mode 100644 app/assets/javascripts/supplier/app/templates/modal.emblem create mode 100644 app/assets/javascripts/supplier/app/templates/modal_confirm.emblem create mode 100644 app/assets/javascripts/supplier/app/templates/modal_info.emblem create mode 100644 app/assets/javascripts/supplier/app/templates/modal_section_add_tables.emblem create mode 100644 app/assets/stylesheets/supplier/foundation1/_qmodal.css.sass diff --git a/app/assets/javascripts/supplier/app/components/dropdown_link.js.coffee b/app/assets/javascripts/supplier/app/components/dropdown_link.js.coffee index 2827ddab..365640b1 100644 --- a/app/assets/javascripts/supplier/app/components/dropdown_link.js.coffee +++ b/app/assets/javascripts/supplier/app/components/dropdown_link.js.coffee @@ -3,10 +3,4 @@ Qsupplier.App.DropdownLink = Ember.Component.extend active: false classNames: ['dropdown-container'] classNameBindings: ['active'] - didInsertElement: -> - @$('.dropdown-trigger').click (e)=> - e.preventDefault() - @set 'active', !@get('active') - - - + click: -> @set 'active', !@get('active') diff --git a/app/assets/javascripts/supplier/app/components/modal_dialog_component.js.coffee b/app/assets/javascripts/supplier/app/components/modal_dialog_component.js.coffee new file mode 100644 index 00000000..c7452116 --- /dev/null +++ b/app/assets/javascripts/supplier/app/components/modal_dialog_component.js.coffee @@ -0,0 +1,4 @@ +Qsupplier.App.ModalDialogComponent = Ember.Component.extend + actions: + close: -> + @sendAction() diff --git a/app/assets/javascripts/supplier/app/controllers/modal_confirm_controller.js.coffee b/app/assets/javascripts/supplier/app/controllers/modal_confirm_controller.js.coffee new file mode 100644 index 00000000..507b7ff9 --- /dev/null +++ b/app/assets/javascripts/supplier/app/controllers/modal_confirm_controller.js.coffee @@ -0,0 +1,8 @@ +Qsupplier.App.ModalConfirmController = Ember.ObjectController.extend + actions: + close: -> + @get('model.cancel').call(@) if @get('model.cancel') + @send 'closeModal' + confirm: -> + @get('model.ok').call(@) + @send 'closeModal' diff --git a/app/assets/javascripts/supplier/app/controllers/modal_controller.js.coffee b/app/assets/javascripts/supplier/app/controllers/modal_controller.js.coffee new file mode 100644 index 00000000..82d22baa --- /dev/null +++ b/app/assets/javascripts/supplier/app/controllers/modal_controller.js.coffee @@ -0,0 +1,4 @@ +Qsupplier.App.ModalController = Ember.ObjectController.extend + actions: + close: -> + @send 'closeModal' diff --git a/app/assets/javascripts/supplier/app/controllers/modal_info_controller.js.coffee b/app/assets/javascripts/supplier/app/controllers/modal_info_controller.js.coffee new file mode 100644 index 00000000..d35f46b3 --- /dev/null +++ b/app/assets/javascripts/supplier/app/controllers/modal_info_controller.js.coffee @@ -0,0 +1,5 @@ +Qsupplier.App.ModalInfoController = Ember.ObjectController.extend + actions: + close: -> + @get('model.cancel').call(@) if @get('model.cancel') + @send 'closeModal' diff --git a/app/assets/javascripts/supplier/app/controllers/modal_section_add_tables_controller.js.coffee b/app/assets/javascripts/supplier/app/controllers/modal_section_add_tables_controller.js.coffee new file mode 100644 index 00000000..5b0e49c4 --- /dev/null +++ b/app/assets/javascripts/supplier/app/controllers/modal_section_add_tables_controller.js.coffee @@ -0,0 +1,25 @@ +Qsupplier.App.ModalSectionAddTablesController = Ember.ObjectController.extend + number_start: 100 + number_end: 110 + actions: + close: -> + @get('model.cancel').call(@) if @get('model.cancel') + @send 'closeModal' + confirm: -> + @get('model.ok').call(@) + @send 'closeModal' + addTables: -> + s = parseInt(@get('number_start')) + e = parseInt(@get('number_end')) + if e < s + @set 'number_start', e + @set 'number_end', s + s = @get('number_start') + e = @get('number_end') + + Ember.$.post Routes.add_tables_suppliers_section_path(@get('model.id')), + number_start: s + number_end: e + , (result,state,xhr)=> + @store.pushPayload 'table', result + @send 'close' diff --git a/app/assets/javascripts/supplier/app/controllers/section_controller.js.coffee b/app/assets/javascripts/supplier/app/controllers/section_controller.js.coffee index a686fe5e..62f9d299 100644 --- a/app/assets/javascripts/supplier/app/controllers/section_controller.js.coffee +++ b/app/assets/javascripts/supplier/app/controllers/section_controller.js.coffee @@ -9,8 +9,8 @@ Qsupplier.App.SectionController = Ember.ObjectController.extend @set('editmode', false) @get('model').save() addTables: -> - debugger - $('#add-tables-modal').modal() + #$('#add-tables-modal').modal() + @send 'openModal', 'modal_section_add_tables', @get('model') arrangeTables: -> $('#arrange-tables-modal').modal() textures: ['wood1', 'wood2'] diff --git a/app/assets/javascripts/supplier/app/routes/application_route.js.coffee b/app/assets/javascripts/supplier/app/routes/application_route.js.coffee index 4d20c935..ac844a05 100644 --- a/app/assets/javascripts/supplier/app/routes/application_route.js.coffee +++ b/app/assets/javascripts/supplier/app/routes/application_route.js.coffee @@ -6,3 +6,19 @@ Qsupplier.App.ApplicationRoute = Ember.Route.extend setupController: (controller)-> @store.find 'list', state: 'active' controller.set 'product_categories', @store.all('product_category') + actions: + openModal: (modalName, model)-> + @controllerFor(modalName).set('model', model) + @render modalName, + into: 'application' + outlet: 'modal' + closeModal: -> + @disconnectOutlet + outlet: 'modal' + parentView: 'application' + confirm: (options = {})-> + @send 'openModal', 'modal_confirm', Ember.Object.create + title: options.title + body: options.body + cancel: options.cancel + ok: options.ok diff --git a/app/assets/javascripts/supplier/app/templates/application.emblem b/app/assets/javascripts/supplier/app/templates/application.emblem new file mode 100644 index 00000000..1b7dd0b3 --- /dev/null +++ b/app/assets/javascripts/supplier/app/templates/application.emblem @@ -0,0 +1,2 @@ += outlet += outlet modal diff --git a/app/assets/javascripts/supplier/app/templates/application.hbs b/app/assets/javascripts/supplier/app/templates/application.hbs deleted file mode 100644 index c24cd689..00000000 --- a/app/assets/javascripts/supplier/app/templates/application.hbs +++ /dev/null @@ -1 +0,0 @@ -{{outlet}} diff --git a/app/assets/javascripts/supplier/app/templates/components/modal-dialog.emblem b/app/assets/javascripts/supplier/app/templates/components/modal-dialog.emblem new file mode 100644 index 00000000..8e3466bf --- /dev/null +++ b/app/assets/javascripts/supplier/app/templates/components/modal-dialog.emblem @@ -0,0 +1,2 @@ +.overlay{action "close"} + .modal{action bubbles=false preventDefault=false}= yield diff --git a/app/assets/javascripts/supplier/app/templates/modal.emblem b/app/assets/javascripts/supplier/app/templates/modal.emblem new file mode 100644 index 00000000..7bd6e23d --- /dev/null +++ b/app/assets/javascripts/supplier/app/templates/modal.emblem @@ -0,0 +1,4 @@ +modal-dialog action="close" + h3.flush--top Alert + p= body + button{action "close"} Done diff --git a/app/assets/javascripts/supplier/app/templates/modal_confirm.emblem b/app/assets/javascripts/supplier/app/templates/modal_confirm.emblem new file mode 100644 index 00000000..0dbf7756 --- /dev/null +++ b/app/assets/javascripts/supplier/app/templates/modal_confirm.emblem @@ -0,0 +1,6 @@ +modal-dialog action="close" + h3.flush--top= title + p=body + hr + button.confirm-cancel{action "close"}= t 'confirm.cancel' + button.confirm-ok.right{action 'confirm'}= t 'confirm.confirm' diff --git a/app/assets/javascripts/supplier/app/templates/modal_info.emblem b/app/assets/javascripts/supplier/app/templates/modal_info.emblem new file mode 100644 index 00000000..7e55aa31 --- /dev/null +++ b/app/assets/javascripts/supplier/app/templates/modal_info.emblem @@ -0,0 +1,5 @@ +modal-dialog action="close" + h3.flush--top= title + p==body + hr + button{action 'close'}= t 'modal.info.close' diff --git a/app/assets/javascripts/supplier/app/templates/modal_section_add_tables.emblem b/app/assets/javascripts/supplier/app/templates/modal_section_add_tables.emblem new file mode 100644 index 00000000..1d6a525f --- /dev/null +++ b/app/assets/javascripts/supplier/app/templates/modal_section_add_tables.emblem @@ -0,0 +1,24 @@ +modal-dialog action="close" + .modal-header + h3.flush--top=t 'section.add_tables.modal.title' + hr + .modal-body + p=t 'section.add_tables.modal.body_header' + form.form-horizontal + .control-group + .form-row + .form-label + label for='add-tables-number-start' + =t 'section.add_tables.modal.number_start' + .form-field + Qsupplier.App.NumberField valueBinding="number_start" + .form-row + .form-label + label for='add-tables-number-end' + =t 'section.add_tables.modal.number_end' + .form-field + Qsupplier.App.NumberField valueBinding="number_end" + .modal-footer + hr + button.confirm-cancel{action "close"}=t 'section.add_tables.modal.close_button' + button.confirm-ok.right{action "addTables"}=t 'section.add_tables.modal.add_button' diff --git a/app/assets/javascripts/supplier/app/templates/section.emblem b/app/assets/javascripts/supplier/app/templates/section.emblem index b46f96bc..e1d51559 100644 --- a/app/assets/javascripts/supplier/app/templates/section.emblem +++ b/app/assets/javascripts/supplier/app/templates/section.emblem @@ -19,13 +19,21 @@ Qsupplier.App.DropdownLink title="Action" ul li - a{action addTables} {{t 'section.add_tables.button_label'}} + a{action addTables} + span.section-add-tables-icon + =t 'section.add_tables.button_label' li - a{action arrangeTables} {{t 'section.arrange_tables.modal.title'}} + a{action arrangeTables} + span.section-arrange-tables-icon + =t 'section.arrange_tables.modal.title' li - a href="{{route 'qr_codes_suppliers_tables_path' section_id=id}}" {{t 'tables.qr_codes.link'}} + a href="{{route 'qr_codes_suppliers_tables_path' section_id=id}}" + span.table-qr-codes + =t 'tables.qr_codes.link' li - a href="{{route 'suppliers_section_path' id}}" data-method="delete" data-confirm="{{t 'helpers.links.are_you_sure' bare=true}}" {{t 'helpers.links.destroy'}} + a.section-destroy href="{{route 'suppliers_section_path' id}}" data-method="delete" data-confirm="{{t 'helpers.links.are_you_sure' bare=true}}" + span.section-remove-icon + =t 'helpers.links.destroy' Ember.TextField valueBinding="title" class="section-edit-title-field" Qsupplier.App.NumberField valueBinding="width" class="dimension section-edit-width-field" span.fa.fa-lg.fa-times diff --git a/app/assets/javascripts/supplier/app/views/section_table_view.js.coffee b/app/assets/javascripts/supplier/app/views/section_table_view.js.coffee index 408e867d..f104c8d9 100644 --- a/app/assets/javascripts/supplier/app/views/section_table_view.js.coffee +++ b/app/assets/javascripts/supplier/app/views/section_table_view.js.coffee @@ -52,7 +52,7 @@ Qsupplier.App.SectionTableView = Ember.View.extend DragNDrop.Draggable, #@$('.table-actions .title').remove() content.hide() @$el.on 'click', => - content.toggle() if @$el.hasClass('occupied') + content.toggle() if @$el.hasClass('occupied') and not @get('controller.editmode') #@$el.qtip #content: #text: content diff --git a/app/assets/stylesheets/supplier/foundation1/_ember_dropdown.css.sass b/app/assets/stylesheets/supplier/foundation1/_ember_dropdown.css.sass index 2d5bd42d..c99dc270 100644 --- a/app/assets/stylesheets/supplier/foundation1/_ember_dropdown.css.sass +++ b/app/assets/stylesheets/supplier/foundation1/_ember_dropdown.css.sass @@ -34,13 +34,6 @@ border-bottom-color: white bottom: 100% right: 30px - - - ul - list-style: none - //&:hover - //.dropdown-list-container - //display: block &.active .dropdown-list-container display: block diff --git a/app/assets/stylesheets/supplier/foundation1/_qmodal.css.sass b/app/assets/stylesheets/supplier/foundation1/_qmodal.css.sass new file mode 100644 index 00000000..5fbbe4f4 --- /dev/null +++ b/app/assets/stylesheets/supplier/foundation1/_qmodal.css.sass @@ -0,0 +1,16 @@ +.modal + margin: 10px auto + width: 300px + background-color: #fff + padding: 1em + +.overlay + height: 100% + width: 100% + position: fixed + top: 0 + left: 0 + background-color: rgba(0, 0, 0, 0.2) + +.flush--top + margin-top: 0 diff --git a/app/assets/stylesheets/supplier/foundation1/_qsections.css.sass b/app/assets/stylesheets/supplier/foundation1/_qsections.css.sass index 4f987254..74f2e764 100644 --- a/app/assets/stylesheets/supplier/foundation1/_qsections.css.sass +++ b/app/assets/stylesheets/supplier/foundation1/_qsections.css.sass @@ -1,9 +1,16 @@ .section-edit-mode-button + +button + margin: 0 + padding: 2px span @extend .fa @extend .fa-lg @extend .fa-edit .section-normal-mode-button + +button + margin: 0 + padding: 2px + margin-left: 8px span @extend .fa @extend .fa-lg @@ -14,6 +21,35 @@ .section-manage-tables .dropdown-container margin-right: 10px + $icon-right-margin: 8px + ul + list-style: none + margin: 0 + padding: 0 + li + border-bottom: 1px solid #bbb + a + font-size: 0.8em + display: block + padding: 4px 7px + &:hover + background-color: #ddd + span.table-qr-codes + margin-right: $icon-right-margin + .section-destroy + color: $alert-color + span.section-add-tables-icon + @extend .fa + @extend .fa-plus-square + margin-right: $icon-right-margin + span.section-arrange-tables-icon + @extend .fa + @extend .fa-th + margin-right: $icon-right-margin + span.section-remove-icon + @extend .fa + @extend .fa-trash-o + margin-right: $icon-right-margin input height: auto padding-top: 4px diff --git a/app/assets/stylesheets/supplier/foundation1/_qtables.css.sass b/app/assets/stylesheets/supplier/foundation1/_qtables.css.sass index f8a78fa8..fe733b61 100644 --- a/app/assets/stylesheets/supplier/foundation1/_qtables.css.sass +++ b/app/assets/stylesheets/supplier/foundation1/_qtables.css.sass @@ -18,12 +18,15 @@ table span @extend .fa @extend .fa-pencil -.table-qr-codes +a.table-qr-codes +button($bg: $secondary-color) +button-icon-only span @extend .fa @extend .fa-qrcode +span.table-qr-codes + @extend .fa + @extend .fa-qrcode .table-destroy +button($bg: $secondary-color) +button-icon-only diff --git a/app/assets/stylesheets/supplier/foundation1/application.css.sass b/app/assets/stylesheets/supplier/foundation1/application.css.sass index 585262d9..22bb29ad 100644 --- a/app/assets/stylesheets/supplier/foundation1/application.css.sass +++ b/app/assets/stylesheets/supplier/foundation1/application.css.sass @@ -17,4 +17,5 @@ @import ./qtables @import ./section_tab_headers @import ./qlists +@import ./qmodal @import ./ember_dropdown diff --git a/app/controllers/suppliers/sections_controller.rb b/app/controllers/suppliers/sections_controller.rb index b8943f13..d4bfe407 100644 --- a/app/controllers/suppliers/sections_controller.rb +++ b/app/controllers/suppliers/sections_controller.rb @@ -132,10 +132,10 @@ module Suppliers table = Table.new(number: table_number) table.supplier = current_supplier table.section = @section - table.save end @section.arrange_tables_in_grid - render json: {ok: true} + table_json = ActiveModel::ArraySerializer.new(@section.tables, each_serializer: SupplierTableSerializer, root: false).as_json + render json: {tables: table_json} end # POST /sections/1/arrange_tables {number_start: 1423, number_end: 234234}