ngneat / edit-in-place Goto Github PK

View Code? Open in Web Editor NEW

261.0 261.0 18.0 3.29 MB

A flexible and unopinionated edit in place library for Angular applications

Home Page: https://ngneat.github.io/edit-in-place

License: MIT License

JavaScript 5.98% TypeScript 67.16% HTML 24.71% SCSS 2.15%

angular form

edit-in-place's People

Contributors

Stargazers

Watchers

Forkers

dmorosinotto sa-bangash st-little hamye4143 aishwhensheds dogetomoon2021 raahul-11 goonboy whjvenyl baxyz bncunha lgf-roverbytekok advayumare philmcmillen73 reptilehaus maleet ldanchenko sandeepsuvit

edit-in-place's Issues

Support for Angular 10

Please update the package to support Angular 10.
When I am updating the angular application I am getting below error.
y metadata from registry...
Package "@ngneat/edit-in-place" has an incompatible peer dependency to "@angular/common" (requires "^8.0.0" (extended), would install "10.1.3").
Package "@ngneat/edit-in-place" has an incompatible peer dependency to "@angular/core" (requires "^8.0.0" (extended), would install "10.1.3").

Focus and default value

I'm submitting a

Support request

Current behavior

I'm having two issues/questions:

One regarding the focus of the input fields, both the focussing on editMode, and the blurring when switching back to viewMode.
Second, making it so that the input field has a default value filled in when switching to editMode (The regular value property of the input field does not have an effect weirdly enough)

Regarding the first issue, I'm not sure what the expected behaviour should be? Because it seems quite obvious that it should focus on the input field you have just switched to?

I've set the editableFocusable (since that seems related, however its not really clear how this would work exactly), I've tried manually focusing using (modeChange)="", but to no avail.

Thanks in advance.

Expected behavior

No response

Minimal reproduction of the problem with instructions

<editable (modeChange)="focus($event, 'fieldName')">
  <ng-template viewMode>fieldValue</ng-template>
  <ng-template editMode>
    <input
      editableOnEnter
      editableOnEscape
      editableFocusable
      [formControl]="this.fieldControl"
      value="fieldValue" />
  </ng-template>
</editable>

What is the motivation / use case for changing the behavior?

No response

Environment

Angular 17.0.6
Ionic 7.1.5

Allow initial mode to be set

I'm submitting a

Feature request

Current behavior

It looks like viewMode is always the default option and it is not possible to start with edit mode initially.

Expected behavior

Allow initial mode to be programmatically set (either being view or edit mode).

Minimal reproduction of the problem with instructions

No response

What is the motivation / use case for changing the behavior?

No response

Environment

No response

Add enable/disable mode (for edition)

I'm submitting a

Feature request

Current behavior

You can switch to edit mode in any circumstances.

Expected behavior

It should be very convenient to block programmatically the edition mode (disable it).

Minimal reproduction of the problem with instructions

No response

What is the motivation / use case for changing the behavior?

There is lot of use-cases:

a request is still running to save the previous change
a user doesn't have rights on this particular item (in case of a use in item rendering)
a business constraint
...

Environment

No response

Add @baxyz to the contributor list

Add @baxyz to the contributor list of the README file.

ssr - document is not defined

I'm submitting a

Feature/improvment (a behavior that used to work and stopped working in a new release)

Current behavior

Not sure if worth addressing but when using edit-on-place with Angular 17 I am getting the following error:

ERROR ReferenceError: document is not defined
at editMode (./node_modules/@ngneat/edit-in-place/fesm2020/ngneat-edit-in-place.mjs:83:55)
at editMode (./node_modules/@ngneat/edit-in-place/fesm2020/ngneat-edit-in-place.mjs:90:43)
at value (./node_modules/rxjs/dist/esm/internal/operators/switchMap.js:14:23)
at _next (./node_modules/rxjs/dist/esm/internal/operators/OperatorSubscriber.js:13:21)
at next (./node_modules/rxjs/dist/esm/internal/Subscriber.js:31:18)
at _subscribe (./node_modules/rxjs/dist/esm/internal/BehaviorSubject.js:12:44)
at _trySubscribe (./node_modules/rxjs/dist/esm/internal/Observable.js:37:25)
at _trySubscribe (./node_modules/rxjs/dist/esm/internal/Subject.js:74:22)
at cb (./node_modules/rxjs/dist/esm/internal/Observable.js:31:30)
at errorContext (./node_modules/rxjs/dist/esm/internal/util/errorContext.js:19:9)

Expected behavior

Should work out of the box with SSR

Minimal reproduction of the problem with instructions

NA will try and get around to given time

What is the motivation / use case for changing the behavior?

NA. For some reason started coming across this issue with Angular. I suspect because domino which mocks window and document does not work with Angular 17.

