diff --git a/.browserslistrc b/.browserslistrc new file mode 100644 index 0000000..427441d --- /dev/null +++ b/.browserslistrc @@ -0,0 +1,17 @@ +# This file is used by the build system to adjust CSS and JS output to support the specified browsers below. +# For additional information regarding the format and rule options, please see: +# https://github.com/browserslist/browserslist#queries + +# For the full list of supported browsers by the Angular framework, please see: +# https://angular.io/guide/browser-support + +# You can see what browsers were selected by your queries by running: +# npx browserslist + +last 1 Chrome version +last 1 Firefox version +last 2 Edge major versions +last 2 Safari major versions +last 2 iOS major versions +Firefox ESR +not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..59d9a3a --- /dev/null +++ b/.editorconfig @@ -0,0 +1,16 @@ +# Editor configuration, see https://editorconfig.org +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +insert_final_newline = true +trim_trailing_whitespace = true + +[*.ts] +quote_type = single + +[*.md] +max_line_length = off +trim_trailing_whitespace = false diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..86d943a --- /dev/null +++ b/.gitignore @@ -0,0 +1,46 @@ +# See http://help.github.com/ignore-files/ for more about ignoring files. + +# compiled output +/dist +/tmp +/out-tsc +# Only exists if Bazel was run +/bazel-out + +# dependencies +/node_modules + +# profiling files +chrome-profiler-events*.json +speed-measure-plugin*.json + +# IDEs and editors +/.idea +.project +.classpath +.c9/ +*.launch +.settings/ +*.sublime-workspace + +# IDE - VSCode +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json +.history/* + +# misc +/.sass-cache +/connect.lock +/coverage +/libpeerconnection.log +npm-debug.log +yarn-error.log +testem.log +/typings + +# System Files +.DS_Store +Thumbs.db diff --git a/README.md b/README.md index 4287ca8..36c00e4 100644 --- a/README.md +++ b/README.md @@ -1 +1,19 @@ -# \ No newline at end of file +# teamcollaboration4 + +This project was generated with [Indigo.Design App Builder Code Gen](https://www.infragistics.com/products/indigo-design/app-builder). + +## Development server + +Run `ig start` to build the application, start a web server and open the application in the default browser. Then navigate to `http://localhost:4200/`. Default serving port can be configured in `ignite-ui-cli.json` via `defaultPort` property. + +## Build + +Run `ig build` to build the application into an output directory. + +## Running unit tests + +Run `ig test` to execute the unit tests via [Karma](https://karma-runner.github.io). Runs all `.spec.ts` files under `./src` folder. + +## Running end-to-end tests + +Run `ig test --e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). Runs all `.e2e-spec.ts` files under `e2e` folder. diff --git a/angular.json b/angular.json new file mode 100644 index 0000000..2f3067b --- /dev/null +++ b/angular.json @@ -0,0 +1,139 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "teamcollaboration4": { + "projectType": "application", + "schematics": { + "@schematics/angular:component": { + "style": "scss" + }, + "@schematics/angular:application": { + "strict": true + } + }, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/teamcollaboration4", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "tsconfig.app.json", + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "src/styles.scss" + ], + "scripts": ["./node_modules/hammerjs/hammer.min.js"] + }, + "configurations": { + "es5": { + "tsConfig": "tsconfig-es5.app.json" + }, + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "5mb", + "maximumError": "10mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "6kb", + "maximumError": "2mb" + } + ], + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + }, + "defaultConfiguration": "production" + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "teamcollaboration4:build" + }, + "configurations": { + "production": { + "browserTarget": "teamcollaboration4:build:production" + }, + "es5": { + "browserTarget": "teamcollaboration4:build:es5" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "teamcollaboration4:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "tsconfig.spec.json", + "karmaConfig": "karma.conf.js", + "styles": [ + "src/styles.scss" + ], + "scripts": ["./node_modules/hammerjs/hammer.min.js"], + "assets": [ + "src/favicon.ico", + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "tsconfig.app.json", + "tsconfig.spec.json", + "e2e/tsconfig.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + }, + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "teamcollaboration4:serve" + }, + "configurations": { + "production": { + "devServerTarget": "teamcollaboration4:serve:production" + } + } + } + } + } + }, + "defaultProject": "teamcollaboration4" +} diff --git a/e2e/protractor.conf.js b/e2e/protractor.conf.js new file mode 100644 index 0000000..b319d06 --- /dev/null +++ b/e2e/protractor.conf.js @@ -0,0 +1,37 @@ +// @ts-check +// Protractor configuration file, see link for more information +// https://github.com/angular/protractor/blob/master/lib/config.ts + +const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter'); + +/** + * @type { import("protractor").Config } + */ +exports.config = { + allScriptsTimeout: 11000, + specs: [ + './src/**/*.e2e-spec.ts' + ], + capabilities: { + browserName: 'chrome' + }, + directConnect: true, + SELENIUM_PROMISE_MANAGER: false, + baseUrl: 'http://localhost:4200/', + framework: 'jasmine', + jasmineNodeOpts: { + showColors: true, + defaultTimeoutInterval: 30000, + print: function() {} + }, + onPrepare() { + require('ts-node').register({ + project: require('path').join(__dirname, './tsconfig.json') + }); + jasmine.getEnv().addReporter(new SpecReporter({ + spec: { + displayStacktrace: StacktraceOption.PRETTY + } + })); + } +}; diff --git a/e2e/src/app.e2e-spec.ts b/e2e/src/app.e2e-spec.ts new file mode 100644 index 0000000..934608a --- /dev/null +++ b/e2e/src/app.e2e-spec.ts @@ -0,0 +1,23 @@ +import { AppPage } from './app.po'; +import { browser, logging } from 'protractor'; + +describe('Teamcollaboration4 App', () => { + let page: AppPage; + + beforeEach(() => { + page = new AppPage(); + }); + + it('should display welcome message', () => { + page.navigateTo(); + expect(page.getWelcomeText()).toEqual('Welcome to Ignite UI for Angular'); + }); + + afterEach(async () => { + // Assert that there are no errors emitted from the browser + const logs = await browser.manage().logs().get(logging.Type.BROWSER); + expect(logs).not.toContain(jasmine.objectContaining({ + level: logging.Level.SEVERE, + } as logging.Entry)); + }); +}); diff --git a/e2e/src/app.po.ts b/e2e/src/app.po.ts new file mode 100644 index 0000000..5e44988 --- /dev/null +++ b/e2e/src/app.po.ts @@ -0,0 +1,11 @@ +import { browser, by, element } from 'protractor'; + +export class AppPage { + navigateTo(): Promise { + return browser.get(browser.baseUrl) as Promise; + } + + getWelcomeText(): Promise { + return element(by.css('app-home h2')).getText() as Promise; + } +} diff --git a/e2e/tsconfig.json b/e2e/tsconfig.json new file mode 100644 index 0000000..0782539 --- /dev/null +++ b/e2e/tsconfig.json @@ -0,0 +1,13 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "outDir": "../out-tsc/e2e", + "module": "commonjs", + "target": "es2018", + "types": [ + "jasmine", + "node" + ] + } +} diff --git a/ignite-ui-cli.json b/ignite-ui-cli.json new file mode 100644 index 0000000..4576251 --- /dev/null +++ b/ignite-ui-cli.json @@ -0,0 +1,19 @@ +{ + "version": "12.0.803", + "project": { + "defaultPort": 4200, + "framework": "angular", + "projectType": "igx-ts", + "projectTemplate": "empty", + "theme": "Default", + "themePath": "node_modules/igniteui-angular/styles/igniteui-angular.css", + "isBundle": false, + "bundleFilePath": "", + "igniteuiSource": "", + "components": [], + "sourceFiles": [], + "isShowcase": false, + "version": "" + }, + "build": {} +} diff --git a/karma.conf.js b/karma.conf.js new file mode 100644 index 0000000..eaa33aa --- /dev/null +++ b/karma.conf.js @@ -0,0 +1,44 @@ +// Karma configuration file, see link for more information +// https://karma-runner.github.io/1.0/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'), + require('@angular-devkit/build-angular/plugins/karma') + ], + client: { + jasmine: { + // you can add configuration options for Jasmine here + // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html + // for example, you can disable the random execution with `random: false` + // or set a specific seed with `seed: 4321` + }, + clearContext: false // leave Jasmine Spec Runner output visible in browser + }, + jasmineHtmlReporter: { + suppressAll: true // removes the duplicated traces + }, + coverageReporter: { + dir: require('path').join(__dirname, './coverage/teamcollaboration4'), + subdir: '.', + reporters: [ + { type: 'html' }, + { type: 'text-summary' } + ] + }, + reporters: ['progress', 'kjhtml'], + port: 9876, + colors: true, + logLevel: config.LOG_INFO, + autoWatch: true, + browsers: ['Chrome'], + singleRun: false, + restartOnFileChange: true + }); +}; diff --git a/package.json b/package.json new file mode 100644 index 0000000..e581003 --- /dev/null +++ b/package.json @@ -0,0 +1,53 @@ +{ + "name": "teamcollaboration4", + "version": "0.0.0", + "scripts": { + "ng": "ng", + "start": "ng serve -o", + "build": "ng build --prod", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "private": true, + "dependencies": { + "@angular/animations": "~12.0.0", + "@angular/common": "~12.0.0", + "@angular/compiler": "~12.0.0", + "@angular/core": "~12.0.0", + "@angular/forms": "~12.0.0", + "@angular/platform-browser": "~12.0.0", + "@angular/platform-browser-dynamic": "~12.0.0", + "@angular/router": "~12.0.0", + "hammerjs": "^2.0.8", + "igniteui-angular": "~12.0.0", + "core-js": "^3.6.5", + "jszip": "^3.5.0", + "minireset.css": "~0.0.4", + "rxjs": "~6.6.0", + "tslib": "^2.1.0", + "web-animations-js": "^2.3.2", + "zone.js": "~0.11.4" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~12.0.0", + "@angular/cli": "~12.0.0", + "@angular/compiler-cli": "~12.0.0", + "@types/jasmine": "~3.6.0", + "@types/node": "^12.11.1", + "codelyzer": "^6.0.0", + "@igniteui/angular-schematics": "~12.0.803", + "jasmine-core": "~3.7.0", + "jasmine-spec-reporter": "~7.0.0", + "karma": "~6.3.0", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage": "~2.0.3", + "karma-jasmine": "~4.0.0", + "karma-jasmine-html-reporter": "^1.5.0", + "protractor": "~7.0.0", + "ts-node": "~9.1.1", + "tslint": "~6.1.0", + "typescript": "~4.2.3" + } +} + diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts new file mode 100644 index 0000000..dc320ad --- /dev/null +++ b/src/app/app-routing.module.ts @@ -0,0 +1,23 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { PageNotFoundComponent } from './error-routing/not-found/not-found.component'; +import { UncaughtErrorComponent } from './error-routing/error/uncaught-error.component'; +import { ErrorRoutingModule } from './error-routing/error-routing.module'; +import { MyTasksComponent } from './my-tasks/my-tasks.component'; +import { DashboardsComponent } from './dashboards/dashboards.component'; + +export const routes: Routes = [ + { path: '', redirectTo: 'my-tasks', pathMatch: 'full' }, + { path: 'error', component: UncaughtErrorComponent }, + { path: 'my-tasks', component: MyTasksComponent, data: { text: 'My Tasks' } }, + { path: 'dashboards', component: DashboardsComponent, data: { text: 'Dashboards' } }, + { path: '**', component: PageNotFoundComponent } // must always be last +]; + +@NgModule({ + imports: [RouterModule.forRoot(routes), ErrorRoutingModule], + exports: [RouterModule, ErrorRoutingModule] +}) +export class AppRoutingModule { +} diff --git a/src/app/app.component.html b/src/app/app.component.html new file mode 100644 index 0000000..d653f4b --- /dev/null +++ b/src/app/app.component.html @@ -0,0 +1,86 @@ +
+
+ + + + + Home + + + Company Inc. + + + INDIGO.DESIGN + + + Growth hacking + + + Public preview + + + UX Feedback + + + Reveal + + + Onboarding + + + Analytics + + +
+
+ + + + + + + Option + + +
+
+
+ + + + account_circle + Title goes here + + + + + assignment_turned_in + + + dashboard + + + vertical_split + + + bar_chart + + + folder + + + +
+ +
+
diff --git a/src/app/app.component.scss b/src/app/app.component.scss new file mode 100644 index 0000000..31f161b --- /dev/null +++ b/src/app/app.component.scss @@ -0,0 +1,106 @@ +:host { + height: 100%; + display: flex; + flex-direction: column; + align-items: stretch; +} +.row-layout { + align-items: stretch; + flex: 1 1 auto; + min-width: 50px; + min-height: 50px; + position: relative; +} +.header { + padding: 12px 20px; + height: 60px; + flex: 0 0 auto; + background-color: var(--igx-success-500); + align-items: center; + position: relative; +} +.row-layout_1 { + flex: 1 1 auto; + align-items: center; + min-width: 50px; + min-height: 50px; + position: relative; +} +.row-layout_2 { + align-items: center; + min-width: 50px; + min-height: 50px; + position: relative; +} +.image { + margin: 0 8px 0 0; + width: 26px; + min-width: 0; + min-height: 0; + object-fit: cover; + flex: 0 0 auto; +} +.avatar { + flex: 0 0 auto; +} +.project-dropdown { + left: 35px; + width: 222px; + top: 0; + position: absolute; + height: max-content; + min-width: min-content; + flex: 0 0 auto; +} +.section { + left: 0; + top: 0; + position: absolute; + height: max-content; + min-width: min-content; + flex: 0 0 auto; +} +.dropdown-item { + width: max-content; + height: max-content; + min-width: min-content; + flex: 0 0 auto; +} +.button { + margin: 0 16px 0 0; + height: max-content; + min-width: min-content; + flex: 0 0 auto; +} +.icon-button { + margin: 0 8px 0 0; + flex: 0 0 auto; +} +.button_1 { + height: max-content; + min-width: min-content; + flex: 0 0 auto; +} +.dropdown-item_1 { + flex: 0 0 auto; +} +.navigation-drawer { + width: 320px; + min-width: min-content; + max-width: min-content; + flex: 0 0 auto; + min-height: 0; +} +.views-container { + min-width: 0; + flex: 1 1 auto; + position: relative; + min-height: 0; +} +.nav-item-title { + text-overflow: ellipsis; + overflow: hidden; +} +.row { + display: flex; +} diff --git a/src/app/app.component.ts b/src/app/app.component.ts new file mode 100644 index 0000000..9a8db0f --- /dev/null +++ b/src/app/app.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.scss'] +}) +export class AppComponent { +} diff --git a/src/app/app.module.ts b/src/app/app.module.ts new file mode 100644 index 0000000..95884a7 --- /dev/null +++ b/src/app/app.module.ts @@ -0,0 +1,39 @@ +import { BrowserModule, HammerModule } from '@angular/platform-browser'; +import { NgModule } from '@angular/core'; + +import { AppRoutingModule } from './app-routing.module'; +import { AppComponent } from './app.component'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { MyTasksComponent } from './my-tasks/my-tasks.component'; +import { IgxBadgeModule, IgxListModule, IgxIconModule, IgxButtonModule, IgxAvatarModule, IgxCalendarModule, IgxCardModule, IgxToggleModule, IgxDropDownModule, IgxNavigationDrawerModule } from 'igniteui-angular'; +import { FormsModule } from '@angular/forms'; +import { DashboardsComponent } from './dashboards/dashboards.component'; + +@NgModule({ + declarations: [ + AppComponent, + MyTasksComponent, + DashboardsComponent + ], + imports: [ + BrowserModule, + HammerModule, + AppRoutingModule, + BrowserAnimationsModule, + IgxBadgeModule, + IgxListModule, + IgxIconModule, + IgxButtonModule, + IgxAvatarModule, + IgxCalendarModule, + FormsModule, + IgxCardModule, + IgxToggleModule, + IgxDropDownModule, + IgxNavigationDrawerModule + ], + providers: [], + bootstrap: [AppComponent] +}) +export class AppModule { +} diff --git a/src/app/dashboards/dashboards.component.html b/src/app/dashboards/dashboards.component.html new file mode 100644 index 0000000..8752e5e --- /dev/null +++ b/src/app/dashboards/dashboards.component.html @@ -0,0 +1,82 @@ +
+
Dashboards
+ + +

