From 13a396c5e2bab53aa21e25d9a380f5d4f89061d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Thu, 22 Oct 2020 21:34:50 +0300
Subject: [PATCH] Project listing table col names

---
 .../project-listing-screen.component.html     | 99 ++++++++++---------
 .../project-listing-screen.component.scss     |  8 +-
 .../project-overview-screen.component.html    |  2 +-
 .../project-overview-screen.component.scss    |  5 -
 apps/red-ui/src/assets/i18n/en.json           | 11 +++
 .../src/assets/styles/red-page-layout.scss    |  5 +
 6 files changed, 73 insertions(+), 57 deletions(-)

diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
index 91f87587b..252e280a2 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
@@ -45,58 +45,63 @@
       </div>
     </div>
 
+    <div class="table-col-names">
+      <div class="flex-2 small-label min-width" translate="project-listing.table-col-names.name.label"></div>
+      <div class="flex-1 small-label min-width" translate="project-listing.table-col-names.owner.label"></div>
+      <div class="status small-label flex-end min-width"
+           translate="project-listing.table-col-names.status.label"></div>
+    </div>
+
     <div *ngIf="appStateService.allProjects?.length === 0 " translate="project-listing.no-projects.label"></div>
 
-    <div class="table-content">
-      <div *ngFor="let pw of appStateService.allProjects | sortBy:sortingOption.order:sortingOption.column"
-           [routerLink]="'/ui/projects/'+pw.project.projectId"
-           class="table-item pointer"
-      >
-        <div class="flex-2">
-          <div class="table-item-title table-item-title--large">
-            {{pw.project.projectName}}
-          </div>
-          <div class="small-label stats-subtitle">
-            <div>
-              <mat-icon svgIcon="red:document"></mat-icon>
-              {{documentCount(pw)}}</div>
-            <div>
-              <mat-icon svgIcon="red:user"></mat-icon>
-              {{userCount(pw)}}</div>
-            <div>
-              <mat-icon svgIcon="red:calendar"></mat-icon>
-              {{pw.project.date | date:'mediumDate'}}</div>
-          </div>
+    <div *ngFor="let pw of appStateService.allProjects | sortBy:sortingOption.order:sortingOption.column"
+         [routerLink]="'/ui/projects/'+pw.project.projectId"
+         class="table-item pointer"
+    >
+      <div class="flex-2">
+        <div class="table-item-title table-item-title--large">
+          {{pw.project.projectName}}
         </div>
-        <div class="flex-1">
-          <redaction-initials-avatar [username]="getOwnerName(pw)"
-                                     color="lightgray-red"
-                                     withName="true"
-          ></redaction-initials-avatar>
-        </div>
-        <div class="stats-bar">
-          <redaction-status-bar
-            [config]="[{ color: 'under-review', length: 2}, { length: 1, color: 'finished'}]"
-          ></redaction-status-bar>
+        <div class="small-label stats-subtitle">
+          <div>
+            <mat-icon svgIcon="red:document"></mat-icon>
+            {{documentCount(pw)}}</div>
+          <div>
+            <mat-icon svgIcon="red:user"></mat-icon>
+            {{userCount(pw)}}</div>
+          <div>
+            <mat-icon svgIcon="red:calendar"></mat-icon>
+            {{pw.project.date | date:'mediumDate'}}</div>
         </div>
+      </div>
+      <div class="flex-1">
+        <redaction-initials-avatar [username]="getOwnerName(pw)"
+                                   color="lightgray-red"
+                                   withName="true"
+        ></redaction-initials-avatar>
+      </div>
+      <div class="status">
+        <redaction-status-bar
+          [config]="[{ color: 'under-review', length: 2}, { length: 1, color: 'finished'}]"
+        ></redaction-status-bar>
+      </div>
 
