Currently, I am utilizing Angular 11 in conjunction with Firebase Firestore for my project.
My objective is to retrieve the unique document id from a single document within my collection. This will enable me to establish a sub-collection named "schedules" within that particular document.
In schedule.service.ts, I attempted to follow a guide available at this link: https://github.com/angular/angularfire/blob/master/docs/firestore/collections.md
UPDATE: I have now succeeded in obtaining the full list of data along with the corresponding document ids.
My next query revolves around how to search for and retrieve my document using the UID (user id) to create a sub-collection known as 'schedule'.
schedule.service.ts
import {Injectable} from '@angular/core';
import {AngularFirestore} from '@angular/fire/firestore';
import {Schedule} from '../../model/schedule';
import {map} from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class ScheduleService {
constructor(public fireService: AngularFirestore) {
}
createSchedule(schedulecontent: Schedule) {
// prints
console.log('schedule', schedulecontent);
this.fireService.collection<any>('companies').snapshotChanges().pipe(map(actions => {
return actions.map(a => {
const data = a.payload.doc.data();
const id = a.payload.doc.id;
console.log('id', id, 'data', data);
return {id, data};
});
})).subscribe();
// this only gets the data in the doc
// const res = this.fireService.collection('companies', ref =>
// ref.where('UID', '==', this.authService.currentUserId)).valueChanges().subscribe(data => {
// console.log('data', data[0]);
// });
//
// console.log('test', res);
// return res;
// return this.fireService.collection('companies').doc().collection('schedules').add(schedulecontent);
}
}
schedule.component.ts
import {Component, OnInit} from '@angular/core';
import {NgbModal, NgbDateStruct, NgbCalendar, NgbModalConfig} from '@ng-bootstrap/ng-bootstrap';
import {NgForm} from '@angular/forms';
import {Schedule, ScheduleInterface} from '../../model/schedule';
import {ScheduleService} from '../../service/schedule/schedule.service';
@Component({
selector: 'app-schedule',
templateUrl: './schedule.component.html',
styleUrls: ['./schedule.component.css'],
})
export class ScheduleComponent implements OnInit {
dateModel: NgbDateStruct; // Holds the date structure day/month/year format
date: { year: number, month: number }; // Is for the datepicker month and year selector
schedule: ScheduleInterface; // schedule object uses interface from schedule models
constructor(private config: NgbModalConfig,
private modalService: NgbModal,
private calendar: NgbCalendar,
private serviceSchedule: ScheduleService) {
// Customize default values of modals used by this component tree
config.backdrop = 'static';
config.keyboard = false;
}
// Initialises the schedule object with default values
ngOnInit(): void {
this.schedule = new Schedule('', 'default', this.dateModel, '00:00');
}
// Opens modal window
open(content) {
this.modalService.open(content);
}
// Gives to current day in the datepicker
selectToday() {
this.dateModel = this.calendar.getToday();
}
// Creates new task for the schedule
createSchedule(schedulecontent: NgForm) {
console.log(schedulecontent.value);
if (schedulecontent.valid) {
this.serviceSchedule.createSchedule(schedulecontent.value);
}
}
}
firebase collections https://i.sstatic.net/4KdN0.png