Image Manager
Install
Run:
npm install @wizishop/img-manager
Add Image Manager SCSS in your project
Add all the following styles in your main scss file.
Required styles
The required styles must be imported before the image-manager style.
$img-em-base: 16px!default;
$img-transition-base-time: 400ms!default;
@import '~bourbon/core/bourbon';
@import '~bulma/bulma';
@import '~bulma-extensions/bulma-switch/src/sass/index';
@import '~bulma-extensions/bulma-tooltip/src/sass/index';
@import '~@wizishop/ng-wizi-bulma/ng-wizi-bulma';
@import '~sass-flex-mixin/flex';
@import '@wizishop/img-manager/wz-img-manager';
Custom colors
Optional : The following scss colors variables can be overrided.
$wizishop-blue: #4baed0!default;
$img-gray-background: #f5f8fa!default;
$img-placeholder: #b5b5b5!default;
$img-red-color: #e74c3c!default;
$img-dark: #6c6c6c!default;
$img-really-bad-bad-bad-green: #a2c739!default;
$img-amount-hover: 8%!default;
$img-main-color: #4baed0!default;
$img-main-color-hover: darken($img-main-color, $img-amount-hover)!default;
$img-bleu-color: #4baed0!default;
$img-primary-button: $img-main-color!default;
$img-primary-button-hover: darken($img-primary-button, $img-amount-hover)!default;
$img-primary-button-desable: #dbdbdb!default;
$img-grey-color: #6B7881!default;
$img-green-color: #2ecc71!default;
$img-yellow-color: #faa945!default;
$img-orange-color: #F39C12!default;
$img-bleu-action: #3498DB!default;
$img-bright-red-color: #E95656!default;
$img-second-color: #6B7881!default;
$img-lightened-secondary: #d8d8d8!default;
$img-secondary-text: #6c6c6c!default;
$img-input-border: #dce0e3!default;
$img-light-white-color: #DCE0E3!default;
$img-main-text: #23272b!default;
$img-table-selected: #ddff98!default;
$img-color-loader: $img-main-color!default;
$img-color-loader2: $img-really-bad-bad-bad-green!default;
// Colors from wizi-admin components (table, sarch-input, pagination, checkbox...)
$gray-background: #f5f8fa!default;
$textarea-border-color: #dce0e3!default;
$main-text: #1d2a3b!default;
$secondary-color: #526384!default;
$second-color: #526384!default;
$border-form: #ccd1e0!default;
$background-color: #ecf0f1!default;
$table-background-color: #fafafa!default;
$input-border-search: #dee2edcc!default;
$placeholder-color: #b4bdd0!default;
$input-radio-color: #d8d8d8!default;
$input-active-color: $wizishop-blue!default;
$input-radio-color-label: #6b7881!default;
$input-radio-color-active-label: #1e2e43!default;
$border-color: #dee2ed!default;
Add Image manager assets
In your angular.json
file add the image manager assets dependency.
"assets": [
...
{
"glob": "**/*",
"input": "./node_modules/@wizishop/img-manager/assets/",
"output": "./assets/img-manager/"
}
]
Add Pro Icons from Font Awesome
In your index.html
file add the following balise.
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous" />
Add package dependencies
In your module like app.module.ts
:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { WzImgManagerModule, ApiService } from '@wizishop/img-manager';
import { AppComponent } from './app.component';
import { TranslateModule, TranslateLoader} from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
...
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/img-manager/i18n/', '.json');
}
...
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
WzImgManagerModule.withConfig({
provide: ApiService,
useClass: ImageManagerApiService,
},
{ // Optional
provide: ImageNotFoundService,
useClass: RemoveImageMissingService
}),
TranslateModule.forRoot({
defaultLanguage: 'fr',
loader: {
provide: TranslateLoader,
useFactory: (HttpLoaderFactory),
deps: [HttpClient]
}
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Provide the ApiService
You must provide the ApiService needed to fetch images, upload new images...
Your service should extends ApiService from @wizishop/img-manager
in order to implements all needed properties and methods.
Example:
@Injectable()
export class ImageManagerApiService implements ApiService {
SHOP_ID_KEY = "shopIdKey";
SHOP_TOKEN_KEY = "shopTokenKey";
get shopId(): number {
return Number(localStorage.getItem(this.SHOP_ID_KEY)) || 0;
}
get shopToken(): string {
return localStorage.getItem(this.SHOP_TOKEN_KEY) || '';
}
CONFIG = {
image_manager_route: `https://api.wizilocal.com/v3/image-manager/shops/${this.shopId}`,
canva_token: 'wdByHayF5v57nj2ZSLvu055O',
canva_url: 'https://sdk.canva.com/designbutton/v2/api.js',
pexels_token: '563492ad6f91700001000001e39215727d8b42c1b08498a9ce1e6b94',
pexels_route: 'https://api.pexels.com/v1',
assets_route: 'assets/img-manager/'
}
IMG_SIZE = {
url_raw_image: `https://mepdia.wizilocal.com/_i/${this.shopId}/RAW-`,
url_100_image: `https://media.wizilocal.com/_i/${this.shopId}/m100-`,
url_200_image: `https://media.wizilocal.com/_i/${this.shopId}/cs200-`,
url_400_image: `https://media.wizilocal.com/_i/${this.shopId}/cs400-`,
url_800_image: `https://media.wizilocal.com/_i/${this.shopId}/cs800-`
}
constructor(private http: HttpClient) {
}
getShopCategory(): string {
return 'other';
}
private getOptionsHeaders(params?: ParamsImgManagerDTO) {
const header = { headers: new HttpHeaders({
Authorization: 'Bearer ' + this.shopToken
})
};
if (params) {
header['params'] = params
}
return header;
}
getShopImgList(params?: ParamsImgManagerDTO): Observable<ImgPicturesDTO> {
return this.http.get<ImgPicturesDTO>(`${this.CONFIG.image_manager_route}/images`, this.getOptionsHeaders(params));
}
getShopTotalImgList(params?: ParamsImgManagerDTO) {
return this.http.get<{totalRecords: string}>(`${this.CONFIG.image_manager_route}/total/image`, this.getOptionsHeaders(params)).pipe(map(data => Number(data.totalRecords)));
}
getShopImg(idFile: string): Observable<ImgPictureDTO> {
return this.http.get<ImgPictureDTO>(`${this.CONFIG.image_manager_route}/images/${idFile}`, this.getOptionsHeaders());
}
uploadFile(formData: FormData) {
return this.http.post<ImgPictureDTO>(`${this.CONFIG.image_manager_route}/images/template`, formData, this.getOptionsHeaders());
}
uploadFileByUrl(url: string, fileName?: string) {
return this.http.post<ImgPictureDTO>(`${this.CONFIG.image_manager_route}/images/template`, { url, fileName }, this.getOptionsHeaders());
}
replaceImg(imageBase64: string, id_file: string) {
const body = {
imageBase64,
type : "RAW"
}
return this.http.put<ImgPictureDTO>(`${this.CONFIG.image_manager_route}/images/${id_file}/replace`, body, this.getOptionsHeaders());
}
changeImgName(fileName: string, id_file: string) {
return this.http.put<ImgPictureDTO>(`${this.CONFIG.image_manager_route}/images/${id_file}?file_name=${fileName}`, null, this.getOptionsHeaders());
}
removeImg(id_file: string) {
return this.http.delete<ImgPictureDTO>(`${this.CONFIG.image_manager_route}/images/${id_file}`, this.getOptionsHeaders());
}
removeMultipleImg(id_array: string[]) {
return this.http.post<ImgPictureDTO[]>(`${this.CONFIG.image_manager_route}/images-multiple-delete`, { id_array }, this.getOptionsHeaders());
}
}
Optional: Provide the ImageNotFoundService
Example:
@Injectable()
export class RemoveImageMissingService extends ImageNotFoundService {
http = inject(HttpClient);
constructor() {
super();
}
imageNotFound(url: string): void {
this.removeImgIfMIssing(url).subscribe((res) => {
console.log(res);
});
}
private getOptionsHeaders() {
const header = { headers: new HttpHeaders({
Authorization: 'Bearer ' + this.shopToken
})
};
return header;
}
removeImgIfMIssing(url: string) {
return this.http.post<boolean>(`https://api.wizilocal.com/v3/image-manager/shops/${this.shopId}/image/remove-if-missing`, {url}, this.getOptionsHeaders());
}
}
Install external package dependencies
The list of all external package required by the image manager is listed at at the end of the installation.
Install all the dependencies packages.
It should look like that :
npm i tslib @angular/core @ngx-translate @angular/common rxjs @wizishop/ng-wizi-bulma @angular/common @angular/forms ngx-scrollbar ngx-scrollbar/reached-event ngx-image-cropper @angular/cdk/table
Image Manager setup
Choose the image manager display
You can choose the display config with the parameter passed in the getImgManagerDisplayConfig method.
imgManagerDisplayConfig = this.imgManagerService.getImgManagerDisplayConfig('wizi-block');
Html file :
<wz-img-manager
[stateDisplayed]="imgManagerDisplayConfig.stateDisplayed"
[multipleImgMode]="imgManagerDisplayConfig.multipleImgMode"
[showImgManagerModule]="imgManagerDisplayConfig.showImgManagerModule && openImgManager"
[showSelection]="imgManagerDisplayConfig.showSelection"
(imgManagerClosed)="onImgManagerClosed()"
(imgSelectionChange)="onImageSelected($event)"
(imageUploaded)="onImgUploaded($event)"
>
</wz-img-manager>
Detect when an image is selected
TS file :
onImageSelected(imgPictures: ImgPictureDTO[]) {
if (!this.waitForImage) {
return;
}
if (imgPictures && imgPictures.length) {
this.setImgInWiziBlock(imgPictures[0].file_name, imgPictures[0].id_file);
}
}
Set Canva expected image size
The this.canvaService.expectedImgSizesChange(mediaDto);
send the expected size of the image asked by the wizi block. It is optional.
Config the translations
This project use ngx-translate module
for the internationalization.
In the imported project, in the app.module.ts
:
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient } from '@angular/common/http';
// Define which translations files to used
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
imports: [
...,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
},
})
],
...
})
If you integrate the image manager module as a lazy module, in your shared.module.ts
file:
import { TranslateModule } from '@ngx-translate/core';
@NgModule({
imports: [
...,
TranslateModule
],
...
})
And somewhere in the project or in a custom translate loader :
import { TranslateService } from '@ngx-translate/core';
private defaultLang = 'fr';
constructor(private translateService: TranslateService) {
this.translateService.setDefaultLang(this.defaultLang);
}
// Change the lang used
this.translateService.use(lang);