ng_admin 0.0.4+2

  • Readme
  • Changelog
  • Example
  • Installing
  • 68

ng_admin #

Admin Template based on Angular Dart. It consists of common directives, components, as well as javascript interops that save your time drastically when it comes to building an Admin based website.

Getting Started #

  • Create a new Angular Dart project. Refer to this docs for more details.
  • Grab Tachyon css and Material icons from any of CDN providers out there, place them in the of web/index.html as well as another necessary dependencies. You might want to copy over our demo index.html for starters.
  • Add ngadmin to your package's pubspec.yaml file :
  dependencies:
    ng_admin: ^<latest_version>
  • Profit! :)

Why Dart for web #

  • It's been a love-hate relationship to me personally with javascript. As much as I love how flexible the language is, it hits me hard in the face when it comes to working on the bigger scale projects that involves working with more than 2 developers. Sometimes programmers (me included) tend to make bugs that are very hard to trace in the javascript environment. We often find it very hard to understand each other's code since variables can have any type. Most of the time whenever there are complex code produced by the others, it feels like a here's-the-riddle-for-you-find-the-answer thingy for the rest. That's when I thought perhaps we should consider working on another language that is statically typed to save our lives from the madness. I think Dart really shines in this area, not to mention how familiar the language is from the get-go, seems like we already know this language for years already even though we just recently started. The dependencies on another package is very minimal too as the language itself comes with rich built-in libraries already (batteries included). Once we convert, we (I) dont want to look back :)

  • Interop with javascript easily. That's one of the reasons this package exists! you'll find more js interops eventually for sure.

  • It makes it easier for us to reuse business logic across platform (Web and Mobile). As much as I can't wait for Flutter to be available for web, IMO it's not ready yet for now. The strategy for us currently is to utilize both Angular Dart for web as well as Flutter for mobile and try to reuse as much platform agnostic logic as possible in one package that is shared for both of them.

Why not Dart for web #

Of course Dart is not a silver bullet for all edge cases. Sometimes you might want to stick with npm-js combo as they come with set of utilities that are not available in Dart environment just yet e.g. purge css, static site generator, etc. Rule of thumb for me is use npm for building company profile websites that need to be SEOed and loaded faster, and Dart for the rest.

Why Tachyon CSS #

Atomic CSS is very powerful (debatable of course) and I've been utilizing it for a year, I'm by no means an expert in CSS and I feel that it helps me a lot when it comes to building complex components. Personally I prefer using Tailwind as it comes with more utilities and all that (FYI, I've been using it for making numerous company profile websites (combined with Gatsby js) and I can reduce the development time by miles, you should try it too!). Unfortunately the CDN build is very large and there's no way for us to purge it like how we could in the common npm project. that's where Tachyon shines as the CDN build is less than 100kb which is completely acceptable. It pretty much can do whatever Tailwind can and comes with better docs for use cases vs Tailwind IMO.

Limitations #

Use at your own risk! Please expect some bugs (and breaking changes too) here and there as it's meant to be used internally and still very much WIP for now. There are no unit tests coverage, very limited docs, etc. Currently I'm still busy working on some client projects that depends on this package. I will for sure provide those eventually :) Feel free to report bugs, submit feature requests, etc. on our github repo.

0.0.4+2 #

  • option box in w-select now has the same width as the input field.
  • added w-checkbox.

0.0.4+1 #

  • fixed w-dialog not overlaying full screen on ios.

0.0.4 #

  • added placeholder prop in w-select.
  • refactored w-select.
  • made compareTo in WSelectOption optional.
  • added template outler #row and #header in w-table.
  • revamped w-layout.
  • removed offset from popper directive as it does not work somehow.
  • removed w-action-table as w-table should suffice for now.
  • added util KeyboardEventListener.

0.0.3+6 #

  • added optionPrefix as well as optionSuffix templates in w-select.
  • added material icon picker in the playground page.

0.0.3+5 #

  • added w-button.
  • added a sample of how to create a login component.

0.0.3+4 #

  • got rid of document.onKeyDown for now since it produces bug on Chrome input form autocomplete website docs

0.0.3+3 #

  • fixed w-dialog not showing properly on mobile devices.
  • some tweaks on w-table to align column for the header on mobile.

0.0.3+2 #

  • set min height for the header in w-layout so that it wont get cut off on iOS anymore.
  • some tweaks on the demo page for better looks on mobile devices.

0.0.3+1 #

  • more comment docs.
  • revamped w-pagination.
  • got rid of the unnecessary empty excessive row generated by w-calendar when the last day of the month falls on Sunday.

