github/directus
1
1
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-04-03 03:00:39 -04:00
Code Issues Packages Projects Releases Wiki Activity

Render panel selection

Browse Source
This commit is contained in:
rijkvanzanten
2021-05-25 20:36:53 -04:00
parent 215ccbf64c
commit 28e857bde4
12 changed files with 65 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
api/src/database/migrations/20210525A-add-insights.ts
View File

@@ -16,7 +16,7 @@ export async function up(knex: Knex): Promise<void> {
table.string('name');
table.string('icon', 30).defaultTo('insert_chart');
table.string('color', 10);
table.boolean('show_header').notNullable().defaultTo(true);
table.boolean('show_header').notNullable().defaultTo(false);
table.text('note');
table.string('type').notNullable();
table.integer('position_x').notNullable();

8
app/src/displays/related-values/options.vue
View File

@@ -72,11 +72,3 @@ export default defineComponent({
},
});
</script>
<style lang="scss" scoped>
@import '@/styles/mixins/form-grid';
.form-grid {
@include form-grid;
}
</style>

7
app/src/interfaces/list-m2m/options.vue
View File

@@ -118,10 +118,3 @@ export default defineComponent({
},
});
</script>
<style lang="scss" scoped>
@import '@/styles/mixins/form-grid';
.form-grid {
@include form-grid;
}
</style>

8
app/src/interfaces/list-o2m-tree-view/options.vue
View File

@@ -84,11 +84,3 @@ export default defineComponent({
},
});
</script>
<style lang="scss" scoped>
@import '@/styles/mixins/form-grid';
.form-grid {
@include form-grid;
}
</style>

8
app/src/interfaces/list-o2m/options.vue
View File

@@ -117,11 +117,3 @@ export default defineComponent({
},
});
</script>
<style lang="scss" scoped>
@import '@/styles/mixins/form-grid.scss';
.form-grid {
@include form-grid;
}
</style>

8
app/src/interfaces/select-dropdown-m2o/options.vue
View File

@@ -59,11 +59,3 @@ export default defineComponent({
},
});
</script>
<style lang="scss" scoped>
@import '@/styles/mixins/form-grid';
.form-grid {
@include form-grid;
}
</style>

8
app/src/interfaces/translations/options.vue
View File

@@ -129,11 +129,3 @@ export default defineComponent({
},
});
</script>
<style lang="scss" scoped>
@import '@/styles/mixins/form-grid';
.form-grid {
@include form-grid;
}
</style>

1
app/src/lang/translations/en-US.yaml
View File

@@ -450,6 +450,7 @@ visible_collections: Visible Collections
hidden_collections: Hidden Collections
show_hidden_collections: Show Hidden Collections
hide_hidden_collections: Hide Hidden Collections
show_header: Show Header
unmanaged_collections: Unconfigured Collections
system_collections: System Collections
placeholder: Placeholder

60
app/src/modules/insights/routes/panel-configuration.vue
View File

@@ -1,7 +1,48 @@
<template>
<v-drawer active :title="values.name || $t('panel')">
<div class="content">
<p class="type-label panel-type-label">{{ $t('type') }}</p>
<v-fancy-select class="select" :items="selectItems" v-model="values.type" />
<template v-if="values.type && selectedPanel">
<v-notice v-if="!selectedPanel.options || selectedPanel.options.length === 0">
{{ $t('no_options_available') }}
</v-notice>
<v-form
v-else-if="Array.isArray(selectedPanel.options)"
:fields="selectedPanel.options"
primary-key="+"
v-model="values.options"
/>
<component v-model="values.options" :collection="collection" :is="`panel-options-${selectedPanel.id}`" v-else />
</template>
<v-divider />
<div class="form-grid">
<div class="field half-left">
<p class="type-label">{{ $t('show_header') }}</p>
<v-checkbox block v-model="values.show_header" :label="$t('enabled')" />
</div>
<div class="field half-right">
<p class="type-label">{{ $t('name') }}</p>
<v-input v-model="values.name" :disabled="values.show_header !== true" />
</div>
<div class="field half-left">
<p class="type-label">{{ $t('icon') }}</p>
<interface-select-icon v-model="values.icon" :disabled="values.show_header !== true" />
</div>
<div class="field half-right">
<p class="type-label">{{ $t('color') }}</p>
<interface-select-color v-model="values.color" :disabled="values.show_header !== true" width="half" />
</div>
</div>
</div>
</v-drawer>
</template>
@@ -11,6 +52,7 @@ import { computed, defineComponent, ref } from '@vue/composition-api';
import { useInsightsStore } from '@/stores';
import { getPanels } from '@/panels';
import { FancySelectItem } from '@/components/v-fancy-select/types';
import { Panel } from '@/types';
export default defineComponent({
name: 'PanelConfiguration',
@@ -35,9 +77,9 @@ export default defineComponent({
.panels.find((panel) => panel.id === props.primaryKey)
);
const edits = ref({});
const edits = ref<Partial<Panel>>({});
const values = computed(() => {
const values = computed<Partial<Panel>>(() => {
if (existing.value) return { ...existing.value, ...edits.value };
return edits.value;
});
@@ -55,7 +97,11 @@ export default defineComponent({
});
});
return { existing, values, selectItems };
const selectedPanel = computed(() => {
return panels.value.find((panel) => panel.id === values.value.type);
});
return { existing, values, selectItems, selectedPanel };
},
});
</script>
@@ -66,6 +112,14 @@ export default defineComponent({
padding-top: 0;
padding-bottom: var(--content-padding);
}
.panel-type-label {
margin-bottom: 16px;
}
.v-divider {
margin: 48px 0;
}
</style>
<!--

3
app/src/modules/settings/routes/data-model/fields/components/field-select.vue
View File

@@ -389,7 +389,6 @@ export default defineComponent({
<style lang="scss" scoped>
@import '@/styles/mixins/breakpoint';
@import '@/styles/mixins/form-grid';
.full,
.fill {
@@ -535,8 +534,6 @@ export default defineComponent({
.form-grid {
--form-vertical-gap: 24px;
@include form-grid;
}
.delete {

4
app/src/modules/settings/routes/roles/add-new.vue
View File

@@ -84,14 +84,10 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '@/styles/mixins/form-grid';
.form-grid {
--form-horizontal-gap: 12px;
--form-vertical-gap: 24px;
@include form-grid;
.type-label {
font-size: 1rem;
}

6
app/src/styles/_base.scss
View File

@@ -1,3 +1,5 @@
@import './mixins/form-grid.scss';
* {
box-sizing: border-box;
margin: 0;
@@ -136,3 +138,7 @@ dd {
dd a {
color: var(--primary);
}
.form-grid {
@include form-grid;
}