130 lines
3.3 KiB
Vue
130 lines
3.3 KiB
Vue
<template>
|
|
<b-form @submit="submitForm">
|
|
<b-form-group id="id-group" label-for="id" label="Record ID">
|
|
<b-form-input id="id" v-model="record.record_id" required trim disabled>
|
|
</b-form-input>
|
|
</b-form-group>
|
|
<b-form-group id="project-group" label-for="project" label="Project">
|
|
<b-form-select
|
|
id="project"
|
|
v-model="record.project_id"
|
|
:options="selectableProjects"
|
|
required
|
|
>
|
|
</b-form-select>
|
|
</b-form-group>
|
|
<b-form-group id="startdate-group" label="Start date" label-for="startdate">
|
|
<b-form-datepicker
|
|
id="startdate"
|
|
v-model="times.start.date"
|
|
required
|
|
placeholder="Choose a start date"
|
|
:max="times.end.date"
|
|
dark
|
|
>
|
|
</b-form-datepicker>
|
|
</b-form-group>
|
|
<b-form-group id="starttime-group" label="Start time" label-for="starttime">
|
|
<b-form-timepicker
|
|
id="starttime"
|
|
v-model="times.start.time"
|
|
required
|
|
placeholder="Choose a start time"
|
|
dark
|
|
>
|
|
</b-form-timepicker>
|
|
</b-form-group>
|
|
<b-form-group id="enddate-group" label="End date" label-for="enddate">
|
|
<b-form-datepicker
|
|
id="enddate"
|
|
v-model="times.end.date"
|
|
required
|
|
placeholder="Choose an end date"
|
|
:min="times.start.date"
|
|
dark
|
|
>
|
|
</b-form-datepicker>
|
|
</b-form-group>
|
|
<b-form-invalid-feedback :state="!failed">
|
|
Something went wrong.
|
|
</b-form-invalid-feedback>
|
|
<b-button variant="primary" type="submit" class="right" :disabled="working">
|
|
<b-spinner v-if="working" small />
|
|
Save
|
|
</b-button>
|
|
<b-card class="mt-3" header="Form Data Result">
|
|
<pre class="m-0">{{ record }}</pre>
|
|
</b-card>
|
|
<b-card class="mt-3" header="Form Data Result">
|
|
<pre class="m-0">{{ times }}</pre>
|
|
</b-card>
|
|
</b-form>
|
|
</template>
|
|
|
|
<script>
|
|
import store from "@/store";
|
|
|
|
export default {
|
|
name: "FormRecordDetails",
|
|
props: {
|
|
record: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
times: {
|
|
start: {},
|
|
end: {}
|
|
},
|
|
selectableProjects: [],
|
|
failed: false,
|
|
working: false
|
|
};
|
|
},
|
|
methods: {
|
|
/**
|
|
* Submits the form. Assupmtion: Form is valid, based on required flags.
|
|
*/
|
|
submitForm: function(e) {
|
|
e.preventDefault();
|
|
this.failed = false;
|
|
this.working = true;
|
|
|
|
return false;
|
|
}
|
|
},
|
|
created: function() {
|
|
// Load selectable projects
|
|
var projects = [];
|
|
Object.values(store.getters.projects).forEach(project => {
|
|
projects.push({ value: project.project_id, text: project.name });
|
|
});
|
|
this.selectableProjects = projects;
|
|
|
|
// Load record times
|
|
let dateAndTime = /([0-9-]*)\s([0-9:]*)/;
|
|
var startMatch = String(this.record.start_time).match(dateAndTime);
|
|
this.times.start.date = startMatch[1];
|
|
this.times.start.time = startMatch[2];
|
|
|
|
var endMatch = String(this.record.end_time).match(dateAndTime);
|
|
if (endMatch !== null) {
|
|
this.times.end.date = endMatch[1];
|
|
this.times.end.time = endMatch[2];
|
|
} else {
|
|
this.times.end.date = new Date().toISOString();
|
|
this.times.end.time = new Date().toTimeString();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass">
|
|
.left
|
|
float: left !important
|
|
|
|
.right
|
|
float: right !important
|
|
</style>
|