Environment

1. Mac OS 
2. Angular 17

Single click event for open/close binding event doesn't get triggered when clicking editableOnSave or editableCancel directives

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[X ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

When using the click event for openBindingEvent and closeBindingEvent along with the editableOnSave and editableCancel directives, the mode won't switch to view when clicking the editableOnSave or editableCancel elements.

Expected behavior

When using a single click for the open/close binding event and the editableOnSave or editableCancel directives, clicking an element using the directives (ie: button) should trigger a closeBindingEvent (if using the click event) in addition to calling a method.

Minimal reproduction of the problem with instructions

Update playground to use click for openBindingEvent, then try Sample input with action buttons, by clicking into it for edit mode, then using the buttons to try to change the mode back to view.

What is the motivation / use case for changing the behavior?

To allow for a simple click to change mode and then to use the save or cancel buttons or a click outside element to change back to view mode.

Environment


Angular version: 10.1.3

Browser:
- [ X] Chrome (desktop) version 86.0.4240.198
 
For Tooling issues:
- Node version: 12.16.1
- Platform:  Windows

TypeError: can't access property "tpl", ctx.viewModeTpl is undefined

I'm submitting a

Bug report

Current behavior

I switch to standalone. Everything works great until I add component in html. I import EditableComponent in standalone imports but I receive this error:

ERROR TypeError: can't access property "tpl", ctx.viewModeTpl is undefined
    EditableComponent_Template ngneat-edit-in-place.mjs:22

<editable (save)="updateStage()">
                  <ng-template viewMode>hello world</ng-template>
                  <ng-template editMode>
                    <input editableOnEnter editableOnEscape editableFocusable />
                  </ng-template>
</editable>

@Component({
    selector: 'app-bot-flow',
    templateUrl: './bot-flow.component.html',
    styleUrls: ['./bot-flow.component.scss'],
    standalone: true,
  imports: [HorizontalTreeMenuComponent, NgIf, FormsModule, BotActionsListComponent, EditableComponent,EditModeDirective]
})

Angular: v17.0.4
edit in place : v1.9.0

Expected behavior

No response

Minimal reproduction of the problem with instructions

No response

What is the motivation / use case for changing the behavior?

No response

Environment

No response

Updating from v1.6.1 to 1.9.0 can't import import {EditableModule} from "@ngneat/edit-in-place";

I'm submitting a

Regression (a behavior that used to work and stopped working in a new release)

Current behavior

In 1.6.1 everything is working great.
in 1.9.0 import {EditableModule} from "@ngneat/edit-in-place"; throws error that it can't import the module TS2305: Module "@ngneat/edit-in-place" has no exported member EditableModule

Expected behavior

No response

Minimal reproduction of the problem with instructions

No response

What is the motivation / use case for changing the behavior?

No response

Environment

No response

Add EditableGroupDirective to public API

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

There is no means (that I can tell) to track an outside click to disable the editing for a group, and doing so should be relatively straight forward if the directive was exposed for use in another custom directive.

Expected behavior

I would love to be able to somehow change modes for a group when an outside click is detected.

I can think of a couple of ways to accomplish this. One is just writing my own directive to handle it, but because this lib does not export the EditableGroupDirective, I have no means to inject it into my own directive to make changes. Could the change be made to export the directive?

Minimal reproduction of the problem with instructions

Create a table where the <tr> is both editableGroup and editableGroupEdit. Clicking on the <tr> turns on editing for the row but if I want to capture a click anywhere else in the document, I have no way of doing that.

What is the motivation / use case for changing the behavior?

Turning off edit mode in one fell swoop without a dedicated button.

ctx.viewModeTpl is undefined after updating to 1.9

I'm submitting a

Bug report

Current behavior

When updating a project, I noticed the error as also mentioned in this issue, so I thought I'd update to the newest version of this package.

However this resulted in a non-functional page, as it now gives the error when going to the page

ERROR TypeError: ctx.viewModeTpl is undefined
    _class3_Template ngneat-edit-in-place.mjs:25
    Angular 34
    RxJS 6
    Angular 21
    webpackJsonpCallback jsonp chunk loading:77

It compiles without issues, however also my tests now fail with a similar error.

For example the test

  it('should create', () => {
    expect(component).toBeTruthy();
  });

results in:

Failed: Cannot read properties of undefined (reading 'tpl'):

 at templateFn (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@ngneat/edit-in-place/fesm2022/ngneat-edit-in-place.mjs:25:84)
    at executeTemplate (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:12003:13)
    at refreshView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:13498:13)
    at detectChangesInView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:13663:9)
    at detectChangesInComponent (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:13638:5)
    at detectChangesInChildComponents (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:13676:9)
    at refreshView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:13548:13)
    at detectChangesInView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:13663:9)
    at detectChangesInComponent (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:13638:5)
    at detectChangesInChildComponents (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:13676:9)

