mirror of https://github.com/rancher/ui.git
122 lines
3.5 KiB
JavaScript
122 lines
3.5 KiB
JavaScript
import Component from '@ember/component';
|
|
import { inject as service } from '@ember/service';
|
|
import { set, get } from '@ember/object';
|
|
|
|
export default Component.extend({
|
|
sortFinishText: null,
|
|
model: null,
|
|
crt: null,
|
|
dragDom: null,
|
|
stageInfo: null,
|
|
stageIndex: null,
|
|
pipeline: null,
|
|
init(){
|
|
this._super(...arguments);
|
|
setTimeout(()=>{
|
|
this.showStepAdd();
|
|
},0);
|
|
},
|
|
dotClass: function(){
|
|
var stage = get(this, 'pipeline').stages[get(this, 'stageIndex')-1];
|
|
if(stage&&stage.needApprove){
|
|
return 'need-approve';
|
|
}
|
|
return ''
|
|
}.property('pipeline'),
|
|
sortingScope: function() {
|
|
return get(this, 'stageId')
|
|
}.property('stageId'),
|
|
// sortingScope: 'sortingPipelineSteps',
|
|
showStepAdd(){
|
|
var stepMode = get(this, 'stepMode');
|
|
var editMode= get(this, 'editMode');
|
|
let saved = get(this, 'saved');
|
|
if(stepMode==="scm"&&editMode==="new"&&!saved){
|
|
this.triggerAction({
|
|
action: 'addStep',
|
|
target: this
|
|
})
|
|
}
|
|
},
|
|
modalService: service('modal'),
|
|
actions: {
|
|
dragStart: function(content,e) {
|
|
var dom = e.target
|
|
var crt = dom.cloneNode(true);
|
|
crt.style.position = "fixed";
|
|
crt.style.top = "-100%"; crt.style.right = "-100%";
|
|
crt.style.backgroundColor=crt.style.color
|
|
dom.appendChild(crt);
|
|
e.dataTransfer.setDragImage(crt,e.offsetX,e.offsetY);
|
|
dom.style.backgroundColor=document.defaultView.getComputedStyle(dom.getElementsByClassName('step-name')[0]).color
|
|
dom.style.filter = 'brightness(1.3)';
|
|
this.dragDom = dom;
|
|
this.crt=crt;
|
|
},
|
|
startHook: function(){
|
|
|
|
},
|
|
dragEnd: function(){
|
|
var crt = this.crt
|
|
crt&&crt.remove()
|
|
if(this.dragDom){
|
|
this.dragDom.style.filter="";
|
|
this.dragDom.style.backgroundColor="white";
|
|
}
|
|
},
|
|
addStep: function() {
|
|
var cb = (step) => {
|
|
var model = get(this, 'model');
|
|
set(this, 'model',model.concat(step));
|
|
};
|
|
get(this, 'modalService').toggleModal('modal-pipeline-new-step', {
|
|
type: 'add',
|
|
pipeline: get(this, 'pipeline'),
|
|
clusterPipeline: get(this, 'clusterPipeline'),
|
|
stageInfo: get(this, 'stageInfo'),
|
|
stageIndex: get(this, 'stageIndex'),
|
|
stepMode: get(this, 'stepMode'),
|
|
editMode: get(this, 'editMode'),
|
|
accounts: get(this, 'accounts'),
|
|
routeState: get(this, 'routeState'),
|
|
cb: cb
|
|
});
|
|
},
|
|
editStep: function(index) {
|
|
var review = get(this, 'review');
|
|
get(this, 'modalService').toggleModal('modal-pipeline-new-step', {
|
|
type: review?'review':'edit',
|
|
pipeline: get(this, 'pipeline'),
|
|
clusterPipeline: get(this, 'clusterPipeline'),
|
|
params: get(this, 'model')[index],
|
|
stageInfo: get(this, 'stageInfo'),
|
|
stageIndex: get(this, 'stageIndex'),
|
|
stepMode: get(this, 'stepMode'),
|
|
editMode: get(this, 'editMode'),
|
|
accounts: get(this, 'accounts'),
|
|
routeState: get(this, 'routeState'),
|
|
cb: (step) => {
|
|
var model = get(this, 'model');
|
|
var newModel = model.map((ele,i) => {
|
|
if(i===index){
|
|
return step
|
|
}
|
|
return ele
|
|
})
|
|
set(this, 'model',newModel);
|
|
},
|
|
rmCb: ()=>{
|
|
var model = get(this, 'model');
|
|
var newModel = model.filter((ele,i) => {
|
|
if(i===index){
|
|
return false
|
|
}
|
|
return true
|
|
})
|
|
set(this, 'model',newModel);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|