firecmsco / firecms Goto Github PK

Hi there!

Just wanted to suggest that it will be nice to have a string editor that allows us to format the string and it gets uploaded as a html string in firebase. I know there is the markdown feature but in some scenarios especially for web, it will be cool to save html strings! :)

We could use one of the popular libraries like Quill or CKEditor.

Hi again!

In the latest version, that is 0.23.0, if I press the three dots to access the copy/delete menu, it opens up the doc edit popup at the same time as the menu shows up. Now if I press delete, the delete confirmation shows up and the address bar changes to the host/collection/[doc id]. When I press Ok on delete, the app crashes with a type error.

It seems like it is because the address bar is still pointing to the doc that I deleted.

Also, I like the new copy feature! I was going to mention that as a suggestion.

I have followed the example referencing other documents like the related products field does. My question is, is it possible to reference a subcollection in the current document? Example code below:

    questions_list: {
      title: "Questions associated with this test",
      description:
        "To add questions, it's recommended to use the CSV uploader.",
      dataType: "array",
      readOnly: true,
      of: {
        dataType: "reference",
        collectionPath: "tests/<currentDocId>/questions", // Is something like this possible?
      },
    },

Note the comment for where I am referring to in the question. Thank you!

I see that there's filterableProperties present here, but what about setting an initial filter? For example, if I want a collection to automatically sort by date, is there existing functionality to implement this?

Hi there!

I have a field that is of array type and stores string URL of uploaded images. The images are uploaded through the storageMeta config, which is set as follows:

imageUrls: {
            title: "Images",
            dataType: "array",
            of: {
                dataType: "string",
                config: {
                    storageMeta: {
                        mediaType: "image",
                        storagePath: "images",
                        acceptedFiles: ["image/png"],
                        storeUrl: true,
                    }
                }
            }

When I try to drag and drop images in this field, the app crashes with the following error:

If I upload by clicking and selecting the files, then it works. Will be thankful if you could take a look. :)

I just saw there is validation for timestamp data types. I want to set the minimum date to be the today's date. How to set tody's date in minimum value?

I have a custom field that shows a dropdown of choices, but it accepts a "year" prop that filters the choices by year. I want to make it such that if the user selects a certain year (defined in the schema), that it passes this year to the custom field in its fieldProps. Is that possible in the current software?

Hi there!

I tried using the timestamp property with auto value set to "on_update". The field gets set correctly if I do make changes to the item and save.

However, if I open an item, don't change anything, and then press save, it throws an error in the on_update field.

Additionally, the browser prompts me that I have unsaved changes even though I did not make any changes. On this popup, if I press discard, it still saves timestamp with the updated timestamp set. Ideally, I think if we save an item without making any changes it should not save the item or make changes to the on_update fields.

Hi!

I have a collection with a field of array references (firebase doc ref). Each reference has another field called title. In the summary view, when the row size is the default M, it works fine. But when I change the row size to anything bigger than M, it shows an error on the array reference field and after a while shows this error:
TypeError: Cannot read property 'title' of undefined

The error occurs in src/preview/components/ReferencePreview.tsx:181

It is fine if I change the row size to anything smaller than M. I think it is because it doesn't load the additional entries when the row is bigger.

I am looking to filter by a Boolean value, but when the filter is unselected, it includes 'true' values as well as 'false' values.

I would like to be able to filter so as to see only entries whose bool value is false.

I hope that is clear, let me know if not!

Thanks,
Jack

For now the labels are hard-coded in English. It would be nice to make them translatable. I would be happy to contribute for French 😄

Hi,

Is there a way to format the date ?

We are missing a configuration, I guess in the DateTimeField component?

https://github.com/Camberi/firecms/blob/master/src/form/fields/DateTimeField.tsx

According to the documentation we should wrap the component in some kind of Provider.

https://material-ui-pickers.dev/localization/date-fns

Hi there!

Thanks so much for creating this project! I have been on the lookout for a good firestore based CMS for various internal use apps and while I found some (and used them), many got outdated and don't use the latest firebase features such as realtime listeners. This one does, and so much more.

I have been using Firebase Emulators for testing new projects but that only works on Firebase 8+. It will be great to have the latest Firebase version in this project so we can test locally before deploying. The current peer dependency version for firebase doesn't allow me to call the useEmulator functions. If I install firebase 8 in my setup and run the app, I get import errors probably because Firebase has changed the way to import after v8.

Hi there!

I am not sure when this started happening; I am unable to remove a reference field (by pressing the x button). It gets stuck in a loading state when pressing the x button. Here is a video:

How do we access the collection that's being searched in the TextSearchDelegate? It seems like we're only provided the query string.

Can image be uploaded to firebase storage still but storing the URL instead of just the path name in String?

In order to improve user experience, the tables should be editable for an experience similar to AirTable.

We need to think about how to integrate this feature with the current entity form validation.

Is it possible to have navigation links that render a React component instead of showing the data table? For example, I'd like to have a home page with usage statistics. Is that a feature in FireCMS currently?

I have a collection with a number dataType, but it's not displayed properly in the collection view. It appears empty.

