diff --git a/public_html/asset/svg/switch.svg b/public_html/asset/svg/switch.svg new file mode 100644 index 0000000..f61c91a --- /dev/null +++ b/public_html/asset/svg/switch.svg @@ -0,0 +1,61 @@ + + + + + + image/svg+xml + + + + + + + + + diff --git a/webpack/scss/header.scss b/webpack/scss/header.scss index b5b9a74..e0ab47c 100644 --- a/webpack/scss/header.scss +++ b/webpack/scss/header.scss @@ -35,8 +35,6 @@ padding: .5em 1em; - padding-left: 2em; - border: 1px solid #ddd; border-radius: 3px; box-shadow: 0 2px 2px #fff; @@ -48,23 +46,6 @@ // hover animation &:hover{ box-shadow: 0 2px 2px darken(#fff,10%); } - // color state - &:before{ - content: ''; - - display: block; - position: absolute; - top: calc( 50% - .7em/2 ); - left: calc( 1em/2 + .7em/2 ); - width: .7em; - height: .7em; - - border-radius: 50%; - - background-color: $form-invalid-color; - } - - } /* (1.2) Version dialog (to switch to another) */ @@ -96,7 +77,7 @@ position: relative; padding: .5em 1em; - padding-left: 2em; + padding-left: .5em; background-color: #fff; @@ -107,26 +88,53 @@ // hover animation &:hover{ background-color: darken(#fff, 5%); } - // color state - &:before{ - content: ''; + // pre-icons + & > span.edit, + & > span.switch, + & > span.create{ + display: inline-block; + position: relative; + // top: calc( 50% - .7em/2 ); + // left: calc( 1em/2 + .7em/2 ); + width: 1em; + height: 1em; - display: block; - position: absolute; - top: calc( 50% - .7em/2 ); - left: calc( 1em/2 + .7em/2 ); - width: .7em; - height: .7em; + 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; + } - border-radius: 50%; - background-color: $form-grey-color; } - &[data-id='-1']:before{ + & > input{ + width: auto; + max-width: 6em; + padding: 0; + margin: .25em .5em; + + border: none; border-radius: 0; - background: url('/asset/svg/plus.svg@#{$rd-form-valid-color}') center center no-repeat; - background-size: contain; + + background: transparent; } } diff --git a/webpack/vue/header.vue b/webpack/vue/header.vue index ebdcae7..6ff1f0b 100644 --- a/webpack/vue/header.vue +++ b/webpack/vue/header.vue @@ -16,9 +16,12 @@
{{ get_vcurrent().name }}
+
- {{ v.name }} - Créer + + + + Créer
@@ -78,7 +81,7 @@ export default { if( this.version.list[v].id == id ) return this.version.list[v]; - return { id: -2, name: '-' }; + return { id: -2, name: '-', new_name: '-' }; }, @@ -161,8 +164,9 @@ export default { // 3. On popup confirm })).then( () => { + let newVersionName = `${this.get_vcurrent().name}*`; // Call API to create a new version - api.call(`POST department/version/`, {label:'test'}, function(rs){ + api.call(`POST department/version/`, {label:newVersionName}, function(rs){ // 1. error -> popup if( rs.error !== 0 || !rs.hasOwnProperty('created_id') ){ @@ -177,7 +181,56 @@ export default { } // 3. Update GUI - this.version.list.push( { id: parseInt(rs.created_id), label: label } ); + this.version.list.push( { id: parseInt(rs.created_id), name: newVersionName, new_name: newVersionName } ); + + }.bind(this)); + + }); + + }, + + /* (6) Rename a version + ---------------------------------------------------------*/ + v_rename(index){ + + // fail if not found index + if( this.version.list[index] == null ) + return; + + var ver = this.version.list[index]; + var newname = ver.new_name; + + // 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 ?`, + action: 'Valider', + type: 'valid' + }, (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){ + + // 1. error -> popup + if( rs.error !== 0 || !rs.hasOwnProperty('updated') ){ + + return popup.ask({ + title: 'Erreur ('+err_code+')', + content: 'La modification a échoué.', + action: 'OK', + type: 'neutral' + }, () => {}); + + } + + // 3. Update GUI + ver.name = newname; + ver.new_name = newname; }.bind(this)); @@ -186,6 +239,7 @@ export default { } }, + beforeMount(){ /* (1) Try to fetch versions from API */ @@ -206,7 +260,7 @@ export default { this.version.current = ver.iddatabase // add version to list - this.version.list.push( { id: ver.iddatabase, name: ver.label } ); + this.version.list.push( { id: ver.iddatabase, name: ver.label, new_name: ver.label } ); }