Add icon indicator when sticky note content is saved

[michaelgira23]

That way user doesn't quit before their important information is saved

[GrantBaum]

What file is this in? I think I can fix it but I cant find it.

[michaelgira23]

@GrantBaum this is where the component is for the sticky note homepage module. All code for the homepage modules are found under src/app/home/modules

https://github.com/MyMICDS/MyMICDS-v2-Angular/tree/master/src/app/home/modules/stickynotes

[GrantBaum]

When the TS file says subscription, is that what is saving the sticky?

[sbaumohl]

Yes, refer to the @Todo note

[michaelgira23]

Just to give a bit more guidance, how I would approach this problem is create a new variable within the class that’s called like saving or something, which has a boolean value either true or false. Normally it’s false but when the save is triggered, it’s set to true. Then in the HTML template you simply display a loading icon only if saving is true and that should be it

[GrantBaum]

what if I just use window.alert(JSON.stringify(anyobject));

[GrantBaum]

and an alert pops up that will say success

[michaelgira23]

While it does give users confirmation that the note is saved, I don’t think that would be a good user experience because an alert is pretty intrusive and you have to click “okay.” I think an icon with absolute positioning so it is in the corner of the sticky note may be more subtle and appropriate, or maybe something else.

[GrantBaum]

so like it has like the cloud downloading when the boolean saving is true, and when saved is true there is like a check? Would I have to do any SCSS for that? also, how do I make the boolean change by itself? (sorry im asking a lot)

[michaelgira23]

It's all good! Yes, that's a good idea. It seems that we already have Font Awesome installed so we can make take advantage of this package.

Positioning the icon would require CSS, and you can put that in the .scss file. The .scss file extension is for using the Sass programming language, but similar to how all JavaScript code is valid TypeScript code, all CSS code is valid Sass (.scss) code. Therefore, you can treat it just like normal CSS since we probably don't need to use any of Sass's fancy features for this.

Likely you can create a CSS class for this status icon, and give it position: absolute; and add a bottom: <distance>; right: <distance>; to stick it in the bottom right corner.

We would have to change this saving variable to true before we make the backend API call (about here) and then we set it to false once it's complete (about here).

[GrantBaum]

So I would just put var saving = true, and write the css to put an image in the corner. Is the backend call what changes the image too? If not, how fo I associate the true/false with what image is there? And do I have to put the image in the code? Sorry you are basically doing this for me lol

[sbaumohl]

Angular provides a very easy way to show something conditionally (based on a true/false value) https://angular.io/api/common/NgIf

When the subscription returns with success, that's the backend telling angular that the data has been saved. Knowing that, we can use ngIf to show an icon to the user.

And don't worry, my first contribution was basically the same way.

https://github.com/MyMICDS/MyMICDS-v2-Angular/commit/c637f36e5837186dc94a74f01604681ed3033ef4