Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: changed most of the scss to tailwind #236

Merged
merged 1 commit into from
Jul 5, 2024
Merged

refactor: changed most of the scss to tailwind #236

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 52 additions & 52 deletions libs/cases/frontend/view/src/lib/components/case-browse/case-browse.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="absolute top-20 right-4 !z-[50] flex flex-row-reverse gap-x-4">
<ix-button [routerLink]="['/cases/create']" icon="plus"> Create Case </ix-button>
<div class="absolute top-20 right-4 z-50 flex flex-row-reverse gap-x-4">
<ix-button [routerLink]="['/cases/create']" icon="plus"> Create Case </ix-button>
</div>

<ix-content-header
Expand All @@ -11,115 +11,115 @@
></ix-content-header>

<ix-content class="pb-16">
<div class="flex flex-col gap-y-2 pb-2">
<div class="flex gap-x-2">
<ix-toggle-button ghost class="toggle-pill" (pressedChange)="flipShowStatusOpen()"
<div class="flex flex-col gap-y-2 pb-2">
<div class="flex gap-x-2">
<ix-toggle-button ghost class="toggle-pill text-sm h-6 w-min rounded-2xl overflow-hidden" (pressedChange)="flipShowStatusOpen()"
[pressed]="showStatusOpen()" [variant]="showStatusOpen() ? 'Primary' : 'Secondary'"
>
open
</ix-toggle-button>
<ix-toggle-button ghost class="toggle-pill" (pressedChange)="flipShowStatusInProgress()"
<ix-toggle-button ghost class="toggle-pill text-sm h-6 w-min rounded-2xl overflow-hidden" (pressedChange)="flipShowStatusInProgress()"
[pressed]="showStatusInProgress()" [variant]="showStatusInProgress() ? 'Primary' : 'Secondary'"
>
in progress
in progress
</ix-toggle-button>
<ix-toggle-button ghost class="toggle-pill" (pressedChange)="flipShowStatusOnHold()"
<ix-toggle-button ghost class="toggle-pill text-sm h-6 w-min rounded-2xl overflow-hidden" (pressedChange)="flipShowStatusOnHold()"
[pressed]="showStatusOnHold()" [variant]="showStatusOnHold() ? 'Primary' : 'Secondary'"
>
on hold
</ix-toggle-button>
<ix-toggle-button ghost class="toggle-pill" (pressedChange)="flipShowStatusDone()"
on hold
</ix-toggle-button>
<ix-toggle-button ghost class="toggle-pill text-sm h-6 w-min rounded-2xl overflow-hidden" (pressedChange)="flipShowStatusDone()"
[pressed]="showStatusDone()" [variant]="showStatusDone() ? 'Primary' : 'Secondary'"
>
done
done
</ix-toggle-button>
<ix-toggle-button ghost class="toggle-pill" (pressedChange)="flipShowStatusOverdue()"
<ix-toggle-button ghost class="toggle-pill text-sm h-6 w-min rounded-2xl overflow-hidden" (pressedChange)="flipShowStatusOverdue()"
[pressed]="showStatusOverdue()" [variant]="showStatusOverdue() ? 'Primary' : 'Secondary'"
>
overdue
</ix-toggle-button>
<ix-toggle-button ghost class="toggle-pill" (pressedChange)="flipShowStatusCancelled()"
<ix-toggle-button ghost class="toggle-pill text-sm h-6 w-min rounded-2xl overflow-hidden" (pressedChange)="flipShowStatusCancelled()"
[pressed]="showStatusCancelled()" [variant]="showStatusCancelled() ? 'Primary' : 'Secondary'"
>
cancelled
</ix-toggle-button>
<ix-toggle-button ghost class="toggle-pill" (pressedChange)="flipShowStatusArchived()"
<ix-toggle-button ghost class="toggle-pill text-sm h-6 w-min rounded-2xl overflow-hidden" (pressedChange)="flipShowStatusArchived()"
[pressed]="showStatusArchived()" [variant]="showStatusArchived() ? 'Primary' : 'Secondary'"
>
archived
</ix-toggle-button>
</div>
</div>

