Code Monkey home page Code Monkey logo

ember-alexandria's Introduction

ember-alexandria

Test Dependabot Code Style: Prettier License: LGPL-3.0

The frontend for the alexandria document management service

Compatibility

  • Ember.js v4.4 or above
  • Ember CLI v4.4 or above
  • Node.js v14 or above

Installation

ember install ember-alexandria

Then add the following lines to your app/styles/app.scss:

@import "ember-uikit";
@import "ember-alexandria";

Usage

Mount the engine with the following command in your app/router.js:

this.mount("ember-alexandria", { path: "/" });

To pass the required services update your app.js:

constructor(...args) {
  super(...args);

  this.engines = {
    "ember-alexandria": {
      dependencies: {
        services: [
          "session",
          "intl",
          "notification",
          { config: "alexandria-config" },
        ],
      },
    },
  };
}

Configuration

You can configure if the models should be filtered by meta and what the default meta value for a model should be. Each configuration field is scoped by model name (check out the example to understand what is meant by this).

For this you need to create a service extending from ember-alexandria/services/config which you then have to pass as config to alexandria.

This is needed since an engine does not merge its env into the host apps. See ember-engines/ember-engines#176 for more info.

If you mounted alexandria with query params this.mount("ember-alexandria", {path: "/:your_query_param/documents/"}); you can access the query params in you config service (as shown in the example above) with this.alexandriaQueryParams.your_query_param.

If you need to access the alexandriaQueryParams inside your config check that you define modelMetaFilters and/or defaultModelMeta as getters. If you don't need alexandriaQueryParams you can ignore the getters and just define the field as usual.

Example:

import ConfigService from "ember-alexandria/services/config";

export default class AlexandriaConfigService extends ConfigService {
  get modelMetaFilters() {
    return {
      document: [
        {
          key: "your_meta_field",
          value: this.alexandriaQueryParams.your_query_param,
        },
      ],
    };
  }

  get defaultModelMeta() {
    return {
      document: {
        your_meta_field: this.alexandriaQueryParams.your_query_param,
      },
      file: {
        is_alexandria_file: true,
      },
    };
  }
}

To set created_by_user and created_by_group on a document you can use the activeUser and activeGroup properties. They will be set on the document when it is created. The returned IDs for the user and groups you can be proccessed by adding a resolver from your project to turn the IDs to something the user can relate to.

Just replace the identity functions on the config service.

Additionally there is a post proccess hook for the document. It is called documentsPostProccess and is executed after the document list is fetched. It gets the documents as an argument and should return the documents as well. With it you for example fetch the users and groups of the documents in a batch.

Example:

import ConfigService from "ember-alexandria/services/config";
import { inject as service } from "@ember/service";

export default class AlexandriaConfigService extends ConfigService {
  @service store;
  
  activeUser = 1;
  activeGroup = 1;

  resolveUser(id) { return this.store.peekRecord("user", id); }
  resolveGroup(id) { return this.store.peekRecord("group", id); }

  documentsPostProcess(documents) {
    const users = documents.map((d) => d.createdByUser);
    const groups = documents.map((d) => d.createdByGroup);

    this.store.query("user", { filter: { id: users.join(",") } });
    this.store.query("group", { filter: { id: groups.join(",") } });

    return documents
  }
}

Marks

Additionally to tags you can configure marks. Marks are similar to tags, but are always displayed for the user to add, even when then are not selected yet. This avoids the issue where users might create multiple, slightly different tags while meaning the same thing. We recommend using not more than five marks for the most important classifications of documents.

The icons for marks are from FontAwesome.

The object for a mark has the following properties:

  • type: This is the id of a tag used to identify the mark in the backend.
  • icon: This a string, which references an FontAwesome.
  • tooltip: This is shown when hovering over the mark.

An example configuration with two icons might look like this:

import ConfigService from "ember-alexandria/services/config";

export default class AlexandriaConfigService extends ConfigService {
  get marks() {
    return [
      {
        type: "important",
        tooltip: "This is an important document",
        icon: "stamp",
      },
      {
        type: "problem",
        tooltip: "This document has problems",
        icon: "hippo",
      },
    ];
  }
}

Configure used icons in config/icons.js

module.exports = function () {
  return {
    "free-solid-svg-icons": ["stamp", "hippo"],
  };
};

Contributing

See the Contributing guide for details.

License

This project is licensed under the LGPL-3.0-or-later license.

ember-alexandria's People

Contributors

dependabot-preview[bot] avatar dependabot[bot] avatar stephanh90 avatar fkm-adfinis avatar velrest avatar semantic-release-bot avatar anehx avatar derrabauke avatar yelinz avatar czosel avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.