mirrors/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2025-02-20 13:16:18 +00:00
Code Issues Projects Releases Wiki Activity

Link labels to input and select (#2974)

Browse source
This commit is contained in:
Lukas 2023-12-19 21:32:35 +01:00 committed by GitHub
parent 3704b39e9a
commit 5a7e314f5a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 95 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
web/src/components/admin/settings/AdminAgentsTab.vue
View file

@ -46,8 +46,9 @@
</div> </div>
<div v-else> <div v-else>
<form @submit.prevent="saveAgent"> <form @submit.prevent="saveAgent">
<InputField :label="$t('admin.settings.agents.name.name')"> <InputField v-slot="{ id }" :label="$t('admin.settings.agents.name.name')">
<TextField <TextField
:id="id"
v-model="selectedAgent.name" v-model="selectedAgent.name"
:placeholder="$t('admin.settings.agents.name.placeholder')" :placeholder="$t('admin.settings.agents.name.placeholder')"
required required
@ -63,39 +64,47 @@
</InputField> </InputField>
<template v-if="isEditingAgent"> <template v-if="isEditingAgent">
<InputField :label="$t('admin.settings.agents.token')"> <InputField v-slot="{ id }" :label="$t('admin.settings.agents.token')">
<TextField v-model="selectedAgent.token" :placeholder="$t('admin.settings.agents.token')" disabled /> <TextField
:id="id"
v-model="selectedAgent.token"
:placeholder="$t('admin.settings.agents.token')"
disabled
/>
</InputField> </InputField>
<InputField :label="$t('admin.settings.agents.id')"> <InputField v-slot="{ id }" :label="$t('admin.settings.agents.id')">
<TextField :model-value="selectedAgent.id?.toString()" disabled /> <TextField :id="id" :model-value="selectedAgent.id?.toString()" disabled />
</InputField> </InputField>
<InputField <InputField
v-slot="{ id }"
:label="$t('admin.settings.agents.backend.backend')" :label="$t('admin.settings.agents.backend.backend')"
docs-url="docs/next/administration/backends/docker" docs-url="docs/next/administration/backends/docker"
> >
<TextField v-model="selectedAgent.backend" disabled /> <TextField :id="id" v-model="selectedAgent.backend" disabled />
</InputField> </InputField>
<InputField :label="$t('admin.settings.agents.platform.platform')"> <InputField v-slot="{ id }" :label="$t('admin.settings.agents.platform.platform')">
<TextField v-model="selectedAgent.platform" disabled /> <TextField :id="id" v-model="selectedAgent.platform" disabled />
</InputField> </InputField>
<InputField <InputField
v-slot="{ id }"
:label="$t('admin.settings.agents.capacity.capacity')" :label="$t('admin.settings.agents.capacity.capacity')"
docs-url="docs/next/administration/agent-config#woodpecker_max_procs" docs-url="docs/next/administration/agent-config#woodpecker_max_procs"
> >
<span class="text-wp-text-alt-100">{{ $t('admin.settings.agents.capacity.desc') }}</span> <span class="text-wp-text-alt-100">{{ $t('admin.settings.agents.capacity.desc') }}</span>
<TextField :model-value="selectedAgent.capacity?.toString()" disabled /> <TextField :id="id" :model-value="selectedAgent.capacity?.toString()" disabled />
</InputField> </InputField>
<InputField :label="$t('admin.settings.agents.version')"> <InputField v-slot="{ id }" :label="$t('admin.settings.agents.version')">
<TextField :model-value="selectedAgent.version" disabled /> <TextField :id="id" :model-value="selectedAgent.version" disabled />
</InputField> </InputField>
<InputField :label="$t('admin.settings.agents.last_contact')"> <InputField v-slot="{ id }" :label="$t('admin.settings.agents.last_contact')">
<TextField <TextField
:id="id"
:model-value=" :model-value="
selectedAgent.last_contact selectedAgent.last_contact
? date.timeAgo(selectedAgent.last_contact * 1000) ? date.timeAgo(selectedAgent.last_contact * 1000)

12
web/src/components/admin/settings/AdminUsersTab.vue
View file

@ -43,18 +43,18 @@
</div> </div>
<div v-else> <div v-else>
<form @submit.prevent="saveUser"> <form @submit.prevent="saveUser">
<InputField :label="$t('admin.settings.users.login')"> <InputField v-slot="{ id }" :label="$t('admin.settings.users.login')">
<TextField v-model="selectedUser.login" :disabled="isEditingUser" /> <TextField :id="id" v-model="selectedUser.login" :disabled="isEditingUser" />
</InputField> </InputField>
<InputField :label="$t('admin.settings.users.email')"> <InputField v-slot="{ id }" :label="$t('admin.settings.users.email')">
<TextField v-model="selectedUser.email" /> <TextField :id="id" v-model="selectedUser.email" />
</InputField> </InputField>
<InputField :label="$t('admin.settings.users.avatar_url')"> <InputField v-slot="{ id }" :label="$t('admin.settings.users.avatar_url')">
<div class="flex gap-2"> <div class="flex gap-2">
<img v-if="selectedUser.avatar_url" class="rounded-md h-8 w-8" :src="selectedUser.avatar_url" /> <img v-if="selectedUser.avatar_url" class="rounded-md h-8 w-8" :src="selectedUser.avatar_url" />
<TextField v-model="selectedUser.avatar_url" /> <TextField :id="id" v-model="selectedUser.avatar_url" />
</div> </div>
</InputField> </InputField>

6
web/src/components/form/InputField.vue
View file

@ -1,11 +1,11 @@
<template> <template>
<div class="flex flex-col mt-2 mb-4"> <div class="flex flex-col mt-2 mb-4">
<div class="flex items-center mb-2"> <div class="flex items-center mb-2">
<label class="text-wp-text-100 font-bold" v-bind="$attrs">{{ label }}</label> <label class="text-wp-text-100 font-bold" :for="id" v-bind="$attrs">{{ label }}</label>
<DocsLink v-if="docsUrl" :topic="label" :url="docsUrl" class="ml-2" /> <DocsLink v-if="docsUrl" :topic="label" :url="docsUrl" class="ml-2" />
<slot v-else-if="$slots['titleActions']" name="titleActions" /> <slot v-else-if="$slots['titleActions']" name="titleActions" />
</div> </div>
<slot /> <slot :id="id" />
<div v-if="$slots['description']" class="ml-1 text-wp-text-alt-100"> <div v-if="$slots['description']" class="ml-1 text-wp-text-alt-100">
<slot name="description" /> <slot name="description" />
</div> </div>
@ -19,6 +19,8 @@ defineProps<{
label: string; label: string;
docsUrl?: string; docsUrl?: string;
}>(); }>();
const id = (Math.random() + 1).toString(36).substring(7);
</script> </script>
<script lang="ts"> <script lang="ts">

