refactor: use vuetify form controls

frontend/src/features/campaigns/views/CampaignsView.vue

@@ -129,48 +129,52 @@
             </div>
 
             <div class="form-grid">
-                <label class="field">
-                    <span>{{ t('campaigns.fields.startDate') }}</span>
-                    <input
-                        v-model="form.startDate"
-                        type="date"
-                        :disabled="campaignsStore.isCreating"
-                    />
-                </label>
+                <v-text-field
+                    v-model="form.startDate"
+                    :label="t('campaigns.fields.startDate')"
+                    :disabled="campaignsStore.isCreating"
+                    type="date"
+                    variant="outlined"
+                    hide-details
+                />
 
-                <label class="field">
-                    <span>{{ t('campaigns.fields.endDate') }}</span>
-                    <input
-                        v-model="form.endDate"
-                        type="date"
-                        :disabled="campaignsStore.isCreating"
-                    />
-                </label>
+                <v-text-field
+                    v-model="form.endDate"
+                    :label="t('campaigns.fields.endDate')"
+                    :disabled="campaignsStore.isCreating"
+                    type="date"
+                    variant="outlined"
+                    hide-details
+                />
 
-                <label class="field field-wide">
-                    <span>{{ t('campaigns.fields.name') }}</span>
-                    <input
-                        v-model="form.name"
-                        type="text"
-                        :disabled="campaignsStore.isCreating"
-                    />
-                </label>
+                <v-text-field
+                    v-model="form.name"
+                    class="field-wide"
+                    :label="t('campaigns.fields.name')"
+                    :disabled="campaignsStore.isCreating"
+                    variant="outlined"
+                    hide-details
+                />
 
-                <label class="field field-wide">
-                    <span>{{ t('campaigns.fields.description') }}</span>
-                    <textarea
-                        v-model="form.description"
-                        :disabled="campaignsStore.isCreating"
-                    ></textarea>
-                </label>
+                <v-textarea
+                    v-model="form.description"
+                    class="field-wide"
+                    :label="t('campaigns.fields.description')"
+                    :disabled="campaignsStore.isCreating"
+                    rows="3"
+                    variant="outlined"
+                    hide-details
+                />
 
-                <label class="field field-wide">
-                    <span>{{ t('campaigns.fields.notes') }}</span>
-                    <textarea
-                        v-model="form.notes"
-                        :disabled="campaignsStore.isCreating"
-                    ></textarea>
-                </label>
+                <v-textarea
+                    v-model="form.notes"
+                    class="field-wide"
+                    :label="t('campaigns.fields.notes')"
+                    :disabled="campaignsStore.isCreating"
+                    rows="3"
+                    variant="outlined"
+                    hide-details
+                />
             </div>
 
             <div class="panel-actions">