Skip to content

Commit

Permalink
feat(user-card): first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
Badisi committed Jun 26, 2024
1 parent 43a1a26 commit c259e41
Show file tree
Hide file tree
Showing 22 changed files with 680 additions and 15 deletions.
1 change: 1 addition & 0 deletions .github/workflows/ci_release.yml
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ on:
- status
- time-picker
- tooltip
- user-card
dry-run:
description: --dry-run
type: boolean
Expand Down
26 changes: 26 additions & 0 deletions .github/workflows/ci_test_user-card.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
name: Test user-card

on:
workflow_dispatch:
workflow_call:
push:
branches:
- '**'
tags-ignore:
- '**'
paths:
- '.github/workflows/ci_test_user-card.yml'
- 'projects/user-card/**'

concurrency:
group: ci-test-user-card-group-${{ github.ref }}
cancel-in-progress: true

jobs:
ci_test_user-card:
if: "${{ !contains(github.event.head_commit.message, 'chore(release): publish') }}"
uses: dsi-hug/action/.github/workflows/action.yml@v1
with:
working-directory: projects/user-card
runs-on: '["ubuntu-latest", "macos-latest", "windows-latest"]'
node-versions: '[18, 20]'
34 changes: 21 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ Package | Version | Downloads | Tests
[@hug/ngx-status](/projects/status) | [![npm version][npm-logo-status]][npm-status] | [![npm downloads][npm-dl-logo-status]][npm-dl-status] | [![build status][tests-logo-status]][tests-status]
[@hug/ngx-time-picker](/projects/time-picker) | [![npm version][npm-logo-time-picker]][npm-time-picker] | [![npm downloads][npm-dl-logo-time-picker]][npm-dl-time-picker] | [![build status][tests-logo-time-picker]][tests-time-picker]
[@hug/ngx-tooltip](/projects/tooltip) | [![npm version][npm-logo-tooltip]][npm-tooltip] | [![npm downloads][npm-dl-logo-tooltip]][npm-dl-tooltip] | [![build status][tests-logo-tooltip]][tests-tooltip]
[@hug/ngx-user-card](/projects/user-card) | [![npm version][npm-logo-user-card]][npm-user-card] | [![npm downloads][npm-dl-logo-user-card]][npm-dl-user-card] | [![build status][tests-logo-user-card]][tests-user-card]

</div>

Expand Down Expand Up @@ -83,6 +84,13 @@ Copyright (C) 2024 [HUG - Hôpitaux Universitaires Genève][dsi-hug]
[tests-core]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_core.yml
[tests-logo-core]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_core.yml/badge.svg

[npm-layout]: https://www.npmjs.com/package/@hug/ngx-layout
[npm-logo-layout]: https://img.shields.io/npm/v/@hug/ngx-layout.svg?color=blue&logo=npm
[npm-dl-layout]: https://npmcharts.com/compare/@hug/ngx-layout?minimal=true
[npm-dl-logo-layout]: https://img.shields.io/npm/dw/@hug/ngx-layout.svg?color=7986CB&logo=npm&label=npm
[tests-layout]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_layout.yml
[tests-logo-layout]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_layout.yml/badge.svg

[npm-list-loader]: https://www.npmjs.com/package/@hug/ngx-list-loader
[npm-logo-list-loader]: https://img.shields.io/npm/v/@hug/ngx-list-loader.svg?color=blue&logo=npm
[npm-dl-list-loader]: https://npmcharts.com/compare/@hug/ngx-list-loader?minimal=true
Expand Down Expand Up @@ -111,6 +119,13 @@ Copyright (C) 2024 [HUG - Hôpitaux Universitaires Genève][dsi-hug]
[tests-overlay]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_overlay.yml
[tests-logo-overlay]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_overlay.yml/badge.svg

[npm-sidenav]: https://www.npmjs.com/package/@hug/ngx-sidenav
[npm-logo-sidenav]: https://img.shields.io/npm/v/@hug/ngx-sidenav.svg?color=blue&logo=npm
[npm-dl-sidenav]: https://npmcharts.com/compare/@hug/ngx-sidenav?minimal=true
[npm-dl-logo-sidenav]: https://img.shields.io/npm/dw/@hug/ngx-sidenav.svg?color=7986CB&logo=npm&label=npm
[tests-sidenav]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_sidenav.yml
[tests-logo-sidenav]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_sidenav.yml/badge.svg

