Instead of set it up "userService.overlayTheme();" for each component that using dialog, it must be can setup once at admin.component.ts that can be applied to all components

If this issue fixed, it will be fixed for #101 and #100 too

We can currently set a future timestamp for a document to be published. But the challenge is when we want to filter what documents that has been published and which ones will be published. Since it requires a query check on publish date as well as its status.

The proposal is to introduce another document state named scheduled that is set whenever the publish date is set on a document and the date is set in the future.

So a document can be

• unpublished - it must have a timestamp equal to now or in the past
• published - it must have a timestamp equal to now or in the past
• scheduled - force set to this value if the published timestamp is in the future

First of all, the progress bar when uploading an image is a bit hackish.

Secondly, when uploading an image there is a significant delay after the upload is complete until it is displayed. This is caused by the cloud function processing and image scaling, so we can't track progress.

Improve the upload progress display and find a good way to display or communicate that the user will have to wait for a couple of seconds until the image is displaying in the grid.

Observation

Templates are not keeping line breaks after being saved to Firestore

Expectation

Line breaks and formatting such as tabs, and spaces should be kept "as is" when saving and reading data from Firestore.

Analysis

Please see related post on StackOverflow that are narrowing down the problem to probably being an issue of reading the data from Firestore and putting it into CKEditor.

Dialog component still using light theme on dark theme user setting

Got error permission for saving template with role "owner"

Create an input form where the user can select what languages that the site will be supporting (the public facing site).

• Can add any number of languages
• Can remove languages
• Must choose one default language

This is preparing for localization of content later on the public facing site so that the content can be served as:

• example.com/blog/my-blog-post
• example.com/en/blog/my-blog-post
• example.com/id/blog/blog-post-aku

This is the related component: https://github.com/oddbit/tanam/tree/angular/src/app/admin/settings/site-form

Problem

First login doesn't grant proper access to CMS.

Breakdown

Tanam is using custom claims in the auth object to enforce role based authorization. But the roles are being set in an "on create account" cloud function so the user will already have received the auth token, without claims, before the claims are being set. That effectively makes the user unable to get the access that he/she has been granted in parallel on server side.

Workaround

Currently, the workaround is to log out and login again immediately after creating an account.

Proposal

This should be solved by refreshing token in the CMS frontend app.

There are three input types related to time and date

• date - https://github.com/oddbit/tanam/blob/develop/models/document-type.models.ts#L6
• time - https://github.com/oddbit/tanam/blob/develop/models/document-type.models.ts#L7
• date-time - https://github.com/oddbit/tanam/blob/develop/models/document-type.models.ts#L11

They should all have a input form field each, where the date-time is a combined input of the date and time.

The "only time" field should stor its value as a 24h string HH:MM (00:00, 13:15, 23:59, etc) so that it can be easily parsed.

Consider the date and time picker on Google Calendar as a reference or find other good examples in exisiting products.

As displayed in cloud functions log

• The input form should use a drop-down selection instead of a free text input
• The options in the drop down should be
  • site_title | page_title
  • site_title • page_title
  • page_title
• The presentation text in the dropdown should show real values, instead of the site_title and page_title which are only values stored in DB. So for the options above it should present
  • My awesome blog | This is my first blog post
  • My awesome blog • This is my first blog post
  • This is my first blog post

So the data stored in Firebase should look like it does right now. It's just the presentation of the input form that should be changed.

The create new template button not working.

Creating a new template should create a firestore document with an ID that is the same as the "selector" (name of the template). E.g. the ID of "blog template" is blog.

Currently documents are deleted right away if clicking the "delete" button in the document form.

The delete button should open a confirmation dialog with the text "Are you sure that you want to delete the : <title>"

• Yes
• No

A new document is not being saved properly until the document status is changed to "published". This might perhaps have been introduced in the #104 issue (PR #106).

See this screen recording for behavior: https://drive.google.com/file/d/1P5WR_FFwMV-yu8lUQYgFvSBKArFxhM1Q/view

The create new theme button should create an empty theme with a "Firestore auto-id".

It is okay to copy all templates from the "default" theme as a initial set of templates for the new theme.

Theme developers will be able to create arbitrary Firestore queries using the {@documents} helper.

The query will require another composite index if it is not using the default sortBy attribute.

A reasonable expectation from the user is that there is a notification of the need to create the index or even better a way to auto-create it with the user's approval.

The date/time form doesn't handle manual change of the value very well.

The use case would be if the user just want to make a slight change to the date, such as rounding the time of the publish date or just changing the date without changing the time.

As seen in the gif, the time change doesn't stay with the provided value once the field lose focus

Reproduce

1. Login to admin CMS
2. Go to document type settings
3. Select a document type, e.g Author: /_/admin/type/author/edit
4. Click "Edit template"

The "edit template" form will open the default theme without prefilling the selector field.

