iteria-app / material-ui-starter Goto Github PK

View Code? Open in Web Editor NEW

1.0 1.0 19.0 23.28 MB

We are testing Iteria Lowcode using Material-UI components

Home Page: https://demo.iteria.tech

License: MIT License

HTML 0.53% TypeScript 98.95% JavaScript 0.46% CSS 0.06%

api hasura lowcode materia-ui react react-intl

material-ui-starter's People

Contributors

Stargazers

Watchers

Forkers

mecirmartin mak1k1 chvister mat-app martinhampel slavo36 item21 jozef-slezak rastislav-balcercik michal-komora patrikondrus hanzeltomas iteria-poc duartejc shaoe

material-ui-starter's Issues

Posthog Toolbar and Session Recording

add Posthog Toolbar
tests Posthog Session Recording and Toolbar

Infinite scroll for list of cards

Start with: iteria-app/example-grommet#11 first

Goal: list of material ui cards for https://iteria-app-example01.herokuapp.com/console/data/schema/public/tables/customer

Use case: use can list not only in data-grid (useful when you see some logo/image)

prepare example for iteria-app/lowcode#141
infinite scroll (not limit offset because we would see sometimes one row multiple times) (use hasura relay pagination, or seq number)

browser refresh https://demo.iteria.tech/app/customers does not works in netlify

displays 404

please check netlify.toml

check this problem in netlify forum/docs:

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

CustomerListView zobrazit Loading

Please use Loadin.tsx skeleton

Themes

import `@/` instead `../`...

Data Grid filter/sort/pagination => graphql query

Goal: graphql filter/sort/page on Material-UI data grid

Checklist:

