Add custom organisation name

This commit is contained in:
Daniel Egger 2024-07-16 14:51:44 +02:00
parent d56c346512
commit f0acdaf254
6 changed files with 96 additions and 24 deletions

View File

@ -34,7 +34,7 @@ const orgAddress = computed({
for="company-name" for="company-name"
class="block text-sm font-medium leading-6 text-gray-900" class="block text-sm font-medium leading-6 text-gray-900"
> >
{{ $t("a.Name") }} {{ $t("a.Firmenname") }}
</label> </label>
<div class="mt-2"> <div class="mt-2">
<input <input

19
client/src/consts.ts Normal file
View File

@ -0,0 +1,19 @@
// Course IDs
export const COURSE_TEST_ID = -1;
export const COURSE_UK = -3;
export const COURSE_VERSICHERUNGSVERMITTLERIN_ID = -4;
export const COURSE_UK_FR = -5;
export const COURSE_UK_TRAINING = -6;
export const COURSE_UK_TRAINING_FR = -7;
export const COURSE_UK_IT = -8;
export const COURSE_UK_TRAINING_IT = -9;
export const COURSE_VERSICHERUNGSVERMITTLERIN_FR_ID = -10;
export const COURSE_VERSICHERUNGSVERMITTLERIN_IT_ID = -11;
export const COURSE_VERSICHERUNGSVERMITTLERIN_PRUEFUNG_ID = -12;
export const COURSE_MOTORFAHRZEUG_PRUEFUNG_ID = -13;
// Organization IDs
export const ORGANISATION_OTHER_BROKER_ID = 1;
export const ORGANISATION_OTHER_HEALTH_INSURANCE_ID = 2;
export const ORGANISATION_OTHER_PRIVATE_INSURANCE_ID = 3;
export const ORGANISATION_NO_COMPANY_ID = 31;

View File

@ -3,9 +3,9 @@ import WizardPage from "@/components/onboarding/WizardPage.vue";
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue"; import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
import { computed, ref, watch } from "vue"; import { computed, ref, watch } from "vue";
import { useUserStore } from "@/stores/user"; import { useUserStore } from "@/stores/user";
import { useRoute } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import { useTranslation } from "i18next-vue"; import { useTranslation } from "i18next-vue";
import { profileNextRoute } from "@/services/onboarding"; import { isOtherOrganisation, profileNextRoute } from "@/services/onboarding";
import { useEntities } from "@/services/entities"; import { useEntities } from "@/services/entities";
import AvatarImage from "@/components/ui/AvatarImage.vue"; import AvatarImage from "@/components/ui/AvatarImage.vue";
@ -13,9 +13,12 @@ const { t } = useTranslation();
const user = useUserStore(); const user = useUserStore();
const route = useRoute(); const route = useRoute();
const router = useRouter();
const { organisations } = useEntities(); const { organisations } = useEntities();
const organisationDetailName = ref<string>("");
const selectedOrganisation = ref({ const selectedOrganisation = ref({
id: 0, id: 0,
name: t("a.Auswählen"), name: t("a.Auswählen"),
@ -35,7 +38,11 @@ watch(
); );
const validOrganisation = computed(() => { const validOrganisation = computed(() => {
return selectedOrganisation.value.id !== 0; const organisationSelected = selectedOrganisation.value.id !== 0;
const organisationNameSet =
!isOtherOrganisation(selectedOrganisation.value.id) ||
!!organisationDetailName.value.trim();
return organisationSelected && organisationNameSet;
}); });
const avatarError = ref(false); const avatarError = ref(false);
@ -56,15 +63,21 @@ async function avatarUpload(e: Event) {
} }
} }
watch(selectedOrganisation, async (organisation) => { async function updateUserProfile() {
await user.updateUserProfile({ await user.updateUserProfile({
organisation: organisation.id, organisation: selectedOrganisation.value.id,
organisation_detail_name: organisationDetailName.value.trim(),
}); });
}); }
const nextRoute = computed(() => { const nextRoute = computed(() => {
return profileNextRoute(route.params.courseType); return profileNextRoute(route.params.courseType);
}); });
async function navigateNextRoute() {
await updateUserProfile();
await router.push({ name: nextRoute.value });
}
</script> </script>
<template> <template>
@ -86,6 +99,19 @@ const nextRoute = computed(() => {
<ItDropdownSelect v-model="selectedOrganisation" :items="organisations" /> <ItDropdownSelect v-model="selectedOrganisation" :items="organisations" />
<div v-if="isOtherOrganisation(selectedOrganisation.id)" class="my-8">
<label for="organisationDetailName" class="block pb-1.5 heading-3">
{{ $t("a.Firmenname") }}
</label>
<input
id="organisationDetailName"
v-model="organisationDetailName"
type="text"
name="phone"
class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 disabled:cursor-not-allowed disabled:text-gray-500 disabled:ring-gray-200 sm:max-w-sm sm:text-sm sm:leading-6"
/>
</div>
<div class="mt-16 flex flex-col justify-between gap-12 lg:flex-row lg:gap-24"> <div class="mt-16 flex flex-col justify-between gap-12 lg:flex-row lg:gap-24">
<div> <div>
<h3 class="mb-3">{{ $t("a.Profilbild") }}</h3> <h3 class="mb-3">{{ $t("a.Profilbild") }}</h3>
@ -117,18 +143,16 @@ const nextRoute = computed(() => {
</template> </template>
<template #footer> <template #footer>
<router-link v-slot="{ navigate }" :to="{ name: nextRoute }" custom> <button
<button :disabled="!validOrganisation"
:disabled="!validOrganisation" class="btn-blue flex items-center"
class="btn-blue flex items-center" role="link"
role="link" data-cy="continue-button"
data-cy="continue-button" @click="navigateNextRoute"
@click="navigate" >
> {{ $t("general.next") }}
{{ $t("general.next") }} <it-icon-arrow-right class="it-icon ml-2 h-6 w-6" />
<it-icon-arrow-right class="it-icon ml-2 h-6 w-6" /> </button>
</button>
</router-link>
</template> </template>
</WizardPage> </WizardPage>
</template> </template>

View File

@ -13,6 +13,12 @@ import DatatransCembraDeviceFingerprint from "@/components/onboarding/DatatransC
import { getLocalSessionKey } from "@/statistics"; import { getLocalSessionKey } from "@/statistics";
import log from "loglevel"; import log from "loglevel";
import { normalizeSwissPhoneNumber, validatePhoneNumber } from "@/utils/phone"; import { normalizeSwissPhoneNumber, validatePhoneNumber } from "@/utils/phone";
import {
ORGANISATION_NO_COMPANY_ID,
ORGANISATION_OTHER_BROKER_ID,
ORGANISATION_OTHER_HEALTH_INSURANCE_ID,
ORGANISATION_OTHER_PRIVATE_INSURANCE_ID,
} from "@/consts";
const props = defineProps({ const props = defineProps({
courseType: { courseType: {
@ -31,11 +37,14 @@ const userOrganisationName = computed(() => {
} }
// Those IDs do not represent a company // Those IDs do not represent a company
// 1: Other broker if (
// 2: Other insurance [
// 3: Other private insurance ORGANISATION_OTHER_BROKER_ID,
// 31: No company relation ORGANISATION_OTHER_HEALTH_INSURANCE_ID,
if ([1, 2, 3, 31].includes(user.organisation)) { ORGANISATION_OTHER_PRIVATE_INSURANCE_ID,
ORGANISATION_NO_COMPANY_ID,
].includes(user.organisation)
) {
return null; return null;
} }

View File

@ -1,4 +1,9 @@
import { isString, startsWith } from "lodash"; import { isString, startsWith } from "lodash";
import {
ORGANISATION_OTHER_BROKER_ID,
ORGANISATION_OTHER_HEALTH_INSURANCE_ID,
ORGANISATION_OTHER_PRIVATE_INSURANCE_ID,
} from "@/consts";
export function profileNextRoute(courseType: string | string[]) { export function profileNextRoute(courseType: string | string[]) {
if (courseType === "uk") { if (courseType === "uk") {
@ -10,3 +15,11 @@ export function profileNextRoute(courseType: string | string[]) {
} }
return ""; return "";
} }
export function isOtherOrganisation(orgId: number) {
return [
ORGANISATION_OTHER_BROKER_ID,
ORGANISATION_OTHER_HEALTH_INSURANCE_ID,
ORGANISATION_OTHER_PRIVATE_INSURANCE_ID,
].includes(orgId);
}

View File

@ -28,3 +28,10 @@ UK_COURSE_IDS = [
COURSE_UK_TRAINING_FR, COURSE_UK_TRAINING_FR,
COURSE_UK_TRAINING_IT, COURSE_UK_TRAINING_IT,
] ]
# Organization IDs
ORGANISATION_OTHER_BROKER_ID = 1
ORGANISATION_OTHER_HEALTH_INSURANCE_ID = 2
ORGANISATION_OTHER_PRIVATE_INSURANCE_ID = 3
ORGANISATION_NO_COMPANY_ID = 31