Expected behavior

That the package should work like before the update.

Minimal reproduction of the problem with instructions

Angular 16.2.10
Ionic 7.1.1
@ngneat/edit-in-place version 1.9.0

component.ts :

import { EditableComponent } from '@ngneat/edit-in-place';

@Component({
  ...
  standalone: true,
  imports: [
    ...,
    EditableComponent,
  ],
})

component.html:

<editable (save)="update(this.displayNameControl, 'displayName')">
    <ng-template viewMode>
         {{ displayName }}
         <ion-icon class="edit" name="pencil"></ion-icon>
    </ng-template>
    <ng-template editMode>
         <input
           editableOnEnter
           editableOnEscape
           [formControl]="this.displayNameControl" />
   </ng-template>
</editable>

What is the motivation / use case for changing the behavior?

No response

Environment

No response

Programmatically trigger Edit and View mode

I'm submitting a

Feature request

Current behavior

There's no way to trigger Edit & View mode programmatically. This would be a helpful feature

Expected behavior

An @input() directive for both Edit as well as View mode activation.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Being able to trigger the View mode and Edit mode programmatically would be a great addition. Can be used in a lot of scenarios where we want some outside event to trigger the respective modes.

Environment

No response

Upgrade to Angular 18

I'm submitting a

Feature request

Current behavior

Currently on Angular 17

Expected behavior

Should be available for Angular 18 as well

Minimal reproduction of the problem with instructions

No response

What is the motivation / use case for changing the behavior?

No response

Environment

No response

Editable inside EditableGroup goes into edit mode without using button after first use


[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

On first load of an editableGroup, clicking on the contained editables does not trigger edit mode.
After going into edit mode using a defined button and then going back in view mode, clicking on the contained editables trigger the edit mode for the target editable

Expected behavior

Clicking on editables inside an editableGroup never trigger the edit mode.

Minimal reproduction of the problem with instructions

I was not able to reproduce on the demo page (is it running the latest release 1.3.0?)

Install latest release (git clone and npm install)
ng serve
Open the demo page on localhost
In the Grouped inputs example, click on Edit
Click on cancel
Click on John Doe

Environment


Angular version: 11.0.0


Browser:
- [X] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

v1.9, with angular 17.3 no longer fires an event from buttons with `editableOnCancel` or `editableOnSave` directives.

I'm submitting a

Regression (a behavior that used to work and stopped working in a new release)

Current behavior

The view switches from viewMode template to editMode template, but then neither of my two buttons fire an event, so user can't go back to view mode or save changes. I tried changing the (save) attribute to (modeChange), but if some event is firing from either button, neither of those picks it up.

Expected behavior

Buttons with those directives should produce events.

Minimal reproduction of the problem with instructions

in component ts file:

import { EditableComponent, EditModeDirective, ViewModeDirective } from '@ngneat/edit-in-place';

...

indicateSaveClicked (){ alert('Save clicked.'); }

in template:

            <editable (save)="indicateSaveClicked()">
              <ng-template viewMode><a class="btn btn-light">{{ user.$commissionLevel?.name || '(Unspecified)' }}</a></ng-template>
              <ng-template editMode>
                <select class="form-control"
                  style="width:10rem"
                  editableOnEnter
                  editableOnEscape
                  [(ngModel)]="tmpCommLvlId"
                  name="tmp-comm-lvl-id">
                  @for (opt of user.$commissionLevelOpts; track opt) {
                  <option [value]="opt.id">{{opt.name}}</option>
                  }
                </select>
                <button class="btn btn-light"
                  editableOnCancel>
                  <i class="fa fa-close"></i>
                </button>
                <button class="btn btn-primary"
                  editableOnSave>
                  <i class="fa fa-check"></i>
                </button>
              </ng-template>
            </editable>

from my package.json:

  "dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/cdk": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/elements": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/localize": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/router": "^17.3.0",
    "@angular/upgrade": "^17.3.0",
    "@fortawesome/angular-fontawesome": "^0.14.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.34",
    "@fortawesome/free-brands-svg-icons": "^5.15.2",
    "@fortawesome/free-regular-svg-icons": "^5.15.2",
    "@fortawesome/free-solid-svg-icons": "^5.15.2",
    "@ng-bootstrap/ng-bootstrap": "^16.0.0",
    "@ng-select/ng-select": "^12.0.4",
    "@ngneat/edit-in-place": "^1.9.0",
    "@popperjs/core": "^2.11.8",
    "@stripe/stripe-js": "^3.0.10",
    "@tinymce/tinymce-angular": "^7.0.0",
    "bootstrap": "^4.5.0",
    "d3": "^7.8.5",
    "eslint-config-prettier": "^9.1.0",
    "font-awesome": "^4.7.0",
    "ng-mocks": "^14.12.1",
    "ng-qrcode": "^17.0.0",
    "ngx-image-cropper": "^7.2.1",
    "ngx-mask": "^15.0.0",
    "ngx-stripe": "^17.1.1",
    "papaparse": "^5.4.1",
    "rxjs": "~6.6.0",
    "tinymce": "^6.7.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.14.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.3.0",
    "@angular-eslint/builder": "17.2.1",
    "@angular-eslint/eslint-plugin": "17.2.1",
    "@angular-eslint/eslint-plugin-template": "17.2.1",
    "@angular-eslint/schematics": "17.2.1",
    "@angular-eslint/template-parser": "17.2.1",
    "@angular/cli": "^17.3.0",
    "@angular/compiler-cli": "^17.3.0",
    "@cypress/schematic": "^2.5.1",
    "@types/d3": "^7.4.1",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "6.13.1",
    "@typescript-eslint/eslint-plugin-tslint": "^6.14.0",
    "@typescript-eslint/parser": "6.13.1",
    "codelyzer": "^6.0.0",
    "cypress": "^13.7.0",
    "eslint": "^8.54.0",
    "eslint-plugin-import": "^2.29.0",
    "eslint-plugin-jsdoc": "^46.9.0",
    "eslint-plugin-prefer-arrow": "^1.2.3",
    "jasmine-core": "~5.1.2",
    "jasmine-spec-reporter": "~7.0.0",
    "js-beautify": "^1.14.11",
    "karma": "~6.4.3",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "^2.1.0",
    "otplib": "^12.0.1",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~5.4.2"
  }