modify graphql query searchCustomers to have optional where/order_by/limit/offset (test your query in https://iteria-app-example01.herokuapp.com/console) https://github.com/iteria-app/example-material-ui/blob/530d46dd12c06561409383b63be593ef6a957660/src/views/customer/CustomerListView/operation.graphql#L16
use searchCustomers graphql query in https://github.com/iteria-app/example-material-ui/blob/main/src/views/test/GeneratedCustomers.tsx (using hook useSearchCustomersQuery() like in https://github.com/iteria-app/example-material-ui/blob/cffe7493a443e3a9b7bf0f9ba4d4a4cdae7758c2/src/views/customer/CustomerListView/index.tsx#L26)
handle MaterialUI filter/sort/page change (see screenshot above) to change query where/order_by/limit/offset

`checkAuth`, `useAuth()` (login using: Netlify, Auth0, Firebase)

let's have some pages that require authentication using Netlify, Auth0 and Firebase:

vid. web-akular AuthProvider (abstrakcia nad Firebase, Auth0, Keycloack)

useAuth() https://github.com/Swizec/useAuth,
netlify and Auth0 https://useauth.dev/docs/netlify-identity/
firebase https://usehooks.com/useAuth/
https://auth0.com/blog/complete-guide-to-react-user-authentication/
react checkAuth https://ui.dev/react-router-v5-philosophy-introduction/
show / hide one menu item
show another menu iterm display login on another protected router

Localization

Goal: at least one translated message:

IntlProvider
intl.formatMessage and/or <FormattedMessage

iteria-app/example-grommet@0d2439c

iteria-app/example-grommet@234d099

Data Grid - filter orders by customers

Goal: query by relation

Use case: new datagrid on new page orders should allow user to filter customers (modal dialog) and by doing this filters

https://iteria-app-example01.herokuapp.com/console/data/schema/public/tables/order

`No VSCode Iframe found` ked zavriem vscode

Ked zavriet VS Code tak uz neviem navigovat do kodu v netlify

No VSCode Iframe found

Customer Detail - graphql mutation

call hasura mutation and extend gui screen

urql graphql client

query customers from hasura instance https://iteria-app-example01.herokuapp.com/console
using urql graphql client https://github.com/FormidableLabs/urql/tree/main/packages/react-urql/examples/1-getting-started

BUG Default commit message!

Vypytat commit hlasku od pouzivatela (zistime ci to Miso spravili pred tyzdnom alebo nie najprv)

Support for multiple environemnts & duplicit lock filees

package.json hardcoded development:

    "build:development": "vite build --mode development",
    "serve": "vite preview",
    "codegen:watch": "cross-env DOTENV_CONFIG_PATH=./.env.development graphql-codegen --require dotenv/config  --watch --config codegen.yml",
    "codegen": "cross-env DOTENV_CONFIG_PATH=./.env.development graphql-codegen --require dotenv/config --config codegen.yml"

netlify.toml

command = "npx [email protected] i --store=node_modules/.pnpm-store && npx [email protected] run build:development"

duplicit/both pnpm lock and npm lock

cleanup data.ts

We are fetching data from server using graphql therefore https://github.com/iteria-app/example-material-ui/blob/main/src/views/customer/CustomerListView/data.tsx is probably obsolete. If so then delete the obsolete file.

na localhoste nefunguje generovanie

všetko sa vygeneruje aj je to vidieť vo vs code ale neprebehne správne react refresh

Stackblitz bug

`@casl` & Hasura permissions for multiple roles

@msvoro, this issue continues #31

Pages accessible only for certain roles

Show hide menu using https://github.com/stalniy/casl
Configure multiple roles and permissions https://hasura.io/docs/latest/graphql/core/auth/authorization/permission-rules.html

Entity Fields accessible only for certain roles

Show hide entity fields using https://github.com/stalniy/casl
use graphql query directives @skip/@include according to permissions https://hasura.io/docs/latest/graphql/core/databases/postgres/queries/variables-aliases-fragments-directives.html for individual fields

Extend Hasura for quering permissions

Implement either hasura action (on top of hasura permissions tables/views or rest api https://hasura.io/docs/latest/graphql/core/auth/authorization/permission-rules.html) or postgres function

query currentUserAbilities {
  currentUserAbilities {
    action
    subject
    fields
    conditions
  }
]

returns:

[
  {
    action: ['select', 'insert', 'update'],
    fields: ['id', 'seq', 'name', ...], 
    subject: 'Entity1',
    conditions: { created_by: '%current_user%'}
  },
  {
    inverted: true,
    action: ['select', 'insert', 'update', 'delete'],
    fields: ['id', 'seq', 'name', ...],
    subject: 'Entity2',
    conditions: { created_by: '%current_user%'}
  }
]

FYI, this example pull request will be used for codegen as an example.

add viacery fields prida len prvy

odignoruje ten dalsi field aj ked mam dva snackbars

Graphqlcodegen for Hasura query and mutation

Automaticsly generate graphql types for customer query and mutation and use it. Modify the customer query to use grspql query fragments.

cleanup Types.ts

Eeach react component should have it's own input types near to functional component definition.

Build failed due to warnings

I have setup netlify to preview builds for example-material-ui and it is failing due to following compilation error:

6:22:51 AM: ────────────────────────────────────────────────────────────────
6:22:51 AM:   1. Build command from Netlify app                             
6:22:51 AM: ────────────────────────────────────────────────────────────────
6:22:51 AM: 
6:22:51 AM: $ yarn build
6:22:51 AM: yarn run v1.22.4
6:22:51 AM: $ yarn generate && react-scripts build
6:22:52 AM: $ graphql-codegen --config codegen.yml
6:22:53 AM: [04:22:53] Parse configuration [started]
6:22:53 AM: [04:22:53] Parse configuration [completed]
6:22:53 AM: [04:22:53] Generate outputs [started]
6:22:53 AM: [04:22:53] Generate src/generated/graphql.ts [started]
6:22:53 AM: [04:22:53] Load GraphQL schemas [started]
6:23:00 AM: [04:23:00] Load GraphQL schemas [completed]
6:23:00 AM: [04:23:00] Load GraphQL documents [started]
6:23:00 AM: [04:23:00] Load GraphQL documents [completed]
6:23:00 AM: [04:23:00] Generate [started]
6:23:00 AM: [04:23:00] Generate [completed]
6:23:00 AM: [04:23:00] Generate src/generated/graphql.ts [completed]
6:23:00 AM: [04:23:00] Generate outputs [completed]
6:23:02 AM: Creating an optimized production build...
6:24:10 AM: 
6:24:10 AM: Treating warnings as errors because process.env.CI = true.
6:24:10 AM: Most CI servers set it automatically.
6:24:10 AM: 
6:24:10 AM: Failed to compile.
6:24:10 AM: 
6:24:10 AM: src/theme/shadows.ts
6:24:10 AM:   Line 1:1:  Assign array to a variable before exporting as module default  import/no-anonymous-default-export
6:24:10 AM: src/theme/typography.ts
6:24:10 AM:   Line 1:1:  Assign object to a variable before exporting as module default  import/no-anonymous-default-export
6:24:10 AM: src/utils/getInitials.ts
6:24:10 AM:   Line 1:1:  Assign arrow function to a variable before exporting as module default  import/no-anonymous-default-export
6:24:10 AM: src/views/customer/CustomerListView/UpdateCustomer.tsx
6:24:10 AM:   Line 34:10:  'state' is assigned a value but never used                                                                                                                                                                                                                                                                                                            @typescript-eslint/no-unused-vars
6:24:10 AM:   Line 44:6:   React Hook React.useCallback has missing dependencies: 'customer?.email', 'customer?.name', 'customer?.phone', 'handleClose', 'newEmail', 'newName', and 'newPhoneNumber'. Either include them or remove the dependency array. If 'handleClose' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps
6:24:10 AM:   Line 47:5:   React Hook React.useCallback has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked                                                                                                                                                                                                      react-hooks/exhaustive-deps
6:24:10 AM:   Line 48:5:   React Hook React.useCallback has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked                                                                                                                                                                                                      react-hooks/exhaustive-deps
6:24:10 AM:   Line 49:5:   React Hook React.useCallback has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked                                                                                                                                                                                                      react-hooks/exhaustive-deps
6:24:10 AM: src/views/customer/CustomerListView/data.tsx
6:24:10 AM:   Line 3:1:  Assign array to a variable before exporting as module default  import/no-anonymous-default-export
6:24:10 AM: src/views/customer/CustomerListView/index.tsx
6:24:10 AM:   Line 26:18:  '_reexecuteQuery1' is assigned a value but never used  @typescript-eslint/no-unused-vars
6:24:10 AM: src/views/product/ProductListView/data.tsx
6:24:10 AM:   Line 3:1:  Assign array to a variable before exporting as module default  import/no-anonymous-default-export
6:24:10 AM: src/views/test/GeneratedCustomersTable.tsx
6:24:10 AM:   Line 2:28:  'DataGrid' is defined but never used          @typescript-eslint/no-unused-vars
6:24:10 AM:   Line 6:15:  'columns' is assigned a value but never used  @typescript-eslint/no-unused-vars
6:24:10 AM: error Command failed with exit code 1.
6:24:10 AM: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
6:24:10 AM: 
6:24:10 AM: ────────────────────────────────────────────────────────────────
6:24:10 AM:   "build.command" failed                                        
6:24:10 AM: ────────────────────────────────────────────────────────────────
6:24:10 AM: 
6:24:10 AM:   Error message
6:24:10 AM:   Command failed with exit code 1: yarn build
6:24:10 AM: 
6:24:10 AM:   Error location
6:24:10 AM:   In Build command from Netlify app:
6:24:10 AM:   yarn build
6:24:10 AM: 
6:24:10 AM:   Resolved config
6:24:10 AM:   build:
6:24:10 AM:     command: yarn build
6:24:10 AM:     commandOrigin: ui
6:24:10 AM:     publish: /opt/build/repo/build
6:24:11 AM: Caching artifacts
6:24:11 AM: Started saving node modules
6:24:11 AM: Finished saving node modules
6:24:11 AM: Started saving build plugins
6:24:11 AM: Finished saving build plugins
6:24:11 AM: Started saving yarn cache
6:24:11 AM: Finished saving yarn cache
6:24:11 AM: Started saving pip cache
6:24:11 AM: Finished saving pip cache
6:24:11 AM: Started saving emacs cask dependencies
6:24:11 AM: Finished saving emacs cask dependencies
6:24:11 AM: Started saving maven dependencies
6:24:11 AM: Finished saving maven dependencies
6:24:11 AM: Started saving boot dependencies
6:24:11 AM: Finished saving boot dependencies
6:24:11 AM: Started saving rust rustup cache
6:24:11 AM: Finished saving rust rustup cache
6:24:11 AM: Started saving go dependencies
6:24:11 AM: Finished saving go dependencies
6:24:14 AM: Build failed due to a user error: Build script returned non-zero exit code: 2
6:24:14 AM: Creating deploy upload records
6:24:14 AM: Failing build: Failed to build site
6:24:14 AM: Failed during stage 'building site': Build script returned non-zero exit code: 2
6:24:14 AM: Finished processing build request in 2m41.932037701s

Update theme and check `makeStyles()`

Check all occurences of makeStyles() if they are properly used. Consider updating the theme or introducing local styles.

It came up here https://github.com/iteria-app/example-material-ui/pull/29/files#r655257566

Add React Router

Add react router
Create new route in application

Switch theme to dark mode

@msvoro, let's have icon (sun/moon) for switching between dark and light mode. Similar to https://explore.fast.design/components/fast-accordion

Change theme in <ThemeProvider https://github.com/iteria-app/example-material-ui/blob/96f7946a35db41023d598705bac0495651a09380/src/App.tsx#L16

https://bareynol.github.io/mui-theme-creator/

Display CustomerListView table while clicking on menu item "Customers"

We should not display here should be generated customer table (for that purpose we have Generated customers menu item)

Duplicit operation.graphql and Graphql.ts

Which one are we using? (graphqlcodegen, import)
We need only one => delete the redundant.

generatePage() nullpointer ak zadam viac ako jednu page

ak vybereme viacero entit tak to padne:

index.js:35435 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'type')
    at getNestedOfType (index.js:35435:33)
    at index.js:53213:31
    at eventListenerCallback (index.js:53373:9)

ak vyberiem len jednu entitu tak to funguje