Step 6 - gunjandatta/sp-dashboard-vue GitHub Wiki

Previous Step

Router

This application will display a dashboard and an item form. We will configure these views with Vue components.

Views

Dashboard (./src/views/dashboard.vue)

<template>
  <div class="dashboard">
    <div class="row">
      <div class="col">
        <Navigation />
      </div>
    </div>
    <div class="row">
      <div class="col">
        <TableFilter />
      </div>
    </div>
    <div class="row">
      <div class="col">
        <DataTable />
      </div>
    </div>
  </div>
</template>

<script>
import DataTable from "../components/table.vue";
import TableFilter from "../components/filter.vue";
import Navigation from "../components/navigation.vue";
export default {
  components: { DataTable, Navigation, TableFilter }
}
</script>

Components

We will create components for the dashboard, but implement them in a later step.

Navigation (./src/components/navigation.vue)
<template>
  <div>
    Navigation
  </div>
</template>

<script>
export default {};
</script>
Filter (./src/components/filter.vue)
<template>
  <div>
    Filter
  </div>
</template>

<script>
export default {};
</script>
Table (./src/components/table.vue)
<template>
  <div>
    Table
  </div>
</template>

<script>
export default {};
</script>

Edit Item (./src/views/editItem.vue)

<template>
  <div>
    <ItemForm />
  </div>
</template>

<script>
import ItemForm from "../components/itemForm.vue";
export default {
  components: { ItemForm }
};
</script>

View Item (./src/views/viewItem.vue)

<template>
  <div>
    <ItemForm :readOnly="true" />
  </div>
</template>

<script>
import ItemForm from "../components/itemForm.vue";
export default {
  components: { ItemForm }
};
</script>

Components

We will create components for the dashboard, but implement them in a later step.

Item Form (./src/components/itemForm.vue)
<template>
  <div>
    Item Form
  </div>
</template>

<script>
export default {};
</script>

Router (./src/router.ts)

  • Export a constant "Views" that can be referenced from the other components to change views
  • Initialize the router
  • Create a mapping for each view to a component.
import Vue from "vue";
import VueRouter from "vue-router";
import Dashboard from "./views/dashboard.vue"
import EditForm from "./views/editItem.vue";
import ViewForm from "./views/viewItem.vue";

// Available Views
export const Views = {
    Home: () => { router.push("/"); },
    CreateItem: () => { router.push({ name: "create" }); },
    EditItem: (id) => { router.push({ name: "edit", params: { id } }); },
    ViewItem: (id) => { router.push({ name: "view", params: { id } }); }
}

// Use the router
Vue.use(VueRouter);

// Create the router
const router = new VueRouter({
    routes: [
        { name: "create", path: "/create", component: EditForm },
        { name: "edit", path: "/edit:id", component: EditForm },
        { name: "home", path: "/", component: Dashboard },
        { name: "view", path: "/view:id", component: ViewForm }
    ]
});
export default router;

Main Source (./src/index.ts)

Now that the router has been defined, we need to reference it. Simply import it, and add it to the Vue initialization.

import Vue from "vue";
import App from "./app.vue";
import { Configuration } from "./cfg";
import router from "./router";
import Strings from "./strings";

// Create the global variable for this solution
window[Strings.GlobalVariable] = {
    Configuration
}

// Render the app
new Vue({
    router,
    el: "#" + Strings.AppElementId,
    render: h => h(App)
});

App Template (./src/app.vue)

The app template will need to be updated to render the router views.

<template>
  <div class="bs">
    <router-view></router-view>
  </div>
</template>

<script>
export default {};
</script>

Dev Server

blank app

Next Step

⚠️ **GitHub.com Fallback** ⚠️