Configuration Management

CHANGELOG.md

@@ -1,10 +1,10 @@
-# [WIP 0.15.1](https://github.com/upb-uc4/ui-web/compare/v0.15.0...v0.15.1) (2021-XX-XX)
+# [0.15.1](https://github.com/upb-uc4/ui-web/compare/v0.14.0...v0.15.0) (2020-XX-XX)
 ## Feature
+- add frontend validation using backend regex [#755](https://github.com/upb-uc4/ui-web/pull/755)
 - add ability to fetch all information according to gdpr [#776](https://github.com/upb-uc4/ui-web/pull/776)
 - add course admission API [#774](https://github.com/upb-uc4/ui-web/pull/774)
 - add possibility to delete the own account according to gdpr [#765](https://github.com/upb-uc4/ui-web/pull/765)
 
-
 # [0.15.0](https://github.com/upb-uc4/ui-web/compare/v0.14.0...v0.15.0) (2020-12-18)
 ## Feature
 - add hyperledger versions [#754](https://github.com/upb-uc4/ui-web/pull/754)

src/api/ConfigurationManagement.ts

@@ -0,0 +1,138 @@
+import axios, { AxiosError, AxiosResponse } from "axios";
+import Configuration from "./api_models/configuration_management/Configuration";
+import HyperledgerNetworkVersion from "./api_models/configuration_management/HyperledgerVersion";
+import APIError from "./api_models/errors/APIError";
+import Common from "./Common";
+import APIResponse from "./helpers/models/APIResponse";
+
+export default class ConfigurationManagement extends Common {
+    protected static endpoint = "/configuration-management";
+
+    constructor() {
+        super(ConfigurationManagement.endpoint);
+    }
+
+    static async getVersion(): Promise<string> {
+        return super.getVersion();
+    }
+
+    static async getHyperledgerNetworkVersion(): Promise<HyperledgerNetworkVersion> {
+        const instance = axios.create({
+            baseURL: process.env.VUE_APP_API_BASE_URL + ConfigurationManagement.endpoint,
+            headers: {
+                "Accept": "*/*",
+                "Content-Type": "application/json;charset=UTF-8",
+            },
+        });
+
+        return await instance
+            .get(`/version/hyperledger-network`)
+            .then((response: AxiosResponse) => {
+                return response.data as HyperledgerNetworkVersion;
+            })
+            .catch((error: AxiosError) => {
+                return { networkVersion: "unavailable" } as HyperledgerNetworkVersion;
+            });
+    }
+
+    async getConfiguration(): Promise<APIResponse<Configuration>> {
+        return await this._axios
+            .get(`/configuration`)
+            .then((response: AxiosResponse) => {
+                return {
+                    returnValue: response.data as Configuration,
+                    statusCode: response.status,
+                    networkError: false,
+                    error: {} as APIError,
+                };
+            })
+            .catch(async (error: AxiosError) => {
+                if (error.response) {
+                    return {
+                        returnValue: {} as Configuration,
+                        statusCode: error.response.status,
+                        networkError: false,
+                        error: error.response.data as APIError,
+                    };
+                } else {
+                    return {
+                        returnValue: {} as Configuration,
+                        statusCode: 0,
+                        networkError: true,
+                        error: {} as APIError,
+                    };
+                }
+            });
+    }
+
+    /**
+     *
+     * @param date must be in format YYYY-MM-DD
+     */
+    async getSemester(date: string): Promise<APIResponse<string>> {
+        const requestParameter = { params: {} as any };
+        requestParameter.params.date = date;
+        return await this._axios
+            .get(`/semester`, requestParameter)
+            .then((response: AxiosResponse) => {
+                return {
+                    returnValue: response.data.semester,
+                    statusCode: response.status,
+                    networkError: false,
+                    error: {} as APIError,
+                };
+            })
+            .catch(async (error: AxiosError) => {
+                if (error.response) {
+                    return {
+                        returnValue: "",
+                        statusCode: error.response.status,
+                        networkError: false,
+                        error: error.response.data as APIError,
+                    };
+                } else {
+                    return {
+                        returnValue: "",
+                        statusCode: 0,
+                        networkError: true,
+                        error: {} as APIError,
+                    };
+                }
+            });
+    }
+
+    async getCurrentSemester(): Promise<APIResponse<string>> {
+        const today = new Date().toISOString().slice(0, 10);
+        return await this.getSemester(today);
+    }
+
+    async getValidation(): Promise<APIResponse<any>> {
+        return await this._axios
+            .get(`/validation`)
+            .then((response: AxiosResponse) => {
+                return {
+                    returnValue: response.data,
+                    statusCode: response.status,
+                    networkError: false,
+                    error: {} as APIError,
+                };
+            })
+            .catch(async (error: AxiosError) => {
+                if (error.response) {
+                    return {
+                        returnValue: {},
+                        statusCode: error.response.status,
+                        networkError: false,
+                        error: error.response.data as APIError,
+                    };
+                } else {
+                    return {
+                        returnValue: {},
+                        statusCode: 0,
+                        networkError: true,
+                        error: {} as APIError,
+                    };
+                }
+            });
+    }
+}

src/api/api_models/configuration_management/Configuration.ts

@@ -0,0 +1,5 @@
+export default interface Configuration {
+    countries: string[];
+    languages: string[];
+    courseTypes: string[];
+}

src/api/api_models/configuration_management/HyperledgerVersion.ts

@@ -0,0 +1,3 @@
+export default interface HyperledgerNetworkVersion {
+    networkVersion: string;
+}

src/api/api_models/course_management/Course.ts

@@ -1,8 +1,5 @@
-import { CourseType } from "@/entities/CourseType";
-import { Language } from "@/entities/Language";
-
 export default interface Course {
-    courseType: CourseType;
+    courseType: string;
     moduleIds: string[];
     courseId: string;
     courseName: string;
@@ -11,7 +8,7 @@ export default interface Course {
     maxParticipants: number;
     currentParticipants: number;
     courseDescription: string;
-    courseLanguage: Language;
+    courseLanguage: string;
     startDate: string;
     endDate: string;
 }

src/components/account/edit/sections/AddressSection.vue

@@ -26,24 +26,23 @@
                 <div class="lg:flex mb-6 justify-between">
                     <div class="lg:mb-0 mb-6 flex flex-col w-full lg:w-5/6 mr-3">
                         <label class="text-gray-700 text-md font-medium mb-3">City</label>
-                        <input
-                            id="city"
-                            v-model="addressCopy.city"
+                        <base-input
+                            v-model:value="addressCopy.city"
+                            identifier="city"
+                            :error-message="getErrorMessage(errorBag, 'city', true)"
                             type="text"
-                            class="w-full form-input input-text"
-                            :class="{ error: errorBag.hasNested('city') }"
                             placeholder="City"
+                            validation-query="address.city"
                         />
-                        <p v-if="errorBag.hasNested('city')" class="error-message">{{ errorBag.getNested("city") }}</p>
                     </div>
                     <div class="flex flex-col w-full lg:w-1/6">
                         <label class="text-gray-700 text-md font-medium mb-3">Postal Code</label>
                         <input
                             id="zipCode"
                             v-model="addressCopy.zipCode"
-                            type="text"
                             class="w-full form-input input-text"
                             :class="{ error: errorBag.hasNested('zipCode') }"
+                            type="text"
                             placeholder="Zip Code"
                         />
                         <p v-if="errorBag.hasNested('zipCode')" class="error-message">
@@ -54,31 +53,25 @@
                 <div class="lg:flex flex-row justify-between mb-6">
                     <div class="lg:mb-0 mb-6 flex flex-col w-full lg:w-5/6 mr-3">
                         <label class="text-gray-700 text-md font-medium mb-3">Street</label>
-                        <input
-                            id="street"
-                            v-model="addressCopy.street"
+                        <base-input
+                            v-model:value="addressCopy.street"
+                            identifier="street"
+                            :error-message="getErrorMessage(errorBag, 'street', true)"
                             type="text"
-                            class="w-full form-input input-text"
-                            :class="{ error: errorBag.hasNested('street') }"
                             placeholder="Street"
+                            validation-query="address.street"
                         />
-                        <p v-if="errorBag.hasNested('street')" class="error-message">
-                            {{ errorBag.getNested("street") }}
-                        </p>
                     </div>
                     <div class="flex flex-col w-full lg:w-1/6">
                         <label class="text-gray-700 text-md font-medium mb-3">Nr.</label>
-                        <input
-                            id="houseNumber"
-                            v-model="addressCopy.houseNumber"
+                        <base-input
+                            v-model:value="addressCopy.houseNumber"
+                            identifier="houseNumber"
+                            :error-message="getErrorMessage(errorBag, 'houseNumber', true)"
                             type="text"
-                            class="w-full form-input input-text"
-                            :class="{ error: errorBag.hasNested('houseNumber') }"
                             placeholder="Number"
+                            validation-query="address.houseNumber"
                         />
-                        <p v-if="errorBag.hasNested('houseNumber')" class="error-message">
-                            {{ errorBag.getNested("houseNumber") }}
-                        </p>
                     </div>
                 </div>
             </div>
@@ -87,12 +80,18 @@
 </template>
 
 <script lang="ts">
-    import { Country } from "@/entities/Country";
-    import ErrorBag from "@/use/helpers/ErrorBag";
+    import ErrorBag, { getErrorMessage } from "@/use/helpers/ErrorBag";
     import { useModelWrapper } from "@/use/helpers/ModelWrapper";
+    import { useStore } from "@/use/store/store";
+    import { onMounted, ref } from "vue";
+    import BaseInput from "@/components/common/BaseInput.vue";
+    import { useToast } from "@/toast";
 
     export default {
         name: "AccountAddressSection",
+        components: {
+            BaseInput,
+        },
         props: {
             address: {
                 required: true,
@@ -105,11 +104,24 @@
         },
         emits: ["update:address"],
         setup(props: any, { emit }: any) {
-            const countries = Object.values(Country).filter((e) => e != Country.NONE);
+            const store = useStore();
+            const countries = ref([] as string[]);
+
+            onMounted(async () => {
+                await store.getters.configuration
+                    .then((config) => {
+                        countries.value = config.countries;
+                    })
+                    .catch((reason) => {
+                        const toast = useToast();
+                        toast.error(reason);
+                    });
+            });
 
             return {
                 countries,
                 addressCopy: useModelWrapper(props, emit, "address"),
+                getErrorMessage,
             };
         },
     };

src/components/account/edit/sections/PersonalInformationSection.vue

@@ -9,31 +9,23 @@
                 <div class="mb-6 lg:flex">
                     <div class="flex flex-col mb-6 lg:w-1/2 lg:mb-0 lg:mr-16">
                         <label class="mb-3 font-medium text-gray-700 text-md">First Name</label>
-                        <input
-                            id="firstName"
-                            v-model="accountFirstName"
-                            type="text"
-                            class="w-full form-input input-text"
-                            :class="{ error: errorBag.hasNested('firstName') }"
+                        <base-input
+                            v-model:value="accountFirstName"
+                            identifier="firstName"
+                            :error-message="getErrorMessage(errorBag, 'firstName', true)"
                             placeholder="Firstname"
+                            validation-query="user.firstName"
                         />
-                        <p v-if="errorBag.hasNested('firstName')" class="error-message">
-                            {{ errorBag.getNested("firstName") }}
-                        </p>
                     </div>
                     <div class="flex flex-col mb-6 lg:w-1/2 lg:mb-0">
                         <label class="mb-3 font-medium text-gray-700 text-md">Last Name</label>
-                        <input
-                            id="lastName"
-                            v-model="accountLastName"
-                            type="text"
-                            class="w-full form-input input-text"
-                            :class="{ error: errorBag.hasNested('lastName') }"
+                        <base-input
+                            v-model:value="accountLastName"
+                            identifier="lastName"
+                            :error-message="getErrorMessage(errorBag, 'lastName', true)"
                             placeholder="Lastname"
+                            validation-query="user.lastName"
                         />
-                        <p v-if="errorBag.hasNested('lastName')" class="error-message">
-                            {{ errorBag.getNested("lastName") }}
-                        </p>
                     </div>
                 </div>
                 <div v-if="!editMode" class="lg:flex md:flex-col mb-6">
@@ -62,14 +54,16 @@
 
 <script lang="ts">
     import { useModelWrapper } from "@/use/helpers/ModelWrapper";
-    import ErrorBag from "@/use/helpers/ErrorBag";
+    import ErrorBag, { getErrorMessage } from "@/use/helpers/ErrorBag";
     import BirthDatePicker from "../BirthDatePicker.vue";
     import { ref } from "vue";
+    import BaseInput from "@/components/common/BaseInput.vue";
 
     export default {
         name: "RoleSection",
         components: {
             BirthDatePicker,
+            BaseInput,
         },
         props: {
             errorBag: {
@@ -103,6 +97,7 @@
             let accountBirthdate = ref(props.birthDate);
 
             return {
+                getErrorMessage,
                 accountFirstName: useModelWrapper(props, emit, "firstName"),
                 accountLastName: useModelWrapper(props, emit, "lastName"),
                 accountBirthdate: useModelWrapper(props, emit, "birthDate"),