Updated the models.
This commit is contained in:
@@ -6,18 +6,17 @@
|
||||
import {writable} from "svelte/store";
|
||||
import TextField from '@smui/textfield';
|
||||
import HelperText from '@smui/textfield/helper-text';
|
||||
import {Students} from "../api/students";
|
||||
import {Staff} from "../api/staff";
|
||||
import {AssetTypes} from "../api/asset-types";
|
||||
|
||||
onMount(async () => {
|
||||
Meteor.subscribe('sites');
|
||||
Meteor.subscribe('assetTypes');
|
||||
});
|
||||
|
||||
const fixRecords = () => {Meteor.call("admin.fixRecords");}
|
||||
|
||||
const submitForm = () => {
|
||||
Meteor.call('students.loadCsv');
|
||||
}
|
||||
let files;
|
||||
|
||||
const siteColumns = [
|
||||
{
|
||||
key: "_id",
|
||||
@@ -66,10 +65,162 @@
|
||||
const rejectSiteChanges = () => {
|
||||
editedSite.set(null);
|
||||
}
|
||||
let selectedSite = null;
|
||||
let students = null;
|
||||
let staff = null;
|
||||
$: {
|
||||
if(selectedSite) {
|
||||
Meteor.subscribe('students', selectedSite._id);
|
||||
Meteor.subscribe('staff', selectedSite._id);
|
||||
students = Students.find({siteId: selectedSite._id});
|
||||
staff = Staff.find({siteId: selectedSite._id});
|
||||
}
|
||||
}
|
||||
const onSiteSelection = (e) => {
|
||||
selectedSite = Sites.findOne({_id: e.detail});
|
||||
}
|
||||
|
||||
const uploadStudents = () => {
|
||||
// console.log(files);
|
||||
// console.log(selectedSite);
|
||||
// console.log(selectedSite._id);
|
||||
if(files && files.length) {
|
||||
let file = files[0];
|
||||
let reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
// console.log("Sending Data");
|
||||
// console.log(selectedSite._id);
|
||||
// console.log(reader.result);
|
||||
Meteor.call('students.loadCsv', reader.result, selectedSite._id);
|
||||
}
|
||||
reader.readAsText(file, "UTF-8");
|
||||
}
|
||||
}
|
||||
let files;
|
||||
|
||||
const studentColumns = [
|
||||
{
|
||||
key: "_id",
|
||||
title: "ID",
|
||||
value: v => v._id,
|
||||
minWidth: 20,
|
||||
weight: 1,
|
||||
cls: "id",
|
||||
}, {
|
||||
key: "email",
|
||||
title: "Email",
|
||||
value: v => v.email,
|
||||
minWidth: 100,
|
||||
weight: 1,
|
||||
cls: "email",
|
||||
}, {
|
||||
key: "firstName",
|
||||
title: "First Name",
|
||||
value: v => v.firstName,
|
||||
minWidth: 100,
|
||||
weight: 1,
|
||||
cls: "firstName",
|
||||
}, {
|
||||
key: "lastName",
|
||||
title: "Last Name",
|
||||
value: v => v.lastName,
|
||||
minWidth: 100,
|
||||
weight: 1,
|
||||
cls: "lastName",
|
||||
}, {
|
||||
key: "grade",
|
||||
title: "Grade",
|
||||
value: v => v.grade,
|
||||
minWidth: 100,
|
||||
weight: 1,
|
||||
cls: "grade",
|
||||
},
|
||||
];
|
||||
let editedStudent = writable(null);
|
||||
const onStudentSelection = (e) => {
|
||||
|
||||
}
|
||||
|
||||
const staffColumns = [
|
||||
{
|
||||
key: "_id",
|
||||
title: "ID",
|
||||
value: v => v._id,
|
||||
minWidth: 20,
|
||||
weight: 1,
|
||||
cls: "id",
|
||||
}, {
|
||||
key: "email",
|
||||
title: "Email",
|
||||
value: v => v.email,
|
||||
minWidth: 100,
|
||||
weight: 1,
|
||||
cls: "email",
|
||||
}, {
|
||||
key: "firstName",
|
||||
title: "First Name",
|
||||
value: v => v.firstName,
|
||||
minWidth: 100,
|
||||
weight: 1,
|
||||
cls: "firstName",
|
||||
}, {
|
||||
key: "lastName",
|
||||
title: "Last Name",
|
||||
value: v => v.lastName,
|
||||
minWidth: 100,
|
||||
weight: 1,
|
||||
cls: "lastName",
|
||||
},
|
||||
];
|
||||
let editedStaff = writable(null);
|
||||
const onStaffSelection = (e) => {
|
||||
|
||||
}
|
||||
|
||||
const assetTypesColumns = [
|
||||
{
|
||||
key: "_id",
|
||||
title: "ID",
|
||||
value: v => v._id,
|
||||
minWidth: 20,
|
||||
weight: 1,
|
||||
cls: "id",
|
||||
}, {
|
||||
key: "name",
|
||||
title: "Name",
|
||||
value: v => v.name,
|
||||
minWidth: 100,
|
||||
weight: 1,
|
||||
cls: "name",
|
||||
}, {
|
||||
key: "description",
|
||||
title: "Description",
|
||||
value: v => v.description,
|
||||
minWidth: 100,
|
||||
weight: 1,
|
||||
cls: "description",
|
||||
}, {
|
||||
key: "hasSerial",
|
||||
title: "Has Serial",
|
||||
value: v => v.hasSerial,
|
||||
minWidth: 100,
|
||||
weight: 1,
|
||||
cls: "hasSerial",
|
||||
},
|
||||
];
|
||||
let editedAssetType = writable(null);
|
||||
const onAssetTypeSelection = (e) => {
|
||||
|
||||
}
|
||||
let dirtyAssetType = null;
|
||||
// Copy the edited site when ever it changes, set some defaults for a new site object (to make the view happy).
|
||||
editedAssetType.subscribe(v => {dirtyAssetType = Object.assign({name: ""}, v)});
|
||||
// Load the sites (reactive).
|
||||
let assetTypes = AssetTypes.find({});
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<GridTable bind:rows={sites} columns="{siteColumns}" actions="{actions}" rowKey="{(user) => {return user._id}}" bind:edited="{editedSite}">
|
||||
<GridTable bind:rows={sites} columns="{siteColumns}" actions="{actions}" rowKey="{(v) => {return v._id}}" bind:edited="{editedSite}" on:selection={onSiteSelection}>
|
||||
{#if dirtySite}
|
||||
<div class="editorContainer">
|
||||
<div style="grid-column: 1/span 1">
|
||||
@@ -88,17 +239,81 @@
|
||||
{/if}
|
||||
</GridTable>
|
||||
|
||||
{#if selectedSite}
|
||||
<h2>Site Students</h2>
|
||||
<form on:submit|preventDefault={uploadStudents}>
|
||||
<input style="display: inline-block" type="file" multiple="false" accept="text/csv" bind:files={files}/>
|
||||
<input type="submit" value="Upload"/>
|
||||
</form>
|
||||
<GridTable bind:rows={students} columns="{studentColumns}" actions="{null}" rowKey="{(v) => {return v._id}}" bind:edited="{editedStudent}" on:selection={onStudentSelection}>
|
||||
{#if dirtySite}
|
||||
<div class="editorContainer">
|
||||
<div style="grid-column: 1/span 1">
|
||||
<TextField type="text" style="width: 100%" bind:value={dirtySite.name} label="Name">
|
||||
<HelperText slot="helper">Provide a unique name for the site.</HelperText>
|
||||
</TextField>
|
||||
</div>
|
||||
|
||||
<button type="button" style="grid-column: 2/span 1;" class="button accept-button material-icons material-symbols-outlined" on:click={applySiteChanges}>
|
||||
check
|
||||
</button>
|
||||
<button type="button" style="grid-column: 3/span 1;" class="button reject-button material-icons material-symbols-outlined" on:click={rejectSiteChanges}>
|
||||
close
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</GridTable>
|
||||
|
||||
<h2>Site Staff</h2>
|
||||
<GridTable bind:rows={staff} columns="{staffColumns}" actions="{null}" rowKey="{(v) => {return v._id}}" bind:edited="{editedStaff}" on:selection={onStaffSelection}>
|
||||
{#if dirtySite}
|
||||
<div class="editorContainer">
|
||||
<div style="grid-column: 1/span 1">
|
||||
<TextField type="text" style="width: 100%" bind:value={dirtySite.name} label="Name">
|
||||
<HelperText slot="helper">Provide a unique name for the site.</HelperText>
|
||||
</TextField>
|
||||
</div>
|
||||
|
||||
<button type="button" style="grid-column: 2/span 1;" class="button accept-button material-icons material-symbols-outlined" on:click={applySiteChanges}>
|
||||
check
|
||||
</button>
|
||||
<button type="button" style="grid-column: 3/span 1;" class="button reject-button material-icons material-symbols-outlined" on:click={rejectSiteChanges}>
|
||||
close
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</GridTable>
|
||||
{/if}
|
||||
|
||||
<h2>Asset Types</h2>
|
||||
<GridTable bind:rows={assetTypes} columns="{assetTypesColumns}" actions="{null}" rowKey="{(v) => {return v._id}}" bind:edited="{editedAssetType}" on:selection={onAssetTypeSelection}>
|
||||
{#if dirtySite}
|
||||
<div class="editorContainer">
|
||||
<div style="grid-column: 1/span 1">
|
||||
<TextField type="text" style="width: 100%" bind:value={dirtySite.name} label="Name">
|
||||
<HelperText slot="helper">Provide a unique name for the site.</HelperText>
|
||||
</TextField>
|
||||
</div>
|
||||
|
||||
<button type="button" style="grid-column: 2/span 1;" class="button accept-button material-icons material-symbols-outlined" on:click={applySiteChanges}>
|
||||
check
|
||||
</button>
|
||||
<button type="button" style="grid-column: 3/span 1;" class="button reject-button material-icons material-symbols-outlined" on:click={rejectSiteChanges}>
|
||||
close
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</GridTable>
|
||||
<!--{#each sites as site}-->
|
||||
<!-- <div>{site.name}</div>-->
|
||||
<!--{/each}-->
|
||||
<!-- <button type="button" on:click={fixRecords}>Fix Records</button>-->
|
||||
<form on:submit={submitForm}>
|
||||
<input type="file" bind:files={files}/>
|
||||
<input type="submit"/>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
form {
|
||||
margin: 0;
|
||||
}
|
||||
.editorContainer {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(10px, 1fr) minmax(3rem, 3rem) minmax(3rem, 3rem);
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
<script>
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
export let rows;
|
||||
export let columns;
|
||||
export let rowKey; //Must only be null/undefined if the row is a new object (not associated with a row in the table). Should not change.
|
||||
@@ -6,6 +8,8 @@
|
||||
export let actions;
|
||||
export let selection; //TODO: allow multiple selections? Make selections optional?
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
// Setup a width for each column.
|
||||
columns.forEach(column => {
|
||||
let min = column.minWidth ? Math.max(10, column.minWidth) : 10;
|
||||
@@ -72,6 +76,7 @@
|
||||
|
||||
selectedRowElement = element;
|
||||
element.classList.add('selected');
|
||||
dispatch('selection', selectedRowElement.dataset.key);
|
||||
}
|
||||
|
||||
// Edit row code.
|
||||
|
||||
Reference in New Issue
Block a user