@unipin/angular-applet 18.9.3 → 18.9.5

package/.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

package/.eslintrc.json

@@ -0,0 +1,72 @@
+{
+  "root": true,
+  "ignorePatterns": [
+    "projects/**/*",
+    "**/graphql/*"
+  ],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "parserOptions": {
+        "project": ["tsconfig.json"],
+        "createDefaultProgram": true
+      },
+      "extends": [
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "no-empty": "error",
+        "no-alert": "error",
+        "no-console": "warn",
+        "camelcase": "error",
+        "no-extra-semi": "error",
+        "no-delete-var": "error",
+        "no-unreachable": "error",  
+        "no-else-return": "error",
+        "no-dupe-else-if": "error",
+        "no-await-in-loop": "error",
+        "no-duplicate-case": "error",
+        "semi": [ "warn", "always" ],
+        "no-duplicate-imports": "warn",
+        "eqeqeq": [ "error", "always" ],
+        "eol-last": [ "error", "always" ],
+        "max-lines": [
+          "error",
+          {
+            "max": 400,
+            "skipComments": true,
+            "skipBlankLines": true
+          }
+        ],
+        "@angular-eslint/component-class-suffix": [
+          "error",
+          {
+            "suffixes": ["Page", "Component"]
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "up",
+            "style": "kebab-case"
+          }
+        ],
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@angular-eslint/template/recommended"],
+      "rules": {}
+    }
+  ]
+}

package/.github/ISSUE_TEMPLATE/bug_fix.yml

@@ -0,0 +1,60 @@
+type: "Bug"
+labels: ["bug"]
+name: "🐛 Bug Fix"
+title: "Bugfix - "
+projects: ["MobileArts/3"]
+description: "Report a bug that needs to be fixed."
+body:
+  - type: textarea
+    id: description
+    attributes:
+      label: "Description"
+      description: "Describe what's the bug?"
+    validations:
+      required: true
+  - type: dropdown
+    id: environment
+    attributes:
+      label: Environment
+      description: "Where is the bug found?"
+      options:
+        - Production
+        - Staging
+        - Development
+      default: 0
+    validations:
+      required: true
+  - type: dropdown
+    id: device
+    attributes:
+      label: Device
+      description: "Which device that affected to the bug?"
+      options:
+        - All
+        - Mobile Android
+        - Mobile iOS/iPadOS
+        - Desktop Windows
+        - Desktop MacOS
+        - Desktop Linux
+      default: 0
+    validations:
+      required: true
+  - type: textarea
+    id: how_to_replicate
+    attributes:
+      label: "How to Replicate the Bug"
+      description: "Describe the step how to replicate the bug"
+      placeholder: "
+        1. Open article page\n
+        2. Login into your account from artile page\n
+        3. Go back to prev article page
+      "
+    validations:
+      required: true
+  - type: textarea
+    id: expected_result
+    attributes:
+      label: "Expected Result"
+      description: "Describe what's the correct behavior without the bug"
+    validations:
+      required: true

package/.github/ISSUE_TEMPLATE/dependency_update.yml

@@ -0,0 +1,20 @@
+type: "Task"
+title: "Chore - "
+labels: ["dependencies"]
+name: "📦 Dependencies Update"
+description: "Track a dependency update."
+body:
+  - type: textarea
+    id: reason
+    attributes:
+      label: "Reason"
+      description: "Describe the reason from dependency updation"
+    validations:
+      required: true
+  - type: textarea
+    id: benefit
+    attributes:
+      label: "Benefit"
+      description: "Describe the benefit from dependency updation"
+    validations:
+      required: true

package/.github/ISSUE_TEMPLATE/documentation.yml

@@ -0,0 +1,13 @@
+type: "Task"
+title: "Doc - "
+name: "📄 Documentation"
+labels: ["documentation"]
+projects: ["MobileArts/3"]
+description: "Track a documentatoin update."
+body:
+  - type: textarea
+    id: description
+    attributes:
+      label: "Description"
+    validations:
+      required: true

package/.github/ISSUE_TEMPLATE/engineering.yml

