mirrors/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2024-11-25 11:21:02 +00:00
Code Issues Projects Releases Wiki Activity

Highlight invalid entries in manual pipeline trigger (#4153)

Browse source 
and move key-value editor into own component
This commit is contained in:
6543 2024-10-06 15:34:20 +02:00 committed by GitHub
parent 7ff14530d4
commit 496859c083
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 129 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

107
web/src/components/form/KeyValueEditor.vue Normal file
View file

@ -0,0 +1,107 @@
<template>
<div class="flex flex-col gap-2">
<div v-for="(item, index) in displayItems" :key="index" class="flex gap-4">
<TextField
:id="`${id}-key-${index}`"
:model-value="item.key"
:placeholder="keyPlaceholder"
:class="{
'bg-red-100 dark:bg-red-900':
isDuplicateKey(item.key, index) || (item.key === '' && index !== displayItems.length - 1),
}"
@update:model-value="updateItem(index, 'key', $event)"
/>
<TextField
:id="`${id}-value-${index}`"
:model-value="item.value"
:placeholder="valuePlaceholder"
@update:model-value="updateItem(index, 'value', $event)"
/>
<div class="w-10 flex-shrink-0">
<Button
v-if="index !== displayItems.length - 1"
type="button"
color="red"
class="ml-auto"
:title="deleteTitle"
@click="deleteItem(index)"
>
<Icon name="remove" />
</Button>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue';
import Button from '~/components/atomic/Button.vue';
import Icon from '~/components/atomic/Icon.vue';
import TextField from '~/components/form/TextField.vue';
const props = defineProps<{
modelValue: Record<string, string>;
id?: string;
keyPlaceholder?: string;
valuePlaceholder?: string;
deleteTitle?: string;
}>();
const emit = defineEmits<{
(e: 'update:modelValue', value: Record<string, string>): void;
(e: 'update:isValid', value: boolean): void;
}>();
const items = ref(Object.entries(props.modelValue).map(([key, value]) => ({ key, value })));
const displayItems = computed(() => {
if (items.value.length === 0 || items.value[items.value.length - 1].key !== '') {
return [...items.value, { key: '', value: '' }];
}
return items.value;
});
function isDuplicateKey(key: string, index: number): boolean {
return items.value.some((item, i) => item.key === key && i !== index && key !== '');
}
function checkValidity() {
const isValid = items.value.every(
(item, idx) => !isDuplicateKey(item.key, idx) && (item.key !== '' || idx === items.value.length - 1),
);
emit('update:isValid', isValid);
}
function updateItem(index: number, field: 'key' | 'value', value: string) {
const newItems = [...items.value];
if (index === newItems.length) {
newItems.push({ key: '', value: '' });
}
newItems[index][field] = value;
items.value = newItems;
const newValue = Object.fromEntries(
newItems
.filter((item) => item.key !== '' && !isDuplicateKey(item.key, newItems.indexOf(item)))
.map((item) => [item.key, item.value]),
);
emit('update:modelValue', newValue);
checkValidity();
}
function deleteItem(index: number) {
items.value = items.value.filter((_, i) => i !== index);
const newValue = Object.fromEntries(
items.value
.filter((item) => item.key !== '' && !isDuplicateKey(item.key, items.value.indexOf(item)))
.map((item) => [item.key, item.value]),
);
emit('update:modelValue', newValue);
checkValidity();
}
</script>

82
web/src/views/repo/RepoManualPipeline.vue
View file

@ -7,33 +7,16 @@
</InputField>
<InputField v-slot="{ id }" :label="$t('repo.manual_pipeline.variables.title')">
<span class="text-sm text-wp-text-alt-100 mb-2">{{ $t('repo.manual_pipeline.variables.desc') }}</span>
<div class="flex flex-col gap-2">
<div v-for="(_, i) in payload.variables" :key="i" class="flex gap-4">
<TextField
:id="id"
v-model="payload.variables[i].name"
:placeholder="$t('repo.manual_pipeline.variables.name')"
/>
<TextField
:id="id"
v-model="payload.variables[i].value"
:placeholder="$t('repo.manual_pipeline.variables.value')"
/>
<div class="w-10 flex-shrink-0">
<Button
v-if="i !== payload.variables.length - 1"
color="red"
class="ml-auto"
:title="$t('repo.manual_pipeline.variables.delete')"
@click="deleteVar(i)"
>
<Icon name="remove" />
</Button>
</div>
</div>
</div>
<KeyValueEditor
:id="id"
v-model="payload.variables"
:key-placeholder="$t('repo.manual_pipeline.variables.name')"
:value-placeholder="$t('repo.manual_pipeline.variables.value')"
:delete-title="$t('repo.manual_pipeline.variables.delete')"
@update:is-valid="isVariablesValid = $event"
/>
</InputField>
<Button type="submit" :text="$t('repo.manual_pipeline.trigger')" />
<Button type="submit" :text="$t('repo.manual_pipeline.trigger')" :disabled="!isFormValid" />
</form>
</Panel>
<div v-else class="flex justify-center text-wp-text-100">
@ -44,15 +27,15 @@
<script lang="ts" setup>
import { useNotification } from '@kyvg/vue3-notification';
import type { Ref } from 'vue';
import { computed, onMounted, ref, inject as vueInject, watch } from 'vue';
import { computed, onMounted, ref, inject as vueInject } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import Button from '~/components/atomic/Button.vue';
import Icon from '~/components/atomic/Icon.vue';
import InputField from '~/components/form/InputField.vue';
import KeyValueEditor from '~/components/form/KeyValueEditor.vue';
import SelectField from '~/components/form/SelectField.vue';
import TextField from '~/components/form/TextField.vue';
import Panel from '~/components/layout/Panel.vue';
import useApiClient from '~/compositions/useApiClient';
import { inject } from '~/compositions/useInjectProvide';
@ -79,26 +62,22 @@ if (!repoPermissions) {
const router = useRouter();
const branches = ref<{ text: string; value: string }[]>([]);
const payload = ref<{ branch: string; variables: { name: string; value: string }[] }>({
const payload = ref<{ branch: string; variables: Record<string, string> }>({
branch: 'main',
variables: [
{
name: '',
value: '',
},
],
variables: {},
});
const pipelineOptions = computed(() => {
const variables = Object.fromEntries(
payload.value.variables.filter((e) => e.name !== '').map((item) => [item.name, item.value]),
);
return {
...payload.value,
variables,
};
const isVariablesValid = ref(true);
const isFormValid = computed(() => {
return payload.value.branch !== '' && isVariablesValid.value;
});
const pipelineOptions = computed(() => ({
...payload.value,
variables: payload.value.variables,
}));
const loading = ref(true);
onMounted(async () => {
if (!repoPermissions.value.push) {
@ -114,23 +93,6 @@ onMounted(async () => {
loading.value = false;
});
watch(
payload,
() => {
if (payload.value.variables[payload.value.variables.length - 1].name !== '') {
payload.value.variables.push({
name: '',
value: '',
});
}
},
{ deep: true },
);
function deleteVar(index: number) {
payload.value.variables.splice(index, 1);
}
async function triggerManualPipeline() {
loading.value = true;
const pipeline = await apiClient.createPipeline(repo.value.id, pipelineOptions.value);