@@ -17,13 +17,25 @@
|
||||
</div>
|
||||
<div class="vc-header__actions">
|
||||
@if (!codeData.systemDefined) {
|
||||
<button mat-flat-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_CODE'" class="vc-header__btn">
|
||||
<button
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
[routerLink]="['edit']"
|
||||
*mifosxHasPermission="'UPDATE_CODE'"
|
||||
class="vc-header__btn"
|
||||
>
|
||||
<fa-icon icon="edit" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Edit Code' | translate }}
|
||||
</button>
|
||||
}
|
||||
@if (!codeData.systemDefined) {
|
||||
<button mat-stroked-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_CODEVALUE'" class="vc-header__btn-delete">
|
||||
<button
|
||||
mat-stroked-button
|
||||
color="warn"
|
||||
(click)="delete()"
|
||||
*mifosxHasPermission="'DELETE_CODEVALUE'"
|
||||
class="vc-header__btn-delete"
|
||||
>
|
||||
<fa-icon icon="trash" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Delete Code' | translate }}
|
||||
</button>
|
||||
@@ -88,11 +100,20 @@
|
||||
|
||||
<!-- Table Rows -->
|
||||
@for (codeValue of codeValues.controls; track codeValue; let i = $index) {
|
||||
<div formArrayName="codeValues" class="vc-values-row" [class.vc-values-row--editing]="codeValueRowStatus[i] !== 'disabled'">
|
||||
<div
|
||||
formArrayName="codeValues"
|
||||
class="vc-values-row"
|
||||
[class.vc-values-row--editing]="codeValueRowStatus[i] !== 'disabled'"
|
||||
>
|
||||
<div [formGroupName]="i" class="vc-values-row__inner">
|
||||
<div class="vc-values-col vc-values-col--name">
|
||||
<mat-form-field appearance="outline" class="vc-inline-field">
|
||||
<input required matInput formControlName="name" placeholder="{{ 'labels.inputs.name' | translate }}" />
|
||||
<input
|
||||
required
|
||||
matInput
|
||||
formControlName="name"
|
||||
placeholder="{{ 'labels.inputs.name' | translate }}"
|
||||
/>
|
||||
@if (codeValues.at(i).controls.name.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
@@ -103,12 +124,23 @@
|
||||
</div>
|
||||
<div class="vc-values-col vc-values-col--desc">
|
||||
<mat-form-field appearance="outline" class="vc-inline-field">
|
||||
<input matInput formControlName="description" placeholder="{{ 'labels.inputs.Description' | translate }}" />
|
||||
<input
|
||||
matInput
|
||||
formControlName="description"
|
||||
placeholder="{{ 'labels.inputs.Description' | translate }}"
|
||||
/>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="vc-values-col vc-values-col--pos">
|
||||
<mat-form-field appearance="outline" class="vc-inline-field">
|
||||
<input required matInput formControlName="position" type="number" min="0" placeholder="{{ 'labels.inputs.Position' | translate }}" />
|
||||
<input
|
||||
required
|
||||
matInput
|
||||
formControlName="position"
|
||||
type="number"
|
||||
min="0"
|
||||
placeholder="{{ 'labels.inputs.Position' | translate }}"
|
||||
/>
|
||||
@if (codeValues.at(i).controls.position.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Position' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
|
||||
@@ -73,9 +73,14 @@ $gray-900: #202124;
|
||||
border-color: $border !important;
|
||||
color: $gray-500 !important;
|
||||
|
||||
i { margin-right: 6px; }
|
||||
i {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
&:hover { color: $primary !important; border-color: $primary !important; }
|
||||
&:hover {
|
||||
color: $primary !important;
|
||||
border-color: $primary !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Card
|
||||
@@ -125,7 +130,9 @@ $gray-900: #202124;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
|
||||
&:last-child { border-bottom: none; }
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&__label {
|
||||
flex: 0 0 40%;
|
||||
@@ -149,10 +156,17 @@ $gray-900: #202124;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
|
||||
i { font-size: 11px; }
|
||||
i {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
&--yes { color: #16a34a; }
|
||||
&--no { color: #dc2626; }
|
||||
&--yes {
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
&--no {
|
||||
color: #dc2626;
|
||||
}
|
||||
}
|
||||
|
||||
// Add button in section header
|
||||
@@ -192,9 +206,17 @@ $gray-900: #202124;
|
||||
min-width: 700px;
|
||||
transition: background 0.1s;
|
||||
|
||||
&:last-child { border-bottom: none; }
|
||||
&:nth-child(even) { background: #fafbfc; }
|
||||
&:hover { background: #f8fafc; }
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
background: #fafbfc;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
&--editing {
|
||||
background: #eff6ff !important;
|
||||
@@ -208,10 +230,26 @@ $gray-900: #202124;
|
||||
}
|
||||
|
||||
.vc-values-col {
|
||||
&--name { flex: 0 0 22%; padding-right: 8px; }
|
||||
&--desc { flex: 0 0 26%; padding-right: 8px; }
|
||||
&--pos { flex: 0 0 14%; padding-right: 8px; }
|
||||
&--active { flex: 0 0 12%; padding-right: 8px; }
|
||||
&--name {
|
||||
flex: 0 0 22%;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
&--desc {
|
||||
flex: 0 0 26%;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
&--pos {
|
||||
flex: 0 0 14%;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
&--active {
|
||||
flex: 0 0 12%;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
&--actions {
|
||||
flex: 0 0 26%;
|
||||
display: flex;
|
||||
@@ -225,7 +263,9 @@ $gray-900: #202124;
|
||||
width: 100%;
|
||||
|
||||
::ng-deep {
|
||||
.mat-mdc-form-field-flex { height: 36px; }
|
||||
.mat-mdc-form-field-flex {
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-infix {
|
||||
padding: 4px 0;
|
||||
@@ -233,11 +273,18 @@ $gray-900: #202124;
|
||||
}
|
||||
|
||||
.mdc-notched-outline {
|
||||
.mdc-notched-outline__leading { border-radius: 6px 0 0 6px; }
|
||||
.mdc-notched-outline__trailing { border-radius: 0 6px 6px 0; }
|
||||
.mdc-notched-outline__leading {
|
||||
border-radius: 6px 0 0 6px;
|
||||
}
|
||||
|
||||
.mdc-notched-outline__trailing {
|
||||
border-radius: 0 6px 6px 0;
|
||||
}
|
||||
}
|
||||
|
||||
input { font-size: 13px; }
|
||||
input {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -272,7 +319,7 @@ $gray-900: #202124;
|
||||
}
|
||||
|
||||
// Responsive
|
||||
@media (max-width: 768px) {
|
||||
@media (width <= 768px) {
|
||||
.vc-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
Reference in New Issue
Block a user