doneit-web/src/app/shared/publication/new-publication/new-publication.page.html

<ion-header class="ion-no-border background-white px-20 pt-25">
  <div class="title-content d-flex">
<!--     <div class="back-icon">
      <ion-icon class="font-35-rem" (click)="goBack()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
    </div> -->
    <div class="div-title">
      <ion-label class="title">{{ publicationTitle }}</ion-label> <br>
      <i style="margin-top: -3px; font-size: 15px;" > Campos marcados com * são obrigatórios</i>
    </div>
  </div>
</ion-header>

<ion-content>
<div class="content-container">
  <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>

  <div  *ngIf="publicationType!='1'" class="ion-item-container" [class.input-error]="Form?.get('Subject')?.invalid && validateFrom ">
    <ion-input autocomplete="on" autocorrect="on" spellcheck="true" [(ngModel)]="pub.Title" name="title" placeholder="Título*" ></ion-input>
  </div>

  <div *ngIf="publicationType!='1' " class="container-div pb-20">
    <div class="ion-item-class-2 d-flex">
      <div class="ion-icon-class" >
        <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
      </div>
      <div class="ion-textarea-class flex-grow-1" [class.input-error]="Form?.get('Message')?.invalid && validateFrom ">
        <ion-textarea autocomplete="on" autocorrect="on" spellcheck="true" [(ngModel)]="pub.Message" name="description" ngDefaultControl rows="12" cols="20" placeholder="Corpo de texto*"></ion-textarea>
      </div>
    </div>
  </div>


  <!-- <div *ngIf="publication">
    OriginalFileName: {{ publication.OriginalFileName }}
  </div> -->
  

  <!-- Captured -->
  <div class="ion-item-container-no-border" *ngIf="capturedImage">
    <ion-label class="attached-title pb-10">Fotografia Anexada</ion-label>
    <div class="d-flex justify-content-between">
      <div class="d-flex"> 
        <ion-thumbnail slot="start">
          <ion-img [(ngModel)]="capturedImage" name="image" ngDefaultControl [src]="capturedImage"></ion-img>
        </ion-thumbnail>
  
        <ion-label class="pl-10">
          <p>{{capturedImageTitle}}</p>
          <p hidden>size</p>
        </ion-label>
      </div>
      <button class="btn-no-color" (click)="clear()">
        <ion-icon name="close"></ion-icon>
      </button>
    </div>
  </div>


  <!-- Current -->
  <div class="ion-item-container-no-border mb-20" *ngIf="publication && !( publication.FileBase64 == 'data:image/jpg;base64,null' || publication.FileBase64 == '' ) && !capturedImage">
    <!-- <ion-label class="attached-title pb-10">Fotografia Anexada</ion-label> -->
    <div class="d-flex justify-content-between">
      <div class="d-flex"> 
        <ion-thumbnail slot="start">
          <ion-img [(ngModel)]="publication.FileBase64" name="image" ngDefaultControl [src]="publication.FileBase64"></ion-img>
        </ion-thumbnail>
  
        <ion-label class="pl-10">
          <p>{{publication.OriginalFileName}}.{{publication.FileExtension}}</p>
          <p hidden>size</p>
        </ion-label>
      </div>
      <button class="btn-no-color" (click)="deletePublicationImage()" >
        <ion-icon name="close"></ion-icon>
      </button>
    </div>
  </div>
  

  <div class="ion-item-container-no-border hide-desktop">
    <ion-label (click)="takePicture()">
      <div class="attach-icon">
        <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-add-photo.svg"></ion-icon>
            <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-add-photo.svg"></ion-icon>
      </div>
      <div class="attach-document cursor-pointer">
        <ion-label>Tirar Fotografia</ion-label>
      </div>
      </ion-label>
  </div>

  <div class="ion-item-container-no-border">
    <ion-label (click)="laodPicture()" class="cursor-pointer">
      <div class="attach-icon">
        <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-add-photos.svg"></ion-icon>
            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-add-photos.svg"></ion-icon>
      </div>
      <div class="attach-document cursor-pointer">
        <ion-label>Anexar Fotografia</ion-label>
      </div>
    </ion-label>
  </div>
</div>

</ion-content>

<ion-footer class="ion-no-border">
  <ion-toolbar class="footer-toolbar width-100 px-20">
    <ion-buttons slot="start">
      <button class="btn-ok" fill="clear" color="#fff" (click)="save()">
        <ion-label>Gravar</ion-label>
      </button>
    </ion-buttons>
    <ion-buttons slot="end">
      <button class="btn-cancel" fill="clear" color="#061b52" (click)="close()">
        <ion-label>Cancelar</ion-label>
      </button>
    </ion-buttons>
    
  </ion-toolbar>
</ion-footer>