You can see the issue in this screenshot.

The issue does not affect the edit view.

Hey,

I was wondering whether single content type can be somehow plugged in?

What I mean is that suppose there is a collection "pages" where each doc id is page name and each document has different structure.
For example /pages/about, /pages/home.
about and home are document ids. Each document has its own unique structure.

Firecms navigation is an array of collections and every collection must follow defined schema (Entity).
The easiset workaround I can think of right now is to build multiple views for a single collection and apply filter on a document field that uniquely identifies that document in the collection:

const navigation: EntityCollectionView[] = [
  buildCollection({
    group: 'Pages',
    name: 'Home',
    relativePath: 'pages',
    schema: homePageSchema,
    initialFilter: {
      page: ['==', 'home']
    }
  }),
  buildCollection({
    group: 'Pages',
    name: 'About',
    relativePath: 'pages',
    schema: aboutPageSchema,
    initialFilter: {
      page: ['==', 'about']
    },
  })
];

Although each document needs an additional field in order to be uniquely filtered out, theoretically it should work.
However.... This does not work in reality. Firecms generates views based on path in firestore.
With above workaround, 'Single-Types' will share the same view: /c/pages that will display only first matched EntityCollectionView. Maybe an additional prop to specify custom route will do the trick?

An ideal API would look something like:

buildSingleType({
  group: 'Pages',
  name: 'Home',
  relativePath: 'pages/home',
  schema: homePageSchema,
})

Let me know what do you think

Does FireCMS allow you to add custom buttons on the toolbar of the collection view? I'd like to be able to add an "Export" button here, but I can't find the place to add components to the toolbar.

In document editing page, the Discard button next to Save button does not seems navigate back to the previous page.

Hi there!

I have a collection where I want each field to be populated even if they are empty. So string fields should be set in firebase but empty that is, field: "". When I try to do this through the defaultValues property in the schema by settings the field as an empty string, it doesn't actually save that field. I assume that is because empty strings are just not added as the property.

Before 0.25.2, I had a workaround. I was populating those fields through the onPreSave function, in this manner:
if(!values.title) values.title = "
After updating to the latest version, doing the above causes the app to crash. The error I get is "Too many re-renders". Here is a screenshot:

I'll be thankful if you could take a look!

Algolia search works fine but it some cases if the search property is missing in the Algolia index it will raise an exception. Possible fix:

diff --git a/src/collection/CollectionTable.tsx b/src/collection/CollectionTable.tsx
index 209016e1f166..0db423796d69 100644
--- a/src/collection/CollectionTable.tsx
+++ b/src/collection/CollectionTable.tsx
@@ -406,7 +406,7 @@ export default function CollectionTable<S extends EntitySchema<Key>,
                         focused={isFocused}
                         setPreventOutsideClick={setPreventOutsideClick}
                         setFocused={setFocused}
-                        value={entity.values[propertyKey]}
+                        value={entity?.values ? entity.values[propertyKey] : undefined}
                         CollectionTable={CollectionTable}
                         property={property}
                         openPopup={openPopup}

I like the new checkbox feature, together with allowing multiple deletes. But it is inconvenient right now because whenever I check an item, it also opens up the item details popup which I then have to close to proceed with checking more items.

This is similar to the issue where clicking the 'three dots' to open the copy/delete menu also opens the item details popup.

When trying to run this, it says "EntityCollectionView" is not exported from '@camberi/firecms'. Any thoughts @fgatti675 fgatti675? Thank you!

import React from 'react';
import { CMSApp, EntityCollectionView, buildSchema } from '@camberi/firecms';
import { requireAuth } from 'util/auth.js';

import products from './data/schemas/products.json';
import locales from './data/schemas/locales.json';

function Admin(props) {
	return (
		<CMSApp
			name={'CMS'}
			authentication={() => {
				return true;
			}}
			navigation={
				<EntityCollectionView
					relativePath="products"
					schema={buildSchema(products)}
					name="Products"
					subcollections={[
						{
							name: 'Locales',
							relativePath: 'locales',
							schema: buildSchema(locales),
						},
					]}
				/>
			}
			firebaseConfig={{
				apiKey: '',
				authDomain: '',
				databaseURL: '',
				projectId: '',
				storageBucket: '',
				messagingSenderId: '',
				appId: '',
				measurementId: '',
			}}
		/>
	);
}

export default requireAuth(Admin);

// TODO: Restrict to admin users only.

When trying to access the page, there's a bunch of @material-ui missing dependency issues. I think the module doesn't properly download @material-ui modules.

./node_modules/@camberi/firecms/dist/index.modern.js
Module not found: Can't resolve '@material-ui/core' in '/.../node_modules/@camberi/firecms/dist'

Let's enable all OAuth providers. Let's start with Email and Phone.

https://firebase.google.com/docs/auth/web/firebaseui

