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

image-cropper component, drag & drop bilder

Browse Source
This commit is contained in:
Andreas Knuth
2024-03-29 20:59:34 +01:00
parent 840d7a63b1
commit 89bb85a512
20 changed files with 478 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -56,34 +56,14 @@
</div>
<div class="mb-4">
<label for="companyOverview" class="block font-medium text-900 mb-2">Company Overview</label>
<p-editor [(ngModel)]="user.companyOverview" [style]="{ height: '320px' }">
<ng-template pTemplate="header">
<span class="ql-formats">
<button type="button" class="ql-bold" aria-label="Bold"></button>
<button type="button" class="ql-italic" aria-label="Italic"></button>
<button type="button" class="ql-underline" aria-label="Underline"></button>
<button value="ordered" aria-label="Ordered List" type="button"
class="ql-list"></button>
<button value="bullet" aria-label="Unordered List" type="button"
class="ql-list"></button>
</span>
</ng-template>
<p-editor [(ngModel)]="user.companyOverview" [style]="{ height: '320px' }" [modules]="editorModules">
<ng-template pTemplate="header"></ng-template>
</p-editor>
</div>
<div class="mb-4">
<label for="companyOverview" class="block font-medium text-900 mb-2">Services We offer</label>
<p-editor [(ngModel)]="user.offeredServices" [style]="{ height: '320px' }">
<ng-template pTemplate="header">
<span class="ql-formats">
<button type="button" class="ql-bold" aria-label="Bold"></button>
<button type="button" class="ql-italic" aria-label="Italic"></button>
<button type="button" class="ql-underline" aria-label="Underline"></button>
<button value="ordered" aria-label="Ordered List" type="button"
class="ql-list"></button>
<button value="bullet" aria-label="Unordered List" type="button"
class="ql-list"></button>
</span>
</ng-template>
<p-editor [(ngModel)]="user.offeredServices" [style]="{ height: '320px' }" [modules]="editorModules">
<ng-template pTemplate="header"></ng-template>
</p-editor>
</div>
@@ -126,7 +106,7 @@
<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>
@if(user.hasCompanyLogo){
<img src="{{environment.apiBaseUrl}}/logo/{{user.id}}.avif" class="rounded-profile" />
<img src="{{companyLogoUrl}}" class="rounded-profile" />
} @else {
<img src="assets/images/placeholder.png" class="rounded-profile" />
}
@@ -138,7 +118,7 @@
<div class="flex flex-column align-items-center flex-or">
<span class="font-medium text-900 mb-2">Your Profile Picture</span>
@if(user.hasProfile){
<img src="{{environment.apiBaseUrl}}/profile/{{user.id}}.avif" class="rounded-profile" />
<img src="{{profileUrl}}" class="rounded-profile" />
} @else {
<img src="assets/images/person_placeholder.jpg" class="rounded-profile" />
}
@@ -212,8 +192,7 @@
</div>
</div>
</div>
<p-dialog header="Edit Image" [visible]="imageUrl" [modal]="true" [style]="{ width: '50vw' }" [draggable]="false" [resizable]="false">
<!-- <app-cropper #cropper [imageUrl]="imageUrl"></app-cropper> -->
<!-- <p-dialog header="Edit Image" [visible]="imageUrl" [modal]="true" [style]="{ width: '50vw' }" [draggable]="false" [resizable]="false">
<angular-cropper #cropper [imageUrl]="imageUrl" [cropperOptions]="config"></angular-cropper>
<ng-template pTemplate="footer" let-config="config">
<div class="flex justify-content-between">
@@ -230,4 +209,4 @@
</div>
</div>
</ng-template>
</p-dialog>
</p-dialog> -->