carloshra/nexus-spa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v17 update

Browse Source
This commit is contained in:
Mehmet Çetin
2023-12-20 10:48:11 +03:00
parent ba2fb4b774
commit 1787a3d6a5
9 changed files with 13384 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
angular.json
View File

@@ -25,7 +25,6 @@
], ],
"tsConfig": "tsconfig.app.json", "tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss", "inlineStyleLanguage": "scss",
"aot": true,
"assets": [ "assets": [
"src/favicon.ico", "src/favicon.ico",
"src/assets" "src/assets"
@@ -33,29 +32,20 @@
"styles": [ "styles": [
"src/styles.scss" "src/styles.scss"
], ],
"scripts": [ "scripts": []
"node_modules/prismjs/prism.js",
"node_modules/prismjs/components/prism-typescript.js"
]
}, },
"configurations": { "configurations": {
"production": { "production": {
"budgets": [ "budgets": [
{ {
"type": "initial", "type": "initial",
"maximumWarning": "3mb", "maximumWarning": "1mb",
"maximumError": "5mb" "maximumError": "5mb"
}, },
{ {
"type": "anyComponentStyle", "type": "anyComponentStyle",
"maximumWarning": "6kb", "maximumWarning": "2kb",
"maximumError": "10kb" "maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
} }
], ],
"outputHashing": "all" "outputHashing": "all"
@@ -73,15 +63,12 @@
}, },
"serve": { "serve": {
"builder": "@angular-devkit/build-angular:dev-server", "builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "sakai-ng:build"
},
"configurations": { "configurations": {
"production": { "production": {
"browserTarget": "sakai-ng:build:production" "buildTarget": "sakai-ng:build:production"
}, },
"development": { "development": {
"browserTarget": "sakai-ng:build:development" "buildTarget": "sakai-ng:build:development"
} }
}, },
"defaultConfiguration": "development" "defaultConfiguration": "development"
@@ -89,13 +76,12 @@
"extract-i18n": { "extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n", "builder": "@angular-devkit/build-angular:extract-i18n",
"options": { "options": {
"browserTarget": "sakai-ng:build" "buildTarget": "sakai-ng:build"
} }
}, },
"test": { "test": {
"builder": "@angular-devkit/build-angular:karma", "builder": "@angular-devkit/build-angular:karma",
"options": { "options": {
"main": "src/test.ts",
"polyfills": [ "polyfills": [
"zone.js", "zone.js",
"zone.js/testing" "zone.js/testing"
@@ -103,33 +89,17 @@
"tsConfig": "tsconfig.spec.json", "tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js", "karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss", "inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [ "styles": [
"src/styles.scss" "src/styles.scss"
], ],
"scripts": [], "scripts": []
"assets": [
"src/favicon.ico",
"src/upload.php",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
} }
} }
} }
} }
},
"cli": {
"analytics": false
} }
} }

13223
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

