Skip to content

Commit e470a64

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Adding in some error handling stuff
1 parent f5b4d64 commit e470a64

File tree

5 files changed

+112
-4
lines changed

5 files changed

+112
-4
lines changed

‎src/plugin/VInlineSelect.vue‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
:density="settings.density"
2828
:disabled="loading"
2929
:error="error"
30+
:error-messages="internalErrorMessages"
3031
:hide-details="settings.hideDetails"
3132
:hide-selected="settings.hideSelected"
3233
:item-title="settings.itemTitle"
@@ -60,6 +61,7 @@
6061
:cancel-button-variant="settings.cancelButtonVariant"
6162
:cancel-icon="settings.cancelIcon"
6263
:cancel-icon-color="settings.cancelIconColor"
64+
:error="error"
6365
:field-only="settings.fieldOnly"
6466
:hide-save-icon="settings.hideSaveIcon"
6567
:loading="loading"
@@ -91,6 +93,7 @@ import type { VSelect } from 'vuetify/components';
9193
import { selectProps } from './utils/props';
9294
import { SaveFieldButtons } from './components/index';
9395
import {
96+
useCheckForErrors,
9497
useSaveValue,
9598
useToggleField,
9699
} from './composables/methods';
@@ -162,6 +165,7 @@ const fieldDisplayStyle = computed(() => useFieldDisplayStyles({
162165
163166
// ------------------------------------------------ Key event to cancel/close field //
164167
function closeField() {
168+
error.value = false;
165169
modelValue.value = originalValue;
166170
toggleField();
167171
}
@@ -192,6 +196,20 @@ function toggleField() {
192196
}
193197
194198
199+
// ------------------------------------------------ Check for errors //
200+
const internalErrorMessages = computed(() => {
201+
const response = useCheckForErrors({
202+
required: settings.required,
203+
rules: settings.rules,
204+
value: modelValue,
205+
});
206+
207+
error.value = response.errors;
208+
209+
return response.results;
210+
});
211+
212+
195213
// ------------------------------------------------ Save the value / Emit update //
196214
function saveValue() {
197215
originalValue = modelValue.value;
@@ -241,6 +259,7 @@ onUnmounted(() => {
241259
</script>
242260

243261
<style lang="scss" scoped>
262+
:deep(.v-input__append),
244263
:deep(.v-field__append-inner) {
245264
padding: 0 !important;
246265
}

‎src/plugin/VInlineTextField.vue‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
:density="settings.density"
2626
:disabled="loading"
2727
:error="error"
28+
:error-messages="internalErrorMessages"
2829
:hide-details="settings.hideDetails"
2930
:label="settings.label"
3031
:loading="loading"
@@ -49,17 +50,20 @@
4950
#append
5051
>
5152
<SaveFieldButtons
53+
v-model="modelValue"
5254
:cancel-button-color="settings.cancelButtonColor"
5355
:cancel-button-size="settings.cancelButtonSize"
5456
:cancel-button-title="settings.cancelButtonTitle"
5557
:cancel-button-variant="settings.cancelButtonVariant"
5658
:cancel-icon="settings.cancelIcon"
5759
:cancel-icon-color="settings.cancelIconColor"
60+
:error="error"
5861
:field-only="settings.fieldOnly"
5962
:hide-save-icon="settings.hideSaveIcon"
6063
:loading="loading"
6164
:loading-icon="settings.loadingIcon"
6265
:loading-icon-color="settings.loadingIconColor"
66+
:required="settings.required"
6367
:save-button-color="settings.saveButtonColor"
6468
:save-button-size="settings.saveButtonSize"
6569
:save-button-title="settings.saveButtonTitle"
@@ -85,6 +89,7 @@ import {
8589
import { textFieldProps } from './utils/props';
8690
import { SaveFieldButtons } from './components/index';
8791
import {
92+
useCheckForErrors,
8893
useSaveValue,
8994
useToggleField,
9095
} from './composables/methods';
@@ -147,6 +152,7 @@ const fieldDisplayStyle = computed(() => useFieldDisplayStyles({
147152
148153
// ------------------------------------------------ Key event to cancel/close field //
149154
function closeField() {
155+
error.value = false;
150156
modelValue.value = originalValue;
151157
toggleField();
152158
}
@@ -177,8 +183,27 @@ function toggleField() {
177183
}
178184
179185
186+
// ------------------------------------------------ Check for errors //
187+
const internalErrorMessages = computed(() => {
188+
const response = useCheckForErrors({
189+
required: settings.required,
190+
rules: settings.rules,
191+
value: modelValue,
192+
});
193+
194+
error.value = response.errors;
195+
196+
return response.results;
197+
});
198+
199+
180200
// ------------------------------------------------ Save the value / Emit update //
181201
function saveValue() {
202+
if (error.value) {
203+
error.value = true;
204+
return;
205+
}
206+
182207
originalValue = modelValue.value;
183208
loading.value = true;
184209
emit('loading', loading.value);
@@ -226,6 +251,7 @@ onUnmounted(() => {
226251
</script>
227252

228253
<style lang="scss" scoped>
254+
:deep(.v-input__append),
229255
:deep(.v-field__append-inner) {
230256
padding: 0 !important;
231257
}

‎src/plugin/VInlineTextarea.vue‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
:density="settings.density"
2828
:disabled="loading"
2929
:error="error"
30+
:error-messages="internalErrorMessages"
3031
:hide-details="settings.hideDetails"
3132
:label="settings.label"
3233
:loading="loading"
@@ -56,6 +57,7 @@
5657
:cancel-button-variant="settings.cancelButtonVariant"
5758
:cancel-icon="settings.cancelIcon"
5859
:cancel-icon-color="settings.cancelIconColor"
60+
:error="error"
5961
:field-only="settings.fieldOnly"
6062
:hide-save-icon="settings.hideSaveIcon"
6163
:loading="loading"
@@ -86,6 +88,7 @@ import {
8688
import { textareaProps } from './utils/props';
8789
import { SaveFieldButtons } from './components/index';
8890
import {
91+
useCheckForErrors,
8992
useSaveValue,
9093
useToggleField,
9194
} from './composables/methods';
@@ -148,6 +151,7 @@ const fieldDisplayStyle = computed(() => useFieldDisplayStyles({
148151
149152
// ------------------------------------------------ Key event to cancel/close field //
150153
function closeField() {
154+
error.value = false;
151155
modelValue.value = originalValue;
152156
toggleField();
153157
}
@@ -178,6 +182,20 @@ function toggleField() {
178182
}
179183
180184
185+
// ------------------------------------------------ Check for errors //
186+
const internalErrorMessages = computed(() => {
187+
const response = useCheckForErrors({
188+
required: settings.required,
189+
rules: settings.rules,
190+
value: modelValue,
191+
});
192+
193+
error.value = response.errors;
194+
195+
return response.results;
196+
});
197+
198+
181199
// ------------------------------------------------ Save the value / Emit update //
182200
function saveValue() {
183201
originalValue = modelValue.value;
@@ -227,6 +245,7 @@ onUnmounted(() => {
227245
</script>
228246

229247
<style lang="scss" scoped>
248+
:deep(.v-input__append),
230249
:deep(.v-field__append-inner) {
231250
padding: 0 !important;
232251
}

‎src/plugin/components/SaveFieldButtons.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<v-btn
77
class="ms-1"
88
:color="settings.saveButtonColor"
9+
:disabled="hasErrors"
910
icon
1011
:size="settings.saveButtonSize"
1112
:title="loading ? 'Loading' : settings.saveButtonTitle"
@@ -14,7 +15,7 @@
1415
>
1516
<v-icon
1617
v-if="!loading && !settings.hideSaveIcon"
17-
:color="settings.saveIconColor"
18+
:color="hasErrors ? 'danger' : settings.saveIconColor"
1819
:icon="saveIcon"
1920
/>
2021
<v-icon
@@ -55,9 +56,8 @@ const props = withDefaults(defineProps<SaveFieldButtons>(), {});
5556
5657
const settings = reactive({ ...attrs, ...props });
5758
58-
const saveFieldsContainerClass = computed(() => {
59-
return useSaveFieldsContainerClass();
60-
});
59+
const hasErrors = computed<boolean>(() => props.error);
60+
const saveFieldsContainerClass = computed<object>(() => useSaveFieldsContainerClass());
6161
6262
function closeField() {
6363
emit('close');

‎src/plugin/composables/methods.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,49 @@ function buildResponseItem(item: object, name: string, value: FieldValue) {
1616

1717

1818
// ------------------------------------------------ Composables //
19+
const useCheckForErrors = (options) => {
20+
const { required, rules } = options;
21+
let { value } = options;
22+
value = unref(value);
23+
24+
const results: string[] = [];
25+
let hasErrors = false;
26+
27+
if (required && !value) {
28+
results.push('Field is required.');
29+
30+
return {
31+
errors: true,
32+
results,
33+
};
34+
}
35+
36+
if (rules) {
37+
for (const rule of rules) {
38+
const handler = typeof rule === 'function' ? rule : () => rule;
39+
const result = handler(value);
40+
41+
if (result === true) continue;
42+
console.log(result);
43+
if (typeof result !== 'string') {
44+
console.warn(`${result} is not a valid value. Rule functions must return boolean true or a string.`);
45+
46+
continue;
47+
}
48+
49+
results.push(result);
50+
}
51+
52+
hasErrors = results.length > 0;
53+
}
54+
55+
return {
56+
errors: hasErrors,
57+
results,
58+
};
59+
};
60+
61+
1962
const useSaveValue: UseSaveValue = async (options) => {
2063
const { settings, emit, name, value } = options;
2164
const submitData = buildResponseItem(settings.item as object, name, value);
@@ -77,6 +120,7 @@ const useToggleField: UseToggleField = (options) => {
77120

78121

79122
export {
123+
useCheckForErrors,
80124
useSaveValue,
81125
useToggleField,
82126
};

0 commit comments

Comments
 (0)