Skip to content

Commit 095294b

Browse files
stefan-ernststefan-ernst
committed
refactor: consolidate standard form controls
1 parent 19e0b25 commit 095294b

8 files changed

Lines changed: 172 additions & 194 deletions

‎frontend/src/lib/dialogs/AssetReportFormModal.svelte‎

Lines changed: 12 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<script>
22
import { api } from '../api.js';
33
import Button from '../components/Button.svelte';
4+
import Checkbox from '../components/Checkbox.svelte';
5+
import Input from '../components/Input.svelte';
46
import Textarea from '../components/Textarea.svelte';
57
import AlertBox from '../components/AlertBox.svelte';
68
import Spinner from '../components/Spinner.svelte';
@@ -212,12 +214,11 @@
212214
placeholder={getFieldLabel(field)}
213215
/>
214216
{:else}
215-
<input
217+
<Input
216218
type="text"
217219
bind:value={values[field.field_identifier]}
218-
class="w-full px-4 py-3 rounded border focus:outline-none focus:ring-2 focus:ring-blue-500"
219-
style="background-color: {isDarkMode ? '#1e293b' : '#ffffff'}; color: {isDarkMode ? '#e2e8f0' : '#111827'}; border-color: {isDarkMode ? '#475569' : '#d1d5db'};"
220220
placeholder={getFieldLabel(field)}
221+
size="medium"
221222
/>
222223
{/if}
223224
{#if field.description}
@@ -293,31 +294,23 @@
293294
getLabel={(option) => option.label}
294295
/>
295296
{:else if field.virtual_field_type === 'checkbox'}
296-
<label class="flex items-center gap-3 cursor-pointer">
297-
<input
298-
type="checkbox"
299-
bind:checked={values[field.field_identifier]}
300-
class="h-5 w-5 rounded border-gray-300 focus:ring-2 focus:ring-blue-500"
301-
/>
302-
<span class="text-sm" style="color: {isDarkMode ? '#e2e8f0' : '#374151'};">
303-
{getFieldLabel(field)}
304-
</span>
305-
</label>
297+
<Checkbox
298+
bind:checked={values[field.field_identifier]}
299+
label={getFieldLabel(field)}
300+
/>
306301
{:else if field.virtual_field_type === 'number'}
307-
<input
302+
<Input
308303
type="number"
309304
bind:value={values[field.field_identifier]}
310-
class="w-full px-4 py-3 rounded border focus:outline-none focus:ring-2 focus:ring-blue-500"
311-
style="background-color: {isDarkMode ? '#1e293b' : '#ffffff'}; color: {isDarkMode ? '#e2e8f0' : '#111827'}; border-color: {isDarkMode ? '#475569' : '#d1d5db'};"
312305
placeholder={getFieldLabel(field)}
306+
size="medium"
313307
/>
314308
{:else}
315-
<input
309+
<Input
316310
type="text"
317311
bind:value={values[field.field_identifier]}
318-
class="w-full px-4 py-3 rounded border focus:outline-none focus:ring-2 focus:ring-blue-500"
319-
style="background-color: {isDarkMode ? '#1e293b' : '#ffffff'}; color: {isDarkMode ? '#e2e8f0' : '#111827'}; border-color: {isDarkMode ? '#475569' : '#d1d5db'};"
320312
placeholder={getFieldLabel(field)}
313+
size="medium"
321314
/>
322315
{/if}
323316
</div>

‎frontend/src/lib/dialogs/AssetReportModal.svelte‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { api } from '../api.js';
33
import BasePicker from '../pickers/BasePicker.svelte';
44
import IconSelector from '../pickers/IconSelector.svelte';
5+
import Input from '../components/Input.svelte';
56
import Textarea from '../components/Textarea.svelte';
67
import AlertBox from '../components/AlertBox.svelte';
78
import PortalModal from './PortalModal.svelte';
@@ -246,14 +247,13 @@
246247
<label for="ar-name" class="block text-sm font-medium mb-2" style="color: {isDarkMode ? '#9ca3af' : '#374151'};">
247248
{t('common.name')} <span class="text-red-500">*</span>
248249
</label>
249-
<input
250+
<Input
250251
id="ar-name"
251252
bind:value={formData.name}
252253
type="text"
253-
class="w-full px-4 py-3 rounded border focus:outline-none focus:ring-2 focus:ring-blue-500"
254-
style="background-color: {isDarkMode ? '#1e293b' : '#ffffff'}; color: {isDarkMode ? '#e2e8f0' : '#111827'}; border-color: {isDarkMode ? '#475569' : '#d1d5db'};"
255254
placeholder={t('portal.assetReportNamePlaceholder')}
256255
required
256+
size="medium"
257257
/>
258258
</div>
259259
@@ -355,13 +355,12 @@
355355
<label for="ar-submit" class="block text-sm font-medium mb-2" style="color: {isDarkMode ? '#9ca3af' : '#374151'};">
356356
{t('portal.submitButtonLabel')}
357357
</label>
358-
<input
358+
<Input
359359
id="ar-submit"
360360
bind:value={formData.submit_button_text}
361361
type="text"
362-
class="w-full px-4 py-3 rounded border focus:outline-none focus:ring-2 focus:ring-blue-500"
363-
style="background-color: {isDarkMode ? '#1e293b' : '#ffffff'}; color: {isDarkMode ? '#e2e8f0' : '#111827'}; border-color: {isDarkMode ? '#475569' : '#d1d5db'};"
364362
placeholder={t('portal.submitButtonPlaceholder')}
363+
size="medium"
365364
/>
366365
</div>
367366

‎frontend/src/lib/dialogs/CategoryModal.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { Tag, Trash2 } from '@lucide/svelte';
33
import Modal from './Modal.svelte';
44
import Button from '../components/Button.svelte';
5+
import Input from '../components/Input.svelte';
56
import IconSelector from '../pickers/IconSelector.svelte';
67
import EmptyState from '../components/EmptyState.svelte';
78
import { t } from '../stores/i18n.svelte.js';
@@ -87,14 +88,13 @@
8788
<h4 class="text-sm font-medium mb-3" style="color: var(--ds-text);">{t('categories.addNewCategory')}</h4>
8889
<div class="flex gap-3 items-center">
8990
<div class="flex-1">
90-
<input
91+
<Input
9192
type="text"
9293
bind:value={newCategoryName}
93-
class="w-full px-3 py-2 rounded border focus:outline-none focus:ring-2 focus:ring-blue-500"
94-
style="background-color: var(--ds-background-input); border-color: var(--ds-border); color: var(--ds-text);"
9594
placeholder={t('categories.categoryNamePlaceholder')}
9695
onkeydown={(e) => e.key === 'Enter' && addCategory()}
9796
disabled={loading}
97+
size="small"
9898
/>
9999
</div>
100100
{#if showColorPicker}

‎frontend/src/lib/dialogs/RequestTypeFieldsBuilder.svelte‎

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@
77
import { api } from '../api.js';
88
import { Plus, Trash2, Pencil, Type, AlignLeft, ListChecks, ToggleLeft, AlertTriangle, Search, X } from '@lucide/svelte';
99
import Button from '../components/Button.svelte';
10+
import Input from '../components/Input.svelte';
1011
import Spinner from '../components/Spinner.svelte';
12+
import Textarea from '../components/Textarea.svelte';
1113
import PortalModal from './PortalModal.svelte';
1214
import DropIndicator from '../layout/DropIndicator.svelte';
1315
import { t } from '../stores/i18n.svelte.js';
@@ -630,15 +632,14 @@
630632
</p>
631633
</div>
632634
</div>
633-
<input
635+
<Input
634636
id="rtfb-title-template"
635637
type="text"
636638
bind:value={titleTemplate}
637639
oninput={scheduleTitleTemplateSave}
638640
onblur={saveTitleTemplate}
639641
placeholder={'Request: {{type.name}} from {{requester.name}}'}
640-
class="w-full px-3 py-2 rounded border text-sm focus:outline-none focus:ring-2"
641-
style="background-color: var(--ds-background-input); color: var(--ds-text); border-color: var(--ds-border); --tw-ring-color: var(--ds-interactive);"
642+
size="small"
642643
/>
643644
{#if titleTemplateError}
644645
<p class="text-xs mt-1" style="color: var(--ds-status-error);">{titleTemplateError}</p>
@@ -770,13 +771,12 @@
770771
<label for="virtual-field-name" class="block text-sm font-medium mb-2" style="color: var(--ds-text);">
771772
{t('requestTypeFields.fieldName')}
772773
</label>
773-
<input
774+
<Input
774775
id="virtual-field-name"
775776
type="text"
776777
bind:value={virtualFieldName}
777778
placeholder={t('requestTypeFields.fieldNamePlaceholder')}
778-
class="w-full px-3 py-2 rounded border focus:outline-none focus:ring-2 text-sm"
779-
style="background-color: var(--ds-background-input); color: var(--ds-text); border-color: var(--ds-border); --tw-ring-color: var(--ds-interactive);"
779+
size="small"
780780
/>
781781
</div>
782782
@@ -811,19 +811,19 @@
811811
<div class="space-y-2" role="group" aria-labelledby="virtual-field-options-label">
812812
{#each virtualFieldOptions as option, i}
813813
<div class="flex gap-2">
814-
<input
814+
<Input
815815
type="text"
816816
bind:value={option.value}
817817
placeholder={t('requestTypeFields.value')}
818-
class="flex-1 px-2 py-1.5 rounded border focus:outline-none focus:ring-2 text-sm"
819-
style="background-color: var(--ds-background-input); color: var(--ds-text); border-color: var(--ds-border); --tw-ring-color: var(--ds-interactive);"
818+
size="small"
819+
class="flex-1"
820820
/>
821-
<input
821+
<Input
822822
type="text"
823823
bind:value={option.label}
824824
placeholder={t('requestTypeFields.label')}
825-
class="flex-1 px-2 py-1.5 rounded border focus:outline-none focus:ring-2 text-sm"
826-
style="background-color: var(--ds-background-input); color: var(--ds-text); border-color: var(--ds-border); --tw-ring-color: var(--ds-interactive);"
825+
size="small"
826+
class="flex-1"
827827
/>
828828
<button
829829
onclick={() => removeVirtualFieldOption(i)}
@@ -894,13 +894,13 @@
894894
<div class="p-2 border-b" style="border-color: var(--ds-border);">
895895
<div class="relative">
896896
<Search class="w-4 h-4 absolute left-2 top-1/2 -translate-y-1/2" style="color: var(--ds-text-subtle);" />
897-
<input
898-
bind:this={addFieldSearchEl}
897+
<Input
898+
bind:inputRef={addFieldSearchEl}
899899
type="text"
900900
bind:value={addFieldQuery}
901901
placeholder={t('requestTypeFields.searchFields')}
902-
class="w-full pl-8 pr-2 py-1.5 rounded border text-sm focus:outline-none focus:ring-2"
903-
style="background-color: var(--ds-background-input); color: var(--ds-text); border-color: var(--ds-border); --tw-ring-color: var(--ds-interactive);"
902+
size="small"
903+
class="pl-8"
904904
/>
905905
</div>
906906
</div>
@@ -945,13 +945,12 @@
945945
<label for="edit-field-display-name" class="block text-sm font-medium mb-2" style="color: var(--ds-text);">
946946
{t('requestTypeFields.displayName')}
947947
</label>
948-
<input
948+
<Input
949949
id="edit-field-display-name"
950950
type="text"
951951
bind:value={editDisplayName}
952952
placeholder={editingField.field_name || editingField.field_identifier}
953-
class="w-full px-3 py-2 rounded border focus:outline-none focus:ring-2"
954-
style="background-color: var(--ds-background-input); color: var(--ds-text); border-color: var(--ds-border); --tw-ring-color: var(--ds-interactive);"
953+
size="small"
955954
/>
956955
<DescriptionText>
957956
{t('requestTypeFields.overrideLabel')}
@@ -962,14 +961,13 @@
962961
<label for="edit-field-description" class="block text-sm font-medium mb-2" style="color: var(--ds-text);">
963962
{t('requestTypeFields.descriptionHelpText')}
964963
</label>
965-
<textarea
964+
<Textarea
966965
id="edit-field-description"
967966
bind:value={editDescription}
968967
placeholder={t('requestTypeFields.helpTextPlaceholder')}
969-
rows="3"
970-
class="w-full px-3 py-2 rounded border focus:outline-none focus:ring-2"
971-
style="background-color: var(--ds-background-input); color: var(--ds-text); border-color: var(--ds-border); --tw-ring-color: var(--ds-interactive);"
972-
></textarea>
968+
rows={3}
969+
size="small"
970+
/>
973971
</div>
974972
975973
<div class="flex gap-2 pt-2">

‎frontend/src/lib/dialogs/RequestTypeModal.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script>
22
import { api } from '../api.js';
33
import Button from '../components/Button.svelte';
4+
import Input from '../components/Input.svelte';
45
import BasePicker from '../pickers/BasePicker.svelte';
56
import IconSelector from '../pickers/IconSelector.svelte';
67
import Textarea from '../components/Textarea.svelte';
@@ -192,14 +193,13 @@
192193
<label for="rt-name" class="block text-sm font-medium mb-2" style="color: {isDarkMode ? '#9ca3af' : '#374151'};">
193194
{t('common.name')} <span class="text-red-500">*</span>
194195
</label>
195-
<input
196+
<Input
196197
id="rt-name"
197198
bind:value={formData.name}
198199
type="text"
199-
class="w-full px-4 py-3 rounded border focus:outline-none focus:ring-2 focus:ring-blue-500"
200-
style="background-color: {isDarkMode ? '#1e293b' : '#ffffff'}; color: {isDarkMode ? '#e2e8f0' : '#111827'}; border-color: {isDarkMode ? '#475569' : '#d1d5db'};"
201200
placeholder={t('portal.requestTypeNamePlaceholder')}
202201
required
202+
size="medium"
203203
/>
204204
</div>
205205

‎frontend/src/lib/dialogs/StatusCategoryModal.svelte‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script>
22
import Modal from './Modal.svelte';
33
import Button from '../components/Button.svelte';
4+
import Input from '../components/Input.svelte';
45
import Textarea from '../components/Textarea.svelte';
56
import IconSelector from '../pickers/IconSelector.svelte';
67
import Label from '../components/Label.svelte';
@@ -48,13 +49,12 @@
4849
4950
<div class="mb-6">
5051
<Label required class="mb-2">{t('common.name')}</Label>
51-
<input
52+
<Input
5253
type="text"
5354
bind:value={formData.name}
5455
placeholder={t('statusCategory.namePlaceholder')}
55-
class="w-full px-4 py-3 rounded border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
56-
style="background-color: var(--ds-background-input); border-color: var(--ds-border); color: var(--ds-text);"
5756
required
57+
size="medium"
5858
/>
5959
</div>
6060
@@ -109,4 +109,3 @@
109109
{/snippet}
110110
</Modal>
111111
{/if}
112-

0 commit comments

Comments
 (0)