enterprises: smoother finances (fixes #6568) (#7713)

Co-authored-by: Mutugi <[email protected]> Co-authored-by: dogi <[email protected]>
open-learning-exchange · Nov 6, 2024 · b5c8e4d · b5c8e4d
1 parent 81819a8
commit b5c8e4d
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.15.35",
+  "version": "0.15.36",
   "myplanet": {
     "latest": "v0.20.86",
     "min": "v0.19.86"

diff --git a/src/app/teams/teams-view-finances.component.html b/src/app/teams/teams-view-finances.component.html
@@ -1,17 +1,21 @@
 <div class="action-buttons">
-  <button mat-raised-button color="primary" i18n (click)="openEditTransactionDialog()" *ngIf="editable">Add Transaction</button>
-  <mat-form-field>
-    <input matInput [matDatepicker]="dateFilterStart" [(ngModel)]="startDate" (dateInput)="transactionFilter()" i18n-placeholder placeholder="Pick Start Date">
-    <mat-datepicker-toggle matSuffix [for]="dateFilterStart"></mat-datepicker-toggle>
-    <mat-datepicker #dateFilterStart></mat-datepicker>
-  </mat-form-field>
-  <mat-form-field>
-    <input matInput [matDatepicker]="dateFilterEnd" [(ngModel)]="endDate" (dateInput)="transactionFilter()" i18n-placeholder placeholder="Pick End Date">
-    <mat-datepicker-toggle matSuffix [for]="dateFilterEnd"></mat-datepicker-toggle>
-    <mat-datepicker #dateFilterEnd></mat-datepicker>
-  </mat-form-field>
-  <button mat-raised-button color="primary" i18n (click)="resetDateFilter()" [disabled]="table.filter === ''">View All Transactions</button>
-  <button class="margin-lr-10" color="accent" mat-raised-button i18n (click)="exportTableData()" *ngIf="!emptyTable">Export Transactions</button>
+  <div class="transaction-buttons">
+    <button mat-raised-button color="primary" i18n (click)="openEditTransactionDialog()" *ngIf="editable">Add Transaction</button>
+    <button mat-raised-button color="primary" i18n (click)="resetDateFilter()" [disabled]="table.filter === ''">View All Transactions</button>
+    <button class="margin-lr-10" color="accent" mat-raised-button i18n (click)="exportTableData()" *ngIf="!emptyTable">Export Transactions</button>
+  </div>
+  <div class="transaction-date-fields">
+    <mat-form-field>
+      <input matInput [matDatepicker]="dateFilterStart" [(ngModel)]="startDate" (dateInput)="transactionFilter()" i18n-placeholder placeholder="Pick Start Date">
+      <mat-datepicker-toggle matSuffix [for]="dateFilterStart"></mat-datepicker-toggle>
+      <mat-datepicker #dateFilterStart></mat-datepicker>
+    </mat-form-field>
+    <mat-form-field>
+      <input matInput [matDatepicker]="dateFilterEnd" [(ngModel)]="endDate" (dateInput)="transactionFilter()" i18n-placeholder placeholder="Pick End Date">
+      <mat-datepicker-toggle matSuffix [for]="dateFilterEnd"></mat-datepicker-toggle>
+      <mat-datepicker #dateFilterEnd></mat-datepicker>
+    </mat-form-field>
+  </div>
 </div>
 <mat-card class="margin-lr" *ngIf="showBalanceWarning">
   <mat-icon color="accent">warning</mat-icon><span i18n>The current balance is negative!</span>

diff --git a/src/app/teams/teams-view-finances.scss b/src/app/teams/teams-view-finances.scss
@@ -2,9 +2,22 @@
   max-width: 100px;
 }
 
-.mat-card {
+.action-buttons {
   display: flex;
-  align-items: center;
+  flex-direction: column;
+}
+
+.transaction-buttons, .transaction-date-fields {
+  display: flex;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.transaction-buttons button {
+  white-space: nowrap;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 mat-row:first-of-type {
@@ -14,4 +27,4 @@ mat-row:first-of-type {
 .negative-balance {
   font-weight: bold;
   max-width: 100px;
-}
+}