12
web/src/components/layout/popups/DeployPipelinePopup.vue
View file

@ -5,15 +5,15 @@
<span class="text-xl text-wp-text-100">{{ <span class="text-xl text-wp-text-100">{{
$t('repo.deploy_pipeline.title', { pipelineId: pipelineNumber }) $t('repo.deploy_pipeline.title', { pipelineId: pipelineNumber })
}}</span> }}</span>
<InputField :label="$t('repo.deploy_pipeline.enter_target')"> <InputField v-slot="{ id }" :label="$t('repo.deploy_pipeline.enter_target')">
<TextField v-model="payload.environment" required /> <TextField :id="id" v-model="payload.environment" required />
</InputField> </InputField>
<InputField :label="$t('repo.deploy_pipeline.variables.title')"> <InputField v-slot="{ id }" :label="$t('repo.deploy_pipeline.variables.title')">
<span class="text-sm text-wp-text-alt-100 mb-2">{{ $t('repo.deploy_pipeline.variables.desc') }}</span> <span class="text-sm text-wp-text-alt-100 mb-2">{{ $t('repo.deploy_pipeline.variables.desc') }}</span>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<div v-for="(value, name) in payload.variables" :key="name" class="flex gap-4"> <div v-for="(value, name) in payload.variables" :key="name" class="flex gap-4">
<TextField :model-value="name" disabled /> <TextField :id="id" :model-value="name" disabled />
<TextField :model-value="value" disabled /> <TextField :id="id" :model-value="value" disabled />
<div class="w-34 flex-shrink-0"> <div class="w-34 flex-shrink-0">
<Button color="red" class="ml-auto" @click="deleteVar(name)"> <Button color="red" class="ml-auto" @click="deleteVar(name)">
<i-la-times /> <i-la-times />
@ -22,11 +22,13 @@
</div> </div>
<form class="flex gap-4" @submit.prevent="addPipelineVariable"> <form class="flex gap-4" @submit.prevent="addPipelineVariable">
<TextField <TextField
:id="id"
v-model="newPipelineVariable.name" v-model="newPipelineVariable.name"
:placeholder="$t('repo.deploy_pipeline.variables.name')" :placeholder="$t('repo.deploy_pipeline.variables.name')"
required required
/> />
<TextField <TextField
:id="id"
v-model="newPipelineVariable.value" v-model="newPipelineVariable.value"
:placeholder="$t('repo.deploy_pipeline.variables.value')" :placeholder="$t('repo.deploy_pipeline.variables.value')"
required required

