Files
Jobhero_front/src/app/pages/contracts/contracted/contracted.page.html
Carlos 48979dca6f feat: Branch betos — propiedades, rediseño postulaciones, chat contratos y flujo cancelar/repostular
- Sistema de propiedades: modal add-property con autocomplete y selector de ícono
- category.page rediseñado: selector de propiedad, fotos (Capacitor Camera), sin fecha/precio
- Modal postulate-offer: proveedor propone 2 fechas requeridas + monto con validación de cuota mínima
- viewsuppliers: chips de ordenamiento frontend (fecha, precio, certificados)
- hire.page: selección de fecha (date_1/date_2) antes de contratar; selected_date en contracts/create y contracts/coupon
- Modal contract-discussion: chat de burbujas para contratos activos
- contracted.page: botón de chat por contrato
- pending.page: botones cancelar y repostular por postulación
- Modal repostulate: pre-llena categoría/propiedad, archiva original como perdido y crea nueva con related_postulation_id
- current.page: temporizador de expiración basado en time_created (1000 min), oculta expiradas
- ichamba.service: nuevos métodos properties, cancelPostulation, contractDiscussion, updated signatures

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-03 11:26:48 -06:00

62 lines
3.4 KiB
HTML
Executable File

<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>{{'contracts.header' | translate}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h2 class="ion-text-capitalize" style="padding-bottom: 0.5em">{{'contracts.header_2' | translate}}</h2>
<ion-refresher slot="fixed" (ionRefresh)="refresh($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<ng-container *ngIf="loading">
<ion-card *ngFor="let _ of [1,2]">
<ion-item class="no-separator">
<ion-label>
<ion-skeleton-text [animated]="true" style="width: 55%; height: 18px; margin-bottom: 8px"></ion-skeleton-text>
<ion-skeleton-text [animated]="true" style="width: 85%"></ion-skeleton-text>
<ion-skeleton-text [animated]="true" style="width: 70%"></ion-skeleton-text>
<ion-skeleton-text [animated]="true" style="width: 50%"></ion-skeleton-text>
<ion-skeleton-text [animated]="true" style="width: 40%"></ion-skeleton-text>
<ion-skeleton-text [animated]="true" style="width: 35%"></ion-skeleton-text>
<ion-skeleton-text [animated]="true" style="width: 65%; height: 16px; margin-top: 6px"></ion-skeleton-text>
</ion-label>
</ion-item>
</ion-card>
</ng-container>
<ng-container *ngIf="!loading">
<ng-container *ngFor="let ccontract of ccontracts; let i = index">
<ion-card *ngIf="ccontract.status==1">
<ion-item class="no-separator">
<ion-avatar slot="start">
<img *ngIf="ccontract.profile_photo" [src]="ccontract.profile_photo" (error)="ccontract.profile_photo=null">
<ion-icon *ngIf="!ccontract.profile_photo" name="person-circle" style="width:100%;height:100%;color:var(--ion-color-medium)"></ion-icon>
</ion-avatar>
<ion-label>
<h2 *ngIf="lang===true" class="ion-text-capitalize">{{ ccontract.category }}</h2>
<h2 *ngIf="lang===false" class="ion-text-capitalize">{{ ccontract.en_category }}</h2>
<p class="ion-text-wrap">{{ ccontract.address }}</p>
<p class="ion-text-wrap ion-text-capitalize">{{ ccontracts_dates[i] }}</p>
<p class="ion-text-wrap ion-text-capitalize">{{'contracts.supplier' | translate}}: {{ ccontract.supplier }}</p>
<p class="ion-text-wrap">{{'contracts.phone' | translate}}: <a href="tel:{{ ccontract.phone }}">{{ ccontract.phone }}</a></p>
<p class="ion-text-wrap ion-text-capitalize">{{'contracts.amount' | translate}}: ${{ ccontract.amount }}</p>
<h2 class="ion-text-wrap">{{'contracts.start_pin' | translate}}<b>{{ ccontract.code }}</b></h2>
<p class="ion-text-wrap">{{'contracts.info_pin' | translate}}</p>
</ion-label>
</ion-item>
<div style="display: flex; justify-content: space-between; padding: 0.5em 1em 1.25em; align-items: center">
<ion-button fill="outline" color="primary" (click)="openDiscussion(ccontract.id)">
<ion-icon slot="start" name="chatbubbles-outline"></ion-icon>
Chat
</ion-button>
<ion-button *ngIf="ccontract.past_due < 0" style="height: 4.0em" color="danger" (click)="cancelContract(ccontract.id, ccontract.date)">{{'contracts.cancel_1.1' | translate}}<br>{{'contracts.cancel_1.2' | translate}}</ion-button>
</div>
</ion-card>
</ng-container>
</ng-container>
</ion-content>