aknuth/bizmatch-project
1
0
Fork 0
Code Issues 9 Pull Requests Packages Projects 5 Releases Wiki Activity

Image Upload, spinner aktivirt, listings & details überarbeitet

Browse Source
This commit is contained in:
Andreas Knuth
2024-03-18 18:17:04 +01:00
parent 2b27ab8ba5
commit fd91adda57
31 changed files with 582 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
bizmatch/src/app/pages/subscription/account/account.component.html
View File

@@ -18,13 +18,25 @@
<input id="state" type="text" [disabled]="true" pInputText [(ngModel)]="user.email">
<p class="font-italic text-sm line-height-1">You can only modify your email by contacting us at emailchange&#64;bizmatch.net</p>
</div>
<div class="mb-4">
<label for="firstname" class="block font-medium text-900 mb-2">First Name</label>
<input id="firstname" type="text" pInputText [(ngModel)]="user.firstname">
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<label for="firstname" class="block font-medium text-900 mb-2">First Name</label>
<input id="firstname" type="text" pInputText [(ngModel)]="user.firstname">
</div>
<div class="mb-4 col-12 md:col-6">
<label for="lastname" class="block font-medium text-900 mb-2">Last Name</label>
<input id="lastname" type="text" pInputText [(ngModel)]="user.lastname">
</div>
</div>
<div class="mb-4">
<label for="lastname" class="block font-medium text-900 mb-2">Last Name</label>
<input id="lastname" type="text" pInputText [(ngModel)]="user.lastname">
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<label for="firstname" class="block font-medium text-900 mb-2">Company Name</label>
<input id="firstname" type="text" pInputText [(ngModel)]="user.companyName">
</div>
<div class="mb-4 col-12 md:col-6">
<label for="lastname" class="block font-medium text-900 mb-2">Describe yourself</label>
<input id="lastname" type="text" pInputText [(ngModel)]="user.description">
</div>
</div>
<div class="grid">
<div class="mb-4 col-12 md:col-4">
@@ -67,13 +79,6 @@
<span class="text-xs">&nbsp;(Add more licenses or remove existing ones.)</span>
<!-- <button pButton pRipple label="Add Licence" class="w-auto" (click)="addLicence()"></button> -->
</div>
<!-- <div class="mb-4">
<label for="state" class="block font-medium text-900 mb-2">New Password</label>
<p class="font-italic text-sm line-height-1">If you would like to change the password type a new one. Otherwise leave this blank.</p>
<input id="state" type="text" pInputText>
<p class="font-italic text-sm line-height-1">Password repetition</p>
<input id="state" type="text" pInputText>
</div> -->
<div>
<button pButton pRipple label="Update Profile" class="w-auto" (click)="updateProfile(user)"></button>
@@ -83,14 +88,14 @@
<div class="flex flex-column align-items-center flex-or mb-8">
<span class="font-medium text-900 mb-2">Company Logo</span>
<span class="font-medium text-xs mb-2">(is shown in every offer)</span>
<img [src]="companyLogoUrl" (error)="setImageToFallback($event)" class="rounded-image"/>
<p-fileUpload mode="basic" chooseLabel="Upload" name="file" [url]="uploadUrl" accept="image/*" [maxFileSize]="maxFileSize" (onUpload)="onUploadCompanyLogo($event)" [auto]="true" styleClass="p-button-outlined p-button-plain p-button-rounded mt-4"></p-fileUpload>
<img [src]="companyLogoUrl" class="rounded-logo"/>
<p-fileUpload mode="basic" chooseLabel="Upload" name="file" [url]="uploadCompanyUrl" accept="image/*" [maxFileSize]="maxFileSize" (onUpload)="onUploadCompanyLogo($event)" [auto]="true" styleClass="p-button-outlined p-button-plain p-button-rounded mt-4"></p-fileUpload>
</div>
<p-divider></p-divider>
<div class="flex flex-column align-items-center flex-or">
<span class="font-medium text-900 mb-2">Your Profile Picture</span>
<img [src]="profileUrl" (error)="setImageToFallback($event)" class="rounded-image"/>
<p-fileUpload mode="basic" chooseLabel="Upload" name="file" [url]="uploadUrl" accept="image/*" [maxFileSize]="maxFileSize" (onUpload)="onUploadProfilePicture($event)" [auto]="true" styleClass="p-button-outlined p-button-plain p-button-rounded mt-4"></p-fileUpload>
<img [src]="profileUrl" class="rounded-profile"/>
<p-fileUpload mode="basic" chooseLabel="Upload" name="file" [url]="uploadProfileUrl" accept="image/*" [maxFileSize]="maxFileSize" (onUpload)="onUploadProfilePicture($event)" [auto]="true" styleClass="p-button-outlined p-button-plain p-button-rounded mt-4"></p-fileUpload>
</div>
</div>
</div>

