@zywave/notes-widget - npm Package Compare versions

Comparing version 1.0.0-rc.12 to 1.0.0-rc.18

dist/api/apiClient.d.ts

@@ -1,8 +0,7 @@
-import { Note, NotePolicy, NoteCategory, CreateNoteRequest } from '../types';
+import { Note, NoteCategory, CreateNoteRequest } from '../types';
 export declare const apiClient: {
     loadNotes(): Promise<Note[]>;
     loadNoteCategories(): Promise<NoteCategory[]>;
-    loadNotePolicies(): Promise<NotePolicy[]>;
     createNote(newNote: CreateNoteRequest): Promise<Note>;
 };
 //# sourceMappingURL=apiClient.d.ts.map

dist/api/apiClient.js

 var _a;
-import { mockNotePolicies, mockNotes, mockNoteCategories } from '../utils/mocks';
+import { mockNotes, mockNoteCategories } from '../utils/mocks';
 const zywaveApiClient = ((_a = window === null || window === void 0 ? void 0 : window.zywave) === null || _a === void 0 ? void 0 : _a.ZywaveApiClient) &&
     new window.zywave.ZywaveApiClient({ proxy: 'ams' });
-const apiUrl = 'api/v2.0/';
+const apiUrl = 'api/notes/v2.0';
 const defaultOptions = {
     headers: {
-        Accept: 'application/json',
+        'Accept': 'application/json',
         'Content-Type': 'application/json',
@@ -18,7 +18,11 @@ },
         }
-        const response = await zywaveApiClient.fetch(`${apiUrl}/notes`, {
+        await zywaveApiClient.fetch(`${apiUrl}/notes`, {
             ...defaultOptions,
             method: 'GET',
+        })
+            .then((response) => response.json())
+            .then((data) => {
+            return data.items;
         });
-        return response.json();
+        return new Array;
     },
@@ -35,12 +39,2 @@ async loadNoteCategories() {
     },
-    async loadNotePolicies() {
-        if (!zywaveApiClient) {
-            return mockApiCall(mockNotePolicies);
-        }
-        const response = await zywaveApiClient.fetch(`${apiUrl}/policies`, {
-            ...defaultOptions,
-            method: 'GET',
-        });
-        return response.json();
-    },
     async createNote(newNote) {
@@ -54,3 +48,2 @@ var _a;
                 categoryName: (_a = mockNoteCategories.find((category) => category.categoryId === newNote.categoryId)) === null || _a === void 0 ? void 0 : _a.name,
-                policy: mockNotePolicies.find((policy) => policy.policyId === newNote.policyId),
             }, 500);
@@ -57,0 +50,0 @@ }

dist/components/note-dialog.d.ts

@@ -5,9 +5,10 @@ import { LitElement } from 'lit';
     static styles: import("lit").CSSResult;
+    accountId: number;
     private _categories;
-    private _policies;
     private _noteCategory;
-    private _notePolicy;
     private _noteText;
     private _isAlertActive;
     private _alertDate;
+    private _showNoteRequired;
+    private _showCategoryRequired;
     get _isNoteDataValid(): boolean;
@@ -18,7 +19,4 @@ private _dialog;
     render(): unknown;
-    private handleChangeNotePolicy;
     private handleChangeNoteCategory;
     private handleChangeNoteText;
-    private handleChangeAlertActive;
-    private handleChangeAlertDate;
     private handleSaveNote;
@@ -25,0 +23,0 @@ private clearFields;

dist/components/note-dialog.js

@@ -7,8 +7,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { LitElement, html, css } from 'lit';
-import { customElement, query, state } from 'lit/decorators.js';
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, query, state, property } from 'lit/decorators.js';
 import { map } from 'lit/directives/map.js';
 import './form-field';
 import { apiClient } from '../api/apiClient';
