[完善]预警申诉上传附件

src/app/pages/audit/audit-ing/appeal-details/appeal-details.component.html

@@ -15,11 +15,23 @@
         <p>预警时间: {{data.itemData.ViolateTime | date:"yyyy-MM-dd HH:mm:ss"}}</p>
         <div class="cutoffrule"></div>
         <p>预警图片:</p>
-        <img (click)="viewImg(data.itemData.ViolateImage)" style="width: 100%;height: auto;"
-            [src]="data.itemData.ViolateImage" alt="">
+        <img (click)="viewImg(data.itemData.ViolateImage)" style="width: 100%;height: auto;color: #C4E2FC;"
+            [src]="data.itemData.ViolateImage" alt="预警图片">
         <div class="cutoffrule"></div>
         <p>申诉原因: {{data.commitReason}}</p>
         <div class="cutoffrule"></div>
+        <div class="appealData">
+            <span class="name">申诉附件: </span>
+            <div class="filebox">
+                <span (click)="lookFile(item)" *ngFor="let item of appealData.appealAttachments">{{item |
+                    fileName}}</span>
+            </div>
+        </div>
+        <div class="cutoffrule"></div>
+        <p>审核人员: {{data.auditUser.name}}</p>
+        <div class="cutoffrule"></div>
+        <p>审核时间: {{data.auditTime | date:"yyyy-MM-dd HH:mm:ss"}}</p>
+        <div class="cutoffrule"></div>
         <p>审核状态: {{data.auditStatusDesc}}</p>
         <div class="cutoffrule"></div>
         <p>审核说明: {{data.rejectReason || ''}}</p>

src/app/pages/audit/audit-ing/appeal-details/appeal-details.component.scss

@@ -64,3 +64,28 @@
     justify-content: space-between;
   }
 }
+
+.appealData {
+  display: flex;
+  color: #C4E2FC;
+
+  .name {
+    width: 15.5%;
+  }
+
+  .filebox {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    span {
+      margin-bottom: 3px;
+      cursor: pointer;
+    }
+
+    span:hover {
+      text-decoration: underline;
+    }
+  }
+}

src/app/pages/audit/audit-ing/appeal-details/appeal-details.component.ts

@@ -1,4 +1,6 @@
+import { HttpClient } from '@angular/common/http';
 import { Component, Input, OnInit } from '@angular/core';
