Skip to content

Commit

Permalink
Updated the partner domain & change the upload file format in upload…
Browse files Browse the repository at this point in the history 
… ca certificate

Signed-off-by: GOKULRAJ136 <[email protected]>
  • Loading branch information
@GOKULRAJ136
GOKULRAJ136 committed Oct 20, 2023
1 parent 1666c4b commit 678c064
Show file tree
Hide file tree
Showing 2 changed files with 176 additions and 27 deletions.
60 changes: 54 additions & 6 deletions pmp-ui/src/app/features/resources/cert-upload/cert-upload.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,19 +19,67 @@ <h3 *ngIf="!showCALabel">{{'uploadcertificate.title' | translate}}</h3>
<div [formGroup]="createForm" class="primary-form" *ngIf="createForm">
<mat-form-field>
<mat-label>{{'uploadcertificate.partnerDomain' | translate}}</mat-label>
<mat-select formControlName="partnerDomain" required>
<mat-select id="partnerDomain" formControlName="partnerDomain" required>
<mat-option
*ngFor="let data of partnerDomain"
[id]="data"
[value]="data"
>
{{ data}}
</mat-option>
</mat-select>
</mat-form-field>
<div class="custom-file-input">
<input type="button" value="{{'uploadcertificate.chooseFile' | translate}}" class="browseInput">
<input type="file" #fileInput (change)="onFileSelect($event)" placeholder="Upload file..." />
<input type="text" [value]="fileName" placeholder="{{'uploadcertificate.uploadYourFile' | translate}} *">
<!-- <div class="custom-file-input" id="custom-file-input">
<input id="custom-file-input-button" type="button" value="{{'uploadcertificate.chooseFile' | translate}}" class="browseInput">
<input id="custom-file-input-file" type="file" #fileInput (change)="onFileSelect($event)" placeholder="Upload file..." />
<input id="custom-file-input-fileName" type="text" [value]="fileName" placeholder="{{'uploadcertificate.uploadYourFile' | translate}} *">
</div> -->
<label class="labelfileupload">{{'uploadcertificate.uploadYourFile' | translate}} <span style="color:red;">*</span></label>
<div class="container" appDnd (fileDropped)="onFileDropped($event)" id="custom-file-input">
<input (click)="$event.target.value=null" type="file" #fileInput id="fileInput" (change)="onFileSelect($event)"/>
<label style="margin-right: 1rem;display: flex;" for="fileInput">
<svg id="upload_icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24.042"
viewBox="0 0 24 24.042">
<g id="Group_13" data-name="Group 13" transform="translate(3 2.504)">
<path id="Path_988" data-name="Path 988"
d="M13,11.337l2.59,2.585L17,12.509,12,7.5,7,12.509l1.41,1.412L11,11.337v9.687h2Z"
transform="translate(-3 -7.5)" fill="#FF4081" />
<path id="Path_2004" data-name="Path 2004"
d="M19,3v7.012H5V3H3v7.012a2.008,2.008,0,0,0,2,2H19a2.008,2.008,0,0,0,2-2V3Z"
transform="translate(-3 6.517)" fill="#FF4081" />
</g>
<path id="Path_989" data-name="Path 989" d="M0,24.042H24V0H0Z" fill="none" />
</svg>
<span style="margin-top: 4px;padding-left: 5px; font-size: 14px; font-weight: 600;">{{'uploadcertificate.chooseFile' | translate}}</span>
</label>
</div>

<div class="files-list">
<div class="single-file" *ngFor="let file of files; let i = index">
<div class="file-icon" style="width: 50px">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 58 58"
style="enable-background:new 0 0 58 58;" xml:space="preserve">
<polygon style="fill:#EDEADA;" points="51.5,14 37.5,0 6.5,0 6.5,58 51.5,58 " />
<g>
<path style="fill:#CEC9AE;"
d="M16.5,23h25c0.552,0,1-0.447,1-1s-0.448-1-1-1h-25c-0.552,0-1,0.447-1,1S15.948,23,16.5,23z" />
<path style="fill:#CEC9AE;"
d="M16.5,15h10c0.552,0,1-0.447,1-1s-0.448-1-1-1h-10c-0.552,0-1,0.447-1,1S15.948,15,16.5,15z" />
<path style="fill:#CEC9AE;"
d="M41.5,29h-25c-0.552,0-1,0.447-1,1s0.448,1,1,1h25c0.552,0,1-0.447,1-1S42.052,29,41.5,29z" />
<path style="fill:#CEC9AE;"
d="M41.5,37h-25c-0.552,0-1,0.447-1,1s0.448,1,1,1h25c0.552,0,1-0.447,1-1S42.052,37,41.5,37z" />
<path style="fill:#CEC9AE;"
d="M41.5,45h-25c-0.552,0-1,0.447-1,1s0.448,1,1,1h25c0.552,0,1-0.447,1-1S42.052,45,41.5,45z" />
</g>
<polygon style="fill:#CEC9AE;" points="37.5,0 37.5,14 51.5,14 " />
</svg>
</div>
<div class="info">
<h4 class="name">{{file?.name}}</h4>
</div>
</div>
</div>
</div>
</mat-card-content>
Expand All @@ -50,4 +98,4 @@ <h3 *ngIf="!showCALabel">{{'uploadcertificate.title' | translate}}</h3>
</mat-card>
</div>
</div>
</div>
</div>
143 changes: 122 additions & 21 deletions pmp-ui/src/app/features/resources/cert-upload/cert-upload.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
font-size: 12.5px;
position: absolute;
margin-top: 20px;
}
}

