Skip to content

Commit

Permalink
Fixing export preview missing scroll for incidents, cases, and tasks (#…
Browse files Browse the repository at this point in the history 
…3919)
  • Loading branch information
@whitdog47 @metroid-samus
whitdog47 authored and metroid-samus committed Nov 29, 2023
1 parent b8b5822 commit f221d09
Show file tree
Hide file tree
Showing 3 changed files with 248 additions and 206 deletions.
135 changes: 74 additions & 61 deletions src/dispatch/static/dispatch/src/case/TableExportDialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,71 +17,77 @@
</v-stepper-header>
<v-stepper-window>
<v-stepper-window-item :value="1">
<v-list density="compact">
<v-list-item>
<date-window-input v-model="reported_at" label="Reported At" />
</v-list-item>
<v-list-item>
<project-combobox v-model="project" label="Projects" />
</v-list-item>
<v-list-item>
<tag-filter-auto-complete v-model="tag" label="Tags" />
</v-list-item>
<v-list-item>
<tag-type-filter-combobox v-model="tag_type" label="Tag Types" />
</v-list-item>
<v-list-item>
<case-type-combobox v-model="case_type" />
</v-list-item>
<v-list-item>
<case-severity-combobox v-model="case_severity" />
</v-list-item>
<v-list-item>
<case-priority-combobox v-model="case_priority" />
</v-list-item>
<v-list-item>
<case-status-multi-select v-model="status" />
</v-list-item>
</v-list>
<v-spacer />
<v-btn @click="closeExport()" variant="text"> Cancel </v-btn>
<v-btn color="info" @click="e1 = 2"> Continue </v-btn>
<div class="scrollable-container">
<v-list density="compact">
<v-list-item>
<date-window-input v-model="reported_at" label="Reported At" />
</v-list-item>
<v-list-item>
<project-combobox v-model="project" label="Projects" />
</v-list-item>
<v-list-item>
<tag-filter-auto-complete v-model="tag" label="Tags" />
</v-list-item>
<v-list-item>
<tag-type-filter-combobox v-model="tag_type" label="Tag Types" />
</v-list-item>
<v-list-item>
<case-type-combobox v-model="case_type" />
</v-list-item>
<v-list-item>
<case-severity-combobox v-model="case_severity" />
</v-list-item>
<v-list-item>
<case-priority-combobox v-model="case_priority" />
</v-list-item>
<v-list-item>
<case-status-multi-select v-model="status" />
</v-list-item>
</v-list>
<v-spacer />
<v-btn @click="closeExport()" variant="text"> Cancel </v-btn>
<v-btn color="info" @click="e1 = 2"> Continue </v-btn>
</div>
</v-stepper-window-item>
<v-stepper-window-item :value="2">
<v-autocomplete
v-model="selectedFields"
:items="allFields"
label="Fields"
multiple
chips
return-object
/>
<v-spacer />
<v-btn @click="closeExport()" variant="text"> Cancel </v-btn>
<v-btn color="info" @click="e1 = 3"> Continue </v-btn>
<div class="scrollable-container">
<v-autocomplete
v-model="selectedFields"
:items="allFields"
label="Fields"
multiple
chips
return-object
/>
<v-spacer />
<v-btn @click="closeExport()" variant="text"> Cancel </v-btn>
<v-btn color="info" @click="e1 = 3"> Continue </v-btn>
</div>
</v-stepper-window-item>
<v-stepper-window-item :value="3">
<v-data-table
hide-default-footer
:headers="selectedFields"
:items="items"
:loading="previewRowsLoading"
>
<template #item.case_severity.name="{ item }">
<case-severity :severity="item.case_severity.name" />
</template>
<template #item.case_priority.name="{ item }">
<case-priority :priority="item.case_priority.name" />
</template>
<template #item.status="{ item }">
<case-status :status="item.status" :id="item.id" />
</template>
</v-data-table>
<v-spacer />
<v-btn @click="closeExport()" variant="text"> Cancel </v-btn>
<v-badge :model-value="!!total" color="info" bordered :content="total">
<v-btn color="info" @click="exportToCSV()" :loading="exportLoading"> Export </v-btn>
</v-badge>
<div class="scrollable-container">
<v-data-table
hide-default-footer
:headers="selectedFields"
:items="items"
:loading="previewRowsLoading"
>
<template #item.case_severity.name="{ item }">
<case-severity :severity="item.case_severity.name" />
</template>
<template #item.case_priority.name="{ item }">
<case-priority :priority="item.case_priority.name" />
</template>
<template #item.status="{ item }">
<case-status :status="item.status" :id="item.id" />
</template>
</v-data-table>
<v-spacer />
<v-btn @click="closeExport()" variant="text"> Cancel </v-btn>
<v-badge :model-value="!!total" color="info" bordered :content="total">
<v-btn color="info" @click="exportToCSV()" :loading="exportLoading"> Export </v-btn>
</v-badge>
</div>
</v-stepper-window-item>
</v-stepper-window>
</v-stepper>
Expand Down Expand Up @@ -229,3 +235,10 @@ export default {
},
}
</script>

