Project: codever

Use the @extend directive. In this case the border style is inherited:

.last-search-border {
  border-width: 0.05rem;
  border-style: solid;
  border-color: #495057;
}

.public-bookmarks-last-search {
  @extend .last-search-border;
  background: #f0f2f5;
  color: black;
}

.my-bookmarks-last-search {
  @extend .last-search-border;
  background: linen;
  color: #495057;
}

Reference - https://sass-lang.com/documentation/at-rules/extend

Shared with from Codever.land. 👉 Use the Copy to mine functionality to copy this snippet to your own personal collection and easy manage your code snippets.

Use case

I thought it would be practical to be able to search for search snippets directly from IntelliJ, without having to go to the browser, something like in the following demo:

The implementation is fairly easy, so let’s see how it’s done.

Use only the date part

In the following example only the date part is set. Time is set to by default to 00:00:00. So the following query compares all entries archived within a day (2021-06-14):

var start = new Date("2021-06-14");
var end = new Date("2021-06-15");

db.call_archive.find({archivedAt: {$gte: start, $lt: end}}).pretty();

Use both date and time

You can also specify the Time in ISO format

• new Date("<YYYY-mm-ddTHH:MM:ss>") - specifies the datetime in the client’s local timezone and returns the ISODate with the specified datetime in UTC
• new Date("<YYYY-mm-ddTHH:MM:ssZ>") - specifies the datetime in UTC and returns the ISODate with the specified datetime in UTC

var start = new Date("2021-06-14T13:13:13Z");
var end = new Date("2021-06-14T14:13:13Z");

db.call_archive.find({archivedAt: {$gte: start, $lt: end}}).sort({archivedAt: -1}).pretty(); //sort descending

Reference - https://docs.mongodb.com/manual/reference/method/Date/

Shared with from Codever.land. 👉 Use the Copy to mine functionality to copy this snippet to your own personal collection and easy manage your code snippets.

Use case

I find my self often use the autocomplete function of my last searches in the search box to find and access bookmarks and snippets I recently looked for. I figured out since I do that, why not make it easier. So I did - I added sort of quick access to my last searches directly from the side menu in the landing page. See it in action below:

One tricky part was to show the whole content of the search when its length passes a certain limit. That meant when hovering dynamically changing the content of the html anchor a element. This was even more difficult, because the list is dynamically generated out of the last searches. Let’s see how I implemented that.

There are times when you need to set a css class of a html element dynamically in angular, given a simple or complex condition. This was the case for me when I had to set a different backround-color and color attributes for an anchor a html element to display the latest searches on the landing page of Codever