Expectations

1. The selector field should be prefilled with the id of the document type (i.e. blog, page, etc)
2. The template edit form should use currently active theme as configured in site settings.

This error occurred because of status value is undefined or not setting up with default value

Remove this side-scrollbar from the media files page. It is currently always being displayed. The correct behavior is that content should scale to fit and reduce in number of columns as the width becomes smaller, to the point where it shifts to a mobile view.

Hi, recently I found your cms from my friend, and I think this is another great firebase cms. But when I observer how the wysiwyg worked, I found that the image uploaded from there saved as base64 to firestore, not saved in cloud storage.

This drop down select input should display both the icon and its name when in collapsed mode. Please see image below for how the expanded selection looks like.

When referring to other documents in a template there need to be a dependency graph that can be traversed to identify which documents that might be affected and need to be re-rendered.

There is an input form type declared as "author" whose purpose is to allow a document to be linked to an author. The form element should consist of the fields

• name - mandatory
• profileURL - optional, validate URL value
• email - optional, validate email value

Consider the custom form field example on how to create a multi-part field.

The values of the author form filed should be stored as a map in the document's data.

Ability to automatically convert an image either .jpg or .png to a .webp format.

Unify the styling of the page header so that it is coherent with the styling of breadcrumbs.

The current save button can be useful to have when just saving the current state of work. Add another button that says "Save and close" that navigates back to the overview page for that document type.

When we're creating new document types, we must slugify the document type id that is derived from its name. We don't want to allow spaces in IDs.

The slugification should only allow:

• Lowercase letters
• Numbers
• The hyphen character -

Here is a display of the error, where we have a document type with a space in its id

The dialog must be using dynamic theme based on user setting (In this case dark theme must be applied to dialog if user set dark theme on setting)

Change the theme rendering so that a theme must include full HTML similar to Jekyll themes.

The styling of media gallery is broken and images doesn't scale down to fit the width of their card.

Expected behavior is that the image is proportionally scaled down to fit inside the card (center crop or something like that to zoom to best fit that fills the width of the card.

Hey! This project looks awesome, I'd love to play around with it.

It looks like there is an issue getting the minimal example to work though.

Repro steps:

$ git clone https://github.com/oddbit/tanam
$ cd tanam/examples/minimal/functions
$ npm install
$ tsc
src/index.ts:2:24 - error TS2307: Cannot find module 'tanam'.

2 import * as tanam from 'tanam';
                         ~~~~~~~

src/index.ts:16:15 - error TS2307: Cannot find module 'tanam'.

16 export * from 'tanam';
                 ~~~~~~~

Any suggestions on how to fix this? I tried downloading this repo, compile it and use npm link but that gives the same error.

Currently media file are deleted right away if clicking the "delete" button in the document form.

The delete button should open a confirmation dialog with the text "Are you sure that you want to delete the : <title>"

• Yes
• No

Save function can trigger even the button is disable

Create a component modal dialog that can be reused by another component

PROBLEM
There is no feedback from system after clicking save button on edit content type

SOLUTION
Adding snackbar and navigate back to content type list

The modal image picker in document form has some image alignment issues (see picture below).

This error was first encountered after switching to use WebP file format instead of the original image in gallery and previews.

Create a content type that can refer to another document and embed its data.

In the screenshot above, the form is actually untouched and unchanged. But the save button is enabled.

Make the save button disabled until there is a change in the document. See the documentation for reactive forms for the different states of a form: https://angular.io/guide/form-validation#control-status-css-classes

Adding a Google Analytics tracking code (or a Tag Manager code) should automatically inject and configure a the script snipped on all web pages.

Tanam should be able to detect which type of code that has been entered by the format of the tracking code.

For example.

• UA-92412576-1 - Google Analytics
• GTM-KS9LSVW - Google Tag manager

Add full configuration for document type form.

• isTitle input for fields (only one field can be "title")
• isStandalone toggle to determine whether a document will have a public URL

Filtering documents on page overview of documents not filtering based on status "all", "published", "unpublished"

resiveAndConvertImage should probably read resizeAndConvertImage

The picker still using the light theme even the user setting using dark theme

Feature
User can delete a content type with a confirmation of deletion. When content type deleted, the documents that using same content type will be deleted too

Problem

Tanam didn't have action to show detail of file to user

Breakdown

The dialog detail of file will be containt

• File name
• File type
• Date Uploaded / Created

Proposal

This should be solved by creating dialog for file detail when user click on "details"

1. The form field label should float above the UI element.
2. Text editor content should be empty string if the initial value is null or "empty string"

Create a custom form element that is picking images from user uploaded images.

Theme not working on dialog create new template

Observation

It seems like the rich text editor is still stringifying null or undefined values.

Expectation

Editor content should be "empty string" if nothing provided or trying to set null or undefined