@@ -0,0 +1,22 @@
+type: "Task"
+title: "Refactor - "
+name: "🧑‍💻 Engineering"
+labels: ["engineering"]
+projects: ["MobileArts/3"]
+description: "Suggest a engineering or codebase improvement."
+body:
+  - type: textarea
+    id: reason
+    attributes:
+      label: "Reason"
+      description: "Describe the reason from dependency updation"
+    validations:
+      required: true
+  - type: textarea
+    id: benefit
+    attributes:
+      label: "Benefit"
+      description: "Describe the benefit from dependency updation"
+    validations:
+      required: true
+      

package/.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,38 @@
+type: "Feature"
+labels: ["enhancement"]
+title: "Enhancement - "
+projects: ["MobileArts/3"]
+name: "✨ Feature / Enhancement"
+description: "Suggest a new feature or improvement."
+body:
+  - type: textarea
+    id: description
+    attributes:
+      label: "Description"
+      description: "Describe what's the enhancement/improvement?"
+    validations:
+      required: 
+  - type: dropdown
+    id: device
+    attributes:
+      label: Device
+      description: "Which device that this enhancement targeted to?"
+      options:
+        - All
+        - Mobile
+        - Desktop
+      default: 0
+    validations:
+      required: true
+  - type: textarea
+    id: previous_feature
+    attributes:
+      label: "Previous Feature (if applicable)"
+      description: "Describe the previous/current/related feature to this enhancement"
+  - type: textarea
+    id: how_to_use_it
+    attributes:
+      label: "How to Use It"
+      description: "Describe how to use the new feature"
+    validations:
+      required: true

package/.github/ISSUE_TEMPLATE/testing.yml

@@ -0,0 +1,38 @@
+type: "Task"
+title: "Test - "
+name: "📝 Testing"
+labels: ["engineering"]
+projects: ["MobileArts/3"]
+description: "Track a unit test or another testing update."
+body:
+  - type: textarea
+    id: description
+    attributes:
+      label: "Description"
+    validations:
+      required: true
+  - type: textarea
+    id: related_feature
+    attributes:
+      label: "Related Feature/Issue"
+      description: "Describe or list down all related feature or Github Issue"
+  - type: textarea
+    id: positive_scenarios
+    attributes:
+      label: "Positive Scenarios"
+      description: "List down all existed positive scenario that wanted to be tested"
+      placeholder: "
+        1. unipin@mail.com is given, and the function returns \"Text is an email\"\n
+        2. unipin_123123@mail.com is given, and the function returns \"Text is an email\"
+      "
+    validations:
+      required: true
+  - type: textarea
+    id: negative_scenarios
+    attributes:
+      label: "Negative Scenarios (If Applicable)"
+      description: "List down all existed negative scenario that wanted to be tested"
+      placeholder: "
+        1. unipin is given, and the function returns \"Text is not an email\"\n
+        2. unipin@.com is given, and the function returns \"Text is not an email\"
+      "

package/.github/dependabot.yml

@@ -0,0 +1,11 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "weekly"

package/.github/pull_request_template.md

