mirrors/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2024-11-26 11:51:02 +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 v-else>
<form @submit.prevent="saveAgent">
<InputField :label="$t('admin.settings.agents.name.name')">
<InputField v-slot="{ id }" :label="$t('admin.settings.agents.name.name')">
<TextField
:id="id"
v-model="selectedAgent.name"
:placeholder="$t('admin.settings.agents.name.placeholder')"
required
@ -63,39 +64,47 @@
</InputField>
<template v-if="isEditingAgent">
<InputField :label="$t('admin.settings.agents.token')">
<TextField v-model="selectedAgent.token" :placeholder="$t('admin.settings.agents.token')" disabled />
<InputField v-slot="{ id }" :label="$t('admin.settings.agents.token')">
<TextField
:id="id"
v-model="selectedAgent.token"
:placeholder="$t('admin.settings.agents.token')"
disabled
/>
</InputField>
<InputField :label="$t('admin.settings.agents.id')">
<TextField :model-value="selectedAgent.id?.toString()" disabled />
<InputField v-slot="{ id }" :label="$t('admin.settings.agents.id')">
<TextField :id="id" :model-value="selectedAgent.id?.toString()" disabled />
</InputField>
<InputField
v-slot="{ id }"
:label="$t('admin.settings.agents.backend.backend')"
docs-url="docs/next/administration/backends/docker"
>
<TextField v-model="selectedAgent.backend" disabled />
<TextField :id="id" v-model="selectedAgent.backend" disabled />
</InputField>
<InputField :label="$t('admin.settings.agents.platform.platform')">
<TextField v-model="selectedAgent.platform" disabled />
<InputField v-slot="{ id }" :label="$t('admin.settings.agents.platform.platform')">
<TextField :id="id" v-model="selectedAgent.platform" disabled />
</InputField>
<InputField
v-slot="{ id }"
:label="$t('admin.settings.agents.capacity.capacity')"
docs-url="docs/next/administration/agent-config#woodpecker_max_procs"
>
<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 :label="$t('admin.settings.agents.version')">
<TextField :model-value="selectedAgent.version" disabled />
<InputField v-slot="{ id }" :label="$t('admin.settings.agents.version')">
<TextField :id="id" :model-value="selectedAgent.version" disabled />
</InputField>
<InputField :label="$t('admin.settings.agents.last_contact')">
<InputField v-slot="{ id }" :label="$t('admin.settings.agents.last_contact')">
<TextField
:id="id"
:model-value="
selectedAgent.last_contact
? date.timeAgo(selectedAgent.last_contact * 1000)

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

@ -43,18 +43,18 @@
</div>
<div v-else>
<form @submit.prevent="saveUser">
<InputField :label="$t('admin.settings.users.login')">
<TextField v-model="selectedUser.login" :disabled="isEditingUser" />
<InputField v-slot="{ id }" :label="$t('admin.settings.users.login')">
<TextField :id="id" v-model="selectedUser.login" :disabled="isEditingUser" />
</InputField>
<InputField :label="$t('admin.settings.users.email')">
<TextField v-model="selectedUser.email" />
<InputField v-slot="{ id }" :label="$t('admin.settings.users.email')">
<TextField :id="id" v-model="selectedUser.email" />
</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">
<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>
</InputField>

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

@ -1,11 +1,11 @@
<template>
<div class="flex flex-col mt-2 mb-4">
<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" />
<slot v-else-if="$slots['titleActions']" name="titleActions" />
</div>
<slot />
<slot :id="id" />
<div v-if="$slots['description']" class="ml-1 text-wp-text-alt-100">
<slot name="description" />
</div>
@ -19,6 +19,8 @@ defineProps<{
label: string;
docsUrl?: string;
}>();
const id = (Math.random() + 1).toString(36).substring(7);
</script>
<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">{{
$t('repo.deploy_pipeline.title', { pipelineId: pipelineNumber })
}}</span>
<InputField :label="$t('repo.deploy_pipeline.enter_target')">
<TextField v-model="payload.environment" required />
<InputField v-slot="{ id }" :label="$t('repo.deploy_pipeline.enter_target')">
<TextField :id="id" v-model="payload.environment" required />
</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>
<div class="flex flex-col gap-2">
<div v-for="(value, name) in payload.variables" :key="name" class="flex gap-4">
<TextField :model-value="name" disabled />
<TextField :model-value="value" disabled />
<TextField :id="id" :model-value="name" disabled />
<TextField :id="id" :model-value="value" disabled />
<div class="w-34 flex-shrink-0">
<Button color="red" class="ml-auto" @click="deleteVar(name)">
<i-la-times />
@ -22,11 +22,13 @@
</div>
<form class="flex gap-4" @submit.prevent="addPipelineVariable">
<TextField
:id="id"
v-model="newPipelineVariable.name"
:placeholder="$t('repo.deploy_pipeline.variables.name')"
required
/>
<TextField
:id="id"
v-model="newPipelineVariable.value"
:placeholder="$t('repo.deploy_pipeline.variables.value')"
required

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

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

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

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

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