<div class="flex gap-x-2">
<ix-toggle-button ghost class="toggle-pill" (pressedChange)="flipShowPriorityEmergency()"
<ix-toggle-button ghost class="toggle-pill text-sm h-6 w-min rounded-2xl overflow-hidden" (pressedChange)="flipShowPriorityEmergency()"
[pressed]="showPriorityEmergency()" [variant]="showPriorityEmergency() ? 'Primary' : 'Secondary'"
>
emergencies
</ix-toggle-button>
<ix-toggle-button ghost class="toggle-pill" (pressedChange)="flipShowPriorityHigh()"
<ix-toggle-button ghost class="toggle-pill text-sm h-6 w-min rounded-2xl overflow-hidden" (pressedChange)="flipShowPriorityHigh()"
[pressed]="showPriorityHigh()" [variant]="showPriorityHigh() ? 'Primary' : 'Secondary'"
>
high
</ix-toggle-button>
<ix-toggle-button ghost class="toggle-pill" (pressedChange)="flipShowPriorityMedium()"
<ix-toggle-button ghost class="toggle-pill text-sm h-6 w-min rounded-2xl overflow-hidden" (pressedChange)="flipShowPriorityMedium()"
[pressed]="showPriorityMedium()" [variant]="showPriorityMedium() ? 'Primary' : 'Secondary'"
>
medium
</ix-toggle-button>
<ix-toggle-button ghost class="toggle-pill" (pressedChange)="flipShowPriorityLow()"
<ix-toggle-button ghost class="toggle-pill text-sm h-6 w-min rounded-2xl overflow-hidden" (pressedChange)="flipShowPriorityLow()"
[pressed]="showPriorityLow()" [variant]="showPriorityLow() ? 'Primary' : 'Secondary'"
>
low
</ix-toggle-button>
</div>

<div class="flex gap-x-2">
<ix-toggle-button ghost class="toggle-pill" (pressedChange)="flipShowTypePlanned()"
<ix-toggle-button ghost class="toggle-pill text-sm h-6 w-min rounded-2xl overflow-hidden" (pressedChange)="flipShowTypePlanned()"
[pressed]="showTypePlanned()" [variant]="showTypePlanned() ? 'Primary' : 'Secondary'"
>
planned
</ix-toggle-button>
<ix-toggle-button ghost class="toggle-pill" (pressedChange)="flipShowTypeIncident()"
<ix-toggle-button ghost class="toggle-pill text-sm h-6 w-min rounded-2xl overflow-hidden" (pressedChange)="flipShowTypeIncident()"
[pressed]="showTypeIncident()" [variant]="showTypeIncident() ? 'Primary' : 'Secondary'"
>
incident
</ix-toggle-button>
<ix-toggle-button ghost class="toggle-pill" (pressedChange)="flipShowTypeAnnotation()"
<ix-toggle-button ghost class="toggle-pill text-sm h-6 w-min rounded-2xl overflow-hidden" (pressedChange)="flipShowTypeAnnotation()"
[pressed]="showTypeAnnotation()" [variant]="showTypeAnnotation() ? 'Primary' : 'Secondary'"
>
annotation
</ix-toggle-button>
</div>
</div>
</div>

<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Title</th>
<th scope="col">Status</th>
<th scope="col">Priority</th>
<th scope="col">Type</th>
<th scope="col">Due to</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
@for (_case of _sortedCases(); track _case.id) {
<tr
[routerLink]="['/cases', _case.id]"
class="clickable-row"
[ngClass]="getStatusClasses(_case)"
>
<th scope="row">{{ _case.handle }}</th>
<td>{{ _case.title }}</td>
<table class="table cursor-pointer">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Title</th>
<th scope="col">Status</th>
<th scope="col">Priority</th>
<th scope="col">Type</th>
<th scope="col">Due to</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
@for (_case of _sortedCases(); track _case.id) {
<tr
[routerLink]="['/cases', _case.id]"
class="clickable-row"
[ngClass]="getStatusClasses(_case)"
>
<th scope="row">{{ _case.handle }}</th>
<td>{{ _case.title }}</td>
<td>{{ _case.status }}</td>
<td>{{ _case.priority }}</td>
<td>{{ _case.priority }}</td>
<td>{{ _case.type }}</td>
<td>{{ _case.dueDate }}</td>
<td>{{ _case.description }}</td>
</tr>
}
</tbody>
</table>
<td>{{ _case.dueDate }}</td>
<td>{{ _case.description }}</td>
</tr>
}
</tbody>
</table>
</ix-content>
4 changes: 0 additions & 4 deletions libs/cases/frontend/view/src/lib/components/case-browse/case-browse.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
.table {
cursor: pointer;
& .emergency {
background-color: #ff26401a;
}
Expand All @@ -24,6 +23,3 @@
}
}