@@ -0,0 +1,77 @@
+## 📝 Summary
+<!--
+Added a comprehensive dashboard feature to the job vacancy applet with data visualization, filtering capabilities, and navigation integration. The dashboard provides insights into job applicant statistics through pie charts and data grids.
+-->
+
+
+## 🗃️ File Changes 
+<!--
+- `projects/job-vacancy-applet/src/app/app.routes.ts` - Updated routing configuration to redirect to dashboard and added dashboard route with permissions
+- `projects/job-vacancy-applet/src/app/features/dashboard/components/list/applicants/applicants-list.component.html` - Created applicants list grid template
+- `projects/job-vacancy-applet/src/app/features/dashboard/components/list/applicants/applicants-list.component.scss` - Added styling for applicants list component
+- `projects/job-vacancy-applet/src/app/features/dashboard/components/list/applicants/applicants-list.component.ts` - Implemented applicants list component with grid functionality
+- `projects/job-vacancy-applet/src/app/features/dashboard/components/list/count-of-applicants/count-of-applicants-list.component.html` - Created count of applicants grid template
+- `projects/job-vacancy-applet/src/app/features/dashboard/components/list/count-of-applicants/count-of-applicants-list.component.scss` - Added styling for count of applicants component
+- `projects/job-vacancy-applet/src/app/features/dashboard/components/list/count-of-applicants/count-of-applicants-list.component.ts` - Implemented count of applicants list with client-side grid
+-->
+
+
+## 🌊 Changes
+<!--
+- **Routing Updates**: Modified main routing to redirect to dashboard by default and added dashboard route with proper permissions
+- **Dashboard Components**: Created two main dashboard components - applicants list and count of applicants list
+-->
+
+
+## 💥 Breaking Changes
+<!--
+- **DashboardPage** needs a new required input, called `countryCode` to determine which from country the job vacancy pulled
+- **JobService** query function needs a new required parameter, called `countryCode`. Its required by BE side
+-->
+
+
+## ✍️ How To Test
+<!--
+1. Open Job Vacancy Applet
+2. Open dashboard page
+3. Click `funnel` icon to open the filter popover and use it to filter which data that will be counted and show inside job vacancy dashboard
+-->
+
+
+## 🌳 Side Effects
+<!--
+- Account needs `GLOBAL.JOB_COUNT.VIEW` to open dashboard page
+- When filtering, filter will save its states to `localStorage`, needs to make sure that the `localStorage` key is not conflicted with other filter
+- When the filter changed, all component should go to loading state (visible) and after the data loaded the loading state will disappear
+-->
+
+
+## 📷 Screenshots or Records
+<!-- Please upload a screenshot or screen recording from your task (if applicable)-->
+
+## 💻 BE Dependencies
+<!--
+- MobileArts/ms-human-resource#94 TR-S51-202 feat: Dashboard API
+-->
+
+
+## ✅ PR Checklist
+- [ ] Title uses UniPin format
+- [ ] Assign mentor, product owner, and leads as PR reviewer
+- [ ] Assign yourself as assignee
+- [ ] Choose the matching labels with the related issue(s)
+- [ ] Connect related issue(s) to this PR
+- [ ] Write PR description that match with the template
+- [ ] Assign PR to the related milestone **(if applicable)**
+- [ ] Fill in sprint information for this PR
+- [ ] Move this PR to "Code Review" list inside project board
+- [ ] Move correspondent issue(s), to code review status inside project board
+
+## ✅ Review Checklist
+<!--
+- [ ] Dashboard page can be opened without error
+- [ ] Applicant count list should shows a calculation grid where its count the applicant with sum group row pinned at the bottom
+- [ ] Applicant list should shows all applicant data with view and download applicant CV action button
+- [ ] User can change filter and when the filter changed a loading state for each of the components will be visible
+- [ ] View and download button are working
+-->

package/.github/workflows/npm_publish.yml

