coer-elements 2.0.5 → 2.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/lib/coer-button/coer-button.component.d.ts +7 -7
- package/components/lib/coer-checkbox/coer-checkbox.component.d.ts +1 -1
- package/components/lib/coer-datebox/coer-datebox.component.d.ts +8 -7
- package/components/lib/coer-dropdown/coer-dropdown.component.d.ts +12 -12
- package/components/lib/coer-filebox/coer-filebox.component.d.ts +7 -7
- package/components/lib/coer-form/coer-form.component.d.ts +1 -1
- package/components/lib/coer-grid/coer-grid.component.d.ts +9 -9
- package/components/lib/coer-grid/coer-grid.extension.d.ts +19 -15
- package/components/lib/coer-list/coer-list.component.d.ts +9 -9
- package/components/lib/coer-modal/coer-modal.component.d.ts +1 -1
- package/components/lib/coer-numberbox/coer-numberbox.component.d.ts +1 -1
- package/components/lib/coer-secretbox/coer-secretbox.component.d.ts +1 -1
- package/components/lib/coer-sidenav/coer-toolbar/coer-toolbar.component.d.ts +8 -7
- package/components/lib/coer-switch/coer-switch.component.d.ts +1 -1
- package/components/lib/coer-textarea/coer-textarea.component.d.ts +1 -1
- package/components/lib/coer-textbox/coer-textbox.component.d.ts +1 -1
- package/fesm2022/coer-elements-components.mjs +190 -190
- package/fesm2022/coer-elements-components.mjs.map +1 -1
- package/fesm2022/coer-elements-guards.mjs +6 -6
- package/fesm2022/coer-elements-guards.mjs.map +1 -1
- package/fesm2022/coer-elements-interceptors.mjs +1 -1
- package/fesm2022/coer-elements-interceptors.mjs.map +1 -1
- package/fesm2022/coer-elements-interfaces.mjs.map +1 -1
- package/fesm2022/coer-elements-pages.mjs +213 -174
- package/fesm2022/coer-elements-pages.mjs.map +1 -1
- package/fesm2022/coer-elements-services.mjs +1 -1
- package/fesm2022/coer-elements-services.mjs.map +1 -1
- package/fesm2022/coer-elements-signals.mjs.map +1 -1
- package/fesm2022/coer-elements-tools.mjs +13 -1
- package/fesm2022/coer-elements-tools.mjs.map +1 -1
- package/fesm2022/coer-elements.mjs.map +1 -1
- package/interfaces/lib/coer-grid/grid-button-by-row.interface.d.ts +3 -0
- package/interfaces/lib/coer-grid/grid-header-button.interface.d.ts +1 -0
- package/interfaces/lib/coer-grid/grid-header-export-button.interface.d.ts +1 -0
- package/interfaces/lib/coer-grid/grid-header-import-button.interface.d.ts +1 -0
- package/interfaces/lib/coer-menu/menu-toolbar.interface.d.ts +6 -0
- package/interfaces/lib/login/user-login-response.interface.d.ts +12 -0
- package/interfaces/lib/login/user-login.interface.d.ts +10 -0
- package/interfaces/public-api.d.ts +4 -4
- package/package.json +5 -5
- package/pages/lib/coer-system/coer-system.component.d.ts +53 -34
- package/pages/lib/coer-system/login/login.component.d.ts +15 -15
- package/styles/coer-elements.css +2 -2
- package/tools/lib/user.class.d.ts +3 -2
- package/interfaces/lib/image.interface.d.ts +0 -11
- package/interfaces/lib/login-response.interface.d.ts +0 -10
- package/interfaces/lib/toolbar-menu.interface.d.ts +0 -5
- /package/interfaces/lib/{login.interface.d.ts → login/login.interface.d.ts} +0 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { computed, effect, Component, viewChild,
|
|
2
|
+
import { computed, effect, Component, viewChild, output, inject, signal, input, Input, NgModule } from '@angular/core';
|
|
3
3
|
import { CommonModule } from '@angular/common';
|
|
4
4
|
import * as i1$1 from '@angular/forms';
|
|
5
5
|
import { FormsModule } from '@angular/forms';
|
|
@@ -12,6 +12,8 @@ import * as i2 from 'coer-elements/components';
|
|
|
12
12
|
import { ComponentsModule } from 'coer-elements/components';
|
|
13
13
|
import * as i3 from 'coer-elements/directives';
|
|
14
14
|
import { DirectivesModule } from 'coer-elements/directives';
|
|
15
|
+
import { JWTService } from 'coer-elements/services';
|
|
16
|
+
import moment from 'moment';
|
|
15
17
|
|
|
16
18
|
class CoerMenuPage extends Page {
|
|
17
19
|
constructor() {
|
|
@@ -71,19 +73,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
71
73
|
|
|
72
74
|
class LoginPage {
|
|
73
75
|
constructor() {
|
|
76
|
+
//appSettings
|
|
77
|
+
this._appName = Tools.AvoidNull(appSettings?.appInfo?.name, 'string');
|
|
74
78
|
//Elements
|
|
75
|
-
this.
|
|
76
|
-
this.
|
|
77
|
-
this.
|
|
79
|
+
this._inputUser = viewChild.required('inputUser');
|
|
80
|
+
this._inputPassword = viewChild.required('inputPassword');
|
|
81
|
+
this._inputRecovery = viewChild.required('inputRecovery');
|
|
78
82
|
//Signals
|
|
79
|
-
this.
|
|
80
|
-
//Inputs
|
|
81
|
-
this.title = input('');
|
|
83
|
+
this._isLoading = isLoadingSIGNAL;
|
|
82
84
|
//Variables
|
|
83
|
-
this.
|
|
84
|
-
this.
|
|
85
|
-
this.
|
|
86
|
-
this.
|
|
85
|
+
this._user = '';
|
|
86
|
+
this._password = '';
|
|
87
|
+
this._remember = false;
|
|
88
|
+
this._show = 'LOGIN';
|
|
87
89
|
//Outputs
|
|
88
90
|
this.onLogin = output();
|
|
89
91
|
this.onRecovery = output();
|
|
@@ -91,120 +93,110 @@ class LoginPage {
|
|
|
91
93
|
this.IsNotOnlyWhiteSpace = Tools.IsNotOnlyWhiteSpace;
|
|
92
94
|
}
|
|
93
95
|
//getter
|
|
94
|
-
get
|
|
95
|
-
return Tools.IsNotOnlyWhiteSpace(this.
|
|
96
|
-
&& Tools.IsNotOnlyWhiteSpace(this.
|
|
97
|
-
&& this.
|
|
96
|
+
get _enableButton() {
|
|
97
|
+
return Tools.IsNotOnlyWhiteSpace(this._user)
|
|
98
|
+
&& Tools.IsNotOnlyWhiteSpace(this._password)
|
|
99
|
+
&& this._password.length >= 6;
|
|
98
100
|
}
|
|
99
101
|
//getter
|
|
100
|
-
get
|
|
101
|
-
return Tools.IsNotOnlyWhiteSpace(this.
|
|
102
|
-
&& this.
|
|
102
|
+
get _enableRecoveryButton() {
|
|
103
|
+
return Tools.IsNotOnlyWhiteSpace(this._user)
|
|
104
|
+
&& this._user.length >= 6;
|
|
103
105
|
}
|
|
104
106
|
/** */
|
|
105
|
-
|
|
106
|
-
if (this.
|
|
107
|
+
__Login() {
|
|
108
|
+
if (this._enableButton) {
|
|
107
109
|
this.onLogin.emit({
|
|
108
|
-
user: this.
|
|
109
|
-
password: this.
|
|
110
|
+
user: this._user,
|
|
111
|
+
password: this._password
|
|
110
112
|
});
|
|
111
113
|
}
|
|
112
114
|
}
|
|
113
115
|
/** */
|
|
114
|
-
|
|
115
|
-
if (this.
|
|
116
|
-
this.onRecovery.emit(this.
|
|
116
|
+
__Recovery() {
|
|
117
|
+
if (this._enableRecoveryButton) {
|
|
118
|
+
this.onRecovery.emit(this._user);
|
|
117
119
|
}
|
|
118
120
|
}
|
|
119
121
|
/** */
|
|
120
122
|
async Show(view) {
|
|
121
|
-
this.
|
|
123
|
+
this._show = view;
|
|
122
124
|
await Tools.Sleep(150);
|
|
123
|
-
if (view === '
|
|
124
|
-
this.
|
|
125
|
+
if (view === 'RECOVERY') {
|
|
126
|
+
this._inputRecovery().Focus();
|
|
125
127
|
}
|
|
126
|
-
else if (view === '
|
|
127
|
-
this.
|
|
128
|
+
else if (view === 'LOGIN') {
|
|
129
|
+
this._inputUser().Focus();
|
|
128
130
|
}
|
|
129
131
|
}
|
|
130
132
|
/** */
|
|
131
133
|
FocusUser() {
|
|
132
|
-
this.
|
|
134
|
+
this._inputUser().Focus();
|
|
133
135
|
}
|
|
134
136
|
/** */
|
|
135
137
|
FocusPassword() {
|
|
136
|
-
this.
|
|
138
|
+
this._inputPassword().Focus(true);
|
|
137
139
|
}
|
|
138
140
|
/** */
|
|
139
141
|
SetUser(user) {
|
|
140
|
-
this.
|
|
142
|
+
this._user = user;
|
|
141
143
|
}
|
|
142
144
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: LoginPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
143
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: LoginPage, isStandalone: false, selector: "login-page",
|
|
145
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: LoginPage, isStandalone: false, selector: "login-page", outputs: { onLogin: "onLogin", onRecovery: "onRecovery" }, viewQueries: [{ propertyName: "_inputUser", first: true, predicate: ["inputUser"], descendants: true, isSignal: true }, { propertyName: "_inputPassword", first: true, predicate: ["inputPassword"], descendants: true, isSignal: true }, { propertyName: "_inputRecovery", first: true, predicate: ["inputRecovery"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"login-container\">\r\n\r\n <!-- Title -->\r\n <div class=\"title\">\r\n {{ _appName }}\r\n </div>\r\n \r\n @if(_show === 'LOGIN') {\r\n <section>\r\n <!-- User -->\r\n <coer-textbox\r\n #inputUser\r\n label=\"User\"\r\n [(ngModel)]=\"_user\"\r\n [isLoading]=\"_isLoading()\" \r\n marginTop=\"35px\"\r\n marginBottom=\"35px\"\r\n [maxLength]=\"15\"\r\n (onKeyupEnter)=\"inputPassword.Focus(true)\"\r\n ></coer-textbox>\r\n \r\n <!-- Password -->\r\n <coer-secretbox\r\n #inputPassword\r\n label=\"Password\"\r\n [(ngModel)]=\"_password\"\r\n [isLoading]=\"_isLoading()\"\r\n marginBottom=\"35px\"\r\n [maxLength]=\"20\"\r\n (onKeyupEnter)=\"__Login()\"\r\n ></coer-secretbox> \r\n \r\n <!-- Login -->\r\n <div class=\"text-center\">\r\n <coer-button\r\n color=\"dark\" \r\n [isDisabled]=\"!_enableButton\"\r\n [isLoading]=\"_isLoading()\"\r\n (onClick)=\"__Login()\"\r\n > Login </coer-button>\r\n </div>\r\n </section>\r\n\r\n\r\n <!-- Recover password -->\r\n <div class=\"recover\" (click)=\"Show('RECOVERY')\">\r\n Recover password\r\n </div> \r\n } \r\n\r\n\r\n @if(_show === 'RECOVERY') {\r\n <section>\r\n <!-- Recovery -->\r\n <coer-textbox\r\n #inputRecovery\r\n label=\"User / Email\"\r\n [(ngModel)]=\"_user\"\r\n [isLoading]=\"_isLoading()\" \r\n marginTop=\"35px\"\r\n marginBottom=\"35px\"\r\n [maxLength]=\"50\"\r\n (onKeyupEnter)=\"__Recovery()\"\r\n ></coer-textbox> \r\n\r\n\r\n <!-- -->\r\n <coer-textbox [isInvisible]=\"true\"></coer-textbox> \r\n\r\n \r\n <!-- Login -->\r\n <div class=\"text-center\">\r\n <coer-button \r\n color=\"dark\" \r\n [isDisabled]=\"!_enableRecoveryButton\"\r\n [isLoading]=\"_isLoading()\"\r\n marginTop=\"35px\"\r\n (onClick)=\"__Recovery()\"\r\n > Recovery </coer-button>\r\n </div>\r\n </section>\r\n\r\n <!-- Recover password -->\r\n <div class=\"back\" (click)=\"Show('LOGIN')\">\r\n Back\r\n </div>\r\n } \r\n</div>\r\n\r\n", styles: [".login-container{position:relative;border:1px solid black;border-radius:25px;min-width:400px;max-width:400px;margin:35px auto auto;padding:35px}.login-container .title{display:flex;align-items:center;justify-content:center;font-size:25px;font-weight:700;color:var(--primary-inner)}.login-container .back,.login-container .recover,.login-container .remember{position:absolute;left:20px;bottom:-25px;font-size:small;font-weight:700;color:var(--secondary-inner);cursor:pointer}.login-container .back:hover,.login-container .recover:hover{transform:scale(1.01)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "icon", "iconPosition", "path", "animation", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltipPosition", "tooltip"], outputs: ["onClick"] }, { kind: "component", type: i2.CoerSecretBox, selector: "coer-secretbox", inputs: ["value", "id", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "showSecret", "selectOnFocus", "showClearIcon", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickClear", "onClickExternalButton"] }, { kind: "component", type: i2.CoerTextBox, selector: "coer-textbox", inputs: ["value", "id", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "externalButton", "selectOnFocus", "showClearIcon", "showSearchIcon", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickClear", "onClickSearch", "onClickExternalButton"] }] }); }
|
|
144
146
|
}
|
|
145
147
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: LoginPage, decorators: [{
|
|
146
148
|
type: Component,
|
|
147
|
-
args: [{ selector: 'login-page', standalone: false, template: "<div class=\"login-container\">\r\n\r\n <!-- Title -->\r\n <div class=\"title\">\r\n {{
|
|
149
|
+
args: [{ selector: 'login-page', standalone: false, template: "<div class=\"login-container\">\r\n\r\n <!-- Title -->\r\n <div class=\"title\">\r\n {{ _appName }}\r\n </div>\r\n \r\n @if(_show === 'LOGIN') {\r\n <section>\r\n <!-- User -->\r\n <coer-textbox\r\n #inputUser\r\n label=\"User\"\r\n [(ngModel)]=\"_user\"\r\n [isLoading]=\"_isLoading()\" \r\n marginTop=\"35px\"\r\n marginBottom=\"35px\"\r\n [maxLength]=\"15\"\r\n (onKeyupEnter)=\"inputPassword.Focus(true)\"\r\n ></coer-textbox>\r\n \r\n <!-- Password -->\r\n <coer-secretbox\r\n #inputPassword\r\n label=\"Password\"\r\n [(ngModel)]=\"_password\"\r\n [isLoading]=\"_isLoading()\"\r\n marginBottom=\"35px\"\r\n [maxLength]=\"20\"\r\n (onKeyupEnter)=\"__Login()\"\r\n ></coer-secretbox> \r\n \r\n <!-- Login -->\r\n <div class=\"text-center\">\r\n <coer-button\r\n color=\"dark\" \r\n [isDisabled]=\"!_enableButton\"\r\n [isLoading]=\"_isLoading()\"\r\n (onClick)=\"__Login()\"\r\n > Login </coer-button>\r\n </div>\r\n </section>\r\n\r\n\r\n <!-- Recover password -->\r\n <div class=\"recover\" (click)=\"Show('RECOVERY')\">\r\n Recover password\r\n </div> \r\n } \r\n\r\n\r\n @if(_show === 'RECOVERY') {\r\n <section>\r\n <!-- Recovery -->\r\n <coer-textbox\r\n #inputRecovery\r\n label=\"User / Email\"\r\n [(ngModel)]=\"_user\"\r\n [isLoading]=\"_isLoading()\" \r\n marginTop=\"35px\"\r\n marginBottom=\"35px\"\r\n [maxLength]=\"50\"\r\n (onKeyupEnter)=\"__Recovery()\"\r\n ></coer-textbox> \r\n\r\n\r\n <!-- -->\r\n <coer-textbox [isInvisible]=\"true\"></coer-textbox> \r\n\r\n \r\n <!-- Login -->\r\n <div class=\"text-center\">\r\n <coer-button \r\n color=\"dark\" \r\n [isDisabled]=\"!_enableRecoveryButton\"\r\n [isLoading]=\"_isLoading()\"\r\n marginTop=\"35px\"\r\n (onClick)=\"__Recovery()\"\r\n > Recovery </coer-button>\r\n </div>\r\n </section>\r\n\r\n <!-- Recover password -->\r\n <div class=\"back\" (click)=\"Show('LOGIN')\">\r\n Back\r\n </div>\r\n } \r\n</div>\r\n\r\n", styles: [".login-container{position:relative;border:1px solid black;border-radius:25px;min-width:400px;max-width:400px;margin:35px auto auto;padding:35px}.login-container .title{display:flex;align-items:center;justify-content:center;font-size:25px;font-weight:700;color:var(--primary-inner)}.login-container .back,.login-container .recover,.login-container .remember{position:absolute;left:20px;bottom:-25px;font-size:small;font-weight:700;color:var(--secondary-inner);cursor:pointer}.login-container .back:hover,.login-container .recover:hover{transform:scale(1.01)}\n"] }]
|
|
148
150
|
}] });
|
|
149
151
|
|
|
150
152
|
class COERSystem {
|
|
151
153
|
constructor() {
|
|
152
154
|
//Injection
|
|
153
|
-
this.
|
|
155
|
+
this._alert = inject(CoerAlert);
|
|
156
|
+
this._jwtService = inject(JWTService);
|
|
157
|
+
//appSettings
|
|
158
|
+
this._appName = Tools.AvoidNull(appSettings?.appInfo?.name, 'string');
|
|
159
|
+
this._staticLogin = Tools.AvoidNull(appSettings?.login?.staticLogin, 'boolean');
|
|
154
160
|
//Elements
|
|
155
|
-
this.
|
|
156
|
-
this.
|
|
157
|
-
this.
|
|
158
|
-
this.
|
|
159
|
-
this.
|
|
160
|
-
this.
|
|
161
|
-
this.
|
|
162
|
-
//Variables
|
|
163
|
-
this.title = 'COER System';
|
|
161
|
+
this._sidenav = viewChild.required('sidenav');
|
|
162
|
+
this._loginPage = viewChild.required('loginPage');
|
|
163
|
+
this._modalProfile = viewChild.required('modalProfile');
|
|
164
|
+
this._modalPassword = viewChild.required('modalPassword');
|
|
165
|
+
this._inputPassword = viewChild.required('inputPassword');
|
|
166
|
+
this._inputPasswordConfirm = viewChild.required('inputPasswordConfirm');
|
|
167
|
+
this._resetButton = viewChild.required('resetButton');
|
|
164
168
|
this._isLoading = isLoadingSIGNAL;
|
|
165
|
-
this.
|
|
166
|
-
this.
|
|
167
|
-
this.
|
|
168
|
-
this.
|
|
169
|
+
this._mainRole = null;
|
|
170
|
+
this._nickname = '';
|
|
171
|
+
this._password = '';
|
|
172
|
+
this._passwordConfirm = '';
|
|
169
173
|
this._userRoles = signal([]);
|
|
170
174
|
this._user = signal(null);
|
|
171
|
-
|
|
175
|
+
this._userImageStatic = '';
|
|
176
|
+
//Inputs
|
|
172
177
|
this.userImage = input(null);
|
|
173
178
|
this.toolbarMenu = input([]);
|
|
174
179
|
//Outputs
|
|
175
180
|
this.onLogin = output();
|
|
176
|
-
this.
|
|
177
|
-
this.onClickOption = output();
|
|
181
|
+
this.onClickMenuOption = output();
|
|
178
182
|
this.onResetPassword = output();
|
|
183
|
+
this.onRecoveryPassword = output();
|
|
179
184
|
this.onUpdateProfile = output();
|
|
180
185
|
this.onUploadUserImage = output();
|
|
181
186
|
this.onDeleteUserImage = output();
|
|
187
|
+
this.onUpdateJWT = output();
|
|
182
188
|
//Generic Tools
|
|
183
189
|
this.IsNotNull = Tools.IsNotNull;
|
|
184
190
|
this.IsNotOnlyWhiteSpace = Tools.IsNotOnlyWhiteSpace;
|
|
185
191
|
//computed
|
|
186
192
|
this._toolbarMenu = computed(() => {
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
].concat(menu);
|
|
193
|
-
});
|
|
194
|
-
//computed
|
|
195
|
-
this.userName = computed(() => {
|
|
196
|
-
const user = this._user();
|
|
197
|
-
if (Tools.IsNotNull(user)) {
|
|
198
|
-
if (Tools.IsNotOnlyWhiteSpace(user?.fullName))
|
|
199
|
-
return user?.fullName;
|
|
200
|
-
const name = Tools.IsNotNull(this._user()) && Tools.IsNotOnlyWhiteSpace(this._user()?.name) ? this._user().name : '';
|
|
201
|
-
const firstName = Tools.IsNotNull(this._user()) && Tools.IsNotOnlyWhiteSpace(this._user()?.firstName) ? this._user().firstName : '';
|
|
202
|
-
const middleName = Tools.IsNotNull(this._user()) && Tools.IsNotOnlyWhiteSpace(this._user()?.middleName) ? this._user().middleName : '';
|
|
203
|
-
const lastName = Tools.IsNotNull(this._user()) && Tools.IsNotOnlyWhiteSpace(this._user()?.lastName) ? this._user().lastName : '';
|
|
204
|
-
const secondLastName = Tools.IsNotNull(this._user()) && Tools.IsNotOnlyWhiteSpace(this._user()?.secondName) ? this._user().secondLastName : '';
|
|
205
|
-
return `${name} ${firstName} ${middleName} ${lastName} ${secondLastName}`;
|
|
193
|
+
let toolbarMenu = this.toolbarMenu();
|
|
194
|
+
if (this._staticLogin) {
|
|
195
|
+
const index = toolbarMenu.findIndex(x => x.label.toUpperCase() == 'RESET PASSWORD');
|
|
196
|
+
if (index > -1)
|
|
197
|
+
toolbarMenu.splice(index, 1);
|
|
206
198
|
}
|
|
207
|
-
return '';
|
|
199
|
+
return toolbarMenu.concat([{ label: 'Log Out', icon: 'fa-solid fa-door-open' }]);
|
|
208
200
|
});
|
|
209
201
|
}
|
|
210
202
|
set user(value) {
|
|
@@ -212,68 +204,17 @@ class COERSystem {
|
|
|
212
204
|
this._user.set(value);
|
|
213
205
|
Tools.Sleep(1000, 'coerSystemGetUser').then(() => {
|
|
214
206
|
if (Tools.IsNotOnlyWhiteSpace(this._user()?.nickname)) {
|
|
215
|
-
this.
|
|
207
|
+
this._nickname = this._user()?.nickname;
|
|
216
208
|
}
|
|
217
209
|
});
|
|
218
210
|
}
|
|
219
211
|
}
|
|
220
212
|
set userRoles(value) {
|
|
221
213
|
if (Tools.IsNotNull(value)) {
|
|
222
|
-
|
|
214
|
+
let id = 0;
|
|
215
|
+
this._userRoles.set(value.map(item => Object.assign({ id: ++id, option: item })));
|
|
223
216
|
Tools.Sleep(1000, 'coerSystemGetUserRoles').then(() => {
|
|
224
|
-
|
|
225
|
-
//id & name
|
|
226
|
-
if (Tools.IsNull(mainRole)) {
|
|
227
|
-
mainRole = this._userRoles().find(x => (typeof x?.id == 'number')
|
|
228
|
-
&& (typeof x?.name == 'string')
|
|
229
|
-
&& x.id === (this._user()?.roleId)) || null;
|
|
230
|
-
}
|
|
231
|
-
//id & name
|
|
232
|
-
if (Tools.IsNull(mainRole)) {
|
|
233
|
-
mainRole = this._userRoles().find(x => (typeof x?.id == 'number')
|
|
234
|
-
&& (typeof x?.name == 'string')
|
|
235
|
-
&& x.name === (this._user()?.role)) || null;
|
|
236
|
-
}
|
|
237
|
-
//roleId & name
|
|
238
|
-
if (Tools.IsNull(mainRole)) {
|
|
239
|
-
mainRole = this._userRoles().find(x => (typeof x?.roleId == 'number')
|
|
240
|
-
&& (typeof x?.name == 'string')
|
|
241
|
-
&& x.roleId === (this._user()?.roleId)) || null;
|
|
242
|
-
}
|
|
243
|
-
//roleId & name
|
|
244
|
-
if (Tools.IsNull(mainRole)) {
|
|
245
|
-
mainRole = this._userRoles().find(x => (typeof x?.roleId == 'number')
|
|
246
|
-
&& (typeof x?.name == 'string')
|
|
247
|
-
&& x.name === (this._user()?.role)) || null;
|
|
248
|
-
}
|
|
249
|
-
//id & role
|
|
250
|
-
if (Tools.IsNull(mainRole)) {
|
|
251
|
-
mainRole = this._userRoles().find(x => (typeof x?.id == 'number')
|
|
252
|
-
&& (typeof x?.role == 'string')
|
|
253
|
-
&& x.id === (this._user()?.roleId)) || null;
|
|
254
|
-
}
|
|
255
|
-
//id & role
|
|
256
|
-
if (Tools.IsNull(mainRole)) {
|
|
257
|
-
mainRole = this._userRoles().find(x => (typeof x?.id == 'number')
|
|
258
|
-
&& (typeof x?.role == 'string')
|
|
259
|
-
&& x.role === (this._user()?.role)) || null;
|
|
260
|
-
}
|
|
261
|
-
//roleId & role
|
|
262
|
-
if (Tools.IsNull(mainRole)) {
|
|
263
|
-
mainRole = this._userRoles().find(x => (typeof x?.roleId == 'number')
|
|
264
|
-
&& (typeof x?.role == 'string')
|
|
265
|
-
&& x.roleId === (this._user()?.roleId)) || null;
|
|
266
|
-
}
|
|
267
|
-
//roleId & role
|
|
268
|
-
if (Tools.IsNull(mainRole)) {
|
|
269
|
-
mainRole = this._userRoles().find(x => (typeof x?.roleId == 'number')
|
|
270
|
-
&& (typeof x?.role == 'string')
|
|
271
|
-
&& x.role === (this._user()?.role)) || null;
|
|
272
|
-
}
|
|
273
|
-
//Response
|
|
274
|
-
if (Tools.IsNotNull(mainRole)) {
|
|
275
|
-
this.mainRole = mainRole;
|
|
276
|
-
}
|
|
217
|
+
this._mainRole = this._userRoles().find(x => x.option === this._user()?.role) || null;
|
|
277
218
|
});
|
|
278
219
|
}
|
|
279
220
|
}
|
|
@@ -282,7 +223,7 @@ class COERSystem {
|
|
|
282
223
|
navigationSIGNAL.set(value);
|
|
283
224
|
Tools.Sleep(1000, 'coerSystemGetUserNavigation').then(() => {
|
|
284
225
|
if (Tools.IsNotNull(this._user())) {
|
|
285
|
-
this.
|
|
226
|
+
this._sidenav().SetActiveLink(Menu.GetSelectedOption());
|
|
286
227
|
}
|
|
287
228
|
});
|
|
288
229
|
}
|
|
@@ -299,118 +240,216 @@ class COERSystem {
|
|
|
299
240
|
navigationColorSIGNAL.set(ElementsHTML.GetCssValueBy('#coer-system-color-navigation', 'color'));
|
|
300
241
|
containerColorSIGNAL.set(ElementsHTML.GetCssValueBy('#coer-system-color-container', 'color'));
|
|
301
242
|
}
|
|
243
|
+
ngOnDestroy() {
|
|
244
|
+
clearInterval(this._watchJWT$);
|
|
245
|
+
clearInterval(this._startJWT$);
|
|
246
|
+
}
|
|
302
247
|
//getter
|
|
303
|
-
get
|
|
248
|
+
get _enableButtonLogin() {
|
|
304
249
|
return Tools.IsNotOnlyWhiteSpace(this._user())
|
|
305
|
-
&& Tools.IsNotOnlyWhiteSpace(this.
|
|
306
|
-
&& Tools.IsNotOnlyWhiteSpace(this.
|
|
307
|
-
&& this.
|
|
308
|
-
&& this.
|
|
250
|
+
&& Tools.IsNotOnlyWhiteSpace(this._password)
|
|
251
|
+
&& Tools.IsNotOnlyWhiteSpace(this._passwordConfirm)
|
|
252
|
+
&& this._password.length >= 5
|
|
253
|
+
&& this._passwordConfirm.length >= 5
|
|
309
254
|
&& !this._isLoading()
|
|
310
|
-
&& this.
|
|
255
|
+
&& this._password === this._passwordConfirm;
|
|
256
|
+
}
|
|
257
|
+
//getter
|
|
258
|
+
get _profileTitle() {
|
|
259
|
+
return Tools.IsNotOnlyWhiteSpace(this._user()?.fullName)
|
|
260
|
+
? this._user()?.fullName
|
|
261
|
+
: this._user()?.user;
|
|
262
|
+
}
|
|
263
|
+
//getter
|
|
264
|
+
get _userImage() {
|
|
265
|
+
return this._staticLogin
|
|
266
|
+
? this._userImageStatic
|
|
267
|
+
: (this.IsNotOnlyWhiteSpace(this.userImage()) ? this.userImage() : '');
|
|
311
268
|
}
|
|
312
269
|
/** */
|
|
313
|
-
async
|
|
314
|
-
this.
|
|
270
|
+
async __SelectedOption(menu) {
|
|
271
|
+
this.onClickMenuOption.emit(menu);
|
|
272
|
+
if (Tools.AvoidNull(menu?.preventDefault, 'boolean'))
|
|
273
|
+
return;
|
|
274
|
+
const hasPath = Tools.IsNotOnlyWhiteSpace(menu?.path);
|
|
315
275
|
switch (menu.label) {
|
|
316
276
|
case 'Profile': {
|
|
317
|
-
|
|
277
|
+
if (!hasPath)
|
|
278
|
+
this._modalProfile().Open();
|
|
318
279
|
break;
|
|
319
280
|
}
|
|
320
281
|
case 'Reset Password': {
|
|
321
|
-
this.
|
|
322
|
-
|
|
323
|
-
|
|
282
|
+
if (!hasPath && !this._staticLogin) {
|
|
283
|
+
this._modalPassword().Open();
|
|
284
|
+
await Tools.Sleep(750);
|
|
285
|
+
this.__Focus();
|
|
286
|
+
}
|
|
324
287
|
break;
|
|
325
288
|
}
|
|
326
289
|
case 'Log Out': {
|
|
327
|
-
|
|
290
|
+
if (!hasPath)
|
|
291
|
+
User.LogOut();
|
|
328
292
|
break;
|
|
329
293
|
}
|
|
330
294
|
}
|
|
331
295
|
}
|
|
332
296
|
/** */
|
|
333
297
|
SetUser(user) {
|
|
334
|
-
this.
|
|
298
|
+
this._loginPage().SetUser(user);
|
|
335
299
|
}
|
|
336
300
|
/** */
|
|
337
301
|
FocusUser() {
|
|
338
|
-
this.
|
|
302
|
+
this._loginPage().FocusUser();
|
|
339
303
|
}
|
|
340
304
|
/** */
|
|
341
305
|
FocusPassword() {
|
|
342
|
-
this.
|
|
306
|
+
this._loginPage().FocusPassword();
|
|
343
307
|
}
|
|
344
308
|
/** */
|
|
345
|
-
|
|
346
|
-
if (Tools.IsOnlyWhiteSpace(this.
|
|
347
|
-
this.
|
|
309
|
+
__Focus() {
|
|
310
|
+
if (Tools.IsOnlyWhiteSpace(this._password)) {
|
|
311
|
+
this._inputPassword().Focus();
|
|
348
312
|
return;
|
|
349
313
|
}
|
|
350
|
-
if (Tools.IsOnlyWhiteSpace(this.
|
|
351
|
-
this.
|
|
314
|
+
if (Tools.IsOnlyWhiteSpace(this._passwordConfirm)) {
|
|
315
|
+
this._inputPasswordConfirm().Focus();
|
|
352
316
|
return;
|
|
353
317
|
}
|
|
354
|
-
if (this.
|
|
355
|
-
this.
|
|
318
|
+
if (this._enableButtonLogin) {
|
|
319
|
+
this._resetButton().Focus();
|
|
356
320
|
}
|
|
357
321
|
}
|
|
358
322
|
/** */
|
|
359
|
-
|
|
360
|
-
if (this.
|
|
361
|
-
|
|
362
|
-
this.onResetPassword.emit(password);
|
|
323
|
+
__ResetPassword() {
|
|
324
|
+
if (this._enableButtonLogin && !this._staticLogin) {
|
|
325
|
+
this.onResetPassword.emit(this._password);
|
|
363
326
|
}
|
|
364
327
|
}
|
|
365
328
|
/** */
|
|
366
329
|
CloseModal() {
|
|
367
|
-
this.
|
|
368
|
-
this.
|
|
330
|
+
this._modalPassword().Close();
|
|
331
|
+
this._modalProfile().Close();
|
|
369
332
|
}
|
|
370
333
|
/** */
|
|
371
334
|
Show(view) {
|
|
372
|
-
this.
|
|
335
|
+
this._loginPage().Show(view);
|
|
373
336
|
}
|
|
374
337
|
/** */
|
|
375
338
|
UpdateProfile() {
|
|
376
|
-
this.
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
339
|
+
if (!this._staticLogin) {
|
|
340
|
+
const role = this._userRoles().length > 1
|
|
341
|
+
? Tools.AvoidNull(this._mainRole?.option, 'string')
|
|
342
|
+
: this._user()?.role;
|
|
343
|
+
this.onUpdateProfile.emit({
|
|
344
|
+
userId: Tools.AvoidNull(this._user()?.userId, 'number'),
|
|
345
|
+
user: Tools.AvoidNull(this._user()?.user, 'string'),
|
|
346
|
+
userNumber: Tools.AvoidNull(this._user()?.userNumber, 'string'),
|
|
347
|
+
role: role,
|
|
348
|
+
fullName: Tools.AvoidNull(this._user()?.fullName, 'string'),
|
|
349
|
+
nickname: Tools.AvoidNull(this._nickname, 'string'),
|
|
350
|
+
email: Tools.AvoidNull(this._user()?.email, 'string'),
|
|
351
|
+
roles: this._userRoles().map(item => item.option)
|
|
352
|
+
});
|
|
353
|
+
}
|
|
382
354
|
}
|
|
383
355
|
/** */
|
|
384
|
-
|
|
356
|
+
__UploadImage(images) {
|
|
385
357
|
if (images.length > 0) {
|
|
386
358
|
const [image] = images;
|
|
387
|
-
this.
|
|
359
|
+
if (this._staticLogin) {
|
|
360
|
+
this._userImageStatic = image.base64 || '';
|
|
361
|
+
}
|
|
362
|
+
else {
|
|
363
|
+
this.onUploadUserImage.emit(image);
|
|
364
|
+
}
|
|
388
365
|
}
|
|
389
366
|
}
|
|
390
367
|
/** */
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
368
|
+
__DeleteUserImage() {
|
|
369
|
+
this._alert.Confirm(`Remove <b>User Image</b> ?`, 'warning', 'fa-solid fa-trash-can').then(response => {
|
|
370
|
+
if (response) {
|
|
371
|
+
if (this._staticLogin) {
|
|
372
|
+
this._userImageStatic = '';
|
|
373
|
+
}
|
|
374
|
+
else {
|
|
375
|
+
this.onDeleteUserImage.emit();
|
|
376
|
+
}
|
|
377
|
+
}
|
|
378
|
+
});
|
|
395
379
|
}
|
|
396
380
|
/** */
|
|
397
381
|
OpenSideNav() {
|
|
398
382
|
if (!isMenuOpenSIGNAL()) {
|
|
399
|
-
this.
|
|
383
|
+
this._sidenav().Toggle();
|
|
400
384
|
}
|
|
401
385
|
}
|
|
402
386
|
/** */
|
|
403
387
|
CloseSideNav() {
|
|
404
388
|
if (isMenuOpenSIGNAL()) {
|
|
405
|
-
this.
|
|
389
|
+
this._sidenav().Toggle();
|
|
390
|
+
}
|
|
391
|
+
}
|
|
392
|
+
/** */
|
|
393
|
+
StartJWT(validateEvery = 1000, diferenceToUpdate = 30) {
|
|
394
|
+
if (!this._staticLogin) {
|
|
395
|
+
if (Tools.IsOnlyWhiteSpace(this._jwtService.jwt)) {
|
|
396
|
+
this._alert.Warning('The JWT has not been provided');
|
|
397
|
+
return;
|
|
398
|
+
}
|
|
399
|
+
this._WatchJWT();
|
|
400
|
+
this.onUpdateJWT.emit();
|
|
401
|
+
clearInterval(this._startJWT$);
|
|
402
|
+
this._startJWT$ = setInterval(() => {
|
|
403
|
+
const DIFERENCE = Math.abs(moment().diff(this._jwtService.expirationDate, 'minute'));
|
|
404
|
+
if (DIFERENCE <= diferenceToUpdate) {
|
|
405
|
+
this.onUpdateJWT.emit();
|
|
406
|
+
}
|
|
407
|
+
}, validateEvery);
|
|
408
|
+
}
|
|
409
|
+
}
|
|
410
|
+
/** */
|
|
411
|
+
_WatchJWT() {
|
|
412
|
+
if (this._jwtService.isExpired) {
|
|
413
|
+
User.LogOut();
|
|
414
|
+
return;
|
|
406
415
|
}
|
|
416
|
+
clearInterval(this._watchJWT$);
|
|
417
|
+
this._watchJWT$ = setInterval(() => {
|
|
418
|
+
if (this._jwtService.isExpired) {
|
|
419
|
+
clearInterval(this._watchJWT$);
|
|
420
|
+
User.LogOut();
|
|
421
|
+
}
|
|
422
|
+
}, 1000);
|
|
423
|
+
}
|
|
424
|
+
/** */
|
|
425
|
+
UpdateJWT(jwt) {
|
|
426
|
+
if (this._staticLogin)
|
|
427
|
+
return;
|
|
428
|
+
this._jwtService.UpdateJWT(jwt);
|
|
429
|
+
}
|
|
430
|
+
/** */
|
|
431
|
+
StopJWT() {
|
|
432
|
+
if (this._staticLogin)
|
|
433
|
+
return;
|
|
434
|
+
clearInterval(this._startJWT$);
|
|
435
|
+
}
|
|
436
|
+
/** */
|
|
437
|
+
UseStaticLogin() {
|
|
438
|
+
User.Set({
|
|
439
|
+
user: 'COERSystem',
|
|
440
|
+
role: 'Development',
|
|
441
|
+
fullName: 'COER System',
|
|
442
|
+
email: 'coer.system@gmail.com',
|
|
443
|
+
jwt: 'staticLogin'
|
|
444
|
+
});
|
|
445
|
+
return User.Get();
|
|
407
446
|
}
|
|
408
447
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: COERSystem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
409
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: COERSystem, isStandalone: false, selector: "coer-system", inputs: { userImage: { classPropertyName: "userImage", publicName: "userImage", isSignal: true, isRequired: false, transformFunction: null }, toolbarMenu: { classPropertyName: "toolbarMenu", publicName: "toolbarMenu", isSignal: true, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: false, isRequired: false, transformFunction: null }, userRoles: { classPropertyName: "userRoles", publicName: "userRoles", isSignal: false, isRequired: false, transformFunction: null }, navigation: { classPropertyName: "navigation", publicName: "navigation", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onLogin: "onLogin", onRecovery: "onRecovery", onClickOption: "onClickOption", onResetPassword: "onResetPassword", onUpdateProfile: "onUpdateProfile", onUploadUserImage: "onUploadUserImage", onDeleteUserImage: "onDeleteUserImage" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true, isSignal: true }, { propertyName: "loginPage", first: true, predicate: ["loginPage"], descendants: true, isSignal: true }, { propertyName: "modalProfile", first: true, predicate: ["modalProfile"], descendants: true, isSignal: true }, { propertyName: "modalPassword", first: true, predicate: ["modalPassword"], descendants: true, isSignal: true }, { propertyName: "inputPassword", first: true, predicate: ["inputPassword"], descendants: true, isSignal: true }, { propertyName: "inputPasswordConfirm", first: true, predicate: ["inputPasswordConfirm"], descendants: true, isSignal: true }, { propertyName: "resetButton", first: true, predicate: ["resetButton"], descendants: true, isSignal: true }], ngImport: i0, template: "@if(IsNotNull(_user())) {\r\n <coer-toolbar \r\n [user]=\"_user()\" \r\n [image]=\"userImage()\" \r\n [menu]=\"_toolbarMenu()\"\r\n (onClickMenu)=\"sidenav.Toggle()\" \r\n (onClickOption)=\"SelectedOption($event)\"\r\n ></coer-toolbar>\r\n \r\n <coer-sidenav #sidenav> \r\n <section> \r\n <ng-content></ng-content>\r\n </section> \r\n </coer-sidenav>\r\n\r\n <!-- Modal Profile -->\r\n <coer-modal #modalProfile [title]=\"userName()\" icon=\"fa-solid fa-user\" width=\"auto\" height=\"350px\" (onClose)=\"null\"> \r\n <coer-filebox\r\n type=\"image\"\r\n [image]=\"{ \r\n value: IsNotOnlyWhiteSpace(userImage()) ? userImage() : '', \r\n name: userName(),\r\n maxWidth: '150px', \r\n maxHeight: '150px', \r\n marginBottom: '15px',\r\n allowExpand: false \r\n }\"\r\n [isLoading]=\"_isLoading()\"\r\n (onSelected)=\"UploadImage($event)\"\r\n (onDeleteImage)=\"DeleteUserImage()\"\r\n ></coer-filebox>\r\n \r\n <div class=\"d-flex\"> \r\n <!-- User --> \r\n <coer-textbox\r\n label=\"User\"\r\n [value]=\"_user()?.user\"\r\n [isReadonly]=\"true\" \r\n marginRight=\"15px\"\r\n marginBottom=\"15px\" \r\n width=\"250px\" \r\n ></coer-textbox> \r\n \r\n <!-- Email --> \r\n <coer-textbox\r\n label=\"Email\"\r\n [value]=\"_user()?.email\"\r\n [isReadonly]=\"true\" \r\n marginBottom=\"15px\"\r\n width=\"250px\" \r\n ></coer-textbox> \r\n </div> \r\n \r\n <div class=\"d-flex\"> \r\n <!-- Nickame --> \r\n <coer-textbox\r\n label=\"Nickame\"\r\n [(ngModel)]=\"nickname\" \r\n [isLoading]=\"_isLoading()\"\r\n marginRight=\"15px\"\r\n marginBottom=\"15px\" \r\n width=\"250px\" \r\n ></coer-textbox> \r\n \r\n <!-- Role --> \r\n <coer-selectbox\r\n label=\"Role\"\r\n [(ngModel)]=\"mainRole\"\r\n [dataSource]=\"_userRoles()\"\r\n [isLoading]=\"_isLoading()\" \r\n marginBottom=\"15px\"\r\n width=\"250px\" \r\n ></coer-selectbox> \r\n </div> \r\n \r\n <ng-template coerRef=\"footer\">\r\n <coer-button\r\n #buttonSave\r\n color=\"dark\"\r\n icon=\"save\"\r\n [isLoading]=\"_isLoading()\"\r\n (onClick)=\"UpdateProfile()\"\r\n > Update </coer-button>\r\n </ng-template>\r\n </coer-modal>\r\n\r\n\r\n <!-- Modal Password -->\r\n <coer-modal #modalPassword title=\"Reset Password\" icon=\"fa-solid fa-lock\" (onClose)=\"password = ''; passwordConfirm = '';\">\r\n <coer-textbox\r\n #inputPassword\r\n label=\"New Password\"\r\n [(ngModel)]=\"password\"\r\n [isLoading]=\"_isLoading()\"\r\n [selectOnFocus]=\"true\"\r\n marginBottom=\"15px\"\r\n (onKeyupEnter)=\"Focus()\"\r\n ></coer-textbox>\r\n\r\n <coer-textbox\r\n #inputPasswordConfirm\r\n label=\"Confirm Password\"\r\n [(ngModel)]=\"passwordConfirm\"\r\n [isLoading]=\"_isLoading()\"\r\n [selectOnFocus]=\"true\" \r\n (onKeyupEnter)=\"Focus()\"\r\n ></coer-textbox>\r\n\r\n <ng-template coerRef=\"footer\">\r\n <!-- Reset Button -->\r\n <coer-button\r\n #resetButton\r\n color=\"dark\" \r\n [isDisabled]=\"!enableButton\"\r\n [isLoading]=\"_isLoading()\" \r\n (onClick)=\"ResetPassword()\"\r\n > Reset </coer-button>\r\n </ng-template>\r\n </coer-modal>\r\n}\r\n\r\n@else {\r\n <login-page \r\n #loginPage\r\n [title]=\"title\" \r\n (onLogin)=\"onLogin.emit($event)\"\r\n (onRecovery)=\"onRecovery.emit($event)\"\r\n ></login-page>\r\n} \r\n\r\n<coer-alert></coer-alert> \r\n\r\n<div class=\"d-none\">\r\n <span id=\"coer-system-color-primary\"></span>\r\n <span id=\"coer-system-color-secondary\"></span>\r\n <span id=\"coer-system-color-success\"></span>\r\n <span id=\"coer-system-color-warning\"></span>\r\n <span id=\"coer-system-color-danger\"></span>\r\n <span id=\"coer-system-color-background\"></span>\r\n <span id=\"coer-system-color-sidenav\"></span>\r\n <span id=\"coer-system-color-navigation\"></span>\r\n <span id=\"coer-system-color-container\"></span> \r\n</div>", styles: ["span#coer-system-color-primary{color:var(--primary-inner)}span#coer-system-color-secondary{color:var(--secondary-inner)}span#coer-system-color-success{color:var(--success-inner)}span#coer-system-color-warning{color:var(--warning-inner)}span#coer-system-color-danger{color:var(--danger-inner)}span#coer-system-color-background{color:var(--background-inner)}span#coer-system-color-sidenav{color:var(--sidenav-inner)}span#coer-system-color-navigation{color:var(--navigation-inner)}span#coer-system-color-container{color:var(--container-inner)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "icon", "iconPosition", "path", "animation", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltipPosition", "tooltip"], outputs: ["onClick"] }, { kind: "component", type: i2.CoerFilebox, selector: "coer-filebox", inputs: ["type", "multiple", "isLoading", "isDisabled", "isReadonly", "isInvisible", "image"], outputs: ["onSelected", "onDeleteImage"] }, { kind: "component", type: i2.CoerModal, selector: "coer-modal", inputs: ["id", "title", "icon", "showCloseButton", "width", "height", "maxHeight"], outputs: ["onOpen", "onClose"] }, { kind: "component", type: i2.CoerSidenav, selector: "coer-sidenav", outputs: ["onMenuSelected"] }, { kind: "component", type: i2.CoerSelectbox, selector: "coer-selectbox", inputs: ["value", "id", "label", "placeholder", "isInvalid", "isValid", "dataSource", "propDisplay", "rowsByPage", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onSelected", "onUnselect"] }, { kind: "component", type: i2.CoerTextBox, selector: "coer-textbox", inputs: ["value", "id", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "externalButton", "selectOnFocus", "showClearIcon", "showSearchIcon", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickClear", "onClickSearch", "onClickExternalButton"] }, { kind: "component", type: i2.CoerToolbar, selector: "coer-toolbar", inputs: ["user", "image", "menu"], outputs: ["onClickMenu", "onClickOption"] }, { kind: "directive", type: i3.CoerRefDirective, selector: "[coerRef]", inputs: ["coerRef", "title", "icon", "isDisabled", "show", "tooltip"] }, { kind: "component", type: i4.CoerAlert, selector: "coer-alert" }, { kind: "component", type: LoginPage, selector: "login-page", inputs: ["title"], outputs: ["onLogin", "onRecovery"] }] }); }
|
|
448
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: COERSystem, isStandalone: false, selector: "coer-system", inputs: { userImage: { classPropertyName: "userImage", publicName: "userImage", isSignal: true, isRequired: false, transformFunction: null }, toolbarMenu: { classPropertyName: "toolbarMenu", publicName: "toolbarMenu", isSignal: true, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: false, isRequired: false, transformFunction: null }, userRoles: { classPropertyName: "userRoles", publicName: "userRoles", isSignal: false, isRequired: false, transformFunction: null }, navigation: { classPropertyName: "navigation", publicName: "navigation", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onLogin: "onLogin", onClickMenuOption: "onClickMenuOption", onResetPassword: "onResetPassword", onRecoveryPassword: "onRecoveryPassword", onUpdateProfile: "onUpdateProfile", onUploadUserImage: "onUploadUserImage", onDeleteUserImage: "onDeleteUserImage", onUpdateJWT: "onUpdateJWT" }, viewQueries: [{ propertyName: "_sidenav", first: true, predicate: ["sidenav"], descendants: true, isSignal: true }, { propertyName: "_loginPage", first: true, predicate: ["loginPage"], descendants: true, isSignal: true }, { propertyName: "_modalProfile", first: true, predicate: ["modalProfile"], descendants: true, isSignal: true }, { propertyName: "_modalPassword", first: true, predicate: ["modalPassword"], descendants: true, isSignal: true }, { propertyName: "_inputPassword", first: true, predicate: ["inputPassword"], descendants: true, isSignal: true }, { propertyName: "_inputPasswordConfirm", first: true, predicate: ["inputPasswordConfirm"], descendants: true, isSignal: true }, { propertyName: "_resetButton", first: true, predicate: ["resetButton"], descendants: true, isSignal: true }], ngImport: i0, template: "@if(IsNotNull(_user())) {\r\n <coer-toolbar \r\n [user]=\"_user()\" \r\n [image]=\"userImage()\" \r\n [menu]=\"_toolbarMenu()\" \r\n (onClickMenu)=\"sidenav.Toggle()\" \r\n (onClickOption)=\"__SelectedOption($event)\"\r\n ></coer-toolbar>\r\n \r\n <coer-sidenav #sidenav> \r\n <section> \r\n <ng-content></ng-content>\r\n </section> \r\n </coer-sidenav>\r\n\r\n <!-- Modal Profile --> \r\n <coer-modal #modalProfile [title]=\"_profileTitle\" icon=\"fa-solid fa-user\" width=\"auto\"> \r\n <coer-filebox\r\n type=\"image\"\r\n [image]=\"{ \r\n value: _userImage, \r\n name: _profileTitle,\r\n maxWidth: '150px', \r\n maxHeight: '150px', \r\n marginBottom: '15px',\r\n allowExpand: false \r\n }\"\r\n [isLoading]=\"_isLoading()\"\r\n (onSelected)=\"__UploadImage($event)\"\r\n (onDeleteImage)=\"__DeleteUserImage()\"\r\n ></coer-filebox>\r\n\r\n <section class=\"row coer-system-profile\">\r\n <!-- User --> \r\n <div class=\"col-6\">\r\n <coer-textbox\r\n label=\"User\"\r\n [value]=\"_user()?.user\"\r\n [isReadonly]=\"true\" \r\n marginBottom=\"15px\" \r\n ></coer-textbox>\r\n </div>\r\n\r\n <!-- User Number -->\r\n @if(IsNotOnlyWhiteSpace(_user()?.userNumber)) { \r\n <div class=\"col-6\">\r\n <coer-textbox\r\n label=\"Number\"\r\n [value]=\"_user()?.userNumber\"\r\n [isReadonly]=\"true\" \r\n marginBottom=\"15px\" \r\n ></coer-textbox>\r\n </div>\r\n }\r\n\r\n <!-- Email -->\r\n <div class=\"col-6\">\r\n <coer-textbox\r\n label=\"Email\"\r\n [value]=\"_user()?.email\"\r\n [isReadonly]=\"true\" \r\n marginBottom=\"15px\" \r\n ></coer-textbox> \r\n </div>\r\n\r\n <!-- Nickame --> \r\n @if(IsNotOnlyWhiteSpace(_user()?.nickname)) { \r\n <div class=\"col-6\">\r\n <coer-textbox\r\n label=\"Nickame\"\r\n [(ngModel)]=\"_nickname\" \r\n [isLoading]=\"_isLoading()\" \r\n marginBottom=\"15px\" \r\n ></coer-textbox> \r\n </div>\r\n } \r\n\r\n @if(IsNotNull(_user()?.roles) && (_user()?.roles!.length > 1)) {\r\n <!-- Role --> \r\n <div class=\"col-6\">\r\n <coer-selectbox\r\n label=\"Role\"\r\n [(ngModel)]=\"_mainRole\"\r\n propDisplay=\"option\"\r\n [dataSource]=\"_userRoles()\"\r\n [isLoading]=\"_isLoading()\" \r\n marginBottom=\"15px\" \r\n ></coer-selectbox>\r\n </div>\r\n }\r\n\r\n @else {\r\n <div class=\"col-6\">\r\n <coer-textbox\r\n label=\"Role\"\r\n [value]=\"_user()?.role!\" \r\n [isReadonly]=\"true\" \r\n marginBottom=\"15px\" \r\n ></coer-textbox> \r\n </div>\r\n }\r\n </section> \r\n \r\n @if(!_staticLogin) {\r\n <ng-template coerRef=\"footer\">\r\n <coer-button\r\n #buttonSave\r\n color=\"dark\"\r\n icon=\"save\"\r\n [isLoading]=\"_isLoading()\"\r\n (onClick)=\"UpdateProfile()\"\r\n > Update </coer-button>\r\n </ng-template>\r\n } \r\n </coer-modal> \r\n\r\n <!-- Modal Password -->\r\n <coer-modal #modalPassword title=\"Reset Password\" icon=\"fa-solid fa-lock\" (onClose)=\"_password = ''; _passwordConfirm = '';\">\r\n <coer-secretbox\r\n #inputPassword\r\n label=\"New Password\"\r\n [(ngModel)]=\"_password\"\r\n [isLoading]=\"_isLoading()\" \r\n [maxLength]=\"20\"\r\n marginBottom=\"15px\"\r\n (onKeyupEnter)=\"__Focus()\"\r\n ></coer-secretbox>\r\n\r\n <coer-secretbox\r\n #inputPasswordConfirm\r\n label=\"Confirm Password\"\r\n [(ngModel)]=\"_passwordConfirm\"\r\n [isLoading]=\"_isLoading()\" \r\n [maxLength]=\"20\"\r\n (onKeyupEnter)=\"__Focus()\"\r\n ></coer-secretbox>\r\n\r\n <ng-template coerRef=\"footer\">\r\n <!-- Reset Button -->\r\n <coer-button\r\n #resetButton\r\n color=\"dark\" \r\n [isDisabled]=\"!_enableButtonLogin\"\r\n [isLoading]=\"_isLoading()\" \r\n (onClick)=\"__ResetPassword()\"\r\n > Reset </coer-button>\r\n </ng-template>\r\n </coer-modal>\r\n}\r\n\r\n@else {\r\n <login-page \r\n #loginPage \r\n (onLogin)=\"onLogin.emit($event)\"\r\n (onRecovery)=\"onRecoveryPassword.emit($event)\"\r\n ></login-page>\r\n} \r\n\r\n<coer-alert></coer-alert> \r\n\r\n<div class=\"d-none\">\r\n <span id=\"coer-system-color-primary\"></span>\r\n <span id=\"coer-system-color-secondary\"></span>\r\n <span id=\"coer-system-color-success\"></span>\r\n <span id=\"coer-system-color-warning\"></span>\r\n <span id=\"coer-system-color-danger\"></span>\r\n <span id=\"coer-system-color-background\"></span>\r\n <span id=\"coer-system-color-sidenav\"></span>\r\n <span id=\"coer-system-color-navigation\"></span>\r\n <span id=\"coer-system-color-container\"></span> \r\n</div>", styles: ["section.row.coer-system-profile{max-width:600px}span#coer-system-color-primary{color:var(--primary-inner)}span#coer-system-color-secondary{color:var(--secondary-inner)}span#coer-system-color-success{color:var(--success-inner)}span#coer-system-color-warning{color:var(--warning-inner)}span#coer-system-color-danger{color:var(--danger-inner)}span#coer-system-color-background{color:var(--background-inner)}span#coer-system-color-sidenav{color:var(--sidenav-inner)}span#coer-system-color-navigation{color:var(--navigation-inner)}span#coer-system-color-container{color:var(--container-inner)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "icon", "iconPosition", "path", "animation", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltipPosition", "tooltip"], outputs: ["onClick"] }, { kind: "component", type: i2.CoerFilebox, selector: "coer-filebox", inputs: ["type", "multiple", "isLoading", "isDisabled", "isReadonly", "isInvisible", "image"], outputs: ["onSelected", "onDeleteImage"] }, { kind: "component", type: i2.CoerModal, selector: "coer-modal", inputs: ["id", "title", "icon", "showCloseButton", "width", "height", "maxHeight"], outputs: ["onOpen", "onClose"] }, { kind: "component", type: i2.CoerSecretBox, selector: "coer-secretbox", inputs: ["value", "id", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "showSecret", "selectOnFocus", "showClearIcon", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickClear", "onClickExternalButton"] }, { kind: "component", type: i2.CoerSidenav, selector: "coer-sidenav", outputs: ["onMenuSelected"] }, { kind: "component", type: i2.CoerSelectbox, selector: "coer-selectbox", inputs: ["value", "id", "label", "placeholder", "isInvalid", "isValid", "dataSource", "propDisplay", "rowsByPage", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onSelected", "onUnselect"] }, { kind: "component", type: i2.CoerTextBox, selector: "coer-textbox", inputs: ["value", "id", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "externalButton", "selectOnFocus", "showClearIcon", "showSearchIcon", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickClear", "onClickSearch", "onClickExternalButton"] }, { kind: "component", type: i2.CoerToolbar, selector: "coer-toolbar", inputs: ["user", "image", "menu"], outputs: ["onClickMenu", "onClickOption"] }, { kind: "directive", type: i3.CoerRefDirective, selector: "[coerRef]", inputs: ["coerRef", "title", "icon", "isDisabled", "show", "tooltip"] }, { kind: "component", type: i4.CoerAlert, selector: "coer-alert" }, { kind: "component", type: LoginPage, selector: "login-page", outputs: ["onLogin", "onRecovery"] }] }); }
|
|
410
449
|
}
|
|
411
450
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: COERSystem, decorators: [{
|
|
412
451
|
type: Component,
|
|
413
|
-
args: [{ selector: 'coer-system', standalone: false, template: "@if(IsNotNull(_user())) {\r\n <coer-toolbar \r\n [user]=\"_user()\" \r\n [image]=\"userImage()\" \r\n [menu]=\"_toolbarMenu()\"\r\n (onClickMenu)=\"sidenav.Toggle()\" \r\n (onClickOption)=\"
|
|
452
|
+
args: [{ selector: 'coer-system', standalone: false, template: "@if(IsNotNull(_user())) {\r\n <coer-toolbar \r\n [user]=\"_user()\" \r\n [image]=\"userImage()\" \r\n [menu]=\"_toolbarMenu()\" \r\n (onClickMenu)=\"sidenav.Toggle()\" \r\n (onClickOption)=\"__SelectedOption($event)\"\r\n ></coer-toolbar>\r\n \r\n <coer-sidenav #sidenav> \r\n <section> \r\n <ng-content></ng-content>\r\n </section> \r\n </coer-sidenav>\r\n\r\n <!-- Modal Profile --> \r\n <coer-modal #modalProfile [title]=\"_profileTitle\" icon=\"fa-solid fa-user\" width=\"auto\"> \r\n <coer-filebox\r\n type=\"image\"\r\n [image]=\"{ \r\n value: _userImage, \r\n name: _profileTitle,\r\n maxWidth: '150px', \r\n maxHeight: '150px', \r\n marginBottom: '15px',\r\n allowExpand: false \r\n }\"\r\n [isLoading]=\"_isLoading()\"\r\n (onSelected)=\"__UploadImage($event)\"\r\n (onDeleteImage)=\"__DeleteUserImage()\"\r\n ></coer-filebox>\r\n\r\n <section class=\"row coer-system-profile\">\r\n <!-- User --> \r\n <div class=\"col-6\">\r\n <coer-textbox\r\n label=\"User\"\r\n [value]=\"_user()?.user\"\r\n [isReadonly]=\"true\" \r\n marginBottom=\"15px\" \r\n ></coer-textbox>\r\n </div>\r\n\r\n <!-- User Number -->\r\n @if(IsNotOnlyWhiteSpace(_user()?.userNumber)) { \r\n <div class=\"col-6\">\r\n <coer-textbox\r\n label=\"Number\"\r\n [value]=\"_user()?.userNumber\"\r\n [isReadonly]=\"true\" \r\n marginBottom=\"15px\" \r\n ></coer-textbox>\r\n </div>\r\n }\r\n\r\n <!-- Email -->\r\n <div class=\"col-6\">\r\n <coer-textbox\r\n label=\"Email\"\r\n [value]=\"_user()?.email\"\r\n [isReadonly]=\"true\" \r\n marginBottom=\"15px\" \r\n ></coer-textbox> \r\n </div>\r\n\r\n <!-- Nickame --> \r\n @if(IsNotOnlyWhiteSpace(_user()?.nickname)) { \r\n <div class=\"col-6\">\r\n <coer-textbox\r\n label=\"Nickame\"\r\n [(ngModel)]=\"_nickname\" \r\n [isLoading]=\"_isLoading()\" \r\n marginBottom=\"15px\" \r\n ></coer-textbox> \r\n </div>\r\n } \r\n\r\n @if(IsNotNull(_user()?.roles) && (_user()?.roles!.length > 1)) {\r\n <!-- Role --> \r\n <div class=\"col-6\">\r\n <coer-selectbox\r\n label=\"Role\"\r\n [(ngModel)]=\"_mainRole\"\r\n propDisplay=\"option\"\r\n [dataSource]=\"_userRoles()\"\r\n [isLoading]=\"_isLoading()\" \r\n marginBottom=\"15px\" \r\n ></coer-selectbox>\r\n </div>\r\n }\r\n\r\n @else {\r\n <div class=\"col-6\">\r\n <coer-textbox\r\n label=\"Role\"\r\n [value]=\"_user()?.role!\" \r\n [isReadonly]=\"true\" \r\n marginBottom=\"15px\" \r\n ></coer-textbox> \r\n </div>\r\n }\r\n </section> \r\n \r\n @if(!_staticLogin) {\r\n <ng-template coerRef=\"footer\">\r\n <coer-button\r\n #buttonSave\r\n color=\"dark\"\r\n icon=\"save\"\r\n [isLoading]=\"_isLoading()\"\r\n (onClick)=\"UpdateProfile()\"\r\n > Update </coer-button>\r\n </ng-template>\r\n } \r\n </coer-modal> \r\n\r\n <!-- Modal Password -->\r\n <coer-modal #modalPassword title=\"Reset Password\" icon=\"fa-solid fa-lock\" (onClose)=\"_password = ''; _passwordConfirm = '';\">\r\n <coer-secretbox\r\n #inputPassword\r\n label=\"New Password\"\r\n [(ngModel)]=\"_password\"\r\n [isLoading]=\"_isLoading()\" \r\n [maxLength]=\"20\"\r\n marginBottom=\"15px\"\r\n (onKeyupEnter)=\"__Focus()\"\r\n ></coer-secretbox>\r\n\r\n <coer-secretbox\r\n #inputPasswordConfirm\r\n label=\"Confirm Password\"\r\n [(ngModel)]=\"_passwordConfirm\"\r\n [isLoading]=\"_isLoading()\" \r\n [maxLength]=\"20\"\r\n (onKeyupEnter)=\"__Focus()\"\r\n ></coer-secretbox>\r\n\r\n <ng-template coerRef=\"footer\">\r\n <!-- Reset Button -->\r\n <coer-button\r\n #resetButton\r\n color=\"dark\" \r\n [isDisabled]=\"!_enableButtonLogin\"\r\n [isLoading]=\"_isLoading()\" \r\n (onClick)=\"__ResetPassword()\"\r\n > Reset </coer-button>\r\n </ng-template>\r\n </coer-modal>\r\n}\r\n\r\n@else {\r\n <login-page \r\n #loginPage \r\n (onLogin)=\"onLogin.emit($event)\"\r\n (onRecovery)=\"onRecoveryPassword.emit($event)\"\r\n ></login-page>\r\n} \r\n\r\n<coer-alert></coer-alert> \r\n\r\n<div class=\"d-none\">\r\n <span id=\"coer-system-color-primary\"></span>\r\n <span id=\"coer-system-color-secondary\"></span>\r\n <span id=\"coer-system-color-success\"></span>\r\n <span id=\"coer-system-color-warning\"></span>\r\n <span id=\"coer-system-color-danger\"></span>\r\n <span id=\"coer-system-color-background\"></span>\r\n <span id=\"coer-system-color-sidenav\"></span>\r\n <span id=\"coer-system-color-navigation\"></span>\r\n <span id=\"coer-system-color-container\"></span> \r\n</div>", styles: ["section.row.coer-system-profile{max-width:600px}span#coer-system-color-primary{color:var(--primary-inner)}span#coer-system-color-secondary{color:var(--secondary-inner)}span#coer-system-color-success{color:var(--success-inner)}span#coer-system-color-warning{color:var(--warning-inner)}span#coer-system-color-danger{color:var(--danger-inner)}span#coer-system-color-background{color:var(--background-inner)}span#coer-system-color-sidenav{color:var(--sidenav-inner)}span#coer-system-color-navigation{color:var(--navigation-inner)}span#coer-system-color-container{color:var(--container-inner)}\n"] }]
|
|
414
453
|
}], propDecorators: { user: [{
|
|
415
454
|
type: Input
|
|
416
455
|
}], userRoles: [{
|