members refactoring
Boris Voropaev
parent
c722395a6e
commit
71fa86ebd0
|
|
@ -1,12 +1,35 @@
|
|||
<div class="member">
|
||||
<!-- <pre>{{item | json}}</pre> -->
|
||||
<h1 *ngIf="name" [innerHTML]="name"></h1>
|
||||
<img *ngIf="photo" [src]="photo" (click)="fullScreen=true"/>
|
||||
<h4 *ngIf="position" [innerHTML]="position"></h4>
|
||||
<p *ngIf="document" class="doc"><a [href]="document">Документ</a> </p>
|
||||
<p *ngIf="email"><a href="mailto:{{email}}">{{email}}</a></p>
|
||||
<p *ngIf="phone"><a href="tel:{{phone}}">{{phone}}</a></p>
|
||||
<p *ngIf="description" [innerHTML]="description"></p>
|
||||
</div>
|
||||
<img [src]="photo" class="full-screen" *ngIf="fullScreen" (click)="fullScreen=false"/>
|
||||
|
||||
<page-menu [editMode]="editMode" [section]="member" [modelId]="modelId" [modelType]="'modelType'"></page-menu>
|
||||
|
||||
<img [src]="image" class="image" [class.pointer]="imageFull" (click)="showImage=imageFull&&true"/>
|
||||
|
||||
<div class="name" [innerHTML]="name"></div>
|
||||
|
||||
<div class="position" [innerHTML]="position" *ngIf="position"></div>
|
||||
|
||||
<a class="link tel" [innerHTML]="phone" [href]="'tel:'+phone" *ngIf="phone"></a>
|
||||
|
||||
<a class="link mail" [innerHTML]="email" [href]="'mailto:'+email" *ngIf="email"></a>
|
||||
|
||||
<div class="doc" *ngIf="docLink">
|
||||
<div class="doc-icon" [style.backgroundImage]="docIcon">
|
||||
</div>
|
||||
<div class="doc-link">
|
||||
<a [textContent]="docName" class="title" [href]="docLink" target="_blank"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="more">
|
||||
<a *ngIf="description" (click)="showDescription=true">
|
||||
Подробнее <img src="/assets/images/icons/chevron_right_24dp.svg" alt="">
|
||||
</a>
|
||||
<div *ngIf="showDescription" class="modal" (click)="showDescription=false">
|
||||
<div [innerHTML]="description"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img [src]="image" class="full-screen" [hidden]="!showImage" (click)="showImage=false"/>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,34 +1,137 @@
|
|||
.member {
|
||||
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 32px;
|
||||
font-style: normal;
|
||||
|
||||
|
||||
|
||||
color:#2D2D2D;
|
||||
h1{
|
||||
font-family: PT Sans Narrow;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.5px;
|
||||
font-size: 50px;
|
||||
line-height: 60px; /* 120% */
|
||||
font-weight: 700;
|
||||
.member{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
>*{
|
||||
width: 100%;
|
||||
}
|
||||
.doc{
|
||||
display: block;
|
||||
background: url('~src/assets/images/icons/document/document_60dp.svg') top left no-repeat;
|
||||
padding-left: 62px;
|
||||
min-height: 60px;
|
||||
>div{
|
||||
>*{margin-bottom: 16px;}
|
||||
}
|
||||
img{
|
||||
max-width: 345px;
|
||||
.menu {
|
||||
|
||||
}
|
||||
.image {
|
||||
// background: url("/assets/images/view-man.svg") center no-repeat;
|
||||
&.pointer{
|
||||
cursor: pointer;
|
||||
}
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
height: 338px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(45, 45, 45, 0.27);
|
||||
|
||||
}
|
||||
.name {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 32px; /* 133.333% */
|
||||
letter-spacing: 0.24px;
|
||||
color:#6C6C6C
|
||||
}
|
||||
.position {
|
||||
font-size: 20px;
|
||||
}
|
||||
.more {
|
||||
font-size: 20px;
|
||||
img{
|
||||
vertical-align: -6px;
|
||||
}
|
||||
}
|
||||
.link{
|
||||
font-size: 20px;
|
||||
display: inline-block;
|
||||
&.tel::before{
|
||||
content: '';
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
vertical-align: -3px;
|
||||
margin-right: 4px;
|
||||
background: url('~src/assets/images/icons/phone_blue_24dp.svg') center no-repeat;
|
||||
}
|
||||
&.mail::before{
|
||||
content: '';
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
vertical-align: -5px;
|
||||
margin-right: 4px;
|
||||
background: url('~src/assets/images/icons/mail_blue_24dp.svg') center no-repeat;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.doc{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
.doc-icon{
|
||||
margin-left: -8px;
|
||||
flex-basis: 60px;
|
||||
align-items: flex-start;
|
||||
flex-shrink: 0;
|
||||
height: 60px;
|
||||
background: center no-repeat;
|
||||
background-image: url('~src/assets/images/icons/document/document_60dp.svg');
|
||||
background-size: contain;
|
||||
}
|
||||
.doc-link{
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
flex-basis: 200px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
a{
|
||||
font-size: 20px;
|
||||
|
||||
}
|
||||
.description{
|
||||
color: #6C6C6C;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.full-screen{
|
||||
position: fixed;
|
||||
top:0;
|
||||
z-index: 200;
|
||||
left: 0;
|
||||
background-color: rgba(45, 45, 45, 0.63);
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
object-fit: contain;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
.modal{
|
||||
position: fixed;
|
||||
top:0;
|
||||
z-index: 200;
|
||||
left: 0;
|
||||
background-color: rgba(45, 45, 45, 0.63);
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
div{
|
||||
background-color: #fff;
|
||||
width: 50vw;
|
||||
min-width: 400px;
|
||||
border-radius: 12px;
|
||||
padding: 0 24px;
|
||||
}
|
||||
}
|
||||
.hidden{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,12 @@ import {Router} from "@angular/router";
|
|||
})
|
||||
export class MemberSectionItemComponent {
|
||||
@Input() id: any;
|
||||
@Input() editMode: boolean;
|
||||
@Input() member:any;
|
||||
@Input() section: any;
|
||||
public cover = '/assets/images/icons/view_man_273_370dp.svg';
|
||||
|
||||
public showImage:boolean;
|
||||
|
||||
constructor(
|
||||
private formsService: FormsService,
|
||||
|
|
@ -18,57 +24,84 @@ export class MemberSectionItemComponent {
|
|||
}
|
||||
|
||||
public item: any;
|
||||
public fullScreen: boolean;
|
||||
public fullScreen = false;
|
||||
public showDescription = false;
|
||||
|
||||
ngOnInit() {
|
||||
this.fetch();
|
||||
|
||||
}
|
||||
|
||||
fetch() {
|
||||
this.objectsService.fetchObject(this.id, {include: 'groups.fields.value'}).subscribe(res => {
|
||||
this.item = res.data;
|
||||
get modelId() {
|
||||
return this.section.id;
|
||||
}
|
||||
|
||||
|
||||
getFields(member){
|
||||
|
||||
let fields:any = {};
|
||||
member.groups.data.forEach(group =>{
|
||||
group.fields.data.forEach(field =>{
|
||||
if(field.name&&field?.value?.data[0]){
|
||||
|
||||
fields[field.name] = field?.value?.data[0]
|
||||
}
|
||||
})
|
||||
})
|
||||
return fields
|
||||
}
|
||||
|
||||
parseParam(param: string): any {
|
||||
let result = '';
|
||||
this?.item?.groups?.data[0]?.fields?.data.forEach(res => {
|
||||
if (param === res.name) {
|
||||
result = res.value.data[0];
|
||||
}
|
||||
});
|
||||
return result;
|
||||
get image(){
|
||||
return this.getFields(this.member)['member-image']?.links?.full || this.cover
|
||||
}
|
||||
get imageFull(){
|
||||
return !!this.getFields(this.member)['member-image']?.links?.full
|
||||
}
|
||||
|
||||
parseParamFile(param: string): string {
|
||||
return this.parseParam(param)?.links?.full;
|
||||
get name(){
|
||||
return this.getFields(this.member)['member-name-required']
|
||||
}
|
||||
|
||||
get name() {
|
||||
return this.parseParam('member-name-required');
|
||||
get position(){
|
||||
return this.getFields(this.member)['member-position-required']
|
||||
}
|
||||
|
||||
get photo() {
|
||||
return this.parseParamFile('member-image');
|
||||
get phone(){
|
||||
return this.getFields(this.member)['member-phone']
|
||||
}
|
||||
|
||||
get position() {
|
||||
return this.parseParam('member-position-required');
|
||||
get email(){
|
||||
return this.getFields(this.member)['member-email']
|
||||
}
|
||||
|
||||
get document() {
|
||||
return this.parseParamFile('member-doc');
|
||||
get docLink(){
|
||||
return this.getFields(this.member)['member-doc']?.links.download
|
||||
}
|
||||
get docIcon(){
|
||||
return this.iconUrl(this.getFields(this.member)['member-doc'].extension)
|
||||
}
|
||||
private iconUrl(name:string){
|
||||
if (name)return ICON_TYPE[name] && `url(/assets/images/icons/document/${ICON_TYPE[name]}.svg)`
|
||||
}
|
||||
get docName(){
|
||||
return this.getFields(this.member)['member-doc'].name
|
||||
}
|
||||
|
||||
get phone() {
|
||||
return this.parseParam('member-phone');
|
||||
get description(){
|
||||
return this.getFields(this.member)['member-description']
|
||||
}
|
||||
|
||||
get email() {
|
||||
return this.parseParam('member-email');
|
||||
}
|
||||
|
||||
get description() {
|
||||
return this.parseParam('member-description');
|
||||
}
|
||||
}
|
||||
|
||||
const ICON_TYPE:any={
|
||||
rtf:'DOC',
|
||||
docx:'DOC',
|
||||
doc:'DOC',
|
||||
xl:'XLS',
|
||||
xls:'XLS',
|
||||
xlsx:'XLS',
|
||||
ppt:'PPT',
|
||||
pptx:'PPT',
|
||||
jpg:'JPG',
|
||||
jpeg:'JPG',
|
||||
pdf:'PDF'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,10 @@
|
|||
|
||||
<div class="list">
|
||||
<div class="item" *ngFor="let member of members; let i=index;">
|
||||
<member-section-item [editMode]="editMode" [member]="member" [section]="section"></member-section-item>
|
||||
|
||||
<!--
|
||||
|
||||
<page-menu [editMode]="editMode" [section]="member" [modelId]="modelId" [modelType]="modelType"></page-menu>
|
||||
<img [src]="getFields(member)['member-image']?.links?.full || cover" class="image" (click)="showImage[i]=true"/>
|
||||
<div class="name" [innerHTML]="getFields(member)['member-name-required']"></div>
|
||||
|
|
@ -24,15 +28,18 @@
|
|||
</div>
|
||||
<div class="more">
|
||||
<a *ngIf="getFields(member)['member-description']" (click)="showDescription=true">
|
||||
<!-- [href]="getLink(member.id)" -->
|
||||
|
||||
Подробнее <img src="/assets/images/icons/chevron_right_24dp.svg" alt="">
|
||||
</a>
|
||||
<div *ngIf="showDescription" class="modal" (click)="showDescription=false">
|
||||
<div [innerHTML]="getFields(member)['member-description']"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <pre >{{getFields(member)|json}}</pre> -->
|
||||
|
||||
<img [src]="getFields(member)['member-image']?.links?.full || cover" class="full-screen" [hidden]="!showImage[i]" (click)="showImage[i]=false"/>
|
||||
-->
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -36,151 +36,22 @@
|
|||
align-content: flex-start;
|
||||
gap: 40px;
|
||||
|
||||
|
||||
.item {
|
||||
object-fit: cover;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.item{
|
||||
flex-grow: 0;
|
||||
flex-basis: 253px;
|
||||
width: 253px;
|
||||
gap: 16px;
|
||||
overflow: hidden;
|
||||
>*{
|
||||
width: 100%;
|
||||
}
|
||||
>div{
|
||||
>*{margin-bottom: 16px;}
|
||||
}
|
||||
.menu {
|
||||
|
||||
}
|
||||
.image {
|
||||
// background: url("/assets/images/view-man.svg") center no-repeat;
|
||||
|
||||
object-fit: cover;
|
||||
height: 338px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(45, 45, 45, 0.27);
|
||||
|
||||
}
|
||||
.image {
|
||||
cursor: pointer;
|
||||
// background: url("/assets/images/view-man.svg") center no-repeat;
|
||||
img {
|
||||
width: 273px;
|
||||
object-fit: cover;
|
||||
height: 370px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(45, 45, 45, 0.27);
|
||||
}
|
||||
}
|
||||
.name {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 32px; /* 133.333% */
|
||||
letter-spacing: 0.24px;
|
||||
color:#6C6C6C
|
||||
}
|
||||
.position {
|
||||
font-size: 20px;
|
||||
}
|
||||
.more {
|
||||
font-size: 20px;
|
||||
img{
|
||||
vertical-align: -6px;
|
||||
}
|
||||
}
|
||||
.link{
|
||||
font-size: 20px;
|
||||
display: inline-block;
|
||||
&.tel::before{
|
||||
content: '';
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
vertical-align: -3px;
|
||||
margin-right: 4px;
|
||||
background: url('~src/assets/images/icons/phone_blue_24dp.svg') center no-repeat;
|
||||
}
|
||||
&.mail::before{
|
||||
content: '';
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
vertical-align: -5px;
|
||||
margin-right: 4px;
|
||||
background: url('~src/assets/images/icons/mail_blue_24dp.svg') center no-repeat;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.doc{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
.doc-icon{
|
||||
flex-basis: 60px;
|
||||
align-items: flex-start;
|
||||
flex-shrink: 0;
|
||||
height: 60px;
|
||||
background: center no-repeat;
|
||||
background-image: url('~src/assets/images/icons/document/document_60dp.svg');
|
||||
background-size: contain;
|
||||
}
|
||||
.doc-link{
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
flex-basis: 200px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
a{
|
||||
font-size: 20px;
|
||||
|
||||
}
|
||||
.description{
|
||||
color: #6C6C6C;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.full-screen{
|
||||
position: fixed;
|
||||
top:0;
|
||||
z-index: 200;
|
||||
left: 0;
|
||||
background-color: rgba(45, 45, 45, 0.63);
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
object-fit: contain;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
.modal{
|
||||
position: fixed;
|
||||
top:0;
|
||||
z-index: 200;
|
||||
left: 0;
|
||||
background-color: rgba(45, 45, 45, 0.63);
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
div{
|
||||
background-color: #fff;
|
||||
width: 50vw;
|
||||
min-width: 400px;
|
||||
border-radius: 12px;
|
||||
padding: 0 24px;
|
||||
}
|
||||
}
|
||||
.hidden{
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue