From 44091e6f41df20d9fa81607ea8c778fc969f57da Mon Sep 17 00:00:00 2001 From: Nitwel Date: Fri, 9 Apr 2021 23:24:40 +0200 Subject: [PATCH] Add option to auto refresh collections (#4777) * add auto refresh * add refresh_interval to DB * remove refresh_interval template * set refresh interval default to null * Fix typo in filename * Rename sidebar-auto-refresh to refresh-sidebar-detail * Rename import * Add badge on active refresh, change options * Fix refresh not working on refresh Co-authored-by: rijkvanzanten --- .../20210331A-add-refresh-interval.ts | 13 +++ app/src/components/v-badge/v-badge.vue | 19 +++- app/src/composables/use-preset/use-preset.ts | 16 ++++ app/src/lang/translations/en-US.yaml | 5 + .../modules/collections/routes/collection.vue | 6 +- app/src/stores/presets.ts | 1 + app/src/types/presets.ts | 1 + .../refresh-sidebar-detail/index.ts | 4 + .../refresh-sidebar-detail.vue | 95 +++++++++++++++++++ .../sidebar-detail/sidebar-detail.vue | 4 +- 10 files changed, 156 insertions(+), 8 deletions(-) create mode 100644 api/src/database/migrations/20210331A-add-refresh-interval.ts create mode 100644 app/src/views/private/components/refresh-sidebar-detail/index.ts create mode 100644 app/src/views/private/components/refresh-sidebar-detail/refresh-sidebar-detail.vue diff --git a/api/src/database/migrations/20210331A-add-refresh-interval.ts b/api/src/database/migrations/20210331A-add-refresh-interval.ts new file mode 100644 index 0000000000..b7d99e739e --- /dev/null +++ b/api/src/database/migrations/20210331A-add-refresh-interval.ts @@ -0,0 +1,13 @@ +import { Knex } from 'knex'; + +export async function up(knex: Knex) { + await knex.schema.alterTable('directus_presets', (table) => { + table.integer('refresh_interval'); + }); +} + +export async function down(knex: Knex) { + await knex.schema.alterTable('directus_presets', (table) => { + table.dropColumn('refresh_interval'); + }); +} diff --git a/app/src/components/v-badge/v-badge.vue b/app/src/components/v-badge/v-badge.vue index a4920914e5..61159edfb4 100644 --- a/app/src/components/v-badge/v-badge.vue +++ b/app/src/components/v-badge/v-badge.vue @@ -15,7 +15,7 @@ import { defineComponent } from '@vue/composition-api'; export default defineComponent({ props: { value: { - type: [String, Number], + type: [Boolean, String, Number], default: null, }, dot: { @@ -102,12 +102,21 @@ body { bottom: calc(var(--v-badge-size) / -2 + var(--v-badge-offset-y)); } - &.dot * { - display: none; + &.bordered { + filter: drop-shadow(1.5px 1.5px 0 var(--v-badge-border-color)) + drop-shadow(1.5px -1.5px 0 var(--v-badge-border-color)) drop-shadow(-1.5px 1.5px 0 var(--v-badge-border-color)) + drop-shadow(-1.5px -1.5px 0 var(--v-badge-border-color)); } - &.bordered { - border: 2px solid var(--v-badge-border-color); + &.dot { + width: var(--v-badge-size); + min-width: 0; + height: var(--v-badge-size); + border: 0; + + * { + display: none; + } } } } diff --git a/app/src/composables/use-preset/use-preset.ts b/app/src/composables/use-preset/use-preset.ts index 4e66a899a7..24ca816dd4 100644 --- a/app/src/composables/use-preset/use-preset.ts +++ b/app/src/composables/use-preset/use-preset.ts @@ -131,6 +131,20 @@ export function usePreset(collection: Ref, bookmark: Ref }, }); + const refreshInterval = computed({ + get() { + return localPreset.value.refresh_interval || null; + }, + set(val) { + localPreset.value = { + ...localPreset.value, + refresh_interval: val, + }; + + handleChanges(); + }, + }); + const searchQuery = computed({ get() { return localPreset.value.search || null; @@ -167,6 +181,7 @@ export function usePreset(collection: Ref, bookmark: Ref layoutQuery, filters, searchQuery, + refreshInterval, savePreset, saveCurrentAsBookmark, bookmarkTitle, @@ -195,6 +210,7 @@ export function usePreset(collection: Ref, bookmark: Ref layout: 'tabular', filters: null, search: null, + refresh_interval: null, }; await savePreset(); diff --git a/app/src/lang/translations/en-US.yaml b/app/src/lang/translations/en-US.yaml index 12f9988f42..1b5a7f2b80 100644 --- a/app/src/lang/translations/en-US.yaml +++ b/app/src/lang/translations/en-US.yaml @@ -149,6 +149,11 @@ uuid: UUID hash: Hash not_available_for_type: Not Available for this Type create_translations: Create Translations +auto_refresh: Auto Refresh +refresh_interval: Refresh Interval +no_refresh: Do not refresh +refresh_interval_seconds: Refresh Instantly | Every Second | Every {seconds} Seconds +refresh_interval_minutes: Every Minute | Every {minutes} Minutes auto_generate: Auto-Generate this_will_auto_setup_fields_relations: This will automatically setup all required fields and relations. click_here: Click here diff --git a/app/src/modules/collections/routes/collection.vue b/app/src/modules/collections/routes/collection.vue index 59b7850873..9ef6e487c1 100644 --- a/app/src/modules/collections/routes/collection.vue +++ b/app/src/modules/collections/routes/collection.vue @@ -222,6 +222,7 @@ + @@ -249,6 +250,7 @@ import useCollection from '@/composables/use-collection'; import usePreset from '@/composables/use-preset'; import LayoutSidebarDetail from '@/views/private/components/layout-sidebar-detail'; import ExportSidebarDetail from '@/views/private/components/export-sidebar-detail'; +import RefreshSidebarDetail from '@/views/private/components/refresh-sidebar-detail'; import SearchInput from '@/views/private/components/search-input'; import BookmarkAdd from '@/views/private/components/bookmark-add'; import BookmarkEdit from '@/views/private/components/bookmark-edit'; @@ -274,6 +276,7 @@ export default defineComponent({ BookmarkAdd, BookmarkEdit, DrawerBatch, + RefreshSidebarDetail, }, props: { collection: { @@ -311,6 +314,7 @@ export default defineComponent({ resetPreset, bookmarkSaved, bookmarkIsMine, + refreshInterval, busy: bookmarkSaving, clearLocalSave, } = usePreset(collection, bookmarkID); @@ -344,7 +348,6 @@ export default defineComponent({ addNewLink, batchDelete, batchEditActive, - confirmDelete, currentCollection, deleting, @@ -381,6 +384,7 @@ export default defineComponent({ bookmarkSaving, clearLocalSave, refresh, + refreshInterval, }; function refresh() { diff --git a/app/src/stores/presets.ts b/app/src/stores/presets.ts index 7265071c0c..2fbf2d4e9b 100644 --- a/app/src/stores/presets.ts +++ b/app/src/stores/presets.ts @@ -14,6 +14,7 @@ const defaultPreset: Omit = { layout: null, layout_query: null, layout_options: null, + refresh_interval: null, }; const systemDefaults: Record> = { diff --git a/app/src/types/presets.ts b/app/src/types/presets.ts index ea99eb1066..6afdbd6605 100644 --- a/app/src/types/presets.ts +++ b/app/src/types/presets.ts @@ -35,4 +35,5 @@ export type Preset = { layout: string | null; layout_query: { [layout: string]: any } | null; layout_options: { [layout: string]: any } | null; + refresh_interval: number | null; }; diff --git a/app/src/views/private/components/refresh-sidebar-detail/index.ts b/app/src/views/private/components/refresh-sidebar-detail/index.ts new file mode 100644 index 0000000000..824e713631 --- /dev/null +++ b/app/src/views/private/components/refresh-sidebar-detail/index.ts @@ -0,0 +1,4 @@ +import RefreshSidebarDetail from './refresh-sidebar-detail.vue'; + +export { RefreshSidebarDetail }; +export default RefreshSidebarDetail; diff --git a/app/src/views/private/components/refresh-sidebar-detail/refresh-sidebar-detail.vue b/app/src/views/private/components/refresh-sidebar-detail/refresh-sidebar-detail.vue new file mode 100644 index 0000000000..22657c31a8 --- /dev/null +++ b/app/src/views/private/components/refresh-sidebar-detail/refresh-sidebar-detail.vue @@ -0,0 +1,95 @@ + + + + + diff --git a/app/src/views/private/components/sidebar-detail/sidebar-detail.vue b/app/src/views/private/components/sidebar-detail/sidebar-detail.vue index b7302f0d40..1ec8df41e7 100644 --- a/app/src/views/private/components/sidebar-detail/sidebar-detail.vue +++ b/app/src/views/private/components/sidebar-detail/sidebar-detail.vue @@ -2,7 +2,7 @@