I am looking to enhance my code so that each user who is logged in has their own tasks table, which they can update and delete. Additionally, I need guidance on how to hide menu items tasks, add-tasks, logout for users who are not logged in, and display them when a user is logged in.
To view my application on GitHub, visit https://github.com/AleksandarRadinkovic/angular-app. To access the tasks table, add, delete, or update tasks, you will first need to sign up and then sign in.
To organize tasks for each user, you can create a structured collection by adding a node with the logged-in user's name or key, and then include a task collection within each node.
For instance:
{
"User1" : {
tasks : [
{
taskName : "demotask"
},
{
taskName : "demotask"
}
]
},
"User2" : {
tasks : [
{
taskName : "demotask"
},
{
taskName : "demotask"
}
]
}
}
Firebase stores the details of the logged-in user in browser storage, so it is necessary to check if the user is logged in or not. By using *ngIf, you can show or hide menu items accordingly.
For example:
// Create a common helper Service
checkLoginUser() {
let user = null;
// Code to verify if the user is logged in or not.
// If there is a user in local storage, save it in the "user" variable.
return user ? true : false;
}
// Inject the service into the component and store the user status in a component variable
isUserLoggedIn = this.checkLoginUser();
// Handle showing/hiding using *ngIf in the template
<ul>
<li *ngIf="isUserLoggedIn">Tasks</li>
<li *ngIf="isUserLoggedIn">Add Task</li>
<li *ngIf="isUserLoggedIn">Logout</li>
</ul>
If you want to create a separate table (collection) for each user, you'll need to set up a subcollection specifically for them. Here's a useful resource on how to do that: https://firebase.google.com/docs/firestore/data-model#subcollections
To determine whether a user is currently signed in, take a look at this helpful discussion: How do I detect if a user is already logged in Firebase?. Modify the HTML elements based on the user's authentication state using conditional statements like *ngIf or something similar.
Can someone guide me on how to implement an interface in typescript with callback function? interface LoginCallback{ Error: boolean, UserInfo: { Id: string, OrganizationId: string } } interface IntegrationInterface { Ini ...
The CSS: a:focus { opacity: .75 } a:active { transform: translateY(4px) } The purpose: When keyboard users tab to the link, the :focus style serves as a visual indicator Upon pressing the enter key to activate the link, the :active style provides ...
Is it possible to create a collection using a specific ajax call instead of fetching by its URL? Normally, when fetching by a collection, the URL in the collection is used. However, I need to retrieve results from an ajax call rather than the URL. $.ajax( ...
Here is the HTML code provided: <label for="xxxx" id="Password_label"> <div class="xxxx">Password 555</div> 555 <div class="xxx"></div> </label> I am attempting to replace the text "555" that appears inside th ...
I've developed a small web application and I'm facing an issue where I want to trigger an alert when the 'enter' key is pressed if there is an empty or space value. Currently, the alert appears not only on hitting 'enter' but ...
I have developed a user script to be used within a QuickAdd plugin Macro in Obsidian. The Macro consists of a single step where the user script, written in JavaScript following the CommonJS standard, is executed. Within this script, there is a task to gene ...
Is there a way to create a set of numbers between 0 and 1 that is proportional to an array of sales with varying sizes? For instance, if the sales values are [1, 80, 2000], would it be possible to generate an array like [0.1, 0.4, 1]? ...
The code snippet provided has a branch coverage of only 50% (refer to the coverage report below). I am unsure how to enhance this as there are no if statements present. I suspect that Istanbul must utilize some form of measurement that I have yet to grasp ...
I wonder if this issue is specific to the browser I'm using? Currently, I'm using Chrome... My goal is to enable users to save any text they've highlighted on the page with their cursor. I've set up the javascript/jQuery/ajax and it w ...
I am faced with an interface structured as follows: interface Person { id: number name: string } In my implementation class for this interface, I have the following code: class PersonClass implements Person { id: number = 123 name: string = &apo ...
I am currently working on a project where I have a series of images with captions that appear underneath each one. To show or hide the caption for each image, I am using slideToggle when the image is clicked. $('.imageholder').click(function() ...
Is there a way to hide the endpoint visible in Chrome's devtools under the network tab when data is fetched in React? Can server-side rendering solve this issue? ...
I am currently working on a Typeahead feature with a customized menu using the renderMenu method. In this setup, I have added 2 custom menu items at the bottom - one divider and a button. An issue arises when there are no search results. If I do not inclu ...
I have encountered a perplexing issue when attempting to import an API module into a nested component within a Vue application. After simplifying the problem as much as possible, I created a codesandbox example to demonstrate it. The problem arises when ...
There is a function in my view that transfers a value from a text box to a table on the page. This function updates the URL and calls another function called update_verified_phone(). The update_verified_phone() function uses a model called user_info_model( ...
My canvas-like element is constantly changing its contents. I am attempting to execute a function on each change that captures the current content and adds it to another element, creating a history of all changes. window.updateHistory = func ...
When adding dynamic HTML elements, it is recommended to use delegation binding. However, I am encountering an issue with getting the proper "id" of the form element. $(document).on("submit", "form#add_education", function(e){ e.preventDefault(); ...
I am trying to incorporate background music into my React app using TypeScript. However, I am encountering an issue where changing the music in the parent component does not affect the sound playing in the child node. import React from 'react'; ...
By mistake, I was working on an older version of Angular in StackBlitz (a code-pane platform). I came across a function called enter on GitHub, but it didn't solve my issue. I was working on a grid-based drag and drop feature that allows dragging bet ...
While using Ionic 3/4, I encountered an error when trying to navigate between two components. This error has baffled me because everything was working fine with Ionic just three months ago. I am utilizing lazyload for component navigation. The specific er ...