[npm-snackbar]: https://www.npmjs.com/package/@hug/ngx-snackbar
[npm-logo-snackbar]: https://img.shields.io/npm/v/@hug/ngx-snackbar.svg?color=blue&logo=npm
[npm-dl-snackbar]: https://npmcharts.com/compare/@hug/ngx-snackbar?minimal=true
Expand Down Expand Up @@ -146,16 +161,9 @@ Copyright (C) 2024 [HUG - Hôpitaux Universitaires Genève][dsi-hug]
[tests-tooltip]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_tooltip.yml
[tests-logo-tooltip]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_tooltip.yml/badge.svg

[npm-sidenav]: https://www.npmjs.com/package/@hug/ngx-sidenav
[npm-logo-sidenav]: https://img.shields.io/npm/v/@hug/ngx-sidenav.svg?color=blue&logo=npm
[npm-dl-sidenav]: https://npmcharts.com/compare/@hug/ngx-sidenav?minimal=true
[npm-dl-logo-sidenav]: https://img.shields.io/npm/dw/@hug/ngx-sidenav.svg?color=7986CB&logo=npm&label=npm
[tests-sidenav]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_sidenav.yml
[tests-logo-sidenav]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_sidenav.yml/badge.svg

[npm-layout]: https://www.npmjs.com/package/@hug/ngx-layout
[npm-logo-layout]: https://img.shields.io/npm/v/@hug/ngx-layout.svg?color=blue&logo=npm
[npm-dl-layout]: https://npmcharts.com/compare/@hug/ngx-layout?minimal=true
[npm-dl-logo-layout]: https://img.shields.io/npm/dw/@hug/ngx-layout.svg?color=7986CB&logo=npm&label=npm
[tests-layout]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_layout.yml
[tests-logo-layout]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_layout.yml/badge.svg
[npm-user-card]: https://www.npmjs.com/package/@hug/ngx-user-card
[npm-logo-user-card]: https://img.shields.io/npm/v/@hug/ngx-user-card.svg?color=blue&logo=npm
[npm-dl-user-card]: https://npmcharts.com/compare/@hug/ngx-user-card?minimal=true
[npm-dl-logo-user-card]: https://img.shields.io/npm/dw/@hug/ngx-user-card.svg?color=7986CB&logo=npm&label=npm
[tests-user-card]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_user-card.yml
[tests-logo-user-card]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_user-card.yml/badge.svg
31 changes: 31 additions & 0 deletions angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -476,6 +476,37 @@
}
}
}
},
"user-card": {
"projectType": "library",
"root": "projects/user-card",
"sourceRoot": "projects/user-card/src",
"prefix": "lib",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:ng-packagr",
"options": {
"project": "projects/user-card/ng-package.json"
},
"configurations": {
"production": {
"tsConfig": "projects/user-card/tsconfig.lib.prod.json"
},
"development": {
"tsConfig": "projects/user-card/tsconfig.lib.json"
}
},
"defaultConfiguration": "production"
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/user-card/src/test.ts",
"tsConfig": "projects/user-card/tsconfig.spec.json",
"karmaConfig": "projects/user-card/karma.conf.js"
}
}
}
}
}
}
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@
"projects/splitter",
"projects/status",
"projects/time-picker",
"projects/tooltip"
"projects/tooltip",
"projects/user-card"
],
"dependencies": {
"@angular/animations": "~14.3.0",
Expand Down
6 changes: 6 additions & 0 deletions projects/user-card/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
@hug/user-card
=======

The sources for this package are in the main [DSI-HUG/ngx-components](https://github.com/dsi-hug/ngx-components) repo. Please file issues and pull requests against that repo.

License: GPL-3.0-only
45 changes: 45 additions & 0 deletions projects/user-card/karma.conf.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = 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/user-card'),
subdir: '.',
reporters: [
{ type: 'html' },
{ type: 'text-summary' }
]
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
failOnEmptyTestSuite: false,
restartOnFileChange: true
});
};
15 changes: 15 additions & 0 deletions projects/user-card/ng-package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/user-card",
"assets": [
"CHANGELOG.md",
{
"input": "src/",
"glob": "_user-card-theme.scss",
"output": "."
}
],
"lib": {
"entryFile": "src/index.ts"
}
}
44 changes: 44 additions & 0 deletions projects/user-card/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
{
"name": "@hug/ngx-user-card",
"version": "1.0.0",
"description": "HUG Angular - user-card component",
"homepage": "https://github.com/dsi-hug/ngx-components",
"license": "GPL-3.0-only",
"author": "HUG - Hôpitaux Universitaires Genève",
"contributors": [
"badisi (https://github.com/badisi)",
"vapkse (https://github.com/vapkse)"
],
"repository": {
"type": "git",
"url": "git+https://github.com/dsi-hug/ngx-components.git"
},
"keywords": [
"angular",
"material",
"material design",
"components"
],
"sideEffects": false,
"scripts": {
"lint": "eslint . --fix",
"test": "ng test user-card",
"test:ci": "ng test user-card --watch=false --browsers=ChromeHeadless",
"build:ng": "ng build user-card -c=production",
"build": "nx build:ng @hug/ngx-user-card --verbose",
"release": "nx release -p=@hug/ngx-user-card --yes --verbose",
"release:dry-run": "nx release -p=@hug/ngx-user-card --verbose --dry-run"
},
"peerDependencies": {
"@angular/common": ">= 14",
"@angular/core": ">= 14",
"@angular/cdk": ">= 14",
"@angular/material": ">= 14"
},
"dependencies": {
"tslib": "^2.6.3"
},
"publishConfig": {
"access": "public"
}
}
52 changes: 52 additions & 0 deletions projects/user-card/src/_user-card-theme.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
@use '@angular/material' as mat;