-        <div class="action-buttons">
-          <button mat-icon-button color="accent" (click)="openDeleteProjectDialog($event,pw.project)"
-                  [matTooltip]="'project-listing.delete.action.label'|translate">
-            <mat-icon svgIcon="red:trash"></mat-icon>
-          </button>
-          <button mat-icon-button color="accent" (click)="openProjectDetailsDialog($event,pw)"
-                  [matTooltip]="'project-listing.report.action.label'|translate">
-            <mat-icon svgIcon="red:report"></mat-icon>
-          </button>
-          <!--          <button mat-icon-button (click)="editProject($event,pw.project)">-->
-          <!--            <mat-icon svgIcon="red:edit"></mat-icon>-->
-          <!--          </button>-->
-          <button color="accent" (click)="openAssignProjectOwnerDialog($event,pw.project)" mat-icon-button
-                  [matTooltip]="'project-listing.assign.action.label'|translate">
-            <mat-icon svgIcon="red:assign"></mat-icon>
-          </button>
-        </div>
+      <div class="action-buttons">
+        <button mat-icon-button color="accent" (click)="openDeleteProjectDialog($event,pw.project)"
+                [matTooltip]="'project-listing.delete.action.label'|translate">
+          <mat-icon svgIcon="red:trash"></mat-icon>
+        </button>
+        <button mat-icon-button color="accent" (click)="openProjectDetailsDialog($event,pw)"
+                [matTooltip]="'project-listing.report.action.label'|translate">
+          <mat-icon svgIcon="red:report"></mat-icon>
+        </button>
+        <!--          <button mat-icon-button (click)="editProject($event,pw.project)">-->
+        <!--            <mat-icon svgIcon="red:edit"></mat-icon>-->
+        <!--          </button>-->
+        <button color="accent" (click)="openAssignProjectOwnerDialog($event,pw.project)" mat-icon-button
+                [matTooltip]="'project-listing.assign.action.label'|translate">
+          <mat-icon svgIcon="red:assign"></mat-icon>
+        </button>
       </div>
     </div>
   </div>
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss
index 4465f680e..a15eff02b 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss
@@ -13,7 +13,7 @@
 
   .table-item {
     &:hover {
-      .stats-bar {
+      .status {
         display: none;
       }
     }
@@ -21,10 +21,10 @@
     .stats-subtitle {
       margin-top: 6px;
     }
+  }
 
-    .stats-bar, .action-buttons {
-      width: 160px;
-    }
+  .status, .action-buttons {
+    width: 160px;
   }
 }
 
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
index 1a67ac25b..d68ddd536 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
@@ -57,7 +57,7 @@
       <div class="flex-4 small-label min-width" translate="project-overview.table-col-names.added-on.label"></div>
       <div class="flex-2 small-label min-width" translate="project-overview.table-col-names.needs-work.label"></div>
       <div class="flex-2 small-label min-width" translate="project-overview.table-col-names.assigned-to.label"></div>
-      <div class="flex-1 small-label header-flex-end min-width"
+      <div class="flex-1 small-label flex-end min-width"
            translate="project-overview.table-col-names.status.label"></div>
     </div>
 
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss
index 200c9f7f6..8d4b215bf 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss
@@ -8,11 +8,6 @@
   min-width: 60px;
 }
 
-.header-flex-end {
-  display: flex;
-  justify-content: flex-end;
-}
-
 .select-all-container {
   display: flex;
   gap: 16px;
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index f8eee0c5c..8ba164166 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -176,6 +176,17 @@
         "label": "Recent"
       }
     },
+    "table-col-names": {
+      "name": {
+        "label": "Name"
+      },
+      "owner": {
+        "label": "Owner"
+      },
+      "status": {
+        "label": "Status"
+      }
+    },
     "stats": {
       "analyzed-pages": {
         "label": "Analyzed pages"
diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss
index 56b3d5d08..05c217ee7 100644
--- a/apps/red-ui/src/assets/styles/red-page-layout.scss
+++ b/apps/red-ui/src/assets/styles/red-page-layout.scss
@@ -76,6 +76,11 @@ html, body {
   display: flex !important;
 }
 
+.flex-end {
+  display: flex;
+  justify-content: flex-end;
+}
+
 .flex-1 {
   flex: 1;
 }