@ -6,8 +6,9 @@
</a>
</template>
<InputField :label="$t('repo.settings.badge.type')">
<InputField v-slot="{ id }" :label="$t('repo.settings.badge.type')">
<SelectField
:id="id"
v-model="badgeType"
:options="[
{
@ -26,8 +27,8 @@
required
/>
</InputField>
<InputField :label="$t('repo.settings.badge.branch')">
<SelectField v-model="branch" :options="branches" required />
<InputField v-slot="{ id }" :label="$t('repo.settings.badge.branch')">
<SelectField :id="id" v-model="branch" :options="branches" required />
</InputField>
<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">
<form @submit.prevent="createCron">
<InputField :label="$t('repo.settings.crons.name.name')">
<TextField v-model="selectedCron.name" :placeholder="$t('repo.settings.crons.name.placeholder')" required />
<InputField v-slot="{ id }" :label="$t('repo.settings.crons.name.name')">
<TextField
:id="id"
v-model="selectedCron.name"
:placeholder="$t('repo.settings.crons.name.placeholder')"
required
/>
</InputField>
<InputField :label="$t('repo.settings.crons.branch.title')">
<TextField v-model="selectedCron.branch" :placeholder="$t('repo.settings.crons.branch.placeholder')" />
<InputField v-slot="{ id }" :label="$t('repo.settings.crons.branch.title')">
<TextField
:id="id"
v-model="selectedCron.branch"
:placeholder="$t('repo.settings.crons.branch.placeholder')"
/>
</InputField>
<InputField
v-slot="{ id }"
:label="$t('repo.settings.crons.schedule.title')"
docs-url="https://pkg.go.dev/github.com/robfig/cron?utm_source=godoc#hdr-CRON_Expression_Format"
>
<TextField
:id="id"
v-model="selectedCron.schedule"
:placeholder="$t('repo.settings.crons.schedule.placeholder')"
required

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

@ -5,10 +5,13 @@
docs-url="docs/usage/project-settings#pipeline-path"
:label="$t('repo.settings.general.pipeline_path.path')"
>
<TextField
v-model="repoSettings.config_file"
:placeholder="$t('repo.settings.general.pipeline_path.default')"
/>
<template #default="{ id }">
<TextField
:id="id"
v-model="repoSettings.config_file"
:placeholder="$t('repo.settings.general.pipeline_path.default')"
/>
</template>
<template #description>
<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>
@ -51,9 +54,13 @@
<RadioField v-model="repoSettings.visibility" :options="projectVisibilityOptions" />
</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">
<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>
</div>
</InputField>

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

@ -41,9 +41,10 @@
<div v-else class="space-y-4">
<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 -->
<TextField
:id="id"
v-model="selectedRegistry.address"
:placeholder="$t('repo.settings.registries.address.placeholder')"
required
@ -51,12 +52,12 @@
/>
</InputField>
<InputField :label="$t('username')">
<TextField v-model="selectedRegistry.username" :placeholder="$t('username')" required />
<InputField v-slot="{ id }" :label="$t('username')">
<TextField :id="id" v-model="selectedRegistry.username" :placeholder="$t('username')" required />
</InputField>
<InputField :label="$t('password')">
<TextField v-model="selectedRegistry.password" :placeholder="$t('password')" required />
<InputField v-slot="{ id }" :label="$t('password')">
<TextField :id="id" v-model="selectedRegistry.password" :placeholder="$t('password')" required />
</InputField>
<div class="flex gap-2">

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

@ -1,8 +1,9 @@
<template>
<div v-if="innerValue" class="space-y-4">
<form @submit.prevent="save">
<InputField :label="$t(i18nPrefix + 'name')">
<InputField v-slot="{ id }" :label="$t(i18nPrefix + 'name')">
<TextField
:id="id"
v-model="innerValue.name"
:placeholder="$t(i18nPrefix + 'name')"
required
@ -10,8 +11,9 @@
/>
</InputField>
<InputField :label="$t(i18nPrefix + 'value')">
<InputField v-slot="{ id }" :label="$t(i18nPrefix + 'value')">
<TextField
:id="id"
v-model="innerValue.value"
:placeholder="$t(i18nPrefix + 'value')"
:lines="5"
@ -19,16 +21,16 @@
/>
</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>
<div class="flex flex-col 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)" />
</div>
<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" />
</div>
</div>

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

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