-import { getFormattedDateString, getFormattedTodayString } from '../utils/date';
+import { getFormattedTodayString } from '../utils/date';
 let NoteDialog = class NoteDialog extends LitElement {
@@ -18,9 +18,9 @@ constructor() {
         this._categories = [];
-        this._policies = [];
         this._noteText = '';
         this._isAlertActive = false;
         this._alertDate = getFormattedTodayString();
+        this._showNoteRequired = false;
+        this._showCategoryRequired = false;
         this.clearFields = () => {
             this._noteCategory = null;
-            this._notePolicy = null;
             this._noteText = '';
@@ -42,8 +42,6 @@ this._isAlertActive = false;
         var _a;
-        const [categories, policies] = await Promise.all([
+        const [categories] = await Promise.all([
             apiClient.loadNoteCategories(),
-            apiClient.loadNotePolicies(),
         ]);
-        this._categories = categories;
-        this._policies = policies;
+        this._categories = categories.filter(x => x.isActive);
         (_a = this._dialog) === null || _a === void 0 ? void 0 : _a.addEventListener('close', this.clearFields);
@@ -56,3 +54,3 @@ }
     render() {
-        var _a, _b, _c;
+        var _a, _b;
         return html `
@@ -78,21 +76,7 @@ <zui-dialog id="add-note-dialog" class="small">
           </zui-select-dropdown>
+          ${(this._showCategoryRequired) ?
+            html `<span class="error-message">
+                Category is required
+              </span>` : nothing}
         </form-field>
-
-        <form-field label="Policy">
-          <zui-select-dropdown
-            data-autom="note-dialog_dropdown_select-note-policy"
-            placeholder="Select policy" 
-            searchable 
-            debounce="300"
-            .value=${(_b = this._notePolicy) === null || _b === void 0 ? void 0 : _b.policyId}
-            @change=${this.handleChangeNotePolicy}
-          >
-            ${map(this._policies, (policy) => html `
-              <zui-option 
-                value=${policy.policyId}
-                data-autom=${`note-dialog_dropdown_option-${policy.policyName}`}
-              >${policy.policyId} ${policy.policyName} ${getFormattedDateString(policy.effectiveDate, '/')} ${getFormattedDateString(policy.expirationDate, '/')}</zui-option>
-            `)}
-          </zui-select-dropdown>
-        </form-field>
         
@@ -102,30 +86,14 @@ <form-field label="Note" .required=${true}>
             data-autom="note-dialog_textarea_select-note-text"
-            placeholder="Enter the note here" 
+            placeholder=${((_b = this._noteCategory) === null || _b === void 0 ? void 0 : _b.defaultNote) ? this._noteCategory.defaultNote : "Enter note here"}
             minLength=${1}
             maxLength=${10000}
             .value=${this._noteText}
-            @change=${this.handleChangeNoteText}
+            @input=${this.handleChangeNoteText}
           ></zui-textarea>
+          ${(this._showNoteRequired) ?
+            html `<span class="error-message">
+                Description is required
+              </span>` : nothing}
+
         </form-field>
-        
-        <form-field label="Enable alert" .inline=${true}>
-          <zui-toggle
-            data-autom="note-dialog_toggle_enable-alert"
-            .checked=${this._isAlertActive}
-            .disabled=${(_c = this._noteCategory) === null || _c === void 0 ? void 0 : _c.isConfidential}
-            @change=${this.handleChangeAlertActive}
-          ></zui-toggle>
-        </form-field>
-        
-        <form-field label="Alert date">
-          <zui-input 
-            data-autom="note-dialog_input_alert-date"
-            type="date" 
-            class="small"
-            min=${getFormattedTodayString()}
-            .value=${this._alertDate}
-            .disabled=${!this._isAlertActive}
-            @change=${this.handleChangeAlertDate}
-          ></zui-input>
-        </form-field>
 
@@ -149,7 +117,12 @@ <zui-button
     }
-    handleChangeNotePolicy(event) {
-        this._notePolicy = this._policies.find(policy => policy.policyId === +event.detail);
-    }
     handleChangeNoteCategory(event) {
         const selectedCategory = this._categories.find(category => category.categoryId === +event.detail);
+        if (selectedCategory) {
+            event.target.classList.remove('is-invalid');
+            this._showCategoryRequired = false;
+        }
+        else {
+            event.target.classList.add('is-invalid');
+            this._showCategoryRequired = true;
+        }
         this._noteCategory = selectedCategory;
@@ -162,19 +135,20 @@ if (selectedCategory === null || selectedCategory === void 0 ? void 0 : selectedCategory.isConfidential) {
     handleChangeNoteText(event) {
-        this._noteText = event.detail;
+        this._noteText = event.target.value;
+        if (this._noteText.length == 0) {
+            this._showNoteRequired = true;
+            event.target.classList.add('is-invalid');
+        }
+        else {
+            this._showNoteRequired = false;
+            event.target.classList.remove('is-invalid');
+        }
     }
-    handleChangeAlertActive(event) {
+    async handleSaveNote() {
         var _a;
-        this._isAlertActive = (_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.checked;
-    }
-    handleChangeAlertDate(event) {
-        this._alertDate = event.detail;
-    }
-    async handleSaveNote() {
-        var _a, _b;
         const { isConfidential = false } = this._noteCategory;
-        const isAlertEnabled = isConfidential ? false : this._isAlertActive;
-        const alertDate = isAlertEnabled ? this._alertDate : null;
+        const isAlertEnabled = false;
+        const alertDate = null;
         const newNote = {
+            accountId: this.accountId,
             categoryId: this._noteCategory.categoryId,
-            policyId: (_a = this._notePolicy) === null || _a === void 0 ? void 0 : _a.policyId,
             text: this._noteText,
@@ -185,3 +159,3 @@ isConfidential,
         };
-        (_b = this._dialog) === null || _b === void 0 ? void 0 : _b.close();
+        (_a = this._dialog) === null || _a === void 0 ? void 0 : _a.close();
         const createdNote = await apiClient.createNote(newNote);
@@ -195,2 +169,10 @@ if (createdNote) {
         var _a;
+        this._showCategoryRequired = false;
+        this._showNoteRequired = false;
+        for (const dropdown of this.shadowRoot.querySelectorAll('zui-select-dropdown')) {
+            dropdown.classList.remove("is-invalid");
+        }
+        for (const textArea of this.shadowRoot.querySelectorAll('zui-textarea')) {
+            textArea.classList.remove("is-invalid");
+        }
         (_a = this._dialog) === null || _a === void 0 ? void 0 : _a.open();
@@ -205,4 +187,13 @@ }
     }
+
+    .error-message {
+        margin-top: inherit;
+        color: red;
+    }
+
   `;
 __decorate([
+    property()
+], NoteDialog.prototype, "accountId", void 0);
+__decorate([
     state()
@@ -212,11 +203,5 @@ ], NoteDialog.prototype, "_categories", void 0);
     state()
-], NoteDialog.prototype, "_policies", void 0);
-__decorate([
-    state()
 ], NoteDialog.prototype, "_noteCategory", void 0);
 __decorate([
     state()
-], NoteDialog.prototype, "_notePolicy", void 0);
-__decorate([
-    state()
 ], NoteDialog.prototype, "_noteText", void 0);
@@ -231,2 +216,8 @@ __decorate([
     state()
+], NoteDialog.prototype, "_showNoteRequired", void 0);
+__decorate([
+    state()
+], NoteDialog.prototype, "_showCategoryRequired", void 0);
+__decorate([
+    state()
 ], NoteDialog.prototype, "_isNoteDataValid", null);
@@ -233,0 +224,0 @@ __decorate([

dist/notes-widget.d.ts

@@ -7,2 +7,4 @@ import { LitElement } from 'lit';
     static styles: import("lit").CSSResult;
+    private accountId;
+    private numberOfNotes;
     private _expandedNotes;
@@ -9,0 +11,0 @@ private _addNoteDialog;

dist/notes-widget.js

@@ -8,3 +8,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { LitElement, html, css } from 'lit';
-import { customElement, state, query } from 'lit/decorators.js';
+import { property, customElement, state, query } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
@@ -19,2 +19,4 @@ import { Task } from '@lit-labs/task';
         super(...arguments);
+        this.accountId = 0;
+        this.numberOfNotes = 4;
         this._expandedNotes = new Set();
@@ -42,3 +44,6 @@ this._loadNotesTask = new Task(this, async () => {
             this._loadNotesTask = new Task(this, () => {
-                this._notes = [event.detail, ...this._notes];
+                this.showNotification("success", "Success", "Note created successfully");
+                var newLength = this._notes.unshift(event.detail);
+                if (newLength > this.numberOfNotes)
+                    this._notes.pop();
                 return this._notes;
@@ -58,3 +63,3 @@ }, () => []);
         return html `
-      <note-dialog></note-dialog>
+      <note-dialog .accountId=${this.accountId}></note-dialog>
       <zui-table>
@@ -165,2 +170,8 @@ ${this.renderTopbar()}
 __decorate([
+    property()
+], NotesWidget.prototype, "accountId", void 0);
+__decorate([
+    property()
+], NotesWidget.prototype, "numberOfNotes", void 0);
+__decorate([
     state()
@@ -174,2 +185,5 @@ ], NotesWidget.prototype, "_expandedNotes", void 0);
 ], NotesWidget.prototype, "_loadNotesTask", void 0);
+__decorate([
+    state()
+], NotesWidget.prototype, "_notes", void 0);
 NotesWidget = __decorate([
@@ -176,0 +190,0 @@ customElement('notes-widget')

dist/types.d.ts

@@ -33,3 +33,2 @@ declare global {
     categoryName: string;
-    policy?: NotePolicy;
     text: string;
@@ -40,8 +39,2 @@ isConfidential: boolean;
 }
-export interface NotePolicy {
-    policyId: number;
-    policyName: string;
-    effectiveDate: string;
-    expirationDate: string;
-}
 export interface NoteCategory {
@@ -55,4 +48,4 @@ categoryId: number;
 export interface CreateNoteRequest {
+    accountId: number;
     categoryId: number;
-    policyId: number;
     text: string;
@@ -59,0 +52,0 @@ isConfidential: boolean;

dist/utils/mocks.d.ts

@@ -1,5 +0,4 @@
-import { Note, NotePolicy, NoteCategory } from '../types';
-export declare const mockNotePolicies: NotePolicy[];
+import { Note, NoteCategory } from '../types';
 export declare const mockNoteCategories: NoteCategory[];
 export declare const mockNotes: Note[];
 //# sourceMappingURL=mocks.d.ts.map

dist/utils/mocks.js

@@ -1,69 +0,1 @@
-export const mockNotePolicies = [
-    {
-        policyId: 14614,
-        policyName: 'Test dental policy',
-        effectiveDate: '2022-09-01T04:00:00+00:00',
-        expirationDate: '2022-09-01T04:00:00+00:00',
-    },
-    {
-        policyId: 14615,
-        policyName: 'Test vision policy',
-        effectiveDate: '2022-09-01T04:00:00+00:00',
-        expirationDate: '2022-09-01T04:00:00+00:00',
-    },
-    {
-        policyId: 14616,
-        policyName: 'Test completed logic',
-        effectiveDate: '2022-09-01T04:00:00+00:00',
-        expirationDate: '2022-09-01T04:00:00+00:00',
-    },
-    {
-        policyId: 14617,
-        policyName: 'Test 123152',
-        effectiveDate: '2022-08-01T04:00:00+00:00',
-        expirationDate: '2022-08-01T04:00:00+00:00',
-    },
-    {
-        policyId: 14618,
-        policyName: 'agsdrwre',
-        effectiveDate: '2022-08-01T04:00:00+00:00',
-        expirationDate: '2022-08-01T04:00:00+00:00',
-    },
-    {
-        policyId: 14619,
-        policyName: 'Test save policy id',
-        effectiveDate: '2022-08-01T04:00:00+00:00',
-        expirationDate: '2022-08-01T04:00:00+00:00',
-    },
-    {
-        policyId: 14620,
-        policyName: 'Test validation rules',
-        effectiveDate: '2022-08-01T04:00:00+00:00',
-        expirationDate: '2022-08-01T04:00:00+00:00',
-    },
-    {
-        policyId: 14621,
-        policyName: 'Test optional expiration date',
-        effectiveDate: '2022-08-01T04:00:00+00:00',
-        expirationDate: '2022-08-01T04:00:00+00:00',
-    },
-    {
-        policyId: 14623,
-        policyName: 'Test auto dates',
-        effectiveDate: '2022-08-01T04:00:00+00:00',
-        expirationDate: '2022-08-01T04:00:00+00:00',
-    },
-    {
-        policyId: 14625,
-        policyName: 'In product demo',
-        effectiveDate: '2022-09-01T04:00:00+00:00',
-        expirationDate: '2022-09-01T04:00:00+00:00',
-    },
-    {
-        policyId: 14628,
-        policyName: 'Test date validation',
-        effectiveDate: '2022-09-01T04:00:00+00:00',
-        expirationDate: '2022-09-01T04:00:00+00:00',
-    },
-];
 export const mockNoteCategories = [
@@ -73,3 +5,3 @@ {
         name: 'Administrative',
-        defaultNote: null,
+        defaultNote: "Custom default note",
         isActive: true,
@@ -236,3 +168,2 @@ isConfidential: false,
         categoryName: 'General',
-        policy: mockNotePolicies[0],
         text: 'Contact the client tomorrow with an up-sale proposal. This is a large message about the proposal. And another long sentence is here.',
@@ -246,3 +177,2 @@ isConfidential: true,
         categoryName: 'Policy Review',
-        policy: mockNotePolicies[1],
         text: 'Contact the client tomorrow sfsfsdfsdfsshbfjshdbf hjdsjfhbsdhjf jsdjhbfjhsdbf jhdsbfjhsbdjhfbjhdsbfjhds sdjbfjhsdbjfhds',
@@ -256,3 +186,2 @@ isConfidential: false,
         categoryName: 'Cancellation',
-        policy: mockNotePolicies[2],
         text: 'Contact the client tomorrow sfsfsdfsdfsshbfjshdbf hjdsjfhbsdhjf jsdjhbfjhsdbf jhdsbfjhsbdjhfbjhdsbfjhds sdjbfjhsdbjfhds',
@@ -259,0 +188,0 @@ isConfidential: false,

package.json

 {
   "name": "@zywave/notes-widget",
-  "version": "1.0.0-rc.12",
+  "version": "1.0.0-rc.18",
   "description": "A custom web component for notes functionality through a widget",
@@ -13,3 +13,3 @@ "main": "dist/notes-widget.js",
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && npm run rollup",
     "build:watch": "tsc --watch",
@@ -16,0 +16,0 @@ "clean": "rimraf dist/notes-widget.{d.ts,d.ts.map,js,js.map}",

src/api/apiClient.ts

@@ -1,3 +0,3 @@
-import {Note, NotePolicy, NoteCategory, CreateNoteRequest} from '../types';
-import {mockNotePolicies, mockNotes, mockNoteCategories} from '../utils/mocks';
+import {Note, NoteCategory, CreateNoteRequest} from '../types';
+import {mockNotes, mockNoteCategories} from '../utils/mocks';
 
@@ -7,6 +7,6 @@ const zywaveApiClient =
   new window.zywave.ZywaveApiClient({proxy: 'ams'});
-const apiUrl = 'api/v2.0/';
+const apiUrl = 'api/notes/v2.0';
 const defaultOptions = {
   headers: {
-    Accept: 'application/json',
+    'Accept': 'application/json',
     'Content-Type': 'application/json',
@@ -23,7 +23,12 @@ },
 
-    const response = await zywaveApiClient.fetch(`${apiUrl}/notes`, {
+    await zywaveApiClient.fetch(`${apiUrl}/notes`, {
       ...defaultOptions,
       method: 'GET',
-    });
-    return response.json() as Note[];
+    })
+    .then((response: { json: () => any; }) => response.json())
+    .then((data: { items: Note[]; }) => {
+      return data.items}
+      );
+
+    return new Array<Note>;
   },
@@ -35,3 +40,2 @@
     }
-
     const response = await zywaveApiClient.fetch(`${apiUrl}/categories`, {
@@ -44,14 +48,2 @@ ...defaultOptions,
 
-  async loadNotePolicies(): Promise<NotePolicy[]> {
-    if (!zywaveApiClient) {
-      return mockApiCall(mockNotePolicies);
-    }
-
-    const response = await zywaveApiClient.fetch(`${apiUrl}/policies`, {
-      ...defaultOptions,
-      method: 'GET',
-    });
-    return response.json() as NotePolicy[];
-  },
-
   async createNote(newNote: CreateNoteRequest): Promise<Note> {
@@ -67,5 +59,2 @@ if (!zywaveApiClient) {
           )?.name,
-          policy: mockNotePolicies.find(
-            (policy) => policy.policyId === newNote.policyId
-          ),
         },
@@ -72,0 +61,0 @@ 500

src/components/note-dialog.ts

@@ -1,3 +0,3 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, query, state } from 'lit/decorators.js';
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, query, state, property } from 'lit/decorators.js';
 import { map } from 'lit/directives/map.js';
@@ -8,9 +8,7 @@
 import { 
-  InputChangeEvent, 
-  NotePolicy, NoteCategory, 
+  NoteCategory, 
   SelectDropdownChangeEvent, 
-  ToggleChangeEvent, 
   CreateNoteRequest 
 } from '../types';
-import { getFormattedDateString, getFormattedTodayString } from '../utils/date';
+import {  getFormattedTodayString } from '../utils/date';
 
@@ -25,13 +23,18 @@ @customElement('note-dialog')
     }
+
+    .error-message {
+        margin-top: inherit;
+        color: red;
+    }
+
   `;
 
+  @property()
+  accountId: number;
+
   @state()
   private _categories: NoteCategory[] = [];
   @state()
-  private _policies: NotePolicy[] = [];
-  @state()
   private _noteCategory: NoteCategory;
   @state()
-  private _notePolicy: NotePolicy;
-  @state()
   private _noteText = '';
@@ -43,2 +46,6 @@ @state()
   @state()
+  private _showNoteRequired = false;
+  @state()
+  private _showCategoryRequired = false;
+  @state()
   get _isNoteDataValid() {
@@ -55,11 +62,7 @@ const isValid = !!this._noteCategory
   override async firstUpdated(): Promise<void> {
-    const [categories, policies] = await Promise.all([
+    const [categories] = await Promise.all([
       apiClient.loadNoteCategories(),
-      apiClient.loadNotePolicies(),
     ]);
 
-    
-    this._categories = categories;
-    this._policies = policies;
-
+    this._categories = categories.filter(x => x.isActive);
     this._dialog?.addEventListener('close', this.clearFields);
@@ -93,21 +96,8 @@ }
           </zui-select-dropdown>
+          ${(this._showCategoryRequired) ? 
+              html `<span class="error-message">
+                Category is required
+              </span>`: nothing
+              }
         </form-field>
-
-        <form-field label="Policy">
-          <zui-select-dropdown
-            data-autom="note-dialog_dropdown_select-note-policy"
-            placeholder="Select policy" 
-            searchable 
-            debounce="300"
-            .value=${this._notePolicy?.policyId}
-            @change=${this.handleChangeNotePolicy}
-          >
-            ${map(this._policies, (policy: NotePolicy) => html`
-              <zui-option 
-                value=${policy.policyId}
-                data-autom=${`note-dialog_dropdown_option-${policy.policyName}`}
-              >${policy.policyId} ${policy.policyName} ${getFormattedDateString(policy.effectiveDate, '/')} ${getFormattedDateString(policy.expirationDate, '/')}</zui-option>
-            `)}
-          </zui-select-dropdown>
-        </form-field>
         
@@ -117,30 +107,15 @@ <form-field label="Note" .required=${true}>
             data-autom="note-dialog_textarea_select-note-text"
-            placeholder="Enter the note here" 
+            placeholder=${this._noteCategory?.defaultNote ? this._noteCategory.defaultNote : "Enter note here"}
             minLength=${1}
             maxLength=${10000}
             .value=${this._noteText}
-            @change=${this.handleChangeNoteText}
+            @input=${this.handleChangeNoteText}
           ></zui-textarea>
+          ${(this._showNoteRequired) ? 
+              html `<span class="error-message">
+                Description is required
+              </span>`: nothing
+              }
+
         </form-field>
-        
-        <form-field label="Enable alert" .inline=${true}>
-          <zui-toggle
-            data-autom="note-dialog_toggle_enable-alert"
-            .checked=${this._isAlertActive}
-            .disabled=${this._noteCategory?.isConfidential}
-            @change=${this.handleChangeAlertActive}
-          ></zui-toggle>
-        </form-field>
-        
-        <form-field label="Alert date">
-          <zui-input 
-            data-autom="note-dialog_input_alert-date"
-            type="date" 
-            class="small"
-            min=${getFormattedTodayString()}
-            .value=${this._alertDate}
-            .disabled=${!this._isAlertActive}
-            @change=${this.handleChangeAlertDate}
-          ></zui-input>
-        </form-field>
 
@@ -165,8 +140,15 @@ <zui-button
 
-  private handleChangeNotePolicy(event: SelectDropdownChangeEvent): void {
-    this._notePolicy = this._policies.find(policy => policy.policyId === +event.detail);
-  }
-
   private handleChangeNoteCategory(event: SelectDropdownChangeEvent): void {
     const selectedCategory = this._categories.find(category => category.categoryId === +event.detail);
+    
+    if(selectedCategory) {
+      (event.target as HTMLSelectElement).classList.remove('is-invalid');
+      this._showCategoryRequired = false;
+
+    }
+    else {
+      (event.target as HTMLSelectElement).classList.add('is-invalid');
+      this._showCategoryRequired = true;
+    }
+
     this._noteCategory = selectedCategory;
@@ -179,21 +161,22 @@ if(selectedCategory?.isConfidential) {
 
-  private handleChangeNoteText(event: InputChangeEvent): void {
-    this._noteText = event.detail;
-  }
+  private handleChangeNoteText(event: Event): void {
+    this._noteText = (event.target as HTMLInputElement).value;
 
-  private handleChangeAlertActive(event: ToggleChangeEvent): void {
-    this._isAlertActive = event?.detail?.checked;
+    if(this._noteText.length == 0) {
+      this._showNoteRequired = true;
+      (event.target as HTMLInputElement).classList.add('is-invalid');
+    }
+    else {
+      this._showNoteRequired = false;
+      (event.target as HTMLInputElement).classList.remove('is-invalid')
+    }
   }
-  
-  private handleChangeAlertDate(event: InputChangeEvent): void {
-    this._alertDate = event.detail;
-  }
 
   private async handleSaveNote(): Promise<void> {
     const {isConfidential = false} = this._noteCategory;
-    const isAlertEnabled = isConfidential ? false : this._isAlertActive;
-    const alertDate = isAlertEnabled ? this._alertDate : null;
+    const isAlertEnabled = false;
+    const alertDate: any = null;
     const newNote: CreateNoteRequest = {
+      accountId: this.accountId,
       categoryId: this._noteCategory.categoryId,
-      policyId: this._notePolicy?.policyId,
       text: this._noteText,
@@ -216,3 +199,2 @@ isConfidential,
     this._noteCategory = null;
-    this._notePolicy = null;
     this._noteText = '';
@@ -224,6 +206,17 @@ this._isAlertActive = false;
       (dropdown as any)?.clear();
-    } 
+    }
   }
 
   open(): void {
+    this._showCategoryRequired = false;
+    this._showNoteRequired = false;
+
+    for (const dropdown of this.shadowRoot.querySelectorAll('zui-select-dropdown')) {
+      dropdown.classList.remove("is-invalid")
+    }
+
+    for (const textArea of this.shadowRoot.querySelectorAll('zui-textarea')) {
+      textArea.classList.remove("is-invalid")
+    }
+
     this._dialog?.open();
@@ -230,0 +223,0 @@ }

src/notes-widget.ts

@@ -43,2 +43,8 @@ import { LitElement, html, css, nothing } from 'lit';
   `;
+
+  @property()
+  private accountId = 0;
+
+  @property()
+  private numberOfNotes = 4;
   
@@ -66,2 +72,3 @@ @state()
 
+  @state()
   private _notes: Note[] = [];
@@ -79,3 +86,3 @@
     return html`
-      <note-dialog></note-dialog>
+      <note-dialog .accountId=${this.accountId}></note-dialog>
       <zui-table>
@@ -174,3 +181,8 @@ ${this.renderTopbar()}
       () => {
-        this._notes = [event.detail, ...this._notes];
+        this.showNotification("success", "Success", "Note created successfully");
+
+        var newLength = this._notes.unshift(event.detail);
+        if(newLength > this.numberOfNotes)
+          this._notes.pop();
+        
         return this._notes;
@@ -177,0 +189,0 @@ },

src/types.ts

@@ -39,3 +39,2 @@ declare global {
   categoryName: string;
-  policy?: NotePolicy;
   text: string;
@@ -47,9 +46,2 @@ isConfidential: boolean;
 
-export interface NotePolicy {
-  policyId: number;
-  policyName: string;
-  effectiveDate: string;
-  expirationDate: string;
-}
-
 export interface NoteCategory {
@@ -64,4 +56,4 @@ categoryId: number;
 export interface CreateNoteRequest {
+  accountId: number;
   categoryId: number;
-  policyId: number;
   text: string;
@@ -68,0 +60,0 @@ isConfidential: boolean;

src/utils/mocks.ts

@@ -1,72 +0,3 @@
-import {Note, NotePolicy, NoteCategory} from '../types';
+import {Note, NoteCategory} from '../types';
 
-export const mockNotePolicies: NotePolicy[] = [
-  {
-    policyId: 14614,
-    policyName: 'Test dental policy',
-    effectiveDate: '2022-09-01T04:00:00+00:00',
-    expirationDate: '2022-09-01T04:00:00+00:00',
-  },
-  {
-    policyId: 14615,
-    policyName: 'Test vision policy',
-    effectiveDate: '2022-09-01T04:00:00+00:00',
-    expirationDate: '2022-09-01T04:00:00+00:00',
-  },
-  {
-    policyId: 14616,
-    policyName: 'Test completed logic',
-    effectiveDate: '2022-09-01T04:00:00+00:00',
-    expirationDate: '2022-09-01T04:00:00+00:00',
-  },
-  {
-    policyId: 14617,
-    policyName: 'Test 123152',
-    effectiveDate: '2022-08-01T04:00:00+00:00',
-    expirationDate: '2022-08-01T04:00:00+00:00',
-  },
-  {
-    policyId: 14618,
-    policyName: 'agsdrwre',
-    effectiveDate: '2022-08-01T04:00:00+00:00',
-    expirationDate: '2022-08-01T04:00:00+00:00',
-  },
-  {
-    policyId: 14619,
-    policyName: 'Test save policy id',
-    effectiveDate: '2022-08-01T04:00:00+00:00',
-    expirationDate: '2022-08-01T04:00:00+00:00',
-  },
-  {
-    policyId: 14620,
-    policyName: 'Test validation rules',
-    effectiveDate: '2022-08-01T04:00:00+00:00',
-    expirationDate: '2022-08-01T04:00:00+00:00',
-  },
-  {
-    policyId: 14621,
-    policyName: 'Test optional expiration date',
-    effectiveDate: '2022-08-01T04:00:00+00:00',
-    expirationDate: '2022-08-01T04:00:00+00:00',
-  },
-  {
-    policyId: 14623,
-    policyName: 'Test auto dates',
-    effectiveDate: '2022-08-01T04:00:00+00:00',
-    expirationDate: '2022-08-01T04:00:00+00:00',
-  },
-  {
-    policyId: 14625,
-    policyName: 'In product demo',
-    effectiveDate: '2022-09-01T04:00:00+00:00',
-    expirationDate: '2022-09-01T04:00:00+00:00',
-  },
-  {
-    policyId: 14628,
-    policyName: 'Test date validation',
-    effectiveDate: '2022-09-01T04:00:00+00:00',
-    expirationDate: '2022-09-01T04:00:00+00:00',
-  },
-];
-
 export const mockNoteCategories: NoteCategory[] = [
@@ -76,3 +7,3 @@ {
     name: 'Administrative',
-    defaultNote: null,
+    defaultNote: "Custom default note",
     isActive: true,
@@ -240,3 +171,2 @@ isConfidential: false,
     categoryName: 'General',
-    policy: mockNotePolicies[0],
     text:
@@ -251,3 +181,2 @@ 'Contact the client tomorrow with an up-sale proposal. This is a large message about the proposal. And another long sentence is here.',
     categoryName: 'Policy Review',
-    policy: mockNotePolicies[1],
     text:
@@ -262,3 +191,2 @@ 'Contact the client tomorrow sfsfsdfsdfsshbfjshdbf hjdsjfhbsdhjf jsdjhbfjhsdbf jhdsbfjhsbdjhfbjhdsbfjhds sdjbfjhsdbjfhds',
     categoryName: 'Cancellation',
-    policy: mockNotePolicies[2],
     text:
@@ -265,0 +193,0 @@ 'Contact the client tomorrow sfsfsdfsdfsshbfjshdbf hjdsjfhbsdhjf jsdjhbfjhsdbf jhdsbfjhsbdjhfbjhdsbfjhds sdjbfjhsdbjfhds',

No alert changes

Worsened metrics

Total package byte prevSize

237767

decreased by-4.87%

Lines of code

2979

decreased by-6.29%

No dependency changes