What is the motivation / use case for changing the behavior?

No response

Environment

Node v18. Ubuntu 20.

Module '"@ngneat/edit-in-place"' has no exported member 'EditableModule'.

I'm submitting a

Bug report

Current behavior

I am getting an error indicating that the EditableModule is not exported from @ngneat/edit-in-place. I am on @ngneat/edit-in-place version 1.9.0 and using Angular 17.

Expected behavior

As in the documentation https://www.npmjs.com/package/@ngneat/edit-in-place, I should be able to import the EditableModule from "@ngneat/edit-in-place"

Minimal reproduction of the problem with instructions

In Angular 17 app.component.ts, with @ngneat/edit-in-place version 1.9.0 installed:
import { EditableModule } from '@ngneat/edit-in-place';
Typescript error: Module '"@ngneat/edit-in-place"' has no exported member 'EditableModule'.ts(2305)
And ng serve fails

The library is installed and my app is otherwise working, as I have been able to import individual directives and the EditableComponent from @ngneat/edit-in-place

What is the motivation / use case for changing the behavior?

No response

Environment

No response

Feature Request: EditableComponent editableModeChange() event.

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[X] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Would it be possible to incorporate an editableModeChange() event on the EditableComponent? Or possibly an onEdit() or onView() event if it conflicts with the EditableGroupDirective?

There's some simple use cases such as opening a dropdown automatically on edit-mode that would be convenient. I attempted tying into the editMode$ observable but that gets fired multiple times.

Deprecated keyword id when installing package

I'm submitting a

Bug report

Current behavior

In an Angular 12 project when I install the package with ng add @ngneat/edit-in-place I receive the following warning:

"SchematicsEditInPlaceAdd" schema is using the keyword "id" which its support is deprecated. Use "$id" for schema ID.

No problems at the moment. Just wanted to let you know.

Expected behavior

No response

Minimal reproduction of the problem with instructions

No response

What is the motivation / use case for changing the behavior?

No response

Environment

No response

Demo link throws 404 error

Edit on focus or keyboard shortcut support

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ x ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

For the moment I need the mouse to edit a field.

Expected behavior

Use the keyboard to edit the field. It would be great to extend openBindingEventand closeBindingEvent to other event than mouse. This will allow to control the editor/preview mode from the outside.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Make the edition more efficient.

Ability to access classes?

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Unable to change style of the component view mode.

Expected behavior

the ability to change/update styles with accessing classes/ for making it look like a link - or any use case required to fit needs.

Minimal reproduction of the problem with instructions

Attempt to style viewMode

What is the motivation / use case for changing the behavior?

My instance is making a header for a form editable. However, the requirements necessary want it underlined to show it can be edited, with an indicator to the right of the object, simple and straight forward, but I cannot simply make this happen at this time...

Angular version: 11.0.6

Browser:

For Tooling issues:

Node version: 12.18.0
Platform: Mac

Others:

Example: