Skip to content

Commit

Permalink
Unify Checks, Notes and Signatures, Support inner actions in Home Car…
Browse files Browse the repository at this point in the history 
…ds (#66)

* Checklist, Notes and signature in the same tab

* adjust options for editing reports on index cards
  • Loading branch information
@ivaneliasoo
ivaneliasoo authored Jul 23, 2020
1 parent b220cf1 commit 57e94c3
Show file tree
Hide file tree
Showing 3 changed files with 123 additions and 70 deletions.
150 changes: 87 additions & 63 deletions src/ClientApp/pages/Reports/_id/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,29 +103,38 @@
</v-row>
<v-row>
<v-col cols="12">
<v-tabs v-model="tabs" fixed-tabs>
<v-tabs v-model="tabs" fixed-tabs icons-and-text>
<v-tabs-slider></v-tabs-slider>
<v-tab href="#checklists" class="primary--text">
<v-icon>mdi-check</v-icon>
Report Details
<v-icon>mdi-message-bulleted</v-icon>
</v-tab>

<v-tab href="#notes" class="primary--text">
<v-tab v-if="false" href="#notes" class="primary--text">
<v-icon>mdi-message-bulleted</v-icon>
</v-tab>

<v-tab href="#photos" class="primary--text">
Photo Record
<v-icon>mdi-folder-multiple-image</v-icon>
</v-tab>
<v-tab href="#signatures" class="primary--text">
<v-tab v-if="false" href="#signatures" class="primary--text">
<v-icon>mdi-signature-freehand</v-icon>
</v-tab>
</v-tabs>
<v-tabs-items v-model="tabs">
<v-tab-item key="checklists" value="checklists">
<v-card flat>
<v-card-text>
<v-list subheader two-line flat dense>
<v-subheader>Items &amp; Params</v-subheader>
<v-expansion-panels
multiple
focusable
:value="[0,1,2]"
>
<v-expansion-panel>
<v-expansion-panel-header>
<span>Check List</span>
</v-expansion-panel-header>
<v-expansion-panel-content>
<v-list subheader two-line flat dense>
<v-list-item
v-for="(item, checkListIndex) in currentReport.checkList"
:key="item.id"
Expand Down Expand Up @@ -204,20 +213,23 @@
</template>
</v-list-item>
</v-list>
</v-card-text>
</v-card>
</v-tab-item>
<v-tab-item key="notes" value="notes">
<v-card flat>
<v-card-text>
<v-row>
<v-btn class="mx-2" x-small
fab dark color="primary"
title="Add note"
@click="addNote">
<v-icon dark>mdi-plus</v-icon>
</v-btn>
</v-row>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-header>
Notes
</v-expansion-panel-header>
<v-expansion-panel-content>
<v-row justify="end" align="end" class="text-right">
<v-col cols="12">
<v-btn class="mx-2" x-small
fab dark color="primary"
title="Add note"
@click="addNote">
<v-icon dark>mdi-plus</v-icon>
</v-btn>
</v-col>
</v-row>
<div v-for="(note, index) in currentReport.notes" :key="index">
<v-row dense align="center" justify="space-around">
<v-col cols="1">
Expand All @@ -239,11 +251,56 @@
<v-col cols="2">
<v-checkbox v-model="note.checked" :disabled="currentReport.isClosed" @change="saveNote(note)" :label="note.needsCheck ? '(Check Required)':''" />
</v-col>
<v-col>

</v-col>
</v-row>
</div>

</v-card-text>
</v-card>
<v-row class="mt-10">

</v-row>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-header>
Signatures
</v-expansion-panel-header>
<v-expansion-panel-content>
<div v-for="(signature, index) in currentReport.signatures" :key="index">
<v-row>
<v-col class="text-left">
<h3>{{ signature.title }}</h3>
<h5>{{ signature.annotation }}</h5>
<v-chip v-if="signature.principal">Principal Sign</v-chip>
</v-col>
</v-row>
<v-row align="center" justify="space-around">
<v-col cols="6" md="3">
<v-select
v-model="signature.responsable.type"
:readonly="currentReport.isClosed"
:items="responsableTypes"
label="Responsable Type" />
</v-col>
<v-col cols="6" md="3">
<v-text-field v-model="signature.responsable.name" :readonly="currentReport.isClosed" label="Responsable" />
</v-col>
<v-col cols="12" md="4">
<v-text-field v-model="signature.designation" :readonly="currentReport.isClosed" label="Designation" />
</v-col>
<v-col cols="12" md="2">
<DatePickerBase v-model="signature.date" :disabled="currentReport.isClosed" label="Date" max="" />
</v-col>
</v-row>
<v-row>
<v-col>
<v-text-field v-model="signature.remarks" :readonly="currentReport.isClosed" label="Remarks (if any)" />
</v-col>
</v-row>
</div>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-tab-item>
<v-tab-item key="photos" value="photos">
<v-card flat>
Expand Down Expand Up @@ -346,47 +403,14 @@
</v-row>
</v-card>
</v-tab-item>
<v-tab-item key="signatures" value="signatures">
<v-card flat>
<v-card-text>
<div v-for="(signature, index) in currentReport.signatures" :key="index">
<v-row>
<v-col class="text-left">
<h3>{{ signature.title }}</h3>
<h5>{{ signature.annotation }}</h5>
<v-chip v-if="signature.principal">Principal Sign</v-chip>
</v-col>
</v-row>
<v-row align="center" justify="space-around">
<v-col cols="6" md="3">
<v-select
v-model="signature.responsable.type"
:readonly="currentReport.isClosed"
:items="responsableTypes"
label="Responsable Type" />
</v-col>
<v-col cols="6" md="3">
<v-text-field v-model="signature.responsable.name" :readonly="currentReport.isClosed" label="Responsable" />
</v-col>
<v-col cols="12" md="4">
<v-text-field v-model="signature.designation" :readonly="currentReport.isClosed" label="Designation" />
</v-col>
<v-col cols="12" md="2">
<DatePickerBase v-model="signature.date" :disabled="currentReport.isClosed" label="Date" max="" />
</v-col>
</v-row>
<v-row>
<v-col>
<v-text-field v-model="signature.remarks" :readonly="currentReport.isClosed" label="Remarks (if any)" />
</v-col>
</v-row>
</div>
</v-card-text>
</v-card>
</v-tab-item>
</v-tabs-items>
</v-col>
</v-row>
<v-row>
<v-col>

</v-col>
</v-row>
<v-dialog v-if="currentPhoto" v-model="showCarousel">
<v-carousel v-model="currentPhoto" height="80%">
<v-carousel-item v-for="(photo, index) in currentReport.photoRecords" :key="index" :src="`${hostName}${photo.fileName}`">
Expand Down
2 changes: 1 addition & 1 deletion src/ClientApp/pages/Reports/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
class="mr-2"
@click="$router.push({ name: 'Reports-id', params: { id: item.id} })"
>
mdi-file-chart
mdi-pencil
</v-icon>
<v-icon
small
Expand Down
41 changes: 35 additions & 6 deletions src/ClientApp/pages/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
<v-row>
<new-report-dialog v-model="dialog" @report-created="goToNewReport($event)" />
<v-col cols="12" lg="3" md="3" v-for="(option, index) in cardOptions" :key="index">
<v-card min-height="250" min-width="200" max-height="250" class="pt-10" @click="onCardClick(option)">
<v-btn fab :class="option.color" dark>
<v-card min-height="250" min-width="200" class="pt-10" :ripple="option.innerActions ? false:true" @click="option.innerActions ? 0:onCardClick(option)">
<v-btn v-if="!option.innerActions" fab :class="option.color" dark>
<v-icon>
{{ option.icon }}
</v-icon>
Expand All @@ -23,6 +23,18 @@
</v-col>
</v-row>
</v-card-subtitle>
<v-card-actions>
<v-row>
<v-col cols="6" v-for="(action, index) in option.innerActions" :key="index">
<v-btn :color="action.color" tile :block="$vuetify.breakpoint.smAndDown" @click.stop="action.action()">
<v-icon>
{{ action.icon }}
</v-icon>
{{ action.text }}
</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-col>
</v-row>
Expand Down Expand Up @@ -52,17 +64,34 @@ export default class IndexPage extends Vue{
},
{
text: 'Edit Report',
helpText: 'Edit or remove a previously created report from a list and optionally allows to go directly to the last created or edited report by current user',
helpText: 'Click one of the Options bellow',
icon: 'mdi-pencil',
color: 'accent',
path: () => {
if (this.$auth.user.lastEditedReport)
if(confirm('Do you wanna edit the last edited report?'))
if(confirm('Click one of the Options bellow'))
return `/reports/${this.$auth.user.lastEditedReport}`
else return `/reports`
else
return `/reports`
}
},
innerActions: [
{
text: 'Edit Last',
color: 'primary',
action: () => {
if (this.$auth.user.lastEditedReport)
window.$nuxt.$router.push(`/reports/${this.$auth.user.lastEditedReport}`)
}
},
{
text: 'List All',
color: 'primary',
action: () => {
window.$nuxt.$router.push(`/reports`)
}
}
]
},
{
text: 'View or Export Report',
Expand All @@ -76,7 +105,7 @@ export default class IndexPage extends Vue{
helpText: 'Allows to Configure reports check lists, signatures, titles and names',
icon: 'mdi-cog-outline',
color: 'accent',
path: '/configurations'
path: '/configurations?configurationonly=true'
}
]
Expand Down

0 comments on commit 57e94c3

Please sign in to comment.