Skip to content

Commit

Permalink
Implemented more complex task
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonniebigodes
jonniebigodes committed Nov 7, 2023
1 parent 7f5aa47 commit ce0c7c8
Show file tree
Hide file tree
Showing 3 changed files with 128 additions and 28 deletions.
96 changes: 73 additions & 23 deletions documentation.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,47 @@
{
"pipes": [],
"interfaces": [
{
"name": "Task",
"id": "interface-Task-65fb90e4dc34d2734d4f266a9debe7f309cfdead4dabb2d9ae04d2644286a44dacb5bed4eefc28d89fdd07e80e4db044ff0f4172241de360b28eedb128cc15b8",
"file": "src/app/models/task.model.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "interface",
"sourceCode": "export interface Task {\n id?: string;\n title?: string;\n state?: string;\n}\n",
"properties": [
{
"name": "id",
"deprecated": false,
"deprecationMessage": "",
"type": "string",
"optional": true,
"description": "",
"line": 2
},
{
"name": "state",
"deprecated": false,
"deprecationMessage": "",
"type": "string",
"optional": true,
"description": "",
"line": 4
},
{
"name": "title",
"deprecated": false,
"deprecationMessage": "",
"type": "string",
"optional": true,
"description": "",
"line": 3
}
],
"indexSignatures": [],
"kind": 165,
"methods": []
},
{
"name": "User",
"id": "interface-User-9c7e5f1bbbab702cb032307d130876cb68969b0cd4eedef32a0c8cad8081a54e5f8f577ed6ad4539c1b99a1d246cb34031d198c2ea8eba440e64e91b14f01fdc",
Expand Down Expand Up @@ -350,7 +391,7 @@
},
{
"name": "TaskComponent",
"id": "component-TaskComponent-932274d0592043a469eca752e4c64a6bb235d06ce50041389cdb017a0e56b415eadd33908231d592d46db06f2097028d63953d4ad4758a31a6a784cc330bb2c3",
"id": "component-TaskComponent-50094af3beb0e8287bb702460fcf2013af796c5a7b1436e0514d55a0448b4bc6a76f91497c7ace14645163693b8419e6abf96be673996dfcfbef9fbb8c5a35d4",
"file": "src/app/components/task.component.ts",
"encapsulation": [],
"entryComponents": [],
Expand All @@ -360,7 +401,7 @@
"selector": "app-task",
"styleUrls": [],
"styles": [],
"template": "<div class=\"list-item\">\n <label [attr.aria-label]=\"task.title + ''\" for=\"title\">\n <input\n type=\"text\"\n [value]=\"task.title\"\n readonly=\"true\"\n id=\"title\"\n name=\"title\"\n />\n </label>\n</div>\n",
"template": "<div class=\"list-item {{ task?.state }}\">\n <label\n [attr.aria-label]=\"'archiveTask-' + task.id\"\n for=\"checked-{{ task?.id }}\"\n class=\"checkbox\"\n >\n <input\n type=\"checkbox\"\n disabled=\"true\"\n [defaultChecked]=\"task?.state === 'TASK_ARCHIVED'\"\n name=\"checked-{{ task?.id }}\"\n id=\"checked-{{ task?.id }}\"\n />\n <span class=\"checkbox-custom\" (click)=\"onArchive(task.id)\"></span>\n </label>\n <label\n [attr.aria-label]=\"task.title + ''\"\n for=\"title-{{ task?.id }}\"\n class=\"title\"\n >\n <input\n type=\"text\"\n [value]=\"task.title\"\n readonly=\"true\"\n id=\"title-{{ task?.id }}\"\n name=\"title-{{ task?.id }}\"\n placeholder=\"Input title\"\n />\n </label>\n <button\n *ngIf=\"task?.state !== 'TASK_ARCHIVED'\"\n class=\"pin-button\"\n [attr.aria-label]=\"'pinTask-' + task.id\"\n (click)=\"onPin(task.id)\"\n >\n <span class=\"icon-star\"></span>\n </button>\n</div>\n",
"templateUrl": [],
"viewProviders": [],
"inputsClass": [
Expand All @@ -370,8 +411,8 @@
"deprecationMessage": "",
"rawdescription": "\n\nThe shape of the task object\n",
"description": "<p>The shape of the task object</p>\n",
"line": 23,
"type": "any",
"line": 51,
"type": "Task",
"decorators": []
}
],
Expand All @@ -381,15 +422,15 @@
"defaultValue": "new EventEmitter<Event>()",
"deprecated": false,
"deprecationMessage": "",
"line": 31,
"line": 59,
"type": "EventEmitter"
},
{
"name": "onPinTask",
"defaultValue": "new EventEmitter<Event>()",
"deprecated": false,
"deprecationMessage": "",
"line": 27,
"line": 55,
"type": "EventEmitter"
}
],
Expand All @@ -402,7 +443,7 @@
"description": "",
"rawdescription": "\n",
"type": "component",
"sourceCode": "import { Component, Input, Output, EventEmitter } from '@angular/core';\n\n@Component({\n selector: 'app-task',\n template: `\n <div class=\"list-item\">\n <label [attr.aria-label]=\"task.title + ''\" for=\"title\">\n <input\n type=\"text\"\n [value]=\"task.title\"\n readonly=\"true\"\n id=\"title\"\n name=\"title\"\n />\n </label>\n </div>\n `,\n})\nexport default class TaskComponent {\n /**\n * The shape of the task object\n */\n @Input() task: any;\n\n // tslint:disable-next-line: no-output-on-prefix\n @Output()\n onPinTask = new EventEmitter<Event>();\n\n // tslint:disable-next-line: no-output-on-prefix\n @Output()\n onArchiveTask = new EventEmitter<Event>();\n}\n",
"sourceCode": "import { Component, Input, Output, EventEmitter } from '@angular/core';\nimport { Task } from '../models/task.model';\n\n@Component({\n selector: 'app-task',\n template: `\n <div class=\"list-item {{ task?.state }}\">\n <label\n [attr.aria-label]=\"'archiveTask-' + task.id\"\n for=\"checked-{{ task?.id }}\"\n class=\"checkbox\"\n >\n <input\n type=\"checkbox\"\n disabled=\"true\"\n [defaultChecked]=\"task?.state === 'TASK_ARCHIVED'\"\n name=\"checked-{{ task?.id }}\"\n id=\"checked-{{ task?.id }}\"\n />\n <span class=\"checkbox-custom\" (click)=\"onArchive(task.id)\"></span>\n </label>\n <label\n [attr.aria-label]=\"task.title + ''\"\n for=\"title-{{ task?.id }}\"\n class=\"title\"\n >\n <input\n type=\"text\"\n [value]=\"task.title\"\n readonly=\"true\"\n id=\"title-{{ task?.id }}\"\n name=\"title-{{ task?.id }}\"\n placeholder=\"Input title\"\n />\n </label>\n <button\n *ngIf=\"task?.state !== 'TASK_ARCHIVED'\"\n class=\"pin-button\"\n [attr.aria-label]=\"'pinTask-' + task.id\"\n (click)=\"onPin(task.id)\"\n >\n <span class=\"icon-star\"></span>\n </button>\n </div>\n `,\n})\nexport default class TaskComponent {\n /**\n * The shape of the task object\n */\n @Input() task?: Task;\n\n // tslint:disable-next-line: no-output-on-prefix\n @Output()\n onPinTask = new EventEmitter<Event>();\n\n // tslint:disable-next-line: no-output-on-prefix\n @Output()\n onArchiveTask = new EventEmitter<Event>();\n\n /**\n * @ignore\n * Component method to trigger the onPin event\n * @param id string\n */\n onPin(id: any) {\n this.onPinTask.emit(id);\n }\n /**\n * @ignore\n * Component method to trigger the onArchive event\n * @param id string\n */\n onArchive(id: any) {\n this.onArchiveTask.emit(id);\n }\n}\n",
"assetsDirs": [],
"styleUrlsData": "",
"stylesData": ""
Expand Down Expand Up @@ -560,21 +601,21 @@
"name": "meta",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "src/stories/Header.stories.ts",
"file": "src/stories/Button.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "Meta<Header>",
"defaultValue": "{\n title: 'Example/Header',\n component: Header,\n // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/angular/writing-docs/autodocs\n tags: ['autodocs'],\n render: (args) => ({ props: args }),\n decorators: [\n moduleMetadata({\n declarations: [Button],\n imports: [CommonModule],\n }),\n ],\n parameters: {\n // More on how to position stories at: https://storybook.js.org/docs/angular/configure/story-layout\n layout: 'fullscreen',\n },\n}"
"type": "Meta<Button>",
"defaultValue": "{\n title: 'Example/Button',\n component: Button,\n tags: ['autodocs'],\n render: (args: Button) => ({\n props: {\n backgroundColor: null,\n ...args,\n },\n }),\n argTypes: {\n backgroundColor: {\n control: 'color',\n },\n },\n}"
},
{
"name": "meta",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "src/stories/Button.stories.ts",
"file": "src/stories/Header.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "Meta<Button>",
"defaultValue": "{\n title: 'Example/Button',\n component: Button,\n tags: ['autodocs'],\n render: (args: Button) => ({\n props: {\n backgroundColor: null,\n ...args,\n },\n }),\n argTypes: {\n backgroundColor: {\n control: 'color',\n },\n },\n}"
"type": "Meta<Header>",
"defaultValue": "{\n title: 'Example/Header',\n component: Header,\n // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/angular/writing-docs/autodocs\n tags: ['autodocs'],\n render: (args) => ({ props: args }),\n decorators: [\n moduleMetadata({\n declarations: [Button],\n imports: [CommonModule],\n }),\n ],\n parameters: {\n // More on how to position stories at: https://storybook.js.org/docs/angular/configure/story-layout\n layout: 'fullscreen',\n },\n}"
},
{
"name": "meta",
Expand Down Expand Up @@ -653,8 +694,8 @@
"name": "Story",
"ctype": "miscellaneous",
"subtype": "typealias",
"rawtype": "StoryObj<Header>",
"file": "src/stories/Header.stories.ts",
"rawtype": "StoryObj<Button>",
"file": "src/stories/Button.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"description": "",
Expand All @@ -664,8 +705,8 @@
"name": "Story",
"ctype": "miscellaneous",
"subtype": "typealias",
"rawtype": "StoryObj<Button>",
"file": "src/stories/Button.stories.ts",
"rawtype": "StoryObj<Header>",
"file": "src/stories/Header.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"description": "",
Expand Down Expand Up @@ -904,26 +945,26 @@
"groupedFunctions": {},
"groupedEnumerations": {},
"groupedTypeAliases": {
"src/stories/Header.stories.ts": [
"src/stories/Button.stories.ts": [
{
"name": "Story",
"ctype": "miscellaneous",
"subtype": "typealias",
"rawtype": "StoryObj<Header>",
"file": "src/stories/Header.stories.ts",
"rawtype": "StoryObj<Button>",
"file": "src/stories/Button.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"description": "",
"kind": 177
}
],
"src/stories/Button.stories.ts": [
"src/stories/Header.stories.ts": [
{
"name": "Story",
"ctype": "miscellaneous",
"subtype": "typealias",
"rawtype": "StoryObj<Button>",
"file": "src/stories/Button.stories.ts",
"rawtype": "StoryObj<Header>",
"file": "src/stories/Header.stories.ts",
"deprecated": false,
"deprecationMessage": "",
"description": "",
Expand Down Expand Up @@ -1041,6 +1082,15 @@
"coverageCount": "0/1",
"status": "low"
},
{
"filePath": "src/app/models/task.model.ts",
"type": "interface",
"linktype": "interface",
"name": "Task",
"coveragePercent": 0,
"coverageCount": "0/4",
"status": "low"
},
{
"filePath": "src/environments/environment.prod.ts",
"type": "variable",
Expand Down
55 changes: 50 additions & 5 deletions src/app/components/task.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,54 @@
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Task } from '../models/task.model';

@Component({
selector: 'app-task',
template: `
<div class="list-item">
<label [attr.aria-label]="task.title + ''" for="title">
<div class="list-item {{ task?.state }}">
<label
[attr.aria-label]="'archiveTask-' + task.id"
for="checked-{{ task?.id }}"
class="checkbox"
>
<input
type="checkbox"
disabled="true"
[defaultChecked]="task?.state === 'TASK_ARCHIVED'"
name="checked-{{ task?.id }}"
id="checked-{{ task?.id }}"
/>
<span class="checkbox-custom" (click)="onArchive(task.id)"></span>
</label>
<label
[attr.aria-label]="task.title + ''"
for="title-{{ task?.id }}"
class="title"
>
<input
type="text"
[value]="task.title"
readonly="true"
id="title"
name="title"
id="title-{{ task?.id }}"
name="title-{{ task?.id }}"
placeholder="Input title"
/>
</label>
<button
*ngIf="task?.state !== 'TASK_ARCHIVED'"
class="pin-button"
[attr.aria-label]="'pinTask-' + task.id"
(click)="onPin(task.id)"
>
<span class="icon-star"></span>
</button>
</div>
`,
})
export default class TaskComponent {
/**
* The shape of the task object
*/
@Input() task: any;
@Input() task?: Task;

// tslint:disable-next-line: no-output-on-prefix
@Output()
Expand All @@ -29,4 +57,21 @@ export default class TaskComponent {
// tslint:disable-next-line: no-output-on-prefix
@Output()
onArchiveTask = new EventEmitter<Event>();

/**
* @ignore
* Component method to trigger the onPin event
* @param id string
*/
onPin(id: any) {
this.onPinTask.emit(id);
}
/**
* @ignore
* Component method to trigger the onArchive event
* @param id string
*/
onArchive(id: any) {
this.onArchiveTask.emit(id);
}
}
5 changes: 5 additions & 0 deletions src/app/models/task.model.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export interface Task {
id?: string;
title?: string;
state?: string;
}

0 comments on commit ce0c7c8

Please sign in to comment.