Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@fe222004
fe222004 committed Jul 30, 2024
1 parent 005c712 commit ff7da56
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 48 deletions.
111 changes: 63 additions & 48 deletions src/app/pages/components/modal-product/modal-product.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,61 +1,76 @@
<div [ngClass]="{'hidden': !isOpenModal, 'block': isOpenModal}" class="fixed inset-0 z-10 overflow-y-auto">
<div class="relative z-10" role="dialog" aria-modal="true">
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>

<div class="flex items-center justify-center min-h-full text-center">
<div class="relative bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all my-8 w-full max-w-lg">
<div class="bg-white p-6">
<div class="absolute right-4 top-4 text-gray-400 hover:text-gray-500">
<button type="button" (click)="closeModal()">
<div class="fixed inset-0 z-10 w-screen overflow-y-auto">
<div class="flex min-h-full items-center justify-center text-center md:px-2 lg:px-4">
<div class="flex w-full transform text-left text-base transition md:my-8 md:max-w-2xl md:px-4 lg:max-w-4xl">
<div
class="relative flex w-full items-center overflow-hidden bg-white px-4 pb-8 pt-14 shadow-2xl sm:px-6 sm:pt-8 md:p-6 lg:p-8">
<button type="button"
class="absolute right-4 top-4 text-gray-400 hover:text-gray-500 sm:right-6 sm:top-8 md:right-6 md:top-6 lg:right-8 lg:top-8"
(click)="closeModal()">
<span class="sr-only">{{ 'close' | translate }}</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>

<div *ngIf="product" class="grid grid-cols-1 gap-4">
<div class="aspect-w-2 aspect-h-3 bg-gray-100 rounded-lg overflow-hidden">
<img [src]="product.damaged_appliance_image" [alt]="'damagedApplianceImageAlt' | translate" class="object-cover">
</div>
<div>
<h2 class="text-2xl font-bold text-gray-900">{{ product.appliance_type }}</h2>
<section aria-labelledby="information-heading" class="mt-2">
<h3 id="information-heading" class="text-lg font-bold text-gray-900">{{ 'productInformation' | translate }}</h3>
<p class="mt-1 text-gray-700"><strong>{{ 'brand' | translate }}:</strong> {{ product.brand }}</p>
<p class="mt-1 text-gray-700"><strong>{{ 'problemDetails' | translate }}:</strong> {{ product.problem_details }}</p>
<p class="mt-1 text-gray-700"><strong>{{ 'serviceType' | translate }}:</strong> {{ product.service_type }}</p>
<p class="mt-1 text-gray-700"><strong>{{ 'preferredContactMethod' | translate }}:</strong> {{ product.preferred_contact_method }}</p>
<p class="mt-1 text-gray-700"><strong>{{ 'applicationDate' | translate }}:</strong> {{ product.application_date }}</p>
</section>
</div>
</div>

<section *ngIf="user" aria-labelledby="user-information-heading" class="mt-10">
<h3 id="user-information-heading" class="text-lg font-bold text-gray-900">{{ 'userInformation' | translate }}</h3>
<div class="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-x-4">
<div>
<label class="block text-sm font-medium text-gray-700">{{ 'name' | translate }}</label>
<p class="mt-1 text-gray-700"><strong>{{ user.first_name }} {{ user.last_name }}</strong></p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">{{ 'email' | translate }}</label>
<p class="mt-1 text-gray-700"><strong>{{ user.email }}</strong></p>
<div class="grid w-full grid-cols-1 items-start gap-x-6 gap-y-4 sm:grid-cols-12 lg:gap-x-4" *ngIf="product">
<div class="aspect-h-3 aspect-w-2 overflow-hidden rounded-lg bg-transparent sm:col-span-4 lg:col-span-5">
<img [src]="product.damaged_appliance_image" [alt]="'damagedApplianceImageAlt' | translate" class="object-cover object-center">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">{{ 'phone' | translate }}</label>
<p class="mt-1 text-gray-700"><strong>{{ user.phone_number }}</strong></p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">{{ 'address' | translate }}</label>
<p class="mt-1 text-gray-700"><strong>{{ user.address }}</strong></p>
<div class="sm:col-span-8 lg:col-span-7">
<h2 class="text-2xl font-bold text-gray-900 sm:pr-12">{{ product.appliance_type }}</h2>
<section aria-labelledby="information-heading" class="mt-2">
<h3 id="information-heading" class="text-lg font-bold text-gray-900">{{ 'productInformation' | translate
}}</h3>
<p class="mt-1 text-gray-700"><strong>{{ 'brand' | translate }}:</strong> {{ product.brand }}</p>
<p class="mt-1 text-gray-700"><strong>{{ 'problemDetails' | translate }}:</strong> {{
product.problem_details }}</p>
<p class="mt-1 text-gray-700"><strong>{{ 'serviceType' | translate }}:</strong> {{ product.service_type
}}</p>
<p class="mt-1 text-gray-700"><strong>{{ 'preferredContactMethod' | translate }}:</strong> {{
product.preferred_contact_method }}</p>
<p class="mt-1 text-gray-700"><strong>{{ 'applicationDate' | translate }}:</strong> {{
product.application_date }}</p>
</section>

<section aria-labelledby="user-information-heading" class="mt-10">
<h3 id="user-information-heading" class="text-lg font-bold text-gray-900">{{ 'userInformation' |
translate }}</h3>
<div class="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-x-4">
<div>
<label for="applicant-name" class="block text-sm font-medium text-gray-700">{{ 'name' | translate
}}</label>
<p class="mt-1 text-gray-700"><strong>{{ product.user.first_name }} {{ product.user.last_name
}}</strong></p>
</div>
<div>
<label for="applicant-email" class="block text-sm font-medium text-gray-700">{{ 'email' | translate
}}</label>
<p class="mt-1 text-gray-700"><strong>{{ product.user.email }}</strong></p>
</div>
<div>
<label for="applicant-phone" class="block text-sm font-medium text-gray-700">{{ 'phone' | translate
}}</label>
<p class="mt-1 text-gray-700"><strong>{{ product.user.phone_number }}</strong></p>
</div>
<div>
<label for="applicant-address" class="block text-sm font-medium text-gray-700">{{ 'address' |
translate }}</label>
<p class="mt-1 text-gray-700"><strong>{{ product.user.address }}</strong></p>
</div>
</div>
</section>

<button type="submit"
class="mt-6 flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-600 px-8 py-3 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">{{
'PAY_NOW' | translate }}</button>
</div>
</div>
</section>

<button type="button" class="mt-6 w-full bg-indigo-600 text-white rounded-md py-3 font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
{{ 'PAY_NOW' | translate }}
</button>
</div>
</div>
</div>
</div>
</div>
</div>
1 change: 1 addition & 0 deletions src/app/pages/product/product.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export class ProductComponent {
private userId?: number;
appliances: any[] = [];
modalProduct: boolean = false;
products: Product[] = [];

currentPage: number = this.initialPage;
totalPages: number = this.initialTotalPages;
Expand Down

0 comments on commit ff7da56

Please sign in to comment.