0.0.3 #

  • w-slider now shows tooltip when hovering on the whole line, just like how normal video progress indicator works.
  • more comment docs.

0.0.2+21 #

  • using popper js for wPopup directive now.
  • w-select can be highlighted using up and down keys now, enter key will select the item.

0.0.2+20 #

  • revamped w-decorator click handler.
  • added ClickOutsideDirective.

0.0.2+19 #

  • w-input doesnt show red border on mozilla again when required.

0.0.2+18 #

  • added top-right slot for w-action-table too.
  • added addNewLabel prop in w-action-table.

0.0.2+17 #

  • added initial xlsx js interop.
  • added top-right slot for w-table allowing the caller to inject anything there accordingly.

0.0.2+16 #

  • revamped debounce.

0.0.2+15 #

  • added readonly prop in w-input.
  • showcased table with filter.

0.0.2+14 #

  • poppable directive now re-positions according to the content's height when showing.

0.0.2+13 #

  • added search functionality in w-select.

0.0.2+12 #

  • simplified w-select, right now we dont use adapter anymore since it adds up the complexity but rather use options input instead.

0.0.2+11 #

  • added more options for Chartist Line Directive.

0.0.2+10 #

  • update w-calendar to show days.

0.0.2+9 #

  • update leaflet directive so now it can render different tile layers as well as geojson layers.

0.0.2+8 #

  • added tippy tooltip on hover of the w-slider current value dot.

0.0.2+7 #

  • added w-calendar v1 with demo.

0.0.2+6 #

  • allow another domain http(s) links for showdown js directive

0.0.2+5 #

  • w-layout is now customizable

0.0.2+4 #

  • set fixed header height to 60 px since it looks broken on ios.

0.0.2+3 #

  • set longer description as suggested in pub.dev
  • renamed folder /demo to /example

0.0.2+2 #

  • added v1 frappe directive.

0.0.2+1 #

  • fixed showdown bug not working on production mode.
  • added v1 tippy js directive.

0.0.2 #

  • added Getting Started doc in readme
  • added showdownjs directive.

0.0.1+10 #

  • revamped clipboard directive.
  • added more w-list samples.

0.0.1+9 #

  • added initial version of the website docs
  • added copy to clipboard directive.

0.0.1+8 #

  • added WTabsDirective.
  • added highlightjs interop and directive.

0.0.1+7 #

  • added w-slider component v1.

0.0.1+6 #

  • revamped w-select, so now it has [adapter] input that can be used to fetchOptions asynchronously.

0.0.1+4 #

  • separated w-table into w-table and w-action-table, where w-table is useful only for showing the table data, while w-action-table has form adapter that can be used to show the form dialog to add new / edit item.

0.0.1+3 #

  • added collapsible directive.
  • added w_list which is useful for generating collapsible nested list, accordion, etc.

0.0.1+2 #

  • w_table can handle edit, add, as well as delete item, still WIP though.

0.0.1 #

Initial Version of the library. Use it at your own risk! It's meant to be used internally for now (No Unit Tests, Documentations, etc. just yet)

example/README.md

demo #

A web app that uses AngularDart and AngularDart Components.

Created from templates made available by Stagehand under a BSD-style license.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  ng_admin: ^0.0.4+2

2. Install it

You can install packages from the command line:

with pub:


$ pub get

with Flutter:


$ flutter pub get

Alternatively, your editor might support pub get or flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:ng_admin/ng_admin.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
43
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
80
Overall:
Weighted score of the above. [more]
68
Learn more about scoring.

We analyzed this package on Jul 14, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.15

Analysis suggestions

Package not compatible with runtime flutter-native on Android

Because:

  • package:ng_admin/ng_admin.dart that imports:
  • package:ng_admin/interops/index.dart that imports:
  • package:ng_admin/interops/popper.dart that imports:
  • package:js/js.dart that imports:
  • dart:js

Package not compatible with runtime flutter-native on Linux

Because:

  • package:ng_admin/ng_admin.dart that imports:
  • package:ng_admin/interops/index.dart that imports:
  • package:ng_admin/interops/popper.dart that imports:
  • package:js/js.dart that imports:
  • dart:js

Package not compatible with runtime flutter-native on Windows

Because:

  • package:ng_admin/ng_admin.dart that imports:
  • package:ng_admin/interops/index.dart that imports:
  • package:ng_admin/interops/popper.dart that imports:
  • package:js/js.dart that imports:
  • dart:js