@mixin user-card-theme($theme) {
$foreground: map-get($theme, foreground);
$background: map-get($theme, background);

user-card {
background-color: mat.get-color-from-palette($background, card);
@include mat.elevation(3);

.header-badge {

&.green-badge {
background-color: mat.get-color-from-palette(mat.$green-palette, 500);
}

&.blue-badge {
background-color: mat.get-color-from-palette(mat.$blue-palette, 500);
}

&.red-badge {
background-color: mat.get-color-from-palette(mat.$red-palette, 500);
}

&.grey-badge {
background-color: mat.get-color-from-palette(mat.$grey-palette, 500);
}
}

.header-separator,
.header-initials {
color: mat.get-color-from-palette(mat.$grey-palette, 400);
}

hr {
border-color: mat.get-color-from-palette($foreground, divider);
}

.header-icon {
color: mat.get-color-from-palette($foreground, icon);
}

.header-function,
.label {
color: mat.get-color-from-palette($foreground, secondary-text);
}

.value {
color: mat.get-color-from-palette($foreground, text);
}
}
}
2 changes: 2 additions & 0 deletions projects/user-card/src/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export * from './user-card.model';
export * from './user-card.component';
28 changes: 28 additions & 0 deletions projects/user-card/src/test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
// This file is required by karma.conf.js and loads recursively all the .spec and framework files

import 'zone.js';
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) => {
<T>(id: string): T;
keys: () => string[];
};
};

// 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().forEach(context);
45 changes: 45 additions & 0 deletions projects/user-card/src/user-card.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<div class="user-card-header">
<span class="header-badge"
*ngIf="userCard.badgeColor as badgeColor"
[ngClass]="badgeColor + '-badge'"></span>
<div class="header-infos">
<div class="header-fullname">
{{ userCard.fullname }} <span class="header-initials"
*ngIf="userCard.initials as initials">{{' - ' + initials}}</span>
</div>
<div class="header-function">
{{ userCard.function }}{{ userCard.specialty ? ' - ' + userCard.specialty : '' }}
</div>
</div>
</div>
<div class="user-card-wrapper"
*ngIf="expanded">
<hr>
<div class="user-card-content">
<div class="content-service">
<div class="label">Service</div>
<div class="value">{{ userCard.service ?? '-'}}</div>
</div>
<div class="content-type">
<div class="label">Type</div>
<div class="value">{{ userCard.type ?? '-'}}</div>
</div>
<div class="content-phone">
<div class="label">Téléphone</div>
<div class="value">{{ userCard.phoneNumber ?? '-'}}</div>
</div>
<div class="content-mobile">
<div class="label">Mobile</div>
<div class="value">{{ userCard.mobileNumber ?? '-'}}</div>
</div>
<div class="content-email">
<div class="label">Email</div>
<div class="value">{{ userCard.email ?? '-'}}</div>
</div>
<div class="content-address">
<div class="label">Adresse</div>
<div class="value"
[innerHTML]="userCard.address ?? '-'"></div>
</div>
</div>
</div>
Loading

0 comments on commit c259e41

Please sign in to comment.