12
web/src/components/layout/popups/ManualPipelinePopup.vue
View file

@ -3,15 +3,15 @@
<Panel v-if="!loading"> <Panel v-if="!loading">
<form @submit.prevent="triggerManualPipeline"> <form @submit.prevent="triggerManualPipeline">
<span class="text-xl text-wp-text-100">{{ $t('repo.manual_pipeline.title') }}</span> <span class="text-xl text-wp-text-100">{{ $t('repo.manual_pipeline.title') }}</span>
<InputField :label="$t('repo.manual_pipeline.select_branch')"> <InputField v-slot="{ id }" :label="$t('repo.manual_pipeline.select_branch')">
<SelectField v-model="payload.branch" :options="branches" required /> <SelectField :id="id" v-model="payload.branch" :options="branches" required />
</InputField> </InputField>
<InputField :label="$t('repo.manual_pipeline.variables.title')"> <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> <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 class="flex flex-col gap-2">
<div v-for="(value, name) in payload.variables" :key="name" class="flex gap-4"> <div v-for="(value, name) in payload.variables" :key="name" class="flex gap-4">
<TextField :model-value="name" disabled /> <TextField :id="id" :model-value="name" disabled />
<TextField :model-value="value" disabled /> <TextField :id="id" :model-value="value" disabled />
<div class="w-34 flex-shrink-0"> <div class="w-34 flex-shrink-0">
<Button color="red" class="ml-auto" @click="deleteVar(name)"> <Button color="red" class="ml-auto" @click="deleteVar(name)">
<i-la-times /> <i-la-times />
@ -20,11 +20,13 @@
</div> </div>
<form class="flex gap-4" @submit.prevent="addPipelineVariable"> <form class="flex gap-4" @submit.prevent="addPipelineVariable">
<TextField <TextField
:id="id"
v-model="newPipelineVariable.name" v-model="newPipelineVariable.name"
:placeholder="$t('repo.manual_pipeline.variables.name')" :placeholder="$t('repo.manual_pipeline.variables.name')"
required required
/> />
<TextField <TextField
:id="id"
v-model="newPipelineVariable.value" v-model="newPipelineVariable.value"
:placeholder="$t('repo.manual_pipeline.variables.value')" :placeholder="$t('repo.manual_pipeline.variables.value')"
required required

1
web/src/components/layout/scaffold/Header.vue
View file

@ -25,6 +25,7 @@
<TextField <TextField
v-if="searchBoxPresent" v-if="searchBoxPresent"
class="w-auto <md:w-full <md:order-3" class="w-auto <md:w-full <md:order-3"
:aria-label="$t('search')"
:placeholder="$t('search')" :placeholder="$t('search')"
:model-value="search" :model-value="search"
@update:model-value="(value: string) => $emit('update:search', value)" @update:model-value="(value: string) => $emit('update:search', value)"

7
web/src/components/repo/settings/BadgeTab.vue
View file