12
bizmatch/src/app/pages/subscription/account/account.component.scss
View File

@@ -1,4 +1,4 @@
.rounded-image {
.rounded-logo {
border-radius: 6px;
width: 120px;
height: 30px;
@@ -6,7 +6,15 @@
padding: 1px 1px;
object-fit: contain;
}
.rounded-profile {
// @extend .rounded-logo;
max-width: 100px;
max-height: 120px;
border-radius: 6px;
border: 1px solid #6b7280;
padding: 1px 1px;
object-fit: contain;
}
.wfull{
width: 100%;
}

14
bizmatch/src/app/pages/subscription/account/account.component.ts
View File

@@ -41,7 +41,8 @@ export class AccountComponent {
user:User;
subscriptions:Array<Subscription>;
userSubscriptions:Array<Subscription>=[];
uploadUrl:string;
uploadProfileUrl:string;
uploadCompanyUrl:string;
maxFileSize=1000000;
companyLogoUrl:string;
profileUrl:string;
@@ -52,17 +53,18 @@ export class AccountComponent {
public selectOptions:SelectOptionsService,
private cdref:ChangeDetectorRef) {
this.user=this.userService.getUser()
}
async ngOnInit(){
this.profileUrl = `${environment.apiBaseUrl}/profile/${this.user.id}`
this.companyLogoUrl = `${environment.apiBaseUrl}/logo/${this.user.id}`
this.userSubscriptions=await lastValueFrom(this.subscriptionService.getAllSubscriptions());
this.uploadUrl = `${environment.apiBaseUrl}/bizmatch/account/uploadPhoto/${this.user.id}`;
this.uploadProfileUrl = `${environment.apiBaseUrl}/bizmatch/image/uploadProfile/${this.user.id}`;
this.uploadCompanyUrl = `${environment.apiBaseUrl}/bizmatch/image/uploadCompanyLogo/${this.user.id}`;
if (!this.user.licensedIn || this.user.licensedIn?.length===0){
this.user.licensedIn = [{name:'',value:''}]
}
this.user=await this.userService.getById(this.user.id);
this.profileUrl = this.user.hasProfile?`${environment.apiBaseUrl}/profile/${this.user.id}`:`/assets/images/placeholder.png`
this.companyLogoUrl = this.user.hasCompanyLogo?`${environment.apiBaseUrl}/logo/${this.user.id}`:`/assets/images/placeholder.png`
}
printInvoice(invoice:Invoice){}
@@ -74,7 +76,7 @@ export class AccountComponent {
onUploadCompanyLogo(event:any){
const uniqueSuffix = '?_ts=' + new Date().getTime();
this.companyLogoUrl = `${environment.apiBaseUrl}/company/${this.user.id}${uniqueSuffix}` //`http://IhrServer:Port/${newImagePath}${uniqueSuffix}`;
this.companyLogoUrl = `${environment.apiBaseUrl}/logo/${this.user.id}${uniqueSuffix}` //`http://IhrServer:Port/${newImagePath}${uniqueSuffix}`;
}
onUploadProfilePicture(event:any){
const uniqueSuffix = '?_ts=' + new Date().getTime();

2
bizmatch/src/app/pages/subscription/edit-listing/edit-listing.component.ts
View File

@@ -99,7 +99,7 @@ export class EditListingComponent {
this.listing.userId=this.user.id
this.listing.listingsCategory='business';
}
this.uploadUrl = `${environment.apiBaseUrl}/bizmatch/${this.listing.listingsCategory}/uploadPropertyPicture/${this.listing.id}`;
this.uploadUrl = `${environment.apiBaseUrl}/bizmatch/image/uploadPropertyPicture/${this.listing.id}`;
this.propertyImages=await this.listingsService.getPropertyImages(this.listing.id)
}
async save(){