@wizishop/img-manager 18.2.2-beta → 19.0.0-beta.1

package/README.md

@@ -1,394 +1,24 @@
-# Image Manager
-
-[![npm](https://img.shields.io/npm/v/@wizishop/img-manager.svg)](https://www.npmjs.com/package/@wizishop/img-manager)
-[![npm](https://img.shields.io/npm/dm/@wizishop/img-manager.svg)](https://www.npmjs.com/package/@wizishop/img-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);
-```
+# WzImgManager
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.0.3.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project wz-img-manager` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project wz-img-manager`.
+> Note: Don't forget to add `--project wz-img-manager` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build wz-img-manager` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build wz-img-manager`, go to the dist folder `cd dist/wz-img-manager` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test wz-img-manager` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).