@wizishop/img-manager

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);