40
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "sakai-ng", "name": "sakai-ng",
"version": "16.0.0", "version": "17.0.0",
"license": "PrimeNG Commercial", "license": "PrimeNG Commercial",
"scripts": { "scripts": {
"ng": "ng", "ng": "ng",
@@ -12,15 +12,15 @@
}, },
"private": true, "private": true,
"dependencies": { "dependencies": {
"@angular/animations": "^16.1.0", "@angular/animations": "^17.0.5",
"@angular/cdk": "^16.1.0", "@angular/cdk": "^17.0.2",
"@angular/common": "^16.1.0", "@angular/common": "^17.0.5",
"@angular/compiler": "^16.1.0", "@angular/compiler": "^17.0.5",
"@angular/core": "^16.1.0", "@angular/core": "^17.0.5",
"@angular/forms": "^16.1.0", "@angular/forms": "^17.0.5",
"@angular/platform-browser": "^16.1.0", "@angular/platform-browser": "^17.0.5",
"@angular/platform-browser-dynamic": "^16.1.0", "@angular/platform-browser-dynamic": "^17.0.5",
"@angular/router": "^16.1.0", "@angular/router": "^17.0.5",
"@fullcalendar/angular": "^6.0.3", "@fullcalendar/angular": "^6.0.3",
"@fullcalendar/core": "^6.0.3", "@fullcalendar/core": "^6.0.3",
"@fullcalendar/daygrid": "^6.0.3", "@fullcalendar/daygrid": "^6.0.3",
@@ -29,24 +29,24 @@
"chart.js": "^3.3.2", "chart.js": "^3.3.2",
"primeflex": "^3.3.1", "primeflex": "^3.3.1",
"primeicons": "6.0.1", "primeicons": "6.0.1",
"primeng": "16.0.2", "primeng": "17.1.0",
"quill": "^1.3.7", "quill": "^1.3.7",
"rxjs": "~7.8.0", "rxjs": "~7.8.1",
"tslib": "^2.3.0", "tslib": "^2.5.0",
"zone.js": "~0.13.0", "zone.js": "~0.14.0",
"prismjs": "^1.29.0" "prismjs": "^1.29.0"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "^16.1.5", "@angular-devkit/build-angular": "^17.0.5",
"@angular/cli": "~16.1.5", "@angular/cli": "^17.0.5",
"@angular/compiler-cli": "^16.1.0", "@angular/compiler-cli": "^17.0.5",
"@types/jasmine": "~4.3.0", "@types/jasmine": "~4.3.1",
"jasmine-core": "~4.6.0", "jasmine-core": "~4.6.0",
"karma": "~6.4.0", "karma": "~6.4.2",
"karma-chrome-launcher": "~3.2.0", "karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0", "karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0", "karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0", "karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.1.3" "typescript": "~5.2.2"
} }
} }

14
src/app/demo/components/documentation/documentation.component.html
View File

