diff --git a/webpack/scss/constants.scss b/webpack/scss/constants.scss index 6d8c742..587c54d 100644 --- a/webpack/scss/constants.scss +++ b/webpack/scss/constants.scss @@ -23,6 +23,7 @@ $rd-form-valid-color: '20d696'; $rd-form-neutral-color: 'b8c0c8'; $rd-form-search-color: '1d74e5'; $rd-form-invalid-color: 'ea4b35'; +$rd-form-primary-color: '54627c'; // Menu $menu-bg: #333; diff --git a/webpack/scss/header.scss b/webpack/scss/header.scss index e0ab47c..62f4eb8 100644 --- a/webpack/scss/header.scss +++ b/webpack/scss/header.scss @@ -48,6 +48,63 @@ } + // current version: EDIT + REMOVE + &.versions > div.current{ + + span.edit, + span.remove{ + display: inline-block; + position: relative; + top: .2em; + width: 1.1em; + height: 1.1em; + + border-radius: 3px; + + background: center center no-repeat; + background-size: 80% auto; + + &.edit{ + background-image: url('/asset/svg/a.svg@b8c0c8'); + &:hover{ + background-image: url('/asset/svg/a.svg@#{$rd-form-search-color}'); + } + } + + &.remove{ + background-image: url('/asset/svg/cross.svg@b8c0c8'); + &:hover{ + background-image: url('/asset/svg/cross.svg@#{$rd-form-invalid-color}'); + } + } + + &:last-child{ + margin-right: .5em; + } + } + overflow: hidden; + + // editable input + & > input[type='text']{ + display: inline-block; + position: relative; + width: 100%; + max-width: 10em; + + margin: 0; + padding: 0; + + border: none; + border-radius: 0; + + // background-color: #f00; + + font-size: inherit; + color: inherit; + } + + } + /* (1.2) Version dialog (to switch to another) */ & > div.department-dialog, & > div.version-dialog{ @@ -64,6 +121,8 @@ border-top: 0; border-radius: 0 0 3px 3px; + &>:first-child{ border-top: 1px solid #ddd; } + background-color: #fff; // box-shadow: 0 2px 2px #ddd; @@ -77,7 +136,7 @@ position: relative; padding: .5em 1em; - padding-left: .5em; + padding-left: 2em; background-color: #fff; @@ -88,53 +147,29 @@ // hover animation &:hover{ background-color: darken(#fff, 5%); } - // pre-icons - & > span.edit, - & > span.switch, - & > span.create{ - display: inline-block; - position: relative; - // top: calc( 50% - .7em/2 ); - // left: calc( 1em/2 + .7em/2 ); + // switch+create icons + &:before{ + content: ''; + + display: block; + position: absolute; + top: calc( 50% - 1em/2 ); + left: calc( .5em/2 + 1em/2 ); width: 1em; height: 1em; - padding-right: .5em; - - &.switch{ - background: url('/asset/svg/switch.svg@b8c0c8') center center no-repeat; - background-size: 80% auto; - &:hover{ - background-image: url('/asset/svg/switch.svg@#{$rd-form-invalid-color}'); - } - } - - &.edit{ - background: url('/asset/svg/a.svg@b8c0c8') center center no-repeat; - background-size: contain; - &:hover{ - background-image: url('/asset/svg/a.svg@#{$rd-form-search-color}'); - } - } - - &.create{ - background: url('/asset/svg/plus.svg@#{$rd-form-valid-color}') center center no-repeat; - background-size: 60% auto; - } - - + background: url('/asset/svg/switch.svg@#{$rd-form-primary-color}') center center no-repeat; + background-size: auto 80%; } - & > input{ - width: auto; - max-width: 6em; - padding: 0; - margin: .25em .5em; + // create icon specifications + &[data-id='-1']{ - border: none; - border-radius: 0; + &:before{ + background-image: url('/asset/svg/plus.svg@#{$rd-form-valid-color}'); + background-size: auto 60%; + } - background: transparent; } } diff --git a/webpack/vue/header.vue b/webpack/vue/header.vue index 6ff1f0b..bb45765 100644 --- a/webpack/vue/header.vue +++ b/webpack/vue/header.vue @@ -15,13 +15,16 @@
-
{{ get_vcurrent().name }}
+
+ + + + {{ get_vcurrent().name }} +
- - - - Créer + {{ v.name }} + Créer
@@ -47,7 +50,9 @@ export default { version: { dialog: false, current: -1, - list: [] + list: [], + edit: false, + newName: '' } }; }, @@ -81,7 +86,7 @@ export default { if( this.version.list[v].id == id ) return this.version.list[v]; - return { id: -2, name: '-', new_name: '-' }; + return { id: -2, name: '-' }; }, @@ -172,7 +177,7 @@ export default { if( rs.error !== 0 || !rs.hasOwnProperty('created_id') ){ return popup.ask({ - title: 'Erreur ('+err_code+')', + title: 'Erreur ('+rs.error+')', content: 'La création de version à échoué.', action: 'OK', type: 'neutral' @@ -191,36 +196,36 @@ export default { /* (6) Rename a version ---------------------------------------------------------*/ - v_rename(index){ + v_edit(){ - // fail if not found index - if( this.version.list[index] == null ) + // get current version + var cur = this.get_vcurrent(); + if( cur.id < 0 ) return; - var ver = this.version.list[index]; - var newname = ver.new_name; + var newname = this.version.newName; // 2. Popup confirm (new Promise( (resolve, reject) => { popup.ask({ title: 'Confirmation de modification de version', - content: `La version ${ver.name} va être renommée en ${newname}

Voulez-vous valider cette modification ?`, + content: `La version ${cur.name} va être renommée en ${newname}

Voulez-vous valider cette modification ?`, action: 'Valider', - type: 'valid' + type: 'search' }, (popup_rs) => { popup_rs && resolve() }); // 3. On popup confirm })).then( () => { // Call API to create a new version - api.call(`PUT department/version/${ver.id}`, {label:newname}, function(rs){ + api.call(`PUT department/version/${cur.id}`, {label:newname}, function(rs){ // 1. error -> popup if( rs.error !== 0 || !rs.hasOwnProperty('updated') ){ return popup.ask({ - title: 'Erreur ('+err_code+')', + title: 'Erreur ('+rs.error+')', content: 'La modification a échoué.', action: 'OK', type: 'neutral' @@ -229,13 +234,70 @@ export default { } // 3. Update GUI - ver.name = newname; - ver.new_name = newname; + cur.name = newname; }.bind(this)); + }).finally( () => { + this.version.edit = false; }) + }, + + /* (7) Remove a version + ---------------------------------------------------------*/ + v_remove(){ + + // get current version + var cur = this.get_vcurrent(); + if( cur.id < 0 ) + return; + + // if last version -> forbid + if( this.version.list.length < 2 ){ + return popup.ask({ + title: 'Dernière version', + content: `La version ${cur.name} ne peut être supprimée car il ne reste aucune autre version pour ce département`, + action: 'OK', + type: 'invalid' + }); + } + + // 2. Popup confirm + (new Promise( (resolve, reject) => { + + popup.ask({ + title: 'Confirmation de suppression', + content: `La version ${cur.name} va être supprimée. Toutes les données seront perdues de manière définitive

Voulez-vous supprimer cette version ?`, + action: 'Supprimer', + type: 'invalid' + }, (popup_rs) => { popup_rs && resolve() }); + + // 3. On popup confirm + })).then( () => { + + // Call API to create a new version + api.call(`DELETE department/version/${cur.id}`, {}, function(rs){ + + // 1. error -> popup + if( rs.error !== 0 || !rs.hasOwnProperty('deleted') ){ + + return popup.ask({ + title: 'Erreur ('+rs.error+')', + content: 'La suppression a échoué.', + action: 'OK', + type: 'neutral' + }, () => {}); + + } + + // 3. Reload page + document.location = ''; + + }.bind(this)); + + }); + } },