ワーク管理サンプル

フロントエンドプログラムに利用できる、サンプルプログラムです。このアプリケーションは、管理コンソール・ダッシュボードの雛形を提供します。

スクリーンショット#

work_management_app

work_list

map_page

機能#

  • 左サイドバーで、複数のページを切り替え

  • ログイン機能に、Login_basic_app を利用

  • ワーク管理機能に、ToDoサンプルを利用

  • ワーク管理の一覧でアイテムを選択すると、アイテム詳細を表示 一覧のアイテムを切り替えると、アイテム詳細も切り替わる

  • 複数のナビゲーションパターンに対応

navigation

デモを実行する#

※ 登録した内容は、予告なく消去する場合があります。

管理画面で操作する#

ワーク管理_管理画面

ソースコード#

License#

MIT License

Please see LICENSE file.

利用している主なライブラリ#

  • Vue.js
  • Nuxt.js
  • vuetify
  • vee-validate

ローカルで実行する#

事前準備#

  • node.js
  • npm

サンプルコードの準備#

Github からサンプルコードを取得する

git clone git@github.com:b-eee/Work_management_app.git

実行に必要なパッケージの取得

yarn install

設定ファイル#

アプリケーションの動作に必要な設定は、利用するバックエンドにあわせて修正してください。 設定ファイルは、以下の通りです。

  • .env

.env#

意味説明
BASE_URLhexabase API の URL
APP_IDhexabase アプリケーションの IDワークスペースに複数のアプリケーションがある場合に設定します。application_id の display_id を指定します

アプリケーションの実行#

yarn dev

ログインする#

  • ブラウザで、http://localhost:3000/ にアクセスする
  • デモ用のIDとパスワードでログインする
  • ワークスペースとして、demo_workspace を選択する

自分のワークスペースで利用する#

  1. .env で、APIのBASE_URLを指定する
  2. テンプレートのExamples > Work_management_appで、アプリケーションを作成する
  3. ワークスペースの設定 > グループ設定 > ロールで、本アプリのロール(admin、member)を割り当てる
  4. ワークスペースの設定 > グループ設定で、ログインさせたいユーザーを追加する
  5. アプリケーションの設定 > ロールと参加ユーザーの設定 で、ユーザーを追加する
  6. ユーザーステータス管理を利用するユーザーには、Adminロールを割り当てる
  7. Usersデータベースで、ユーザーを追加する

本アプリは、Hexabaseの標準ユーザー管理機能とUsersデータベースを連携させて利用します。そのために、管理画面でユーザー登録し、さらにUsersデータベースに設定する必要があります。

Usersデータベース

制限事項#

  • SignUpリンクは動作していません
  • Usersデータベースにユーザーを重複登録しないでください
  • 開発する場合に、process.env を使わないでください