@@ -2,9 +2,9 @@
<div> <div>
<h2>Documentation</h2> <h2>Documentation</h2>
<h4>Getting Started</h4> <h4>Getting Started</h4>
<p>Sakai is an application template for Angular and is distributed as a CLI project. Current versions is Angular v16 with PrimeNG v16. In case CLI is not installed already, use the command below to set it up.</p> <p>Sakai is an application template for Angular and is distributed as a CLI project. Current versions is Angular v17 with PrimeNG v17. In case CLI is not installed already, use the command below to set it up.</p>
<pre class="app-code"><code>npm install -g @angular/cli</code></pre> <pre class="app-code"><code>npm install -g &#64;angular/cli</code></pre>
<p>Once CLI is ready in your system, extract the contents of the zip file distribution, cd to the directory, <p>Once CLI is ready in your system, extract the contents of the zip file distribution, cd to the directory,
install the libraries from npm and then execute "ng serve" to run the application in your local environment.</p> install the libraries from npm and then execute "ng serve" to run the application in your local environment.</p>
@@ -41,11 +41,11 @@ Run 'ng help' for more options.</code></pre>
initial scale is defined with the <span class="text-primary font-medium">$scale</span> at <strong class="font-semibold">layout.scss</strong>. When default theme or scale is changed at their files initially, it is required to configure the layout service with the matching values initial scale is defined with the <span class="text-primary font-medium">$scale</span> at <strong class="font-semibold">layout.scss</strong>. When default theme or scale is changed at their files initially, it is required to configure the layout service with the matching values
to avoid sync issues. </p> to avoid sync issues. </p>
<pre class="app-code"><code>import &#123; Component, OnInit &#125; from '@angular/core'; <pre class="app-code"><code>import &#123; Component, OnInit &#125; from '&#64;angular/core';
import &#123; PrimeNGConfig &#125; from 'primeng/api'; import &#123; PrimeNGConfig &#125; from 'primeng/api';
import &#123; LayoutService &#125; from './layout/service/app.layout.service'; import &#123; LayoutService &#125; from './layout/service/app.layout.service';
@Component(&#123; &#64;Component(&#123;
selector: 'app-root', selector: 'app-root',
templateUrl: './app.component.html' templateUrl: './app.component.html'
&#125;) &#125;)
@@ -73,10 +73,10 @@ export class AppComponent implements OnInit &#123;
<p>Menu is a separate component defined in <span class="text-primary font-medium">src/app/layout/app.menu.component.ts</span> file and based on PrimeNG MenuModel API. In order to define the menuitems, <p>Menu is a separate component defined in <span class="text-primary font-medium">src/app/layout/app.menu.component.ts</span> file and based on PrimeNG MenuModel API. In order to define the menuitems,
navigate to this file and define your own model as a nested structure.</p> navigate to this file and define your own model as a nested structure.</p>
<pre class="app-code"><code>import &#123; OnInit &#125; from '@angular/core'; <pre class="app-code"><code>import &#123; OnInit &#125; from '&#64;angular/core';
import &#123; Component &#125; from '@angular/core'; import &#123; Component &#125; from '&#64;angular/core';
@Component(&#123; &#64;Component(&#123;
selector: 'app-menu', selector: 'app-menu',
templateUrl: './app.menu.component.html' templateUrl: './app.menu.component.html'
&#125;) &#125;)

90
src/app/demo/components/uikit/floatlabel/floatlabeldemo.component.html
View File

@@ -1,37 +1,63 @@
<div class="card"> <div class="card">
<h5>Float Label</h5> <h5>Float Label</h5>
<p>All input text components support floating labels by adding (<mark>.p-float-label</mark>) to wrapper class.</p> <p>
All input text components support floating labels by adding
(<mark>.p-float-label</mark>) to wrapper class.
</p>
<div class="grid p-fluid mt-3"> <div class="grid p-fluid mt-3">
<div class="field col-12 md:col-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<input type="text" id="inputtext" pInputText [(ngModel)]="value1"> <input
type="text"
id="inputtext"
pInputText
[(ngModel)]="value1"
/>
<label for="inputtext">InputText</label> <label for="inputtext">InputText</label>
</span> </span>
</div> </div>
<div class="field col-12 md:col-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<p-autoComplete inputId="autocomplete" [(ngModel)]="value2" [suggestions]="filteredCountries" <p-autoComplete
(completeMethod)="searchCountry($event)" field="name"></p-autoComplete> inputId="autocomplete"
[(ngModel)]="value2"
[suggestions]="filteredCountries"
(completeMethod)="searchCountry($event)"
field="name"
></p-autoComplete>
<label for="autocomplete">AutoComplete</label> <label for="autocomplete">AutoComplete</label>
</span> </span>
</div> </div>
<div class="field col-12 md:col-4"> <div class="field col-12 md:col-4">
<span class="p-float-label p-input-icon-left"> <span class="p-float-label p-input-icon-left">
<i class="pi pi-search"></i> <i class="pi pi-search"></i>
<input type="text" id="lefticon" pInputText [(ngModel)]="value3"> <input
type="text"
id="lefticon"
pInputText
[(ngModel)]="value3"
/>
<label for="lefticon">Left Icon</label> <label for="lefticon">Left Icon</label>
</span> </span>
</div> </div>
<div class="field col-12 md:col-4"> <div class="field col-12 md:col-4">
<span class="p-float-label p-input-icon-right"> <span class="p-float-label p-input-icon-right">
<input type="text" id="righticon" pInputText [(ngModel)]="value4"> <input
type="text"
id="righticon"
pInputText
[(ngModel)]="value4"
/>
<label for="righticon">Right Icon</label> <label for="righticon">Right Icon</label>
<i class="pi pi-spin pi-spinner"></i> <i class="pi pi-spin pi-spinner"></i>
</span> </span>
</div> </div>
<div class="field col-12 md:col-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<p-calendar inputId="calendar" [(ngModel)]="value5"></p-calendar> <p-calendar
inputId="calendar"
[(ngModel)]="value5"
></p-calendar>
<label for="calendar">Calendar</label> <label for="calendar">Calendar</label>
</span> </span>
</div> </div>
@@ -43,42 +69,72 @@
</div> </div>
<div class="field col-12 md:col-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<p-inputMask inputId="inputmask" mask="99/99/9999" [(ngModel)]="value7"></p-inputMask> <p-inputMask
inputId="inputmask"
mask="99/99/9999"
[(ngModel)]="value7"
></p-inputMask>
<label for="inputmask">InputMask</label> <label for="inputmask">InputMask</label>
</span> </span>
</div> </div>
<div class="field col-12 md:col-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<p-inputNumber inputId="inputnumber" [(ngModel)]="value8"></p-inputNumber> <p-inputNumber
inputId="inputnumber"
[(ngModel)]="value8"
></p-inputNumber>
<label for="inputnumber">InputNumber</label> <label for="inputnumber">InputNumber</label>
</span> </span>
</div> </div>
<div class="field col-12 md:col-4"> <div class="field col-12 md:col-4">
<div class="p-inputgroup"> <p-inputGroup>
<span class="p-inputgroup-addon"> <p-inputGroupAddon>
<i class="pi pi-user"></i> <i class="pi pi-user"></i>
</span> </p-inputGroupAddon>
<span class="p-float-label"> <span class="p-float-label">
<input type="text" inputId="inputgroup" pInputText [(ngModel)]="value9"> <input
type="text"
inputId="inputgroup"
pInputText
[(ngModel)]="value9"
/>
<label for="inputgroup">InputGroup</label> <label for="inputgroup">InputGroup</label>
</span> </span>
</div> </p-inputGroup>
</div> </div>
<div class="field col-12 md:col-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<p-dropdown inputId="dropdown" [autoDisplayFirst]="false" [options]="cities" [(ngModel)]="value10" optionLabel="name"></p-dropdown> <p-dropdown
inputId="dropdown"
[autoDisplayFirst]="false"
[options]="cities"
[(ngModel)]="value10"
optionLabel="name"
></p-dropdown>
<label for="dropdown">Dropdown</label> <label for="dropdown">Dropdown</label>
</span> </span>
</div> </div>
<div class="field col-12 md:col-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<p-multiSelect inputId="multiselect" [options]="cities" [(ngModel)]="value11" optionLabel="name" [filter]="false"></p-multiSelect> <p-multiSelect
inputId="multiselect"
[options]="cities"
[(ngModel)]="value11"
optionLabel="name"
[filter]="false"
></p-multiSelect>
<label for="multiselect">MultiSelect</label> <label for="multiselect">MultiSelect</label>
</span> </span>
</div> </div>
<div class="field col-12 md:col-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<textarea inputId="textarea" rows="3" cols="30" [(ngModel)]="value12" pInputTextarea></textarea> <textarea
inputId="textarea"
rows="3"
cols="30"
[(ngModel)]="value12"
pInputTextarea
></textarea>
<label for="textarea">Textarea</label> <label for="textarea">Textarea</label>
</span> </span>
</div> </div>

7
src/app/demo/components/uikit/floatlabel/floatlabeldemo.module.ts
View File

@@ -13,7 +13,8 @@ import { CascadeSelectModule } from "primeng/cascadeselect";
import { MultiSelectModule } from "primeng/multiselect"; import { MultiSelectModule } from "primeng/multiselect";
import { InputTextareaModule } from "primeng/inputtextarea"; import { InputTextareaModule } from "primeng/inputtextarea";
import { InputTextModule } from "primeng/inputtext"; import { InputTextModule } from "primeng/inputtext";
import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
import { InputGroupModule } from 'primeng/inputgroup';
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, CommonModule,
@@ -28,7 +29,9 @@ import { InputTextModule } from "primeng/inputtext";
CascadeSelectModule, CascadeSelectModule,
MultiSelectModule, MultiSelectModule,
InputTextareaModule, InputTextareaModule,
InputTextModule InputTextModule,
InputGroupModule,
InputGroupAddonModule
], ],
declarations: [FloatLabelDemoComponent] declarations: [FloatLabelDemoComponent]
}) })

