feat: edit view
This commit is contained in:
Reto Aebersold
parent
51540324b4
commit
28db4bc1f9
|
|
@ -1,89 +1,380 @@
|
|||
<script setup lang="ts">
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import { ref } from "vue";
|
||||
import { useEntities } from "@/services/onboarding";
|
||||
|
||||
const user = useUserStore();
|
||||
const { countries, organisations } = useEntities();
|
||||
|
||||
const formData = ref({
|
||||
firstName: user.first_name,
|
||||
lastName: user.last_name,
|
||||
email: user.email,
|
||||
street: user.street,
|
||||
streetNumber: user.street_number,
|
||||
postalCode: user.postal_code,
|
||||
city: user.city,
|
||||
country: user.country,
|
||||
organisation: user.organisation,
|
||||
organisationStreet: user.organisation_street,
|
||||
organisationStreetNumber: user.organisation_street_number,
|
||||
organisationPostalCode: user.organisation_postal_code,
|
||||
organisationCity: user.organisation_city,
|
||||
organisationCountry: user.organisation_country,
|
||||
invoiceAddress: user.invoice_address,
|
||||
});
|
||||
const props = defineProps(["modelValue"]);
|
||||
const emit = defineEmits(["update:modelValue"]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mb-4 bg-white p-3 md:p-6">
|
||||
<h3 class="mb-8">{{ $t("a.Persönliche Informationen") }}</h3>
|
||||
<label for="first-name" class="block pb-1.5 leading-6">
|
||||
{{ $t("a.Vorname") }}
|
||||
</label>
|
||||
<div class="mb-4">
|
||||
<section>
|
||||
<label for="first-name" class="block pb-1.5 leading-6">
|
||||
{{ $t("a.Vorname") }}
|
||||
</label>
|
||||
|
||||
<input
|
||||
id="first-name"
|
||||
v-model="formData.firstName"
|
||||
:value="props.modelValue.first_name"
|
||||
type="text"
|
||||
name="first-name"
|
||||
autocomplete="given-name"
|
||||
disabled
|
||||
class="disabled:bg-gray-50 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-xs sm:text-sm sm:leading-6"
|
||||
class="disabled:bg-gray-50 mb-4 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"
|
||||
@input="
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
first_name: ($event.target as HTMLInputElement).value,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<label for="last-name" class="block pb-1.5 leading-6">
|
||||
{{ $t("a.Name") }}
|
||||
</label>
|
||||
<div class="mb-4">
|
||||
|
||||
<label for="last-name" class="block pb-1.5 leading-6">
|
||||
{{ $t("a.Name") }}
|
||||
</label>
|
||||
|
||||
<input
|
||||
id="last-name"
|
||||
v-model="formData.lastName"
|
||||
:value="props.modelValue.last_name"
|
||||
type="text"
|
||||
name="last-name"
|
||||
autocomplete="family-name"
|
||||
disabled
|
||||
class="disabled:bg-gray-50 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-xs sm:text-sm sm:leading-6"
|
||||
class="disabled:bg-gray-50 mb-4 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"
|
||||
@input="
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
last_name: ($event.target as HTMLInputElement).value,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<label for="email" class="block pb-1.5 leading-6">
|
||||
{{ $t("a.E-Mail Adresse") }}
|
||||
</label>
|
||||
<div class="mb-8">
|
||||
|
||||
<label for="email" class="block pb-1.5 leading-6">
|
||||
{{ $t("a.E-Mail Adresse") }}
|
||||
</label>
|
||||
|
||||
<input
|
||||
id="email"
|
||||
v-model="formData.email"
|
||||
:value="props.modelValue.email"
|
||||
type="email"
|
||||
name="email"
|
||||
autocomplete="email"
|
||||
disabled
|
||||
class="disabled:bg-gray-50 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-xs sm:text-sm sm:leading-6"
|
||||
class="disabled:bg-gray-50 mb-4 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"
|
||||
@input="
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
email: ($event.target as HTMLInputElement).value,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<h4 class="mb-4 block border-t pt-6 text-lg font-bold">
|
||||
{{ $t("a.Privatadresse") }}
|
||||
</h4>
|
||||
</section>
|
||||
<section class="mt-8 border-t pt-8">
|
||||
<h4 class="mb-4 text-lg font-bold">
|
||||
{{ $t("a.Privatadresse") }}
|
||||
</h4>
|
||||
|
||||
<label for="email" class="block pb-1.5 leading-6">
|
||||
{{ $t("a.Strasse") }}
|
||||
</label>
|
||||
<div class="mb-4">
|
||||
<input
|
||||
id="street"
|
||||
v-model="formData.street"
|
||||
type="text"
|
||||
name="street"
|
||||
autocomplete="street"
|
||||
class="disabled:bg-gray-50 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-xs sm:text-sm sm:leading-6"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col justify-start md:flex-row md:space-x-4">
|
||||
<div class="w-full md:max-w-sm">
|
||||
<label for="street-address" class="block pb-1.5 leading-6">
|
||||
{{ $t("a.Strasse") }}
|
||||
</label>
|
||||
|
||||
<input
|
||||
id="street-address"
|
||||
:value="props.modelValue.street"
|
||||
type="text"
|
||||
name="street-address"
|
||||
autocomplete="street-address"
|
||||
class="disabled:bg-gray-50 mb-4 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:text-sm sm:leading-6"
|
||||
@input="
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
street: ($event.target as HTMLInputElement).value,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="w-full md:max-w-[160px]">
|
||||
<label for="street-number" class="block pb-1.5 leading-6">
|
||||
{{ $t("a.Hausnummmer") }}
|
||||
</label>
|
||||
|
||||
<input
|
||||
id="street-number"
|
||||
:value="props.modelValue.street_number"
|
||||
name="street-number"
|
||||
type="text"
|
||||
autocomplete="street-number"
|
||||
class="disabled:bg-gray-50 mb-4 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:text-sm sm:leading-6"
|
||||
@input="
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
street_number: ($event.target as HTMLInputElement).value,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col justify-start md:flex-row md:space-x-4">
|
||||
<div class="w-full md:max-w-[160px]">
|
||||
<label for="postal-code" class="block pb-1.5 leading-6">
|
||||
{{ $t("a.PLZ") }}
|
||||
</label>
|
||||
|
||||
<input
|
||||
id="postal-code"
|
||||
:value="props.modelValue.postal_code"
|
||||
name="postal-code"
|
||||
type="text"
|
||||
autocomplete="postal-code"
|
||||
class="disabled:bg-gray-50 mb-4 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:text-sm sm:leading-6"
|
||||
@input="
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
postal_code: ($event.target as HTMLInputElement).value,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full md:max-w-sm">
|
||||
<label for="city" class="block pb-1.5 leading-6">
|
||||
{{ $t("a.Ort") }}
|
||||
</label>
|
||||
|
||||
<input
|
||||
id="city"
|
||||
:value="props.modelValue.city"
|
||||
type="text"
|
||||
name="city"
|
||||
autocomplete="address-level2"
|
||||
class="disabled:bg-gray-50 mb-4 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:text-sm sm:leading-6"
|
||||
@input="
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
city: ($event.target as HTMLInputElement).value,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<label for="country" class="block pb-1.5 leading-6">
|
||||
{{ $t("a.Land") }}
|
||||
</label>
|
||||
|
||||
<select
|
||||
id="country"
|
||||
:value="props.modelValue.country"
|
||||
name="country"
|
||||
autocomplete="country-name"
|
||||
class="disabled:bg-gray-50 mb-4 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"
|
||||
@change="
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
country: ($event.target as HTMLInputElement).value,
|
||||
})
|
||||
"
|
||||
>
|
||||
<option v-for="country in countries" :key="country.id" :value="country.id">
|
||||
{{ country.name }}
|
||||
</option>
|
||||
</select>
|
||||
</section>
|
||||
</div>
|
||||
<div class="mb-4 bg-white p-3 md:p-6">
|
||||
<h3 class="mb-8">{{ $t("a.Geschäftsdaten") }}</h3>
|
||||
<section>
|
||||
<label for="organisation" class="block pb-1.5 leading-6">
|
||||
{{ $t("a.Unternehmen") }}
|
||||
</label>
|
||||
|
||||
<select
|
||||
id="organisation"
|
||||
:value="props.modelValue.organisation"
|
||||
required
|
||||
name="organisation"
|
||||
class="disabled:bg-gray-50 mb-4 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"
|
||||
@input="
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
organisation: ($event.target as HTMLInputElement).value,
|
||||
})
|
||||
"
|
||||
>
|
||||
<option
|
||||
v-for="organisation in organisations"
|
||||
:key="organisation.id"
|
||||
:value="organisation.id"
|
||||
>
|
||||
{{ organisation.name }}
|
||||
</option>
|
||||
</select>
|
||||
</section>
|
||||
<section class="mt-8 border-t pt-8">
|
||||
<h4 class="mb-4 text-lg font-bold">
|
||||
{{ $t("a.Firmenanschrift") }}
|
||||
</h4>
|
||||
|
||||
<div class="flex flex-col justify-start md:flex-row md:space-x-4">
|
||||
<div class="w-full md:max-w-sm">
|
||||
<label for="org-street-address" class="block pb-1.5 leading-6">
|
||||
{{ $t("a.Strasse") }}
|
||||
</label>
|
||||
|
||||
<input
|
||||
id="org-street-address"
|
||||
:value="props.modelValue.organisation_street"
|
||||
type="text"
|
||||
name="org-street-address"
|
||||
autocomplete="street-address"
|
||||
class="disabled:bg-gray-50 mb-4 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:text-sm sm:leading-6"
|
||||
@input="
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
organisation_street: ($event.target as HTMLInputElement).value,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="w-full md:max-w-[160px]">
|
||||
<label for="org-street-number" class="block pb-1.5 leading-6">
|
||||
{{ $t("a.Hausnummmer") }}
|
||||
</label>
|
||||
|
||||
<input
|
||||
id="org-street-number"
|
||||
:value="props.modelValue.organisation_street_number"
|
||||
name="org-street-number"
|
||||
type="text"
|
||||
autocomplete="street-number"
|
||||
class="disabled:bg-gray-50 mb-4 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:text-sm sm:leading-6"
|
||||
@input="
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
organisation_street_number: ($event.target as HTMLInputElement).value,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col justify-start md:flex-row md:space-x-4">
|
||||
<div class="w-full md:max-w-[160px]">
|
||||
<label for="org-postal-code" class="block pb-1.5 leading-6">
|
||||
{{ $t("a.PLZ") }}
|
||||
</label>
|
||||
|
||||
<input
|
||||
id="org-postal-code"
|
||||
:value="props.modelValue.organisation_postal_code"
|
||||
name="org-postal-code"
|
||||
type="text"
|
||||
autocomplete="postal-code"
|
||||
class="disabled:bg-gray-50 mb-4 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:text-sm sm:leading-6"
|
||||
@input="
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
organisation_postal_code: ($event.target as HTMLInputElement).value,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full md:max-w-sm">
|
||||
<label for="org-city" class="block pb-1.5 leading-6">
|
||||
{{ $t("a.Ort") }}
|
||||
</label>
|
||||
|
||||
<input
|
||||
id="org-city"
|
||||
:value="props.modelValue.organisation_city"
|
||||
type="text"
|
||||
name="org-city"
|
||||
autocomplete="address-level2"
|
||||
class="disabled:bg-gray-50 mb-4 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:text-sm sm:leading-6"
|
||||
@input="
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
organisation_city: ($event.target as HTMLInputElement).value,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<label for="org-country" class="block pb-1.5 leading-6">
|
||||
{{ $t("a.Land") }}
|
||||
</label>
|
||||
|
||||
<select
|
||||
id="org-country"
|
||||
:value="props.modelValue.organisation_country"
|
||||
required
|
||||
name="org-country"
|
||||
autocomplete="country-name"
|
||||
class="disabled:bg-gray-50 mb-4 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"
|
||||
@change="
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
organisation_country: ($event.target as HTMLInputElement).value,
|
||||
})
|
||||
"
|
||||
>
|
||||
<option v-for="country in countries" :key="country.id" :value="country.id">
|
||||
{{ country.name }}
|
||||
</option>
|
||||
</select>
|
||||
</section>
|
||||
</div>
|
||||
<div class="mb-4 bg-white p-3 md:p-6">
|
||||
<h3 class="mb-8">{{ $t("a.Rechnungsadresse") }}</h3>
|
||||
<fieldset class="mt-4">
|
||||
<legend class="sr-only">Notification method</legend>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center">
|
||||
<input
|
||||
id="invoice-address-private"
|
||||
type="radio"
|
||||
value="prv"
|
||||
:checked="props.modelValue.invoice_address === 'prv'"
|
||||
class="h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-600"
|
||||
@change="
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
invoice_address: ($event.target as HTMLInputElement).value,
|
||||
})
|
||||
"
|
||||
/>
|
||||
<label
|
||||
for="invoice-address-private"
|
||||
class="ml-3 block text-sm font-medium leading-6 text-gray-900"
|
||||
>
|
||||
{{ $t("a.Gleich wie die Privatadresse") }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<input
|
||||
id="invoice-address-organisation"
|
||||
type="radio"
|
||||
value="org"
|
||||
:checked="props.modelValue.invoice_address === 'org'"
|
||||
class="h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-600"
|
||||
@change="
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
invoice_address: ($event.target as HTMLInputElement).value,
|
||||
})
|
||||
"
|
||||
/>
|
||||
<label
|
||||
for="invoice-address-organisation"
|
||||
class="ml-3 block text-sm font-medium leading-6 text-gray-900"
|
||||
>
|
||||
{{ $t("a.Gleich wie die Firmenanschrift") }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -7,20 +7,43 @@ import ProfileView from "@/components/personalProfile/ProfileView.vue";
|
|||
import ProfileEdit from "@/components/personalProfile/ProfileEdit.vue";
|
||||
|
||||
const user = useUserStore();
|
||||
const editMode = ref(true);
|
||||
const editMode = ref(false);
|
||||
|
||||
const formData = ref();
|
||||
|
||||
function startEditMode() {
|
||||
formData.value = {
|
||||
first_name: user.first_name,
|
||||
last_name: user.last_name,
|
||||
email: user.email,
|
||||
street: user.street,
|
||||
street_number: user.street_number,
|
||||
postal_code: user.postal_code,
|
||||
city: user.city,
|
||||
country: user.country?.country_id,
|
||||
organisation: user.organisation,
|
||||
organisation_street: user.organisation_street,
|
||||
organisation_street_number: user.organisation_street_number,
|
||||
organisation_postal_code: user.organisation_postal_code,
|
||||
organisation_city: user.organisation_city,
|
||||
organisation_country: user.organisation_country?.country_id,
|
||||
invoice_address: user.invoice_address,
|
||||
};
|
||||
editMode.value = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-grow flex-col bg-gray-200 md:flex-row">
|
||||
<div class="bg-white p-8">
|
||||
<section class="flex flex-col items-center space-y-2">
|
||||
<section class="flex max-w-lg flex-col items-center space-y-2">
|
||||
<img
|
||||
:alt="user.first_name"
|
||||
class="h-32 w-32 rounded-full md:h-48 md:w-48"
|
||||
class="h-auto w-32 rounded-full md:w-48"
|
||||
:src="user.avatar_url"
|
||||
/>
|
||||
<h3>{{ user.first_name }} {{ user.last_name }}</h3>
|
||||
<div>{{ user.email }}</div>
|
||||
<span>{{ user.email }}</span>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
|
@ -33,13 +56,13 @@ const editMode = ref(true);
|
|||
<button class="btn btn-primary">{{ $t("general.save") }}</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button class="btn btn-secondary" @click="editMode = true">
|
||||
<button class="btn btn-secondary" @click="startEditMode">
|
||||
{{ $t("a.Profil bearbeiten") }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
<template v-if="editMode">
|
||||
<ProfileEdit />
|
||||
<ProfileEdit v-model="formData" />
|
||||
<div class="flex justify-end space-x-4">
|
||||
<button class="btn btn-secondary" @click="editMode = false">
|
||||
{{ $t("general.cancel") }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue