Company registrations form & backend list view

firestore.rules

@@ -7,5 +7,12 @@ service cloud.firestore {
       allow read: if request.auth.token.role == "admin" || request.auth.token.entity == resource.data.entity;
       allow update: if request.auth.token.role == "admin" || request.auth.token.entity == resource.data.entity;
     }
+
+    match /companies/{document} {
+      allow create: if true;
+      allow list: if request.auth.token.role == "admin" || request.auth.token.entity == resource.data.entity;
+      allow read: if request.auth.token.role == "admin" || request.auth.token.entity == resource.data.entity;
+      allow update: if request.auth.token.role == "admin" || request.auth.token.entity == resource.data.entity;
+    }
   }
 }

functions/index.js

@@ -36,6 +36,29 @@ exports.onParticipantUpdate = functions.firestore
     }, { merge: true });
   });
 
+exports.onCompanyCreate = functions.firestore
+  .document('companies/{company_name}')
+  .onCreate(async (snap, context) => {
+    const companyRef = db.collection('companies').doc(snap.id);
+    const timestamp = new Date().toISOString();
+    await companyRef.set({
+      status: "signed up",
+      createdTimeStamp: timestamp
+    }, { merge: true });
+    await sheets.add((await companyRef.get()).data());
+  });
+
+exports.onCompanyUpdate = functions.firestore
+  .document('companies/{company_name}')
+  .onUpdate(async (snap, context) => {
+    if (snap.before.data().lastModifiedTimestamp !== snap.after.data().lastModifiedTimestamp) return;
+    const participantRef = db.collection('companies').doc(snap.after.id);
+    const timestamp = new Date().toISOString();
+    await participantRef.set({
+      lastModifiedTimestamp: timestamp
+    }, { merge: true });
+  });
+
 exports.getPaymentKey = functions.https.onCall(async (data, context) => {
   const participantRef = await (await (db.collection('participants').doc(data.email)).get()).data();
   const entity = participantRef.entity;
@@ -85,4 +108,4 @@ exports.onPaymentCreate = functions.firestore
     const email = payment.email;
     const participant = (await db.collection('participants').doc(email).get()).data();
     await slack.sendNotifications(payment, participant);
-  });
+  });

package.json

@@ -24,6 +24,7 @@
     "@angular/router": "~12.1.0",
     "angular-material-fileupload": "^3.0.2",
     "angular5-csv": "^0.2.11",
+    "date-fns": "^2.28.0",
     "firebase": "^7.0 || ^8.0",
     "mat-table-exporter": "^10.2.3",
     "ngx-mat-select-search": "^3.3.0",

src/app/app-routing.module.ts

@@ -1,8 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import {SignUpComponent} from "./sign-up/sign-up.component";
-// import {CompaniesComponent} from "./companies/companies.component";
-// import {CompaniesAddComponent} from "./companies-add/companies-add.component";
+ import {CompaniesComponent} from "./companies/companies.component";
+ import {CompaniesAddComponent} from "./companies-add/companies-add.component";
 import {ParticipantsComponent} from "./participants/participants.component";
 import {LoginComponent} from "./login/login.component";
 import {ViewComponent} from "./participants/view/view.component";