@@ -0,0 +1,52 @@
+name: Publish to npm
+on:
+  workflow_dispatch:
+  push:
+    tags:
+      - "v*"
+
+jobs:
+  publish:
+    runs-on: arc-runner-set
+    permissions:
+      contents: read
+      id-token: write
+
+    steps:
+      - uses: actions/checkout@v5
+
+      - uses: actions/setup-node@v5
+        with:
+          node-version: "20"
+          registry-url: "https://registry.npmjs.org"
+
+    # ENABLE THIS BLOCK IF WANT TO USE TAG VERSION FROM GITHUB RELEASE TAG INSTEAD OF DOING IT MANUALLY 
+      - name: Use tag version
+        run: |
+          TAG=${GITHUB_REF#refs/tags/}
+          VERSION=${TAG#v}
+          echo "Publishing version $VERSION"
+          # npm version $VERSION --no-git-tag-version
+
+    # CAN DISABLE/COMMENT OUT THIS BLOCK IF DONT NEED npm ci, npm test or npm run build
+      - name: Install dependencies
+        run: npm install --legacy-peer-deps
+
+      - name: Build package
+        id: build
+        run: |
+          npm run build
+          echo "Build completed" >> $GITHUB_STEP_SUMMARY
+
+    # MODIFY THIS BLOCK IF WANT TO ADD FLAG TO NPM PUBLISH 
+      - name: Publish to npm
+        run: |
+          TAG=${GITHUB_REF#refs/tags/}
+          VERSION=${TAG#v}
+          if [[ "$VERSION" == *"beta"* ]]; then
+            npm publish --tag beta --access public
+          else
+            npm publish --tag latest --access public
+          fi
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.storybook/main.ts

@@ -0,0 +1,28 @@
+import type { StorybookConfig } from '@storybook/angular';
+
+const config: StorybookConfig = {
+  stories: [
+    '../projects/unipin-angular/**/*.mdx',
+    '../projects/unipin-angular/**/*.stories.@(js|jsx|mjs|ts|tsx)'
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    'storybook-addon-useragent',
+    '@storybook/addon-a11y',
+    '@storybook/addon-coverage',
+    '@storybook/addon-actions'
+  ],
+  framework: {
+    name: '@storybook/angular',
+    options: {
+      enableIvy: true
+    },
+  },
+  docs: {
+    autodocs: 'tag',
+    defaultName: 'Overview'
+  },
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,19 @@
+import type { Preview } from '@storybook/angular';
+import { setCompodocJson } from '@storybook/addon-docs/angular';
+import docJson from '../projects/unipin-angular/documentation.json';
+setCompodocJson(docJson);
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z]' },
+    layout: 'centered',
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    }
+  },
+};
+
+export default preview;

package/.storybook/test-runner.ts

@@ -0,0 +1,29 @@
+import { expect } from '@storybook/jest';
+import type { TestRunnerConfig } from '@storybook/test-runner';
+import { waitForPageReady } from '@storybook/test-runner';
+import { toMatchImageSnapshot } from 'jest-image-snapshot';
+
+const customSnapshotsDir = `${ process.cwd() }/__snapshots__`;
+
+const config: TestRunnerConfig = {
+  setup() {
+    expect.extend({ toMatchImageSnapshot });
+  },
+  async preVisit(page, context) {
+    await waitForPageReady(page);
+
+    const image = await page.screenshot();
+    expect(image).toMatchImageSnapshot({
+      customSnapshotsDir,
+      customSnapshotIdentifier: context.id,
+    });
+  },
+  async postVisit(page, context) {
+    const elementHandler = await page.$('#storybook-root');
+    const innerHTML = await elementHandler?.innerHTML();
+    
+    expect(innerHTML).toMatchSnapshot();
+  }
+};
+
+export default config;

package/.storybook/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../projects/unipin-angular/tsconfig.lib.json",
+  "compilerOptions": {
+    "types": ["node"],
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true
+  },
+  "exclude": [],
+  "include": [
+    "../projects/unipin-angular/**/*", 
+    "./preview.ts"
+  ],
+  "files": ["./typings.d.ts"]
+}

package/.storybook/typings.d.ts

@@ -0,0 +1,4 @@
+declare module '*.md' {
+  const content: string;
+  export default content;
+}

package/.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": [
+    "angular.ng-template",
+    "dbaeumer.vscode-eslint"
+  ]
+}

package/.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

package/.vscode/settings.json

@@ -0,0 +1,16 @@
+{
+    "typescript.preferences.quoteStyle": "single",
+    "html.completion.attributeDefaultValue": "doublequotes",
+    "[typescript]": {
+        "editor.indentSize": 2,
+    },
+    "[javascript]": {
+        "editor.indentSize": 2,
+    },
+    "[scss]": {
+        "editor.indentSize": 4,
+    },
+    "[html]": {
+        "editor.indentSize": 4,
+    }
+}

package/.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

package/README.md

@@ -1,23 +1,26 @@
 # UnipinAngular
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.0.0.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.0.1.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
 
 ## Code scaffolding
 
-Run `ng generate component component-name --project unipin-angular` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project unipin-angular`.
-> Note: Don't forget to add `--project unipin-angular` or else it will be added to the default project in your `angular.json` file. 
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
 
 ## Build
 
-Run `ng build unipin-angular` to build the project. The build artifacts will be stored in the `dist/` directory.
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
 
-## Publishing
+## Running unit tests
 
-After building your library with `ng build unipin-angular`, go to the dist folder `cd dist/unipin-angular` and run `npm publish`.
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
 
-## Running unit tests
+## Running end-to-end tests
 
-Run `ng test unipin-angular` to execute the unit tests via [Karma](https://karma-runner.github.io).
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
 
 ## Further help