55
src/app/demo/components/uikit/input/inputdemo.component.html
View File

@@ -170,32 +170,41 @@
<h5>InputGroup</h5> <h5>InputGroup</h5>
<div class="grid"> <div class="grid">
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
<div class="p-inputgroup"> <p-inputGroup>
<span class="p-inputgroup-addon"><i class="pi pi-user"></i></span> <p-inputGroupAddon>
<input type="text" pInputText placeholder="Username"> <i class="pi pi-user"></i>
</div> </p-inputGroupAddon>
</div> <input pInputText type="text" placeholder="Username" />
</p-inputGroup>
</div>
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
<div class="p-inputgroup"> <p-inputGroup class="w-full">
<span class="p-inputgroup-addon"><i class="pi pi-tags" style="line-height: 1.25;"></i></span> <p-inputGroupAddon>
<span class="p-inputgroup-addon"><i class="pi pi-shopping-cart" style="line-height: 1.25;"></i></span> <i class="pi pi-tags" style="line-height: 1.25"></i>
<input type="text" pInputText placeholder="Price"> </p-inputGroupAddon>
<span class="p-inputgroup-addon">$</span>
<span class="p-inputgroup-addon">.00</span> <p-inputGroupAddon>
</div> <i class="pi pi-shopping-cart" style="line-height: 1.25"></i>
</div> </p-inputGroupAddon>
<input type="text" pInputText placeholder="Price" />
<p-inputGroupAddon>$</p-inputGroupAddon>
<p-inputGroupAddon>.00</p-inputGroupAddon>
</p-inputGroup>
</div>
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
<div class="p-inputgroup"> <p-inputGroup>
<button type="button" pButton pRipple label="Search"></button> <button type="button" pButton label="Search"></button>
<input type="text" pInputText placeholder="Keyword"> <input type="text" pInputText placeholder="Keyword" />
</div> </p-inputGroup>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
<div class="p-inputgroup"> <p-inputGroup>
<span class="p-inputgroup-addon"><p-checkbox [(ngModel)]="valCheck2" [binary]="true"></p-checkbox></span> <p-inputGroupAddon><p-checkbox [(ngModel)]="valCheck2"
<input type="text" pInputText placeholder="Username"> [binary]="true"></p-checkbox></p-inputGroupAddon>
</div> <input type="text" pInputText placeholder="Username" />
</div> </p-inputGroup>
</div>
</div> </div>
</div> </div>
</div> </div>

