owrrpon

import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Subject, Subscription } from 'rxjs';
import { AppUtilityService } from 'src/app/app-utility.service';
import { FeatureModuleBService } from '../feature-module-b.service';

@Component({
  selector: 'app-page-b7',
  templateUrl: './page-b7.component.html',
  styleUrls: ['./page-b7.component.scss']

owrrpon

<mat-drawer-container class="modhyobitto-table-drawer-container">
            <mat-drawer mode="over" position="end" #table_update_drawer
                [opened]="is_table_being_updated"
                disableClose="true">
                <section class="table-update">
                    <form class="table-update__form"
                        [formGroup]="table_update_form"
                        (ngSubmit)="updateTableData()">
                        <header class="table-update__header">
                            <h2 class="h3">{{is_new_row_being_added? 'Add New' : 'Edit'}} Row</h2>

owrrpon

.modhyobitto-table{
    border: solid 1px map-get($modhyobitto-colors, primary);
    .modhyobitto-table__grid{
        width: 100%;
        .mat-header-row{
            background-color: map-get($modhyobitto-colors, primary);
            .mat-header-cell{
                color: white;
                font-family: 'Roboto', sans-serif;
                font-size: 1rem;

owrrpon

import { AfterViewInit, Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { Subscription } from 'rxjs';
import { AppUtilityService } from 'src/app/app-utility.service';

@Component({
  selector: 'app-modhyobitto-table',
  templateUrl: './modhyobitto-table.component.html',
  styleUrls: ['./modhyobitto-table.component.scss']

owrrpon

<div class="modhyobitto-table">
    <table mat-table [dataSource]="table_data_source" class="modhyobitto-table__grid">
        <ng-container 
            *ngFor="let column of table_config.columns; index as i"
            [matColumnDef]="column.key">
            <th mat-header-cell *matHeaderCellDef [ngClass]="{'numeric-col': !!column.numeric}">{{column.heading}}</th>
            <td mat-cell *matCellDef="let table_row" [ngClass]="{'numeric-col': !!column.numeric}"> {{table_row[column.key]}} </td>
        </ng-container>
        
        <!-- Edit Column -->

owrrpon

table_config = {
    // the "columns" property is mandatory
    columns:  [
      {
        key: 'a',
        heading: 'Column A'
      },
      {
        key: 'b',
        heading: 'Column B'

owrrpon

import { Directive, EventEmitter, HostBinding, HostListener, Output } from '@angular/core';

@Directive({
  selector: '[dragAndDrop]'
})
export class DragAndDropDirective {

  @Output() onFileDropped = new EventEmitter<any>();
  @HostBinding('style.opacity') private workspace_opacity = '1';

owrrpon

file_upload_config = {
    API: this.global_utilities.getAPI('file_upload'),
    MIME_types_accepted: "application/pdf",
    is_multiple_selection_allowed: true,
    data: null
  };

owrrpon

<app-modhyobitto-file-uploader
    [config]="file_upload_config">
</app-modhyobitto-file-uploader>

owrrpon

.modhyobitto-file-uploader{
    background-color: map-get($modhyobitto-colors, subtle-bg);
    border: 2px dashed map-get($modhyobitto-colors, primary);
    padding: 3rem;
    @include media-breakpoint-down(lg) {
        padding: 2rem;
    }
    @include media-breakpoint-down(sm) {
        padding: 1rem;
    }