mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-20 11:22:15 +00:00
refactor(editor): Apply Prettier (no-changelog) (#4920)
* ⚡ Adjust `format` script * 🔥 Remove exemption for `editor-ui` * 🎨 Prettify * 👕 Fix lint
This commit is contained in:
Iván Ovejero
@@ -8,154 +8,202 @@
|
||||
color="text-dark"
|
||||
/>
|
||||
|
||||
<div v-for="(value, index) in mutableValues" :key="index" class="duplicate-parameter-item" :class="parameter.type">
|
||||
<div
|
||||
v-for="(value, index) in mutableValues"
|
||||
:key="index"
|
||||
class="duplicate-parameter-item"
|
||||
:class="parameter.type"
|
||||
>
|
||||
<div class="delete-item clickable" v-if="!isReadOnly">
|
||||
<font-awesome-icon icon="trash" :title="$locale.baseText('multipleParameter.deleteItem')" @click="deleteItem(index)" />
|
||||
<font-awesome-icon
|
||||
icon="trash"
|
||||
:title="$locale.baseText('multipleParameter.deleteItem')"
|
||||
@click="deleteItem(index)"
|
||||
/>
|
||||
<div v-if="sortable">
|
||||
<font-awesome-icon v-if="index !== 0" icon="angle-up" class="clickable" :title="$locale.baseText('multipleParameter.moveUp')" @click="moveOptionUp(index)" />
|
||||
<font-awesome-icon v-if="index !== (mutableValues.length - 1)" icon="angle-down" class="clickable" :title="$locale.baseText('multipleParameter.moveDown')" @click="moveOptionDown(index)" />
|
||||
<font-awesome-icon
|
||||
v-if="index !== 0"
|
||||
icon="angle-up"
|
||||
class="clickable"
|
||||
:title="$locale.baseText('multipleParameter.moveUp')"
|
||||
@click="moveOptionUp(index)"
|
||||
/>
|
||||
<font-awesome-icon
|
||||
v-if="index !== mutableValues.length - 1"
|
||||
icon="angle-down"
|
||||
class="clickable"
|
||||
:title="$locale.baseText('multipleParameter.moveDown')"
|
||||
@click="moveOptionDown(index)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="parameter.type === 'collection'">
|
||||
<collection-parameter :parameter="parameter" :values="value" :nodeValues="nodeValues" :path="getPath(index)" :hideDelete="hideDelete" :isReadOnly="isReadOnly" @valueChanged="valueChanged" />
|
||||
<collection-parameter
|
||||
:parameter="parameter"
|
||||
:values="value"
|
||||
:nodeValues="nodeValues"
|
||||
:path="getPath(index)"
|
||||
:hideDelete="hideDelete"
|
||||
:isReadOnly="isReadOnly"
|
||||
@valueChanged="valueChanged"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<parameter-input-full class="duplicate-parameter-input-item" :parameter="parameter" :value="value" :displayOptions="true" :hideLabel="true" :path="getPath(index)" @valueChanged="valueChanged" inputSize="small" :isReadOnly="isReadOnly" />
|
||||
<parameter-input-full
|
||||
class="duplicate-parameter-input-item"
|
||||
:parameter="parameter"
|
||||
:value="value"
|
||||
:displayOptions="true"
|
||||
:hideLabel="true"
|
||||
:path="getPath(index)"
|
||||
@valueChanged="valueChanged"
|
||||
inputSize="small"
|
||||
:isReadOnly="isReadOnly"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="add-item-wrapper">
|
||||
<div v-if="mutableValues && mutableValues.length === 0 || isReadOnly" class="no-items-exist">
|
||||
<n8n-text size="small">{{ $locale.baseText('multipleParameter.currentlyNoItemsExist') }}</n8n-text>
|
||||
<div
|
||||
v-if="(mutableValues && mutableValues.length === 0) || isReadOnly"
|
||||
class="no-items-exist"
|
||||
>
|
||||
<n8n-text size="small">{{
|
||||
$locale.baseText('multipleParameter.currentlyNoItemsExist')
|
||||
}}</n8n-text>
|
||||
</div>
|
||||
<n8n-button v-if="!isReadOnly" type="tertiary" block @click="addItem()" :label="addButtonText" />
|
||||
<n8n-button
|
||||
v-if="!isReadOnly"
|
||||
type="tertiary"
|
||||
block
|
||||
@click="addItem()"
|
||||
:label="addButtonText"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue, { PropType } from "vue";
|
||||
import {
|
||||
IUpdateInformation,
|
||||
} from '@/Interface';
|
||||
import { deepCopy, INodeParameters, INodeProperties } from "n8n-workflow";
|
||||
import Vue, { PropType } from 'vue';
|
||||
import { IUpdateInformation } from '@/Interface';
|
||||
import { deepCopy, INodeParameters, INodeProperties } from 'n8n-workflow';
|
||||
import CollectionParameter from '@/components/CollectionParameter.vue';
|
||||
import ParameterInputFull from '@/components/ParameterInputFull.vue';
|
||||
|
||||
import { get } from 'lodash';
|
||||
|
||||
export default Vue.extend({
|
||||
name: 'MultipleParameter',
|
||||
components: {
|
||||
CollectionParameter,
|
||||
ParameterInputFull,
|
||||
name: 'MultipleParameter',
|
||||
components: {
|
||||
CollectionParameter,
|
||||
ParameterInputFull,
|
||||
},
|
||||
props: {
|
||||
nodeValues: {
|
||||
type: Object as PropType<Record<string, INodeParameters[]>>,
|
||||
required: true,
|
||||
},
|
||||
props: {
|
||||
nodeValues: {
|
||||
type: Object as PropType<Record<string, INodeParameters[]>>,
|
||||
required: true,
|
||||
},
|
||||
parameter: {
|
||||
type: Object as PropType<INodeProperties>,
|
||||
required: true,
|
||||
},
|
||||
path: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
values: {
|
||||
type: Array as PropType<INodeParameters[]>,
|
||||
default: () => [],
|
||||
},
|
||||
isReadOnly: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
parameter: {
|
||||
type: Object as PropType<INodeProperties>,
|
||||
required: true,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mutableValues: [] as INodeParameters[],
|
||||
path: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
values: {
|
||||
type: Array as PropType<INodeParameters[]>,
|
||||
default: () => [],
|
||||
},
|
||||
isReadOnly: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mutableValues: [] as INodeParameters[],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
values: {
|
||||
handler(newValues: INodeParameters[]) {
|
||||
this.mutableValues = deepCopy(newValues);
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.mutableValues = deepCopy(this.values);
|
||||
},
|
||||
computed: {
|
||||
addButtonText(): string {
|
||||
if (
|
||||
!this.parameter.typeOptions ||
|
||||
(this.parameter.typeOptions && !this.parameter.typeOptions.multipleValueButtonText)
|
||||
) {
|
||||
return this.$locale.baseText('multipleParameter.addItem');
|
||||
}
|
||||
|
||||
return this.$locale.nodeText().multipleValueButtonText(this.parameter);
|
||||
},
|
||||
hideDelete(): boolean {
|
||||
return this.parameter.options?.length === 1;
|
||||
},
|
||||
sortable(): boolean {
|
||||
return !!this.parameter.typeOptions?.sortable;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
addItem() {
|
||||
const name = this.getPath();
|
||||
const currentValue = get(this.nodeValues, name, [] as INodeParameters[]);
|
||||
|
||||
currentValue.push(deepCopy(this.parameter.default as INodeParameters));
|
||||
|
||||
const parameterData = {
|
||||
name,
|
||||
value: currentValue,
|
||||
};
|
||||
|
||||
this.$emit('valueChanged', parameterData);
|
||||
},
|
||||
watch: {
|
||||
values: {
|
||||
handler(newValues: INodeParameters[]) {
|
||||
this.mutableValues = deepCopy(newValues);
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
deleteItem(index: number) {
|
||||
const parameterData = {
|
||||
name: this.getPath(index),
|
||||
value: undefined,
|
||||
};
|
||||
|
||||
this.$emit('valueChanged', parameterData);
|
||||
},
|
||||
created(){
|
||||
this.mutableValues = deepCopy(this.values);
|
||||
getPath(index?: number): string {
|
||||
return this.path + (index !== undefined ? `[${index}]` : '');
|
||||
},
|
||||
computed: {
|
||||
addButtonText (): string {
|
||||
if (
|
||||
!this.parameter.typeOptions ||
|
||||
(this.parameter.typeOptions && !this.parameter.typeOptions.multipleValueButtonText)
|
||||
) {
|
||||
return this.$locale.baseText('multipleParameter.addItem');
|
||||
}
|
||||
moveOptionDown(index: number) {
|
||||
this.mutableValues.splice(index + 1, 0, this.mutableValues.splice(index, 1)[0]);
|
||||
|
||||
return this.$locale.nodeText().multipleValueButtonText(this.parameter);
|
||||
},
|
||||
hideDelete (): boolean {
|
||||
return this.parameter.options?.length === 1;
|
||||
},
|
||||
sortable (): boolean {
|
||||
return !!this.parameter.typeOptions?.sortable;
|
||||
},
|
||||
const parameterData = {
|
||||
name: this.path,
|
||||
value: this.mutableValues,
|
||||
};
|
||||
|
||||
this.$emit('valueChanged', parameterData);
|
||||
},
|
||||
methods: {
|
||||
addItem () {
|
||||
const name = this.getPath();
|
||||
const currentValue = get(this.nodeValues, name, [] as INodeParameters[]);
|
||||
moveOptionUp(index: number) {
|
||||
this.mutableValues.splice(index - 1, 0, this.mutableValues.splice(index, 1)[0]);
|
||||
|
||||
currentValue.push(deepCopy(this.parameter.default as INodeParameters));
|
||||
const parameterData = {
|
||||
name: this.path,
|
||||
value: this.mutableValues,
|
||||
};
|
||||
|
||||
const parameterData = {
|
||||
name,
|
||||
value: currentValue,
|
||||
};
|
||||
|
||||
this.$emit('valueChanged', parameterData);
|
||||
},
|
||||
deleteItem (index: number) {
|
||||
const parameterData = {
|
||||
name: this.getPath(index),
|
||||
value: undefined,
|
||||
};
|
||||
|
||||
this.$emit('valueChanged', parameterData);
|
||||
},
|
||||
getPath (index?: number): string {
|
||||
return this.path + (index !== undefined ? `[${index}]` : '');
|
||||
},
|
||||
moveOptionDown (index: number) {
|
||||
this.mutableValues.splice(index + 1, 0, this.mutableValues.splice(index, 1)[0]);
|
||||
|
||||
const parameterData = {
|
||||
name: this.path,
|
||||
value: this.mutableValues,
|
||||
};
|
||||
|
||||
this.$emit('valueChanged', parameterData);
|
||||
},
|
||||
moveOptionUp (index: number) {
|
||||
this.mutableValues.splice(index - 1, 0, this.mutableValues.splice(index, 1)[0]);
|
||||
|
||||
const parameterData = {
|
||||
name: this.path,
|
||||
value: this.mutableValues,
|
||||
};
|
||||
|
||||
this.$emit('valueChanged', parameterData);
|
||||
},
|
||||
valueChanged (parameterData: IUpdateInformation) {
|
||||
this.$emit('valueChanged', parameterData);
|
||||
},
|
||||
this.$emit('valueChanged', parameterData);
|
||||
},
|
||||
});
|
||||
valueChanged(parameterData: IUpdateInformation) {
|
||||
this.$emit('valueChanged', parameterData);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -169,7 +217,7 @@ export default Vue.extend({
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0.1em;
|
||||
top: .3em;
|
||||
top: 0.3em;
|
||||
z-index: 999;
|
||||
color: #f56c6c;
|
||||
width: 15px;
|
||||
@@ -189,7 +237,7 @@ export default Vue.extend({
|
||||
.duplicate-parameter-item {
|
||||
position: relative;
|
||||
|
||||
.multi > .delete-item{
|
||||
.multi > .delete-item {
|
||||
top: 0.1em;
|
||||
}
|
||||
}
|
||||
@@ -215,7 +263,7 @@ export default Vue.extend({
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.duplicate-parameter-item .multi > .delete-item{
|
||||
.duplicate-parameter-item .multi > .delete-item {
|
||||
top: 0.1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user