7
src/app/demo/components/uikit/input/inputdemo.module.ts
View File

@@ -25,7 +25,8 @@ import { RadioButtonModule } from 'primeng/radiobutton';
import { ColorPickerModule } from 'primeng/colorpicker'; import { ColorPickerModule } from 'primeng/colorpicker';
import { ToggleButtonModule } from 'primeng/togglebutton'; import { ToggleButtonModule } from 'primeng/togglebutton';
import { SliderModule } from 'primeng/slider'; import { SliderModule } from 'primeng/slider';
import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
import { InputGroupModule } from 'primeng/inputgroup';
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, CommonModule,
@@ -52,7 +53,9 @@ import { SliderModule } from 'primeng/slider';
ListboxModule, ListboxModule,
SelectButtonModule, SelectButtonModule,
CheckboxModule, CheckboxModule,
ButtonModule ButtonModule,
InputGroupModule,
InputGroupAddonModule
], ],
declarations: [InputDemoComponent] declarations: [InputDemoComponent]
}) })

10
src/app/demo/components/uikit/list/listdemo.component.html
View File

@@ -14,8 +14,8 @@
</div> </div>
</ng-template> </ng-template>
<ng-template let-product pTemplate="listItem"> <ng-template let-products pTemplate="listItem">
<div class="col-12"> <div class="col-12" *ngFor="let product of products">
<div class="flex flex-column md:flex-row align-items-center p-3 w-full"> <div class="flex flex-column md:flex-row align-items-center p-3 w-full">
<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" class="my-4 md:my-0 w-9 md:w-10rem shadow-2 mr-5"/> <img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" class="my-4 md:my-0 w-9 md:w-10rem shadow-2 mr-5"/>
<div class="flex-1 flex flex-column align-items-center text-center md:text-left"> <div class="flex-1 flex flex-column align-items-center text-center md:text-left">
@@ -36,8 +36,9 @@
</div> </div>
</ng-template> </ng-template>
<ng-template let-product pTemplate="gridItem"> <ng-template let-products pTemplate="gridItem">
<div class="col-12 md:col-4"> <div class="grid grid-nogutter">
<div class="col-12 md:col-4" *ngFor="let product of products">
<div class="card m-3 border-1 surface-border"> <div class="card m-3 border-1 surface-border">
<div class="flex flex-wrap gap-2 align-items-center justify-content-between mb-2"> <div class="flex flex-wrap gap-2 align-items-center justify-content-between mb-2">
<div class="flex align-items-center"> <div class="flex align-items-center">
@@ -58,6 +59,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</ng-template> </ng-template>
</p-dataView> </p-dataView>
</div> </div>