+import { NzMessageService } from 'ng-zorro-antd/message';
 import { NzModalRef } from 'ng-zorro-antd/modal';
 import Viewer from 'viewerjs';
 @Component({
@@ -9,17 +11,47 @@ import Viewer from 'viewerjs';
 export class AppealDetailsComponent implements OnInit {
 
   @Input() data?: any;
-  constructor(private modal: NzModalRef) { }
-
+  constructor(private modal: NzModalRef, private http: HttpClient, private message: NzMessageService) { }
 
+  /**
+   * 申诉数据
+   */
+  appealData: any = {
+    appealAttachments: [],
+    handleUserName: '',
+    lastModificationTime: ''
+  }
   organizationName
   ngOnInit(): void {
     console.log('申诉详情', this.data)
-    // this.data.itemDataObj = JSON.parse(this.data.itemData)
+    if (this.data.auditType == 5) {
+
+      this.http.get('/api/services/app/ViolateRecord/Get', {
+        params: {
+          id: this.data.itemId
+        }
+      }).subscribe((data: any) => {
+        this.appealData = data.result
+        console.log('申诉预警详情', this.appealData)
+      })
+    }
   }
   destroyModal() {
     this.modal.destroy({ data: 'this the result data' });
   }
+  //获取文件格式
+  getFileType(name: string): string {
+    let suffix
+    if (name.substring(name.length - 4).includes('png') || name.substring(name.length - 4).includes('jpg') || name.substring(name.length - 4).includes('jpeg') || name.substring(name.length - 4).includes('webp')) {
+      suffix = 'img'
+    } else if (name.substring(name.length - 4).includes('doc') || name.substring(name.length - 4).includes('docx')) {
+      suffix = 'word'
+    } else if (name.substring(name.length - 4).includes('pdf')) {
+      suffix = 'pdf'
+    }
+    return suffix
+  }
+
   //查看图片
   viewImg(url) {
     let dom = document.getElementById(`viewerjs`)
@@ -39,4 +71,22 @@ export class AppealDetailsComponent implements OnInit {
       node.click();
     }, 0);
   }
+
+  //查看文件
+  lookFile(item) {
+    if (!item) {
+      return
+    }
+    if (this.getFileType(item) == 'word') {
+      let arr = item.split('.')
+      arr[arr.length - 1] = 'pdf'
+      window.open(arr.join('.'))
+    } else if (this.getFileType(item) == 'pdf') {
+      window.open(item)
+    } else if (this.getFileType(item) == 'img') {
+      this.viewImg(item)
+    } else {
+      this.message.create('warning', '暂不支持查看！');
+    }
+  }
 }

src/app/pages/audit/audit-ing/audit-dispose/audit-dispose.component.html

@@ -85,10 +85,18 @@
             <p>预警时间: &nbsp;&nbsp;{{data.itemData.ViolateTime | date:"yyyy-MM-dd HH:mm:ss"}}</p>
             <div class="cutoffrule"></div>
             <p>预警图片:</p>
-            <img (click)="viewImg(data.itemData.ViolateImage)" style="width: 100%;height: auto;"
-                [src]="data.itemData.ViolateImage" alt="">
+            <img (click)="viewImg(data.itemData.ViolateImage)" style="width: 100%;height: auto;color: #C4E2FC;"
+                [src]="data.itemData.ViolateImage" alt="预警图片">
+            <div class="cutoffrule"></div>
             <p>申诉说明: &nbsp;&nbsp;{{data.commitReason}}</p>
             <div class="cutoffrule"></div>
+            <div class="appealData">
+                <span class="name">申诉附件: </span>
+                <div class="filebox">
+                    <span (click)="lookFile(item)" *ngFor="let item of appealData.appealAttachments">{{item | fileName}}</span>
+                </div>
+            </div>
+            <div class="cutoffrule"></div>
         </div>
         <div class="cutoffrule"></div>
         <p [hidden]="data.getData.imageUrl === undefined">附件: &nbsp;&nbsp;

src/app/pages/audit/audit-ing/audit-dispose/audit-dispose.component.scss

@@ -89,3 +89,27 @@
     }
   }
 }
+
+.appealData {
+  display: flex;
+  color: #C4E2FC;
+
+  .name {
+    width: 12.5%;
+
+  }
+
+  .filebox {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    span{
+      margin-bottom: 3px;
+      cursor: pointer;
+    }
+    span:hover{
+      text-decoration: underline;
+    }
+  }
+}

src/app/pages/audit/audit-ing/audit-dispose/audit-dispose.component.ts

@@ -3,6 +3,7 @@ import { NzModalRef } from 'ng-zorro-antd/modal';
 import Viewer from 'viewerjs';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { handleType, handleTypeList } from 'src/app/pages/license/update-category/edit-update-category/edit-update-category.component';
+import { HttpClient } from '@angular/common/http';
 
 
 @Component({
@@ -13,12 +14,18 @@ import { handleType, handleTypeList } from 'src/app/pages/license/update-categor
 export class AuditDisposeComponent implements OnInit {
 
   @Input() data?: any;
-  constructor(private modal: NzModalRef, private message: NzMessageService) { }
+  constructor(private modal: NzModalRef, private message: NzMessageService, private http: HttpClient) { }
 
   textarea: string = ""; //审批意见
 
   role1 = []
   role2 = []
+  /**
+   * 申诉数据
+   */
+  appealData: any = {
+    appealAttachments: []
+  }
   ngOnInit(): void {
     console.log('审批信息', this.data)
     if (this.data.auditType == 4) {
@@ -30,7 +37,16 @@ export class AuditDisposeComponent implements OnInit {
         }
       });
     }
-    this.data.auditType
+    if (this.data.auditType == 5) {
+
+      this.http.get('/api/services/app/ViolateRecord/Get', {
+        params: {
+          id: this.data.itemId
+        }
+      }).subscribe((data: any) => {
+        this.appealData = data.result
+      })
+    }
   }
 
 
@@ -104,9 +120,13 @@ export class AuditDisposeComponent implements OnInit {
       window.open(arr.join('.'))
     } else if (this.getFileType(item) == 'pdf') {
       window.open(item)
+    } else if (this.getFileType(item) == 'img') {
+      this.viewImg(item)
     } else {
       this.message.create('warning', '暂不支持查看！');
     }
   }
 
