src/app/modules/certificate/components/create-template/create-template.component.ts
OnInit
OnDestroy
| selector | app-create-template |
| styleUrls | ./create-template.component.scss |
| templateUrl | ./create-template.component.html |
constructor(uploadCertificateService: UploadCertificateService, userService: UserService, sanitizer: DomSanitizer, activatedRoute: ActivatedRoute, certRegService: CertRegService, toasterService: ToasterService, resourceService: ResourceService, navigationHelperService: NavigationHelperService, layoutService: LayoutService)
|
||||||||||||||||||||||||||||||
|
Parameters :
|
| assetData | ||||
assetData(data)
|
||||
|
Parameters :
Returns :
void
|
| back |
back()
|
|
Returns :
void
|
| certificateCreation | ||||
certificateCreation(ev)
|
||||
|
Parameters :
Returns :
void
|
| chooseCertificate | ||||
chooseCertificate(certificate)
|
||||
|
Parameters :
Returns :
void
|
| close |
close()
|
|
Returns :
void
|
| convertHtml | ||||
convertHtml(tag)
|
||||
|
Parameters :
Returns :
any
|
| createCertTemplate |
createCertTemplate()
|
|
Returns :
void
|
| editSVG | ||||||
editSVG(logosArray, stateLogos)
|
||||||
|
Parameters :
Returns :
any
|
| getBase64Data | ||||
getBase64Data(ev)
|
||||
|
Parameters :
Returns :
string
|
| getDefaultTemplates |
getDefaultTemplates()
|
|
Returns :
void
|
| getImagePath |
getImagePath()
|
|
Returns :
any
|
| getSVGTemplate |
getSVGTemplate()
|
|
Returns :
void
|
| initializeFormFields |
initializeFormFields()
|
|
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| openSateLogos | ||||
openSateLogos(type)
|
||||
|
Parameters :
Returns :
void
|
| openSignLogos | ||||
openSignLogos(type)
|
||||
|
Parameters :
Returns :
void
|
| previewCertificate |
previewCertificate()
|
|
Returns :
void
|
| redoLayout |
redoLayout()
|
|
Returns :
void
|
| removeImage | ||||
removeImage(key)
|
||||
|
Parameters :
Returns :
void
|
| sanitizeHTML | ||||
sanitizeHTML(html)
|
||||
|
Parameters :
Returns :
any
|
| toDataURL | ||||
toDataURL(image)
|
||||
|
Parameters :
Returns :
any
|
| updateSigns | ||||
updateSigns(stateLogos)
|
||||
|
Parameters :
Returns :
void
|
| updateStateLogos | ||||
updateStateLogos(stateLogos)
|
||||
|
Parameters :
Returns :
void
|
| updateTitles |
updateTitles()
|
|
Returns :
void
|
| uploadTemplate | ||||||
uploadTemplate(base64Url, identifier)
|
||||||
|
Parameters :
Returns :
void
|
| urltoFile | ||||||||
urltoFile(url, filename, mimeType)
|
||||||||
|
Parameters :
Returns :
any
|
| validateForm |
validateForm()
|
|
Returns :
void
|
| Public browseImage |
Type : BrowseImagePopupComponent
|
Decorators :
@ViewChild(BrowseImagePopupComponent)
|
| center |
Type : number
|
Default value : 275
|
| certConfigModalInstance |
Default value : new CertConfigModel()
|
| certLogos |
Type : any
|
Default value : []
|
| certSigns |
Type : any
|
Default value : []
|
| classNames |
Type : object
|
Default value : {
'STATE_LOGOS': 'state-logo',
'STATE_TITLE': 'state-title',
'SIGN_LOGO': ['signatureImg1', 'signatureImg2'],
'CERT_TITLE': 'cert-title',
'DESIGNATIONS_NAMES': ['signatureTitle1', 'signatureTitle2'],
'DESIGNATIONS': ['signatureTitle1a', 'signatureTitle2a']
}
|
| createTemplateForm |
Type : UntypedFormGroup
|
| defaultCertificates |
Type : []
|
Default value : []
|
| disableCreateTemplate |
Default value : true
|
| finalSVGurl |
Type : any
|
| FIRST_PANEL_LAYOUT |
| images |
Type : object
|
Default value : {
'LOGO1': { 'index': null, 'name' : '' , 'key': '', 'type': '', 'url': ''},
'LOGO2': { 'index': null, 'name' : '' , 'key': '', 'type': '', 'url': ''},
'SIGN1': { 'index': null, 'name' : '' , 'key': '', 'type': '', 'url': ''},
'SIGN2': { 'index': null, 'name' : '' , 'key': '', 'type': '', 'url': ''}
}
|
| layoutConfiguration |
Type : any
|
| Public layoutService |
Type : LayoutService
|
| logoHtml |
| logoType |
| mode |
Type : any
|
| Public navigationHelperService |
Type : NavigationHelperService
|
| optionSing |
Type : string
|
Default value : 'SIGN2'
|
| queryParams |
Type : any
|
| Public resourceService |
Type : ResourceService
|
| SECOND_PANEL_LAYOUT |
| selectedCertificate |
Type : any
|
Default value : {}
|
| selectLanguage |
Type : any
|
| selectLanguageOption |
Type : any
|
Default value : []
|
| selectState |
Type : any
|
| selectStateOption |
Type : any
|
Default value : []
|
| showSelectImageModal |
| showUploadUserModal |
| svgData |
| Public toasterService |
Type : ToasterService
|
| Public unsubscribe$ |
Default value : new Subject<void>()
|
| Public uploadCertificateService |
Type : UploadCertificateService
|
| Public userService |
Type : UserService
|
import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
import * as _ from 'lodash-es';
import { UploadCertificateService } from '../../services/upload-certificate/upload-certificate.service';
import { UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
import { UserService, CertRegService } from '@sunbird/core';
import { ToasterService, ResourceService, NavigationHelperService, LayoutService, COLUMN_TYPE } from '@sunbird/shared';
import { DomSanitizer } from '@angular/platform-browser';
import { CertConfigModel } from './../../models/cert-config-model/cert-config-model';
import { BrowseImagePopupComponent } from '../browse-image-popup/browse-image-popup.component';
import {ActivatedRoute} from '@angular/router';
import dayjs from 'dayjs';
@Component({
selector: 'app-create-template',
templateUrl: './create-template.component.html',
styleUrls: ['./create-template.component.scss']
})
export class CreateTemplateComponent implements OnInit, OnDestroy {
@ViewChild(BrowseImagePopupComponent)
public browseImage: BrowseImagePopupComponent;
public unsubscribe$ = new Subject<void>();
createTemplateForm: UntypedFormGroup;
selectStateOption: any = [];
selectLanguageOption: any = [];
selectState: any;
selectLanguage: any;
showSelectImageModal;
showUploadUserModal;
certLogos: any = [];
certSigns: any = [];
logoType;
// api call
defaultCertificates = [];
selectedCertificate: any = {};
logoHtml;
svgData;
center = 275;
disableCreateTemplate = true;
certConfigModalInstance = new CertConfigModel();
layoutConfiguration: any;
FIRST_PANEL_LAYOUT;
SECOND_PANEL_LAYOUT;
images = {
'LOGO1': { 'index': null, 'name' : '' , 'key': '', 'type': '', 'url': ''},
'LOGO2': { 'index': null, 'name' : '' , 'key': '', 'type': '', 'url': ''},
'SIGN1': { 'index': null, 'name' : '' , 'key': '', 'type': '', 'url': ''},
'SIGN2': { 'index': null, 'name' : '' , 'key': '', 'type': '', 'url': ''}
};
finalSVGurl: any;
classNames = {
'STATE_LOGOS': 'state-logo',
'STATE_TITLE': 'state-title',
'SIGN_LOGO': ['signatureImg1', 'signatureImg2'],
'CERT_TITLE': 'cert-title',
'DESIGNATIONS_NAMES': ['signatureTitle1', 'signatureTitle2'],
'DESIGNATIONS': ['signatureTitle1a', 'signatureTitle2a']
};
optionSing = 'SIGN2';
queryParams: any;
mode: any;
constructor(public uploadCertificateService: UploadCertificateService,
public userService: UserService,
private sanitizer: DomSanitizer,
private activatedRoute: ActivatedRoute,
private certRegService: CertRegService,
public toasterService: ToasterService,
public resourceService: ResourceService,
public navigationHelperService: NavigationHelperService,
public layoutService: LayoutService) {
}
ngOnInit() {
this.activatedRoute.queryParams.subscribe((params) => {
this.queryParams = params;
this.mode = _.get(this.queryParams, 'type');
});
this.navigationHelperService.setNavigationUrl();
this.initializeFormFields();
this.getDefaultTemplates();
this.layoutConfiguration = this.layoutService.initlayoutConfig();
this.redoLayout();
}
getDefaultTemplates() {
const request = {
'request': {
'filters': {
'certType': 'cert template layout',
'channel': this.userService.channel,
'mediaType': 'image'
},
'fields': ['identifier', 'name', 'code', 'certType', 'data', 'issuer', 'signatoryList', 'artifactUrl', 'primaryCategory', 'channel'],
'limit': 100
}
};
this.uploadCertificateService.getCertificates(request).subscribe(res => {
this.defaultCertificates = _.get(res, 'result.content');
this.selectedCertificate = _.clone(this.defaultCertificates[0]);
this.getSVGTemplate();
});
}
initializeFormFields() {
this.createTemplateForm = new UntypedFormGroup({
certificateTitle: new UntypedFormControl('', [Validators.required]),
stateName: new UntypedFormControl('', [Validators.required]),
authoritySignature_0: new UntypedFormControl('', [Validators.required]),
authoritySignature_1: new UntypedFormControl(''),
allowPermission: new UntypedFormControl('', [Validators.required])
});
// TODO: Move to a separate component this browse logic;
this.createTemplateForm.valueChanges.subscribe(val => {
this.validateForm();
});
}
validateForm() {
// TODO: Form validation need to improve
const logo = _.get(this.images, 'LOGO1.url');
const sign = _.get(this.images, 'SIGN1.url');
if (this.createTemplateForm.status === 'VALID' && _.get(this.createTemplateForm, 'value.allowPermission')
&& logo && sign) {
this.disableCreateTemplate = false;
} else {
this.disableCreateTemplate = true;
}
}
getSVGTemplate() {
this.uploadCertificateService.getSvg(this.selectedCertificate.artifactUrl).then(res => {
const svgFile = res;
this.logoHtml = this.sanitizeHTML(svgFile);
this.previewCertificate();
});
}
ngOnDestroy() {
this.unsubscribe$.next();
this.unsubscribe$.complete();
}
createCertTemplate() {
this.validateForm();
// TODO: form validation need to improve
if (this.disableCreateTemplate) {
this.createTemplateForm.controls.certificateTitle.markAsTouched();
this.createTemplateForm.controls.stateName.markAsTouched();
this.createTemplateForm.controls.authoritySignature_0.markAsTouched();
this.createTemplateForm.controls.authoritySignature_1.markAsTouched();
this.createTemplateForm.controls.allowPermission.markAsTouched();
} else {
this.previewCertificate();
setTimeout(() => {
const channel = this.userService.channel;
const request = this.certConfigModalInstance.prepareCreateAssetRequest(_.get(this.createTemplateForm, 'value'), channel, this.selectedCertificate, this.images);
this.disableCreateTemplate = true;
this.uploadCertificateService.createCertTemplate(request).subscribe(response => {
const assetId = _.get(response, 'result.identifier');
this.uploadTemplate(this.finalSVGurl, assetId);
}, error => {
this.toasterService.error('Something went wrong, please try again later');
});
}, 1000);
}
}
uploadTemplate(base64Url, identifier) {
this.uploadCertificateService.storeAsset(base64Url, identifier).subscribe(response => {
this.toasterService.success(_.get(this.resourceService, 'frmelmnts.cert.lbl.certAddSuccess'));
const templateIdentifier = {'identifier': _.get(response , 'result.identifier')};
this.uploadCertificateService.certificate.next(templateIdentifier);
this.navigationHelperService.navigateToLastUrl();
}, error => {
this.toasterService.error('Something went wrong, please try again later');
console.log('error', error);
});
}
assetData(data) {
if (data.key === this.optionSing) {
this.createTemplateForm.get('authoritySignature_1').setValidators([Validators.required]);
this.createTemplateForm.get('authoritySignature_1').updateValueAndValidity();
}
this.images[data.key] = data;
this.validateForm();
}
close() {
this.showSelectImageModal = false;
this.showUploadUserModal = false;
}
removeImage(key) {
if (key === 'SIGN2') {
this.createTemplateForm.get('authoritySignature_1').clearValidators();
this.createTemplateForm.get('authoritySignature_1').updateValueAndValidity();
}
this.images[key] = {};
this.validateForm();
}
openSateLogos(type) {
this.logoType = type;
this.showSelectImageModal = true;
this.browseImage.getAssetList();
}
openSignLogos(type) {
this.logoType = type;
this.showSelectImageModal = false;
this.showUploadUserModal = true;
// this.browseImage.getAssetList();
}
chooseCertificate(certificate) {
this.logoHtml = null;
this.selectedCertificate = _.clone(certificate);
this.getSVGTemplate();
}
convertHtml(tag) {
if (tag) {
const html = tag.toString();
return new DOMParser().parseFromString(html, 'text/html');
}
}
previewCertificate() {
this.svgData = this.convertHtml(this.logoHtml);
const stateLogos = this.svgData.getElementsByClassName(this.classNames.STATE_LOGOS);
const digitalSigns = this.classNames.SIGN_LOGO.map(id => this.svgData.getElementById(id));
this.updateTitles();
this.updateStateLogos(stateLogos);
this.updateSigns(digitalSigns);
}
updateTitles() {
const certTitle = this.svgData.getElementsByClassName(this.classNames.CERT_TITLE);
certTitle[0].innerHTML = this.createTemplateForm.controls.certificateTitle.value;
const stateTitle = this.svgData.getElementsByClassName(this.classNames.STATE_TITLE);
stateTitle[0].innerHTML = this.createTemplateForm.controls.stateName.value;
this.classNames.DESIGNATIONS_NAMES.forEach((id, index) => {
const designation_html = this.svgData.getElementById(id);
if (designation_html) {
const title = this.createTemplateForm.get(`authoritySignature_${index}`).value;
designation_html.innerHTML = title;
}
});
}
updateStateLogos(stateLogos) {
const logosArray = Object.values(this.images).filter(x => !_.isEmpty(x) && x['type'] === 'LOGO');
this.editSVG(logosArray, stateLogos).then(res => {
this.certificateCreation(this.svgData?.getElementsByTagName('svg')[0]);
});
}
updateSigns(stateLogos) {
const logosArray = Object.values(this.images).filter(x => !_.isEmpty(x) && x['type'] === 'SIGN');
this.editSVG(logosArray, stateLogos).then(res => {
this.certificateCreation(this.svgData?.getElementsByTagName('svg')[0]);
});
}
editSVG(logosArray, stateLogos) {
return new Promise<void>(async (resolve, reject) => {
for (let i = 0; i < logosArray.length; i++) {
const logo = logosArray[i];
if (logo) {
const res = await this.toDataURL(logo);
if (res && !_.isEmpty(stateLogos) && stateLogos[i]) {
stateLogos[i].setAttribute('xlink:href', res['url']);
}
if (i === (logosArray.length - 1)) {
resolve();
}
}
}
});
}
toDataURL(image) {
return fetch(image.url, {
method: 'GET',
mode: 'cors',
cache: 'no-cache',
headers: {
'Content-Type': 'application/json'
}
})
.then(response => response.blob())
.then(blob => new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onloadend = () => resolve({ url: reader.result, type: image.type });
reader.onerror = reject;
reader.readAsDataURL(blob);
}));
}
urltoFile(url, filename, mimeType) {
return (fetch(url)
.then((res) => {
return res.arrayBuffer();
})
.then((buf) => {
return new File([buf], filename, {type: mimeType});
})
);
}
certificateCreation(ev) {
const dataURL = this.getBase64Data(ev);
this.selectedCertificate['artifactUrl'] = this.sanitizer.bypassSecurityTrustResourceUrl(dataURL);
this.urltoFile(dataURL, `certificate_${dayjs().format('YYYY-MM-DD_HH_mm')}.svg`, 'image/svg+xml')
.then((file) => {
this.finalSVGurl = file;
});
}
sanitizeHTML(html) {
return this.sanitizer.bypassSecurityTrustHtml(html);
}
getImagePath() {
if (this.selectedCertificate) {
return this.selectedCertificate.artifactUrl;
}
}
getBase64Data(ev) {
const div = document?.createElement('div');
div?.appendChild(ev?.cloneNode(true));
const b64 = 'data:image/svg+xml;base64,' + window.btoa(div.innerHTML);
return b64;
}
back() {
this.uploadCertificateService.certificate.next(null);
this.navigationHelperService.navigateToLastUrl();
}
redoLayout() {
if (this.layoutConfiguration != null) {
this.FIRST_PANEL_LAYOUT = this.layoutService.redoLayoutCSS(0, this.layoutConfiguration, COLUMN_TYPE.threeToNine);
this.SECOND_PANEL_LAYOUT = this.layoutService.redoLayoutCSS(1, this.layoutConfiguration, COLUMN_TYPE.threeToNine);
} else {
this.FIRST_PANEL_LAYOUT = this.layoutService.redoLayoutCSS(0, null, COLUMN_TYPE.fullLayout);
this.SECOND_PANEL_LAYOUT = this.layoutService.redoLayoutCSS(1, null, COLUMN_TYPE.fullLayout);
}
}
}<div [ngClass]="layoutConfiguration ? 'sbt-inside-page-container' : ''">
<!-- Header section-->
<div class="sb-bg-color-white relative position back-btn-container cc-player__btn-back relative9">
<div class="ui container">
<div class="py-16 d-flex flex-ai-center flex-jc-space-between">
<button (click)="back()" tabindex="0" class="sb-btn sb-btn-normal sb-btn-link sb-btn-link-primary sb-left-icon-btn mr-auto" id="goBack"
type="button">
<i class="icon-svg icon-svg--xxs icon-back mr-4">
<svg class="icon icon-svg--primary">
<use xlink:href="assets/images/sprite.svg#arrow-long-left"></use>
</svg></i>
{{resourceService?.frmelmnts?.btn?.back}}
</button>
<!-- <button type="button" class="sb-btn sb-btn-normal sb-btn-primary">
{{resourceService?.frmelmnts?.cert?.btn?.createtemp}}
</button> -->
</div>
</div>
</div>
<!-- / Header section-->
<!-- Create template form-->
<div class="certificate-container py-16 cc-player__content-header relative9">
<div class="ui container">
<div class='ui stackable grid mt-0'>
<div class="six wide column">
<div class="certificate-content certificate-bg p-24">
<label>{{resourceService?.frmelmnts?.cert?.lbl?.languageSupportNote}}</label>
<form [formGroup]="createTemplateForm">
<div class='ui stackable grid mt-0'>
<div class="twelve wide column">
<div class="sb-field mb-0">
<label>{{resourceService?.frmelmnts?.cert?.lbl?.certtitle}}<span class="asterik">*</span></label>
<label for="certificateTitle-input" class="hide">{{resourceService?.frmelmnts?.cert?.prmpt?.certtitle}}</label>
<input formControlName="certificateTitle" id="certificateTitle-input" [ngClass]="(createTemplateForm.controls.certificateTitle.touched && createTemplateForm.controls.certificateTitle.invalid) ? 'is-invalid' : 'is-valid'" class="sb-form-control" [placeholder]="resourceService?.frmelmnts?.cert?.prmpt?.certtitle">
</div>
<small class="pl-4 fsmall">
{{resourceService?.frmelmnts?.cert?.inlntxt?.certtitle}}
</small>
</div>
</div>
<div class="fnormal pt-16 state-labels">{{resourceService?.frmelmnts?.cert?.lbl?.statedet}}</div>
<div class='ui stackable grid mt-0'>
<div class="twelve wide column py-8">
<div class="sb-field d-flex flex-dc">
<label for="state" class="state-labels">{{resourceService?.frmelmnts?.lbl?.name}}<span class="asterik">*</span></label>
<label for="stateName-input" class="hide">{{resourceService?.frmelmnts?.cert?.prmttxt?.statedet}}</label>
<input formControlName="stateName" id="stateName-input" class="sb-form-control"
[ngClass]="(createTemplateForm.controls.stateName.touched && createTemplateForm.controls.stateName.invalid) ? 'is-invalid' : 'is-valid'"
[placeholder]="resourceService?.frmelmnts?.cert?.prmttxt?.statedet">
</div>
<small class="pl-4 fsmall">{{resourceService?.frmelmnts?.cert?.inlntxt?.statedet}}</small>
</div>
</div>
<div class="ui stackable grid">
<div class="six wide column py-8">
<div class="sb-field mb-0 d-flex flex-dc">
<label class="pl-4 state-labels">{{resourceService?.frmelmnts?.cert?.lbl?.statelogo}} <span class="asterik">*</span></label>
<button (click)="openSateLogos({type: 'LOGO', index: 0, key:'LOGO1'})" tabindex="0" class="sb-btn sb-btn-normal sb-browse-btn">
{{resourceService?.frmelmnts?.cert?.btn?.browse}}
</button>
</div>
<div class="d-flex flex-dc">
<small *ngIf="!(images?.LOGO1?.name)" class="pl-4 py-4 fsmall" [innerHTML]="sanitizeHTML(resourceService?.frmelmnts?.cert?.intxt?.imgdimensions)"></small>
<small *ngIf="(images?.LOGO1?.name)" class="pl-4 py-4 fsmall">{{images?.LOGO1?.name}} <span class="pl-8">
<img (click)="removeImage('LOGO1')" tabindex="0" src="assets/images/close.svg" width="12px"></span></small>
</div>
</div>
<div class="six wide column py-8">
<div class="sb-field mb-0 d-flex flex-dc">
<label class="pl-4 state-labels">{{resourceService?.frmelmnts?.cert?.lbl?.statelogo2}}</label>
<button (click)="openSateLogos({type: 'LOGO', index: 1, key:'LOGO2'})" tabindex="0" class="sb-btn sb-btn-normal sb-browse-btn">
{{resourceService?.frmelmnts?.cert?.btn?.browse}}
</button>
</div>
<div class="d-flex flex-dc">
<small *ngIf="!(images?.LOGO2?.name)" class="pl-4 py-4 fsmall" [innerHTML]="sanitizeHTML(resourceService?.frmelmnts?.cert?.intxt?.imgdimensions)"></small>
<small *ngIf="(images?.LOGO2?.name)" class="pl-4 py-4 fsmall">{{images?.LOGO2?.name}}<span class="pl-8">
<img (click)="removeImage('LOGO2')" tabindex="0" src="assets/images/close.svg" width="12px"></span></small>
</div>
</div>
</div>
<div class="fnormal pt-24 state-labels">{{resourceService?.frmelmnts?.cert?.lbl?.signatory}}</div>
<div class='ui stackable grid mt-0'>
<div class="six wide column">
<div class="sb-field d-flex flex-dc">
<label class="pl-4 state-labels">{{resourceService?.frmelmnts?.cert?.lbl?.sign}}<span class="asterik">*</span></label>
<button (click)="openSignLogos({type: 'SIGN', index: 0, key:'SIGN1'})" tabindex="0" class="sb-btn sb-btn-normal sb-browse-btn">
{{resourceService?.frmelmnts?.cert?.btn?.browse}}
</button>
<div class="d-flex flex-dc">
<small *ngIf="!(images?.SIGN1?.name)" class="pl-4 py-4 fsmall">{{resourceService?.frmelmnts?.cert?.inlntxt?.signspec}}</small>
<small *ngIf="(images?.SIGN1?.name)" class="pl-4 py-4 fsmall">{{images?.SIGN1?.name}}<span class="pl-8">
<img (click)="removeImage('SIGN1')" tabindex="0" src="assets/images/close.svg" width="12px"></span></small>
</div>
</div>
</div>
<div class="six wide column py-8">
<div class="sb-field mb-0">
<label class="mb-16">{{resourceService?.frmelmnts?.cert?.lbl?.signdesig}}<span class="asterik">*</span></label>
<div class="sb-field mb-0">
<label for="authoritySignature_0-input" class="hide">{{resourceService?.frmelmnts?.cert?.lbl?.designation}}</label>
<input formControlName="authoritySignature_0" class="sb-form-control" id="authoritySignature_0-input"
[ngClass]="(createTemplateForm.controls.authoritySignature_0.touched && createTemplateForm.controls.authoritySignature_0.invalid) ? 'is-invalid' : 'is-valid'"
[placeholder]="resourceService?.frmelmnts?.cert?.lbl?.designation">
</div>
<small class="pl-4 fsmall">
{{resourceService?.frmelmnts?.cert?.inlntxt?.signdet}}
</small>
</div>
</div>
</div>
<div class='ui stackable grid mt-0'>
<div class="six wide column">
<div class="sb-field d-flex flex-dc">
<label class="pl-4 state-labels">{{resourceService?.frmelmnts?.cert?.lbl?.sign2}}</label>
<button (click)="openSignLogos({type: 'SIGN', index: 1, key:'SIGN2'})" tabindex="0" class="sb-btn sb-btn-normal sb-browse-btn">
{{resourceService?.frmelmnts?.cert?.btn?.browse}}
</button>
</div>
<div class="d-flex flex-dc">
<small *ngIf="!(images?.SIGN2?.name)" class="pl-4 py-4 fsmall">{{resourceService?.frmelmnts?.cert?.inlntxt?.signspec}}</small>
<small *ngIf="(images?.SIGN2?.name)" class="pl-4 py-4 fsmall">{{images?.SIGN2?.name}}<span class="pl-8">
<img (click)="removeImage('SIGN2')" tabindex="0" src="assets/images/close.svg" width="12px"></span></small>
</div>
</div>
<div class="six wide column py-8">
<div class="sb-field mb-0">
<label class="mb-16">{{resourceService?.frmelmnts?.cert?.lbl?.signdesig2}}</label>
<div class="sb-field mb-0">
<label for="authoritySignature_1-input" class="hide">{{resourceService?.frmelmnts?.cert?.lbl?.designation}}</label>
<input formControlName="authoritySignature_1" id="authoritySignature_1-input"
[ngClass]="(createTemplateForm.controls.authoritySignature_1.touched && createTemplateForm.controls.authoritySignature_1.invalid) ? 'is-invalid' : 'is-valid'"
class="sb-form-control" [placeholder]="resourceService?.frmelmnts?.cert?.lbl?.designation">
</div>
<small class="pl-4 fsmall">
{{resourceService?.frmelmnts?.cert?.inlntxt?.signdet}}
</small>
</div>
</div>
</div>
<div class='ui stackable grid mt-0'>
<div class="twelve wide column">
<div class="sb-checkbox sb-checkbox-secondary pt-24">
<input formControlName="allowPermission" value="true" type="checkbox" id="check2" name="selected">
<label for="check2" class="text-left fsmall">{{resourceService?.frmelmnts?.cert?.intxt?.confrmtion}}</label>
</div>
</div>
</div>
</form>
</div>
</div>
<!-- Side panel of cert-templates -->
<div class="six wide column">
<div class="select-template-content certificate-bg p-24">
<div class="d-flex flex-jc-space-between">
<label class="preview-title mb-0">{{resourceService?.frmelmnts?.cert?.lbl?.certprew}}</label>
<button type="button" (click)="previewCertificate()" tabindex="0" class="sb-btn sb-btn-normal sb-btn-outline-primary">
{{resourceService?.frmelmnts?.cert?.btn?.refresh}}
</button>
</div>
<div class="ui stackable grid mt-0">
<div class="twelve wide column">
<div class="cert-select-card">
<div class="d-flex flex-ai-center flex-dc cert-select-card__content">
<div class="d-flex flex-ai-center flex-jc-center cert-select-card__content__description">
<img [src]="getImagePath()" class="w-100" alt="Certificate template">
</div>
</div>
</div>
</div>
</div>
<div class="ui stackable grid mt-0">
<div class="twelve wide column">
<label>{{resourceService?.frmelmnts?.cert?.lbl?.layout}}</label>
<div class ="d-flex flex-w-wrap">
<div *ngFor="let certificate of defaultCertificates" class ="cert-img-sb-card active mr-16">
<div class="cert-img-sb-card__content" alt="certificate template">
<img (click)="chooseCertificate(certificate)" tabindex="0" [src]="certificate?.artifactUrl" alt="certificate template" />
<div *ngIf="selectedCertificate?.identifier === certificate?.identifier" class="selected-mark"><img src="assets/images/checkbox-icon.svg" alt="selected mark"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ui stackable grid m-0">
<div class="twelve wide column px-0">
<div class="d-flex flex-ai-center flex-jc-flex-end sb-bg-color-white p-24">
<button (click)="createCertTemplate()" tabindex="0" class="sb-btn sb-btn-normal sb-btn-primary ml-8 px-24">{{resourceService?.frmelmnts?.cert?.btn?.saveAsTemplate}}</button>
</div>
</div>
</div>
</div>
</div>
<browse-image-popup (assetData)="assetData($event)" (close)="close()" [showUploadUserModal]="showUploadUserModal"
[showSelectImageModal]="showSelectImageModal" [logoType]="logoType" ></browse-image-popup>
<!-- <browse-image-popup (assetData)="assetData($event)" (close)="close()" [showUploadUserModal]="showUploadUserModal"
[showSelectImageModal]="showSelectImageModal" [logoType]="logoType"></browse-image-popup> -->
./create-template.component.scss
@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
.certificate-content{
height: 100%;
background: var(--white);
}
.cert-img-sb-card {
width: 6.375rem;
margin-bottom: calculateRem(16px);
background-color: var(--white);
border: .0625rem solid var(--rc-e2e3e5);
border-radius: .25rem;
cursor: pointer;
position: relative;
overflow: hidden;
margin-top: .1875rem;
transition: box-shadow .3s ease-out,transform .3s ease-out,opacity .2s ease-out;
transition-delay: .1s;
&.active {
border: calculateRem(2px) solid var(--primary-300);
transform: scale(1.03, 1.03);
.selected-mark{
position: absolute;
right:calculateRem(4px);
top:0;
display: block;
}
}
&:hover{
border: calculateRem(2px) solid var(--primary-300);
transform: scale(1.03, 1.03);
}
&__content {
height: 5.375rem;
padding: 0.5rem;
overflow: hidden;
position: relative;
.selected-mark{
display: none;
}
img{
width:100%;
height:100%;
}
}
}
.select-template-content{
background: var(--white);
height:100%;
}
.cert-select-card{
width: 100%;
border-radius: 0.5rem;
cursor: pointer;
&__content{
height: 100%;
background: var(--white);
&__description{
width: 100%;
min-height: calculateRem(418px);
text-align: center;
border-style: dashed;
border-color: var(--gray-100);
.title{
font-size: 1.125rem;
color: var(--gray-100);
}
}
}
}
.cert-select-image {
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
border: calculateRem(1px) solid;
margin-bottom: calculateRem(16px);
}
}
.cert-view-image {
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
border: calculateRem(1px) solid;
}
}
.asterik{
color: var(--red-400);
}
.preview-title{
font-size: calculateRem(20px);
}
.state-labels {
color: var(--gray-800);
}
.list-border {
border-bottom: calculateRem(1px) solid var(--gray-200);
}
.sb-browse-btn {
position: relative;
overflow: hidden;
margin-top: calculateRem(3px);
cursor: pointer;
border-radius: calculateRem(16px);
border: calculateRem(2px) solid var(--primary-300);
color: var(--primary-300);
font-weight: bold;
background:var(--primary-100);
}