.toggle-pill {
@apply text-sm h-6 w-min rounded-2xl overflow-hidden;
}
118 changes: 58 additions & 60 deletions libs/cases/frontend/view/src/lib/components/detail-case/detail-case.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,82 +1,80 @@
@if(casedetail(); as _case){

<ix-button class="absolute top-20 right-32 !z-[50]" (click)="toggleEdit()">
{{ isEditing ? 'Submit changes' : 'Update Case' }}
</ix-button>
<ix-icon-button *ngIf="isEditing" class="absolute top-20 right-64 !z-[50] text-red-600" (click)="cancelEdit()" icon="cancel" iconColor="red">
Cancel
</ix-icon-button>
<ix-button class="absolute top-20 right-4 !z-[50]" (click)="deleting()">
Delete Case
</ix-button>
<ix-button class="absolute top-20 right-32 z-50" (click)="toggleEdit()">
{{ isEditing ? 'Submit changes' : 'Update Case' }}
</ix-button>
<ix-icon-button *ngIf="isEditing" class="absolute top-20 right-64 z-50 text-red-600" (click)="cancelEdit()" icon="cancel" iconColor="red">
Cancel
</ix-icon-button>
<ix-button class="absolute top-20 right-4 z-50" (click)="deleting()">
Delete Case
</ix-button>

<ix-content-header
class="pl-4 pt-4"
hasBackButton="true"
headerTitle="Details of Facility {{ _case.title }}"
headerSubtitle="View all facilities and their status"
(backButtonClick)="router.navigate(['../'], { relativeTo: route })"
></ix-content-header>
<ix-content-header
class="pl-4 pt-4"
hasBackButton="true"
headerTitle="Details of Facility {{ _case.title }}"
headerSubtitle="View all facilities and their status"
(backButtonClick)="router.navigate(['../'], { relativeTo: route })"
></ix-content-header>

<ix-content>
<ix-content>

<div class="container" >
<h1>_Case {{ _case.handle }} </h1>
<form class="form-content" #caseForm="ngForm">
<div class="form-group">
<label for="title">Title</label>
<input type="text" id="title" [(ngModel)]="_case.title" name="title" [readonly]="!isEditing">
<div class="container">
<h1 class="text-xl mb-5">_Case {{ _case.handle }}</h1>
<form class="form-content mb-52" #caseForm="ngForm">
<div class="form-group mb-4 flex flex-col">
<label for="title" class="mb-1 font-bold">Title</label>
<input type="text" id="title" [(ngModel)]="_case.title" name="title" [readonly]="!isEditing" class="w-full p-2 mb-1 rounded border-box">
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea id="description" [(ngModel)]="_case.description" name="description" rows="3" [readonly]="!isEditing"></textarea>
<div class="form-group mb-4 flex flex-col">
<label for="description" class="mb-1 font-bold">Description</label>
<textarea id="description" [(ngModel)]="_case.description" name="description" rows="3" [readonly]="!isEditing" class="w-full p-2 mb-1 rounded border-box"></textarea>
</div>
<div class="form-row">
<!-- TODO: change _case.modifiedBy to _case.assignedTo, when assignedTo is implemented in backend -->
<div class="form-group">
<label for="assignedTo">Assigned to</label>
<input type="email" id="assignedTo" [(ngModel)]="_case.modifiedBy" name="assignedTo" [readonly]="!isEditing">
<div class="form-row flex justify-between">
<div class="form-group mb-4 flex flex-col w-[48%]">
<label for="assignedTo" class="mb-1 font-bold">Assigned to</label>
<input type="email" id="assignedTo" [(ngModel)]="_case.modifiedBy" name="assignedTo" [readonly]="!isEditing" class="w-full p-2 mb-1 rounded border-box">
</div>
<div class="form-group">
<label for="dueDate">Due date (UTC)</label>
<input type="text" id="dueDate" [(ngModel)]="_case.dueDate" name="dueDate" [readonly]="!isEditing">
<label *ngIf="_case.overdue" [style.color]="'red'">Overdue</label>
<div class="form-group mb-4 flex flex-col w-[48%]">
<label for="dueDate" class="mb-1 font-bold">Due date (UTC)</label>
<input type="text" id="dueDate" [(ngModel)]="_case.dueDate" name="dueDate" [readonly]="!isEditing" class="w-full p-2 mb-1 rounded border-box">
<label *ngIf="_case.overdue" class="text-red-500">Overdue</label>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="asset">Asset</label>
<input type="text" id="asset" [(ngModel)]="_case.source" name="asset" [readonly]="!isEditing">
<div class="form-row flex justify-between">
<div class="form-group mb-4 flex flex-col w-[48%]">
<label for="asset" class="mb-1 font-bold">Asset</label>
<input type="text" id="asset" [(ngModel)]="_case.source" name="asset" [readonly]="!isEditing" class="w-full p-2 mb-1 rounded border-box">
</div>
<div class="form-group">
<label for="type">Type</label>
<input type="text" id="type" [(ngModel)]="_case.type" name="type" [readonly]="!isEditing">
<div class="form-group mb-4 flex flex-col w-[48%]">
<label for="type" class="mb-1 font-bold">Type</label>
<input type="text" id="type" [(ngModel)]="_case.type" name="type" [readonly]="!isEditing" class="w-full p-2 mb-1 rounded border-box">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="priority">Priority</label>
<input type="text" id="priority" [(ngModel)]="_case.priority" name="priority" [readonly]="!isEditing">
<div class="form-row flex justify-between">
<div class="form-group mb-4 flex flex-col w-[48%]">
<label for="priority" class="mb-1 font-bold">Priority</label>
<input type="text" id="priority" [(ngModel)]="_case.priority" name="priority" [readonly]="!isEditing" class="w-full p-2 mb-1 rounded border-box">
</div>
<div class="form-group">
<label for="status">Status</label>
<input type="text" id="status" [(ngModel)]="_case.status" name="status" [readonly]="!isEditing">
<div class="form-group mb-4 flex flex-col w-[48%]">
<label for="status" class="mb-1 font-bold">Status</label>
<input type="text" id="status" [(ngModel)]="_case.status" name="status" [readonly]="!isEditing" class="w-full p-2 mb-1 rounded border-box">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label *ngIf="!isEditing" for="createdBy">Created by</label>
<input *ngIf="!isEditing" type="text" id="createdBy" [(ngModel)]="_case.createdBy" name="createdBy" readonly>
<label for="modifiedBy" *ngIf="isEditing">Modified by</label>
<input *ngIf="isEditing" type="text" id="modifiedBy" [(ngModel)]="_case.modifiedBy" name="modifiedBy">

<div class="form-row flex justify-between">
<div class="form-group mb-4 flex flex-col w-[48%]">
<label *ngIf="!isEditing" for="createdBy" class="font-normal">Created by</label>
<input *ngIf="!isEditing" type="text" id="createdBy" [(ngModel)]="_case.createdBy" name="createdBy" readonly class="w-full p-2 mb-1 rounded border-box">
<label for="modifiedBy" *ngIf="isEditing" class="font-bold">Modified by</label>
<input *ngIf="isEditing" type="text" id="modifiedBy" [(ngModel)]="_case.modifiedBy" name="modifiedBy" class="w-full p-2 mb-1 rounded border-box">
</div>
<div class="form-group">
<label for="createdDate">Creation date</label>
<input type="text" id="createdDate" [(ngModel)]="_case.createdAt" name="createdDate" readonly>
<div class="form-group mb-4 flex flex-col w-[48%]">
<label for="createdDate" class="mb-1 font-bold">Creation date</label>
<input type="text" id="createdDate" [(ngModel)]="_case.createdAt" name="createdDate" readonly class="w-full p-2 mb-1 rounded border-box">
</div>
</div>
</form>
</div>
</ix-content>
</ix-content>
}
70 changes: 0 additions & 70 deletions libs/cases/frontend/view/src/lib/components/detail-case/detail-case.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,70 +0,0 @@
h1 {
font-size: 1.5em;
margin-bottom: 20px;
}

.form-group {
margin-bottom: 15px;
display: flex;
flex-direction: column;
}

.form-group label {
margin-bottom: 5px;
font-weight: bold;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group select,
.form-group textarea,
.form-group input[type="date"],
.form-group input[type="file"] {
width: 100%;
padding: 8px;
margin-bottom: 5px;
border-radius: 4px;
box-sizing: border-box;
}

.form-row {
display: flex;
justify-content: space-between;
}

.form-row .form-group {
width: 48%;
}

.checkbox-group {
margin-bottom: 10px;
}

.checkbox-group label {
font-weight: normal;
}

.button-group {
display: flex;
justify-content: flex-end;
}

button {
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-left: 10px;
}

.btn-primary {
background-color: #007bff;
}

.btn-secondary {
background-color: #6c757d;
}

.form-content {
margin-bottom: 200px;
}