Initial Commit
This commit is contained in:
bitbucket
parent
7b4b5fe7d7
commit
c81c7eef51
75
.gitignore
vendored
75
.gitignore
vendored
@ -1,50 +1,41 @@
|
||||
# These are some examples of commonly ignored file patterns.
|
||||
# You should customize this list as applicable to your project.
|
||||
# Learn more about .gitignore:
|
||||
# https://www.atlassian.com/git/tutorials/saving-changes/gitignore
|
||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# Node artifact files
|
||||
node_modules/
|
||||
dist/
|
||||
# compiled output
|
||||
/dist
|
||||
/tmp
|
||||
|
||||
# Compiled Java class files
|
||||
*.class
|
||||
# dependencies
|
||||
/node_modules
|
||||
|
||||
# Compiled Python bytecode
|
||||
*.py[cod]
|
||||
# IDEs and editors
|
||||
/.idea
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
*.launch
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# Log files
|
||||
*.log
|
||||
# IDE - VSCode
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
|
||||
# Package files
|
||||
*.jar
|
||||
# misc
|
||||
/.sass-cache
|
||||
/connect.lock
|
||||
/coverage/*
|
||||
/libpeerconnection.log
|
||||
npm-debug.log
|
||||
testem.log
|
||||
/typings
|
||||
|
||||
# Maven
|
||||
target/
|
||||
dist/
|
||||
# e2e
|
||||
/e2e/*.js
|
||||
/e2e/*.map
|
||||
|
||||
# JetBrains IDE
|
||||
.idea/
|
||||
|
||||
# Unit test reports
|
||||
TEST*.xml
|
||||
|
||||
# Generated by MacOS
|
||||
#System Files
|
||||
.DS_Store
|
||||
|
||||
# Generated by Windows
|
||||
Thumbs.db
|
||||
|
||||
# Applications
|
||||
*.app
|
||||
*.exe
|
||||
*.war
|
||||
|
||||
# Large media files
|
||||
*.mp4
|
||||
*.tiff
|
||||
*.avi
|
||||
*.flv
|
||||
*.mov
|
||||
*.wmv
|
||||
|
||||
Thumbs.db
|
||||
194
ng-seed/angular.json
Normal file
194
ng-seed/angular.json
Normal file
@ -0,0 +1,194 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"optima": {
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"projectType": "application",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
"aot": true,
|
||||
"outputPath": "dist",
|
||||
"index": "src/index.html",
|
||||
"main": "src/main.ts",
|
||||
"tsConfig": "src/tsconfig.app.json",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"assets": [
|
||||
"src/assets",
|
||||
"src/favicon.ico"
|
||||
],
|
||||
"allowedCommonJsDependencies": [
|
||||
"lodash",
|
||||
"angular-calendar",
|
||||
"ng2-dragula",
|
||||
"dragula",
|
||||
"ng2-charts",
|
||||
"chart.js",
|
||||
"dom-set",
|
||||
"dom-plane",
|
||||
"crossvent",
|
||||
"calendar-utils/date-adapters/date-fns",
|
||||
"contra/emitter",
|
||||
"@mattlewis92/dom-autoscroller"
|
||||
],
|
||||
"styles": [
|
||||
"node_modules/quill/dist/quill.snow.css",
|
||||
"node_modules/dragula/dist/dragula.css",
|
||||
"node_modules/leaflet/dist/leaflet.css",
|
||||
"node_modules/angular-calendar/scss/angular-calendar.scss",
|
||||
"node_modules/@swimlane/ngx-datatable/index.css",
|
||||
"node_modules/@swimlane/ngx-datatable/themes/material.css",
|
||||
"src/assets/fonts/pe/css/pe-icon-set-weather.css",
|
||||
"src/assets/fonts/data-table/icons.css",
|
||||
"src/assets/styles/app.scss",
|
||||
"src/assets/cropper/cropper.css",
|
||||
"src/assets/glyphicons/glyphicons.css",
|
||||
"node_modules/font-awesome/scss/font-awesome.scss",
|
||||
"node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
|
||||
"node_modules/simple-line-icons/scss/simple-line-icons.scss"
|
||||
],
|
||||
"scripts": [
|
||||
"node_modules/jquery/dist/jquery.min.js",
|
||||
"node_modules/tether/dist/js/tether.min.js",
|
||||
"node_modules/hammerjs/hammer.min.js",
|
||||
"node_modules/sortablejs/Sortable.js",
|
||||
"node_modules/chart.js/dist/Chart.bundle.min.js",
|
||||
"src/assets/cropper/cropper.js"
|
||||
]
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "6kb"
|
||||
}
|
||||
],
|
||||
"optimization": true,
|
||||
"outputHashing": "all",
|
||||
"sourceMap": false,
|
||||
"extractCss": true,
|
||||
"namedChunks": false,
|
||||
"aot": true,
|
||||
"extractLicenses": true,
|
||||
"vendorChunk": false,
|
||||
"buildOptimizer": true,
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"options": {
|
||||
"browserTarget": "optima:build"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"browserTarget": "optima:build:production"
|
||||
}
|
||||
}
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"browserTarget": "optima:build"
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"main": "src/test.ts",
|
||||
"karmaConfig": "./karma.conf.js",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "src/tsconfig.spec.json",
|
||||
"scripts": [
|
||||
"node_modules/jquery/dist/jquery.min.js",
|
||||
"node_modules/tether/dist/js/tether.min.js",
|
||||
"node_modules/hammerjs/hammer.min.js",
|
||||
"node_modules/sortablejs/Sortable.js",
|
||||
"node_modules/chart.js/dist/Chart.bundle.min.js",
|
||||
"src/assets/cropper/cropper.js"
|
||||
],
|
||||
"styles": [
|
||||
"node_modules/quill/dist/quill.snow.css",
|
||||
"node_modules/dragula/dist/dragula.css",
|
||||
"node_modules/leaflet/dist/leaflet.css",
|
||||
"node_modules/angular-calendar/scss/angular-calendar.scss",
|
||||
"node_modules/@swimlane/ngx-datatable/index.css",
|
||||
"node_modules/@swimlane/ngx-datatable/themes/material.css",
|
||||
"src/assets/fonts/pe/css/pe-icon-set-weather.css",
|
||||
"src/assets/fonts/data-table/icons.css",
|
||||
"src/assets/styles/app.scss",
|
||||
"src/assets/cropper/cropper.css",
|
||||
"src/assets/glyphicons/glyphicons.css",
|
||||
"node_modules/font-awesome/scss/font-awesome.scss",
|
||||
"node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
|
||||
"node_modules/simple-line-icons/scss/simple-line-icons.scss"
|
||||
],
|
||||
"assets": [
|
||||
"src/assets",
|
||||
"src/favicon.ico"
|
||||
]
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-devkit/build-angular:tslint",
|
||||
"options": {
|
||||
"tsConfig": [
|
||||
"src/tsconfig.app.json",
|
||||
"src/tsconfig.spec.json"
|
||||
],
|
||||
"exclude": []
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"optima-e2e": {
|
||||
"root": "",
|
||||
"sourceRoot": "",
|
||||
"projectType": "application",
|
||||
"architect": {
|
||||
"e2e": {
|
||||
"builder": "@angular-devkit/build-angular:protractor",
|
||||
"options": {
|
||||
"protractorConfig": "./protractor.conf.js",
|
||||
"devServerTarget": "optima:serve"
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-devkit/build-angular:tslint",
|
||||
"options": {
|
||||
"tsConfig": [
|
||||
"e2e/tsconfig.e2e.json"
|
||||
],
|
||||
"exclude": []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
"defaultProject": "optima",
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
"prefix": "app",
|
||||
"styleext": "scss"
|
||||
},
|
||||
"@schematics/angular:directive": {
|
||||
"prefix": "app"
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"analytics": false
|
||||
}
|
||||
|
||||
}
|
||||
13
ng-seed/e2e/app.e2e-spec.ts
Normal file
13
ng-seed/e2e/app.e2e-spec.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import { PrimerPage } from './app.po';
|
||||
|
||||
describe('primer App', function() {
|
||||
let page: PrimerPage;
|
||||
|
||||
beforeEach(() => {
|
||||
page = new PrimerPage();
|
||||
});
|
||||
|
||||
it('should expect true to be true', () => {
|
||||
expect(true).toBe(true);
|
||||
});
|
||||
});
|
||||
11
ng-seed/e2e/app.po.ts
Normal file
11
ng-seed/e2e/app.po.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import { browser, element, by } from 'protractor';
|
||||
|
||||
export class PrimerPage {
|
||||
navigateTo() {
|
||||
return browser.get('/');
|
||||
}
|
||||
|
||||
getParagraphText() {
|
||||
return element(by.css('app-root h1')).getText();
|
||||
}
|
||||
}
|
||||
19
ng-seed/e2e/tsconfig.e2e.json
Normal file
19
ng-seed/e2e/tsconfig.e2e.json
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"moduleResolution": "node",
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"lib": [
|
||||
"es2016"
|
||||
],
|
||||
"outDir": "../dist/out-tsc-e2e",
|
||||
"module": "commonjs",
|
||||
"target": "es6",
|
||||
"types":[
|
||||
"jasmine",
|
||||
"node"
|
||||
]
|
||||
}
|
||||
}
|
||||
44
ng-seed/karma.conf.js
Normal file
44
ng-seed/karma.conf.js
Normal file
@ -0,0 +1,44 @@
|
||||
// Karma configuration file, see link for more information
|
||||
// https://karma-runner.github.io/0.13/config/configuration-file.html
|
||||
|
||||
module.exports = function (config) {
|
||||
config.set({
|
||||
basePath: '',
|
||||
frameworks: ['jasmine', '@angular-devkit/build-angular'],
|
||||
plugins: [
|
||||
require('karma-jasmine'),
|
||||
require('karma-chrome-launcher'),
|
||||
require('karma-jasmine-html-reporter'),
|
||||
require('karma-coverage-istanbul-reporter'),
|
||||
require('@angular-devkit/build-angular/plugins/karma')
|
||||
],
|
||||
client:{
|
||||
clearContext: false // leave Jasmine Spec Runner output visible in browser
|
||||
},
|
||||
files: [
|
||||
|
||||
],
|
||||
preprocessors: {
|
||||
|
||||
},
|
||||
mime: {
|
||||
'text/x-typescript': ['ts','tsx']
|
||||
},
|
||||
coverageIstanbulReporter: {
|
||||
dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
|
||||
fixWebpackSourcePaths: true
|
||||
},
|
||||
angularCli: {
|
||||
environment: 'dev'
|
||||
},
|
||||
reporters: config.angularCli && config.angularCli.codeCoverage
|
||||
? ['progress', 'coverage-istanbul']
|
||||
: ['progress', 'kjhtml'],
|
||||
port: 9876,
|
||||
colors: true,
|
||||
logLevel: config.LOG_INFO,
|
||||
autoWatch: true,
|
||||
browsers: ['Chrome'],
|
||||
singleRun: false
|
||||
});
|
||||
};
|
||||
19862
ng-seed/package-lock.json
generated
Normal file
19862
ng-seed/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
92
ng-seed/package.json
Normal file
92
ng-seed/package.json
Normal file
@ -0,0 +1,92 @@
|
||||
{
|
||||
"name": "optima",
|
||||
"version": "3.0.0",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"test": "ng test",
|
||||
"lint": "ng lint",
|
||||
"e2e": "ng e2e"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@agm/core": "^1.1.0",
|
||||
"@angular/animations": "^11.2.7",
|
||||
"@angular/cdk": "^11.2.6",
|
||||
"@angular/common": "^11.2.7",
|
||||
"@angular/compiler": "^11.2.7",
|
||||
"@angular/core": "^11.2.7",
|
||||
"@angular/flex-layout": "11.0.0-beta.33",
|
||||
"@angular/forms": "^11.2.7",
|
||||
"@angular/localize": "^11.2.7",
|
||||
"@angular/material": "^11.2.6",
|
||||
"@angular/platform-browser": "^11.2.7",
|
||||
"@angular/platform-browser-dynamic": "^11.2.7",
|
||||
"@angular/router": "^11.2.7",
|
||||
"@material-ui/icons": "^4.11.3",
|
||||
"@ngx-translate/core": "^13.0.0",
|
||||
"@ngx-translate/http-loader": "^6.0.0",
|
||||
"@swimlane/ngx-charts": "^17.0.1",
|
||||
"@swimlane/ngx-datatable": "19.0.0",
|
||||
"angular-calendar": "^0.28.22",
|
||||
"chart.js": "^2.9.4",
|
||||
"core-js": "^3.9.1",
|
||||
"d3": "^6.6.1",
|
||||
"date-fns": "^2.19.0",
|
||||
"dragula": "^3.7.3",
|
||||
"font-awesome": "4.7.0",
|
||||
"hammerjs": "^2.0.8",
|
||||
"jquery": "^3.6.0",
|
||||
"leaflet": "^1.7.1",
|
||||
"leaflet-map": "^0.2.1",
|
||||
"moment": "^2.29.1",
|
||||
"ng2-charts": "^2.4.2",
|
||||
"ng2-dragula": "^2.1.1",
|
||||
"ng2-file-upload": "^1.4.0",
|
||||
"ngx-color-picker": "^11.0.0",
|
||||
"ngx-perfect-scrollbar": "10.1.0",
|
||||
"ngx-sortablejs": "^3.1.4",
|
||||
"perfect-scrollbar": "^1.5.0",
|
||||
"primeflex": "^3.3.0",
|
||||
"primeicons": "^5.0.0",
|
||||
"primeng": "^13.1.0",
|
||||
"quill": "^1.3.7",
|
||||
"rxjs": "^6.6.6",
|
||||
"rxjs-compat": "^6.6.6",
|
||||
"screenfull": "^5.1.0",
|
||||
"simple-line-icons": "^2.5.5",
|
||||
"sortablejs": "^1.13.0",
|
||||
"sweetalert2": "^11.7.1",
|
||||
"tether": "^2.0.0",
|
||||
"tslib": "^2.1.0",
|
||||
"zone.js": "~0.11.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "~0.1102.6",
|
||||
"@angular/cli": "^11.2.6",
|
||||
"@angular/compiler-cli": "^11.2.7",
|
||||
"@angular/language-service": "^11.2.7",
|
||||
"@types/d3": "^6.3.0",
|
||||
"@types/jasmine": "~3.6.9",
|
||||
"@types/jquery": "^3.5.5",
|
||||
"@types/node": "^14.14.37",
|
||||
"@types/nvd3": "^1.8.41",
|
||||
"@types/sortablejs": "^1.10.6",
|
||||
"codelyzer": "^6.0.1",
|
||||
"jasmine-core": "~3.7.1",
|
||||
"jasmine-spec-reporter": "~6.0.0",
|
||||
"karma": "~6.3.1",
|
||||
"karma-chrome-launcher": "~3.1.0",
|
||||
"karma-cli": "^2.0.0",
|
||||
"karma-coverage-istanbul-reporter": "~3.0.3",
|
||||
"karma-jasmine": "^4.0.1",
|
||||
"karma-jasmine-html-reporter": "^1.5.4",
|
||||
"node-sass": "^5.0.0",
|
||||
"protractor": "~7.0.0",
|
||||
"ts-node": "^9.1.1",
|
||||
"tslint": "~6.1.0",
|
||||
"typescript": "4.1.5"
|
||||
}
|
||||
}
|
||||
30
ng-seed/protractor.conf.js
Normal file
30
ng-seed/protractor.conf.js
Normal file
@ -0,0 +1,30 @@
|
||||
// Protractor configuration file, see link for more information
|
||||
// https://github.com/angular/protractor/blob/master/lib/config.ts
|
||||
|
||||
const { SpecReporter } = require('jasmine-spec-reporter');
|
||||
|
||||
exports.config = {
|
||||
allScriptsTimeout: 11000,
|
||||
specs: [
|
||||
'./e2e/**/*.e2e-spec.ts'
|
||||
],
|
||||
capabilities: {
|
||||
'browserName': 'chrome'
|
||||
},
|
||||
directConnect: true,
|
||||
baseUrl: 'http://localhost:4200/',
|
||||
framework: 'jasmine',
|
||||
jasmineNodeOpts: {
|
||||
showColors: true,
|
||||
defaultTimeoutInterval: 30000,
|
||||
print: function() {}
|
||||
},
|
||||
beforeLaunch: function() {
|
||||
require('ts-node').register({
|
||||
project: 'e2e/tsconfig.e2e.json'
|
||||
});
|
||||
},
|
||||
onPrepare() {
|
||||
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
|
||||
}
|
||||
};
|
||||
3
ng-seed/src/app/app.component.html
Normal file
3
ng-seed/src/app/app.component.html
Normal file
@ -0,0 +1,3 @@
|
||||
<h1>
|
||||
{{title}}
|
||||
</h1>
|
||||
5
ng-seed/src/app/app.component.spec.ts
Normal file
5
ng-seed/src/app/app.component.spec.ts
Normal file
@ -0,0 +1,5 @@
|
||||
describe('App: Optima', () => {
|
||||
it('should expect true to be true', () => {
|
||||
expect(true).toBe(true);
|
||||
});
|
||||
});
|
||||
21
ng-seed/src/app/app.component.ts
Normal file
21
ng-seed/src/app/app.component.ts
Normal file
@ -0,0 +1,21 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { TranslateService} from '@ngx-translate/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
template: '<router-outlet></router-outlet>'
|
||||
})
|
||||
export class AppComponent {
|
||||
constructor(public translate: TranslateService, private router:Router) {
|
||||
translate.addLangs(['en', 'fr']);
|
||||
translate.setDefaultLang('en');
|
||||
|
||||
const browserLang: string = translate.getBrowserLang();
|
||||
translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
}
|
||||
}
|
||||
100
ng-seed/src/app/app.module.ts
Normal file
100
ng-seed/src/app/app.module.ts
Normal file
@ -0,0 +1,100 @@
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { HttpClientModule, HttpClient} from '@angular/common/http';
|
||||
|
||||
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
|
||||
import { PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
|
||||
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
|
||||
|
||||
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
|
||||
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
|
||||
import {TranslateService} from '@ngx-translate/core';
|
||||
import { FlexLayoutModule } from '@angular/flex-layout';
|
||||
|
||||
import { DemoMaterialModule } from './shared/demo.module';
|
||||
|
||||
import {MatSidenavModule} from '@angular/material/sidenav';
|
||||
import {MatInputModule} from '@angular/material/input';
|
||||
import {MatIconModule} from '@angular/material/icon';
|
||||
import {MatListModule} from '@angular/material/list';
|
||||
import {MatMenuModule} from '@angular/material/menu';
|
||||
import {MatToolbarModule} from '@angular/material/toolbar';
|
||||
import {MatTabsModule} from '@angular/material/tabs';
|
||||
import {MatCheckboxModule} from '@angular/material/checkbox';
|
||||
import {MatProgressBarModule} from '@angular/material/progress-bar';
|
||||
import {MatSelectModule} from '@angular/material/select';
|
||||
import {MatCardModule} from '@angular/material/card';
|
||||
import { AppRoutes } from './app.routing';
|
||||
import { AppComponent } from './app.component';
|
||||
import { AdminLayoutComponent } from './layouts/admin/admin-layout.component';
|
||||
import { AuthLayoutComponent } from './layouts/auth/auth-layout.component';
|
||||
import { SharedModule } from './shared/shared.module';
|
||||
import { ProgressSpineerDialogComponent } from './shared/progress-spineer-dialog/progress-spineer-dialog.component';
|
||||
import { AppoinmentModule } from './appoinment/appoinment.module';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
|
||||
|
||||
export function HttpLoaderFactory(http: HttpClient) {
|
||||
return new TranslateHttpLoader(http);
|
||||
}
|
||||
|
||||
export function createTranslateLoader(http: HttpClient) {
|
||||
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
|
||||
}
|
||||
|
||||
const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
|
||||
suppressScrollX: true
|
||||
};
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent,
|
||||
AdminLayoutComponent,
|
||||
AuthLayoutComponent,
|
||||
ProgressSpineerDialogComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
BrowserAnimationsModule,
|
||||
SharedModule,
|
||||
RouterModule.forRoot(AppRoutes, {scrollPositionRestoration: 'enabled'}),
|
||||
FormsModule,
|
||||
MatSidenavModule,
|
||||
MatInputModule,
|
||||
MatIconModule,
|
||||
MatListModule,
|
||||
MatMenuModule,
|
||||
MatToolbarModule,
|
||||
MatTabsModule,
|
||||
MatCheckboxModule,
|
||||
MatProgressBarModule,
|
||||
MatSelectModule,
|
||||
MatCardModule,
|
||||
DemoMaterialModule,
|
||||
HttpClientModule,
|
||||
AppoinmentModule,
|
||||
MatFormFieldModule,
|
||||
TranslateModule.forRoot({
|
||||
loader: {
|
||||
provide: TranslateLoader,
|
||||
useFactory: (createTranslateLoader),
|
||||
deps: [HttpClient]
|
||||
}
|
||||
}),
|
||||
FlexLayoutModule,
|
||||
PerfectScrollbarModule
|
||||
],
|
||||
providers: [
|
||||
TranslateService,
|
||||
{
|
||||
provide: PERFECT_SCROLLBAR_CONFIG,
|
||||
useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
|
||||
}
|
||||
],
|
||||
entryComponents: [],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
export class AppModule { }
|
||||
36
ng-seed/src/app/app.routing.ts
Normal file
36
ng-seed/src/app/app.routing.ts
Normal file
@ -0,0 +1,36 @@
|
||||
import { Routes } from '@angular/router';
|
||||
|
||||
import { AdminLayoutComponent } from './layouts/admin/admin-layout.component';
|
||||
import { AuthLayoutComponent } from './layouts/auth/auth-layout.component';
|
||||
|
||||
export const AppRoutes: Routes = [{
|
||||
path: '',
|
||||
redirectTo: 'authentication',
|
||||
pathMatch: 'full',
|
||||
}, {
|
||||
path: '',
|
||||
component: AdminLayoutComponent,
|
||||
children: [{
|
||||
path: 'home',
|
||||
loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
|
||||
},
|
||||
{
|
||||
path: 'appoinment',
|
||||
loadChildren: () => import('./appoinment/appoinment.module').then(m => m.AppoinmentModule)
|
||||
},
|
||||
]
|
||||
}, {
|
||||
path: '',
|
||||
component: AuthLayoutComponent,
|
||||
children: [{
|
||||
path: 'authentication',
|
||||
loadChildren: () => import('./session/session.module').then(m => m.SessionModule)
|
||||
},
|
||||
{
|
||||
path: 'error',
|
||||
loadChildren: () => import('./error/error.module').then(m => m.ErrorModule)
|
||||
}]
|
||||
}, {
|
||||
path: '**',
|
||||
redirectTo: 'session/404'
|
||||
}];
|
||||
57
ng-seed/src/app/appoinment/appoinment-routing.module.ts
Normal file
57
ng-seed/src/app/appoinment/appoinment-routing.module.ts
Normal file
@ -0,0 +1,57 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { AppoinmentsListComponent } from './appoinments/appoinments-list/appoinments-list.component';
|
||||
import { AddBusinessListComponent } from './business/add-business-list/add-business-list.component';
|
||||
import { BusinessListComponent } from './business/business-list/business-list.component';
|
||||
import { CalendarListComponent } from './calendars/calendar-list/calendar-list.component';
|
||||
import { CustomersListComponent } from './customers/customers-list/customers-list.component';
|
||||
import { AddUserListComponent } from './user/add-user-list/add-user-list.component';
|
||||
import { UserListComponent } from './user/user-list/user-list.component';
|
||||
|
||||
|
||||
const routes: Routes = [{
|
||||
path: 'add-business-list',
|
||||
component: AddBusinessListComponent
|
||||
},
|
||||
{
|
||||
path: 'business-list',
|
||||
component: BusinessListComponent
|
||||
},
|
||||
{
|
||||
path: 'add-user-list',
|
||||
component: AddUserListComponent
|
||||
},
|
||||
{
|
||||
path: 'user-list',
|
||||
component: UserListComponent
|
||||
},
|
||||
{
|
||||
path: 'appoinments-list',
|
||||
component: AppoinmentsListComponent
|
||||
},
|
||||
{
|
||||
path: 'customers-list',
|
||||
component: CustomersListComponent
|
||||
},
|
||||
// {
|
||||
// path: 'calendar-list',
|
||||
// component: CalendarListComponent
|
||||
// },
|
||||
{
|
||||
path: 'calendar-list',
|
||||
component: CalendarListComponent
|
||||
}
|
||||
|
||||
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class AppoinmentRoutingModule {
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
29
ng-seed/src/app/appoinment/appoinment.module.ts
Normal file
29
ng-seed/src/app/appoinment/appoinment.module.ts
Normal file
@ -0,0 +1,29 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { AppoinmentRoutingModule } from './appoinment-routing.module';
|
||||
import { BusinessModule } from './business/business.module';
|
||||
import { MaterialModulesModule } from './material-modules/material-modules.module';
|
||||
import { UserModule } from './user/user.module';
|
||||
import { AppoinmentsModule } from './appoinments/appoinments.module';
|
||||
import { CustomersModule } from './customers/customers.module';
|
||||
import { CalendarsModule } from './calendars/calendars.module';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
AppoinmentRoutingModule,
|
||||
BusinessModule,
|
||||
UserModule,
|
||||
MaterialModulesModule,
|
||||
AppoinmentsModule,
|
||||
CustomersModule,
|
||||
CalendarsModule
|
||||
]
|
||||
})
|
||||
export class AppoinmentModule { }
|
||||
@ -0,0 +1,57 @@
|
||||
<h3>Appoinment Details</h3>
|
||||
<mat-form-field>
|
||||
<mat-label>Filter</mat-label>
|
||||
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
|
||||
</mat-form-field>
|
||||
<div class="calender ">
|
||||
<i style="font-size:24px" class="fa" [routerLink]="['/appoinment/calendar-list']"></i>
|
||||
</div>
|
||||
<button mat-button (click)="openDialog('Add',{})" class="button">Add Appoinment</button>
|
||||
<mat-sidenav-container class="app-inner background-none shadow-none mail-db">
|
||||
<div class="main-content" fxLayout="row" fxLayoutAlign="center start">
|
||||
<div fxFlex.gt-sm="90" fxFlex.gt-xs="95" fxFlex="100">
|
||||
<div class="messages-list material fullscreen">
|
||||
<mat-accordion>
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header >
|
||||
<table mat-table [dataSource]="dataSource" #mytable class="my-table mat-elevation-z8 len-table">
|
||||
|
||||
<ng-container matColumnDef="id">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> S.NO </th>
|
||||
<td mat-cell *matCellDef="let element" class="element-spc"> {{element.id}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="serviceselect">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Service </th>
|
||||
<td mat-cell *matCellDef="let element" class="element-spc"> {{element.serviceselect}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="customerselect">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Customer </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.customerselect}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="picker">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Date & Time </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.picker}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="action">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Action </th>
|
||||
<td mat-cell *matCellDef="let element" class="action-link">
|
||||
<a (click)="openDialog('Update',element)"><span class="material-icons edit-color">edit</span></a>
|
||||
<a (click)="confirmBox('Delete',element)"><span class="material-icons edit-color delete">delete</span></a>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
</mat-expansion-panel-header>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-sidenav-container>
|
||||
|
||||
@ -0,0 +1,75 @@
|
||||
.my-table{
|
||||
width: 120%;
|
||||
}
|
||||
.button{
|
||||
float: right;
|
||||
background-color: #4caf50;
|
||||
color: #ffff;
|
||||
}
|
||||
th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
|
||||
padding: 6px;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
.mat-expansion-panel-header {
|
||||
display: inline!important;
|
||||
}
|
||||
::ng-deep .mat-drawer-content {
|
||||
overflow: hidden!important;
|
||||
background-color: #ffff;
|
||||
}
|
||||
::ng-deep .body-container {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background-color: #ffff;
|
||||
}
|
||||
::ng-deep .mat-expansion-panel:not([class*='mat-elevation-z']) {
|
||||
box-shadow: none!important;
|
||||
}
|
||||
img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.fullscreen{
|
||||
position: absolute !important;
|
||||
height: auto !important;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
tr.mat-header-row {
|
||||
height: 30px!important;
|
||||
}
|
||||
.font-color{
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
.edit-color{
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
.edit-color:hover {
|
||||
color: #4caf50;
|
||||
}
|
||||
.delete:hover {
|
||||
color:#ff0000;
|
||||
}
|
||||
::ng-deep .mat-form-field-appearance-legacy .mat-form-field-wrapper {
|
||||
width: 180%;
|
||||
}
|
||||
|
||||
::ng-deep .mat-content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
/* flex-direction: row; */
|
||||
/* overflow: hidden; */
|
||||
overflow-x: auto!important;
|
||||
overflow-y: auto!important;
|
||||
}
|
||||
.calender{
|
||||
float: right;
|
||||
margin-left: 1rem;
|
||||
padding-top: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { AppoinmentsListComponent } from './appoinments-list.component';
|
||||
|
||||
describe('AppoinmentsListComponent', () => {
|
||||
let component: AppoinmentsListComponent;
|
||||
let fixture: ComponentFixture<AppoinmentsListComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ AppoinmentsListComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(AppoinmentsListComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,134 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { MatPaginator } from '@angular/material/paginator';
|
||||
import { MatTable, MatTableDataSource } from '@angular/material/table';
|
||||
import Swal from 'sweetalert2/dist/sweetalert2.js';
|
||||
import { DialogBoxComponent } from '../dialog-box/dialog-box.component';
|
||||
export interface UsersData {
|
||||
id: number;
|
||||
serviceselect: string;
|
||||
customerselect: string;
|
||||
picker: string;
|
||||
}
|
||||
const ELEMENT_DATA: UsersData[] = [
|
||||
{id: 1, serviceselect: 'school management system ', customerselect: 'A', picker: '22/02/2023' },
|
||||
{id: 2, serviceselect: 'Sample', customerselect: 'B', picker: '22/02/2023' },
|
||||
{id: 3, serviceselect: 'Test', customerselect: 'C', picker: '22/02/2023' },
|
||||
{id: 4, serviceselect: 'Sample', customerselect: 'A', picker: '22/02/2023' },
|
||||
{id: 5, serviceselect: 'Test', customerselect: 'B', picker: '22/02/2023' },
|
||||
{id: 6, serviceselect: 'Sample', customerselect: 'C', picker: '22/02/2023'},
|
||||
{id: 7, serviceselect: 'Test', customerselect: 'A', picker: '22/02/2023'},
|
||||
{id: 8, serviceselect: 'Sample', customerselect: 'B', picker: '22/02/2023'},
|
||||
{id: 9, serviceselect: 'Test', customerselect: 'C', picker: '22/02/2023'},
|
||||
{id: 10, serviceselect: 'Sample', customerselect: 'A', picker: '22/02/2023'},
|
||||
];
|
||||
@Component({
|
||||
selector: 'app-appoinments-list',
|
||||
templateUrl: './appoinments-list.component.html',
|
||||
styleUrls: ['./appoinments-list.component.scss']
|
||||
})
|
||||
export class AppoinmentsListComponent implements OnInit {
|
||||
|
||||
push: any;
|
||||
displayedColumns: string[] = ['id', 'serviceselect', 'customerselect','picker', 'action'];
|
||||
dataSource: any;
|
||||
// dataSource: any = new MatTableDataSource(ELEMENT_DATA);
|
||||
@ViewChild(MatTable,{static:true}) table: MatTable<any>;
|
||||
@ViewChild(MatPaginator) paginator: MatPaginator;
|
||||
|
||||
ngAfterViewInit() {
|
||||
this.dataSource.paginator = this.paginator;
|
||||
}
|
||||
applyFilter(event: Event) {
|
||||
const filterValue = (event.target as HTMLInputElement).value;
|
||||
this.dataSource.filter = filterValue.trim().toLowerCase();
|
||||
if (this.dataSource.paginator) {
|
||||
this.dataSource.paginator.firstPage();
|
||||
}
|
||||
}
|
||||
constructor(public dialog: MatDialog) { }
|
||||
|
||||
confirmBox(name,element){
|
||||
console.log(name,element)
|
||||
Swal.fire({
|
||||
title: 'Are you sure want to remove?',
|
||||
text: 'You will not be able to recover this file!',
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Yes, delete it!',
|
||||
cancelButtonText: 'No, keep it'
|
||||
}).then((result) => {
|
||||
if (result.value) {
|
||||
this.deleteRowData(element);
|
||||
Swal.fire(
|
||||
'Deleted!',
|
||||
'Your imaginary file has been deleted.',
|
||||
'success'
|
||||
)
|
||||
} else if (result.dismiss === Swal.DismissReason.cancel) {
|
||||
Swal.fire(
|
||||
'Cancelled',
|
||||
'Your imaginary file is safe :)',
|
||||
'error'
|
||||
)
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
openDialog(action,obj) {
|
||||
obj.action = action;
|
||||
const dialogRef = this.dialog.open(DialogBoxComponent, {
|
||||
// width: '30%',
|
||||
height: '100%',
|
||||
// maxWidth: '38vw',
|
||||
position: { right: '0' },
|
||||
data:obj
|
||||
});
|
||||
dialogRef.afterClosed().subscribe(result => {
|
||||
console.log(result)
|
||||
if(result.event == 'Add'){
|
||||
this.addRowData(result.data);
|
||||
}else if(result.event == 'Update'){
|
||||
this.updateRowData(result.data);
|
||||
}else if(result.event == 'Delete'){
|
||||
this.deleteRowData(result.data);
|
||||
}
|
||||
});
|
||||
}
|
||||
addRowData(row_obj){
|
||||
var d = this.dataSource.data.length+1
|
||||
console.log(this.dataSource)
|
||||
this.dataSource.data.push
|
||||
({
|
||||
id: d,
|
||||
serviceselect: row_obj.serviceselect,
|
||||
customerselect: row_obj.customerselect,
|
||||
picker: row_obj.picker
|
||||
|
||||
});
|
||||
this.table.renderRows();
|
||||
}
|
||||
updateRowData(row_obj){
|
||||
console.log(row_obj)
|
||||
this.dataSource = this.dataSource.data.filter((value,key)=>{
|
||||
if(value.id == row_obj.id){
|
||||
value.serviceselect = row_obj.serviceselect;
|
||||
value.customerselect = row_obj.customerselect;
|
||||
value.picker = row_obj.picker;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}
|
||||
deleteRowData(row_obj){
|
||||
console.log(this.dataSource.data,row_obj)
|
||||
this.dataSource.data = this.dataSource.data.filter((value,key)=>{
|
||||
return value.id != row_obj.id
|
||||
});
|
||||
console.log(this.dataSource)
|
||||
}
|
||||
ngOnInit(): void {
|
||||
this.dataSource = new MatTableDataSource(ELEMENT_DATA)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
|
||||
const routes: Routes = [];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class AppoinmentsRoutingModule { }
|
||||
28
ng-seed/src/app/appoinment/appoinments/appoinments.module.ts
Normal file
28
ng-seed/src/app/appoinment/appoinments/appoinments.module.ts
Normal file
@ -0,0 +1,28 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import { AppoinmentsRoutingModule } from './appoinments-routing.module';
|
||||
import { AppoinmentsListComponent } from './appoinments-list/appoinments-list.component';
|
||||
import { MaterialModulesModule } from '../material-modules/material-modules.module';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { ScrollingModule } from '@angular/cdk/scrolling';
|
||||
import { DialogBoxComponent } from './dialog-box/dialog-box.component';
|
||||
// import CalendarTodayIcon from '@material-ui/icons/CalendarToday';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppoinmentsListComponent,
|
||||
DialogBoxComponent
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
AppoinmentsRoutingModule,
|
||||
MaterialModulesModule,
|
||||
MatSidenavModule,
|
||||
MatFormFieldModule,
|
||||
ScrollingModule,
|
||||
|
||||
]
|
||||
})
|
||||
export class AppoinmentsModule { }
|
||||
@ -0,0 +1,76 @@
|
||||
<mat-card class="settings-panel" >
|
||||
<h5 mat-dialog-title> <strong>{{action}} New Appoinment</strong>
|
||||
<button mat-icon-button type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="close()"
|
||||
><mat-icon>close</mat-icon></button></h5>
|
||||
|
||||
<div mat-dialog-content class="my-table">
|
||||
<form [formGroup]="form" (ngSubmit)="submit()">
|
||||
|
||||
<mat-form-field appearance="outline" class="mat-pane">
|
||||
<mat-select placeholder="Select Services" [formControl]="serviceselect" required>
|
||||
<mat-option>--</mat-option>
|
||||
<mat-option *ngFor="let business of selects" [value]="business.name">
|
||||
{{business.name}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="serviceselect.hasError('required')">Please choose an animal</mat-error>
|
||||
<mat-error *ngIf="serviceselect.hasError('invalidValue')">Please choose any other</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" class="mat-pane">
|
||||
<mat-select placeholder="Select Customer" [formControl]="customerselect" required>
|
||||
<mat-option>--</mat-option>
|
||||
<mat-option *ngFor="let business of select" [value]="business.name">
|
||||
{{business.name}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="customerselect.hasError('required')">Please choose an animal</mat-error>
|
||||
<mat-error *ngIf="customerselect.hasError('invalidValue')">Please choose any other</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
|
||||
<mat-form-field appearance="outline" class="mat-pane" >
|
||||
<mat-date-range-input [rangePicker]="picker" placeholder="Enter a date">
|
||||
<input matStartDate matInput placeholder="Start date">
|
||||
<input matEndDate matInput placeholder="End date">
|
||||
</mat-date-range-input>
|
||||
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
|
||||
<mat-date-range-picker #picker></mat-date-range-picker>
|
||||
</mat-form-field>
|
||||
|
||||
<!-- <mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
<input placeholder=" Name" matInput formControlName="name">
|
||||
<mat-error *ngIf="myError('name', 'required')">Name is required</mat-error>
|
||||
<mat-error *ngIf="myError('name', 'maxlength')">Limit exceed</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
<input placeholder=" Email" matInput [(ngModel)]="local_data.email" formControlName="email">
|
||||
<mat-error *ngIf="!form.get('email')?.errors?.required && (form.get('email')?.errors?.pattern)">
|
||||
Please enter a valid email address
|
||||
</mat-error>
|
||||
<mat-error *ngIf="form.get('email')?.invalid && (form.get('email')?.dirty || form.get('email')?.touched) && form.get('email')?.errors?.required">
|
||||
Email is required
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
<input placeholder=" Phone" matInput [(ngModel)]="local_data.phone" formControlName="contact_no">
|
||||
<mat-error *ngIf="myError('contact_no', 'required')">Contact No is required</mat-error>
|
||||
<mat-error *ngIf="myError('contact_no', 'maxlength')">Limit exceed</mat-error>
|
||||
</mat-form-field> -->
|
||||
|
||||
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<ng-template #elseTemplate>
|
||||
Sure to delete <b>{{local_data.name}}</b>?
|
||||
</ng-template><br>
|
||||
<div mat-dialog-actions>
|
||||
<button mat-button (click)="doAction()" class="mat-green" mat-raised-button >{{action}}</button>
|
||||
<button mat-button (click)="closeDialog()" >Cancel</button>
|
||||
</div>
|
||||
</mat-card>
|
||||
|
||||
|
||||
@ -0,0 +1,48 @@
|
||||
// ::ng-deep .cdk-overlay-pane{
|
||||
// width: 60%!important;
|
||||
// }
|
||||
.mat-pane{
|
||||
width: 20rem;
|
||||
}
|
||||
.button{
|
||||
// float: right;
|
||||
margin-bottom: 1rem;
|
||||
background-color: #ffff;
|
||||
margin-top: -1rem;
|
||||
margin-left: 6rem;
|
||||
}
|
||||
::ng-deep .mat-card.settings-panel {
|
||||
position: inherit;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
width: 350px;
|
||||
z-index: 9;
|
||||
top: 58px;
|
||||
}
|
||||
|
||||
::ng-deep body .mat-card {
|
||||
box-shadow:none!important;
|
||||
}
|
||||
|
||||
// @include media-breakpoint-down(lg) {
|
||||
// padding-top: 150px;
|
||||
// }
|
||||
// @include media-breakpoint-down(md) {
|
||||
// padding-top: 100px;
|
||||
// }
|
||||
// @include media-breakpoint-down(sm) {
|
||||
// padding-top: 100px;
|
||||
// }
|
||||
|
||||
|
||||
// @media only screen and (max-width: 600px) {
|
||||
// .cdk-overlay-pane{
|
||||
// width: 90%!important;
|
||||
// }
|
||||
// }
|
||||
|
||||
@media (max-width: 959px){
|
||||
.cdk-overlay-pane{
|
||||
width: 90%!important;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { DialogBoxComponent } from './dialog-box.component';
|
||||
|
||||
describe('DialogBoxComponent', () => {
|
||||
let component: DialogBoxComponent;
|
||||
let fixture: ComponentFixture<DialogBoxComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ DialogBoxComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DialogBoxComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,93 @@
|
||||
import { Component, Inject, OnInit, Optional } from '@angular/core';
|
||||
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
|
||||
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
|
||||
import { Router } from '@angular/router';
|
||||
export interface UsersData {
|
||||
name: string;
|
||||
id: number;
|
||||
}
|
||||
@Component({
|
||||
selector: 'app-dialog-box',
|
||||
templateUrl: './dialog-box.component.html',
|
||||
styleUrls: ['./dialog-box.component.scss']
|
||||
})
|
||||
export class DialogBoxComponent implements OnInit {
|
||||
form: FormGroup;
|
||||
fileToUpload: any;
|
||||
imageUrl: any;
|
||||
action:string;
|
||||
local_data:any;
|
||||
url: string | ArrayBuffer;
|
||||
|
||||
serviceselect = new FormControl('', [Validators.required]);
|
||||
selects = [
|
||||
{name: 'A'},
|
||||
{name: 'B'},
|
||||
{name: 'C'},
|
||||
{name: 'D'},
|
||||
];
|
||||
|
||||
customerselect = new FormControl('', [Validators.required]);
|
||||
select = [
|
||||
{name: 'A'},
|
||||
{name: 'B'},
|
||||
{name: 'C'},
|
||||
{name: 'D'},
|
||||
];
|
||||
|
||||
constructor(private router: Router,private formBuilder: FormBuilder,
|
||||
public dialogRef: MatDialogRef<DialogBoxComponent>,
|
||||
@Optional() @Inject(MAT_DIALOG_DATA) public data: UsersData) {
|
||||
console.log(data);
|
||||
this.local_data = {...data};
|
||||
this.action = this.local_data.action;
|
||||
}
|
||||
get f(){
|
||||
return this.form.controls;
|
||||
}
|
||||
doAction(){
|
||||
let tmp = this.form.value
|
||||
tmp.id = this.local_data.id
|
||||
this.dialogRef.close({event:this.action,data:tmp});
|
||||
console.log(this.form.value);
|
||||
console.log(this.action,this.local_data)
|
||||
}
|
||||
closeDialog(){
|
||||
this.dialogRef.close({event:'Cancel'});
|
||||
}
|
||||
onSelectFile(event) {
|
||||
if (event.target.files && event.target.files[0]) {
|
||||
var reader = new FileReader();
|
||||
reader.readAsDataURL(event.target.files[0]);
|
||||
reader.onload = (event) => {
|
||||
this.url = event.target.result;
|
||||
}
|
||||
}
|
||||
}
|
||||
close() {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
ngOnInit() {
|
||||
this.form = new FormGroup({
|
||||
serviceselect: new FormControl('', [Validators.required]),
|
||||
customerselect: new FormControl('', [Validators.required]),
|
||||
picker: new FormControl('', [Validators.required]),
|
||||
// image: new FormControl('', null),
|
||||
// name: new FormControl('', [Validators.required, Validators.maxLength(20)]),
|
||||
// address: new FormControl('', [Validators.required, Validators.maxLength(50)]),
|
||||
// city: new FormControl('', [Validators.required, Validators.maxLength(10)]),
|
||||
// state: new FormControl('', [Validators.required, Validators.maxLength(10)]),
|
||||
// email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(
|
||||
// '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$',
|
||||
// ),]),
|
||||
// contact_no: new FormControl('', [Validators.required, Validators.maxLength(10)]),
|
||||
});
|
||||
this.form.patchValue(this.local_data)
|
||||
}
|
||||
public myError = (controlName: string, errorName: string) =>{
|
||||
return this.form.controls[controlName].hasError(errorName);
|
||||
}
|
||||
submit(){
|
||||
console.log(this.form.value);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,63 @@
|
||||
<mat-card class="login-session">
|
||||
<div>
|
||||
<h2 class=""> Add Business</h2>
|
||||
<form [formGroup]="form" (ngSubmit)="submit()">
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch">
|
||||
|
||||
<!-- <mat-form-field>
|
||||
<mat-select placeholder="Select Business" [formControl]="businessselect" required>
|
||||
<mat-option>--</mat-option>
|
||||
<mat-option *ngFor="let business of selects" [value]="business.name">
|
||||
{{business.name}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="businessselect.hasError('required')">Please choose an animal</mat-error>
|
||||
<mat-error *ngIf="businessselect.hasError('invalidValue')">Please choose any other</mat-error>
|
||||
</mat-form-field> -->
|
||||
<mat-form-field>
|
||||
<input matInput type="text" placeholder="Enter Name" formControlName="bus_name" id="bus_name">
|
||||
<mat-error *ngIf="myError('bus_name', 'required')">Name is required</mat-error>
|
||||
<mat-error *ngIf="myError('bus_name', 'maxlength')">Limit exceed</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<input matInput type="text" placeholder="Enter Address" formControlName="address" id="address">
|
||||
<mat-error *ngIf="myError('address', 'required')">Address is required</mat-error>
|
||||
<mat-error *ngIf="myError('address', 'maxlength')">Limit exceed</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<input matInput type="text" placeholder="Enter State" formControlName="state" id="state">
|
||||
<mat-error *ngIf="myError('state', 'required')">City is required</mat-error>
|
||||
<mat-error *ngIf="myError('state', 'maxlength')">Limit exceed</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<input matInput type="text" placeholder="Enter City" formControlName="city" id="city">
|
||||
<mat-error *ngIf="myError('city', 'required')">City is required</mat-error>
|
||||
<mat-error *ngIf="myError('city', 'maxlength')">Limit exceed</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<input matInput type="text" placeholder="Email" formControlName="email" id="email">
|
||||
<mat-error *ngIf="!form.get('email')?.errors?.required && (form.get('email')?.errors?.pattern)">
|
||||
Please enter a valid email address
|
||||
</mat-error>
|
||||
<mat-error *ngIf="form.get('email')?.invalid && (form.get('email')?.dirty || form.get('email')?.touched) && form.get('email')?.errors?.required">
|
||||
Email is required
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<input matInput type="text" placeholder="Enter Contact No" formControlName="contact_no" id="contact_no">
|
||||
<mat-error *ngIf="myError('contact_no', 'required')">Contact No is required</mat-error>
|
||||
<mat-error *ngIf="myError('contact_no', 'maxlength')">Limit exceed</mat-error>
|
||||
</mat-form-field>
|
||||
<div class="vertical-center">
|
||||
<button class="mat-green" mat-raised-button type="submit">Submit</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- <div>
|
||||
<p>Sign Up Using</p>
|
||||
<a href="#" class="shared-icon mr-1 mat-blue"><i class="fa fa-facebook fa-lg mr-1"></i> Facebook</a>
|
||||
<a href="#" class="shared-icon mat-red"><i class="fa fa-google fa-lg mr-1"></i>Google</a>
|
||||
</div> -->
|
||||
</form>
|
||||
</div>
|
||||
</mat-card>
|
||||
@ -0,0 +1,7 @@
|
||||
.vertical-center {
|
||||
margin: 0;
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// -ms-transform: translateY(-50%);
|
||||
// transform: translateY(-50%);
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { AddBusinessListComponent } from './add-business-list.component';
|
||||
|
||||
describe('AddBusinessListComponent', () => {
|
||||
let component: AddBusinessListComponent;
|
||||
let fixture: ComponentFixture<AddBusinessListComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ AddBusinessListComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(AddBusinessListComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,66 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-add-business-list',
|
||||
templateUrl: './add-business-list.component.html',
|
||||
styleUrls: ['./add-business-list.component.scss']
|
||||
})
|
||||
export class AddBusinessListComponent implements OnInit {
|
||||
form: FormGroup;
|
||||
fileToUpload: any;
|
||||
imageUrl: any;
|
||||
|
||||
businessselect = new FormControl('', [Validators.required]);
|
||||
selects = [
|
||||
{name: 'A'},
|
||||
{name: 'B'},
|
||||
{name: 'C'},
|
||||
{name: 'D'},
|
||||
];
|
||||
|
||||
constructor(private router: Router,private formBuilder: FormBuilder) { }
|
||||
|
||||
get f(){
|
||||
return this.form.controls;
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.form = new FormGroup({
|
||||
businessselect: new FormControl('', [Validators.required]),
|
||||
bus_name: new FormControl('', [Validators.required, Validators.maxLength(20)]),
|
||||
address: new FormControl('', [Validators.required, Validators.maxLength(50)]),
|
||||
city: new FormControl('', [Validators.required, Validators.maxLength(10)]),
|
||||
state: new FormControl('', [Validators.required, Validators.maxLength(10)]),
|
||||
email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(
|
||||
'[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$',
|
||||
),]),
|
||||
contact_no: new FormControl('', [Validators.required, Validators.maxLength(10)]),
|
||||
});
|
||||
}
|
||||
|
||||
public myError = (controlName: string, errorName: string) =>{
|
||||
return this.form.controls[controlName].hasError(errorName);
|
||||
}
|
||||
|
||||
submit(){
|
||||
console.log(this.form.value);
|
||||
}
|
||||
register() {
|
||||
this.router.navigate(['/']);
|
||||
}
|
||||
|
||||
handleFileInput(file: FileList) {
|
||||
this.fileToUpload = file.item(0);
|
||||
|
||||
//Show image preview
|
||||
let reader = new FileReader();
|
||||
reader.onload = (event: any) => {
|
||||
this.imageUrl = event.target.result;
|
||||
}
|
||||
reader.readAsDataURL(this.fileToUpload);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@ -0,0 +1,74 @@
|
||||
<h3>Business Details</h3>
|
||||
<mat-form-field>
|
||||
<mat-label>Filter</mat-label>
|
||||
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
|
||||
</mat-form-field>
|
||||
<button mat-button (click)="openDialog('Add',{})" class="button">Add Business</button>
|
||||
<mat-sidenav-container class="app-inner background-none shadow-none mail-db">
|
||||
<div class="main-content" fxLayout="row" fxLayoutAlign="center start">
|
||||
<div fxFlex.gt-sm="90" fxFlex.gt-xs="95" fxFlex="100">
|
||||
<div class="messages-list material fullscreen">
|
||||
<mat-accordion>
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header >
|
||||
<table mat-table [dataSource]="dataSource" #mytable class="my-table mat-elevation-z8 len-table">
|
||||
|
||||
<ng-container matColumnDef="id">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> S.NO </th>
|
||||
<td mat-cell *matCellDef="let element" class="element-spc"> {{element.id}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="logo">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Logo </th>
|
||||
<td mat-cell *matCellDef="let element"> <img [src]="element.logo" /> </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Name </th>
|
||||
<td mat-cell *matCellDef="let element" class="element-spc"> {{element.name}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="email">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Email </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.email}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="phone">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Phone </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.phone}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="address">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Address </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.address}} <br> {{element.city}} <br> {{element.state}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="state">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> State </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.state}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="city">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> City </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.city}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="action">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Action </th>
|
||||
<td mat-cell *matCellDef="let element" class="action-link">
|
||||
<a (click)="openDialog('Update',element)"><span class="material-icons edit-color">edit</span></a>
|
||||
<a (click)="confirmBox('Delete',element)"><span class="material-icons edit-color delete">delete</span></a>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
</mat-expansion-panel-header>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-sidenav-container>
|
||||
|
||||
@ -0,0 +1,69 @@
|
||||
.my-table{
|
||||
width: 120%;
|
||||
}
|
||||
.button{
|
||||
float: right;
|
||||
background-color: #4caf50;
|
||||
color: #ffff;
|
||||
}
|
||||
th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
|
||||
padding: 6px;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
.mat-expansion-panel-header {
|
||||
display: inline!important;
|
||||
}
|
||||
::ng-deep .mat-drawer-content {
|
||||
overflow: hidden!important;
|
||||
background-color: #ffff;
|
||||
}
|
||||
::ng-deep .body-container {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background-color: #ffff;
|
||||
}
|
||||
::ng-deep .mat-expansion-panel:not([class*='mat-elevation-z']) {
|
||||
box-shadow: none!important;
|
||||
}
|
||||
img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.fullscreen{
|
||||
position: absolute !important;
|
||||
height: auto !important;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
tr.mat-header-row {
|
||||
height: 30px!important;
|
||||
}
|
||||
.font-color{
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
.edit-color{
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
.edit-color:hover {
|
||||
color: #4caf50;
|
||||
}
|
||||
.delete:hover {
|
||||
color:#ff0000;
|
||||
}
|
||||
::ng-deep .mat-form-field-appearance-legacy .mat-form-field-wrapper {
|
||||
width: 180%;
|
||||
}
|
||||
|
||||
::ng-deep .mat-content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
/* flex-direction: row; */
|
||||
/* overflow: hidden; */
|
||||
overflow-x: auto!important;
|
||||
overflow-y: auto!important;
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { BusinessListComponent } from './business-list.component';
|
||||
|
||||
describe('BusinessListComponent', () => {
|
||||
let component: BusinessListComponent;
|
||||
let fixture: ComponentFixture<BusinessListComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ BusinessListComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(BusinessListComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,147 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { MatPaginator } from '@angular/material/paginator';
|
||||
import { MatSort } from '@angular/material/sort';
|
||||
import { MatTable, MatTableDataSource } from '@angular/material/table';
|
||||
import Swal from 'sweetalert2/dist/sweetalert2.js';
|
||||
import { DialogBoxComponent } from '../dialog-box/dialog-box.component';
|
||||
|
||||
export interface UsersData {
|
||||
id: number;
|
||||
logo: string;
|
||||
name: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
address: string;
|
||||
city: string;
|
||||
state: string;
|
||||
}
|
||||
const ELEMENT_DATA: UsersData[] = [
|
||||
{id: 1, logo: 'assets/images/1.jpg', name: 'school management system ', email: 'management@gmail.com', phone: '8756453456', address:'14-20b/19 Vasantham Colony, Sangakiri.', state: 'Tamil Nadu', city: 'salem', },
|
||||
{id: 2, logo: 'assets/images/2.jpg', name: 'Sample', email: 'sample@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu'},
|
||||
{id: 3, logo: 'assets/images/3.jpg', name: 'Test', email: 'test@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu'},
|
||||
{id: 4, logo: 'assets/images/4.jpg', name: 'Sample', email: 'sample@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu'},
|
||||
{id: 5, logo: 'assets/images/1.jpg', name: 'Test', email: 'test@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu'},
|
||||
{id: 6, logo: 'assets/images/2.jpg', name: 'Sample', email: 'sample@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu'},
|
||||
{id: 7, logo: 'assets/images/3.jpg', name: 'Test', email: 'test@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu'},
|
||||
{id: 8, logo: 'assets/images/4.jpg', name: 'Sample', email: 'sample@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu'},
|
||||
{id: 9, logo: 'assets/images/1.jpg', name: 'Test', email: 'test@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu'},
|
||||
{id: 10, logo: 'assets/images/2.jpg', name: 'Sample', email: 'sample@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu'},
|
||||
];
|
||||
|
||||
@Component({
|
||||
selector: 'app-business-list',
|
||||
templateUrl: './business-list.component.html',
|
||||
styleUrls: ['./business-list.component.scss'],
|
||||
})
|
||||
export class BusinessListComponent implements OnInit {
|
||||
push: any;
|
||||
displayedColumns: string[] = ['id','logo', 'name', 'email','phone', 'address', 'action'];
|
||||
dataSource: any;
|
||||
// dataSource: any = new MatTableDataSource(ELEMENT_DATA);
|
||||
@ViewChild(MatTable,{static:true}) table: MatTable<any>;
|
||||
@ViewChild(MatPaginator) paginator: MatPaginator;
|
||||
|
||||
ngAfterViewInit() {
|
||||
this.dataSource.paginator = this.paginator;
|
||||
}
|
||||
applyFilter(event: Event) {
|
||||
const filterValue = (event.target as HTMLInputElement).value;
|
||||
this.dataSource.filter = filterValue.trim().toLowerCase();
|
||||
if (this.dataSource.paginator) {
|
||||
this.dataSource.paginator.firstPage();
|
||||
}
|
||||
}
|
||||
constructor(public dialog: MatDialog) { }
|
||||
|
||||
confirmBox(name,element){
|
||||
console.log(name,element)
|
||||
Swal.fire({
|
||||
title: 'Are you sure want to remove?',
|
||||
text: 'You will not be able to recover this file!',
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Yes, delete it!',
|
||||
cancelButtonText: 'No, keep it'
|
||||
}).then((result) => {
|
||||
if (result.value) {
|
||||
this.deleteRowData(element);
|
||||
Swal.fire(
|
||||
'Deleted!',
|
||||
'Your imaginary file has been deleted.',
|
||||
'success'
|
||||
)
|
||||
} else if (result.dismiss === Swal.DismissReason.cancel) {
|
||||
Swal.fire(
|
||||
'Cancelled',
|
||||
'Your imaginary file is safe :)',
|
||||
'error'
|
||||
)
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
openDialog(action,obj) {
|
||||
obj.action = action;
|
||||
const dialogRef = this.dialog.open(DialogBoxComponent, {
|
||||
// width: '30%',
|
||||
height: '100%',
|
||||
// maxWidth: '38vw',
|
||||
position: { right: '0' },
|
||||
data:obj
|
||||
});
|
||||
dialogRef.afterClosed().subscribe(result => {
|
||||
console.log(result)
|
||||
if(result.event == 'Add'){
|
||||
this.addRowData(result.data);
|
||||
}else if(result.event == 'Update'){
|
||||
this.updateRowData(result.data);
|
||||
}else if(result.event == 'Delete'){
|
||||
this.deleteRowData(result.data);
|
||||
}
|
||||
});
|
||||
}
|
||||
addRowData(row_obj){
|
||||
var d = this.dataSource.data.length+1
|
||||
console.log(this.dataSource)
|
||||
this.dataSource.data.push
|
||||
({
|
||||
id: d,
|
||||
logo: row_obj.logo,
|
||||
name: row_obj.name,
|
||||
email: row_obj.email,
|
||||
phone: row_obj.phone,
|
||||
address: row_obj.address,
|
||||
city: row_obj.city,
|
||||
state: row_obj.state
|
||||
|
||||
});
|
||||
this.table.renderRows();
|
||||
}
|
||||
updateRowData(row_obj){
|
||||
console.log(row_obj)
|
||||
this.dataSource = this.dataSource.data.filter((value,key)=>{
|
||||
if(value.id == row_obj.id){
|
||||
value.logo = row_obj.logo;
|
||||
value.name = row_obj.name;
|
||||
value.email = row_obj.email;
|
||||
value.phone = row_obj.phone;
|
||||
value.address = row_obj.address;
|
||||
value.city = row_obj.city;
|
||||
value.state = row_obj.state;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}
|
||||
deleteRowData(row_obj){
|
||||
console.log(this.dataSource.data,row_obj)
|
||||
this.dataSource.data = this.dataSource.data.filter((value,key)=>{
|
||||
return value.id != row_obj.id
|
||||
});
|
||||
console.log(this.dataSource)
|
||||
}
|
||||
ngOnInit(): void {
|
||||
this.dataSource = new MatTableDataSource(ELEMENT_DATA)
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
|
||||
const routes: Routes = [];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class BusinessRoutingModule { }
|
||||
33
ng-seed/src/app/appoinment/business/business.module.ts
Normal file
33
ng-seed/src/app/appoinment/business/business.module.ts
Normal file
@ -0,0 +1,33 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import { BusinessRoutingModule } from './business-routing.module';
|
||||
import { BusinessListComponent } from './business-list/business-list.component';
|
||||
import { AddBusinessListComponent } from './add-business-list/add-business-list.component';
|
||||
import { MaterialModulesModule } from '../material-modules/material-modules.module';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { DialogBoxComponent } from './dialog-box/dialog-box.component';
|
||||
import { ScrollingModule } from '@angular/cdk/scrolling';
|
||||
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
BusinessListComponent,
|
||||
AddBusinessListComponent,
|
||||
DialogBoxComponent
|
||||
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
BusinessRoutingModule,
|
||||
MaterialModulesModule,
|
||||
MatSidenavModule,
|
||||
MatFormFieldModule,
|
||||
ScrollingModule
|
||||
|
||||
|
||||
]
|
||||
})
|
||||
export class BusinessModule { }
|
||||
@ -0,0 +1,57 @@
|
||||
<mat-card class="settings-panel" >
|
||||
<h5 mat-dialog-title> <strong>{{action}} New Business</strong>
|
||||
<button mat-icon-button type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="close()"
|
||||
><mat-icon>close</mat-icon></button></h5>
|
||||
|
||||
<div mat-dialog-content class="my-table">
|
||||
<form [formGroup]="form" (ngSubmit)="submit()">
|
||||
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
<input placeholder=" Name" matInput formControlName="name">
|
||||
<mat-error *ngIf="myError('name', 'required')">Name is required</mat-error>
|
||||
<mat-error *ngIf="myError('name', 'maxlength')">Limit exceed</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
<input placeholder=" Email" matInput [(ngModel)]="local_data.email" formControlName="email">
|
||||
<mat-error *ngIf="!form.get('email')?.errors?.required && (form.get('email')?.errors?.pattern)">
|
||||
Please enter a valid email address
|
||||
</mat-error>
|
||||
<mat-error *ngIf="form.get('email')?.invalid && (form.get('email')?.dirty || form.get('email')?.touched) && form.get('email')?.errors?.required">
|
||||
Email is required
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
<input placeholder=" Phone" matInput [(ngModel)]="local_data.phone" formControlName="contact_no">
|
||||
<mat-error *ngIf="myError('contact_no', 'required')">Contact No is required</mat-error>
|
||||
<mat-error *ngIf="myError('contact_no', 'maxlength')">Limit exceed</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
<input placeholder=" Address" matInput [(ngModel)]="local_data.address" formControlName="address">
|
||||
<mat-error *ngIf="myError('address', 'required')">Address is required</mat-error>
|
||||
<mat-error *ngIf="myError('address', 'maxlength')">Limit exceed</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
<input placeholder=" State" matInput [(ngModel)]="local_data.state" formControlName="state">
|
||||
<mat-error *ngIf="myError('state', 'required')">City is required</mat-error>
|
||||
<mat-error *ngIf="myError('state', 'maxlength')">Limit exceed</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
<input placeholder=" City" matInput [(ngModel)]="local_data.city" formControlName="city">
|
||||
<mat-error *ngIf="myError('city', 'required')">City is required</mat-error>
|
||||
<mat-error *ngIf="myError('city', 'maxlength')">Limit exceed</mat-error>
|
||||
</mat-form-field>
|
||||
<img class="image" [src]="url" height="50">
|
||||
<input type='file' (change)="onSelectFile($event)" formControlName="image">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<ng-template #elseTemplate>
|
||||
Sure to delete <b>{{local_data.name}}</b>?
|
||||
</ng-template><br>
|
||||
<div mat-dialog-actions>
|
||||
<button mat-button (click)="doAction()" class="mat-green" mat-raised-button >{{action}}</button>
|
||||
<button mat-button (click)="closeDialog()" >Cancel</button>
|
||||
</div>
|
||||
</mat-card>
|
||||
|
||||
|
||||
@ -0,0 +1,48 @@
|
||||
// ::ng-deep .cdk-overlay-pane{
|
||||
// width: 60%!important;
|
||||
// }
|
||||
.mat-pane{
|
||||
width: 20rem;
|
||||
}
|
||||
.button{
|
||||
// float: right;
|
||||
margin-bottom: 1rem;
|
||||
background-color: #ffff;
|
||||
margin-top: -1rem;
|
||||
margin-left: 6rem;
|
||||
}
|
||||
::ng-deep .mat-card.settings-panel {
|
||||
position: inherit;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
width: 350px;
|
||||
z-index: 9;
|
||||
top: 58px;
|
||||
}
|
||||
|
||||
::ng-deep body .mat-card {
|
||||
box-shadow:none!important;
|
||||
}
|
||||
|
||||
// @include media-breakpoint-down(lg) {
|
||||
// padding-top: 150px;
|
||||
// }
|
||||
// @include media-breakpoint-down(md) {
|
||||
// padding-top: 100px;
|
||||
// }
|
||||
// @include media-breakpoint-down(sm) {
|
||||
// padding-top: 100px;
|
||||
// }
|
||||
|
||||
|
||||
// @media only screen and (max-width: 600px) {
|
||||
// .cdk-overlay-pane{
|
||||
// width: 90%!important;
|
||||
// }
|
||||
// }
|
||||
|
||||
@media (max-width: 959px){
|
||||
.cdk-overlay-pane{
|
||||
width: 90%!important;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { DialogBoxComponent } from './dialog-box.component';
|
||||
|
||||
describe('DialogBoxComponent', () => {
|
||||
let component: DialogBoxComponent;
|
||||
let fixture: ComponentFixture<DialogBoxComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ DialogBoxComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DialogBoxComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,74 @@
|
||||
import { Component, Inject, OnInit, Optional } from '@angular/core';
|
||||
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
|
||||
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
|
||||
import { Router } from '@angular/router';
|
||||
export interface UsersData {
|
||||
name: string;
|
||||
id: number;
|
||||
}
|
||||
@Component({
|
||||
selector: 'app-dialog-box',
|
||||
templateUrl: './dialog-box.component.html',
|
||||
styleUrls: ['./dialog-box.component.scss']
|
||||
})
|
||||
export class DialogBoxComponent implements OnInit {
|
||||
form: FormGroup;
|
||||
fileToUpload: any;
|
||||
imageUrl: any;
|
||||
action:string;
|
||||
local_data:any;
|
||||
url: string | ArrayBuffer;
|
||||
constructor(private router: Router,private formBuilder: FormBuilder,
|
||||
public dialogRef: MatDialogRef<DialogBoxComponent>,
|
||||
@Optional() @Inject(MAT_DIALOG_DATA) public data: UsersData) {
|
||||
console.log(data);
|
||||
this.local_data = {...data};
|
||||
this.action = this.local_data.action;
|
||||
}
|
||||
get f(){
|
||||
return this.form.controls;
|
||||
}
|
||||
doAction(){
|
||||
let tmp = this.form.value
|
||||
tmp.id = this.local_data.id
|
||||
this.dialogRef.close({event:this.action,data:tmp});
|
||||
console.log(this.form.value);
|
||||
console.log(this.action,this.local_data)
|
||||
}
|
||||
closeDialog(){
|
||||
this.dialogRef.close({event:'Cancel'});
|
||||
}
|
||||
onSelectFile(event) {
|
||||
if (event.target.files && event.target.files[0]) {
|
||||
var reader = new FileReader();
|
||||
reader.readAsDataURL(event.target.files[0]);
|
||||
reader.onload = (event) => {
|
||||
this.url = event.target.result;
|
||||
}
|
||||
}
|
||||
}
|
||||
close() {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
ngOnInit() {
|
||||
this.form = new FormGroup({
|
||||
businessselect: new FormControl('', [Validators.required]),
|
||||
image: new FormControl('', null),
|
||||
name: new FormControl('', [Validators.required, Validators.maxLength(20)]),
|
||||
address: new FormControl('', [Validators.required, Validators.maxLength(50)]),
|
||||
city: new FormControl('', [Validators.required, Validators.maxLength(10)]),
|
||||
state: new FormControl('', [Validators.required, Validators.maxLength(10)]),
|
||||
email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(
|
||||
'[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$',
|
||||
),]),
|
||||
contact_no: new FormControl('', [Validators.required, Validators.maxLength(10)]),
|
||||
});
|
||||
this.form.patchValue(this.local_data)
|
||||
}
|
||||
public myError = (controlName: string, errorName: string) =>{
|
||||
return this.form.controls[controlName].hasError(errorName);
|
||||
}
|
||||
submit(){
|
||||
console.log(this.form.value);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,35 @@
|
||||
<h3>
|
||||
|
||||
<button class="btn btn-primary pull-right" (click)="addEvent()">
|
||||
Add new
|
||||
</button>
|
||||
<div class="clearfix"></div>
|
||||
</h3>
|
||||
<mat-toolbar color="primary">
|
||||
<span fxFlex fxHide="false" fxHide.gt-xs>{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}</span>
|
||||
<span fxFlex fxShow="false" fxShow.gt-xs>{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}</span>
|
||||
<div fxShow="false" fxShow.gt-xs>
|
||||
<button mat-button (click)="view = 'month'" [class.active]="view === 'month'">Month</button>
|
||||
<button mat-button (click)="view = 'week'" [class.active]="view === 'week'">Week</button>
|
||||
<button mat-button (click)="view = 'day'" [class.active]="view === 'day'">Day</button>
|
||||
</div>
|
||||
<div fxHide="false" fxHide.gt-xs>
|
||||
<button mat-icon-button (click)="view = 'month'" [class.active]="view === 'month'"><mat-icon>view_module</mat-icon></button>
|
||||
<button mat-icon-button (click)="view = 'week'" [class.active]="view === 'week'"><mat-icon>view_week</mat-icon></button>
|
||||
<button mat-icon-button (click)="view = 'day'" [class.active]="view === 'day'"><mat-icon>view_day</mat-icon></button>
|
||||
</div>
|
||||
<span fxFlex fxHide="false" fxHide.gt-xs></span>
|
||||
<button mat-icon-button mwlCalendarPreviousView [view]="view" [(viewDate)]="viewDate"><mat-icon>chevron_left</mat-icon></button>
|
||||
<button mat-icon-button mwlCalendarToday [(viewDate)]="viewDate"><mat-icon>today</mat-icon></button>
|
||||
<button mat-icon-button mwlCalendarNextView [view]="view" [(viewDate)]="viewDate"><mat-icon>chevron_right</mat-icon></button>
|
||||
</mat-toolbar>
|
||||
<mat-card>
|
||||
<div [ngSwitch]="view">
|
||||
<mwl-calendar-month-view *ngSwitchCase="'month'" [viewDate]="viewDate" [events]="events" [refresh]="refresh" [activeDayIsOpen]="activeDayIsOpen" (dayClicked)="dayClicked($event.day)" (eventClicked)="handleEvent('Clicked', $event.event)" (eventTimesChanged)="eventTimesChanged($event)">
|
||||
</mwl-calendar-month-view>
|
||||
<mwl-calendar-week-view *ngSwitchCase="'week'" [viewDate]="viewDate" [events]="events" [refresh]="refresh" (eventClicked)="handleEvent('Clicked', $event.event)" (eventTimesChanged)="eventTimesChanged($event)">
|
||||
</mwl-calendar-week-view>
|
||||
<mwl-calendar-day-view *ngSwitchCase="'day'" [viewDate]="viewDate" [events]="events" [refresh]="refresh" (eventClicked)="handleEvent('Clicked', $event.event)" (eventTimesChanged)="eventTimesChanged($event)">
|
||||
</mwl-calendar-day-view>
|
||||
</div>
|
||||
</mat-card>
|
||||
@ -0,0 +1,10 @@
|
||||
// @import "../../../assets/styles/scss/components/calendar";
|
||||
:host {
|
||||
margin-left: -5px;
|
||||
margin-right: -5px;
|
||||
margin-top: -5px;
|
||||
display: block;
|
||||
}
|
||||
mat-card {
|
||||
margin: 8px;
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { CalendarListComponent } from './calendar-list.component';
|
||||
|
||||
describe('CalendarListComponent', () => {
|
||||
let component: CalendarListComponent;
|
||||
let fixture: ComponentFixture<CalendarListComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ CalendarListComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(CalendarListComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,222 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ChangeDetectionStrategy, Inject, ViewChild, TemplateRef } from '@angular/core';
|
||||
//import { DOCUMENT } from '@angular/platform-browser';
|
||||
import { MatDialog, MatDialogRef, MatDialogConfig, MAT_DIALOG_DATA } from '@angular/material/dialog';
|
||||
import { startOfDay, endOfDay, subDays, addDays, endOfMonth, isSameDay, isSameMonth, addHours} from 'date-fns';
|
||||
import { Subject } from 'rxjs';
|
||||
import { CalendarEvent, CalendarEventAction, CalendarEventTimesChangedEvent } from 'angular-calendar';
|
||||
import { CalendardialogComponent } from '../calendardialog/calendardialog.component';
|
||||
|
||||
const colors: any = {
|
||||
red: {
|
||||
primary: '#ad2121',
|
||||
secondary: '#FAE3E3'
|
||||
},
|
||||
blue: {
|
||||
primary: '#1e90ff',
|
||||
secondary: '#D1E8FF'
|
||||
},
|
||||
yellow: {
|
||||
primary: '#e3bc08',
|
||||
secondary: '#FDF1BA'
|
||||
}
|
||||
};
|
||||
@Component({
|
||||
selector: 'app-calendar-list',
|
||||
templateUrl: './calendar-list.component.html',
|
||||
styleUrls: ['./calendar-list.component.scss']
|
||||
})
|
||||
export class CalendarListComponent implements OnInit {
|
||||
private yesterday: Date;
|
||||
dialogRef: MatDialogRef<CalendardialogComponent>;
|
||||
lastCloseResult: string;
|
||||
actionsAlignment: string;
|
||||
config: MatDialogConfig = {
|
||||
disableClose: false,
|
||||
width: '',
|
||||
height: '',
|
||||
position: {
|
||||
top: '',
|
||||
bottom: '',
|
||||
left: '',
|
||||
right: ''
|
||||
},
|
||||
data: {
|
||||
action: '',
|
||||
event: []
|
||||
}
|
||||
};
|
||||
numTemplateOpens = 0;
|
||||
|
||||
view = 'month';
|
||||
|
||||
viewDate: Date = new Date();
|
||||
|
||||
modalData: {
|
||||
action: string,
|
||||
event: CalendarEvent
|
||||
};
|
||||
|
||||
actions: CalendarEventAction[] = [{
|
||||
label: '<i class="editButton"></i>',
|
||||
onClick: ({event}: {event: CalendarEvent}): void => {
|
||||
this.handleEvent('Edited', event);
|
||||
}
|
||||
}, {
|
||||
label: '<i class="deleteButton"></i>',
|
||||
onClick: ({event}: {event: CalendarEvent}): void => {
|
||||
this.events = this.events.filter(iEvent => iEvent !== event);
|
||||
this.handleEvent('Deleted', event);
|
||||
}
|
||||
}];
|
||||
|
||||
refresh: Subject<any> = new Subject();
|
||||
|
||||
|
||||
events: CalendarEvent[] = [{
|
||||
start: subDays(startOfDay(new Date()), 1),
|
||||
end: addDays(new Date(), 1),
|
||||
title: 'A 3 day event',
|
||||
color: colors.red,
|
||||
actions: this.actions
|
||||
}, {
|
||||
start: startOfDay(new Date()),
|
||||
title: 'An event with no end date',
|
||||
color: colors.yellow,
|
||||
actions: this.actions
|
||||
}, {
|
||||
start: subDays(endOfMonth(new Date()), 3),
|
||||
end: addDays(endOfMonth(new Date()), 3),
|
||||
title: 'A long event that spans 2 months',
|
||||
color: colors.blue
|
||||
},
|
||||
{
|
||||
start: addHours(startOfDay(new Date()), 2),
|
||||
end: new Date(),
|
||||
title: 'A draggable and resizable event',
|
||||
color: colors.yellow,
|
||||
actions: this.actions,
|
||||
resizable: {
|
||||
beforeStart: true,
|
||||
afterEnd: true
|
||||
},
|
||||
draggable: true
|
||||
}];
|
||||
|
||||
activeDayIsOpen = true;
|
||||
|
||||
constructor(public dialog: MatDialog) {
|
||||
this.initializeYesterday();
|
||||
this.initializeEvents();
|
||||
}
|
||||
private initializeYesterday() {
|
||||
this.yesterday = new Date();
|
||||
this.yesterday.setDate(this.yesterday.getDate() - 1);
|
||||
}
|
||||
private initializeEvents() {
|
||||
this.events = [
|
||||
{
|
||||
title: 'Editable event',
|
||||
color: colors.yellow,
|
||||
start: this.yesterday,
|
||||
actions: [
|
||||
{
|
||||
label: '<i class="fa fa-fw fa-pencil"></i>',
|
||||
onClick: ({ event }: { event: CalendarEvent }): void => {
|
||||
console.log('Edit event', event);
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Deletable event',
|
||||
color: colors.blue,
|
||||
start: this.yesterday,
|
||||
actions: [
|
||||
{
|
||||
label: '<i class="fa fa-fw fa-times"></i>',
|
||||
onClick: ({ event }: { event: CalendarEvent }): void => {
|
||||
this.events = this.events.filter((iEvent) => iEvent !== event);
|
||||
console.log('Event deleted', event);
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Non editable and deletable event',
|
||||
color: colors.red,
|
||||
start: this.yesterday,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
dayClicked({date, events}: {date: Date, events: CalendarEvent[]}): void {
|
||||
|
||||
if (isSameMonth(date, this.viewDate)) {
|
||||
if (
|
||||
(isSameDay(this.viewDate, date) && this.activeDayIsOpen === true) ||
|
||||
events.length === 0
|
||||
) {
|
||||
this.activeDayIsOpen = false;
|
||||
} else {
|
||||
this.activeDayIsOpen = true;
|
||||
this.viewDate = date;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
eventTimesChanged({event, newStart, newEnd}: CalendarEventTimesChangedEvent): void {
|
||||
event.start = newStart;
|
||||
event.end = newEnd;
|
||||
this.handleEvent('Dropped or resized', event);
|
||||
this.refresh.next();
|
||||
}
|
||||
|
||||
handleEvent(action: string, event: CalendarEvent): void {
|
||||
this.config.data = {event, action};
|
||||
this.dialogRef = this.dialog.open(CalendardialogComponent, this.config);
|
||||
|
||||
this.dialogRef.afterClosed().subscribe((result: string) => {
|
||||
this.lastCloseResult = result;
|
||||
this.dialogRef = null;
|
||||
});
|
||||
}
|
||||
|
||||
addEvent(): void {
|
||||
console.log(startOfDay);
|
||||
this.events.push({
|
||||
title: 'New event',
|
||||
start: startOfDay(new Date()),
|
||||
end: endOfDay(new Date()),
|
||||
color: colors.red,
|
||||
draggable: true,
|
||||
resizable: {
|
||||
beforeStart: true,
|
||||
afterEnd: true
|
||||
}
|
||||
});
|
||||
this.refresh.next();
|
||||
}
|
||||
ngOnInit() {
|
||||
}
|
||||
}
|
||||
|
||||
// @Component({
|
||||
// selector: 'app-calendar-dialog',
|
||||
// template: `
|
||||
// <h5 class="mt-0">Event action occurred</h5>
|
||||
// <div>
|
||||
// Action:
|
||||
// <pre>{{ data?.action }}</pre>
|
||||
// </div>
|
||||
// <div>
|
||||
// Action:
|
||||
// <pre>{{ data?.action }}</pre>
|
||||
// </div>
|
||||
// <button mat-button type="button" (click)="dialogRef.close()">Close dialog</button>`
|
||||
// })
|
||||
// export class CalendarDialogComponent {
|
||||
// constructor(
|
||||
// public dialogRef: MatDialogRef<CalendarDialogComponent>,
|
||||
// @Inject(MAT_DIALOG_DATA) public data: any) { }
|
||||
// }
|
||||
@ -0,0 +1,45 @@
|
||||
<mat-toolbar color="primary">
|
||||
<h5 mat-dialog-title>21 Feb 2022 ...
|
||||
</h5>
|
||||
<button mat-icon-button type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="dialogRef.close()"
|
||||
><mat-icon>close</mat-icon></button>
|
||||
</mat-toolbar>
|
||||
<div mat-dialog-content>
|
||||
<div class="columns ">
|
||||
<div class="column fnt-size">Consultation</div>
|
||||
<div class="column fnt-size">Staff</div>
|
||||
<div class="column fnt-size" style="margin-right: -3rem;">Booking ID</div>
|
||||
</div>
|
||||
<div class="columns background">
|
||||
<p>10.00 am</p>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column">Content Audit<br>
|
||||
<p class="time">10.00 am</p>
|
||||
</div>
|
||||
<div class="toolbar-avatar column">
|
||||
<img src="assets/images/1.jpg">
|
||||
<div class="column size-nme">Narmadhaa</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="column" style="margin-right: 3rem;">#V1-000009</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns background">
|
||||
<p>9.00 am</p>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column">Content Audit<br>
|
||||
<p class="time">10.00 am</p>
|
||||
</div>
|
||||
<div class="toolbar-avatar column">
|
||||
<img src="assets/images/1.jpg">
|
||||
<div class="column size-nme">Narmadhaa</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="column" style="margin-right: 3rem;">#V1-000009</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,56 @@
|
||||
::ng-deep .mat-dialog-container {
|
||||
padding: 0px;
|
||||
overflow: hidden!important;
|
||||
}
|
||||
::ng-deep .cdk-overlay-pane{
|
||||
max-width: 0vm!important;
|
||||
position: static;
|
||||
width: 40%;
|
||||
pointer-events: none!important;
|
||||
}
|
||||
.button{
|
||||
// float: right;
|
||||
// margin-bottom: 1rem;
|
||||
// background-color: #ffff;
|
||||
// margin-top: -1rem;
|
||||
margin-left: 17rem;
|
||||
// margin-left: 5rem;
|
||||
}
|
||||
.columns {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
padding: 20px 0px 0px 0px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
.column {
|
||||
flex: 33.33%;
|
||||
}
|
||||
.background{
|
||||
background-color: #D1D0CE;
|
||||
height: 40px;
|
||||
padding: 0px 0px 0px 10px;
|
||||
}
|
||||
.fnt-size{
|
||||
font-size: 12px;
|
||||
color: #000000;
|
||||
font-weight: 600;
|
||||
}
|
||||
p{
|
||||
font-size: 12px;
|
||||
color: #000000;
|
||||
font-weight: 500;
|
||||
}
|
||||
.time{
|
||||
margin-top: 0px;
|
||||
}
|
||||
.size-nme{
|
||||
margin-top: -29px;
|
||||
}
|
||||
img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
margin-left: -2rem;
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { CalendardialogComponent } from './calendardialog.component';
|
||||
|
||||
describe('CalendardialogComponent', () => {
|
||||
let component: CalendardialogComponent;
|
||||
let fixture: ComponentFixture<CalendardialogComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ CalendardialogComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(CalendardialogComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,26 @@
|
||||
import { Component, Inject, OnInit } from '@angular/core';
|
||||
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
|
||||
|
||||
@Component({
|
||||
selector: 'app-calendardialog',
|
||||
templateUrl: './calendardialog.component.html',
|
||||
styleUrls: ['./calendardialog.component.scss']
|
||||
})
|
||||
export class CalendardialogComponent implements OnInit {
|
||||
dialog: any;
|
||||
|
||||
|
||||
constructor(
|
||||
public dialogRef: MatDialogRef<CalendardialogComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data: any) { }
|
||||
|
||||
openDialog() {
|
||||
this.dialog.open(CalendardialogComponent);
|
||||
}
|
||||
close() {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
|
||||
const routes: Routes = [];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class CalendarsRoutingModule { }
|
||||
26
ng-seed/src/app/appoinment/calendars/calendars.module.ts
Normal file
26
ng-seed/src/app/appoinment/calendars/calendars.module.ts
Normal file
@ -0,0 +1,26 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import { CalendarsRoutingModule } from './calendars-routing.module';
|
||||
import { CalendarListComponent } from './calendar-list/calendar-list.component';
|
||||
import { CalendarModule, DateAdapter } from 'angular-calendar';
|
||||
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
|
||||
import { MaterialModulesModule } from '../material-modules/material-modules.module';
|
||||
import { CalendardialogComponent } from './calendardialog/calendardialog.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
CalendarListComponent,
|
||||
CalendardialogComponent
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
CalendarsRoutingModule,
|
||||
MaterialModulesModule,
|
||||
CalendarModule.forRoot({
|
||||
provide: DateAdapter,
|
||||
useFactory: adapterFactory
|
||||
}),
|
||||
]
|
||||
})
|
||||
export class CalendarsModule { }
|
||||
@ -0,0 +1 @@
|
||||
<p>customers-list works!</p>
|
||||
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { CustomersListComponent } from './customers-list.component';
|
||||
|
||||
describe('CustomersListComponent', () => {
|
||||
let component: CustomersListComponent;
|
||||
let fixture: ComponentFixture<CustomersListComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ CustomersListComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(CustomersListComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-customers-list',
|
||||
templateUrl: './customers-list.component.html',
|
||||
styleUrls: ['./customers-list.component.scss']
|
||||
})
|
||||
export class CustomersListComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
|
||||
const routes: Routes = [];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class CustomersRoutingModule { }
|
||||
23
ng-seed/src/app/appoinment/customers/customers.module.ts
Normal file
23
ng-seed/src/app/appoinment/customers/customers.module.ts
Normal file
@ -0,0 +1,23 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import { CustomersRoutingModule } from './customers-routing.module';
|
||||
import { CustomersListComponent } from './customers-list/customers-list.component';
|
||||
import { MaterialModulesModule } from '../material-modules/material-modules.module';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
CustomersListComponent
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
CustomersRoutingModule,
|
||||
MaterialModulesModule,
|
||||
MatSidenavModule,
|
||||
MatFormFieldModule
|
||||
]
|
||||
})
|
||||
export class CustomersModule { }
|
||||
@ -0,0 +1,129 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FlexLayoutModule } from '@angular/flex-layout';
|
||||
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatListModule } from '@angular/material/list';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { MatToolbarModule } from '@angular/material/toolbar';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatTabsModule } from '@angular/material/tabs';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatPaginatorModule } from '@angular/material/paginator';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatExpansionModule } from '@angular/material/expansion';
|
||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatRadioModule } from '@angular/material/radio';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
|
||||
|
||||
// import { NotifierOptions, NotifierModule } from 'angular-notifier';
|
||||
|
||||
// const pdCustomNotifierOptions: NotifierOptions = {
|
||||
// position: {
|
||||
// horizontal: {
|
||||
// position: 'right',
|
||||
// distance: 12
|
||||
// },
|
||||
// vertical: {
|
||||
// position: 'top',
|
||||
// distance: 32,
|
||||
// gap: 10
|
||||
// }
|
||||
// },
|
||||
// theme: 'material',
|
||||
// behaviour: {
|
||||
// autoHide: 2000,
|
||||
// onClick: 'hide',
|
||||
// onMouseover: 'pauseAutoHide',
|
||||
// showDismissButton: true,
|
||||
// stacking: 4
|
||||
// },
|
||||
// animations: {
|
||||
// enabled: true,
|
||||
// show: {
|
||||
// preset: 'slide',
|
||||
// speed: 300,
|
||||
// easing: 'ease'
|
||||
// },
|
||||
// hide: {
|
||||
// preset: 'fade',
|
||||
// speed: 300,
|
||||
// easing: 'ease',
|
||||
// offset: 50
|
||||
// },
|
||||
// shift: {
|
||||
// speed: 300,
|
||||
// easing: 'ease'
|
||||
// },
|
||||
// overlap: 150
|
||||
// }
|
||||
// };
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
MatInputModule,
|
||||
MatSelectModule,
|
||||
MatIconModule,
|
||||
MatTableModule,
|
||||
MatMenuModule,
|
||||
MatListModule,
|
||||
MatTooltipModule,
|
||||
MatToolbarModule,
|
||||
MatFormFieldModule,
|
||||
MatTabsModule,
|
||||
MatCardModule,
|
||||
MatPaginatorModule,
|
||||
MatButtonModule,
|
||||
FlexLayoutModule,
|
||||
MatExpansionModule,
|
||||
MatProgressBarModule,MatProgressSpinnerModule,
|
||||
//MatTableExporterModule,
|
||||
ReactiveFormsModule,
|
||||
FormsModule,
|
||||
MatDatepickerModule,
|
||||
MatSidenavModule,
|
||||
|
||||
|
||||
|
||||
|
||||
// NotifierModule.withConfig(pdCustomNotifierOptions),
|
||||
],
|
||||
exports:[
|
||||
CommonModule,
|
||||
MatInputModule,
|
||||
MatSelectModule,
|
||||
MatIconModule,
|
||||
MatTableModule,
|
||||
MatListModule,
|
||||
MatToolbarModule,
|
||||
MatFormFieldModule,
|
||||
MatTabsModule,
|
||||
MatCardModule,
|
||||
MatRadioModule,
|
||||
MatCheckboxModule,
|
||||
MatPaginatorModule,
|
||||
MatButtonModule,
|
||||
FlexLayoutModule,
|
||||
MatExpansionModule,
|
||||
MatProgressBarModule,MatProgressSpinnerModule,
|
||||
//MatTableExporterModule,
|
||||
ReactiveFormsModule,
|
||||
FormsModule,
|
||||
MatDatepickerModule,
|
||||
MatSidenavModule
|
||||
|
||||
// NotifierModule,
|
||||
],
|
||||
declarations: []
|
||||
})
|
||||
export class MaterialModulesModule { }
|
||||
@ -0,0 +1 @@
|
||||
<p>add-user-list works!</p>
|
||||
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { AddUserListComponent } from './add-user-list.component';
|
||||
|
||||
describe('AddUserListComponent', () => {
|
||||
let component: AddUserListComponent;
|
||||
let fixture: ComponentFixture<AddUserListComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ AddUserListComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(AddUserListComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,66 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-add-user-list',
|
||||
templateUrl: './add-user-list.component.html',
|
||||
styleUrls: ['./add-user-list.component.scss']
|
||||
})
|
||||
export class AddUserListComponent implements OnInit {
|
||||
|
||||
form: FormGroup;
|
||||
fileToUpload: any;
|
||||
imageUrl: any;
|
||||
|
||||
businessselect = new FormControl('', [Validators.required]);
|
||||
selects = [
|
||||
{name: 'A'},
|
||||
{name: 'B'},
|
||||
{name: 'C'},
|
||||
{name: 'D'},
|
||||
];
|
||||
|
||||
constructor(private router: Router,private formBuilder: FormBuilder) { }
|
||||
|
||||
get f(){
|
||||
return this.form.controls;
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.form = new FormGroup({
|
||||
businessselect: new FormControl('', [Validators.required]),
|
||||
bus_name: new FormControl('', [Validators.required, Validators.maxLength(20)]),
|
||||
address: new FormControl('', [Validators.required, Validators.maxLength(50)]),
|
||||
city: new FormControl('', [Validators.required, Validators.maxLength(10)]),
|
||||
state: new FormControl('', [Validators.required, Validators.maxLength(10)]),
|
||||
email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(
|
||||
'[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$',
|
||||
),]),
|
||||
contact_no: new FormControl('', [Validators.required, Validators.maxLength(10)]),
|
||||
});
|
||||
}
|
||||
|
||||
public myError = (controlName: string, errorName: string) =>{
|
||||
return this.form.controls[controlName].hasError(errorName);
|
||||
}
|
||||
|
||||
submit(){
|
||||
console.log(this.form.value);
|
||||
}
|
||||
register() {
|
||||
this.router.navigate(['/']);
|
||||
}
|
||||
|
||||
handleFileInput(file: FileList) {
|
||||
this.fileToUpload = file.item(0);
|
||||
|
||||
//Show image preview
|
||||
let reader = new FileReader();
|
||||
reader.onload = (event: any) => {
|
||||
this.imageUrl = event.target.result;
|
||||
}
|
||||
reader.readAsDataURL(this.fileToUpload);
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,58 @@
|
||||
<mat-card class="settings-panel" >
|
||||
<h5 mat-dialog-title> <strong>{{action}} New Users</strong>
|
||||
<button mat-icon-button type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="close()"
|
||||
><mat-icon>close</mat-icon></button></h5>
|
||||
|
||||
<div mat-dialog-content class="my-table">
|
||||
<form [formGroup]="form" (ngSubmit)="submit()">
|
||||
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
<input placeholder="User Name" matInput formControlName="Username">
|
||||
<mat-error *ngIf="myError('Username', 'required')">Username is required</mat-error>
|
||||
<mat-error *ngIf="myError('Username', 'maxlength')">Limit exceed</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
<input placeholder="Password" matInput formControlName="Password">
|
||||
<mat-error *ngIf="myError('Password', 'required')">Password is required</mat-error>
|
||||
<mat-error *ngIf="myError('Password', 'maxlength')">Limit exceed</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
<input placeholder="ConfirmPassword" matInput formControlName="confirmPassword">
|
||||
<mat-error *ngIf="myError('confirmPassword', 'required')">confirmPassword is required</mat-error>
|
||||
<mat-error *ngIf="myError('confirmPassword', 'maxlength')">Limit exceed</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
<input placeholder="First Name" matInput formControlName="FirstName">
|
||||
<mat-error *ngIf="myError('FirstName', 'required')">FirstName is required</mat-error>
|
||||
<mat-error *ngIf="myError('FirstName', 'maxlength')">Limit exceed</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
<input placeholder="Last Name" matInput formControlName="LastName">
|
||||
<mat-error *ngIf="myError('LastName', 'required')">LastName is required</mat-error>
|
||||
<mat-error *ngIf="myError('LastName', 'maxlength')">Limit exceed</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
<input placeholder=" Email" matInput [(ngModel)]="local_data.email" formControlName="email">
|
||||
<mat-error *ngIf="!form.get('email')?.errors?.required && (form.get('email')?.errors?.pattern)">
|
||||
Please enter a valid email address
|
||||
</mat-error>
|
||||
<mat-error *ngIf="form.get('email')?.invalid && (form.get('email')?.dirty || form.get('email')?.touched) && form.get('email')?.errors?.required">
|
||||
Email is required
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
</form>
|
||||
</div>
|
||||
<ng-template #elseTemplate>
|
||||
Sure to delete <b>{{local_data.name}}</b>?
|
||||
</ng-template><br>
|
||||
<div mat-dialog-actions>
|
||||
<button mat-button (click)="doAction()" class="mat-green" mat-raised-button >{{action}}</button>
|
||||
<button mat-button (click)="closeDialog()" >Cancel</button>
|
||||
</div>
|
||||
</mat-card>
|
||||
|
||||
|
||||
@ -0,0 +1,26 @@
|
||||
// ::ng-deep .cdk-overlay-pane{
|
||||
// width: 60%!important;
|
||||
// }
|
||||
.mat-pane{
|
||||
width: 20rem;
|
||||
}
|
||||
.button{
|
||||
// float: right;
|
||||
margin-bottom: 1rem;
|
||||
background-color: #ffff;
|
||||
margin-top: -1rem;
|
||||
margin-left: 6rem;
|
||||
}
|
||||
::ng-deep .mat-card.settings-panel {
|
||||
position: inherit;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
width: 350px;
|
||||
z-index: 9;
|
||||
top: 58px;
|
||||
}
|
||||
|
||||
::ng-deep body .mat-card {
|
||||
box-shadow:none!important;
|
||||
}
|
||||
|
||||
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { UserDialogBoxComponent } from './user-dialog-box.component';
|
||||
|
||||
describe('UserDialogBoxComponent', () => {
|
||||
let component: UserDialogBoxComponent;
|
||||
let fixture: ComponentFixture<UserDialogBoxComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ UserDialogBoxComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(UserDialogBoxComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,75 @@
|
||||
import { Component, Inject, OnInit, Optional } from '@angular/core';
|
||||
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
|
||||
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
|
||||
import { Router } from '@angular/router';
|
||||
export interface UsersData {
|
||||
name: string;
|
||||
id: number;
|
||||
}
|
||||
@Component({
|
||||
selector: 'app-user-dialog-box',
|
||||
templateUrl: './user-dialog-box.component.html',
|
||||
styleUrls: ['./user-dialog-box.component.scss']
|
||||
})
|
||||
export class UserDialogBoxComponent implements OnInit {
|
||||
hide: boolean;
|
||||
form: FormGroup;
|
||||
fileToUpload: any;
|
||||
imageUrl: any;
|
||||
action:string;
|
||||
local_data:any;
|
||||
url: string | ArrayBuffer;
|
||||
constructor(private router: Router,private formBuilder: FormBuilder,
|
||||
public dialogRef: MatDialogRef<UserDialogBoxComponent>,
|
||||
@Optional() @Inject(MAT_DIALOG_DATA) public data: UsersData) {
|
||||
console.log(data);
|
||||
this.local_data = {...data};
|
||||
this.action = this.local_data.action;
|
||||
}
|
||||
get f(){
|
||||
return this.form.controls;
|
||||
}
|
||||
doAction(){
|
||||
let tmp = this.form.value
|
||||
tmp.id = this.local_data.id
|
||||
tmp.confirmPassword = this.local_data.confirmPassword
|
||||
this.dialogRef.close({event:this.action,data:tmp});
|
||||
console.log(this.form.value);
|
||||
console.log(this.action,this.local_data)
|
||||
}
|
||||
|
||||
closeDialog(){
|
||||
this.dialogRef.close({event:'Cancel'});
|
||||
}
|
||||
onSelectFile(event) {
|
||||
if (event.target.files && event.target.files[0]) {
|
||||
var reader = new FileReader();
|
||||
reader.readAsDataURL(event.target.files[0]);
|
||||
reader.onload = (event) => {
|
||||
this.url = event.target.result;
|
||||
}
|
||||
}
|
||||
}
|
||||
close() {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
ngOnInit() {
|
||||
this.form = new FormGroup({
|
||||
Username: new FormControl('', [Validators.required, Validators.maxLength(20)]),
|
||||
FirstName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
|
||||
LastName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
|
||||
email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(
|
||||
'[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$',
|
||||
),]),
|
||||
Password: new FormControl('', [Validators.required, Validators.minLength(6)]),
|
||||
confirmPassword: new FormControl('', [Validators.required, Validators.minLength(6)]),
|
||||
});
|
||||
this.form.patchValue(this.local_data)
|
||||
}
|
||||
public myError = (controlName: string, errorName: string) =>{
|
||||
return this.form.controls[controlName].hasError(errorName);
|
||||
}
|
||||
submit(){
|
||||
console.log(this.form.value);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,83 @@
|
||||
<h3>Users Details</h3>
|
||||
<mat-form-field>
|
||||
<mat-label>Filter</mat-label>
|
||||
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
|
||||
</mat-form-field>
|
||||
<button mat-button (click)="openDialog('Add',{})" class="button">Add Users</button>
|
||||
<mat-sidenav-container class="app-inner background-none shadow-none mail-db">
|
||||
<div class="main-content" fxLayout="row" fxLayoutAlign="center start">
|
||||
<div fxFlex.gt-sm="90" fxFlex.gt-xs="95" fxFlex="100">
|
||||
<div class="messages-list material fullscreen">
|
||||
<mat-accordion>
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header >
|
||||
<table mat-table [dataSource]="dataSource" #mytable class="my-table mat-elevation-z8 len-table">
|
||||
|
||||
<ng-container matColumnDef="id">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> S.No</th>
|
||||
<td mat-cell *matCellDef="let element" class="element-spc"> {{element.id}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="logo">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Logo </th>
|
||||
<td mat-cell *matCellDef="let element"> <img [src]="element.logo" /> </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="Username">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> User Name </th>
|
||||
<td mat-cell *matCellDef="let element" class="element-spc"> {{element.Username}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="Password">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Password </th>
|
||||
<td mat-cell *matCellDef="let element" class="element-spc"> {{element.Password}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Username </th>
|
||||
<td mat-cell *matCellDef="let element" class="element-spc"> {{element.Username}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="FirstName">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> First Name </th>
|
||||
<td mat-cell *matCellDef="let element" class="element-spc"> {{element.FirstName}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="LastName">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Last Name </th>
|
||||
<td mat-cell *matCellDef="let element" class="element-spc"> {{element.LastName}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="email">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Email </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.email}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="state">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> State </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.state}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="city">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> City </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.city}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="action">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Action </th>
|
||||
<td mat-cell *matCellDef="let element" class="action-link">
|
||||
<a (click)="openDialog('Update',element)"><span class="material-icons edit-color">edit</span></a>
|
||||
<a (click)="confirmBox('Delete',element)"><span class="material-icons edit-color delete">delete</span></a>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
</mat-expansion-panel-header>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-sidenav-container>
|
||||
@ -0,0 +1,69 @@
|
||||
.my-table{
|
||||
width: 120%;
|
||||
}
|
||||
.button{
|
||||
float: right;
|
||||
background-color: #4caf50;
|
||||
color: #ffff;
|
||||
}
|
||||
th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
|
||||
padding: 6px;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
.mat-expansion-panel-header {
|
||||
display: inline!important;
|
||||
}
|
||||
::ng-deep .mat-drawer-content {
|
||||
overflow: hidden!important;
|
||||
background-color: #ffff;
|
||||
}
|
||||
::ng-deep .body-container {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background-color: #ffff;
|
||||
}
|
||||
::ng-deep .mat-expansion-panel:not([class*='mat-elevation-z']) {
|
||||
box-shadow: none!important;
|
||||
}
|
||||
img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.fullscreen{
|
||||
position: absolute !important;
|
||||
height: auto !important;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
tr.mat-header-row {
|
||||
height: 30px!important;
|
||||
}
|
||||
.font-color{
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
.edit-color{
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
.edit-color:hover {
|
||||
color: #4caf50;
|
||||
}
|
||||
.delete:hover {
|
||||
color:#ff0000;
|
||||
}
|
||||
::ng-deep .mat-form-field-appearance-legacy .mat-form-field-wrapper {
|
||||
width: 180%;
|
||||
}
|
||||
|
||||
::ng-deep .mat-content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
/* flex-direction: row; */
|
||||
/* overflow: hidden; */
|
||||
overflow-x: auto!important;
|
||||
overflow-y: auto!important;
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { UserListComponent } from './user-list.component';
|
||||
|
||||
describe('UserListComponent', () => {
|
||||
let component: UserListComponent;
|
||||
let fixture: ComponentFixture<UserListComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ UserListComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(UserListComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
147
ng-seed/src/app/appoinment/user/user-list/user-list.component.ts
Normal file
147
ng-seed/src/app/appoinment/user/user-list/user-list.component.ts
Normal file
@ -0,0 +1,147 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { MatPaginator } from '@angular/material/paginator';
|
||||
import { MatSort } from '@angular/material/sort';
|
||||
import { MatTable, MatTableDataSource } from '@angular/material/table';
|
||||
import Swal from 'sweetalert2/dist/sweetalert2.js';
|
||||
import { UserDialogBoxComponent } from '../user-dialog-box/user-dialog-box.component';
|
||||
|
||||
export interface UsersData {
|
||||
id: number;
|
||||
// logo: string;
|
||||
Username: string;
|
||||
Password: string;
|
||||
confirmPassword: string;
|
||||
FirstName: string;
|
||||
LastName: string;
|
||||
email: string;
|
||||
}
|
||||
|
||||
const ELEMENT_DATA: UsersData[] = [
|
||||
{id: 1, Username: 'school management system ',Password: '!@Lotus3033', confirmPassword: '!@Lotus3033', FirstName: 'kamali' , LastName: 'sample' , email: 'management@gmail.com'},
|
||||
{id: 2, Username: 'school management ',Password: '!@Lotus3033', confirmPassword: '!@Lotus3033', FirstName: 'kamali' , LastName: 'sample' , email: 'management@gmail.com'},
|
||||
{id: 3, Username: 'school management system ',Password: '!@Lotus3033', confirmPassword: '!@Lotus3033', FirstName: 'kamali' , LastName: 'sample' , email: 'management@gmail.com'},
|
||||
{id: 4, Username: 'school management ',Password: '!@Lotus3033', confirmPassword: '!@Lotus3033', FirstName: 'kamali' , LastName: 'sample' , email: 'management@gmail.com'},
|
||||
{id: 5, Username: 'school management system ',Password: '!@Lotus3033', confirmPassword: '!@Lotus3033', FirstName: 'kamali' , LastName: 'sample' , email: 'management@gmail.com'},
|
||||
{id: 6, Username: 'school management ',Password: '!@Lotus3033', confirmPassword: '!@Lotus3033', FirstName: 'kamali' , LastName: 'sample' , email: 'management@gmail.com'},
|
||||
{id: 7, Username: 'school management system ',Password: '!@Lotus3033', confirmPassword: '!@Lotus3033', FirstName: 'kamali' , LastName: 'sample' , email: 'management@gmail.com'},
|
||||
{id: 8, Username: 'school management ',Password: '!@Lotus3033', confirmPassword: '!@Lotus3033', FirstName: 'kamali' , LastName: 'sample' , email: 'management@gmail.com'},
|
||||
{id: 9, Username: 'school management system ',Password: '!@Lotus3033', confirmPassword: '!@Lotus3033', FirstName: 'kamali' , LastName: 'sample' , email: 'management@gmail.com'},
|
||||
{id: 10, Username: 'school management ',Password: '!@Lotus3033', confirmPassword: '!@Lotus3033', FirstName: 'kamali' , LastName: 'sample' , email: 'management@gmail.com'},
|
||||
{id: 11, Username: 'school management system ',Password: '!@Lotus3033', confirmPassword: '!@Lotus3033', FirstName: 'kamali' , LastName: 'sample' , email: 'management@gmail.com'},
|
||||
|
||||
];
|
||||
|
||||
@Component({
|
||||
selector: 'app-user-list',
|
||||
templateUrl: './user-list.component.html',
|
||||
styleUrls: ['./user-list.component.scss']
|
||||
})
|
||||
export class UserListComponent implements OnInit {
|
||||
push: any;
|
||||
displayedColumns: string[] = ['id', 'Username', 'Password', 'FirstName', 'LastName', 'email', 'action'];
|
||||
dataSource: any;
|
||||
@ViewChild(MatTable,{static:true}) table: MatTable<any>;
|
||||
@ViewChild(MatPaginator) paginator: MatPaginator;
|
||||
|
||||
|
||||
ngAfterViewInit() {
|
||||
this.dataSource.paginator = this.paginator;
|
||||
}
|
||||
applyFilter(event: Event) {
|
||||
const filterValue = (event.target as HTMLInputElement).value;
|
||||
this.dataSource.filter = filterValue.trim().toLowerCase();
|
||||
if (this.dataSource.paginator) {
|
||||
this.dataSource.paginator.firstPage();
|
||||
}
|
||||
}
|
||||
constructor(public dialog: MatDialog) { }
|
||||
confirmBox(name,element){
|
||||
console.log(name,element)
|
||||
Swal.fire({
|
||||
title: 'Are you sure want to remove?',
|
||||
text: 'You will not be able to recover this file!',
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Yes, delete it!',
|
||||
cancelButtonText: 'No, keep it'
|
||||
}).then((result) => {
|
||||
if (result.value) {
|
||||
this.deleteRowData(element);
|
||||
Swal.fire(
|
||||
'Deleted!',
|
||||
'Your imaginary file has been deleted.',
|
||||
'success'
|
||||
)
|
||||
} else if (result.dismiss === Swal.DismissReason.cancel) {
|
||||
Swal.fire(
|
||||
'Cancelled',
|
||||
'Your imaginary file is safe :)',
|
||||
'error'
|
||||
)
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
openDialog(action,obj) {
|
||||
obj.action = action;
|
||||
const dialogRef = this.dialog.open(UserDialogBoxComponent, {
|
||||
// width: '30%',
|
||||
height: '100%',
|
||||
// maxWidth: '38vw',
|
||||
position: { right: '0' },
|
||||
data:obj
|
||||
});
|
||||
dialogRef.afterClosed().subscribe(result => {
|
||||
console.log(result)
|
||||
if(result.event == 'Add'){
|
||||
this.addRowData(result.data);
|
||||
}else if(result.event == 'Update'){
|
||||
this.updateRowData(result.data);
|
||||
}else if(result.event == 'Delete'){
|
||||
this.deleteRowData(result.data);
|
||||
}
|
||||
});
|
||||
}
|
||||
addRowData(row_obj){
|
||||
var d = this.dataSource.data.length+1
|
||||
console.log(this.dataSource)
|
||||
this.dataSource.data.push
|
||||
({
|
||||
id: d,
|
||||
// logo: row_obj.logo,
|
||||
Username: row_obj.Username,
|
||||
Password: row_obj.Password,
|
||||
FirstName: row_obj.FirstName,
|
||||
LastName: row_obj.LastName,
|
||||
email: row_obj.email,
|
||||
});
|
||||
this.table.renderRows();
|
||||
}
|
||||
updateRowData(row_obj){
|
||||
console.log(row_obj)
|
||||
this.dataSource = this.dataSource.data.filter((value,key)=>{
|
||||
if(value.id == row_obj.id){
|
||||
// value.logo = row_obj.logo;
|
||||
value.Username = row_obj.Username;
|
||||
value.Password = row_obj.Password;
|
||||
value.FirstName = row_obj.FirstName;
|
||||
value.LastName = row_obj.LastName;
|
||||
value.email = row_obj.email;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}
|
||||
deleteRowData(row_obj){
|
||||
console.log(this.dataSource.data,row_obj)
|
||||
this.dataSource.data = this.dataSource.data.filter((value,key)=>{
|
||||
return value.id != row_obj.id
|
||||
});
|
||||
console.log(this.dataSource)
|
||||
}
|
||||
ngOnInit(): void {
|
||||
this.dataSource = new MatTableDataSource(ELEMENT_DATA)
|
||||
}
|
||||
|
||||
}
|
||||
10
ng-seed/src/app/appoinment/user/user-routing.module.ts
Normal file
10
ng-seed/src/app/appoinment/user/user-routing.module.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
|
||||
const routes: Routes = [];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class UserRoutingModule { }
|
||||
28
ng-seed/src/app/appoinment/user/user.module.ts
Normal file
28
ng-seed/src/app/appoinment/user/user.module.ts
Normal file
@ -0,0 +1,28 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { UserRoutingModule } from './user-routing.module';
|
||||
import { AddUserListComponent } from './add-user-list/add-user-list.component';
|
||||
import { UserListComponent } from './user-list/user-list.component';
|
||||
import { MaterialModulesModule } from '../material-modules/material-modules.module';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { UserDialogBoxComponent } from './user-dialog-box/user-dialog-box.component';
|
||||
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AddUserListComponent,
|
||||
UserListComponent,
|
||||
UserDialogBoxComponent
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
UserRoutingModule,
|
||||
MaterialModulesModule,
|
||||
MatSidenavModule,
|
||||
MatFormFieldModule,
|
||||
|
||||
]
|
||||
})
|
||||
export class UserModule { }
|
||||
232
ng-seed/src/app/dashboard/charts.data.ts
Normal file
232
ng-seed/src/app/dashboard/charts.data.ts
Normal file
@ -0,0 +1,232 @@
|
||||
export const single = [
|
||||
{
|
||||
name: 'Germany',
|
||||
value: 40632
|
||||
},
|
||||
{
|
||||
name: 'USA',
|
||||
value: 49737
|
||||
},
|
||||
{
|
||||
name: 'France',
|
||||
value: 36745
|
||||
},
|
||||
{
|
||||
name: 'UK',
|
||||
value: 36240
|
||||
},
|
||||
{
|
||||
name: 'Spain',
|
||||
value: 33000
|
||||
},
|
||||
{
|
||||
name: 'Italy',
|
||||
value: 35800
|
||||
}
|
||||
];
|
||||
|
||||
export const multi = [
|
||||
{
|
||||
name: 'Germany',
|
||||
series: [
|
||||
{
|
||||
name: '2017',
|
||||
value: 71632
|
||||
},
|
||||
{
|
||||
name: '2010',
|
||||
value: 40632
|
||||
},
|
||||
{
|
||||
name: '2000',
|
||||
value: 76953
|
||||
},
|
||||
{
|
||||
name: '1990',
|
||||
value: 31476
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'USA',
|
||||
series: [
|
||||
{
|
||||
name: '2017',
|
||||
value: 82632
|
||||
},
|
||||
{
|
||||
name: '2010',
|
||||
value: 49737
|
||||
},
|
||||
{
|
||||
name: '2000',
|
||||
value: 55986
|
||||
},
|
||||
{
|
||||
name: '1990',
|
||||
value: 37060
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'France',
|
||||
series: [
|
||||
{
|
||||
name: '2017',
|
||||
value: 51732
|
||||
},
|
||||
{
|
||||
name: '2010',
|
||||
value: 36745
|
||||
},
|
||||
{
|
||||
name: '2000',
|
||||
value: 34774
|
||||
},
|
||||
{
|
||||
name: '1990',
|
||||
value: 29476
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'UK',
|
||||
series: [
|
||||
{
|
||||
name: '2017',
|
||||
value: 95652
|
||||
},
|
||||
{
|
||||
name: '2010',
|
||||
value: 36240
|
||||
},
|
||||
{
|
||||
name: '2000',
|
||||
value: 32543
|
||||
},
|
||||
{
|
||||
name: '1990',
|
||||
value: 26424
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
export const bubble = [
|
||||
{
|
||||
name: 'Germany',
|
||||
series: [
|
||||
{
|
||||
name: '2009',
|
||||
x: new Date(2009, 0, 1),
|
||||
y: 80.3,
|
||||
r: 80.4
|
||||
},
|
||||
{
|
||||
name: '2006',
|
||||
x: new Date(2006, 0, 1),
|
||||
y: 80.3,
|
||||
r: 78
|
||||
},
|
||||
{
|
||||
name: '1995',
|
||||
x: new Date(1995, 0, 1),
|
||||
y: 77.7,
|
||||
r: 58.1
|
||||
},
|
||||
{
|
||||
name: '1990',
|
||||
x: new Date(1990, 0, 1),
|
||||
y: 75.4,
|
||||
r: 79
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'USA',
|
||||
series: [
|
||||
{
|
||||
name: '2010',
|
||||
x: new Date(2010, 0, 1),
|
||||
y: 78.8,
|
||||
r: 310
|
||||
},
|
||||
{
|
||||
name: '2005',
|
||||
x: new Date(2005, 0, 1),
|
||||
y: 76.9,
|
||||
r: 283
|
||||
},
|
||||
{
|
||||
name: '1996',
|
||||
x: new Date(1996, 0, 1),
|
||||
y: 78.7,
|
||||
r: 59.1
|
||||
},
|
||||
{
|
||||
name: '1990',
|
||||
x: new Date(1990, 0, 1),
|
||||
y: 75.4,
|
||||
r: 253
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'France',
|
||||
series: [
|
||||
{
|
||||
name: '2008',
|
||||
x: new Date(2008, 0, 1),
|
||||
y: 81.4,
|
||||
r: 63
|
||||
},
|
||||
{
|
||||
name: '2000',
|
||||
x: new Date(2000, 0, 1),
|
||||
y: 79.1,
|
||||
r: 59.4
|
||||
},
|
||||
{
|
||||
name: '1994',
|
||||
x: new Date(1994, 0, 1),
|
||||
y: 76.7,
|
||||
r: 58.1
|
||||
},
|
||||
{
|
||||
name: '1990',
|
||||
x: new Date(1990, 0, 1),
|
||||
y: 77.2,
|
||||
r: 56.9
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'UK',
|
||||
series: [
|
||||
{
|
||||
name: '2007',
|
||||
x: new Date(2007, 0, 1),
|
||||
y: 80.2,
|
||||
r: 62.7
|
||||
},
|
||||
{
|
||||
name: '2003',
|
||||
x: new Date(2003, 0, 1),
|
||||
y: 77.8,
|
||||
r: 58.9
|
||||
},
|
||||
{
|
||||
name: '1995',
|
||||
x: new Date(1995, 0, 1),
|
||||
y: 78.7,
|
||||
r: 59.1
|
||||
},
|
||||
{
|
||||
name: '1990',
|
||||
x: new Date(1990, 0, 1),
|
||||
y: 75.7,
|
||||
r: 57.1
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
1
ng-seed/src/app/dashboard/dashboard.component.html
Normal file
1
ng-seed/src/app/dashboard/dashboard.component.html
Normal file
@ -0,0 +1 @@
|
||||
<h2>Dashboard!</h2>
|
||||
539
ng-seed/src/app/dashboard/dashboard.component.scss
Normal file
539
ng-seed/src/app/dashboard/dashboard.component.scss
Normal file
@ -0,0 +1,539 @@
|
||||
$red: #f5515f;
|
||||
$blue: #05abe0;
|
||||
$grey: #343434;
|
||||
$p: 12px;
|
||||
.profile {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(white, .25);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 20px rgba(darken($red, 40%), .2);
|
||||
&.pre-enter {
|
||||
transform-origin: center center;
|
||||
transform: scaleY(0);
|
||||
.avatar {
|
||||
transform-origin: center top;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
a.follow,
|
||||
a.link {
|
||||
opacity: 0;
|
||||
transform: translateY(300px);
|
||||
}
|
||||
}
|
||||
&.on-enter {
|
||||
animation: scaleYIn 1000ms ease-out forwards;
|
||||
.avatar {
|
||||
animation: scaleYIn-small 750ms ease-out forwards 1000ms;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
a.follow,
|
||||
a.link {
|
||||
opacity: 1;
|
||||
animation: slideInUp 1000ms ease-out forwards;
|
||||
}
|
||||
h1 {
|
||||
animation-delay: 1050ms;
|
||||
}
|
||||
h2 {
|
||||
animation-delay: 1100ms;
|
||||
}
|
||||
a.follow {
|
||||
animation-delay: 1250ms;
|
||||
}
|
||||
li {
|
||||
&:nth-child(1) {
|
||||
a.link {
|
||||
animation-delay: 1300ms;
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
a.link {
|
||||
animation-delay: 1350ms;
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
a.link {
|
||||
animation-delay: 1400ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.avatar,
|
||||
.info {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
background: url('../../assets/images/1.jpg') no-repeat center center / cover;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
|
||||
}
|
||||
|
||||
.prof-list {
|
||||
li {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
h1 {
|
||||
padding: $p $p 0;
|
||||
width: 100%;
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
h2,
|
||||
a.follow {
|
||||
display: block;
|
||||
|
||||
border-radius: 2px;
|
||||
padding: $p/2;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
h2 {
|
||||
background: $red;
|
||||
background: linear-gradient(135deg, rgba(#f5825f, 1) 0%, rgba(#f5005f, 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5825f', endColorstr='#f5005f', GradientType=1);
|
||||
}
|
||||
a.follow {
|
||||
margin-left: $p;
|
||||
background: $blue;
|
||||
background: linear-gradient(135deg, rgba(#05c8e0, 1) 0%, rgba(#057fe0, 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05c8e0', endColorstr='#057fe0', GradientType=1);
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: #05c8e0;
|
||||
background: linear-gradient(135deg, rgba(lighten(#05c8e0, 10%), 1) 0%, rgba(lighten(#057fe0, 10%), 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(#05c8e0, 10%)', endColorstr='lighten(#057fe0, 10%)', GradientType=1);
|
||||
}
|
||||
&:active {
|
||||
background: #057fe0;
|
||||
background: linear-gradient(135deg, rgba(darken(#05c8e0, 5%), 1) 0%, rgba(darken(#057fe0, 5%), 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken(#05c8e0, 5%)', endColorstr='darken(#057fe0, 5%)', GradientType=1);
|
||||
}
|
||||
}
|
||||
ul {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: $p/2;
|
||||
width: 100%;
|
||||
li {
|
||||
padding: $p/2;
|
||||
}
|
||||
}
|
||||
a.link {
|
||||
display: block;
|
||||
border-radius: 100%;
|
||||
background: $blue;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
a.link {
|
||||
&.portfolio {
|
||||
background: #f5c8bf;
|
||||
background: linear-gradient(135deg, rgba(#f5c8bf, 1) 0%, rgba(#f58dbf, 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5c8bf', endColorstr='#f58dbf', GradientType=1);
|
||||
box-shadow: inset 0 0 10px rgba(#f58dbf, .5);
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: lighten(#f5c8bf, 5%);
|
||||
background: linear-gradient(135deg, rgba(lighten(#f5c8bf, 5%), 1) 0%, rgba(lighten(#f58dbf, 5%), 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(#f5c8bf, 5%)', endColorstr='lighten(#f58dbf, 5%)', GradientType=1);
|
||||
box-shadow: inset 0 0 10px rgba(lighten(#f58dbf, 5%), .5);
|
||||
}
|
||||
&:active {
|
||||
background: darken(#f5c8bf, 5%);
|
||||
background: linear-gradient(135deg, rgba(darken(#f5c8bf, 5%), 1) 0%, rgba(darken(#f58dbf, 5%), 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken(#f5c8bf, 5%)', endColorstr='darken(#f58dbf, 5%)', GradientType=1);
|
||||
box-shadow: inset 0 0 10px rgba(darken(#f58dbf, 5%), .5);
|
||||
}
|
||||
}
|
||||
&.codepen {
|
||||
background: #fcd000;
|
||||
background: linear-gradient(135deg, rgba(#fcd000, 1) 0%, rgba(#fc9a00, 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcd000', endColorstr='#fc9a00', GradientType=1);
|
||||
box-shadow: inset 0 0 10px rgba(#fc9a00, .5);
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: lighten(#fcd000, 5%);
|
||||
background: linear-gradient(135deg, rgba(lighten(#fcd000, 5%), 1) 0%, rgba(lighten(#fc9a00, 5%), 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(#fcd000, 5%)', endColorstr='lighten(#fc9a00, 5%)', GradientType=1);
|
||||
box-shadow: inset 0 0 10px rgba(lighten(#fc9a00, 5%), .5);
|
||||
}
|
||||
&:active {
|
||||
background: darken(#fcd000, 5%);
|
||||
background: linear-gradient(135deg, rgba(darken(#fcd000, 5%), 1) 0%, rgba(darken(#fc9a00, 5%), 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken(#fcd000, 5%)', endColorstr='darken(#fc9a00, 5%)', GradientType=1);
|
||||
box-shadow: inset 0 0 10px rgba(darken(#fc9a00, 5%), .5);
|
||||
}
|
||||
}
|
||||
&.github {
|
||||
background: #41adc4;
|
||||
background: linear-gradient(135deg, rgba(#41adc4, 1) 0%, rgba(#4183c4, 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#41adc4', endColorstr='#4183c4', GradientType=1);
|
||||
box-shadow: inset 0 0 10px rgba(#4183c4, .5);
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: lighten(#41adc4, 5%);
|
||||
background: linear-gradient(135deg, rgba(lighten(#41adc4, 5%), 1) 0%, rgba(lighten(#4183c4, 5%), 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(#41adc4, 5%)', endColorstr='lighten(#4183c4, 5%)', GradientType=1);
|
||||
box-shadow: inset 0 0 10px rgba(lighten(#4183c4, 5%), .5);
|
||||
}
|
||||
&:active {
|
||||
background: darken(#41adc4, 5%);
|
||||
background: linear-gradient(135deg, rgba(darken(#41adc4, 5%), 1) 0%, rgba(darken(#4183c4, 5%), 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken(#41adc4, 5%)', endColorstr='darken(#4183c4, 5%)', GradientType=1);
|
||||
box-shadow: inset 0 0 10px rgba(darken(#4183c4, 5%), .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 470px) {
|
||||
.profile {
|
||||
display: flex;
|
||||
&.pre-enter {
|
||||
transform: scaleX(0);
|
||||
.avatar {
|
||||
transform-origin: left center;
|
||||
transform: scaleX(0);
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
a.follow,
|
||||
a.link {
|
||||
transform: translateX(300px);
|
||||
}
|
||||
}
|
||||
&.on-enter {
|
||||
animation-name: scaleXIn;
|
||||
.avatar {
|
||||
animation-name: scaleXIn-small;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
a.follow,
|
||||
a.link {
|
||||
animation-name: slideInLeft;
|
||||
}
|
||||
}
|
||||
}
|
||||
.background {
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
.avatar,
|
||||
.info {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
.avatar {
|
||||
clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 470px) and (min-height: 600px) {
|
||||
.profile {
|
||||
max-height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* https://goo.gl/jIUq3E */
|
||||
|
||||
@keyframes scaleXIn {
|
||||
0% {
|
||||
transform: matrix3d(0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
4.7% {
|
||||
transform: matrix3d(0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
9.41% {
|
||||
transform: matrix3d(0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
14.11% {
|
||||
transform: matrix3d(1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
18.72% {
|
||||
transform: matrix3d(1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
24.32% {
|
||||
transform: matrix3d(1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
29.93% {
|
||||
transform: matrix3d(1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
35.54% {
|
||||
transform: matrix3d(0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
41.04% {
|
||||
transform: matrix3d(0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
52.15% {
|
||||
transform: matrix3d(0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
63.26% {
|
||||
transform: matrix3d(1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
85.49% {
|
||||
transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
100% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* https://goo.gl/auuhcg */
|
||||
|
||||
@keyframes scaleYIn {
|
||||
0% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
4.7% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
9.41% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
14.11% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
18.72% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
24.32% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
29.93% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
35.54% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
41.04% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
52.15% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
63.26% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
85.49% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
100% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* https://goo.gl/dNBqrt */
|
||||
|
||||
@keyframes scaleXIn-small {
|
||||
0% {
|
||||
transform: matrix3d(0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
6.31% {
|
||||
transform: matrix3d(0.384, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
12.51% {
|
||||
transform: matrix3d(0.621, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
18.82% {
|
||||
transform: matrix3d(0.771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
25.03% {
|
||||
transform: matrix3d(0.862, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
37.54% {
|
||||
transform: matrix3d(0.952, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
50.05% {
|
||||
transform: matrix3d(0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
75.08% {
|
||||
transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
100% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* https://goo.gl/jZL0uj */
|
||||
|
||||
@keyframes scaleYIn-small {
|
||||
0% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
6.31% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.384, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
12.51% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.621, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
18.82% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
25.03% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.862, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
37.54% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.952, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
50.05% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
75.08% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
100% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* https://goo.gl/Ne0Mkr */
|
||||
|
||||
@keyframes slideInLeft {
|
||||
0% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 300, 0, 0, 1);
|
||||
}
|
||||
6.31% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 184.858, 0, 0, 1);
|
||||
}
|
||||
12.51% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 113.68, 0, 0, 1);
|
||||
}
|
||||
18.82% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 68.663, 0, 0, 1);
|
||||
}
|
||||
25.03% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 41.37, 0, 0, 1);
|
||||
}
|
||||
37.54% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 14.382, 0, 0, 1);
|
||||
}
|
||||
50.05% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 4.724, 0, 0, 1);
|
||||
}
|
||||
75.08% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.381, 0, 0, 1);
|
||||
}
|
||||
100% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* https://goo.gl/MSqtd5 */
|
||||
|
||||
@keyframes slideInUp {
|
||||
0% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 300, 0, 1);
|
||||
}
|
||||
6.31% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 184.858, 0, 1);
|
||||
}
|
||||
12.51% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 113.68, 0, 1);
|
||||
}
|
||||
18.82% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 68.663, 0, 1);
|
||||
}
|
||||
25.03% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 41.37, 0, 1);
|
||||
}
|
||||
37.54% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 14.382, 0, 1);
|
||||
}
|
||||
50.05% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 4.724, 0, 1);
|
||||
}
|
||||
75.08% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.381, 0, 1);
|
||||
}
|
||||
100% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
//wheather
|
||||
.card-wheather {
|
||||
height: 220px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.city {
|
||||
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 20px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.grad-blue {
|
||||
background: linear-gradient(58deg, #f44336, #673ab7);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.grad-green {
|
||||
background: linear-gradient(58deg, #009688, #673ab7);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.grad-red {
|
||||
background: linear-gradient(58deg, #f44336, #673ab7);
|
||||
color: #fff;
|
||||
}
|
||||
.card-wheather{
|
||||
padding: 2rem;
|
||||
}
|
||||
.temp {
|
||||
font-size: 50px;
|
||||
display: inline-block;
|
||||
}
|
||||
12
ng-seed/src/app/dashboard/dashboard.component.ts
Normal file
12
ng-seed/src/app/dashboard/dashboard.component.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-dashboard',
|
||||
templateUrl: './dashboard.component.html',
|
||||
styleUrls: ['./dashboard.component.scss']
|
||||
})
|
||||
export class DashboardComponent {
|
||||
|
||||
constructor() {
|
||||
}
|
||||
}
|
||||
37
ng-seed/src/app/dashboard/dashboard.module.ts
Normal file
37
ng-seed/src/app/dashboard/dashboard.module.ts
Normal file
@ -0,0 +1,37 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatListModule } from '@angular/material/list';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
import { FlexLayoutModule } from '@angular/flex-layout';
|
||||
|
||||
import { ChartsModule } from 'ng2-charts';
|
||||
import { NgxChartsModule} from '@swimlane/ngx-charts';
|
||||
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
|
||||
|
||||
import { DashboardComponent } from './dashboard.component';
|
||||
import { DashboardRoutes } from './dashboard.routing';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterModule.forChild(DashboardRoutes),
|
||||
MatIconModule,
|
||||
MatCardModule,
|
||||
MatButtonModule,
|
||||
MatListModule,
|
||||
MatProgressBarModule,
|
||||
MatMenuModule,
|
||||
ChartsModule,
|
||||
NgxChartsModule,
|
||||
NgxDatatableModule,
|
||||
FlexLayoutModule
|
||||
],
|
||||
declarations: [ DashboardComponent ]
|
||||
})
|
||||
|
||||
export class DashboardModule {}
|
||||
8
ng-seed/src/app/dashboard/dashboard.routing.ts
Normal file
8
ng-seed/src/app/dashboard/dashboard.routing.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import { Routes } from '@angular/router';
|
||||
|
||||
import { DashboardComponent } from './dashboard.component';
|
||||
|
||||
export const DashboardRoutes: Routes = [{
|
||||
path: '',
|
||||
component: DashboardComponent
|
||||
}];
|
||||
16
ng-seed/src/app/dashboard/dashboard.service.spec.ts
Normal file
16
ng-seed/src/app/dashboard/dashboard.service.spec.ts
Normal file
@ -0,0 +1,16 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { DashboardService } from './dashboard.service';
|
||||
|
||||
describe('DashboardService', () => {
|
||||
let service: DashboardService;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({});
|
||||
service = TestBed.inject(DashboardService);
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
22
ng-seed/src/app/dashboard/dashboard.service.ts
Normal file
22
ng-seed/src/app/dashboard/dashboard.service.ts
Normal file
@ -0,0 +1,22 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Observable } from 'rxjs';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class DashboardService {
|
||||
apiUrl: string;
|
||||
|
||||
constructor(private _http: HttpClient
|
||||
) { }
|
||||
|
||||
generateotp(email): Observable<any> {
|
||||
|
||||
return this._http.post(this.apiUrl + 'generateOTP', { "records":{ "email":email}})
|
||||
// .pipe(
|
||||
// catchError(this.handleError('role', []))
|
||||
// )
|
||||
}
|
||||
|
||||
}
|
||||
17
ng-seed/src/app/error/404/error-404-component.html
Normal file
17
ng-seed/src/app/error/404/error-404-component.html
Normal file
@ -0,0 +1,17 @@
|
||||
<div class="relative">
|
||||
<div class="form-bg">
|
||||
<div class="relative error-wrapper">
|
||||
<h1>
|
||||
Oops!</h1>
|
||||
<span class="error-text">404</span>
|
||||
<h2>
|
||||
Not Found</h2>
|
||||
<div class="error-details">
|
||||
<p> Sorry, an error has occured, Requested page not found!</p>
|
||||
</div>
|
||||
<div class="error-actions">
|
||||
<button class="mat-blue" mat-raised-button>Take me to home</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
0
ng-seed/src/app/error/404/error-404-component.scss
Normal file
0
ng-seed/src/app/error/404/error-404-component.scss
Normal file
20
ng-seed/src/app/error/404/error-404.component.ts
Normal file
20
ng-seed/src/app/error/404/error-404.component.ts
Normal file
@ -0,0 +1,20 @@
|
||||
import { Component, OnInit,ViewEncapsulation } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ms-error-404',
|
||||
templateUrl:'./error-404-component.html',
|
||||
styleUrls: ['./error-404-component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class ErrorOneComponent implements OnInit {
|
||||
|
||||
constructor() {}
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
17
ng-seed/src/app/error/503/error-503-component.html
Normal file
17
ng-seed/src/app/error/503/error-503-component.html
Normal file
@ -0,0 +1,17 @@
|
||||
<div class="relative">
|
||||
<div class="form-bg">
|
||||
<div class="relative error-wrapper">
|
||||
<h1>
|
||||
Error!</h1>
|
||||
<span class="error-text">505</span>
|
||||
<h2>
|
||||
Service is currently unavailbale</h2>
|
||||
<div class="error-details">
|
||||
<p>Sorry, but the page you were trying to view does not exist</p>
|
||||
</div>
|
||||
<div class="error-actions">
|
||||
<button class="mat-blue" mat-raised-button>Take me to home</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
0
ng-seed/src/app/error/503/error-503-component.scss
Normal file
0
ng-seed/src/app/error/503/error-503-component.scss
Normal file
20
ng-seed/src/app/error/503/error-503.component.ts
Normal file
20
ng-seed/src/app/error/503/error-503.component.ts
Normal file
@ -0,0 +1,20 @@
|
||||
import { Component, OnInit,ViewEncapsulation } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ms-error-503',
|
||||
templateUrl:'./error-503-component.html',
|
||||
styleUrls: ['./error-503-component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class ErrorTwoComponent implements OnInit {
|
||||
|
||||
constructor() {}
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
37
ng-seed/src/app/error/error.module.ts
Normal file
37
ng-seed/src/app/error/error.module.ts
Normal file
@ -0,0 +1,37 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
import { MatRadioModule } from '@angular/material/radio';
|
||||
import { MatToolbarModule } from '@angular/material/toolbar';
|
||||
import { ErrorOneComponent} from './404/error-404.component';
|
||||
import { ErrorTwoComponent} from './503/error-503.component';
|
||||
|
||||
import { ErrorRoutes } from './error.routing';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
MatIconModule,
|
||||
MatCardModule,
|
||||
MatIconModule,
|
||||
MatInputModule,
|
||||
MatRadioModule,
|
||||
MatButtonModule,
|
||||
MatProgressBarModule,
|
||||
MatToolbarModule,
|
||||
RouterModule.forChild(ErrorRoutes)
|
||||
],
|
||||
declarations: [
|
||||
ErrorOneComponent,
|
||||
ErrorTwoComponent,
|
||||
]
|
||||
})
|
||||
|
||||
export class ErrorModule {}
|
||||
19
ng-seed/src/app/error/error.routing.ts
Normal file
19
ng-seed/src/app/error/error.routing.ts
Normal file
@ -0,0 +1,19 @@
|
||||
import { Routes } from '@angular/router';
|
||||
|
||||
import { ErrorOneComponent} from './404/error-404.component';
|
||||
import { ErrorTwoComponent} from './503/error-503.component';
|
||||
|
||||
export const ErrorRoutes: Routes = [{
|
||||
path: '',
|
||||
redirectTo: '404',
|
||||
pathMatch: 'full',
|
||||
},{
|
||||
path: '',
|
||||
children: [{
|
||||
path: '404',
|
||||
component: ErrorOneComponent
|
||||
}, {
|
||||
path: '503',
|
||||
component: ErrorTwoComponent
|
||||
}]
|
||||
}];
|
||||
582
ng-seed/src/app/layouts/admin/admin-layout.component.html
Normal file
582
ng-seed/src/app/layouts/admin/admin-layout.component.html
Normal file
@ -0,0 +1,582 @@
|
||||
<div class="app search-i" [dir]="layoutDir"
|
||||
[ngClass]="[ menuLayout, selectedSidebarImage, selectedSidebarColor, selectedHeaderColor, collapsedClass]"
|
||||
[class.app-dark]="dark" [class.boxed]="boxed" [class.collapsed-sidebar]="collapseSidebar"
|
||||
[class.compact-sidebar]="compactSidebar" [class.bg-img-disable]="!sidebarBg">
|
||||
<mat-sidenav-container class="app-inner">
|
||||
<mat-sidenav #sidemenu class="sidebar-panel" id="sidebar-panel" [mode]="isOver() ? 'over' : 'side'"
|
||||
[opened]="!isOver()" (mouseover)="menuMouseOver()" (mouseout)="menuMouseOut()">
|
||||
<div class="opt-side relative ">
|
||||
<div class="sidebar-container ">
|
||||
<div class="branding text-center">
|
||||
<h2><i class="fa fa-superpowers" aria-hidden="true"></i> <span> Appointment</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="main-nav">
|
||||
<div class="user-pro-wrap">
|
||||
<div class="user-profile-thumb text-center">
|
||||
<div class="user-i">
|
||||
<img src="assets/images/userpic.jpg" class="rad-full mb-1" width="100" height="100" alt="">
|
||||
<div> <span>Super Admin</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="most-used text-center">
|
||||
<a class="most-link" color="primary">
|
||||
<mat-icon>home</mat-icon>
|
||||
</a>
|
||||
<a class="most-link" color="primary">
|
||||
<mat-icon>person</mat-icon>
|
||||
</a>
|
||||
<a class="most-link" color="primary">
|
||||
<mat-icon>settings</mat-icon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<mat-nav-list appAccordion class="navigation relative">
|
||||
<mat-list-item appAccordionLink *ngFor="let menuitem of menuItems.getAll()">
|
||||
<a appAccordionToggle class="relative" mat-ripple [routerLink]="['/', menuitem.state]"
|
||||
*ngIf="menuitem.type === 'link'">
|
||||
<mat-icon>{{ menuitem.icon }}</mat-icon>
|
||||
<span>{{ menuitem.name | translate }}</span>
|
||||
<span fxFlex></span>
|
||||
<span class="menu-badge mat-{{ badge.type }}"
|
||||
*ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
|
||||
</a>
|
||||
<a appAccordionToggle class="relative" mat-ripple href="{{menuitem.state}}"
|
||||
*ngIf="menuitem.type === 'extLink'">
|
||||
<mat-icon>{{ menuitem.icon }}</mat-icon>
|
||||
<span>{{ menuitem.name | translate }}</span>
|
||||
<span fxFlex></span>
|
||||
<span class="menu-badge mat-{{ badge.type }}"
|
||||
*ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
|
||||
</a>
|
||||
<a appAccordionToggle class="relative" mat-ripple href="{{menuitem.state}}" target="_blank"
|
||||
*ngIf="menuitem.type === 'extTabLink'">
|
||||
<mat-icon>{{ menuitem.icon }}</mat-icon>
|
||||
<span>{{ menuitem.name | translate }}</span>
|
||||
<span fxFlex></span>
|
||||
<span class="menu-badge mat-{{ badge.type }}"
|
||||
*ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
|
||||
</a>
|
||||
<a appAccordionToggle class="relative" mat-ripple href="javascript:;" *ngIf="menuitem.type === 'sub'">
|
||||
<mat-icon>{{ menuitem.icon }}</mat-icon>
|
||||
<span>{{ menuitem.name | translate }}</span>
|
||||
<span fxFlex></span>
|
||||
<span class="menu-badge mat-{{ badge.type }}"
|
||||
*ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
|
||||
<mat-icon class="menu-caret">arrow_drop_down</mat-icon>
|
||||
</a>
|
||||
<mat-nav-list class="sub-menu" *ngIf="menuitem.type === 'sub'">
|
||||
<mat-list-item *ngFor="let childitem of menuitem.children" routerLinkActive="open">
|
||||
<a [routerLink]="['/', menuitem.state, childitem.state ]" class="relative"
|
||||
mat-ripple>{{ childitem.name | translate }}</a>
|
||||
</mat-list-item>
|
||||
</mat-nav-list>
|
||||
</mat-list-item>
|
||||
<mat-divider></mat-divider>
|
||||
<!-- <mat-list-item>
|
||||
<a (click)="addMenuItem()">
|
||||
<mat-icon>add</mat-icon>
|
||||
<span>Add</span>
|
||||
</a>
|
||||
</mat-list-item> -->
|
||||
</mat-nav-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-overlay"></div>
|
||||
</mat-sidenav>
|
||||
<mat-toolbar class="main-header">
|
||||
<div class="horizontal-top-bar w-100">
|
||||
<div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100">
|
||||
<div class="search-bar" fxFlex>
|
||||
<form class="search-form">
|
||||
<mat-icon>search</mat-icon>
|
||||
<input type="text" placeholder="Search" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100">
|
||||
<div class="horizontal-logo">
|
||||
<div class="branding text-center">
|
||||
<h2><i class="fa fa-superpowers" aria-hidden="true"></i> <span> Appointment</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100">
|
||||
<div class="menu-links">
|
||||
<button appToggleFullscreen mat-icon-button>
|
||||
<mat-icon>fullscreen</mat-icon>
|
||||
</button>
|
||||
<button [mat-menu-trigger-for]="user2" mat-icon-button class="ml-xs overflow-visible">
|
||||
<mat-icon>message</mat-icon>
|
||||
</button>
|
||||
<mat-menu #user2="matMenu" class="opt-menu" x-position="after">
|
||||
<div mat-menu-item class="head-menu grad-blue">
|
||||
Message Menu
|
||||
</div>
|
||||
<button mat-menu-item>
|
||||
<img width="40" src="assets/images/user-1.jpg" alt="">
|
||||
Next Update for angular 5
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<img width="40" src="assets/images/user-2.jpg" alt="">
|
||||
Check out our new admin theme
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<img width="40" src="assets/images/user-3.jpg" alt="">
|
||||
Expedita quo, laboriosam officia.
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<img width="40" src="assets/images/user-4.jpg" alt="">
|
||||
Lorem ipsum dolor sit amet consectetur.
|
||||
</button>
|
||||
</mat-menu>
|
||||
<button [mat-menu-trigger-for]="user1" mat-icon-button class="ml-xs overflow-visible">
|
||||
<mat-icon>reorder</mat-icon>
|
||||
<span class="notification-label">3</span>
|
||||
</button>
|
||||
<mat-menu #user1="matMenu" class="opt-menu" x-position="before">
|
||||
<div mat-menu-item class="head-menu grad-blue">
|
||||
User Menu
|
||||
</div>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>show_chart</mat-icon>
|
||||
Charts
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>navigation</mat-icon>
|
||||
Maps
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>web</mat-icon>
|
||||
Calendar Settings
|
||||
</button>
|
||||
</mat-menu>
|
||||
<button (click)="end.toggle()" mat-icon-button class="ml-xs overflow-visible">
|
||||
<mat-icon>notifications</mat-icon>
|
||||
<span class="notification-label">2</span>
|
||||
</button>
|
||||
<button [mat-menu-trigger-for]="user" mat-icon-button class="ml-xs">
|
||||
<mat-icon>person</mat-icon>
|
||||
</button>
|
||||
<mat-menu #user="matMenu" class="opt-menu" x-position="before">
|
||||
<div mat-menu-item class="head-menu grad-blue">
|
||||
Settings
|
||||
</div>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>settings</mat-icon>
|
||||
Setting
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>account_box</mat-icon>
|
||||
Profile
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>notifications_off</mat-icon>
|
||||
Disable notifications
|
||||
</button>
|
||||
<button mat-menu-item (click)="logout()">
|
||||
<mat-icon>exit_to_app</mat-icon>
|
||||
Sign Out
|
||||
</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vertical-menu w-100">
|
||||
<button (click)="menuToggleFunc()" mat-icon-button class="lines-btn">
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
<div class="search-bar" fxFlex [class.search-active]="searchFocus">
|
||||
<form class="search-form">
|
||||
<mat-icon>search</mat-icon>
|
||||
<input type="text" placeholder="Search" (focus)="searchFocus = true" (focusout)="searchFocus = false " />
|
||||
</form>
|
||||
</div>
|
||||
<span fxFlex></span>
|
||||
<button appToggleFullscreen mat-icon-button class="sm-disable">
|
||||
<mat-icon>fullscreen</mat-icon>
|
||||
</button>
|
||||
<button [mat-menu-trigger-for]="user2" mat-icon-button class="ml-xs overflow-visible">
|
||||
<mat-icon>message</mat-icon>
|
||||
</button>
|
||||
<mat-menu #user2="matMenu" class="opt-menu" x-position="after">
|
||||
<div mat-menu-item class="head-menu grad-blue">
|
||||
Message Menu
|
||||
</div>
|
||||
<button mat-menu-item>
|
||||
<img width="40" src="assets/images/user-1.jpg" alt="">
|
||||
Next Update for angular 5
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<img width="40" src="assets/images/user-2.jpg" alt="">
|
||||
Check out our new admin theme
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<img width="40" src="assets/images/user-3.jpg" alt="">
|
||||
Expedita quo, laboriosam officia.
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<img width="40" src="assets/images/user-4.jpg" alt="">
|
||||
Lorem ipsum dolor sit amet consectetur.
|
||||
</button>
|
||||
</mat-menu>
|
||||
<button [mat-menu-trigger-for]="user1" mat-icon-button class="ml-xs overflow-visible sm-disable">
|
||||
<mat-icon>reorder</mat-icon>
|
||||
<span class="notification-label">3</span>
|
||||
</button>
|
||||
<mat-menu #user1="matMenu" class="opt-menu " x-position="before">
|
||||
<div mat-menu-item class="head-menu grad-blue">
|
||||
User Menu
|
||||
</div>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>show_chart</mat-icon>
|
||||
Charts
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>navigation</mat-icon>
|
||||
Maps
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>web</mat-icon>
|
||||
Calendar Settings
|
||||
</button>
|
||||
</mat-menu>
|
||||
<button (click)="end.toggle()" mat-icon-button class="ml-xs overflow-visible">
|
||||
<mat-icon>notifications</mat-icon>
|
||||
<span class="notification-label">2</span>
|
||||
</button>
|
||||
<button [mat-menu-trigger-for]="user" mat-icon-button class="ml-xs">
|
||||
<mat-icon>person</mat-icon>
|
||||
</button>
|
||||
<mat-menu #user="matMenu" class="opt-menu" x-position="before">
|
||||
<div mat-menu-item class="head-menu grad-blue">
|
||||
Settings
|
||||
</div>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>settings</mat-icon>
|
||||
Setting
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>account_box</mat-icon>
|
||||
Profile
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>notifications_off</mat-icon>
|
||||
Disable notifications
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>exit_to_app</mat-icon>
|
||||
Sign Out
|
||||
</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
</mat-toolbar>
|
||||
<div class="horizontal-menu text-center">
|
||||
<nav>
|
||||
<ul class="main-h-list">
|
||||
<li *ngFor="let menuitem of horizontalMenuItems.getAll()">
|
||||
<a [routerLink]="['/'+menuitem.state]" *ngIf="menuitem.type === 'link'">
|
||||
<mat-icon>{{ menuitem.icon }}</mat-icon>
|
||||
<span>{{ menuitem.name | translate }}</span>
|
||||
</a>
|
||||
<a [routerLink]="['/'+menuitem.state]" *ngIf="menuitem.type === 'sub'">
|
||||
<mat-icon>{{ menuitem.icon }}</mat-icon>
|
||||
<span>{{ menuitem.name | translate }}</span>
|
||||
</a>
|
||||
<ul class="dropdown" *ngIf="menuitem.type === 'sub'">
|
||||
<li *ngFor="let childitem of menuitem.children">
|
||||
<a [routerLink]="['/'+childitem.state ]">{{ childitem.name | translate }}</a>
|
||||
<ul class="dropdown" *ngIf="childitem.type === 'super-sub'">
|
||||
<li *ngFor="let subchild of childitem.subchildren">
|
||||
<a [routerLink]="['/'+subchild.state ]">{{subchild.name | translate}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="body-container">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
<mat-sidenav #end position="end" class="chat-panel" mode="over" opened="false">
|
||||
<mat-tab-group [selectedIndex]="1" mat-stretch-tabs>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>Today</ng-template>
|
||||
<div class="scroll">
|
||||
<mat-list class="pt-1 pb-1">
|
||||
<mat-list-item>
|
||||
<div fxLayout="column">
|
||||
<h2 class="ma-0">{{ today | date:'EEEE' }}</h2>
|
||||
<h6 class="mat-text-muted ma-0">
|
||||
<span>{{ today | date:'dd' }}</span> <span>{{ today | date:'MMMM' }}</span></h6>
|
||||
</div>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
<mat-nav-list>
|
||||
<mat-divider></mat-divider>
|
||||
<h3 mat-subheader class="text-uppercase font-weight-bold">Projects Stats</h3>
|
||||
<mat-list-item>
|
||||
<p class="text-mat" mat-line>Project A</p>
|
||||
<mat-progress-bar mat-line mode="determinate" color="warn" value="20"></mat-progress-bar>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<p class="text-mat" mat-line>Project B </p>
|
||||
<mat-progress-bar mat-line mode="determinate" color="accent" value="80"></mat-progress-bar>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<p class="text-mat" mat-line>Project C</p>
|
||||
<mat-progress-bar mat-line mode="determinate" value="30"></mat-progress-bar>
|
||||
</mat-list-item>
|
||||
<mat-divider></mat-divider>
|
||||
<h3 mat-subheader class="text-uppercase font-weight-bold">Todo</h3>
|
||||
<mat-list-item>
|
||||
<a mat-line href="javascript:;">Consectetur adipisicing elit. Nemo omnis.</a>
|
||||
<p mat-line class="mat-text-muted text-mat">2:45PM</p>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<a mat-line href="javascript:;"> Temporibus cumque cupiditate </a>
|
||||
<p mat-line class="mat-text-muted text-mat">3:20PM</p>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<a mat-line href="javascript:;">Libero voluptatibus harum quis accusamus</a>
|
||||
<p mat-line class="mat-text-muted text-mat">16:00PM</p>
|
||||
</mat-list-item>
|
||||
</mat-nav-list>
|
||||
</div>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>Notifications</ng-template>
|
||||
<div class="scroll">
|
||||
<mat-nav-list>
|
||||
<mat-list-item>
|
||||
<mat-icon mat-list-avatar class="mat-text-primary">people</mat-icon>
|
||||
<h4 mat-line>Social</h4>
|
||||
<p mat-line> 5 new members joined today</p>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<mat-icon mat-list-avatar class="mat-text-warn">local_offer</mat-icon>
|
||||
<h4 mat-line>Promotions</h4>
|
||||
<p mat-line>Updated your email
|
||||
</p>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<mat-icon mat-list-avatar class="mat-text-accent">info</mat-icon>
|
||||
<h4 mat-line>Updates</h4>
|
||||
<p mat-line> 15 new product added</p>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<mat-icon mat-list-avatar class="mat-deep-purple">delete_sweep</mat-icon>
|
||||
<h4 mat-line> 2 order cancelled</h4>
|
||||
<span class="text-mat mat-text-muted" mat-line>{{ 1427207139000 | date: 'fullDate' }}</span>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<mat-icon mat-list-avatar>check_circle</mat-icon>
|
||||
<h4 mat-line>System Scan completed</h4>
|
||||
<span class="text-mat mat-text-muted" mat-line>{{ 1427412725000 | date: 'fullDate' }}</span>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<mat-icon mat-list-avatar>person_add</mat-icon>
|
||||
<h4 mat-line>4 Users connected</h4>
|
||||
<span class="text-mat mat-text-muted" mat-line>{{ 1428275520000 | date: 'fullDate' }}</span>
|
||||
</mat-list-item>
|
||||
</mat-nav-list>
|
||||
</div>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</mat-sidenav>
|
||||
</mat-sidenav-container>
|
||||
<!-- Demo Purposes Only -->
|
||||
<!-- <button mat-fab color="warn" class="mat-fab-bottom-right" (click)="showSettings = true">
|
||||
<mat-icon class="mat-24">settings</mat-icon>
|
||||
</button> -->
|
||||
<mat-card class="settings-panel" *ngIf="showSettings">
|
||||
<mat-toolbar color="warn">
|
||||
<span fxFlex>Options</span>
|
||||
<button mat-icon-button (click)="showSettings = false">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</mat-toolbar>
|
||||
<mat-card-content class="demo-checkbox">
|
||||
<div class="sep-block">
|
||||
<div class="sep-block-header">
|
||||
<h6> <strong>Sidebar Image</strong></h6>
|
||||
</div>
|
||||
<div class="bg-img clearfix">
|
||||
<div class="pb-1" [ngClass]="{'border-active' : isBgActive('bg-1')}">
|
||||
<a (click)="onSelectSidebarImage('bg-1')">
|
||||
<img src="assets/images/bg-5.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="pb-1" [ngClass]="{'border-active' : isBgActive('bg-2')}">
|
||||
<a (click)="onSelectSidebarImage('bg-2')">
|
||||
<img src="assets/images/bg-2.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="pb-1" [ngClass]="{'border-active' : isBgActive('bg-3')}">
|
||||
<a (click)="onSelectSidebarImage('bg-3')">
|
||||
<img src="assets/images/bg-3.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="pb-2" [ngClass]="{'border-active' : isBgActive('bg-4')}">
|
||||
<a (click)="onSelectSidebarImage('bg-4')">
|
||||
<img src="assets/images/bg-4.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sep-block">
|
||||
<div>
|
||||
<mat-checkbox [(ngModel)]="sidebarBg">Sidebar Image</mat-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sep-block">
|
||||
<div class="sep-block-header">
|
||||
<h6>Sidebar Color</h6>
|
||||
</div>
|
||||
<div class="color-sidebar clearfix">
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-default')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-default')"><i aria-hidden="true"
|
||||
class="color-default fa fa-circle fa-lg def"></i>
|
||||
Default</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-green')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-green')"><i aria-hidden="true"
|
||||
class="color-green fa fa-circle fa-lg"></i>
|
||||
Green</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-red')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-red')"><i aria-hidden="true"
|
||||
class="color-red fa fa-circle fa-lg"></i>
|
||||
Red</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-purple')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-purple')"><i aria-hidden="true"
|
||||
class="color-purple fa fa-circle fa-lg"></i>
|
||||
Purple</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-pink')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-pink')"><i aria-hidden="true"
|
||||
class="color-pink fa fa-circle fa-lg"></i>
|
||||
Pink</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-blue')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-blue')"><i aria-hidden="true"
|
||||
class="color-blue fa fa-circle fa-lg"></i>
|
||||
Blue</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-green-deep')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-green-deep')"><i aria-hidden="true"
|
||||
class="color-green-deep fa fa-circle fa-lg"></i>
|
||||
Green Deep</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-brown')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-brown')"><i aria-hidden="true"
|
||||
class="color-brown fa fa-circle fa-lg"></i>
|
||||
Brown</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-orange')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-orange')"><i aria-hidden="true"
|
||||
class="color-orange fa fa-circle fa-lg"></i>
|
||||
Orange</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sep-block">
|
||||
<div class="sep-block-header">
|
||||
<h6>Header Color</h6>
|
||||
</div>
|
||||
<div class="color-header clearfix">
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-default')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-default')"><i aria-hidden="true"
|
||||
class="color-default fa fa-circle fa-lg def"></i>
|
||||
Default</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-green')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-green')"><i aria-hidden="true"
|
||||
class="color-green fa fa-circle fa-lg"></i>
|
||||
Green</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-red')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-red')"><i aria-hidden="true"
|
||||
class="color-red fa fa-circle fa-lg"></i>
|
||||
Red</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-purple')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-purple')"><i aria-hidden="true"
|
||||
class="color-purple fa fa-circle fa-lg"></i>
|
||||
Purple</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-pink')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-pink')"><i aria-hidden="true"
|
||||
class="color-pink fa fa-circle fa-lg"></i>
|
||||
Pink</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-blue')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-blue')"><i aria-hidden="true"
|
||||
class="color-blue fa fa-circle fa-lg"></i>
|
||||
Blue</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-green-deep')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-green-deep')"><i aria-hidden="true"
|
||||
class="color-green-deep fa fa-circle fa-lg"></i>
|
||||
Green Deep</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-brown')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-brown')"><i aria-hidden="true"
|
||||
class="color-brown fa fa-circle fa-lg"></i>
|
||||
Brown</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-orange')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-orange')"><i aria-hidden="true"
|
||||
class="color-orange fa fa-circle fa-lg"></i>
|
||||
Orange</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sep-block">
|
||||
<div class="sep-block-header">
|
||||
<h6>Layouts</h6>
|
||||
</div>
|
||||
<div class="pb-1">
|
||||
<mat-checkbox [(ngModel)]="horizontal" (change)="changeMenuLayout($event.checked)">Horizontal Menu
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
<div class="pb-1">
|
||||
<mat-checkbox [(ngModel)]="collapseSidebar" (change)="compactSidebar = false">Collapsed Sidebar</mat-checkbox>
|
||||
</div>
|
||||
<div class="pb-1">
|
||||
<mat-checkbox [(ngModel)]="compactSidebar" (change)="collapseSidebar = false">Compact Sidebar</mat-checkbox>
|
||||
</div>
|
||||
<div class="pb-1">
|
||||
<mat-checkbox [(ngModel)]="boxed">Boxed Layout</mat-checkbox>
|
||||
</div>
|
||||
<div class="pb-1">
|
||||
<mat-checkbox [(ngModel)]="dark">Dark Mode</mat-checkbox>
|
||||
</div>
|
||||
<div class="pb-1">
|
||||
<mat-checkbox (change)="layoutDir = (layoutDir == 'rtl' ? 'ltr' : 'rtl')">RTL</mat-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sep-block">
|
||||
<div class="sep-block-header">
|
||||
<h6>Languages</h6>
|
||||
</div>
|
||||
<mat-form-field>
|
||||
<mat-select class="mt-0" [(ngModel)]="currentLang" #langSelect="ngModel"
|
||||
(ngModelChange)="translate.use(currentLang)">
|
||||
<mat-option *ngFor="let lang of translate.getLangs()" [value]="lang">{{ lang }}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<!-- /Demo Purposes Only -->
|
||||
</div>
|
||||
222
ng-seed/src/app/layouts/admin/admin-layout.component.ts
Normal file
222
ng-seed/src/app/layouts/admin/admin-layout.component.ts
Normal file
@ -0,0 +1,222 @@
|
||||
import { Component, OnInit, OnDestroy, ViewChild, HostListener } from '@angular/core';
|
||||
import { Router, NavigationEnd } from '@angular/router';
|
||||
import { MenuItems } from '../../shared/menu-items/menu-items';
|
||||
import { HorizontalMenuItems } from '../../shared/menu-items/horizontal-menu-items';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { filter } from 'rxjs/operators';
|
||||
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
|
||||
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
|
||||
import {TranslateService} from '@ngx-translate/core';
|
||||
import PerfectScrollbar from 'perfect-scrollbar';
|
||||
import { PerfectScrollbarConfigInterface,
|
||||
PerfectScrollbarComponent, PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
|
||||
|
||||
@Component({
|
||||
selector: 'app-layout',
|
||||
templateUrl: './admin-layout.component.html'
|
||||
})
|
||||
export class AdminLayoutComponent implements OnInit, OnDestroy {
|
||||
|
||||
private _router: Subscription;
|
||||
|
||||
today: number = Date.now();
|
||||
url: string;
|
||||
showSettings = false;
|
||||
dark: boolean;
|
||||
boxed: boolean;
|
||||
collapseSidebar: boolean;
|
||||
compactSidebar: boolean;
|
||||
horizontal: boolean = false;
|
||||
sidebarBg: boolean = true;
|
||||
currentLang = 'en';
|
||||
layoutDir = 'ltr';
|
||||
searchFocus : boolean = false;
|
||||
//08/02/2023
|
||||
user: any = 'superadmin@gmail.com'
|
||||
//
|
||||
menuLayout : any = 'vertical-menu';
|
||||
selectedSidebarImage : any = 'bg-1';
|
||||
selectedSidebarColor : any = 'sidebar-default';
|
||||
selectedHeaderColor : any = 'header-default';
|
||||
collapsedClass : any = 'side-panel-opened';
|
||||
|
||||
@ViewChild('sidemenu', {static: true}) sidemenu;
|
||||
public config: PerfectScrollbarConfigInterface = {};
|
||||
|
||||
constructor(private router: Router, public menuItems: MenuItems, public horizontalMenuItems : HorizontalMenuItems, public translate: TranslateService ) {
|
||||
const browserLang: string = translate.getBrowserLang();
|
||||
translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
|
||||
}
|
||||
|
||||
//08/02/2023
|
||||
users() {
|
||||
let temp:any = JSON.parse(localStorage.getItem('email'))
|
||||
console.log(this.user,temp.email)
|
||||
return temp.email
|
||||
}
|
||||
//
|
||||
|
||||
ngOnInit(): void {
|
||||
|
||||
const elemSidebar = <HTMLElement>document.querySelector('.sidebar-container ');
|
||||
|
||||
if (window.matchMedia(`(min-width: 960px)`).matches && !this.isMac() && !this.compactSidebar && this.layoutDir != 'rtl') {
|
||||
const ps = new PerfectScrollbar(elemSidebar, {
|
||||
wheelSpeed: 2,
|
||||
suppressScrollX: true
|
||||
});
|
||||
}
|
||||
|
||||
this._router = this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((event: NavigationEnd) => {
|
||||
this.url = event.url;
|
||||
if (this.isOver()) {
|
||||
this.sidemenu.close();
|
||||
}
|
||||
|
||||
if (window.matchMedia(`(min-width: 960px)`).matches && !this.isMac() && !this.compactSidebar && this.layoutDir != 'rtl') {
|
||||
// Ps.update(elemContent);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@HostListener('click', ['$event'])
|
||||
onClick(e: any) {
|
||||
const elemSidebar = <HTMLElement>document.querySelector('.sidebar-container ');
|
||||
setTimeout(() => {
|
||||
if (window.matchMedia(`(min-width: 960px)`).matches && !this.isMac() && !this.compactSidebar && this.layoutDir != 'rtl') {
|
||||
const ps = new PerfectScrollbar(elemSidebar, {
|
||||
wheelSpeed: 2,
|
||||
suppressScrollX: true
|
||||
});
|
||||
}
|
||||
}, 350);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this._router.unsubscribe();
|
||||
}
|
||||
|
||||
isOver(): boolean {
|
||||
if (this.url === '/apps/messages' || this.url === '/apps/calendar' || this.url === '/apps/media' || this.url === '/maps/leaflet') {
|
||||
return true;
|
||||
} else {
|
||||
return window.matchMedia(`(max-width: 960px)`).matches;
|
||||
}
|
||||
}
|
||||
|
||||
isMac(): boolean {
|
||||
let bool = false;
|
||||
if (navigator.platform.toUpperCase().indexOf('MAC') >= 0 || navigator.platform.toUpperCase().indexOf('IPAD') >= 0) {
|
||||
bool = true;
|
||||
}
|
||||
return bool;
|
||||
}
|
||||
|
||||
menuMouseOver(): void {
|
||||
if (window.matchMedia(`(min-width: 960px)`).matches && this.collapseSidebar) {
|
||||
this.sidemenu.mode = 'over';
|
||||
}
|
||||
}
|
||||
|
||||
menuMouseOut(): void {
|
||||
if (window.matchMedia(`(min-width: 960px)`).matches && this.collapseSidebar) {
|
||||
this.sidemenu.mode = 'side';
|
||||
}
|
||||
}
|
||||
|
||||
menuToggleFunc()
|
||||
{
|
||||
this.sidemenu.toggle();
|
||||
|
||||
if(this.collapsedClass == 'side-panel-opened')
|
||||
{
|
||||
this.collapsedClass = 'side-panel-closed';
|
||||
}
|
||||
else
|
||||
{
|
||||
this.collapsedClass= 'side-panel-opened';
|
||||
}
|
||||
}
|
||||
|
||||
changeMenuLayout(value)
|
||||
{
|
||||
console.log(value)
|
||||
if(value)
|
||||
{
|
||||
this.menuLayout = 'top-menu';
|
||||
}
|
||||
else
|
||||
{
|
||||
this.menuLayout = 'vertical-menu';
|
||||
this.menuToggleFunc();
|
||||
}
|
||||
}
|
||||
|
||||
onSelectSidebarImage(selectedClass, event)
|
||||
{
|
||||
this.selectedSidebarImage = selectedClass;
|
||||
}
|
||||
|
||||
onSelectedSidebarColor(selectedClass)
|
||||
{
|
||||
this.selectedSidebarColor = selectedClass;
|
||||
}
|
||||
|
||||
onSelectedHeaderColor(selectedClass)
|
||||
{
|
||||
this.selectedHeaderColor = selectedClass;
|
||||
}
|
||||
|
||||
isBgActive(value)
|
||||
{
|
||||
if(value == this.selectedSidebarImage)
|
||||
{
|
||||
return true;
|
||||
}
|
||||
else
|
||||
{
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
isSidebarActive(value)
|
||||
{
|
||||
if(value == this.selectedSidebarColor)
|
||||
{
|
||||
return true;
|
||||
}
|
||||
else
|
||||
{
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
isHeaderActive(value)
|
||||
{
|
||||
if(value == this.selectedHeaderColor)
|
||||
{
|
||||
return true;
|
||||
}
|
||||
else
|
||||
{
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
addMenuItem(): void {
|
||||
this.menuItems.add({
|
||||
state: 'menu',
|
||||
name: 'MENU',
|
||||
type: 'sub',
|
||||
icon: 'trending_flat',
|
||||
children: [
|
||||
{state: 'menu', name: 'MENU'},
|
||||
{state: 'timelmenuine', name: 'MENU'}
|
||||
]
|
||||
});
|
||||
}
|
||||
logout() {
|
||||
this.router.navigate(['/']);
|
||||
}
|
||||
|
||||
}
|
||||
3
ng-seed/src/app/layouts/auth/auth-layout.component.html
Normal file
3
ng-seed/src/app/layouts/auth/auth-layout.component.html
Normal file
@ -0,0 +1,3 @@
|
||||
<mat-sidenav-container>
|
||||
<router-outlet></router-outlet>
|
||||
</mat-sidenav-container>
|
||||
8
ng-seed/src/app/layouts/auth/auth-layout.component.ts
Normal file
8
ng-seed/src/app/layouts/auth/auth-layout.component.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-layout',
|
||||
styles: [':host /deep/ .mat-sidenav-content {padding: 0;} .mat-sidenav-container {z-index: 1000}'],
|
||||
templateUrl: './auth-layout.component.html'
|
||||
})
|
||||
export class AuthLayoutComponent {}
|
||||
@ -0,0 +1,23 @@
|
||||
<div class="relative">
|
||||
<div class="form-bg">
|
||||
<div fxLayout="row" fxLayoutAlign="center start" class="pt-2">
|
||||
<div fxLayout="column" fxFlex.xl="40" fxFlex.lg="40" fxFlex.md="50" fxFlex.sm="80" fxFlex.xs="90">
|
||||
<mat-card class="login-session">
|
||||
<div class="text-center">
|
||||
<h2 class="base-border mat-text-warn mb-1">Forgot Password?</h2>
|
||||
<i class="fa fa-lock fa-4x"></i>
|
||||
<p>You can reset your password here.</p>
|
||||
<form #form="ngForm">
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch">
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput placeholder="Email" type="text" name="name" required>
|
||||
</mat-form-field>
|
||||
<button class="mat-blue" mat-raised-button>Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,3 @@
|
||||
.silk-forget-pass{
|
||||
background-color:#fff;
|
||||
}
|
||||
@ -0,0 +1,26 @@
|
||||
import { Component, OnInit,ViewEncapsulation } from '@angular/core';
|
||||
import {Router} from "@angular/router";
|
||||
|
||||
@Component({
|
||||
selector: 'ms-forgot-password',
|
||||
templateUrl:'./forgot-password-component.html',
|
||||
styleUrls: ['./forgot-password-component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class ForgotPasswordComponent {
|
||||
|
||||
email: string;
|
||||
password: string;
|
||||
|
||||
constructor(
|
||||
private router: Router
|
||||
) { }
|
||||
|
||||
send() {
|
||||
this.router.navigate(['/']);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
25
ng-seed/src/app/session/lockscreen/lockscreen-component.html
Normal file
25
ng-seed/src/app/session/lockscreen/lockscreen-component.html
Normal file
@ -0,0 +1,25 @@
|
||||
<div class="relative">
|
||||
<div class="form-bg">
|
||||
<div fxLayout="row" fxLayoutAlign="center start" class="pt-2">
|
||||
<div fxLayout="column" fxFlex.xl="40" fxFlex.lg="40" fxFlex.md="50" fxFlex.sm="80" fxFlex.xs="90">
|
||||
<mat-card class="login-session">
|
||||
<div class="text-center">
|
||||
<h2 class="base-border mat-text-warn mb-1">Session Expired</h2>
|
||||
<img src="assets/images/test4.jpg" class="rad-full forgot-img" alt="" width="100" height="100">
|
||||
<h4><strong>Welcome back John</strong></h4>
|
||||
<p>Enter your password to continue</p>
|
||||
<form #form="ngForm">
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch">
|
||||
<mat-form-field style="width: 100%" class="mb-1">
|
||||
<input matInput placeholder="Password" type="password" name="password" required>
|
||||
</mat-form-field>
|
||||
<button class="mat-blue" mat-raised-button>Submit</button>
|
||||
<p class="mat-text-warn mb-0"><a href="#">Forgot password?</a></p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,5 @@
|
||||
.silk-user-section{
|
||||
.lockscreen-form{
|
||||
background-color:#fff;
|
||||
}
|
||||
}
|
||||
24
ng-seed/src/app/session/lockscreen/lockscreen.component.ts
Normal file
24
ng-seed/src/app/session/lockscreen/lockscreen.component.ts
Normal file
@ -0,0 +1,24 @@
|
||||
import { Component, OnInit,ViewEncapsulation } from '@angular/core';
|
||||
import {Router} from "@angular/router";
|
||||
|
||||
@Component({
|
||||
selector: 'ms-lockscreen',
|
||||
templateUrl:'./lockscreen-component.html',
|
||||
styleUrls: ['./lockscreen-component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class LockScreenComponent {
|
||||
|
||||
username: string;
|
||||
|
||||
constructor(
|
||||
private router: Router
|
||||
) { }
|
||||
onSubmit() {
|
||||
this.router.navigate ( ['/'] );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
47
ng-seed/src/app/session/login/login-component.html
Normal file
47
ng-seed/src/app/session/login/login-component.html
Normal file
@ -0,0 +1,47 @@
|
||||
<div class="relative">
|
||||
<div class="form-bg">
|
||||
<div fxLayout="row" fxLayoutAlign="center start" class="pt-2">
|
||||
<div fxLayout="column" fxFlex.xl="40" fxFlex.lg="40" fxFlex.md="50" fxFlex.sm="80" fxFlex.xs="90">
|
||||
<mat-card class="login-session">
|
||||
<div>
|
||||
<h2 class="base-border">Login Form</h2>
|
||||
<p>Enter Your Login Details</p>
|
||||
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()" novalidate class="d-flex-center">
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch">
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Email" formControlName="email">
|
||||
<mat-error *ngIf="!loginForm.get('email')?.errors?.required && (loginForm.get('email')?.errors?.pattern)">
|
||||
Please enter a valid email address
|
||||
</mat-error>
|
||||
<mat-error *ngIf="loginForm.get('email')?.invalid && (loginForm.get('email')?.dirty || loginForm.get('email')?.touched) && loginForm.get('email')?.errors?.required">
|
||||
Email is required
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<input matInput type="password" placeholder="Password" formControlName="password" [type]="hide ? 'password' : 'text'" name="password">
|
||||
<mat-icon class="passwordIcon" matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
|
||||
<mat-error *ngIf="!loginForm.get('password')?.errors?.required">
|
||||
Password length must be greater than or equal to 8 and password must contain one or more uppercase , lowercase , numeric and special characters
|
||||
</mat-error>
|
||||
<mat-error *ngIf="loginForm.get('password')?.invalid && (loginForm.get('password')?.dirty || loginForm.get('password')?.touched) && loginForm.get('password')?.errors?.required">
|
||||
Password is required
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<button class="mt-2 mb-1" [disabled]="!loginForm.valid" mat-raised-button color="primary" mat-button>Sign In</button>
|
||||
<a class="mat-text-warn mb-0" (click)="openDialog()">Forgot password?</a>
|
||||
<p class="mb-0">Don't have an account? <a [routerLink]="['/authentication/register']" class="mat-text-primary">Register Here</a></p>
|
||||
</div>
|
||||
<div>
|
||||
<p>Sign in using</p>
|
||||
<!-- <a href="#" class="shared-icon mr-1 mat-blue">
|
||||
<i class="fa fa-facebook fa-lg mr-1"></i> Facebook</a> -->
|
||||
<a href="#" class="shared-icon mat-red">
|
||||
<i class="fa fa-google fa-lg mr-1"></i>Google</a></div>
|
||||
</form>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
0
ng-seed/src/app/session/login/login-component.scss
Normal file
0
ng-seed/src/app/session/login/login-component.scss
Normal file
67
ng-seed/src/app/session/login/login.component.ts
Normal file
67
ng-seed/src/app/session/login/login.component.ts
Normal file
@ -0,0 +1,67 @@
|
||||
import { Component, OnInit ,ViewEncapsulation } from '@angular/core';
|
||||
import { FormControl, FormGroup, Validators } from '@angular/forms';
|
||||
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
|
||||
import {Router} from "@angular/router";
|
||||
import { OtpComponent } from '../otp/otp.component';
|
||||
|
||||
@Component({
|
||||
selector: 'ms-login-session',
|
||||
templateUrl:'./login-component.html',
|
||||
styleUrls: ['./login-component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class LoginComponent {
|
||||
animal: string;
|
||||
name: string;
|
||||
loginForm: FormGroup | any;
|
||||
title = 'material-login';
|
||||
hide: boolean;
|
||||
dialogRef: MatDialogRef<OtpComponent, any>;
|
||||
|
||||
constructor(
|
||||
private router:Router, public dialog: MatDialog) {
|
||||
this.loginForm = new FormGroup({
|
||||
email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(
|
||||
'[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$',
|
||||
),]),
|
||||
password: new FormControl('', [Validators.required,Validators.pattern(
|
||||
'^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{8,12}$'
|
||||
)])
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit(){
|
||||
this.hide = true;
|
||||
}
|
||||
|
||||
onSubmit(){
|
||||
//08/02/2023
|
||||
console.log(this.loginForm.value);
|
||||
localStorage.setItem('email',JSON.stringify(this.loginForm.value))
|
||||
//
|
||||
if(!this.loginForm.valid){
|
||||
return;
|
||||
}
|
||||
localStorage.setItem('user',this.loginForm.value)
|
||||
this.router.navigate(['/home'])
|
||||
}
|
||||
|
||||
openDialog(): void {
|
||||
const dialogRef = this.dialog.open(OtpComponent, {
|
||||
width: '250px',
|
||||
data: {name: this.name, animal: this.animal}
|
||||
});
|
||||
dialogRef.afterClosed().subscribe(result => {
|
||||
console.log('The dialog was closed');
|
||||
this.animal = result;
|
||||
});
|
||||
}
|
||||
|
||||
login() {
|
||||
// this.router.navigate(['/home']);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user