<style scoped>
.scrollable-container {
max-height: 60vh; /* Adjust as needed */
overflow-y: auto;
}
</style>
137 changes: 75 additions & 62 deletions src/dispatch/static/dispatch/src/incident/TableExportDialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,72 +17,78 @@
</v-stepper-header>
<v-stepper-window>
<v-stepper-window-item :value="1">
<v-list density="compact">
<v-list-item>
<date-window-input v-model="reported_at" label="Reported At" />
</v-list-item>
<v-list-item>
<project-combobox v-model="project" label="Projects" />
</v-list-item>
<v-list-item>
<tag-filter-auto-complete v-model="tag" label="Tags" />
</v-list-item>
<v-list-item>
<tag-type-filter-combobox v-model="tag_type" label="Tag Types" />
</v-list-item>
<v-list-item>
<incident-type-combobox v-model="incident_type" />
</v-list-item>
<v-list-item>
<incident-severity-combobox v-model="incident_severity" />
</v-list-item>
<v-list-item>
<incident-priority-combobox v-model="incident_priority" />
</v-list-item>
<v-list-item>
<incident-status-multi-select v-model="status" />
</v-list-item>
</v-list>
<v-spacer />
<v-btn @click="closeExport()" variant="text"> Cancel </v-btn>
<v-btn color="info" @click="e1 = 2"> Continue </v-btn>
<div class="scrollable-container">
<v-list density="compact">
<v-list-item>
<date-window-input v-model="reported_at" label="Reported At" />
</v-list-item>
<v-list-item>
<project-combobox v-model="project" label="Projects" />
</v-list-item>
<v-list-item>
<tag-filter-auto-complete v-model="tag" label="Tags" />
</v-list-item>
<v-list-item>
<tag-type-filter-combobox v-model="tag_type" label="Tag Types" />
</v-list-item>
<v-list-item>
<incident-type-combobox v-model="incident_type" />
</v-list-item>
<v-list-item>
<incident-severity-combobox v-model="incident_severity" />
</v-list-item>
<v-list-item>
<incident-priority-combobox v-model="incident_priority" />
</v-list-item>
<v-list-item>
<incident-status-multi-select v-model="status" />
</v-list-item>
</v-list>
<v-spacer />
<v-btn @click="closeExport()" variant="text"> Cancel </v-btn>
<v-btn color="info" @click="e1 = 2"> Continue </v-btn>
</div>
</v-stepper-window-item>
<v-stepper-window-item :value="2">
<v-autocomplete
v-model="selectedFields"
:items="allFields"
item-title="text"
label="Fields"
multiple
chips
return-object
/>
<v-spacer />
<v-btn @click="closeExport()" variant="text"> Cancel </v-btn>
<v-btn color="info" @click="e1 = 3"> Continue </v-btn>
<div class="scrollable-container">
<v-autocomplete
v-model="selectedFields"
:items="allFields"
item-title="text"
label="Fields"
multiple
chips
return-object
/>
<v-spacer />
<v-btn @click="closeExport()" variant="text"> Cancel </v-btn>
<v-btn color="info" @click="e1 = 3"> Continue </v-btn>
</div>
</v-stepper-window-item>
<v-stepper-window-item :value="3">
<v-data-table
hide-default-footer
:headers="selectedFields"
:items="items"
:loading="previewRowsLoading"
>
<template #item.incident_severity.name="{ item }">
<incident-severity :severity="item.incident_severity.name" />
</template>
<template #item.incident_priority.name="{ item }">
<incident-priority :priority="item.incident_priority.name" />
</template>
<template #item.status="{ item }">
<incident-status :status="item.status" :id="item.id" />
</template>
</v-data-table>
<v-spacer />
<v-btn @click="closeExport()" variant="text"> Cancel </v-btn>
<v-badge :model-value="!!total" color="info" bordered :content="total">
<v-btn color="info" @click="exportToCSV()" :loading="exportLoading"> Export </v-btn>
</v-badge>
<div class="scrollable-container">
<v-data-table
hide-default-footer
:headers="selectedFields"
:items="items"
:loading="previewRowsLoading"
>
<template #item.incident_severity.name="{ item }">
<incident-severity :severity="item.incident_severity.name" />
</template>
<template #item.incident_priority.name="{ item }">
<incident-priority :priority="item.incident_priority.name" />
</template>
<template #item.status="{ item }">
<incident-status :status="item.status" :id="item.id" />
</template>
</v-data-table>
<v-spacer />
<v-btn @click="closeExport()" variant="text"> Cancel </v-btn>
<v-badge :model-value="!!total" color="info" bordered :content="total">
<v-btn color="info" @click="exportToCSV()" :loading="exportLoading"> Export </v-btn>
</v-badge>
</div>
</v-stepper-window-item>
</v-stepper-window>
</v-stepper>
Expand Down Expand Up @@ -240,3 +246,10 @@ export default {
},
}
</script>

<style scoped>
.scrollable-container {
max-height: 60vh; /* Adjust as needed */
overflow-y: auto;
}
</style>
Loading

0 comments on commit f221d09

Please sign in to comment.