(I'll setup the necessary App keys for FB, Github, Twitter, etc...)

Implement and expose the API
Candidate: https://gist.github.com/SagiMedina/f00a57de4e211456225d3114fd10b0d0

It would be awesome to be able to provide other type of login such as email / password.

We can see the use of AuthContext and I am not sure I can "simply" override it in my index.tsx. Nevertheless, it would be nice to have common login providers configured / ready out of the box.

https://github.com/Camberi/firecms/blob/master/src/CMSApp.tsx#L221

Hi there!

I like the new feature that allows us to open the side dialog modal through a hook; that way we can create custom fields that can allow us to use the library's way of creating new documents.

I have another use case, that I was wondering how I could accomplish. Currently, if I have an array of references field in firecms, it shows this nice button 'Edit {field}'. Clicking on that opens the collection dialog where we can search and select any reference items. I wish to have a custom field that allows us to select reference items similar to how firecms already does; but in addition to that, I wish to provide a button that says 'Add new'. The 'Add new' button will allow adding a new document to that reference field and once added, automatically assign the new reference in the document I was editing.

For instance, I have this common' images' collection where I store all images details. Every other document that uses images then has a reference to the images used from the images collection. However, to add a new image, users need to first go to the images collection, upload a new image and then come back to doc they were trying to assign the image to and then select it. It will be much easier if I provided a custom field where they could select existing images through firecms's dialog box but also upload new ones directly to the images collection without navigating away.

I was thinking that this could be accomplished by using the side entity controller to create the new item and allow selecting reference items through a hook that allows me to call the reference selection dialog.

Alternatively, there could probably be another way to do this and I'll be thankful if you have any suggestions.

Allow grouping several collectionViews under a sub menu

For example:

Quiz

• questions
• feedback

Hi there!

Before v0.25.1, I was able to show additional columns where I wanted through the properties set in the entity collection. So, for example, if I had an additional column with id "imagePreview", I could use it in the properties this way:
... properties: ["updatedOn", "imagePreview", "title"] ...

But in the latest version, if we use this way there is a type error saying the schema is missing the imagePreview property. Since the imagePreview is an additional column and not a property, I am not sure how to add it to the properties for the schema.

I'll be thankful if you could look into it. :)

Allow references to omit the schema, which can be inferred using only the collectionPath
This would allow to use also the corresponding filters and text search specified there.

Hi there!

I have an array of map property and each item in the map is of shape {title: string, body: string}. This was working in 0.24 versions but now when you press 'Add' on that property it crashes the app.

Here is how the property is written:
data: { title: "Content", validation: { required: true }, dataType: "array", of: { dataType: "map", properties: { title: { dataType: "string", title: "Title" }, body: { dataType: "string", title: "Body", config: { multiline: true } } } } },

Here is the screenshot of what I get:

Let me know if this is due to a mistake I am making or just a bug! Thanks a lot! :)

I am implementing some additional views to add custom "panels" for the end users. When clicking the menu, it should close the drawer as for the other menu titles. Furthermore, it would be nice to equally format the menu title => make it uppercase as for the rest.

ReactDOM.render(
    <CMSApp
        ...
        additionalViews={[
            statisticsView,
        ]}
        ...
    />,
    document.getElementById("root")
);

Version of FireCMS:

"@camberi/firecms": "^0.18.0",

Steps to reproduce:

1. I have cloned the master of this repository
2. cd example ; yarn install; yarn start
3. edit src/firebase_config.ts with my credentials.

As shown by the screenshot, I am able to read / update the records on Firebase but creating a new record generates an exception.

FirebaseError: Function CollectionReference.doc() requires its first argument to be of type non-empty string, but it was: undefined

FYI

node --version
v14.15.0

BTW, thank you for this nice package!

In order to provide links to the root collections. Users should be able to override this home page.

Module title does not correspond for AdditionalViews as for the "regular" views.

Include custom values for date field.
Feature request from:
#8

The delete hook was moved into the entity schema in 814fbb3, but now it no longer provides the values of the deleted record. Is there a chance this field can be re-added? It's useful because since it's deleted, we can't access those values anymore, but we might need some of the documents' data to finish the deletion.

I want to store array of timestamps in cloud firestore. I can add new item to the database by using below code. But during the preview in the table of the collection in firecms it is giving me error.
my code:

available_dates: {
dataType: "array",
title: "Available Dates",
validation: {
required: true
},
of:{
dataType: "timestamp",
}

    },

Is there a way to override the Mui theme being used in the project? This is not really an issue but it will be super cool to be able to customize the theme! :)

Hi,

I just pulled the latest commit #910711a7b196. It looks there are many dependencies errors that can be seen with command yarn check. If not all them are easily fixed perhaps one could reduce the list.

FYI, I had tiny differences of visual by using npm install && npm run start most probably because of the dependency resolution when facing dep. issues.

Hi there!

Great ongoing work on this! I was thinking that it will be super helpful to have a way to setting the field we wish to sort by initially. For example, we could set the initial sort based on updated date, so we know what docs were last edited.

I apologize if this is supported already. I couldn't find it in the readme doc.

DataType "timestamp" has current date & time displaying in form but never saved in firestore unless it was manually selected by user.

I just want to view all the documents of firestore in the cms, but I want to disable the user from adding new documents to the collection. How can i do this ?