Dashboards

+ dashboard + + +

Favorites

+ star + + +

Recent

+ access_time + + +

Samples

+ ballot + + +
+
+
+
Recent
+
+
+ + + + + +

Artists Analysis

+
Jun 15, 2020 - Jason Anderson
+ + + + + + + + + + + +

For evaluation

+
Jun 15, 2020 - Martina Roberts
+ + + + + + + + + + + +

Stylescape Results

+
Jun 15, 2020 - Caroline Sanders
+ + + + + + + +
+
diff --git a/src/app/dashboards/dashboards.component.scss b/src/app/dashboards/dashboards.component.scss new file mode 100644 index 0000000..5ed9a80 --- /dev/null +++ b/src/app/dashboards/dashboards.component.scss @@ -0,0 +1,95 @@ +:host { + height: 100%; + display: flex; + align-items: stretch; +} +.row-layout { + align-items: center; + margin: 0 0 32px; + min-height: 50px; + position: relative; + min-width: 50px; +} +.column-layout { + padding: 28px 16px; + width: 250px; + min-width: 250px; + background-color: transparent; + align-items: stretch; + min-height: 50px; + flex: 0 0 auto; +} +.column-layout_1 { + padding: 16px 32px; + flex: 1 0 auto; + background-color: var(--igx-grays-100); + align-items: stretch; + min-height: 50px; + position: relative; + min-width: 50px; +} +.row-layout_1 { + flex: 1 1 auto; + flex-wrap: wrap; + overflow: auto; + position: relative; +} +.card { + width: 240px; + min-width: 240px; + margin: 0 24px 24px 0; + height: max-content; + flex: 0 0 auto; +} +.actions { + min-height: 40px; + min-width: 50px; +} +.title { + margin: 0 0 24px; + flex: 0 0 auto; + height: max-content; + min-width: min-content; +} +.title_1 { + flex: 1 0 auto; + color: #D4D5D9; + height: max-content; + min-width: min-content; +} +.list { + margin: 0 0 16px; + height: auto; + min-width: max-content; + flex: 0 0 auto; +} +.list-item { + min-width: 0; + min-height: 0; + flex: 0 0 auto; +} +.floating-action-button { + width: max-content; + height: max-content; + right: 24.144861681707958px; + bottom: 24px; + position: fixed; + z-index: 1; + flex: 0 0 auto; +} +.icon { + width: 24px; + height: 24px; + font-size: 24px; + flex: 0 0 auto; +} +.icon-button { + flex: 0 0 auto; +} +.row { + display: flex; +} +.column { + display: flex; + flex-direction: column; +} diff --git a/src/app/dashboards/dashboards.component.spec.ts b/src/app/dashboards/dashboards.component.spec.ts new file mode 100644 index 0000000..9348e74 --- /dev/null +++ b/src/app/dashboards/dashboards.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DashboardsComponent } from './dashboards.component'; + +describe('DashboardsComponent', () => { + let component: DashboardsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ DashboardsComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(DashboardsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/dashboards/dashboards.component.ts b/src/app/dashboards/dashboards.component.ts new file mode 100644 index 0000000..da1927f --- /dev/null +++ b/src/app/dashboards/dashboards.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-dashboards', + templateUrl: './dashboards.component.html', + styleUrls: ['./dashboards.component.scss'] +}) +export class DashboardsComponent { +} diff --git a/src/app/error-routing/error-routing.module.ts b/src/app/error-routing/error-routing.module.ts new file mode 100644 index 0000000..2798801 --- /dev/null +++ b/src/app/error-routing/error-routing.module.ts @@ -0,0 +1,21 @@ +import { NgModule, ErrorHandler, Provider } from '@angular/core'; +import { PageNotFoundComponent } from './not-found/not-found.component'; +import { UncaughtErrorComponent } from './error/uncaught-error.component'; +import { GlobalErrorHandlerService } from './error/global-error-handler.service'; +import { environment } from '../../environments/environment'; + +const providers: Provider[] = []; + +if (environment.production) { + // register prod error handler + providers.push({ provide: ErrorHandler, useClass: GlobalErrorHandlerService }); +} + +@NgModule({ + declarations: [ + PageNotFoundComponent, + UncaughtErrorComponent + ], + providers +}) +export class ErrorRoutingModule { } diff --git a/src/app/error-routing/error/global-error-handler.service.ts b/src/app/error-routing/error/global-error-handler.service.ts new file mode 100644 index 0000000..2a5fa40 --- /dev/null +++ b/src/app/error-routing/error/global-error-handler.service.ts @@ -0,0 +1,23 @@ +import { ErrorHandler, Injector, NgZone, Injectable } from '@angular/core'; +import { Router } from '@angular/router'; + +@Injectable() +export class GlobalErrorHandlerService implements ErrorHandler { + + constructor(private injector: Injector, private zone: NgZone) { } + + handleError(error: any) { + // handle and/or log error, for example: + console.error(error); + + // show error page + const router = this.injector.get(Router); + if (router) { + this.zone.run(() => { + router + .navigate(['error']) + .catch((err) => console.error(err)); + }); + } + } +} diff --git a/src/app/error-routing/error/uncaught-error.component.ts b/src/app/error-routing/error/uncaught-error.component.ts new file mode 100644 index 0000000..0fbb6ba --- /dev/null +++ b/src/app/error-routing/error/uncaught-error.component.ts @@ -0,0 +1,6 @@ +import { Component } from '@angular/core'; + +@Component({ + template: '

Error 500: Internal Server Error

', +}) +export class UncaughtErrorComponent { } diff --git a/src/app/error-routing/not-found/not-found.component.ts b/src/app/error-routing/not-found/not-found.component.ts new file mode 100644 index 0000000..4f027a8 --- /dev/null +++ b/src/app/error-routing/not-found/not-found.component.ts @@ -0,0 +1,6 @@ +import { Component } from '@angular/core'; + +@Component({ + template: '

Error 404: Page not found

' +}) +export class PageNotFoundComponent { } diff --git a/src/app/my-tasks/my-tasks.component.html b/src/app/my-tasks/my-tasks.component.html new file mode 100644 index 0000000..b2a7097 --- /dev/null +++ b/src/app/my-tasks/my-tasks.component.html @@ -0,0 +1,160 @@ +
+
Tasks
+
+

VD Team

+ +
+
+

LISTS

+ + +

General

+ more_vert + + +

App Builder

+ more_vert + + +

Indigo.Design

+ more_vert + + +

Marketing

+ more_vert + + +

Customer Portal

+ more_vert + + + +
+
+

FILTERS

+ + +

Due this Week

+ more_vert + + +

Overdue

+ more_vert + + + +
+
+
+
+
VD Team
+ + + + + +
+
+
+
Developer Tools
+

Release 2020.2

+ + + +

Download any Ultimate product and take notes on the download process

+

Product download process experience

+ more_vert + + + +

Report about the downloaded ultimate products to the Marketing Team

+

Product download process experience

+ more_vert + + + +
App Builder
+

September release - Sprint 1

+ + + +

Research new sample app

+

New sample application

+ more_vert + + + +

Create visual design for new sample app

+

New sample application

+ more_vert + + + +

Implementation for new sample app

+

New sample application

+ more_vert + + + +

Tweaks in List component

+

App Builder UI Components

+ more_vert + + + +

QE of new App Builder components

+

App Builder UI Components

+ more_vert + + + +

Implementation of Chips component

+

App Builder UI Components

+ more_vert + + + +
+
+ +
Release Calendar
+ + +

App Builder

+

Product download process experience

+ check_circle + + +

Ultimate Products Review

+

08.13.2020

+ error + + +
+
+
diff --git a/src/app/my-tasks/my-tasks.component.scss b/src/app/my-tasks/my-tasks.component.scss new file mode 100644 index 0000000..a79302f --- /dev/null +++ b/src/app/my-tasks/my-tasks.component.scss @@ -0,0 +1,179 @@ +:host { + height: 100%; + display: flex; + align-items: stretch; +} +.left_nav { + padding: 28px 16px; + width: 250px; + background-color: var(--igx-surface-500); + flex: 0 0 auto; + align-items: stretch; +} +.row-layout { + padding: 0 16px 0 0; + align-items: center; + margin: 0 0 32px; + min-width: 50px; + position: relative; +} +.content_section { + padding: 16px 32px 26px; + background-color: var(--igx-grays-100); + overflow: hidden; + flex: 1 1 auto; + align-items: stretch; + min-width: 50px; + min-height: 50px; + position: relative; +} +.column-layout { + width: 300px; + flex: 0 0 auto; + align-items: stretch; + min-width: 50px; + min-height: 50px; + position: relative; +} +.column-layout_1 { + margin: 0 32px 0 0; + min-width: 375px; + flex: 1 1 auto; + align-items: stretch; + min-height: 50px; + position: relative; +} +.row-layout_1 { + overflow: auto; + align-items: stretch; + min-width: 50px; + min-height: 50px; + position: relative; +} +.content_toolbar { + align-items: center; + margin: 0 0 32px; + min-width: 50px; + min-height: 50px; + position: relative; +} +.column-layout_2 { + height: max-content; + flex: 0 0 auto; + align-items: stretch; + min-width: 50px; + min-height: 50px; + position: relative; +} +.column-layout_3 { + margin: 0 0 32px; +} +.title { + margin: 0 0 24px; + min-width: min-content; + height: max-content; + flex: 0 0 auto; +} +.calendar { + margin: 0 0 32px; + width: max-content; + flex: 1 0 auto; + height: max-content; +} +.title_1 { + color: #D4D5D9; + flex: 1 0 auto; + min-width: min-content; + height: max-content; +} +.text { + flex: 1 0 auto; + min-width: min-content; + height: max-content; +} +.title_2 { + margin: 0 0 16px; + min-width: min-content; + height: max-content; + flex: 0 0 auto; +} +.title_3 { + min-width: min-content; + height: max-content; + flex: 0 0 auto; +} +.avatar { + flex: 0 0 auto; +} +.badge { + width: max-content; + height: max-content; + flex: 0 0 auto; +} +.list { + margin: 0 0 16px; + height: auto; + min-width: max-content; + flex: 0 0 auto; +} +.list_1 { + margin: 0 0 8px; + height: auto; + min-width: max-content; + flex: 0 0 auto; +} +.list-item { + min-width: 0; + min-height: 0; + flex: 0 0 auto; +} +.button { + margin: 0 0 16px; + width: max-content; + height: max-content; + min-width: min-content; + flex: 0 0 auto; +} +.button_1 { + margin: 0 0 8px; + width: max-content; + height: max-content; + min-width: min-content; + flex: 0 0 auto; +} +.user-input { + margin: 0 8px 0 0; + flex: 0 0 auto; +} +.button_2 { + margin: 0 4px 0 0; + height: max-content; + min-width: min-content; + flex: 0 0 auto; +} +.button_3 { + width: max-content; + height: max-content; + min-width: min-content; + flex: 0 0 auto; +} +.button_4 { + height: max-content; + min-width: min-content; +} +.icon { + width: 24px; + height: 24px; + font-size: 24px; + flex: 0 0 auto; +} +.icon-button { + flex: 0 0 auto; +} +.row { + display: flex; +} +.column { + display: flex; + flex-direction: column; +} diff --git a/src/app/my-tasks/my-tasks.component.spec.ts b/src/app/my-tasks/my-tasks.component.spec.ts new file mode 100644 index 0000000..95d285e --- /dev/null +++ b/src/app/my-tasks/my-tasks.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MyTasksComponent } from './my-tasks.component'; + +describe('MyTasksComponent', () => { + let component: MyTasksComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ MyTasksComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(MyTasksComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/my-tasks/my-tasks.component.ts b/src/app/my-tasks/my-tasks.component.ts new file mode 100644 index 0000000..daebc3e --- /dev/null +++ b/src/app/my-tasks/my-tasks.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-my-tasks', + templateUrl: './my-tasks.component.html', + styleUrls: ['./my-tasks.component.scss'] +}) +export class MyTasksComponent { +} diff --git a/src/assets/.gitkeep b/src/assets/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/assets/GitHub/github.svg b/src/assets/GitHub/github.svg new file mode 100644 index 0000000..0358b9a --- /dev/null +++ b/src/assets/GitHub/github.svg @@ -0,0 +1 @@ +GitHub \ No newline at end of file diff --git a/src/assets/indigo-design.svg b/src/assets/indigo-design.svg new file mode 100644 index 0000000..d1651e7 --- /dev/null +++ b/src/assets/indigo-design.svg @@ -0,0 +1,183 @@ + + + + + + + + + + + + + + + + + + + import { IgxGridModule } + from 'igniteui-angular'; + @NgModule({ + imports: [ + ... + IgxGridModule + ... + ] + }) + export class AppModule {} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/responsive.gif b/src/assets/responsive.gif new file mode 100644 index 0000000..76ecc95 Binary files /dev/null and b/src/assets/responsive.gif differ diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts new file mode 100644 index 0000000..3612073 --- /dev/null +++ b/src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true +}; diff --git a/src/environments/environment.ts b/src/environments/environment.ts new file mode 100644 index 0000000..7b4f817 --- /dev/null +++ b/src/environments/environment.ts @@ -0,0 +1,16 @@ +// This file can be replaced during build by using the `fileReplacements` array. +// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. +// The list of file replacements can be found in `angular.json`. + +export const environment = { + production: false +}; + +/* + * For easier debugging in development mode, you can import the following file + * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. + * + * This import should be commented out in production mode because it will have a negative impact + * on performance if an error is thrown. + */ +// import 'zone.js/dist/zone-error'; // Included with Angular CLI. diff --git a/src/favicon.ico b/src/favicon.ico new file mode 100644 index 0000000..997406a Binary files /dev/null and b/src/favicon.ico differ diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..978f1db --- /dev/null +++ b/src/index.html @@ -0,0 +1,17 @@ + + + + + Team collaboration (4) + + + + + + + + + + + + diff --git a/src/main.ts b/src/main.ts new file mode 100644 index 0000000..c7b673c --- /dev/null +++ b/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/src/polyfills.ts b/src/polyfills.ts new file mode 100644 index 0000000..373f538 --- /dev/null +++ b/src/polyfills.ts @@ -0,0 +1,65 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** + * IE11 requires the following for NgClass support on SVG elements + */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** + * Web Animations `@angular/platform-browser/animations` + * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. + * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). + */ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + * because those flags need to be set before `zone.js` being loaded, and webpack + * will put import in the top of bundle, so user need to create a separate file + * in this directory (for example: zone-flags.ts), and put the following flags + * into that file, and then add the following code before importing zone.js. + * import './zone-flags'; + * + * The flags allowed in zone-flags.ts are listed here. + * + * The following flags will work for all browsers. + * + * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + * + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + * + * (window as any).__Zone_enable_cross_context_check = true; + * + */ + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js'; // Included with Angular CLI. + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/src/styles.scss b/src/styles.scss new file mode 100644 index 0000000..21d15d2 --- /dev/null +++ b/src/styles.scss @@ -0,0 +1,36 @@ +/* You can add global styles to this file, and also import other style files */ +// Standard CSS normalize, comment out if not required or using a different module +@import "~minireset.css/minireset"; + + + +html, body { + height: 100%; +} + +@import '~igniteui-angular/lib/core/styles/themes/index'; + +@include igx-core(); +@include igx-typography(); + +$custom-palette: igx-palette( + $primary: #09f, + $secondary: #72da67, + $surface: #222222, + $grays: #FFFFFF); +@include igx-theme($palette: $custom-palette, $schema: $dark-schema); + +body { + background: var(--igx-surface-500); + color: var(--igx-surface-500-contrast); +} + +.igx-typography { + h1, h2, h3, h4, h5, h6, p { + margin: 0; + } +} + +.outer-wrapper > *:not(router-outlet) { + width: 100%; +} diff --git a/src/test.ts b/src/test.ts new file mode 100644 index 0000000..2042356 --- /dev/null +++ b/src/test.ts @@ -0,0 +1,25 @@ +// This file is required by karma.conf.js and loads recursively all the .spec and framework files + +import 'zone.js/testing'; +import { getTestBed } from '@angular/core/testing'; +import { + BrowserDynamicTestingModule, + platformBrowserDynamicTesting +} from '@angular/platform-browser-dynamic/testing'; + +declare const require: { + context(path: string, deep?: boolean, filter?: RegExp): { + keys(): string[]; + (id: string): T; + }; +}; + +// First, initialize the Angular testing environment. +getTestBed().initTestEnvironment( + BrowserDynamicTestingModule, + platformBrowserDynamicTesting() +); +// Then we find all the tests. +const context = require.context('./', true, /\.spec\.ts$/); +// And load the modules. +context.keys().map(context); diff --git a/tsconfig-es5.app.json b/tsconfig-es5.app.json new file mode 100644 index 0000000..f1396e3 --- /dev/null +++ b/tsconfig-es5.app.json @@ -0,0 +1,6 @@ +{ + "extends": "./tsconfig.app.json", + "compilerOptions": { + "target": "es5" + } +} diff --git a/tsconfig.app.json b/tsconfig.app.json new file mode 100644 index 0000000..baca942 --- /dev/null +++ b/tsconfig.app.json @@ -0,0 +1,19 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "lib": [ + "es2019", + "dom" + ], + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "src/main.ts", + "src/polyfills.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..dcd4d9d --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,27 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "noFallthroughCasesInSwitch": true, + "sourceMap": true, + "strict": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2017", + "module": "es2020", + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictTemplates": true + } +} diff --git a/tsconfig.spec.json b/tsconfig.spec.json new file mode 100644 index 0000000..092345b --- /dev/null +++ b/tsconfig.spec.json @@ -0,0 +1,18 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/spec", + "types": [ + "jasmine" + ] + }, + "files": [ + "src/test.ts", + "src/polyfills.ts" + ], + "include": [ + "src/**/*.spec.ts", + "src/**/*.d.ts" + ] +} diff --git a/tslint.json b/tslint.json new file mode 100644 index 0000000..5e0aea8 --- /dev/null +++ b/tslint.json @@ -0,0 +1,149 @@ +{ + "extends": "tslint:recommended", + "rulesDirectory": [ + "codelyzer" + ], + "rules": { + "align": { + "options": [ + "parameters", + "statements" + ] + }, + "array-type": false, + "arrow-return-shorthand": true, + "curly": true, + "deprecation": { + "severity": "warning" + }, + "eofline": true, + "import-blacklist": [ + true, + "rxjs/Rx" + ], + "import-spacing": true, + "indent": { + "options": [ + "spaces" + ] + }, + "max-classes-per-file": false, + "max-line-length": [ + true, + 140 + ], + "member-ordering": [ + true, + { + "order": [ + "static-field", + "instance-field", + "static-method", + "instance-method" + ] + } + ], + "no-console": [ + true, + "debug", + "info", + "time", + "timeEnd", + "trace" + ], + "no-empty": false, + "no-inferrable-types": [ + true, + "ignore-params" + ], + "no-non-null-assertion": true, + "no-redundant-jsdoc": true, + "no-switch-case-fall-through": true, + "no-var-requires": false, + "object-literal-key-quotes": [ + true, + "as-needed" + ], + "quotemark": [ + true, + "single" + ], + "semicolon": { + "options": [ + "always" + ] + }, + "space-before-function-paren": { + "options": { + "anonymous": "never", + "asyncArrow": "always", + "constructor": "never", + "method": "never", + "named": "never" + } + }, + "typedef-whitespace": { + "options": [ + { + "call-signature": "nospace", + "index-signature": "nospace", + "parameter": "nospace", + "property-declaration": "nospace", + "variable-declaration": "nospace" + }, + { + "call-signature": "onespace", + "index-signature": "onespace", + "parameter": "onespace", + "property-declaration": "onespace", + "variable-declaration": "onespace" + } + ] + }, + "variable-name": { + "options": [ + "ban-keywords", + "check-format", + "allow-pascal-case" + ] + }, + "whitespace": { + "options": [ + "check-branch", + "check-decl", + "check-operator", + "check-separator", + "check-type", + "check-typecast" + ] + }, + "component-class-suffix": true, + "contextual-lifecycle": true, + "directive-class-suffix": true, + "no-conflicting-lifecycle": true, + "no-host-metadata-property": true, + "no-input-rename": true, + "no-inputs-metadata-property": true, + "no-output-native": true, + "no-output-on-prefix": true, + "no-output-rename": true, + "no-outputs-metadata-property": true, + "template-banana-in-box": true, + "template-no-negated-async": true, + "use-lifecycle-interface": true, + "use-pipe-transform-interface": true, + "directive-selector": [ + true, + "attribute", + "app", + "camelCase" + ], + "component-selector": [ + true, + "element", + "app", + "kebab-case" + ] + } +} +