+
+
 }

src/app/pages/home-page/home-page.component.html

@@ -3,7 +3,7 @@
         <div class="warningnumber">
             <img src="../../../assets/images/warningnum.png" alt="">
             <span class="num">{{totalCount}}</span>
-            <span class="today">今日预警</span>
+            <span class="today" (click)="getUnreadNotification()">今日预警</span>
         </div>
         <div class="inform">
             <div class="infologo">

src/app/pages/home/home.component.ts

@@ -216,7 +216,7 @@ export class HomeComponent implements OnInit {
   isVisible = false
   isConfirmLoading = false
   changePasswordPopup() {
-    this.isVisible = true
+    this.isVisible = false
   }
   handleOk(): void {
     console.log(this.passwordValidateForm)

src/app/pages/license/update-category/update-category.component.html

@@ -25,7 +25,7 @@
                     <!-- <th>是否年检</th>
                     <th>提交时间</th> -->
                     <th>审核状态</th>
-                    <th>预警状态</th>
+                    <!-- <th>预警状态</th> -->
                     <th>附件</th>
                     <th>操作</th>
                 </tr>
@@ -52,12 +52,12 @@
                     <td>
                         <span *ngIf="item.auditLog">{{item.auditLog.auditStatusDesc || ''}}</span>
                     </td>
-                    <td>
+                    <!-- <td>
                         <span *ngIf="item.licenseViolationType == 0">无</span>
                         <span *ngIf="item.licenseViolationType == 1">办理提醒</span>
                         <span *ngIf="item.licenseViolationType == 2">临期提醒</span>
                         <span *ngIf="item.licenseViolationType == 3">逾期报警</span>
-                    </td>
+                    </td> -->
                     <td>
                         <img *ngIf="item.imageUrl && getFileType(item.imageUrl) == 'img'" [src]="item.imageUrl"
                             (click)="viewImg(item.imageUrl)">

src/app/pages/pages.module.ts

@@ -79,7 +79,7 @@ import { AuditInformTimeComponent } from './audit/audit-inform-time/audit-inform
 import { AuditDisposeComponent } from './audit/audit-ing/audit-dispose/audit-dispose.component';
 import { EditInformTimeComponent } from './audit/audit-inform-time/edit-inform-time/edit-inform-time.component';
 import { AuditDetailsInformTimeComponent } from './audit/audit-inform-time/audit-details-inform-time/audit-details-inform-time.component';
-import { auditStatusPipe, handleState, licenseViolationType, notificationContent } from '../pipes/type.pipe';
+import { auditStatusPipe, handleState, licenseViolationType, notificationContent, fileName } from '../pipes/type.pipe';
 import { GasBaseInfoComponent } from './audit/gas-base-info/gas-base-info.component';
 import { AnnualInspectionComponent } from './audit/annual-inspection/annual-inspection.component';
 import { EditAnnualInspectionComponent } from './audit/annual-inspection/edit-annual-inspection/edit-annual-inspection.component';
@@ -92,7 +92,7 @@ import { AppealDetailsComponent } from './audit/audit-ing/appeal-details/appeal-
 @NgModule({
   declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent,
     TodayWarningAdminComponent, CriminalRecordsAdminComponent, LeftDomainComponent, EquipmentInfoComponent, OilStationInfoComponent,
-    AddequipmentComponent, EditequipmentComponent, PlanAdminComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, HomePageComponent, OilUnloadingProcessListComponent, ChangePasswordComponent, FacilitySortPipe, WarningStatisticsListComponent, DisposeequipmentComponent, NavBarComponent, InformComponent, UpdateCategoryComponent, FileCategoryComponent, HistoriesComponent, EditUpdateCategoryComponent, DetailsUpdateCategoryComponent, EditFileCategoryComponent, DetailsFileCategoryComponent, PdfWordLookComponent, OilStationListComponent, UpdateLicenseListComponent, FileLicenseListComponent, AuditNavComponent, AuditIngComponent, AuditRecordComponent, AuditInformTimeComponent, AuditDisposeComponent, EditInformTimeComponent, AuditDetailsInformTimeComponent, auditStatusPipe, GasBaseInfoComponent, notificationContent, licenseViolationType, handleState, AnnualInspectionComponent, EditAnnualInspectionComponent, RecordsNavComponent, UserDetailsComponent, AppealDetailsComponent],
+    AddequipmentComponent, EditequipmentComponent, PlanAdminComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, HomePageComponent, OilUnloadingProcessListComponent, ChangePasswordComponent, FacilitySortPipe, WarningStatisticsListComponent, DisposeequipmentComponent, NavBarComponent, InformComponent, UpdateCategoryComponent, FileCategoryComponent, HistoriesComponent, EditUpdateCategoryComponent, DetailsUpdateCategoryComponent, EditFileCategoryComponent, DetailsFileCategoryComponent, PdfWordLookComponent, OilStationListComponent, UpdateLicenseListComponent, FileLicenseListComponent, AuditNavComponent, AuditIngComponent, AuditRecordComponent, AuditInformTimeComponent, AuditDisposeComponent, EditInformTimeComponent, AuditDetailsInformTimeComponent, auditStatusPipe, GasBaseInfoComponent, notificationContent, licenseViolationType, handleState, AnnualInspectionComponent, EditAnnualInspectionComponent, RecordsNavComponent, UserDetailsComponent, AppealDetailsComponent, fileName],
 
 
   imports: [
@@ -136,7 +136,7 @@ import { AppealDetailsComponent } from './audit/audit-ing/appeal-details/appeal-
     NzToolTipModule,
     NzTimelineModule
   ],
-  entryComponents: [AddequipmentComponent, EditequipmentComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, ChangePasswordComponent, DisposeequipmentComponent, EditUpdateCategoryComponent, DetailsUpdateCategoryComponent, EditFileCategoryComponent, DetailsFileCategoryComponent, PdfWordLookComponent, AuditDisposeComponent, EditInformTimeComponent, AuditDetailsInformTimeComponent, GasBaseInfoComponent, EditAnnualInspectionComponent, UserDetailsComponent,AppealDetailsComponent],
+  entryComponents: [AddequipmentComponent, EditequipmentComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, ChangePasswordComponent, DisposeequipmentComponent, EditUpdateCategoryComponent, DetailsUpdateCategoryComponent, EditFileCategoryComponent, DetailsFileCategoryComponent, PdfWordLookComponent, AuditDisposeComponent, EditInformTimeComponent, AuditDetailsInformTimeComponent, GasBaseInfoComponent, EditAnnualInspectionComponent, UserDetailsComponent, AppealDetailsComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   exports: [auditStatusPipe]
 

src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.html

@@ -63,26 +63,23 @@
                         (nzOnCancel)="handleCancel()">
                         <textarea nz-input rows="2" placeholder="请输入申诉原因" name="appeal"
                             [(ngModel)]="appealValue"></textarea>
-                        <!-- <div class="appealUploadbox">
+                        <div class="appealUploadbox">
                             <div class="title">
                                 上传附件:
                             </div>
                             <div class="btn">
-                                <button nz-button>
+                                <button nz-button [nzLoading]="isLoadingSave">
                                     <span nz-icon nzType="upload"></span>上传
                                 </button>
+                                <input type="file" name="" id="" (change)="filechange($event)" *ngIf="!isLoadingSave">
                                 <ul>
-                                    <li>xxxx.docx</li>
-                                    <li>xxxx.docx</li>
-                                    <li>xxxx.docx</li>
-                                    <li>xxxx.docx</li>
-                                    <li>xxxx.docx</li>
-                                    <li>xxxx.docx</li>
-                                    <li>xxxx.docx</li>
-                                    <li>xxxx.docx</li>
+                                    <li *ngFor="let item of fileList;let key = index">
+                                        <span class="filename" (click)="lookfile(item)">{{item | fileName}}</span>
+                                        <span (click)="delete(fileList,key)">x</span>
+                                    </li>
                                 </ul>
                             </div>
-                        </div> -->
+                        </div>
                     </nz-modal>
                     <span
                         *ngIf="!data.handleTime && isMisinformation &&  (data.appealStatus == 0 || data.appealStatus == 3 || data.appealStatus == 4)"

src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss

@@ -104,18 +104,23 @@
   .title {
     display: flex;
     justify-content: space-between;
+    position: relative;
+
+
 
     .btn {
       display: flex;
       align-items: center;
-
+      
       span {
         margin: 0 4px;
         display: inline-block;
         // border: 1px solid red;
       }
 
-      span:first-child(1) {margin-right: 12px;}
+      span:first-child(1) {
+        margin-right: 12px;
+      }
     }
   }
 

src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.ts

@@ -5,6 +5,9 @@ import { DomSanitizer } from '@angular/platform-browser';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
 import { NzTreeModule } from 'ng-zorro-antd/tree';
+import { ObjectsSimpleService } from 'src/app/service/objectsSimple.service';
+import Viewer from 'viewerjs';
+
 @Component({
   selector: 'app-get-out-of-line-details',
   templateUrl: './get-out-of-line-details.component.html',
@@ -13,7 +16,7 @@ import { NzTreeModule } from 'ng-zorro-antd/tree';
 export class GetOutOfLineDetailsComponent implements OnInit {
   @Input() data: any
 
-  constructor(private fb: FormBuilder, private http: HttpClient, private message: NzMessageService, private modal: NzModalService, private initialModal: NzModalRef, private sanitizer: DomSanitizer) { }
+  constructor(private objectsSrv: ObjectsSimpleService, private fb: FormBuilder, private http: HttpClient, private message: NzMessageService, private modal: NzModalService, private initialModal: NzModalRef, private sanitizer: DomSanitizer) { }
 
 
   imgUrl: string
@@ -88,7 +91,104 @@ export class GetOutOfLineDetailsComponent implements OnInit {
       this.isMisinformation = false
     }
   }
+  fileList = []
+
+  isLoadingSave: boolean = false
+  uploadIndex: string
+  filechange(e) {
+    this.isLoadingSave = true
+    let file = e.target.files[0] || null //获取上传的文件
+    this.openFileSelect(file, `stationPhotos/${this.data.gasStation.id}/appealFile/${this.data.id}`)
+  }
+  //设置文件路径并上传
+  postFilePath
+  async openFileSelect(file: File, extensionPath: string) {
+    this.postFilePath = extensionPath;
+    let fileSize = file.size || null //上传文件的总大小
+    let shardSize = 5 * 1024 * 1024 //5MB 超过5MB要分块上传
+    if (fileSize >= shardSize) //  超过5MB要分块上传
+    {
+      await this.postFileByMul(file);
+    }
+    else //普通上传
+    {
+      await this.postFile(file);
+    }
+  }
+  //上传文件
+  async postFile(file: File) {
+    await new Promise((resolve, reject) => {
+      this.objectsSrv.postFile(this.postFilePath, file).subscribe(data => {
+        let dataObj = data as any;
+        let filePath: string = ObjectsSimpleService.baseUrl + dataObj.objectName;
+        this.fileList.push(filePath)
+        this.isLoadingSave = false
+        resolve('success')
+      });
+    })
+  }
 
+  /**
+   * 分块上传
+   * @param file 
+   */
+  postFileByMul(file: File) {
+    this.objectsSrv.postFile_MultipartUpload(this.postFilePath, file).then((value) => {
+      let dataObj = value as any;
+      let filePath = dataObj.filePath
+      this.fileList.push(filePath)
+      this.isLoadingSave = false
+    });
+
+  }
+
+  lookfile(item) {
+    if (!item) {
+      return
+    }
+    if (this.getFileType(item) == 'word') {
+      let arr = item.split('.')
+      arr[arr.length - 1] = 'pdf'
+      window.open(arr.join('.'))
+    } else if (this.getFileType(item) == 'pdf') {
+      window.open(item)
+    } else {
+      this.viewImg(item)
+    }
+  }
+
+  delete(fileList, key) {
+    this.modal.confirm({
+      nzTitle: `确定要删除这个文件吗?`,
+      nzOkText: '确定',
+      nzOkType: 'primary',
+      nzOnOk: () => {
+        fileList.splice(key, 1)
+      },
+      nzCancelText: '取消'
+    });
+
+  }
+
+  //查看图片
+  viewImg(url) {
+    let dom = document.getElementById(`viewerjs`)
+    let pObjs = dom.childNodes;
+    let node = document.createElement("img")
+    node.style.display = "none";
+    node.src = url;
+    node.id = 'img'
+    dom.appendChild(node)
+    setTimeout(() => {
+      let viewer = new Viewer(document.getElementById(`viewerjs`), {
+        hidden: () => {
+          dom.removeChild(pObjs[0]);
+          viewer.destroy();
+        }
+      });
+      node.click();
+    }, 0);
+  }
 
   //获取文件格式
   getFileType(name: string): string {
@@ -156,10 +256,13 @@ export class GetOutOfLineDetailsComponent implements OnInit {
     this.isAppeal = true
   }
   handleOk() {
-    this.http.post('/api/services/app/ViolateRecord/Appeal', null, {
+    let body = {
+      appealReason: this.appealValue,
+      appealAttachments: this.fileList
+    }
+    this.http.post('/api/services/app/ViolateRecord/Appeal', body, {
       params: {
-        id: this.data.id,
-        reason: this.appealValue
+        id: this.data.id
       }
     }).subscribe(data => {
       this.message.create('success', '申诉提交成功');

src/app/pipes/type.pipe.ts

@@ -33,4 +33,15 @@ export class handleState implements PipeTransform {
         let arr = ['未启动', '已启动', '已关闭', '已延期', '已忽略']
         return arr[value]
     }
-}
+}
+
+/**
+ * 文件后缀
+ */
+@Pipe({ name: 'fileName' })
+export class fileName implements PipeTransform {
+    transform(value: string): string {
+        let a = value.split('/')[value.split('/').length - 1]
+        return a
+    }
+}

src/theme.less

@@ -11,7 +11,7 @@
 }
 
 .yellowColor {
-  color: #FFBD4B!important;
+  color: #FFBD4B !important;
 }
 
 .greenColor {
@@ -288,6 +288,7 @@
 #detailsfilecategory {
   nz-form-item {
     margin-bottom: 0;
+
     input,
     select {
       color: rgba(145, 204, 255, 0.95) !important;
@@ -301,7 +302,8 @@
     background-color: #143c61;
   }
 
-  nz-select,textarea {
+  nz-select,
+  textarea {
     color: rgba(145, 204, 255, 0.95) !important;
   }
 
@@ -714,22 +716,55 @@
 }
 
 // 申诉上传
-.appealUploadbox{
+.appealUploadbox {
   display: flex;
   margin-top: 12px;
-  .title{
+
+  .title {
     margin-right: 6px;
+    width: 13%;
   }
-  .btn{
-    ul{
+
+  .btn {
+    position: relative;
+    flex: 1;
+    input {
+      opacity: 0;
+      width: 82px;
+      height: 32px;
+      position: absolute;
+      left: 0;
+      top: 0;
+      cursor: pointer;
+      z-index: 999;
+    }
+
+    ul {
       margin-top: 6px;
       margin-bottom: 0px;
-      li{
-        cursor: pointer;
-      }
-      li:hover{
-        text-decoration: underline;
+
+      li {
+
+        display: flex;
+        justify-content: space-between;
+
+        span {
+          cursor: pointer;
+        }
+
+        .filename {
+          flex: 1;
+          display: inline-block;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .filename:hover {
+          text-decoration: underline;
+          cursor: pointer;
+        }
       }
     }
   }
-}
+}