@@ -12,8 +12,9 @@ const routes: Routes = [
   { path: '', component: SignUpComponent },
   { path: 'sign-up', component: SignUpComponent },
   { path: 'sign-up/:entity', component: SignUpComponent },
-  // { path: 'companies', component: CompaniesComponent },
-  // { path: 'companies/add', component: CompaniesAddComponent },
+  { path: 'companies', component: CompaniesComponent },
+  { path: 'companies/register', component: CompaniesAddComponent },
+  { path: 'companies/register/:entity', component: CompaniesAddComponent },
   { path: 'participants/:email', component: ViewComponent },
   { path: 'participants', component: ParticipantsComponent },
   { path: 'pay/:email', component: PaymentComponent },

src/app/app.module.ts

@@ -5,8 +5,8 @@ import { HttpClientModule } from '@angular/common/http';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { SignUpComponent } from './sign-up/sign-up.component';
-// import { CompaniesComponent } from './companies/companies.component';
-// import { CompaniesAddComponent } from './companies-add/companies-add.component';
+import { CompaniesComponent } from './companies/companies.component';
+import { CompaniesAddComponent } from './companies-add/companies-add.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import {MatCardModule} from "@angular/material/card";
@@ -46,8 +46,8 @@ import { MatDatepickerModule} from "@angular/material/datepicker";
   declarations: [
     AppComponent,
     SignUpComponent,
-    // CompaniesComponent,
-    // CompaniesAddComponent,
+    CompaniesComponent,
+    CompaniesAddComponent,
     DialogComponent,
     LoginComponent,
     ParticipantsComponent,

src/app/companies-add/companies-add.component.css

@@ -0,0 +1,67 @@
+#cover {
+  background-color:#019875;
+  background-image: url('../../assets/images/cover-background-company-5.jpg');
+  background-repeat: no-repeat;
+  background-position: center;
+  border-top-left-radius:5px;
+  border-bottom-left-radius:5px;
+}
+
+#cover-sm {
+  background-color:#019875;
+  background-image: url('../../assets/images/cover-sm-background.jpg');
+  background-repeat: no-repeat;
+  background-position: center;
+  border-top-left-radius:5px;
+  border-top-right-radius:5px;
+  height:300px;
+}
+
+#box {
+  max-width:1000px;
+  padding:0px;
+  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+}
+
+#form {
+  margin: 40px 40px 10px;
+}
+
+mat-card-title {
+  font-weight:900;
+  margin-bottom:20px;
+}
+
+.label {
+  font-weight:500;
+  color:#019875;
+}
+
+.upload-btn  {
+  margin-right:20px;
+  box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.2), 0px 3px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 9px 0px rgba(0, 0, 0, 0.12);
+}
+
+.submit_button {
+  font-size:20px;
+  font-weight:500;
+  padding: 10px 25px;
+}
+
+a {
+  color:#019875;
+}
+
+.vertical_padding {
+  padding-top:50px;
+  padding-bottom:50px;
+}
+
+.search {
+  padding:20px;
+}
+
+::ng-deep div#mat-select-2-panel {
+  overflow-x: hidden;
+}
+

src/app/companies-add/companies-add.component.html