.breadcrumb > a {
text-decoration: none;
Expand All @@ -25,7 +25,7 @@
@media (max-width: 768px) {
margin-right: 0px !important;
margin-left: 0px !important;
}
}
}
.mat-card-content {
margin-top: 5px !important;
Expand All @@ -42,60 +42,60 @@
&::-webkit-scrollbar {
width: 0px;
background: transparent;
}
.header {
}
.header {
border-bottom: 1px solid #c6c6c6 !important;
font-family: "Roboto", sans-serif;
font-size: 14px;
.mat-card-header-text {
.mat-card-header-text {
margin: 0px;
}
b {
margin-bottom: 5px;
color: #c6c6c6;
}
}
.content {
}
.content {
display: flex;
justify-content: space-between;
font-family: "Roboto", sans-serif;
font-size: 12px;
margin-top: 2px;
cursor: pointer;
span {
span {
display: inline-block;
vertical-align: middle;
}
}
.content:hover{
}
.content:hover{
background-color: #FFE6EE;
border-radius: 3px;
}
}

@media (max-width: 768px) {
@media (max-width: 768px) {
flex-direction: column;
}
.item1 {
}
.item1 {
flex: 1;
margin: 0px 10px !important;
@media (max-width: 768px) {
margin-right: 0px !important;
margin-left: 0px !important;
margin-bottom: 10px !important;
}

mat-card {
}
mat-card {
height: calc(100% + 3px);
}
}
.sub-items {
}
.sub-items {
flex-direction: column;
.sub-item1,
.sub-item2,
.sub-item3 {
margin-bottom: 15px;
margin-bottom: 15px;
}
}
}
}

.browseInput {
Expand Down Expand Up @@ -139,4 +139,105 @@
}
.mat-form-field{
padding:10px;
}

.container {
height: 105px;
padding: 2rem;
border: dashed 1px #FF4081;
background-color: #f1b5c9;
position: relative;
display: flex;
border-radius: 5px;
justify-content: center;
align-items: center;
overflow: hidden;
margin-left: 8px;
margin-top: 10px;
}
.container input {
opacity: 0;
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.container label {
color: #FF4081;
width: 148px;
height: 44px;
border-radius: 5px;
background: #FFFFFF;
padding: 10px;
border: 1px solid #CCCCCC;
/*display: flex;*/
font-size: 12px;
font-weight: 200;
}
.container h3 {
font-size: 16px;
color: #FF4081;
padding-left: 3px;
padding-top: 7px;
font-weight: 600;
}

.fileover {
animation: shake 1s;
animation-iteration-count: infinite;
}
.files-list {
margin-top: 1.5rem;
}
.files-list .single-file {
display: flex;
padding: 0.5rem;
justify-content: space-between;
align-items: center;
border: dashed 1px #FF4081;
margin-bottom: 1rem;
flex-grow: 1;
margin-left: 8px;
}
.files-list .single-file .preview {
display: flex;
margin-left: 0.5rem;
cursor: pointer;
align-self: flex-end;
}
.files-list .single-file .delete {
display: flex;
margin-left: 0.5rem;
cursor: pointer;
align-self: flex-end;
}
.files-list .single-file .name {
font-size: 14px;
font-weight: 500;
color: #353f4a;
margin: 0;
}
.files-list .single-file .size {
font-size: 12px;
font-weight: 500;
color: #a4a4a4;
margin: 0;
margin-bottom: 0.25rem;
}
.files-list .single-file .info {
width: 100%;
}

.preview-heading{
color: #505050;
font-weight: 600;
}

.labelfileupload {
font-size: 12px;
font-weight: 500;
margin-left: 8px;
color: rgba(0, 0, 0, 0.54);
}

0 comments on commit 678c064

Please sign in to comment.