diff --git a/src/_mixins.scss b/src/_mixins.scss index 450e1d4..facbc10 100644 --- a/src/_mixins.scss +++ b/src/_mixins.scss @@ -1,11 +1,12 @@ -// disable preset opacity: not readable +// disable preset of opacity in form: not readable @mixin make-disabled-form-readable-input { - :host { + :host ::ng-deep { .p-inputtext.p-component:disabled { opacity: unset; } } } + @mixin make-disabled-form-readable-dropdown { :host ::ng-deep { .p-dropdown.p-component.p-disabled { @@ -13,3 +14,24 @@ } } } + +@mixin prepare-inputgroup { + :host ::ng-deep { + .inputgroup-dropdown-with-link { + border-right: none; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + .input-field-correction .p-inputtext { + padding-top: 1rem !important; + padding-bottom: 0.5rem !important; + } + .pseudo-button:hover { + background: var(--button-hover-bg) !important; + cursor: pointer; + * { + background: var(--button-hover-bg) !important; + } + } + } +} diff --git a/src/app/product-store/product-detail/product-intern/product-intern.component.html b/src/app/product-store/product-detail/product-intern/product-intern.component.html index 2740de6..f440a46 100644 --- a/src/app/product-store/product-detail/product-intern/product-intern.component.html +++ b/src/app/product-store/product-detail/product-intern/product-intern.component.html @@ -1,6 +1,72 @@ -
+
+
+ + + + + + + + +
+ +
+ + + + + + + + + +
+
+ + diff --git a/src/app/product-store/product-detail/product-props/product-props.component.html b/src/app/product-store/product-detail/product-props/product-props.component.html index b5ac72b..762e3df 100644 --- a/src/app/product-store/product-detail/product-props/product-props.component.html +++ b/src/app/product-store/product-detail/product-props/product-props.component.html @@ -1,99 +1,143 @@
-
-
-
-
- - - - -
-
- - - - -
-
- - - - -
-
- - - - -
-
- - - - -
-
-
- - ? -
-
- - - - +
+
+
+ + + + +
+
+ + + + +
+
+ +
+
+ + + + +
+
+ + + + +
+
+ +
+
+
+ + +
+
+ + + + + + + +
-
- - - - -
-
- - - - -
-
- - - - -
+
+
+ + + + +
+
+ +
+
+ + + +
+ + {{ ico.label || 'dummy-for-renderer' }} +
+ + +
+ + {{ ico.label }} +
+ + + + +
+
+ + + + +
+
+
+
+ + + +
diff --git a/src/app/product-store/product-detail/product-props/product-props.component.scss b/src/app/product-store/product-detail/product-props/product-props.component.scss index 5499c7f..712c912 100644 --- a/src/app/product-store/product-detail/product-props/product-props.component.scss +++ b/src/app/product-store/product-detail/product-props/product-props.component.scss @@ -1,23 +1,5 @@ -@import './../../../../_mixins.scss'; +@import '/src/_mixins.scss'; @include make-disabled-form-readable-input; @include make-disabled-form-readable-dropdown; - -:host ::ng-deep { - .inputgroup-dropdown-with-link { - border-right: none; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - .input-field-correction .p-inputtext { - padding-top: 1rem !important; - padding-bottom: 0.5rem !important; - } - .pseudo-button:hover { - background: var(--button-hover-bg) !important; - cursor: pointer; - * { - background: var(--button-hover-bg) !important; - } - } -} +@include prepare-inputgroup; diff --git a/src/app/product-store/product-detail/product-props/product-props.component.ts b/src/app/product-store/product-detail/product-props/product-props.component.ts index 8c83480..807fde9 100644 --- a/src/app/product-store/product-detail/product-props/product-props.component.ts +++ b/src/app/product-store/product-detail/product-props/product-props.component.ts @@ -1,9 +1,13 @@ import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core' import { FormControl, FormGroup, Validators } from '@angular/forms' import { TranslateService } from '@ngx-translate/core' +import { SelectItem } from 'primeng/api' import { PortalMessageService } from '@onecx/portal-integration-angular' import { CreateProductRequest, Product, ProductsAPIService, UpdateProductRequest } from '../../../generated' +import { IconService } from '../../../shared/iconservice' +import { dropDownSortItemsByLabel } from 'src/app/shared/utils' +// import { setFetchUrls } from '../../../shared/utils' interface ProductDetailForm { id: FormControl @@ -20,7 +24,8 @@ interface ProductDetailForm { @Component({ selector: 'ps-product-props', - templateUrl: './product-props.component.html' + templateUrl: './product-props.component.html', + styleUrls: ['./product-props.component.scss'] }) export class ProductPropertyComponent implements OnChanges { @Input() product: Product | undefined @@ -31,8 +36,12 @@ export class ProductPropertyComponent implements OnChanges { public formGroup: FormGroup public productId: string | undefined public productName: string | null | undefined + public productOperator: string | undefined + public fetchingLogoUrl?: string + public iconItems: SelectItem[] = [{ label: '', value: null }] // default value is empty constructor( + private icon: IconService, private productApi: ProductsAPIService, private translate: TranslateService, private msgService: PortalMessageService @@ -41,7 +50,7 @@ export class ProductPropertyComponent implements OnChanges { id: new FormControl(null), name: new FormControl(null, [Validators.required, Validators.minLength(2), Validators.maxLength(255)]), displayName: new FormControl(null, [Validators.required, Validators.minLength(2), Validators.maxLength(255)]), - operator: new FormControl(null, [Validators.maxLength(255)]), + operator: new FormControl(null), version: new FormControl(null, [Validators.maxLength(255)]), description: new FormControl(null, [Validators.maxLength(255)]), imageUrl: new FormControl(null, [Validators.maxLength(255)]), @@ -49,6 +58,8 @@ export class ProductPropertyComponent implements OnChanges { iconName: new FormControl(null, [Validators.maxLength(255)]), classifications: new FormControl(null, [Validators.maxLength(255)]) }) + this.iconItems.push(...this.icon.icons.map((i) => ({ label: i, value: i }))) + this.iconItems.sort(dropDownSortItemsByLabel) } ngOnChanges(changes: SimpleChanges): void { @@ -129,4 +140,21 @@ export class ProductPropertyComponent implements OnChanges { } }) } + + public onFileUpload(ev: Event, fieldType: 'logo'): void { + if (ev.target && (ev.target as HTMLInputElement).files) { + const files = (ev.target as HTMLInputElement).files + if (files) { + Array.from(files).forEach((file) => { + /* + this.imageApi.uploadImage({ image: file }).subscribe((data) => { + this.formGroup.controls[fieldType + 'Url'].setValue(data.imageUrl) + this.fetchingLogoUrl = setFetchUrls(this.apiPrefix, this.formGroup.controls[fieldType + 'Url'].value) + this.msgService.info({ summaryKey: 'LOGO.UPLOADED', detailKey: 'LOGO.LOGO_URL' }) + }) + */ + }) + } + } + } } diff --git a/src/app/shared/iconservice.ts b/src/app/shared/iconservice.ts new file mode 100644 index 0000000..45ec40a --- /dev/null +++ b/src/app/shared/iconservice.ts @@ -0,0 +1,13 @@ +import { Injectable } from '@angular/core' + +const ICON_NAMES = + 'sort-alt-slash,arrows-h,arrows-v,pound,prime,chart-pie,reddit,code,sync,shopping-bag,server,database,hashtag,bookmark-fill,filter-fill,heart-fill,flag-fill,circle,circle-fill,bolt,history,box,at,arrow-up-right,arrow-up-left,arrow-down-left,arrow-down-right,telegram,stop-circle,stop,whatsapp,building,qrcode,car,instagram,linkedin,send,slack,moon,sun,youtube,vimeo,flag,wallet,map,link,credit-card,discord,percentage,euro,book,shield,paypal,amazon,phone,filter-slash,facebook,github,twitter,step-backward-alt,step-forward-alt,forward,backward,fast-backward,fast-forward,pause,play,compass,id-card,ticket,file-o,reply,directions-alt,directions,thumbs-up,thumbs-down,sort-numeric-down-alt,sort-numeric-up-alt,sort-alpha-down-alt,sort-alpha-up-alt,sort-numeric-down,sort-numeric-up,sort-alpha-down,sort-alpha-up,sort-alt,sort-amount-up,sort-amount-down,sort-amount-down-alt,sort-amount-up-alt,palette,undo,desktop,sliders-v,sliders-h,search-plus,search-minus,file-excel,file-pdf,check-square,chart-line,user-edit,exclamation-circle,android,google,apple,microsoft,heart,mobile,tablet,key,shopping-cart,comments,comment,briefcase,bell,paperclip,share-alt,envelope,volume-down,volume-up,volume-off,eject,money-bill,images,image,sign-in,sign-out,wifi,sitemap,chart-bar,camera,dollar,lock-open,table,map-marker,list,eye-slash,eye,folder-open,folder,video,inbox,lock,unlock,tags,tag,power-off,save,question-circle,question,copy,file,clone,calendar-times,calendar-minus,calendar-plus,ellipsis-v,ellipsis-h,bookmark,globe,replay,filter,print,align-right,align-left,align-center,align-justify,cog,cloud-download,cloud-upload,cloud,pencil,users,clock,user-minus,user-plus,trash,window-minimize,window-maximize,external-link,refresh,user,exclamation-triangle,calendar,chevron-circle-left,chevron-circle-down,chevron-circle-right,chevron-circle-up,angle-double-down,angle-double-left,angle-double-right,angle-double-up,angle-down,angle-left,angle-right,angle-up,upload,download,ban,star-fill,star,chevron-left,chevron-right,chevron-down,chevron-up,caret-left,caret-right,caret-down,caret-up,search,check,check-circle,times,times-circle,plus,plus-circle,minus,minus-circle,circle-on,circle-off,sort-down,sort-up,sort,step-backward,step-forward,th-large,arrow-down,arrow-left,arrow-right,arrow-up,bars,arrow-circle-down,arrow-circle-left,arrow-circle-right,arrow-circle-up,info,info-circle,home,spinner' + +@Injectable({ providedIn: 'any' }) +export class IconService { + constructor() { + this.icons = ICON_NAMES.split(',') + } + + icons: string[] +} diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json index 8ea22e4..5f0b2b9 100644 --- a/src/assets/i18n/de.json +++ b/src/assets/i18n/de.json @@ -105,7 +105,9 @@ "VERSION": "Version", "DESCRIPTION": "Beschreibung", "DISPLAY_NAME": "Anzeigename", - "OPERATOR": "Operator", + "OPERATOR": "Erzeugt durch", + "OPERATOR.MANUAL": "Manuell", + "OPERATOR.DEPLOYMENT": "Deployment Operator", "IMAGE_URL": "Image URL", "BASE_PATH": "Basispfad", "ICON_NAME": "Iconname", @@ -117,11 +119,11 @@ "VERSION": "Version des Produkts", "DESCRIPTION": "Beschreibung des Produkts", "DISPLAY_NAME": "Anzeigename des Produkts", - "OPERATOR": "Wer hat das Produkt angelegt?", + "OPERATOR": "Wie wurde das Produkt angelegt? Wird bei der Erstellung des Produkts bestimmt.", "IMAGE_URL": "Image URL", "BASE_PATH": "Der Basispfad wie das Produkt erreichbar ist. Muss eindeutig über alle Produkte sein", - "ICON_NAME": "Name der Icons aus der PrimeNG Icon Bibliothek. Benutzt z.b. als Default bei Menüeinträgen", - "CLASSIFICATIONS": "Klassifizierungen des Produkts, z.b. Game oder Tool. Kann zur Suche benutzt werden. Mehrere Einträge möglich", + "ICON_NAME": "Name eines Icons aus der PrimeNG Icon Bibliothek. Wird z.b. als Default bei Menüeinträgen benutzt", + "CLASSIFICATIONS": "Kommaseparierte Liste von Begriffen zur Klassifizierungen des Produkts, z.b. Game, Tool etc.. Kann zur Filterung benutzt werden", "WORKSPACES": "Workspaces, die das Produkt benutzen" } }, diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 5af5c86..2cee51a 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -105,7 +105,9 @@ "VERSION": "Version", "DESCRIPTION": "Description", "DISPLAY_NAME": "Display Name", - "OPERATOR": "Operator", + "OPERATOR": "Created by", + "OPERATOR.MANUAL": "Manual", + "OPERATOR.DEPLOYMENT": "Deployment Operator", "IMAGE_URL": "Image URL", "BASE_PATH": "Base Path", "ICON_NAME": "Icon Name", @@ -117,11 +119,11 @@ "VERSION": "Version of the Product", "DESCRIPTION": "Description of the Product", "DISPLAY_NAME": "Display Name of the Product", - "OPERATOR": "Wer hat das Produkt angelegt?", + "OPERATOR": "How the Product was created? Set at creation time.", "IMAGE_URL": "Image URL", - "BASE_PATH": "Der Basispfad wie das Produkt erreichbar ist. Muss eindeutig über alle Produkte sein", - "ICON_NAME": "Name der Icons aus der PrimeNG Icon Bibliothek. Benutzt z.b. als Default bei Menüeinträgen", - "CLASSIFICATIONS": "Klassifizierungen des Produkts, z.b. Game oder Tool. Kann zur Suche benutzt werden. Mehrere Einträge möglich", + "BASE_PATH": "The basic path through which the product can be accessed. It must be unique across all products", + "ICON_NAME": "Name of the icons from the PrimeNG icon library. Used, for example, as a default icon for menu entries", + "CLASSIFICATIONS": "Comma-separated list of terms to classify the product, e.g. Game, Tool etc. Can be used for filtering", "WORKSPACES": "Workspaces using the Product" } }, diff --git a/src/styles.scss b/src/styles.scss index 718a5fe..5a1f190 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -5,6 +5,3 @@ /* portal core */ @import '@onecx/portal-layout-styles/src/styles/shell/shell.scss'; @import '@onecx/portal-layout-styles/src/styles/primeng/theme-light.scss'; - -/* lokal */ -@import './_mixins.scss';