Prepare docker build + preserve register values + make select component update responsive

Dockerfile

@@ -0,0 +1,13 @@
+### STAGE 1: Build ###
+FROM node:17.2-alpine AS build
+WORKDIR /usr/src/app
+COPY package.json package-lock.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+### STAGE 2: Run ###
+FROM nginx:1.21.4-alpine
+COPY ./certificates/ /etc/certificates
+COPY ./nginx.conf /etc/nginx/nginx.conf
+COPY /dist/bizfile /usr/share/nginx/html

angular.json

@@ -49,7 +49,7 @@
                 {
                   "type": "anyComponentStyle",
                   "maximumWarning": "2kb",
-                  "maximumError": "4kb"
+                  "maximumError": "8kb"
                 }
               ],
               "fileReplacements": [

certificates/localhost.crt

@@ -0,0 +1,22 @@
+-----BEGIN CERTIFICATE-----
+MIIDqDCCApACCQCVkaNcSp8MnjANBgkqhkiG9w0BAQsFADCBlTELMAkGA1UEBhMC
+SU4xEjAQBgNVBAgMCUthcm5hdGFrYTESMBAGA1UEBwwJQmVuZ2FsdXJ1MRIwEAYD
+VQQKDAlXZWJ0cmlnb24xDDAKBgNVBAsMA0RldjEWMBQGA1UEAwwNd2VidHJpZ29u
+LmNvbTEkMCIGCSqGSIb3DQEJARYVYWR3YWl0aEB3ZWJ0cmlnb24uY29tMB4XDTIx
+MTIxMjE1NDAxMFoXDTIyMTIxMjE1NDAxMFowgZUxCzAJBgNVBAYTAklOMRIwEAYD
+VQQIDAlLYXJuYXRha2ExEjAQBgNVBAcMCUJlbmdhbHVydTESMBAGA1UECgwJV2Vi
+dHJpZ29uMQwwCgYDVQQLDANEZXYxFjAUBgNVBAMMDXdlYnRyaWdvbi5jb20xJDAi
+BgkqhkiG9w0BCQEWFWFkd2FpdGhAd2VidHJpZ29uLmNvbTCCASIwDQYJKoZIhvcN
+AQEBBQADggEPADCCAQoCggEBAK/rFKIaTQrPMo/QDk2+4/J/KnvIQm2mIUB0bngx
+b16bw1Od1Km9TWknp+i3fwR0UjfeFx+Sz6O545cte2q4ytaOvuwSY6vLRWk67xSK
+TVYJ1puO5vkU5LBT1/uXic/wxKmQq+h5Vcp0MSG2vt8L0Qa0K2+yKDDA/WEMKahL
+Mhht/+FHyYoS+mrIKE8YT+2fyw4LB9x9/Ae77Fq08Z6fwpKf25RsjTrQ3MC/rmXE
+mh2nzZDF7b7jxUSaLh6iS8GUzyhjP9QaoKlZDgZZ6XKWpca9Lp+BzkRgIosv2uit
+WKqLl1knX3SrFO1jHuTIOXBbF/jv35zDkbFXxb4DzhypiyECAwEAATANBgkqhkiG
+9w0BAQsFAAOCAQEArRxkrnzjgp+eBIX7bmbPyGm/nKOARXYD5fBRzfKvoYW28ywp
+jSyk1YTSPQ40Zt0yAHMM+ximlsdx8SswCxMtIaBanFovE/+ZRMCDFej1OvwKm6uS
+yZn0sSLHWT5QG0/VWKPyiH5KQ30NuTanTsj2P7x2lpLBBWDuXoWCMFrsrNxLeg0Z
+BwmSkP65jVRZen10lx6MxOONeNJrlQe061V2O2oQkb/PFR3mA/QnXasQ4tb3DHJW
+zbXAsxh+OJEPWgPTmmNuP2pvY8HNRNcdsyxH0a/bxTTZ2H+ZoSjCUO9CmLRNrY3Q
+KFsotcs65K2EfmXSJGhv93gmhQ4MRySp7AKzHA==
+-----END CERTIFICATE-----

certificates/localhost.key

@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCv6xSiGk0KzzKP
+0A5NvuPyfyp7yEJtpiFAdG54MW9em8NTndSpvU1pJ6fot38EdFI33hcfks+jueOX
+LXtquMrWjr7sEmOry0VpOu8Uik1WCdabjub5FOSwU9f7l4nP8MSpkKvoeVXKdDEh
+tr7fC9EGtCtvsigwwP1hDCmoSzIYbf/hR8mKEvpqyChPGE/tn8sOCwfcffwHu+xa
+tPGen8KSn9uUbI060NzAv65lxJodp82Qxe2+48VEmi4eokvBlM8oYz/UGqCpWQ4G
+WelylqXGvS6fgc5EYCKLL9rorViqi5dZJ190qxTtYx7kyDlwWxf479+cw5GxV8W+
+A84cqYshAgMBAAECggEAC6kRXQ1RPf4t48puqEiW42P6dOn5PTtdyN/u0pi0QRki
+AVDc38NkdivivVIsYSc0q+9UqQsaKEgSBdtF6vUEvOQJU6yEXsbCew8k+b+RELrm
+NrlqJeh0oBtunYaV4+qZnoOwYWBph1ncR9fNHwuxdzhKCMVOVKz2HpCn0jfpwiSs
+Pv6wdU/MzRDVo2iJNcLEaLzX/177Vw7P4kpa+Ys5V0kCdVsZwH2NSHqzNhGkxjD8
+lTEDoPhy1wPjn/puxbLEn/BhYLbGyxbIkqm3N7hwYdgU3dXuyBY9lm2DqKqgjP9N
+4icOblEiNlN8JRb5jLSCrbIALH7R3Chh1Gy37beqgQKBgQDen9sB89+sQ6QBajYd
+NNYXvSPzbhR/Qc6to8C2tb0oMAoV5656h25mZwq8DyaHH5E6J6Xgs2cdtcS85Mex
+spIgMZiy2pqATj88W0ukVvFoh012O+S2Zk/v/KrbZ1k6ZuYLiGqA9Zv72tGPfnHe
+2c7wrOZ3mRXeY9Bnll2Ylkj85QKBgQDKSq5YFmvBX2I5gJJABd9CbofNdvVZh5Ff
+psrnO370wa4vYIK46aSY4fVRhuQnRlpNRW+tsauTUSXnzgFVsKD0lG8CxhpSOFsi
+rFXR/QVo9WQCh8AuJHxMNiy2iXG/hiFeeEjbWdb2sCuUjUjDCMD+JoQcMuIg+fL6
+ZQYhG9otjQKBgBMs98NSS0jeRqksid64J1zCGO+l4rQXagMA4N+cBeAJS0UZwKij
+M7o0U/Ng5rOq32p/8cTKDy668mhG2ICQ3g9R1lJJjBdTJhU/0+Mi7gZP6Tcu74Na
+irYkMF9XppLmPBhwNqRHA5mM/pH6lTpZzn5iljNlB0IxnMjfZc5322+VAoGAYbif
+7ieumDRms9Z7T/hGOMZCTiwYK87EmEtvmzJvivcBGRvrKj6b58rIAkFCeAKRXuCb
+KXI5qym5QPiQRn/T0TLfSZy/XFajF+Xec1liQqjATkSbvu6bKQnGoctVqqq19ffv
+Yh9NK9BAzTtPGgBhkqSyjxi5iiqUiQdCZb4ZsIUCgYEAn8UenohLROB/b6cMu35C
+0uKQHwla/Rx7al3db4pMHz9o6QBiLdpg/rik7BJYDM2smImpQuDFCbzQ9baRRj6l
+r/wqm8kSya9BniCLjq045tsYj5BzhsMIYZalB2k56BKoFcNPzRbdjqyArDB4Rqwu
+9VBf2HSssIRVha59ytmZAWQ=
+-----END PRIVATE KEY-----

nginx.conf

@@ -0,0 +1,19 @@
+events{}
+
+http {
+    include /etc/nginx/mime.types;
+    server {
+        listen 80;
+        # listen               443;
+        # ssl                  on;
+        # ssl_certificate      /etc/certificates/localhost.crt;
+        # ssl_certificate_key  /etc/certificates/localhost.key;
+        # ssl_ciphers          HIGH:!aNULL:!MD5;
+        server_name localhost;
+        root /usr/share/nginx/html;
+        index index.html;
+        location / {
+            try_files $uri $uri/ /index.html;
+        }
+    }
+}

package.json

@@ -6,7 +6,14 @@
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "ng test",
+
+    "docker-build": "docker build -t b2rs-multi-stage-image .",
+    "docker-create": "docker run --name b2rs-app-container -d -p 80:80 b2rs-multi-stage-image",
+    "docker-destroy": "docker container rm b2rs-app-container",
+
+    "docker-start": "docker start b2rs-app-container",
+    "docker-stop": "docker stop b2rs-app-container"
   },
   "private": true,
   "dependencies": {

src/app/layout/tabs/tabs.component.scss

@@ -1,58 +1,5 @@
 $header-height: 10rem;
 
-.notifications-window {
-    position: fixed;
-    top: calc(#{$header-height} - 1rem);
-    background-color: white;
-    width: 40rem;    
-    box-shadow: 0px 0px 15px -3px var(--dark-grey);
-    z-index: 2;
-    right: 26rem;
-    border-radius: 1.5rem;
-    overflow: hidden;
-
-
-    header {
-        height: 5rem;
-        padding: 0 2rem;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;        
-        width: calc(100% - 2rem);
-        border-radius: 1rem;
-        margin: 1rem auto 0;
-        position: relative;
-        overflow: hidden;
-
-        &::before {
-            content: '';
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            background-color: var(--border-grey);
-            opacity: 0.7;
-        }
-    
-        h4{
-            position: relative;
-            font-size: 1.7rem;
-            color: var(--primary);
-            font-weight: 500;
-        }
-    }
-
-    .backdrop {
-        position: fixed;
-        left: 0;
-        top: 0;
-        width: 100vw;
-        height: 100vw;
-        z-index: 0;
-    }
-}
-
 .page {
     height: calc(100vh - #{$header-height});
     margin: 0 auto;

src/app/pages/dashboard/dashboard.component.html

@@ -101,6 +101,7 @@
                 <app-generic-input
                     type="text"
                     label="UEN"
+                    placeholder="Partial/full match"
                 ></app-generic-input>
                 <app-select-input
                     label="Enforcment status"

src/app/pages/register-business/register-business.component.html

@@ -39,27 +39,37 @@
 
 <ng-container *ngIf="formState === 'REGISTER_FORM'">
     <section class="form">
-        <div class="input-holder" *ngFor="let registerInput of registerForm">
-            <ng-container *ngIf="registerInput.type === 'date'">
-                <app-date-input
-                    [label]="registerInput.name"
-                ></app-date-input>
-            </ng-container>
-    
-            <ng-container *ngIf="registerInput.type === 'select'">
-                <app-select-input
-                    [label]="registerInput.name"
-                    [options]="registerInput.options"
-                ></app-select-input>
-            </ng-container>
-    
-            <ng-container *ngIf="registerInput.type === 'text' || registerInput.type === 'email'">
-                <app-generic-input
-                    [label]="registerInput.name"
-                    [type]="registerInput.type" 
-                    [placeholder]="registerInput.placeholder"
-                ></app-generic-input>
-            </ng-container>
+        <div class="input-holder">
+            <app-select-input
+                label="Entity Type"
+                [options]="entityTypeOptions"
+                [value]="selectedEntityType"
+                (onChange)="selectEntityType($event)"
+            ></app-select-input>
+        </div>
+        <div class="input-holder">
+            <app-select-input
+                label="Company Category"
+                [options]="companyCategoryOptions"
+                [value]="selectedCompanyCategory"
+                (onChange)="selectCompanyCategory($event)"
+            ></app-select-input>
+        </div>
+        <div class="input-holder">
+            <app-select-input
+                label="Company Suffix"
+                [options]="companySuffixOptions"
+                [value]="selectedCompanySuffix"
+                (onChange)="selectCompanySuffix($event)"
+            ></app-select-input>
+        </div>
+        <div class="input-holder">
+            <app-select-input
+                label="Drop the Suffix 'Limited' or 'Berhad'?"
+                [options]="dropSuffixOptions"
+                [value]="selectedDropSuffix"
+                (onChange)="selectDropSuffix($event)"
+            ></app-select-input>
         </div>
     </section>
     

src/app/pages/register-business/register-business.component.ts

@@ -27,35 +27,27 @@ export class RegisterBusinessComponent implements OnInit {
     paymentChild: Window | null = null;
     childCheck: number | undefined;
 
-    registerForm: Array<SelectInputProperties|DateInputProperties|GenericInputProperties> = [{
-        name: 'Entity Type',
-        type: 'select',
-        options: [
-            'BUSINESS', 
-            'LOCAL COMPANY', 
-            'LIMITED LIABILITY PARTNERSHIP', 
-            'FOREIGN COMPANY', 
-            'LIMITED PARTNERSHIP', 
-            'PUBLIC ACCOUNTING FIRM'
-        ]
-    }, {
-        name: 'Company Category',
-        type: 'select',
-        options: [
-            'PUBLIC COMPANY LIMITED BY SHARES', 
-            'PUBLIC COMPANY LIMITED BY GUARANTEE', 
-            'PRIVATE COMPANY LIMITED BY SHARES', 
-            'EXEMPT PRIVATE COMPANY LIMITED BY SHARES'
-        ]
-    }, {
-        name: 'Company Suffix',
-        type: 'select',
-        options: ['LLC', 'LTD', 'PVT LTD', 'INC']
-    }, {
-        name: 'Drop the Suffix "Limited" or "Berhad"?',
-        type: 'select',
-        options: ['YES', 'NO']
-    }];
+    selectedEntityType = 'FOREIGN COMPANY';
+    selectedCompanyCategory = '';
+    selectedCompanySuffix = '';
+    selectedDropSuffix = '';
+
+    entityTypeOptions = [
+        'BUSINESS', 
+        'LOCAL COMPANY', 
+        'LIMITED LIABILITY PARTNERSHIP', 
+        'FOREIGN COMPANY', 
+        'LIMITED PARTNERSHIP', 
+        'PUBLIC ACCOUNTING FIRM'
+    ];
+    companyCategoryOptions = [
+        'PUBLIC COMPANY LIMITED BY SHARES', 
+        'PUBLIC COMPANY LIMITED BY GUARANTEE', 
+        'PRIVATE COMPANY LIMITED BY SHARES', 
+        'EXEMPT PRIVATE COMPANY LIMITED BY SHARES'
+    ];
+    companySuffixOptions = ['LLC', 'LTD', 'PVT LTD', 'INC'];
+    dropSuffixOptions = ['YES', 'NO'];
 
 
     acknowledgementDetails: Array<{
@@ -127,6 +119,22 @@ export class RegisterBusinessComponent implements OnInit {
         this.formState = 'REGISTER_FORM';
     }
 
+    selectEntityType(selectedEntityType: string) {
+        this.selectedEntityType = selectedEntityType;
+    }
+
+    selectCompanyCategory(selectedCompanyCategory: string) {
+        this.selectedCompanyCategory = selectedCompanyCategory;
+    }
+
+    selectCompanySuffix(selectedCompanySuffix: string) {
+        this.selectedCompanySuffix = selectedCompanySuffix;
+    }
+
+    selectDropSuffix(selectedDropSuffix: string) {
+        this.selectedDropSuffix = selectedDropSuffix;
+    }
+
     goBackToFormDetails() {
         if (typeof this.childCheck !== 'undefined') {
             window.clearInterval(this.childCheck);

src/app/widgets/form/select-input/select-input.component.html

@@ -1,5 +1,5 @@
 <div class="input-holder">
-    <select>
+    <select (change)="updateValue($event)">
         <option *ngFor="let option of options" [value]="option" [selected]="value === option"> {{ option }} </option>
     </select>
     

src/app/widgets/form/select-input/select-input.component.ts

@@ -23,7 +23,8 @@ export class SelectInputComponent implements OnInit {
     ngOnInit(): void {
     }
 
-    updateValue(value: string) {
+    updateValue(event: any) {
+        const value: string = event.target.value;
         this.value = value;
         this.onChange.emit(value);
     }