Package not compatible with runtime flutter-native on iOS

Because:

  • package:ng_admin/ng_admin.dart that imports:
  • package:ng_admin/interops/index.dart that imports:
  • package:ng_admin/interops/popper.dart that imports:
  • package:js/js.dart that imports:
  • dart:js

Package not compatible with runtime flutter-native on macOS

Because:

  • package:ng_admin/ng_admin.dart that imports:
  • package:ng_admin/interops/index.dart that imports:
  • package:ng_admin/interops/popper.dart that imports:
  • package:js/js.dart that imports:
  • dart:js

Package not compatible with runtime native

Because:

  • package:ng_admin/ng_admin.dart that imports:
  • package:ng_admin/interops/index.dart that imports:
  • package:ng_admin/interops/popper.dart that imports:
  • package:js/js.dart that imports:
  • dart:js

Package not compatible with runtime native-aot

Because:

  • package:ng_admin/ng_admin.dart that imports:
  • package:ng_admin/interops/index.dart that imports:
  • package:ng_admin/interops/popper.dart that imports:
  • package:js/js.dart that imports:
  • dart:js

Maintenance issues and suggestions

Make sure dartdoc successfully runs on your package's source files. (-10 points)

exitCode: 255 stdout: Documenting ng_admin... Initialized dartdoc with 295 libraries in 51.3 seconds Generating docs for library chartist_interop from package:ng_admin/components/charts/chartist.dart... Generating docs for library clipboard from package:ng_admin/directives/clipboard.dart... Generating docs for library collapsible from package:ng_admin/directives/collapsible.dart... Generating docs for library debounce from package:ng_admin/utils/debounce.dart... Generating docs for library event_listeners from package:ng_admin/utils/event_listeners.dart... Generating docs for library frappe_interop from package:ng_admin/components/charts/frappe.dart... Generating docs for library highlight_interop from package:ng_admin/directives/highlightjs.dart... Generating docs for library index from package:ng_admin/interops/index.dart... Generating docs for library index from package:ng_admin/components/maps/index.dart... Generating docs for library index from package:ng_admin/utils/index.dart... Generating docs for library index from package:ng_admin/components/charts/index.dart... Generating docs for library index from package:ng_admin/components/inputs/index.dart... Generating docs for library index from package:ng_admin/components/index.dart... Generating docs for library index from package:ng_admin/components/calendar/index.dart... Generating docs for library index from package:ng_admin/components/tables/index.dart... Generating docs for library index from package:ng_admin/directives/index.dart... Generating docs for library leaflet_interop from package:ng_admin/components/maps/leaflet.dart... Generating docs for library native_events from package:ng_admin/directives/native_events.dart... Generating docs for library ng_admin from package:ng_admin/ng_admin.dart... Generating docs for library poppable from package:ng_admin/directives/poppable.dart... Generating docs for library showdown_interop from package:ng_admin/directives/showdownjs.dart... Generating docs for library tabs from package:ng_admin/directives/tabs.dart... Generating docs for library tippy_interop from package:ng_admin/interops/popper.dart... Generating docs for library tippy_interop from package:ng_admin/directives/tippy.dart... Generating docs for library w_button from package:ng_admin/components/button/w_button.dart... Generating docs for library w_calendar from package:ng_admin/components/calendar/w_calendar.dart... Generating docs for library w_checkbox from package:ng_admin/components/inputs/checkbox/w_checkbox.dart... Generating docs for library w_decorator from package:ng_admin/components/inputs/decorator/w_decorator.dart... Generating docs for library w_dialog from package:ng_admin/components/dialog/w_dialog.dart... Generating docs for library w_input from package:ng_admin/components/inputs/input/w_input.dart... Generating docs for library w_layout from package:ng_admin/components/layout/w_layout.dart... Generating docs for library w_list from package:ng_admin/components/lists/w_list.dart... Generating docs for library w_pagination from package:ng_admin/components/pagination/w_pagination.dart... Generating docs for library w_select from package:ng_admin/components/inputs/select/w_select.dart... Generating docs for library w_slider from package:ng_admin/components/sliders/w_slider.dart... Generating docs for library w_spinner from package:ng_admin/components/spinner/w_spinner.dart... Generating docs for library w_table from package:ng_admin/components/tables/w_table.dart... Generating docs for library xlsx_interop from package:ng_admin/interops/xlsx.dart... Validating docs... Documented 38 public libraries in 13.0 seconds stderr: warning: chartist_interop has no library level documentation comments, from chartist_interop: (file:///tmp/pub-dartlang-dartdocXDTYAA/pkg/lib/components/charts/chartist.dart:2:9) warning: unresolved doc reference [delay], from debounce.Debounce: (file:///tmp/pub-dartlang-dartdocXDTYAA/pkg/lib/utils/debounce.dart:21:7) warning: frappe_interop has no library level documentation comments, from frappe_interop: (file:///tmp/pub-dartlang-dartdocXDTYAA/pkg/lib/components/charts/frappe.dart:2:9) warning: highlight_interop has no library level documentation comments, from highlight_interop: (file:///tmp/pub-dartlang-dartdocXDTYAA/pkg/lib/directives/highlightjs.dart:2:9) warning: leaflet_interop has no library level documentation comments, from leaflet_interop: (file:///tmp/pub-dartlang-dartdocXDTYAA/pkg/lib/components/maps/leaflet.dart:2:9) warning: showdown_interop has no library level documentation comments, from showdown_interop: (file:///tmp/pub-dartlang-dartdocXDTYAA/pkg/lib/directives/showdownjs.dart:2:9) warning: tippy_interop has no library level documentation comments, from tippy_interop: (file:///tmp/pub-dartlang-dartdocXDTYAA/pkg/lib/interops/popper.dart:2:9) warning: tippy_interop has no library level documentation comments, from tippy_interop: (file:///tmp/pub-dartlang-dartdocXDTYAA/pkg/lib/directives/tippy.dart:2:9) error: failed to write file at: tippy_interop/tippy_interop-library.html for symbol tippy_interop: (file:///tmp/pub-dartlang-dartdocXDTYAA/pkg/lib/directives/tippy.dart:2:9) conflicting with file already generated by tippy_interop: (file:///tmp/pub-dartlang-dartdocXDTYAA/pkg/lib/interops/popper.dart:2:9) Dartdoc generates a path and filename to write to for each symbol. tippy_interop conflicts with another symbol in the generated path, and therefore can not be written out. Changing the name, library name, or class name (if appropriate) of one of the conflicting items can resolve the conflict. Alternatively, use the @nodoc tag in one symbol's documentation comments to hide it. warning: xlsx_interop has no library level documentation comments, from xlsx_interop: (file:///tmp/pub-dartlang-dartdocXDTYAA/pkg/lib/interops/xlsx.dart:2:9) found 9 warnings and 1 error Unhandled exception: dartdoc encountered 1 errors while processing. #0 Dartdoc.generateDocs (package:dartdoc/dartdoc.dart:225:9)

Package is pre-v0.1 release. (-10 points)

While nothing is inherently wrong with versions of 0.0.*, it might mean that the author is still experimenting with the general direction of the API.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.7.0 <3.0.0
angular ^5.3.0 5.3.1 6.0.0-alpha+1
angular_forms ^2.1.2 2.1.2 2.1.4
angular_router ^2.0.0-alpha+22 2.0.0-alpha+22 2.0.0-alpha+24
js ^0.6.1+1 0.6.2
Transitive dependencies
analyzer 0.35.4 0.39.13
angular_ast 0.5.9 0.5.11
angular_compiler 0.4.3 0.4.5
args 1.6.0
async 2.4.2
build 1.3.0
build_config 0.4.2
built_collection 4.3.2
built_value 7.1.0
charcode 1.1.3
checked_yaml 1.0.2
code_builder 3.4.0
collection 1.14.13 1.15.0-nullsafety
convert 2.1.1
crypto 2.1.5
csslib 0.14.6+1 0.16.1
dart_style 1.2.4 1.3.6
fixnum 0.10.11
front_end 0.1.14 0.1.29
glob 1.2.0
intl 0.15.8 0.16.1
json_annotation 3.0.1
kernel 0.3.14 0.3.29
logging 0.11.4
matcher 0.12.9
meta 1.2.2 1.3.0-nullsafety
node_interop 1.1.1
node_io 1.1.1
package_config 1.9.3
path 1.7.0
pub_semver 1.4.4
pubspec_parse 0.1.5
quiver 2.1.3
source_gen 0.9.4+4 0.9.6
source_span 1.7.0
stack_trace 1.9.5
string_scanner 1.0.5
term_glyph 1.1.0
typed_data 1.2.0 1.3.0-nullsafety
watcher 0.9.7+15
yaml 2.2.1
Dev dependencies
angular_test ^2.3.0
build_runner ^1.6.0
build_test ^0.10.8
build_web_compilers ^2.3.0
pedantic ^1.8.0 1.9.2
test ^1.6.0