ais-one / cookbook

VueJS + NodeJS Evergreen Cookbook

1 - IMPORTANT - Read Me First!

The templates (express and vuejs template) and libraries (shareable libraries and tools) projects referenced in the Recipes are based on the two principles below.

1.1 - Updateable Templates

Your project is created using a template. If template updates, can upstream changes be merged with minimal impact on userland codes?

Yes and it is achieved through:

• Design
  • Create folder where all userland code is placed, template must NOT touch this folder
  • template should not to be part of a monorepo
• Process
  • clone template and create remote called upstream pointing to template
  • update framework when necessary by merging upstream into origin

1.2 - Manageable Sharing

You have code shared between multiple projects and libraries. If the code is updated, is breaking dependents and dependencies avoidable?

Yes, based on the following principles:

• Shared libraries should be isolated and versioned. Use last-known-good version and update when ready
• Isolation and versioning can be extended to types (for Typescript) and contracts (for API)
• minimize inter & nested dependencies, and technical debt

---

2 - General Requirements

• git, github (for actions, secrets, etc) & IDE (e.g. vscode), Docker
• unix shell (Windows use git-bash or WSL2)
• node 20+ LTS & npm 9+ (npm i -g npm@latest to update)

3 - Sandbox

Research and exploration Sandbox

4 - Docker Dev Env

Container setups for supporting apps for local development and testing docker-devenv/README.md

5 - Documentation

The docs folder contains useful information is in the midst of a major cleanup

6 - Useful scripts - For Use By Maintainers

• bulk-git.sh: script to diff, pull, push git (for repos in recipies)
• bulk-npm.sh: script to check for and/or update dependencies in package.json (for repos in recipies)

cookbook's Issues

Just a question : The examples are working ?

The examples are working?
I'm been trying to use the component but the examples does not show the component on use?
looks like that are you using the standard table ej:

Reports.vue

Or the object crudTable is just declare, but how to use it?

metadata from firestore

for me the "exists" is always false.

   const metaRef = firestore.collection('meta').doc('party')


    const meta = await t.get(metaRef)
    if (!meta.exists) {
      throw new Error(500)
    }

Thanks

Image in crud table

how to render url image inside the table ?

Question: Possible to auto-generate CRUD components from OpenAPI spec?

Hello!

I just stumbled upon this library, and it feels like it would be immensely helpful in my development process.

I'm curious, though, whether there's any component of this application that can automatically generate components (or pages, or views, or whatever you call it) for each of the endpoints exposed by an OpenAPI spec document.

I noticed that the example servers expose their own OpenAPI spec doc, but it appears that the demos use a predefined example data model that isn't automatically generated from that spec.

Any assistance would be much appreciated!

Do you accept pull requests?

We are using your project as part of a vue web configuration, and we have made a series of changes, in appearance and logic.

Would you be interested in taking the changes to your repository?

Thanks.

missing init-db script

/vue-crud-x/example-spa

cd ../backend&&npm run-script init-db

npm ERR! missing script: init-db

Quick Start error: Cannot find module './firebase.key.json'

Thank you for your hard work on this! I'm looking forward to trying it out.
Unfortunately when I follow the steps in the Quick Start, I'm getting an error.

The following steps appeared to complete successfully:

git clone https://github.com/ais-one/vue-crud-x.git
cd vue-crud-x
npm run install-libs
npm run install-db

But npm run dev fails with the following errors:

[nodemon] starting `node index.js`
example-app development
missing configuration file, using defaults Error: ENOENT: no such file or directory, open 'C:\dev\samples\vue-crud-x\example-app\config/.env.development'
TEST_ENV= undefined
internal/modules/cjs/loader.js:796
    throw err;
    ^

Error: Cannot find module './firebase.key.json'
Require stack:
- C:\dev\samples\vue-crud-x\example-app\config\index.js
- C:\dev\samples\vue-crud-x\common-app\config.js
- C:\dev\samples\vue-crud-x\app.js
- C:\dev\samples\vue-crud-x\index.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:793:17)
    at Function.Module._load (internal/modules/cjs/loader.js:686:27)
    at Module.require (internal/modules/cjs/loader.js:848:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (C:\dev\samples\vue-crud-x\example-app\config\index.js:7:22)
    at Module._compile (internal/modules/cjs/loader.js:955:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
    at Module.load (internal/modules/cjs/loader.js:811:32)
    at Function.Module._load (internal/modules/cjs/loader.js:723:14)
    at Module.require (internal/modules/cjs/loader.js:848:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\dev\\samples\\vue-crud-x\\example-app\\config\\index.js',
    'C:\\dev\\samples\\vue-crud-x\\common-app\\config.js',
    'C:\\dev\\samples\\vue-crud-x\\app.js',
    'C:\\dev\\samples\\vue-crud-x\\index.js'
  ]
}

Appears to be coming from this line in 'example-app/config/index.js':

7 | const FIREBASE_KEY = require('./firebase.key.json') || ''

backend install failure at windows op. system

npm run init-db have error at windows op system because of line below at vue-crud-x >backend >package.json line 7
"init-db": "rm -f dev.sqlite3&&npx knex migrate:latest --env development&&npx knex seed:run --env development",

windows dont have "rm" windows users have to change it to "del".
better to mention this to the installation notes

Update to vue-cli 3 when it is released and stable

vue-cli 3 still supports templates, but we would like to take advantage of the plugin way of doing things in vue-cli 3 and will move to it once it is stable

https://github.com/vuejs/vue-cli/blob/dev/docs/cli.md#pulling-vue-cli2x-templates-legacy

[Questions] - General Questions

@ais-one ... keen to try out this template. I do have a few questions:

• Can one use custom components in the crudTable?
• Is auth included, or would I need to implement my own auth workflow?
• Can values for v-select (inside crudTable and crudFilter) be loaded from API or vuex?

Small typo in backend/models/users.js file name

Hi @ais-one thank-you very much for this component and the example.

For the example-spa to work the file backend/models/user.js needed to be renamed to backend/models/User.js

Apologies for not submitting the change myself.

I did not find a way to say hello soooooo

I'm very interesting in improve this project so if you need some help let me know.
I builded some similar feature for an AngujarJS application, but now I'm trying to build it in vue, thinking in generation by config

whatsapp: [phone]
mail: [email protected]

[QUESTION] - Other UI Libs

@ais-one, the latest release looks pretty solid!

I was wondering how deeply integrated is Vuetify into vue-crud-x? How easy/difficult would it be to use another component library (like iview, element, vue-ant, etc)?

Add github actions to deploy to GCP

Manual trigger

• deploy backend to GCP Cloudrun
• deploy frontend to GP Storage

Async Component being overwritten in Multi-Crud Page example

Can be seen in latest develop branch

When you select the multi-crud page example.

If you open left CRUD table filter, you see header Party Notes Component Filter (it should be "Party Notes Filter").

If you open right CRUD table filter, you see header Party Notes Component Filter.

Somehow, somewhere the Filter component that is async loaded is being overwritten

https://github.com/ais-one/vue-crud-x/blob/develop/example/src/components/MultiCrudPage/Example.vue

CrudTable.vue select all (not working)

In Folder example-web/vite/src/components

The select all rows check box in the table does not work / respond

example-rest cannot be run : backend/models/user.js has wrong filename / VueCrudX cannot be loaded

Hi, I've tried to run example-rest but I found some issues

There was a trivial one on backend project, because on your git repository ./models/User.js was committed as ./models/user.js. Backend runs after changing filename.

I was not able to fix issue on example-rest, it seems that VueCrudX cannot be loaded

bedinsky@CPR-DSK-10-313:~/git/vue-crud-x/example-rest$ npm run serve

[email protected] serve /home/bedinsky/git/vue-crud-x/example-rest
vue-cli-service serve

INFO Starting development server...
98% after emitting CopyPlugin

ERROR Failed to compile with 1 errors 15:56:33

This dependency was not found:

• core-js/modules/web.dom.iterable in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!../src/VueCrudX.vue?vue&type=script&lang=js&

To install it, you can run: npm install --save core-js/modules/web.dom.iterable

CrudTable.vue - implement csv upload

In Folder example-web/vite/src/components

Implement functionality to upload csv to database

lots of errors

I'm trying to use this package, but I get a lot of errors:

app.js:41304 [Vue warn]: Missing required prop: "storeName"

found in

---> <VueCrudX>
       <Book> at resources/js/components/About.vue
         <VContent>
           <VApp>
             <App> at resources/js/views/App.vue
               <Root>

app.js:41304 [Vue warn]: Missing required prop: "crudFilter"

found in

---> <VueCrudX>
       <Book> at resources/js/components/About.vue
         <VContent>
           <VApp>
             <App> at resources/js/views/App.vue
               <Root>

app.js:41304 [Vue warn]: Missing required prop: "crudTable"

found in

---> <VueCrudX>
       <Book> at resources/js/components/About.vue
         <VContent>
           <VApp>
             <App> at resources/js/views/App.vue
               <Root>

app.js:41304 [Vue warn]: Missing required prop: "crudForm"

found in

---> <VueCrudX>
       <Book> at resources/js/components/About.vue
         <VContent>
           <VApp>
             <App> at resources/js/views/App.vue
               <Root>

app.js:41304 [Vue warn]: Missing required prop: "crudOps"

found in

---> <VueCrudX>
       <Book> at resources/js/components/About.vue
         <VContent>
           <VApp>
             <App> at resources/js/views/App.vue
           
app.js:42567 TypeError: Cannot read property 'doPage' of undefined
    at VueComponent.created (app.js:36755)
    at invokeWithErrorHandling (app.js:42533)
    at callHook (app.js:44884)
    at VueComponent.Vue._init (app.js:45666)
    at new VueComponent (app.js:45811)
    at createComponentInstanceForVnode (app.js:43960)
    at init (app.js:43791)
    at createComponent (app.js:46637)
    at createElm (app.js:46584)
    at createChildren (app.js:46712)

app.js:41304 [Vue warn]: Error in mounted hook (Promise/async): "TypeError: Cannot read property 'getters' of undefined"

my app.js looks like this:

import VueCrudX from 'vue-crud-x/dist/VueCrudX';

Vue.component('vue-crud-x', VueCrudX);

What is minimum amount of code I need to implement a CRUD table?

Questions about quick start

Thanks for this project. I like it. Thanks for your work.

I did this.

  # Settings.
    dir=/srv/test
    proj=vuecrudx

  mkdir -p $dir
  cd $dir
  git clone https://github.com/ais-one/vue-crud-x.git $proj
  cd $proj
  cd example-spa
  
  # -------  edit .env  ---------
  cp .env-sample .env
  # -------  edit .env  ---------

  # -------  edit .env  ---------
  cp ../backend/.env-sample ../backend/.env
  # -------  edit .env  ---------
  
  npm i
  npm run build-rest
  npm run init-db
  npm run start

It seems to work for many things. I can login and create a book, etc.
I get errors in the console. See pics.

---

---

---

Are the errors normal?
Did I do something wrong?

Why does it show the "find error. network error. failed to fetch" after about 5 minutes?

Compilation errors with npm run dev

I'm getting Syntax error for the spread operator after installing and running npm run dev. After installing the "babel-plugin-transform-object-rest-spread" I'm now getting Unexpected token error for the import statements for the component imports.

What am I doing wrong?

Make it PWA?

example spa: relative modules were not found

Tried to follow the quick start section of README.md. Step npm start exitted with:

...
[1] <s> [webpack.Progress] 94% after seal
[1] <s> [webpack.Progress] 95% emitting
[1] <s> [webpack.Progress] 95% emitting HtmlWebpackPlugin
[1] <s> [webpack.Progress] 95% emitting CopyPlugin
[1] <s> [webpack.Progress] 98% after emitting
[1] <s> [webpack.Progress] 98% after emitting CopyPlugin
[1]  ERROR  Failed to compile with 2 errors18:06:26
[1] 
[1] These relative modules were not found:
[1] 
[1] * ../../cfg.json in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vuetify-loader/lib/loader.js!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/SignIn.vue?vue&type=script&lang=js&
[1] * ../cfg.json in ./src/firebase.js
[1] <s> [webpack.Progress] 100% 
[1] 

Make defaultRec into store

In the current implementation, defaultRec is a method or function inside crudForm, but sometimes, the default record must be got from the store. For example, if you have a 'code' field that must be set to the next available code in the resource or a date field that must be set to the last date used for that resource. For these examples to work, a call must be made to the backend to get de default record values.

I guess the place to program this call is in crudOps, but I am just a js and vue beginner.

Is there a tutorial?

Hello
Is there an stet by step article or tutorial for vue-crud-x?

Safari 11.1.2 support and fix

Please be reminded by

At the html page , add this at the header to make your whole project compatible with Safari 11 and Safari 10