Implemented error handling. (#132)

frontend/src/components/articles/GtinInput.vue

@@ -7,9 +7,9 @@ const { t } = useI18n();
 const props = withDefaults(defineProps<InputOptions>(), {
   floating: true,
   id: "gtin",
-  label: "articles.gtin",
+  label: "articles.gtin.label",
   max: 14,
-  placeholder: "articles.gtin",
+  placeholder: "articles.gtin.label",
 });
 
 defineEmits<{

frontend/src/components/products/SkuInput.vue

@@ -7,9 +7,9 @@ const { t } = useI18n();
 const props = withDefaults(defineProps<InputOptions>(), {
   floating: true,
   id: "sku",
-  label: "products.sku",
+  label: "products.sku.label",
   max: 32,
-  placeholder: "products.sku",
+  placeholder: "products.sku.label",
 });
 
 defineEmits<{

frontend/src/components/taxes/TaxCodeInput.vue

@@ -7,9 +7,9 @@ const { t } = useI18n();
 const props = withDefaults(defineProps<InputOptions>(), {
   floating: true,
   id: "code",
-  label: "taxes.code",
+  label: "taxes.code.label",
   max: 4,
-  placeholder: "taxes.code",
+  placeholder: "taxes.code.label",
 });
 
 defineEmits<{

frontend/src/i18n/en/articles.en.json

@@ -6,7 +6,13 @@
     "title": "Delete article"
   },
   "empty": "This list is empty.",
-  "gtin": "Global Trade Item Number (GTIN)",
+  "gtin": {
+    "alreadyUsed": {
+      "help": "Please use a different GTIN.",
+      "lead": "The GTIN is already used!"
+    },
+    "label": "Global Trade Item Number (GTIN)"
+  },
   "select": {
     "label": "Article",
     "placeholder": "Select an article"

frontend/src/i18n/en/products.en.json

@@ -6,7 +6,13 @@
     "title": "Delete product"
   },
   "empty": "This list is empty.",
-  "sku": "Stock-Keeping Unit (SKU)",
+  "sku": {
+    "alreadyUsed": {
+      "help": "Please use a different SKU.",
+      "lead": "The SKU is already used!"
+    },
+    "label": "Stock-Keeping Unit (SKU)"
+  },
   "sort": {
     "options": {
       "DisplayName": "Display name",

frontend/src/i18n/en/taxes.en.json

@@ -1,5 +1,11 @@
 {
-  "code": "Code",
+  "code": {
+    "alreadyUsed": {
+      "help": "Please use a different tax code.",
+      "lead": "The tax code is already used!"
+    },
+    "label": "Code"
+  },
   "created": "The tax has been created.",
   "delete": {
     "confirm": "Do you really want to delete the following tax?",

frontend/src/i18n/fr/articles.fr.json

@@ -6,7 +6,13 @@
     "title": "Supprimer l’article"
   },
   "empty": "Cette liste est vide.",
-  "gtin": "Global Trade Item Number (GTIN)",
+  "gtin": {
+    "alreadyUsed": {
+      "help": "Veuillez utiliser un autre GTIN.",
+      "lead": "Le GTIN est déjà utilisé !"
+    },
+    "label": "Global Trade Item Number (GTIN)"
+  },
   "select": {
     "label": "Article",
     "placeholder": "Sélectionnez un article"

frontend/src/i18n/fr/products.fr.json

@@ -6,7 +6,13 @@
     "title": "Supprimer le produit"
   },
   "empty": "Cette liste est vide.",
-  "sku": "Stock-Keeping Unit (SKU)",
+  "sku": {
+    "alreadyUsed": {
+      "help": "Veuillez utiliser un autre SKU.",
+      "lead": "Le SKU est déjà utilisé !"
+    },
+    "label": "Stock-Keeping Unit (SKU)"
+  },
   "sort": {
     "options": {
       "DisplayName": "Nom d’affichage",

frontend/src/i18n/fr/taxes.fr.json

@@ -1,5 +1,11 @@
 {
-  "code": "Code",
+  "code": {
+    "alreadyUsed": {
+      "help": "Veuillez utiliser un autre code de taxe.",
+      "lead": "Le code de taxe est déjà utilisé !"
+    },
+    "label": "Code"
+  },
   "created": "La taxe a été créée.",
   "delete": {
     "confirm": "Désirez-vous vraiment supprimer la taxe suivante ?",

frontend/src/views/account/SignInView.vue

@@ -45,7 +45,7 @@ const onSubmit = handleSubmit(async () => {
 <template>
   <main class="container">
     <h1>{{ t("users.signIn.title") }}</h1>
-    <TarAlert dismissible variant="warning" v-model="invalidCredentials">
+    <TarAlert :close="t('actions.close')" dismissible variant="warning" v-model="invalidCredentials">
       <strong>{{ t("users.signIn.failed") }}</strong> {{ t("users.signIn.invalidCredentials") }}
     </TarAlert>
     <form @submit.prevent="onSubmit">

frontend/src/views/articles/ArticleEdit.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { TarAlert } from "logitar-vue3-ui";
 import { computed, inject, onMounted, ref } from "vue";
 import { useForm } from "vee-validate";
 import { useI18n } from "vue-i18n";
@@ -11,7 +12,7 @@ import DescriptionTextarea from "@/components/shared/DescriptionTextarea.vue";
 import DisplayNameInput from "@/components/shared/DisplayNameInput.vue";
 import GtinInput from "@/components/articles/GtinInput.vue";
 import StatusDetail from "@/components/shared/StatusDetail.vue";
-import type { ApiError } from "@/types/api";
+import type { ApiError, PropertyError } from "@/types/api";
 import type { Article } from "@/types/articles";
 import { createArticle, deleteArticle, readArticle, replaceArticle } from "@/api/articles";
 import { handleErrorKey } from "@/inject/App";
@@ -27,6 +28,7 @@ const article = ref<Article>();
 const description = ref<string>("");
 const displayName = ref<string>("");
 const gtin = ref<string>("");
+const gtinAlreadyUsed = ref<boolean>(false);
 const hasLoaded = ref<boolean>(false);
 const isDeleting = ref<boolean>(false);
 
@@ -62,6 +64,7 @@ function setModel(model: Article): void {
 
 const { handleSubmit, isSubmitting } = useForm();
 const onSubmit = handleSubmit(async () => {
+  gtinAlreadyUsed.value = false;
   try {
     if (article.value) {
       const updatedArticle = await replaceArticle(
@@ -86,7 +89,12 @@ const onSubmit = handleSubmit(async () => {
       router.replace({ name: "ArticleEdit", params: { id: createdArticle.id } });
     }
   } catch (e: unknown) {
-    handleError(e);
+    const { data, status } = e as ApiError;
+    if (status === 409 && (data as PropertyError)?.code === "GtinAlreadyUsed") {
+      gtinAlreadyUsed.value = true;
+    } else {
+      handleError(e);
+    }
   }
 });
 
@@ -113,6 +121,9 @@ onMounted(async () => {
   <main class="container">
     <template v-if="hasLoaded">
       <h1>{{ article?.displayName ?? t("articles.title.new") }}</h1>
+      <TarAlert :close="t('actions.close')" dismissible variant="warning" v-model="gtinAlreadyUsed">
+        <strong>{{ t("articles.gtin.alreadyUsed.lead") }}</strong> {{ t("articles.gtin.alreadyUsed.help") }}
+      </TarAlert>
       <StatusDetail v-if="article" :aggregate="article" />
       <form @submit.prevent="onSubmit">
         <div class="mb-3">

frontend/src/views/products/ProductEdit.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { TarAlert } from "logitar-vue3-ui";
 import { computed, inject, onMounted, ref } from "vue";
 import { parsingUtils } from "logitar-vue3-ui";
 import { useForm } from "vee-validate";
@@ -18,7 +19,7 @@ import SkuInput from "@/components/products/SkuInput.vue";
 import StatusDetail from "@/components/shared/StatusDetail.vue";
 import StoreSelect from "@/components/stores/StoreSelect.vue";
 import UnitTypeSelect from "@/components/products/UnitTypeSelect.vue";
-import type { ApiError } from "@/types/api";
+import type { ApiError, PropertyError } from "@/types/api";
 import type { Article } from "@/types/articles";
 import type { Department } from "@/types/departments";
 import type { Product, UnitType } from "@/types/products";
@@ -44,6 +45,7 @@ const hasLoaded = ref<boolean>(false);
 const isDeleting = ref<boolean>(false);
 const product = ref<Product>();
 const sku = ref<string>("");
+const skuAlreadyUsed = ref<boolean>(false);
 const store = ref<Store>();
 const unitPrice = ref<number>(0);
 const unitType = ref<string>("");
@@ -96,6 +98,7 @@ function setModel(model: Product): void {
 
 const { handleSubmit, isSubmitting } = useForm();
 const onSubmit = handleSubmit(async () => {
+  skuAlreadyUsed.value = false;
   try {
     if (store.value && article.value) {
       const savedProduct = await createOrReplaceProduct(
@@ -122,7 +125,12 @@ const onSubmit = handleSubmit(async () => {
       }
     }
   } catch (e: unknown) {
-    handleError(e);
+    const { data, status } = e as ApiError;
+    if (status === 409 && (data as PropertyError)?.code === "SkuAlreadyUsed") {
+      skuAlreadyUsed.value = true;
+    } else {
+      handleError(e);
+    }
   }
 });
 
@@ -160,6 +168,9 @@ onMounted(async () => {
   <main class="container">
     <template v-if="hasLoaded">
       <h1>{{ product?.displayName ?? product?.article.displayName ?? t("products.title.new") }}</h1>
+      <TarAlert :close="t('actions.close')" dismissible variant="warning" v-model="skuAlreadyUsed">
+        <strong>{{ t("products.sku.alreadyUsed.lead") }}</strong> {{ t("products.sku.alreadyUsed.help") }}
+      </TarAlert>
       <StatusDetail v-if="product" :aggregate="product" />
       <form @submit.prevent="onSubmit">
         <div class="mb-3">

frontend/src/views/receipts/ImportReceipt.vue

@@ -62,15 +62,15 @@ function translatePropertyName(error: PropertyError): string {
       case "Flags":
         return t("flags");
       case "Gtin":
-        return t("articles.gtin");
+        return t("articles.gtin.label");
       case "Label":
         return t("receipts.label");
       case "Price":
         return t("price");
       case "Quantity":
         return t("receipts.quantity");
       case "Sku":
-        return t("products.sku");
+        return t("products.sku.label");
       case "UnitPrice":
         return t("products.unitPrice");
     }

frontend/src/views/taxes/TaxEdit.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { TarAlert } from "logitar-vue3-ui";
 import { computed, inject, onMounted, ref } from "vue";
 import { useForm } from "vee-validate";
 import { useI18n } from "vue-i18n";
@@ -11,7 +12,7 @@ import FlagsInput from "@/components/shared/FlagsInput.vue";
 import StatusDetail from "@/components/shared/StatusDetail.vue";
 import TaxCodeInput from "@/components/taxes/TaxCodeInput.vue";
 import TaxRateInput from "@/components/taxes/TaxRateInput.vue";
-import type { ApiError } from "@/types/api";
+import type { ApiError, PropertyError } from "@/types/api";
 import type { Tax } from "@/types/taxes";
 import { createTax, deleteTax, readTax, replaceTax } from "@/api/taxes";
 import { handleErrorKey } from "@/inject/App";
@@ -29,6 +30,7 @@ const hasLoaded = ref<boolean>(false);
 const isDeleting = ref<boolean>(false);
 const rate = ref<number>(0);
 const tax = ref<Tax>();
+const taxCodeAlreadyUsed = ref<boolean>(false);
 
 const hasChanges = computed<boolean>(
   () => code.value !== (tax.value?.code ?? "") || rate.value !== (tax.value?.rate ?? 0) || flags.value !== (tax.value?.flags ?? ""),
@@ -59,6 +61,7 @@ function setModel(model: Tax): void {
 
 const { handleSubmit, isSubmitting } = useForm();
 const onSubmit = handleSubmit(async () => {
+  taxCodeAlreadyUsed.value = false;
   try {
     if (tax.value) {
       const updatedTax = await replaceTax(
@@ -83,7 +86,12 @@ const onSubmit = handleSubmit(async () => {
       router.replace({ name: "TaxEdit", params: { id: createdTax.id } });
     }
   } catch (e: unknown) {
-    handleError(e);
+    const { data, status } = e as ApiError;
+    if (status === 409 && (data as PropertyError)?.code === "TaxCodeAlreadyUsed") {
+      taxCodeAlreadyUsed.value = true;
+    } else {
+      handleError(e);
+    }
   }
 });
 
@@ -110,6 +118,9 @@ onMounted(async () => {
   <main class="container">
     <template v-if="hasLoaded">
       <h1>{{ tax?.code ?? t("taxes.title.new") }}</h1>
+      <TarAlert :close="t('actions.close')" dismissible variant="warning" v-model="taxCodeAlreadyUsed">
+        <strong>{{ t("taxes.code.alreadyUsed.lead") }}</strong> {{ t("taxes.code.alreadyUsed.help") }}
+      </TarAlert>
       <StatusDetail v-if="tax" :aggregate="tax" />
       <form @submit.prevent="onSubmit">
         <div class="mb-3">