# Converage of Pages (Views)

| Screen | Query |
|-----------|--------------------------------------------------------------------------|
| Dashboard | Debugging in graphql environment in vscode for backend |
| Dashboard | How to implement loggers and where loggers are saved |
| Dashboard | difference beween dashboard and Dashboard. |
| Dashboard | Doubt in unpackunitact.ts |
| Dashboard | calculation logic for one tile and code integration for same |
| Dashboard | details of bugs left in application willingly |
| Dashboard | unit1-unit4 |
| Dashboard | nonfinancial1 -nonFinancial4 |
| colleage | How entry goes in colleage table |
| colleage | how to find colleage for admin and other roles funtinality wise |
| colleage | batch jobs |
| colleage | reports (how we are generating reports) |
| colleage | Authorizations |
| colleage | Any document to undersatnd authorization, colleage details on role basis |
| colleage | description of graphql queries and its significance |
| colleage | HR1 and HR2 |
| colleage | Brief overview of all the columns in tables |
| colleage | implementation of export,pagination and search |

## 1. Colleagues

We spoke about the plans' logic: role -> units..., nonFian...,

Now there are still some things which are unclear.

---

Homework: MAKE your own Plan, with goal: you get (calc. from a 150% targetSTI and a salary of 1M) you will be getting addiationally 1M in Bonuses with no functional kpis in your role (spec. to your colleague)

- create role (weights, etc)

- create units, nonFinancials

- create Colleague

---


----

## Addendum for Decorators in TypeScript

[TypeScript Playground](https://www.typescriptlang.org/play/index.html?experimentalDecorators=true#code/GYVwdgxgLglg9mABAGzgcwLIFMoAs4AmAFFAIYBOaOAXIgPIBGAVltADSIAO5cnW5UAJ4A5UgFsstAM5RyMMGg7de-IQBEsUiDE5Q45WgAUefAYI1a5u-QEojJ1ec0Qre8ogDeAKESIICGUQJPEJEAF4uBzMLbWtyADoAN1JkECwAbi8fSJVo5x03JJS08MRQSFgERCJ42oo0KVpSMEEAbQBdG09s33IcEHIkACkAZTpheJk5BRhgQSJg-AJ40k5OZHm8GCkOeqkbG0zfAF8s3v7BnNN1fLjM48yvCGRSKSlEADE4OG7s-zApiBoPoiNwYMkoFgyjByDJpLJ5Gguh5EKdsgABVCYHBLbIEOAjOCLRELTRSUhUeHTJFUxHdXznKADJAAAwAJB4tlJ4sAYTJjogORI3hSsMcWUdUVk0f9AlgxJxSmAsAB3T7fIgAcnJgk1hy88s48XxhOJCi1Or1mSAA)

A Decorator is a special kind of declaration that can be attached to a **class declaration**, **method**, **accessor**, **property**, or **parameter**. Decorators use the form **@expression**, where expression must evaluate to a function that will be called at runtime with information about the decorated declaration

## init example

try it on

    
    /**
     * decorator 2nd order fktn
     */
    function LOGGER(target: Object, propertyName: string, propertyDesciptor: PropertyDescriptor): PropertyDescriptor {
      const method = propertyDesciptor.value;
      propertyDesciptor.value = function (...args: any[]) {
        return JSON.stringify(method.apply(this, args));
      }
      return propertyDesciptor;
    };
    
    
    /**
     * dummy class to inject decorator
     */
    class Foo {
      constructor(private first: string) { }
    
      @LOGGER
      doSomething(message: string): string {
        return `${this.first} ${message}`;
      }
    }
    
    // testing
    const emp = new Foo('say');
    
    emp.doSomething('...duh');

here the logMethod decorator is a function:

    // meaning it takes three arguments and 
    // returns a value of type `PropertyDescriptor`
    
    interface logMethod {
    		(x: Object, y: string, z: PropertyDescriptor): PropertyDescriptor;
    }
    

---

- **Decorators** are just functions which helps to **introspect** the code, to **annotate** and modify classes and properties at **design time.**
- Decorators are a **[proposed standard](https://github.com/wycats/javascript-decorators)** for ECMAScript 2016 by Yehuda Katz.
- We can pass user arguments to the decorator via **decorator factories**.
- There are 4 types of decorators. They are — **Class, Method, Property or Accessor, Parameter Decorators**.
- **Metadata Reflection API** helps to add the metadata information in a standard way to an object and helps to get the **design type information at the run time**.

---

## more

- The log decorator replaces the original function with a new function that logs received arguments, executes the original method and stores the result in a local variable, logs and returns the result.

    const log = (target: Object, key: string | symbol, descriptor: TypedPropertyDescriptor<Function>) => {
        return {
            value: function( ... args: any[]) {
                console.log("Arguments: ", args.join(", "));
                const result = descriptor.value.apply(target, args);
                console.log("Result: ", result);
                return result;
            }
        }
    }
     
    class Calculator {
        @log
        add(x: number, y: number) {
            return x + y;
        }
    }
     
    new Calculator().add(1, 3);

- Property decorators are similar to method decorators. The only difference is they do not accept property descriptor as argument and do not return anything.

    const log = (target: Object, key: string | symbol) => {
        let value = target[key];
     
        const getter = () =>  {
            console.log("Getting value: ", value);
            return value;
        };
        const setter = (val) => {
            console.log("Setting value: ", val);
            value = val;
        }
        Reflect.deleteProperty[key];
        Reflect.defineProperty(target, key, {
            get: getter,
            set: setter
        });
    }
     
    class Box<T> {
        @log
        item: T;
    }
     
    const numberInABox = new Box<number>();
    numberInABox.item = 12;
    numberInABox.item;

---

- A parameter decorator is a function that accepts 3 arguments: the object on which the method is defined or the construction function if the decorator is on a constructor argument, the key for the method (a string name or symbol) or undefined in case of constructor argument and the index of the parameter in the argument list. A property decorator does not return anything.

---

## properties

Decorators compose just like functions.

    const printA = (target: Object, key: string | symbol, descriptor: TypedPropertyDescriptor<Function>) => {
        console.log("A");
    }
     
    const printB = (target: Object, key: string | symbol, descriptor: TypedPropertyDescriptor<Function>) => {
        console.log("B");
    }
     
    class Printer {
        @printA
        @printB
        printC() {
            console.log("C");
        }
    }
     
    new Printer().printC();