@ -6,8 +6,9 @@
</a> </a>
</template> </template>
<InputField :label="$t('repo.settings.badge.type')"> <InputField v-slot="{ id }" :label="$t('repo.settings.badge.type')">
<SelectField <SelectField
:id="id"
v-model="badgeType" v-model="badgeType"
:options="[ :options="[
{ {
@ -26,8 +27,8 @@
required required
/> />
</InputField> </InputField>
<InputField :label="$t('repo.settings.badge.branch')"> <InputField v-slot="{ id }" :label="$t('repo.settings.badge.branch')">
<SelectField v-model="branch" :options="branches" required /> <SelectField :id="id" v-model="branch" :options="branches" required />
</InputField> </InputField>
<div v-if="badgeContent" class="flex flex-col space-y-4"> <div v-if="badgeContent" class="flex flex-col space-y-4">

19
web/src/components/repo/settings/CronTab.vue
View file

@ -37,19 +37,30 @@
<div v-else class="space-y-4"> <div v-else class="space-y-4">
<form @submit.prevent="createCron"> <form @submit.prevent="createCron">
<InputField :label="$t('repo.settings.crons.name.name')"> <InputField v-slot="{ id }" :label="$t('repo.settings.crons.name.name')">
<TextField v-model="selectedCron.name" :placeholder="$t('repo.settings.crons.name.placeholder')" required /> <TextField
:id="id"
v-model="selectedCron.name"
:placeholder="$t('repo.settings.crons.name.placeholder')"
required
/>
</InputField> </InputField>
<InputField :label="$t('repo.settings.crons.branch.title')"> <InputField v-slot="{ id }" :label="$t('repo.settings.crons.branch.title')">
<TextField v-model="selectedCron.branch" :placeholder="$t('repo.settings.crons.branch.placeholder')" /> <TextField
:id="id"
v-model="selectedCron.branch"
:placeholder="$t('repo.settings.crons.branch.placeholder')"
/>
</InputField> </InputField>
<InputField <InputField
v-slot="{ id }"
:label="$t('repo.settings.crons.schedule.title')" :label="$t('repo.settings.crons.schedule.title')"
docs-url="https://pkg.go.dev/github.com/robfig/cron?utm_source=godoc#hdr-CRON_Expression_Format" docs-url="https://pkg.go.dev/github.com/robfig/cron?utm_source=godoc#hdr-CRON_Expression_Format"
> >
<TextField <TextField
:id="id"
v-model="selectedCron.schedule" v-model="selectedCron.schedule"
:placeholder="$t('repo.settings.crons.schedule.placeholder')" :placeholder="$t('repo.settings.crons.schedule.placeholder')"
required required

11
web/src/components/repo/settings/GeneralTab.vue
View file

@ -5,10 +5,13 @@
docs-url="docs/usage/project-settings#pipeline-path" docs-url="docs/usage/project-settings#pipeline-path"
:label="$t('repo.settings.general.pipeline_path.path')" :label="$t('repo.settings.general.pipeline_path.path')"
> >
<template #default="{ id }">
<TextField <TextField
:id="id"
v-model="repoSettings.config_file" v-model="repoSettings.config_file"
:placeholder="$t('repo.settings.general.pipeline_path.default')" :placeholder="$t('repo.settings.general.pipeline_path.default')"
/> />
</template>
<template #description> <template #description>
<i18n-t keypath="repo.settings.general.pipeline_path.desc" tag="p" class="text-sm text-wp-text-alt-100"> <i18n-t keypath="repo.settings.general.pipeline_path.desc" tag="p" class="text-sm text-wp-text-alt-100">
<span class="code-box-inline px-1">{{ $t('repo.settings.general.pipeline_path.desc_path_example') }}</span> <span class="code-box-inline px-1">{{ $t('repo.settings.general.pipeline_path.desc_path_example') }}</span>
@ -51,9 +54,13 @@
<RadioField v-model="repoSettings.visibility" :options="projectVisibilityOptions" /> <RadioField v-model="repoSettings.visibility" :options="projectVisibilityOptions" />
</InputField> </InputField>
<InputField docs-url="docs/usage/project-settings#timeout" :label="$t('repo.settings.general.timeout.timeout')"> <InputField
v-slot="{ id }"
docs-url="docs/usage/project-settings#timeout"
:label="$t('repo.settings.general.timeout.timeout')"
>
<div class="flex items-center"> <div class="flex items-center">
<NumberField v-model="repoSettings.timeout" class="w-24" /> <NumberField :id="id" v-model="repoSettings.timeout" class="w-24" />
<span class="ml-4 text-gray-600">{{ $t('repo.settings.general.timeout.minutes') }}</span> <span class="ml-4 text-gray-600">{{ $t('repo.settings.general.timeout.minutes') }}</span>
</div> </div>
</InputField> </InputField>

11
web/src/components/repo/settings/RegistriesTab.vue
View file

@ -41,9 +41,10 @@
<div v-else class="space-y-4"> <div v-else class="space-y-4">
<form @submit.prevent="createRegistry"> <form @submit.prevent="createRegistry">
<InputField :label="$t('repo.settings.registries.address.address')"> <InputField v-slot="{ id }" :label="$t('repo.settings.registries.address.address')">
<!-- TODO: check input field Address is a valid address --> <!-- TODO: check input field Address is a valid address -->
<TextField <TextField
:id="id"
v-model="selectedRegistry.address" v-model="selectedRegistry.address"
:placeholder="$t('repo.settings.registries.address.placeholder')" :placeholder="$t('repo.settings.registries.address.placeholder')"
required required
@ -51,12 +52,12 @@
/> />
</InputField> </InputField>
<InputField :label="$t('username')"> <InputField v-slot="{ id }" :label="$t('username')">
<TextField v-model="selectedRegistry.username" :placeholder="$t('username')" required /> <TextField :id="id" v-model="selectedRegistry.username" :placeholder="$t('username')" required />
</InputField> </InputField>
<InputField :label="$t('password')"> <InputField v-slot="{ id }" :label="$t('password')">
<TextField v-model="selectedRegistry.password" :placeholder="$t('password')" required /> <TextField :id="id" v-model="selectedRegistry.password" :placeholder="$t('password')" required />
</InputField> </InputField>
<div class="flex gap-2"> <div class="flex gap-2">

12
web/src/components/secrets/SecretEdit.vue
View file

@ -1,8 +1,9 @@
<template> <template>
<div v-if="innerValue" class="space-y-4"> <div v-if="innerValue" class="space-y-4">
<form @submit.prevent="save"> <form @submit.prevent="save">
<InputField :label="$t(i18nPrefix + 'name')"> <InputField v-slot="{ id }" :label="$t(i18nPrefix + 'name')">
<TextField <TextField
:id="id"
v-model="innerValue.name" v-model="innerValue.name"
:placeholder="$t(i18nPrefix + 'name')" :placeholder="$t(i18nPrefix + 'name')"
required required
@ -10,8 +11,9 @@
/> />
</InputField> </InputField>
<InputField :label="$t(i18nPrefix + 'value')"> <InputField v-slot="{ id }" :label="$t(i18nPrefix + 'value')">
<TextField <TextField
:id="id"
v-model="innerValue.value" v-model="innerValue.value"
:placeholder="$t(i18nPrefix + 'value')" :placeholder="$t(i18nPrefix + 'value')"
:lines="5" :lines="5"
@ -19,16 +21,16 @@
/> />
</InputField> </InputField>
<InputField :label="$t(i18nPrefix + 'images.images')"> <InputField v-slot="{ id }" :label="$t(i18nPrefix + 'images.images')">
<span class="ml-1 mb-2 text-wp-text-alt-100">{{ $t(i18nPrefix + 'images.desc') }}</span> <span class="ml-1 mb-2 text-wp-text-alt-100">{{ $t(i18nPrefix + 'images.desc') }}</span>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<div v-for="image in innerValue.images" :key="image" class="flex gap-2"> <div v-for="image in innerValue.images" :key="image" class="flex gap-2">
<TextField :model-value="image" disabled /> <TextField :id="id" :model-value="image" disabled />
<Button type="button" color="gray" start-icon="trash" @click="removeImage(image)" /> <Button type="button" color="gray" start-icon="trash" @click="removeImage(image)" />
</div> </div>
<div class="flex gap-2"> <div class="flex gap-2">
<TextField v-model="newImage" @keydown.enter.prevent="addNewImage" /> <TextField :id="id" v-model="newImage" @keydown.enter.prevent="addNewImage" />
<Button type="button" color="gray" start-icon="plus" @click="addNewImage" /> <Button type="button" color="gray" start-icon="plus" @click="addNewImage" />
</div> </div>
</div> </div>

7
web/src/components/user/UserGeneralTab.vue
View file

@ -1,10 +1,11 @@
<template> <template>
<Settings :title="$t('user.settings.general.general')"> <Settings :title="$t('user.settings.general.general')">
<InputField :label="$t('user.settings.general.language')"> <InputField v-slot="{ id }" :label="$t('user.settings.general.language')">
<SelectField v-model="selectedLocale" :options="localeOptions" /> <SelectField :id="id" v-model="selectedLocale" :options="localeOptions" />
</InputField> </InputField>
<InputField :label="$t('user.settings.general.theme.theme')"> <InputField v-slot="{ id }" :label="$t('user.settings.general.theme.theme')">
<SelectField <SelectField
:id="id"
v-model="storeTheme" v-model="storeTheme"
:options="[ :options="[
{ value: 'auto', text: $t('user.settings.general.theme.auto') }, { value: 'auto', text: $t('user.settings.general.theme.auto') },