LiberaForms/data-display
4
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

add icons

Browse source
This commit is contained in:
antoniofelices 2022-06-07 20:17:59 +02:00
parent 6cf347a616
commit 2734f7e7b8
18 changed files with 152 additions and 255 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -17,6 +17,7 @@
"moment": "^2.29.1",
"underscore": "^1.13.1",
"vue": "^2.6.14",
"vue-feather-icons": "^5.1.0",
"vue-loader": "^15.9.8",
"vue-mq": "^1.0.1",
"vue-slide-up-down": "^2.0.1",

17
src/components/dataDisplay.vue
View file

@ -13,16 +13,14 @@ This file is part of LiberaForms.
v-on:click="togglePanel"
:aria-label="$t('Mark for reference')">
<span>{{ $t("Filters") }}</span>
<i v-if="show_panel == false"
<ChevronDownIcon v-if="show_panel == false"
class="expand_panel_icon"
data-feather="arrow-down"
aria-hidden="true">
</i>
<i v-else
aria-hidden="true"
/>
<ChevronUpIcon v-else
class="expand_panel_icon"
data-feather="arrow-up"
aria-hidden="true">
</i>
aria-hidden="true"
/>
</a>
</div>
<slide-up-down v-if="$mq == 'sm'"
@ -56,11 +54,14 @@ import axios from 'axios';
import { bus } from '../loaders/dataDisplayLoader'
import SlideUpDown from 'vue-slide-up-down'
import Panel from './panel/panel.vue';
import { ChevronDownIcon, ChevronUpIcon } from 'vue-feather-icons'
export default {
components: {
'Panel': Panel,
'SlideUpDown': SlideUpDown,
'ChevronDownIcon': ChevronDownIcon,
'ChevronUpIcon': ChevronUpIcon
},
data() {
return {

26
src/components/eternalScroll.vue
View file

@ -13,18 +13,16 @@ This file is part of LiberaForms.
</span>
<div v-if="item_count < total_items"
style="margin-top: 1em;">
<i v-if="downloading == false"
v-on:click.once="download_more"
id="download_more"
class=""
data-feather="loader"
aria-label="Download more">
</i>
<i v-else
id="download_more"
class=""
data-feather="loader">
</i>
<LoaderIcon v-if="downloading == false"
v-on:click.once="download_more"
id="download_more"
class=""
aria-label="Download more"
/>
<LoaderIcon v-else
id="download_more"
class=""
/>
</div>
</div>
</div>
@ -34,9 +32,13 @@ This file is part of LiberaForms.
import { mapMutations, mapActions } from 'vuex'
import axios from 'axios';
import { bus } from '../loaders/dataTableLoader'
import { LoaderIcon } from 'vue-feather-icons'
export default {
name: "EternalScroll",
components: {
'LoaderIcon': LoaderIcon
},
props: ['item_count', 'total_items'],
data() {
return {

2
src/components/itemsRenderer.vue
View file

@ -18,7 +18,7 @@ This file is part of LiberaForms.
</FieldEditor>
<h2 v-if="displayed_items.length == 0"
class="no-data text-center">
class="no-data mt-5">
{{ $t('No data') }}
</h2>
<template v-if="displayed_items.length > 0">

117
src/components/itemsRenderer/card.vue
View file

@ -7,24 +7,7 @@ This file is part of LiberaForms.
<template>
<div class="card my-4">
<div class="card_header">
<button v-if="my_expanded == false"
class="expand_card btn btn-primary"
v-on:click="toggle_my_expanded()"
v-bind:aria-label="$t('Expand')">
<i data-feather="arrow-down"
aria-hidden="true">
</i>
</button>
<button v-else
class="expand_card btn btn-primary"
v-on:click="toggle_my_expanded()"
v-bind:aria-label="$t('Collapse')">
<i class="fa fa-arrow-up"
aria-hidden="true">
</i>
</button>
<div class="card-header d-flex justify-content-between">
<RowControls v-if="(can_edit && item.marked !== undefined) || edit_mode"
v-bind:item_id="item.id"
v-bind:marked="item.marked"
@ -35,27 +18,45 @@ This file is part of LiberaForms.
v-bind:item_id="item.id"
v-bind:edit_mode="edit_mode">
</FieldRender>
<button v-if="my_expanded == false"
class="expand_card"
v-on:click="toggle_my_expanded()"
v-bind:aria-label="$t('Expand')">
<ChevronDownIcon aria-hidden="true" />
</button>
<button v-else
class="expand_card"
v-on:click="toggle_my_expanded()"
v-bind:aria-label="$t('Collapse')">
<ChevronUpIcon aria-hidden="true" />
</button>
</div>
<div v-if="my_expanded == true"
:class="{'card-data-flex-container': expand_all == true}">
<template v-for="(field, index) in fields">
<div v-if="field.name != 'marked'"
:class="{'card-data-flex': expand_all == true}">
<div class="field_label"
:class="{deletedFieldLabel: is_deleted_field(field.name)}">
{{ field.label }}
</div>
<FieldRender v-bind:field_name="field.name"
v-bind:field_value="field.name == 'created' ? item.created :
item.data[field.name]"
v-bind:item_id="item.id"
v-bind:edit_mode="field.name == 'created' ? false : edit_mode">
</FieldRender>
</div>
</template>
:class="{'card-data-flex-container': expand_all == true}"
class="card-body"
>
<ul class="list-group list-group-flush">
<template v-for="(field, index) in fields">
<li v-if="field.name != 'marked'"
:class="{'card-data-flex': expand_all == true}"
class="list-group-item"
>
<span class="field_label"
:class="{deletedFieldLabel: is_deleted_field(field.name)}">
{{ field.label }}:
</span>
<strong>
<FieldRender v-bind:field_name="field.name"
v-bind:field_value="field.name == 'created' ? item.created :
item.data[field.name]"
v-bind:item_id="item.id"
v-bind:edit_mode="field.name == 'created' ? false : edit_mode">
</FieldRender>
</strong>
</li>
</template>
</ul>
</div>
</div>
@ -65,12 +66,15 @@ This file is part of LiberaForms.
import { mapGetters } from 'vuex';
import RowControls from './rowControls.vue'
import FieldRender from './fieldRender.vue'
import { ChevronDownIcon, ChevronUpIcon } from 'vue-feather-icons'
export default {
name: "Card",
components: {
'RowControls' : RowControls,
'FieldRender' : FieldRender,
'ChevronDownIcon': ChevronDownIcon,
'ChevronUpIcon': ChevronUpIcon
},
props: [
'fields',
@ -113,44 +117,3 @@ export default {
},
};
</script>
<style>
/* .rowControls {
display: inline;
}
.card {
border: 0;
border-radius: 0;
border-top: 1px solid lightgray;
padding-top: 1em;
margin-bottom: 1em;
}
.card_header {
max-width: 100%;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.expand_card {
padding-left: 0.4em;
padding-right: 0.4em;
margin-right: 0.3em;
}
.field_label {
margin-top: 1em;
font-weight: bold;
}
.card-data-flex-container {
margin: 1em 0 0.4em 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.card-data-flex {
flex: 1 1 auto;
border-left: #ddd 1px solid;
padding: 0 0.5em 0.75em 0.5em;
} */
</style>

8
src/components/itemsRenderer/cards.vue
View file

@ -21,7 +21,7 @@ This file is part of LiberaForms.
:size="40"
:bottom="40"
:right="40"
bg-color="#7C5774">
bg-color="var(--bs-body-color)">
</go-top>
</div>
</template>
@ -64,9 +64,3 @@ export default {
},
};
</script>
<style scoped>
/* .panel_visible {
} */
</style>

6
src/components/itemsRenderer/expanded.vue
View file

@ -18,7 +18,7 @@ This file is part of LiberaForms.
:size="40"
:bottom="40"
:right="40"
bg-color="#7C5774">
bg-color="var(--bs-body-color)">
</go-top>
</div>
</template>
@ -70,7 +70,3 @@ export default {
},
};
</script>
<style>
</style>

39
src/components/itemsRenderer/fieldEditor.vue
View file

@ -24,13 +24,12 @@ This file is part of LiberaForms.
data-dismiss="modal"
aria-label="Close"
v-on:click="toggleModal">
<span aria-hidden="true">&times;</span>
<XIcon aria-hidden="true" />
</button>
</div>
<div class="modal-body">
<template v-if="my_edit_mode">
<div class="form-group">
<input v-if="field_type == 'text' ||
field_type == 'date' ||
field_type == 'number'"
@ -71,7 +70,6 @@ This file is part of LiberaForms.
class="form-control"
v-model="field_value">
</textarea>
</div>
</template>
<div v-else-if="field_name.startsWith('checkbox')"
@ -81,25 +79,25 @@ This file is part of LiberaForms.
{{formatted_field_value()}}
</div>
</div>
<div class="modal-footer">
<button v-if="can_edit && !my_edit_mode"
<div v-if="can_edit && !my_edit_mode"
class="modal-footer"
>
<button
type="button"
class="btn btn-outline-secondary"
class="btn btn-outline-primary"
data-dismiss="modal"
v-on:click="activate_edition">
{{ $t("Edit") }}
</button>
<button type="button"
class="btn btn-primary"
data-dismiss="modal"
v-on:click="toggleModal">
{{ close_button_text}}
</button>
</div>
<div v-if="my_edit_mode"
class="modal-footer"
>
<button v-if="my_edit_mode"
type="button"
class="btn btn-success"
v-on:click="save_field">
{{ $t("Save") }}
type="button"
class="btn btn-primary"
v-on:click="save_field">
{{ $t("Save") }}
</button>
</div>
</div>
@ -112,9 +110,13 @@ This file is part of LiberaForms.
<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
import { bus } from '../../loaders/dataDisplayLoader'
import { XIcon } from 'vue-feather-icons'
export default {
name: "FieldEditor",
components: {
'XIcon': XIcon
},
props: [
"can_edit", "edit_mode",
],
@ -266,8 +268,3 @@ export default {
};
</script>
<style scoped>
/* label {
font-size: 1em !important;
} */
</style>

21
src/components/itemsRenderer/fieldRender.vue
View file

@ -72,8 +72,8 @@ export default {
},
bool_badge: function() {
var text = this.field_value ? this.$t("True") : this.$t("False")
var color = this.field_value ? "badge-success" : "badge-secondary"
return '<span class="badge '+color+'">'+text+'</span>'
// var color = this.field_value ? "" : ""
return text
},
...mapGetters([
'getFormattedValue'
@ -81,20 +81,3 @@ export default {
},
};
</script>
<style scoped>
/* span > a {
padding: 0 0.5em 0 1em;
padding-right: 1em;
}
span.editMode {
text-decoration: underline wavy #BA1C1C;
}
span.emptyField {
color: gray;
font-style: italic;
}
.field-value {
cursor: pointer;
} */
</style>

14
src/components/itemsRenderer/grid.vue
View file

@ -16,9 +16,8 @@ This file is part of LiberaForms.
v-on:click="setOrder(field.name)"
class="stickyColumn first_sticky_col">
<div class="nonEditMode"
style="margin-left:0.7rem"
:aria-label="$t('Marked')">
<i data-feather="edit-2" aria-hidden="true"></i>
<EditIcon size="1x" aria-hidden="true" />
</div>
</th>
<th v-else
@ -27,7 +26,7 @@ This file is part of LiberaForms.
v-on:click="setOrder(field.name)"
:class="{deletedFieldLabel: is_deleted_field(field.name)}">
{{ $t(field.label) }}
<i data-feather="arrow-down" aria-hidden="true"></i>
<ArrowDownIcon size="1x" aria-hidden="true" />
</div>
</th>
</template>
@ -52,12 +51,15 @@ This file is part of LiberaForms.
import { mapGetters, mapActions } from 'vuex'
import GridRow from './gridRow.vue'
import NumericTotals from './numericTotals.vue'
import { ArrowDownIcon, EditIcon } from 'vue-feather-icons'
export default {
name: "Grid",
components: {
'GridRow': GridRow,
'NumericTotals': NumericTotals
'NumericTotals': NumericTotals,
'ArrowDownIcon': ArrowDownIcon,
'EditIcon': EditIcon
},
props: [
'can_edit',
@ -217,11 +219,11 @@ td > div.editMode {
left: 0px;
}
.sticky_data_col_with_controls {
left: 42px;
left: 35px;
}
@-moz-document url-prefix() {
.sticky_data_col_with_controls {
left: 42px;
left: 35px;
}
}
.sticky_data_col_with_controls_expanded {

11
src/components/itemsRenderer/gridRow.vue
View file

@ -92,14 +92,3 @@ export default {
},
};
</script>
<style scoped>
/*
tr:hover:not(.highlighted) {
background-color: #dcdcdc !important;
}
.highlighted {
background-color: #ede0aa;
}
*/
</style>

8
src/components/itemsRenderer/numericTotals.vue
View file

@ -40,11 +40,3 @@ export default {
},
};
</script>
<style scoped>
/* ul {
list-style-type: none;
margin: 0;
padding: 0;
} */
</style>

34
src/components/itemsRenderer/rowControls.vue
View file

@ -8,13 +8,11 @@ This file is part of LiberaForms.
<template>
<div class="rowControls"
:class="edit_mode ? 'editMode' : 'nonEditMode'">
<button class="btn"
<button class=""
v-on:click="toggle_marked"
:aria-label="$t('Mark for reference')"
:class="marked ? 'btn-primary' : 'btn-outline-primary'">
<i class=""
aria-hidden="true">
</i>
:aria-label="$t('Mark for reference')">
<CheckIcon v-if="marked" size="1x" />
<CheckSquareIcon v-else size="1x" />
</button>
<button v-if="edit_mode==true"
@ -22,9 +20,7 @@ This file is part of LiberaForms.
:class="delete_btn_class"
:aria-label="$t('Delete answer')"
v-on:click="delete_item">
<i class=""
aria-hidden="true">
</i>
<DeleteIcon size="1x" aria-hidden="true" />
</button>
</div>
@ -34,9 +30,15 @@ This file is part of LiberaForms.
import { mapMutations, mapGetters } from 'vuex'
import axios from 'axios';
import { bus } from '../../loaders/dataDisplayLoader'
import { CheckIcon, DeleteIcon, CheckSquareIcon } from 'vue-feather-icons'
export default {
name: "RowControls",
components: {
'CheckIcon': CheckIcon,
'DeleteIcon': DeleteIcon,
'CheckSquareIcon': CheckSquareIcon
},
props: ['item_id', 'marked', 'edit_mode'],
data() {
return {
@ -91,17 +93,3 @@ export default {
},
};
</script>
<style scoped>
/*
.rowControls {
}
.rowControls > .btn:not(:first-child) {
margin-left: 0.25em;
}
.btn {
margin-right: 3px;
}
*/
</style>

23
src/components/panel/exports.vue
View file

@ -11,32 +11,40 @@ This file is part of LiberaForms.
<a class="btn btn-primary"
role="button"
:href="csv_endpoint"> <!--?with_deleted_columns=true">-->
CSV <i class="fa fa-download" aria-hidden="true"></i>
<DownloadIcon aria-hidden="true" size="1x" />
CSV
</a>
<button class="btn btn-primary"
v-on:click="generateJSON">
JSON <i class="fa fa-download" aria-hidden="true"></i>
<DownloadIcon aria-hidden="true" size="1x" />
JSON
</button>
<button class="btn btn-primary"
v-on:click="displayPdfBuilder">
PDF <i class="fa fa-sliders" aria-hidden="true"></i>
<FileTextIcon aria-hidden="true" size="1x" />
PDF
</button>
<a class="btn btn-primary"
role="button"
:href="stats_endpoint">
{{ $t("Graphs") }}
<i class="fa fa-bar-chart" aria-hidden="true"></i>
<BarChart2Icon aria-hidden="true" size="1x" />
{{ $t("Graphs") }}
</a>
</div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import { saveAs } from 'file-saver';
import { saveAs } from 'file-saver'
import { DownloadIcon, FileTextIcon, BarChart2Icon } from 'vue-feather-icons'
export default {
name: "Exports",
components: {
'saveAs': saveAs,
'DownloadIcon': DownloadIcon,
'FileTextIcon': FileTextIcon,
'BarChart2Icon': BarChart2Icon
},
props: [
'enable_downloads', 'endpoint'
@ -117,6 +125,3 @@ export default {
};
</script>
<style>
</style>

8
src/components/panel/filters.vue
View file

@ -21,12 +21,12 @@ This file is part of LiberaForms.
aria-describedby="button-to-clear-filter">
<!-- <button v-on:click="clear_filter"
:disabled="filter_text == ''"
class="btn btn-outline-secondary appended-button"
class="appended-button"
alt_text="Clear filter"
id="button-to-clear-filter"
aria-label="clear-filter"
type="button">
<i data-feather="rotate-ccw" aria-hidden="true"></i>
<XIcon aria-hidden="true" size="1x" />
</button> -->
</div>
</div>
@ -89,9 +89,13 @@ This file is part of LiberaForms.
<script>
import { mapMutations, mapGetters, mapActions } from 'vuex'
import { XIcon } from 'vue-feather-icons'
export default {
name: "Filters",
components: {
'XIcon': XIcon
},
props: [
'field_index'
],

8
src/components/panel/modes.vue
View file

@ -13,12 +13,12 @@ This file is part of LiberaForms.
v-if="mq != 'sm'"
v-on:click="toggleItemsRenderMode">
<button class="btn"
:class="items_as_table==true ? 'btn-primary' : 'btn-outline-secondary'"
:class="items_as_table==true ? 'btn-primary' : 'btn-outline-primary'"
:disabled="getDisplayMode() == 'pdfMode'">
{{ $t("Table") }}
</button>
<button class="btn"
:class="items_as_table==false ? 'btn-primary' : 'btn-outline-secondary'"
:class="items_as_table==false ? 'btn-primary' : 'btn-outline-primary'"
:disabled="getDisplayMode() == 'pdfMode'">
{{ $t("Cards") }}
</button>
@ -27,7 +27,7 @@ This file is part of LiberaForms.
<!-- edit mode -->
<button v-if="can_edit == true && getDisplayMode() == 'itemsMode'"
class="btn"
:class="edit_mode==true ? 'btn-primary' : 'btn-outline-secondary'"
:class="edit_mode==true ? 'btn-primary' : 'btn-outline-primary'"
v-on:click="toggle_edit_mode">
{{ $t("Edit") }}
</button>
@ -35,7 +35,7 @@ This file is part of LiberaForms.
<!-- show deleted fields -->
<button v-if="can_edit == true && has_deleted_fields == true"
class="btn"
:class="show_deleted==false ? 'btn-outline-secondary' : 'btn-primary'"
:class="show_deleted==false ? 'btn-outline-primary' : 'btn-primary'"
v-on:click="toggle_deleted_fields">
{{ $t("Deleted fields") }}
</button>

15
src/components/panel/panel.vue
View file

@ -11,17 +11,14 @@ This file is part of LiberaForms.
<!-- transition start -->
<!-- first row -->
<div>
<div v-if="getExportsEnabled() == true"
class="">
<div v-if="getExportsEnabled() == true">
<Modes v-bind:mq="mq"
v-bind:edit_mode="edit_mode"
v-bind:can_edit="can_edit">
</Modes>
</div>
<div class="">
<Exports v-bind:endpoint="endpoint">
</Exports>
</div>
<Exports v-bind:endpoint="endpoint">
</Exports>
</div>
<!-- second row -->
<Filters v-bind:mq="mq"
@ -90,9 +87,3 @@ export default {
},
};
</script>
<style>
/* .panel {
} */
</style>

49
src/components/pdfBuilder.vue
View file

@ -7,28 +7,20 @@ This file is part of LiberaForms.
<template>
<div v-if="getDisplayMode() == 'pdfMode'">
<div class="row">
<div class="col">
<div class=" mb-3" style="font-size: 1.25em">
<i class="fa fa-sliders" aria-hidden="true"></i>
{{$t("PDF settings")}}
</div>
<div class="grid">
<div class="g-col-12">
<h2>{{$t("PDF settings")}}</h2>
</div>
</div>
<div class="row">
<div class="col-auto">
<div class="input-group mb-3">
<div class="grid mt-4">
<div class="g-col-12 g-col-lg-3">
<div class="input-group">
<div class="input-group-prepend">
<span id="inputGroup-sizing-sm"
class="input-group-text">
{{ $t("Only export marked") }}
<span class="badge badge-pill badge-success"
style="padding: 0.5em 0.7em 0.5em 0.7em; margin-left: 0.5em">
<i class="fa fa-thumb-tack"
aria-hidden="true">
</i>
</span>
</span>
</div>
<div class="input-group-append btn-toggle-group"
@ -46,8 +38,8 @@ This file is part of LiberaForms.
</div>
</div>
<div class="col-auto">
<div class="input-group mb-3">
<div class="g-col-12 g-col-lg-3">
<div class="input-group">
<div class="input-group-prepend">
<span id="inputGroup-sizing-sm"
class="input-group-text">
@ -68,8 +60,8 @@ This file is part of LiberaForms.
</div>
</div>
<div class="col-auto">
<div class="input-group mb-3">
<div class="g-col-12 g-col-lg-3">
<div class="input-group">
<div class="input-group-prepend">
<span id="inputGroup-sizing-sm"
class="input-group-text">
@ -90,8 +82,8 @@ This file is part of LiberaForms.
</div>
</div>
<div class="col-auto">
<div class="btn-group btn-toggle-group mb-3"
<div class="g-col-12 g-col-lg-3">
<div class="btn-group btn-toggle-group"
v-on:click="toggleOrientation">
<button class="btn"
:class="portrait==true ? 'btn-primary' : 'btn-outline-secondary'">
@ -103,14 +95,11 @@ This file is part of LiberaForms.
</button>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div style="font-size: 1.25em">
{{ $t('Select the fields to include in the PDF') }}
</div>
<hr />
<div class="grid mt-4">
<div class="g-col-12">
<h3>{{ $t('Select the fields to include in the PDF') }}</h3>
<template v-for="(field, index) in fields">
<input :id="index"
:key="field.name"
@ -124,12 +113,12 @@ This file is part of LiberaForms.
<br>
</template>
<hr />
<button class="btn btn-success"
<button class="btn btn-primary"
:disabled="selected_fields.length == 0"
v-on:click="generatePDF">
{{ $t('Download PDF') }}
</button>
<button class="btn btn-primary"
<button class="btn btn-outline-primary"
v-on:click="togglePdfBuilderMode">
{{ $t('Cancel') }}
</button>