import{a as K,b as W,c as $,d as b,e as h,f as G}from"./chunk-NJVJGTK7.js";import{a as Y}from"./chunk-G7OJYPNY.js";import{a as X}from"./chunk-JUDWAYYT.js";import{a as Z}from"./chunk-5OT2MLHH.js";import{a as Q}from"./chunk-4MZCYQX4.js";import{b as q,c as V,d as J}from"./chunk-YOJ4KGSB.js";import"./chunk-I6FSQTEP.js";import"./chunk-CO3X7TQN.js";import{a as H}from"./chunk-VSFNMVXJ.js";import"./chunk-WQ6DP4JQ.js";import{Ob as B,a as re,l as z,wb as U}from"./chunk-YSQLW2JA.js";import{td as j}from"./chunk-NVJ2ZZFT.js";import{Aa as v,Dc as l,Fb as x,Hb as C,Kc as S,Lc as w,Mg as N,Ng as P,Pc as I,Qc as E,Qd as F,Qf as M,Rc as D,Rd as L,Sd as O,Te as A,ab as d,bb as m,cd as T,dc as g,dd as p,g as se,gg as f,hd as y,hg as _,jg as R,wa as k,ya as c}from"./chunk-SKPDQO4E.js";var ee=`<div class="h-100">
  <side-navigation *ngIf="visibleComponent">
    <ng-template side-navigation-nav>
      <div class="row">
        <div class="col-12 mb-2">
          <label class="report-form-label">{{'FEEDBACK.CAPTION' | translate}}</label>
          <armon-search-text-input [(ngModel)]="filter.caption" [minLength]="5" [onlyNumber]="true"
            (ngModelChange)="onFilterChanged($event)" placeholder="COMMON.SEARCH"></armon-search-text-input>
        </div>
        <div class="col-12 mb-2">
          <label class="report-form-label">{{'FEEDBACK.STATUS' | translate}}</label>
          <select [(ngModel)]="filter.status" (ngModelChange)="onFilterChanged($event)"
            class="form-control form-control-sm">
            <option *ngFor="let status of feedbackStatusList" [ngValue]="status.type">{{status.description |
              translate}}</option>
          </select>
        </div>
        <div class="col-12 mb-2">
          <label class="report-form-label">{{'FEEDBACK.TYPE' | translate}}</label>
          <select [(ngModel)]="filter.type" (ngModelChange)="onFilterChanged($event)"
            class="form-select form-select-sm">
            <option *ngFor="let type of feedbackTypeList" [ngValue]="type.type">{{type.description |
              translate}}</option>
          </select>
        </div>
        <div class="col-12 mb-2" *ngIf="permissionSearchIdentity">
          <label class="report-form-label">{{'FEEDBACK.OWNER' | translate}}</label>
          <armon-select-search query="identity" [allowMulti]="false" [(ngModel)]="filter.requestUserId"
            (ngModelChange)="onFilterChanged($event)">
          </armon-select-search>
        </div>
      </div>
      <!-- Buttons for filtering state -->
      <div class="d-flex justify-content-center mt-3">
        <button class="btn btn-success btn-sm" (click)="onGetExcelClicked($event)">{{'BUTTON.EXCEL'
          | translate}}</button>
      </div>
    </ng-template>
    <ng-template side-navigation-content>
      <div class="report-data-container">
        <div class="row my-3" *ngIf="permissionWriteFeedback">
          <div class="col-12">
            <button class="btn btn-sm btn-primary"
              (click)="onNewClicked($event)">{{'FEEDBACK.SEND_LABEL'|translate}}</button>
          </div>
        </div>
        <div class="row report-filter-container">
          <div class="col-12">
            <div class="row">
              <div class="col-12">
                <armon-date-picker [options]="datePickerOptions" (selectionChanged)="onDateSelectionChanged($event)">
                </armon-date-picker>
              </div>
            </div>
          </div>
        </div>
        <div class="row report-data-table-container" id="report-data-table-container">
          <div class="col-12">
            <p-table [value]="items" dataKey="id" [responsive]="true" rowExpandMode="single">
              <ng-template pTemplate="header">
                <tr>
                  <th>{{'FEEDBACK.CAPTION' | translate}}</th>
                  <th>{{'FEEDBACK.STATUS' | translate}}</th>
                  <th>{{'FEEDBACK.TYPE' | translate}}</th>
                  <th class="width-40p">{{'FEEDBACK.TITLE' | translate}}</th>
                  <th>{{'FEEDBACK.OWNER' | translate}}</th>
                </tr>
              </ng-template>
              <ng-template pTemplate="body" let-item let-rowData let-expanded="expanded">
                <tr [pRowToggler]="rowData" [attr.expanded]="expanded" class="data-row">
                  <td>
                    <span>{{item.caption}}</span>
                  </td>
                  <td>
                    <armon-feedback-status [status]="item.status" class="mt-2 mb-2 d-block"></armon-feedback-status>
                  </td>
                  <td>
                    <armon-feedback-type [type]="item.type" class="mt-2 mb-2 d-block"></armon-feedback-type>
                  </td>
                  <td>
                    <span>
                      <cds-icon shape="image" class="me-2" click-stop-propagation *ngIf="item.screenshot"
                        (click)="onShowImageClicked(item)"></cds-icon>{{item.title}}
                    </span>
                  </td>
                  <td>
                    <div class="report-multi-data-cell">
                      <span class="main-text">{{item.requestUser.fullname}}</span>
                      <span class="sub-text">{{item.createdAtText}}</span>
                    </div>
                  </td>
                </tr>
              </ng-template>
              <ng-template pTemplate="rowexpansion" let-item>
                <tr>
                  <td [attr.colspan]="5" class="expanded-row">
                    <div>
                      <span>{{item.body}}</span>
                    </div>
                    <div class="feedback-screenshot-container" (click)="onShowImageClicked(item)"
                      *ngIf="item.screenshot">
                      <img class="feedback-screenshot" [src]="item.screenshot">
                      <!-- <cds-icon shape="zoom-in" size="lg" class="zoom-icon"></cds-icon> -->
                    </div>
                    <div class="my-2">
                      <button class="btn btn-sm btn-outline-primary me-2" *ngIf="item.history && item.history.length>0"
                        (click)="onHistoryClicked(item)">{{'FEEDBACK.HISTORY'|translate}}</button>
                      <!-- <button class="btn btn-sm btn-outline-primary" (click)="onDetailClicked(item)"
                        *ngIf="!permissionWriteFeedback">{{'BUTTON.DETAIL'|translate}}</button> -->
                      <button class="btn btn-sm btn-outline-primary" (click)="onEditClicked(item)"
                        *ngIf="permissionWriteFeedback">{{'BUTTON.EDIT'|translate}}</button>
                    </div>
                  </td>
                </tr>
              </ng-template>
            </p-table>
          </div>
          <div class="col-12 py-3">
            <armon-pagination [paginationResponse]="paginationResponse" [scrollDomId]="'report-data-table-container'"
              (pageChanged)="pageChanged($event)"></armon-pagination>
          </div>
        </div>
      </div>
    </ng-template>
  </side-navigation>
</div>`;var te=`.card-footer{padding:.28rem .7rem}.alert{font-size:.756rem}@media screen and (min-width: 992px){.modal-xxl{max-width:1640px}}@media screen and (min-width: 1200px){.modal-xxxl{max-width:1860px}}.modal-fs{max-width:none;position:absolute;margin:auto;inset:16px;height:100vh;display:flex}.btn-link{text-decoration:none}.btn-link:hover{text-decoration:underline}.invalid-feedback{margin-top:0!important;font-size:.672rem!important}.justify-content-center{-webkit-box-pack:center;-moz-box-pack:center;-webkit-flex-pack:center;-ms-flex-pack:center;-moz-justify-content:center;-webkit-justify-content:center;justify-content:center}.justify-content-flex-end{-webkit-box-pack:end;-moz-box-pack:end;-webkit-flex-pack:end;-ms-flex-pack:end;-moz-justify-content:flex-end;-webkit-justify-content:flex-end;justify-content:flex-end}.feedback-screenshot-container{position:relative;cursor:pointer;margin:6px 0}.feedback-screenshot-container .feedback-screenshot{height:160px;border:1px solid #0a2a5a}.feedback-screenshot-container .zoom-icon{position:absolute;margin:auto;inset:0}
`;var ae=se(re());var ie=`<ng-container *ngIf="visibleComponent">
  <div class="modal-header">
    <div class="d-flex flex-column">
      <span class="text-lg">{{'FEEDBACK.HISTORY'|translate}}</span>
      <span class="text-md">{{feedbackDetailed.title}}</span>
    </div>
  </div>
  <div class="modal-body">
    <div *ngFor="let historyItem of feedbackDetailed.history" class="history-item">
      <div class="history-item-title">
        <span *ngIf="historyItem.updatedUser">
          <cds-icon shape="note" class="me-2"></cds-icon>{{historyItem.updatedUser.fullname}}
        </span>
        <div class="history-item-tags">
          <armon-feedback-status [status]="historyItem.status"></armon-feedback-status>
          <armon-feedback-type [type]="historyItem.type" class="ms-2"></armon-feedback-type>
        </div>
      </div>
      <div class="history-item-row">
        <span *ngIf="historyItem.note">{{historyItem.note}}</span>
      </div>
      <div class="history-item-italic">
        <span *ngIf="historyItem.updatedAt">
          {{historyItem.updatedAtText}}
        </span>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button class="btn btn-outline-primary" (click)="onCancelClicked($event)">{{'BUTTON.CLOSE' | translate}}</button>
  </div>
</ng-container>
`;var oe=`.justify-content-center{-webkit-box-pack:center;-moz-box-pack:center;-webkit-flex-pack:center;-ms-flex-pack:center;-moz-justify-content:center;-webkit-justify-content:center;justify-content:center}.justify-content-flex-end{-webkit-box-pack:end;-moz-box-pack:end;-webkit-flex-pack:end;-ms-flex-pack:end;-moz-justify-content:flex-end;-webkit-justify-content:flex-end;justify-content:flex-end}.card-footer{padding:.28rem .7rem}.alert{font-size:.756rem}@media screen and (min-width: 992px){.modal-xxl{max-width:1640px}}@media screen and (min-width: 1200px){.modal-xxxl{max-width:1860px}}.modal-fs{max-width:none;position:absolute;margin:auto;inset:16px;height:100vh;display:flex}.btn-link{text-decoration:none}.btn-link:hover{text-decoration:underline}.invalid-feedback{margin-top:0!important;font-size:.672rem!important}.history-item{display:-webkit-box;display:-moz-box;display:-webkit-flexbox;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin:12px 0;padding:6px 12px;-webkit-border-radius:.375rem;-moz-border-radius:.375rem;border-radius:.375rem;box-shadow:0 0 4px #ccc}.history-item .history-item-title{display:-webkit-box;display:-moz-box;display:-webkit-flexbox;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-moz-box-pack:center;-webkit-flex-pack:center;-ms-flex-pack:center;-moz-justify-content:center;-webkit-justify-content:center;justify-content:center;padding:6px 0;border-bottom:1px solid #CCC;margin-bottom:12px}.history-item .history-item-title span{font-size:.756rem;line-height:.7rem}.history-item .history-item-title .history-item-tags{margin-left:auto}.history-item .history-item-row{font-size:.714rem;line-height:.65rem;padding:6px 0}.history-item .history-item-italic{font-size:.46rem;line-height:.55rem;font-style:italic;padding:6px 0;color:#ccc}
`;var pe=function(s,e,t,o){var n=arguments.length,i=n<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(s,e,t,o);else for(var r=s.length-1;r>=0;r--)(a=s[r])&&(i=(n<3?a(i):n>3?a(e,t,i):a(e,t))||i);return n>3&&i&&Object.defineProperty(e,t,i),i},u=class extends O{feedbackDetailed;visibleComponent=!1;constructor(){super()}onModalInitialized(){super.onModalInitialized(),this.visibleComponent=!0}static ctorParameters=()=>[];static propDecorators={feedbackDetailed:[{type:v}]}};u=pe([c({selector:"armon-feedback-history",template:ie,standalone:!0,imports:[m,d,h,b,p],styles:[oe]})],u);var fe=function(s,e,t,o){var n=arguments.length,i=n<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(s,e,t,o);else for(var r=s.length-1;r>=0;r--)(a=s[r])&&(i=(n<3?a(i):n>3?a(e,t,i):a(e,t))||i);return n>3&&i&&Object.defineProperty(e,t,i),i},ne=class{router;route;authService;feedbackService;modalService;interactionService;translate;searchOwnerIdentity;captionDataInput;filter;items;visibleComponent=!1;feedbackStatusList=g(W);feedbackTypeList=g($);paginationResponse=new P;paginationRequest=new N;permissionSearchIdentity;permissionWriteFeedback;datePickerOptions=new _;constructor(e,t,o,n,i,a,r){this.router=e,this.route=t,this.authService=o,this.feedbackService=n,this.modalService=i,this.interactionService=a,this.translate=r,this.feedbackStatusList.unshift({type:null,description:"IDENTITYSTATUS.ALL"}),this.feedbackTypeList.unshift({type:null,description:"IDENTITYSTATUS.ALL"})}ngOnInit(){this.permissionSearchIdentity=this.authService.checkPermission(y.IDENTITY.getReadBasic()),this.permissionWriteFeedback=this.authService.checkPermission(y.SYSTEM.getFeedbackWrite()),this.filter=j.getEmptyModel(),this.datePickerOptions.items=[{type:f.LastWeek,selected:!0},{type:f.LastMonth},{type:f.CustomWithTimer}];let e=R.getDateSelection(this.datePickerOptions.items[0]);this.setDateSelection(e),this.visibleComponent=!0}ngAfterViewInit(){this.getList()}ngOnDestroy(){}setDateSelection(e){this.filter.dateRange.startDateTime=e.startDate,this.filter.dateRange.endDateTime=e.endDate}getList(){this.feedbackService.listFeedbacks(this.filter,!this.permissionWriteFeedback).subscribe(e=>{this.items=e.items,this.paginationResponse=e.pagination})}onGetExcelClicked(e){this.feedbackService.listFeedbacksAsExcel(this.filter,!this.permissionWriteFeedback).subscribe(t=>{this.translate.get(["PAGES.FEEDBACK_LIST"]).subscribe(o=>{ae.default.saveAs(t,o["PAGES.FEEDBACK_LIST"]+" "+l.fromJSDate(this.filter.dateRange.startDateTime).toLocaleString(l.DATETIME_MED)+" "+l.fromJSDate(this.filter.dateRange.endDateTime).toLocaleString(l.DATETIME_MED)+".xlsx")})})}refreshList(e=!0){e&&(this.filter.pagination.skip=0),this.getList()}pageChanged(e){this.filter.pagination.skip=e.skip,this.filter.pagination.take=e.take,this.refreshList(!1)}onDateSelectionChanged(e){this.setDateSelection(e),this.refreshList()}onFilterChanged(e){this.getList()}get selectedIdentity(){return this.searchOwnerIdentity?this.searchOwnerIdentity.getSelection()||[]:[]}onUserSelected(){this.filter.requestUserId=this.selectedIdentity[0].id,this.getList()}onUserRemoved(){this.filter.requestUserId=null,this.getList()}showUpsertModal(e){let t=new w;t.feedbackDetailed=e,this.modalService.open(G,{settings:{size:"lg"},props:{feedbackModal:t}}).result.then(o=>{this.refreshList()}).catch(o=>{})}onEditClicked(e){this.showUpsertModal(e)}onNewClicked(e){let t=S.getEmptyModel();t.origin=I.User,t.status=D.New,t.type=E.MinorError,this.showUpsertModal(t)}onDetailClicked(e){this.showUpsertModal(e)}onShowImageClicked(e){this.interactionService.showFullScreenImage({src:e.screenshot})}onHistoryClicked(e){this.modalService.open(u,{settings:{size:"lg",scrollable:!0},props:{feedbackDetailed:e}}).result.then(t=>{}).catch(t=>{})}static ctorParameters=()=>[{type:C},{type:x},{type:B},{type:K},{type:L},{type:M},{type:T}];static propDecorators={searchOwnerIdentity:[{type:k,args:["searchOwnerIdentity"]}],captionDataInput:[{type:k,args:["captionDataInput"]}]}};ne=fe([c({selector:"armon-feedback-list",template:ee,standalone:!0,imports:[m,J,q,X,A,Y,d,U,V,z,Z,Q,h,b,F,H,p],styles:[te]})],ne);export{ne as FeedbackListComponent};