@@ -0,0 +1,187 @@
+<div style="position:absolute; top:0; left:0; min-height:100%; width:100%; background-color:#EEEEEE" [ngClass.gt-sm]="'vertical_padding'"
+     fxLayout="row" fxLayoutAlign="stretch center">
+
+  <div fxLayoutAlign="center center" fxLayout="row" fxFill>
+    <mat-card fxLayout="row" fxLayout.lt-sm="column" id="box" fxFlex="80" fxFlex.lt-md="100">
+
+      <div fxFlex="60" id="cover" fxLayoutAlign="center end" [fxHide.lt-sm]="true">
+        <img src="assets/images/powered-by-White-Black.png" width="200px" style="margin-bottom:50px;"/>
+      </div>
+      <div id="cover-sm" fxLayoutAlign="center center"></div>
+
+      <div fxFlex="40" id="form" fxLayout="column">
+        <mat-card-title>REGISTER YOUR COMPANY FOR <br> HEADING FOR THE FUTURE</mat-card-title>
+
+        <mat-card-content fxLayout="column" fxLayoutGap="15px" [formGroup]="form" (ngSubmit)="submitForm()">
+
+          <div fxLayout="row" fxLayoutGap="20px">
+
+            <mat-form-field fxFlex="100">
+              <mat-label>Company Name</mat-label>
+              <input matInput formControlName="company_name" required>
+            </mat-form-field>
+
+            <!-- <mat-form-field fxFlex="50">
+              <mat-label>Last Name</mat-label>
+              <input matInput formControlName="last_name" required>
+            </mat-form-field> -->
+
+          </div>
+
+          <div fxLayout="row" fxLayoutGap="20px">
+
+            <mat-form-field fxFlex="100">
+              <mat-label>Company Address</mat-label>
+              <input matInput formControlName="company_address" type="address" required>
+            </mat-form-field>
+
+          </div>
+
+          <div fxLayout="row" fxLayoutGap="20px">
+
+            <mat-form-field fxFlex="50">
+              <mat-label>Company Email</mat-label>
+              <input matInput formControlName="company_email" type="email" required>
+            </mat-form-field>
+
+            <mat-form-field fxFlex="50">
+              <mat-label>Company Contact Number</mat-label>
+              <input matInput formControlName="company_phone" placeholder="07XXXXXXXX | +YY 7XXXXXXXX" type="tel" required>
+            </mat-form-field>
+
+          </div>
+
+          <!-- <div fxLayout="column" fxLayoutGap="10px">
+
+            <mat-label class="label">Company Contact Person</mat-label>
+            <mat-radio-group aria-label="Select an option" fxLayoutGap="50px" fxLayout.lt-sm="column"
+                             fxLayoutGap.lt-sm="20px" formControlName="from">
+              <mat-radio-button value="local">Sri Lanka</mat-radio-button>
+              <mat-radio-button value="international">Another Country</mat-radio-button>
+            </mat-radio-group>
+
+          </div>
+
+          <div fxLayout="column" fxLayoutGap="20px" *ngIf="form.get('from')!.value === 'local'">
+
+            <mat-form-field>
+              <mat-label>University or Institute</mat-label>
+              <mat-select formControlName="university" required>
+                <input matInput formControlName="universityFilter" (keyup)="doUniversityFilter($event)"
+                       appearance="fill" placeholder="Search" class="search"/>
+                <mat-option *ngFor="let university of filteredUniversities" [value]="university.university">
+                  {{university.university}}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+
+          </div>
+
+          <div fxLayout="column" fxLayoutGap="20px" *ngIf="form.get('from')!.value === 'international'">
+
+            <mat-form-field fxFlex="100">
+              <mat-label>Country or Territory</mat-label>
+              <input type="text"
+                     aria-label="Number"
+                     matInput
+                     formControlName="country"
+                     [matAutocomplete]="auto"/>
+              <mat-autocomplete #auto="matAutocomplete">
+                <mat-option *ngFor="let country of countries.filtered | async" [value]="country">
+                  {{country}}
+                </mat-option>
+              </mat-autocomplete>
+            </mat-form-field>
+
+          </div> -->
+
+          <div fxLayout="column" fxLayoutGap="20px">
+
+            <mat-label class="label">Contact Person Details</mat-label>
+
+            <mat-form-field fxFlex="100">
+              <mat-label>Full Name</mat-label>
+              <input matInput formControlName="full_name" required>
+            </mat-form-field>
+
+          </div>
+
+          <div fxLayout="column" fxLayoutGap="20px">
+
+            <mat-form-field fxFlex="100">
+              <mat-label>Designation</mat-label>
+              <input matInput formControlName="designation" required>
+            </mat-form-field>
+
+          </div>
+
+          <div fxLayout="row" fxLayoutGap="20px">
+
+            <mat-form-field fxFlex="50">
+              <mat-label>Email Address</mat-label>
+              <input matInput formControlName="email" type="email" required>
+            </mat-form-field>
+
+            <mat-form-field fxFlex="50">
+              <mat-label>Contact Number</mat-label>
+              <input matInput formControlName="phone" placeholder="07XXXXXXXX | +YY 7XXXXXXXX" type="tel" required>
+            </mat-form-field>
+
+          </div>
+
+          <!-- <div fxLayout="column" fxLayoutGap="20px">
+
+            <mat-form-field>
+              <mat-label>Year of Study</mat-label>
+              <mat-select formControlName="year" required>
+                <mat-option *ngFor="let year of years" [value]="year">
+                  {{year}}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+
+          </div> -->
+
+          <!-- <div fxLayout="row" fxLayoutGap="0px">
+
+            <input hidden type="file" accept=".pdf" class="file-input" formControlName="cv"
+                   (change)="onFileSelected($event)" #fileUpload required>
+
+            <div class="file-upload" fxLayout="column" fxLayoutGap="10px">
+              <mat-label class="label">Upload your curriculum vitae (PDF) *</mat-label>
+
+              <div fxLayout="row" fxLayoutAlign="start center">
+                <button mat-mini-fab color="primary" class="upload-btn" (click)="fileUpload.click()">
+                  <mat-icon>attach_file</mat-icon>
+                </button>
+                {{ formData.cv || "" }}
+              </div>
+
+            </div>
+
+          </div>
+
+          <div fxLayout="row" fxLayoutGap="20px" style="padding-top:20px;">
+
+            <mat-checkbox formControlName="consent" required></mat-checkbox>
+            <span>
+              I have read and agree to AIESEC Sri Lanka's <a  target="_blank" href="https://aiesec.lk/privacy-policy">Privacy Policy</a>
+              and I may be contacted by AIESEC representatives for further processing.
+            </span>
+
+          </div> -->
+
+          <div fxLayout="row" fxLayoutGap="20px">
+            <button class="submit_button" mat-raised-button color="primary" (click)="submitForm()">
+              SUBMIT
+            </button>
+          </div>
+
+        </mat-card-content>
+
+      </div>
+
+    </mat-card>
+  </div>
+
+</div>