github-starred/vikunja
2
0
Fork 0
mirror of https://github.com/go-vikunja/vikunja.git synced 2026-04-29 19:10:51 -05:00
Code Issues 690 Packages Projects Releases 11 Wiki Activity

refactor(frontend): migrate project settings to FormField component

Browse Source 
Migrate ProjectSettingsEdit and ProjectSettingsWebhooks views
to use the new FormField component.
This commit is contained in:
kolaente
2026-01-08 16:05:58 +01:00
parent 73df9b257d
commit 4e2db482cd
2 changed files with 50 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
frontend/src/views/project/settings/ProjectSettingsEdit.vue
View File

@@ -8,77 +8,51 @@
@primary="save" @primary="save"
@tertiary="$router.push({ name: 'project.settings.delete', params: { id: projectId } })" @tertiary="$router.push({ name: 'project.settings.delete', params: { id: projectId } })"
> >
<div class="field"> <FormField
<label id="title"
class="label" v-model="project.title"
for="title" v-focus
>{{ $t('project.title') }}</label> :label="$t('project.title')"
<div class="control"> :class="{ 'disabled': isLoading}"
<input :disabled="isLoading || undefined"
id="title" :placeholder="$t('project.edit.titlePlaceholder')"
v-model="project.title" type="text"
v-focus @keyup.enter="save"
:class="{ 'disabled': isLoading}" />
:disabled="isLoading || undefined" <FormField :label="$t('project.parent')">
class="input" <ProjectSearch v-model="parentProject" />
:placeholder="$t('project.edit.titlePlaceholder')" </FormField>
type="text" <FormField :label="$t('project.edit.description')">
@keyup.enter="save" <Editor
> id="projectdescription"
</div> v-model="project.description"
</div> :class="{ 'disabled': isLoading}"
<div class="field"> :disabled="isLoading"
<label class="label">{{ $t('project.parent') }}</label> :placeholder="$t('project.edit.descriptionPlaceholder')"
<div class="control"> />
<ProjectSearch v-model="parentProject" /> </FormField>
</div>
</div>
<div class="field">
<label
class="label"
for="projectdescription"
>{{ $t('project.edit.description') }}</label>
<div class="control">
<Editor
id="projectdescription"
v-model="project.description"
:class="{ 'disabled': isLoading}"
:disabled="isLoading"
:placeholder="$t('project.edit.descriptionPlaceholder')"
/>
</div>
</div>
<div class="columns"> <div class="columns">
<div class="column field"> <div class="column">
<label <FormField
id="identifier"
v-model="project.identifier"
v-focus
v-tooltip="$t('project.edit.identifierTooltip')" v-tooltip="$t('project.edit.identifierTooltip')"
class="label" :label="$t('project.edit.identifier')"
for="identifier" :class="{ 'disabled': isLoading}"
> :disabled="isLoading || undefined"
{{ $t('project.edit.identifier') }} :placeholder="$t('project.edit.identifierPlaceholder')"
</label> type="text"
<div class="control"> maxlength="10"
<input @keyup.enter="save"
id="identifier" />
v-model="project.identifier"
v-focus
:class="{ 'disabled': isLoading}"
:disabled="isLoading || undefined"
class="input"
:placeholder="$t('project.edit.identifierPlaceholder')"
type="text"
maxlength="10"
@keyup.enter="save"
>
</div>
</div> </div>
<div class="column field"> <div class="column">
<label class="label">{{ $t('project.edit.color') }}</label> <FormField :label="$t('project.edit.color')">
<div class="control">
<ColorPicker v-model="project.hexColor" /> <ColorPicker v-model="project.hexColor" />
</div> </FormField>
</div> </div>
</div> </div>
</CreateEdit> </CreateEdit>
@@ -92,6 +66,7 @@ import {useI18n} from 'vue-i18n'
import Editor from '@/components/input/AsyncEditor' import Editor from '@/components/input/AsyncEditor'
import ColorPicker from '@/components/input/ColorPicker.vue' import ColorPicker from '@/components/input/ColorPicker.vue'
import CreateEdit from '@/components/misc/CreateEdit.vue' import CreateEdit from '@/components/misc/CreateEdit.vue'
import FormField from '@/components/input/FormField.vue'
import ProjectSearch from '@/components/tasks/partials/ProjectSearch.vue' import ProjectSearch from '@/components/tasks/partials/ProjectSearch.vue'
import type {IProject} from '@/modelTypes/IProject' import type {IProject} from '@/modelTypes/IProject'

34
frontend/src/views/project/settings/ProjectSettingsWebhooks.vue
View File

@@ -18,6 +18,7 @@ import User from '@/components/misc/User.vue'
import WebhookModel from '@/models/webhook' import WebhookModel from '@/models/webhook'
import BaseButton from '@/components/base/BaseButton.vue' import BaseButton from '@/components/base/BaseButton.vue'
import FancyCheckbox from '@/components/input/FancyCheckbox.vue' import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
import FormField from '@/components/input/FormField.vue'
import {success} from '@/message' import {success} from '@/message'
import {isValidHttpUrl} from '@/helpers/isValidHttpUrl' import {isValidHttpUrl} from '@/helpers/isValidHttpUrl'
@@ -136,30 +137,15 @@ function validateSelectedEvents() {
v-if="webhooks?.length === 0 || showNewForm" v-if="webhooks?.length === 0 || showNewForm"
class="p-4" class="p-4"
> >
<div class="field"> <FormField
<label id="targetUrl"
class="label" v-model="newWebhook.targetUrl"
for="targetUrl" :label="$t('project.webhooks.targetUrl')"
> required
{{ $t('project.webhooks.targetUrl') }} :placeholder="$t('project.webhooks.targetUrl')"
</label> :error="webhookTargetUrlValid ? null : $t('project.webhooks.targetUrlInvalid')"
<div class="control"> @focusout="validateTargetUrl"
<input />
id="targetUrl"
v-model="newWebhook.targetUrl"
required
class="input"
:placeholder="$t('project.webhooks.targetUrl')"
@focusout="validateTargetUrl"
>
</div>
<p
v-if="!webhookTargetUrlValid"
class="help is-danger"
>
{{ $t('project.webhooks.targetUrlInvalid') }}
</p>
</div>
<div class="field"> <div class="field">
<label <label
class="label" class="label"