From 7f82a261bc0482afa6e0417b8240addea416d387 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=E1=BB=93ng=20Ph=C3=A1t?= Date: Sat, 4 Dec 2021 21:55:28 +0700 Subject: [PATCH 1/6] title and description mutation --- config/schema.py | 67 +++++++++-- ui/dashboard/src/router/index.js | 5 + ui/dashboard/src/services/graphql/config.js | 14 ++- ui/dashboard/src/store/modules/config.js | 6 +- ui/dashboard/src/views/Home.vue | 13 +-- .../backstage/Admin/FoyerCustomisation.vue | 110 ++++++++++++++++++ .../src/views/backstage/Admin/index.vue | 18 +-- 7 files changed, 207 insertions(+), 26 deletions(-) create mode 100644 ui/dashboard/src/views/backstage/Admin/FoyerCustomisation.vue diff --git a/config/schema.py b/config/schema.py index 7802f97a..33365911 100644 --- a/config/schema.py +++ b/config/schema.py @@ -1,6 +1,6 @@ # -*- coding: iso8859-15 -*- from os import name -from config.project_globals import ScopedSession, app +from config.project_globals import DBSession, ScopedSession, app from flask_graphql import GraphQLView from config.settings import NGINX_CONFIG_FILE, VERSION from graphene import relay @@ -28,22 +28,40 @@ def resolve_uploadLimit(self, info): return limit +def get_config(name): + config = DBSession.query(ConfigModel).filter( + ConfigModel.name == name).first() + if config: + return config.value + + class SystemConfig(graphene.ObjectType): termsOfService = graphene.String() def resolve_termsOfService(self, info): - with ScopedSession() as local_db_session: - config = local_db_session.query(ConfigModel).filter( - ConfigModel.name == TERMS_OF_SERVICE - ).first() - if config: - return config.value + return get_config(TERMS_OF_SERVICE) + + +class FoyerConfig(graphene.ObjectType): + title = graphene.String() + description = graphene.String() + menu = graphene.String() + + def resolve_title(self, info): + return get_config('FOYER_TITLE') + + def resolve_description(self, info): + return get_config('FOYER_DESCRIPTION') + + def resolve_menu(self, info): + return get_config('FOYER_MENU') class Query(graphene.ObjectType): node = relay.Node.Field() nginx = graphene.Field(NginxConfig) system = graphene.Field(SystemConfig) + foyer = graphene.Field(FoyerConfig) def resolve_nginx(self, info): return NginxConfig() @@ -51,6 +69,9 @@ def resolve_nginx(self, info): def resolve_system(self, info): return SystemConfig() + def resolve_foyer(self, info): + return FoyerConfig() + class UpdateTermsOfService(graphene.Mutation): """Mutation to update Terms of Service's URL.""" @@ -76,8 +97,40 @@ def mutate(self, info, url): return UpdateTermsOfService(url=url) +class SaveConfig(graphene.Mutation): + """Mutation to customise foyer.""" + success = graphene.Boolean(description="True if the config was saved.") + + class Arguments: + name = graphene.String( + required=True, description="The name of the config.") + value = graphene.String( + required=True, description="The value of the config.") + + # decorate this with jwt login decorator. + def mutate(self, info, name, value): + with ScopedSession() as local_db_session: + config = local_db_session.query(ConfigModel).filter( + ConfigModel.name == name).first() + + if name == TERMS_OF_SERVICE: + # Use UpdateTermsOfService mutation instead. + return SaveConfig(success=False) + + if config: + config.value = value + else: + config = ConfigModel(name=name, value=value) + local_db_session.add(config) + + local_db_session.commit() + local_db_session.close() + return SaveConfig(success=True) + + class Mutation(graphene.ObjectType): updateTermsOfService = UpdateTermsOfService.Field() + saveConfig = SaveConfig.Field() # ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ diff --git a/ui/dashboard/src/router/index.js b/ui/dashboard/src/router/index.js index 423248e3..7e2dd13c 100644 --- a/ui/dashboard/src/router/index.js +++ b/ui/dashboard/src/router/index.js @@ -95,6 +95,11 @@ const routes = [ name: 'System Configurations', component: () => import('../views/backstage/Admin/SystemConfigurations.vue'), }, + { + path: 'foyer-customisation', + name: 'Foyer Customisation', + component: () => import('../views/backstage/Admin/FoyerCustomisation.vue'), + } ] }, { diff --git a/ui/dashboard/src/services/graphql/config.js b/ui/dashboard/src/services/graphql/config.js index 9650a429..87130e6a 100644 --- a/ui/dashboard/src/services/graphql/config.js +++ b/ui/dashboard/src/services/graphql/config.js @@ -12,6 +12,11 @@ export default { system { termsOfService } + foyer { + title + description + menu + } } `), updateTermsOfService: (variables) => client.request(gql` @@ -20,5 +25,12 @@ export default { url } } - `, variables) + `, variables), + saveConfig: (name, value) => client.request(gql` + mutation SaveConfig($name: String!, $value: String!) { + saveConfig(name: $name, value: $value) { + success + } + } + `, { name, value }), } diff --git a/ui/dashboard/src/store/modules/config.js b/ui/dashboard/src/store/modules/config.js index e31bdee4..55145605 100644 --- a/ui/dashboard/src/store/modules/config.js +++ b/ui/dashboard/src/store/modules/config.js @@ -4,7 +4,8 @@ export default { namespaced: true, state: { nginx: {}, - system: {} + system: {}, + foyer: {} }, getters: { uploadLimit(state) { @@ -12,6 +13,9 @@ export default { }, termsOfService(state) { return state.system.termsOfService + }, + foyer(state) { + return state.foyer } }, mutations: { diff --git a/ui/dashboard/src/views/Home.vue b/ui/dashboard/src/views/Home.vue index 728b3661..2187565e 100644 --- a/ui/dashboard/src/views/Home.vue +++ b/ui/dashboard/src/views/Home.vue @@ -2,14 +2,8 @@
-

CYBERFORMANCE PLATFORM

-

- UpStage is an online venue for live performance: remote performers - collaborate in real time using digital media, and online audiences - anywhere in the world join events by going to a web page, without - having to download and install any additional software. UpStage is - available free to anyone who would like to use it. -

+

{{ foyer.title }}

+

{{ foyer.description }}

@@ -53,6 +47,7 @@ export default { const loading = computed(() => store.getters["cache/loadingStages"]); const liveStages = computed(() => store.getters["cache/liveStages"]); + const foyer = computed(() => store.getters["config/foyer"]); const upcomingStages = computed( () => store.getters["cache/upcomingStages"] ); @@ -67,6 +62,7 @@ export default { loading, upcomingStages, absolutePath, + foyer, }; }, }; @@ -89,6 +85,7 @@ export default { max-width: 800px; margin: auto; box-shadow: 10px 10px 0 0 $primary; + white-space: pre-wrap; } .column { padding: 2rem; diff --git a/ui/dashboard/src/views/backstage/Admin/FoyerCustomisation.vue b/ui/dashboard/src/views/backstage/Admin/FoyerCustomisation.vue new file mode 100644 index 00000000..16275e25 --- /dev/null +++ b/ui/dashboard/src/views/backstage/Admin/FoyerCustomisation.vue @@ -0,0 +1,110 @@ + + + + + diff --git a/ui/dashboard/src/views/backstage/Admin/index.vue b/ui/dashboard/src/views/backstage/Admin/index.vue index 24b2a001..7715903b 100644 --- a/ui/dashboard/src/views/backstage/Admin/index.vue +++ b/ui/dashboard/src/views/backstage/Admin/index.vue @@ -14,17 +14,13 @@ - Player Management - + >Player Management
  • - Batch User Creation - + >Batch User Creation

    • System

    @@ -33,9 +29,13 @@ - System Configurations - + >System Configurations + +
  • + Foyer Customisation
    • From 8a66fa53d5e37519121acb931dcd45503ce94dd2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=E1=BB=93ng=20Ph=C3=A1t?= Date: Sat, 4 Dec 2021 23:15:11 +0700 Subject: [PATCH 2/6] navigation customisations --- config/sqlfiles/create.sql | 12 +++ ui/dashboard/src/components/NavBar.vue | 96 +++++++------------ ui/dashboard/src/store/modules/config.js | 32 ++++++- .../backstage/Admin/FoyerCustomisation.vue | 26 ++++- 4 files changed, 98 insertions(+), 68 deletions(-) diff --git a/config/sqlfiles/create.sql b/config/sqlfiles/create.sql index add9830f..50415212 100644 --- a/config/sqlfiles/create.sql +++ b/config/sqlfiles/create.sql @@ -6,3 +6,15 @@ CREATE TABLE "public"."config" ( "created_on" timestamp DEFAULT (now() at time zone 'utc'), PRIMARY KEY ("id") ); + +-- Seed foyer config +INSERT INTO "config" ("name", "value") VALUES ('FOYER_TITLE', 'CYBERFORMANCE PLATFORM'); +INSERT INTO "config" ("name", "value") VALUES ('FOYER_DESCRIPTION', 'UpStage is an online venue for live performance: remote performers collaborate in real time using digital media, and online audiences anywhere in the world join events by going to a web page, without having to download and install any additional software. UpStage is available free to anyone who would like to use it.'); +INSERT INTO "config" ("name", "value") VALUES ('FOYER_MENU', 'About +> FAQ (https://upstage.org.nz/?page_id=115) +> Contact (https://upstage.org.nz/?page_id=5) +> Diversity & Inclusion (https://upstage.org.nz/?page_id=8361) +Festivals (https://upstage.org.nz/?page_id=1958) +Development (https://github.com/upstage-org/upstage/) +Donate (https://upstage.org.nz/?page_id=278) +Demo Stage (/demo)'); \ No newline at end of file diff --git a/ui/dashboard/src/components/NavBar.vue b/ui/dashboard/src/components/NavBar.vue index 50671b63..ede94624 100644 --- a/ui/dashboard/src/components/NavBar.vue +++ b/ui/dashboard/src/components/NavBar.vue @@ -17,63 +17,40 @@
    -
    - About -
    - FAQs - Contacts - Diversity + Inclusion -
    -
    -
    -
    -   Learn   -
    - Research +
    Cannot display navigation properly, please check your menu syntax in Admin section!
    +
    @@ -103,25 +80,22 @@ import { computed, ref } from "vue"; import { loggedIn, logout } from "@/utils/auth"; import Logo from "./Logo"; import { useStore } from "vuex"; -import Loading from "@/components/Loading"; export default { - components: { Logo, Loading }, + components: { Logo }, setup() { const store = useStore(); const expanded = ref(false); const toggleExpanded = () => (expanded.value = !expanded.value); - const loadingStages = computed(() => store.getters["cache/loadingStages"]); - const liveStages = computed(() => store.getters["cache/liveStages"]); + const navigations = computed(() => store.getters["config/navigations"]); return { expanded, toggleExpanded, loggedIn, logout, - loadingStages, - liveStages, + navigations }; }, }; diff --git a/ui/dashboard/src/store/modules/config.js b/ui/dashboard/src/store/modules/config.js index 55145605..c377b0cd 100644 --- a/ui/dashboard/src/store/modules/config.js +++ b/ui/dashboard/src/store/modules/config.js @@ -5,7 +5,7 @@ export default { state: { nginx: {}, system: {}, - foyer: {} + foyer: null }, getters: { uploadLimit(state) { @@ -15,7 +15,35 @@ export default { return state.system.termsOfService }, foyer(state) { - return state.foyer + return state.foyer ?? {} + }, + navigations(state) { + if (!state.foyer) { + return [] + } + try { + const lines = state.foyer.menu.split("\n").filter(line => line.trim().length > 0) + const navigations = [] + for (const line of lines) { + // Syntax: (<url>) + const url = line.match(/\(([^)]+)\)/) // get the url part + let title = line.replace('>', '') + title = title.includes("(") ? title.split("(")[0].trim() : title.trim() // get the title part + const menu = { title, url: url ? url[1] : null } + if (line.trim().startsWith(">")) { + const parent = navigations[navigations.length - 1] + if (!parent.children) { + parent.children = [] + } + parent.children.push(menu) + } else { + navigations.push(menu) + } + } + return navigations + } catch (error) { + console.log(error) + } } }, mutations: { diff --git a/ui/dashboard/src/views/backstage/Admin/FoyerCustomisation.vue b/ui/dashboard/src/views/backstage/Admin/FoyerCustomisation.vue index 16275e25..365e9e35 100644 --- a/ui/dashboard/src/views/backstage/Admin/FoyerCustomisation.vue +++ b/ui/dashboard/src/views/backstage/Admin/FoyerCustomisation.vue @@ -43,7 +43,7 @@ </div> </template> <template v-else> - <div class="column" style="white-space: pre-wrap;">{{ description }}</div> + <div class="column pre-wrap">{{ description }}</div> <div class="column is-narrow"> <button class="button is-primary" @click="edit = 'description'">Edit</button> </div> @@ -51,11 +51,24 @@ </div> <div class="columns is-vcentered"> <div class="column is-2"> - <b>Menu</b> + <span + class="has-tooltip-right" + data-tooltip="Syntax: <title> (<url>) +For example: Development (https://github.com/upstage-org/upstage/) +Put the navigation links line by line. Put > before the line to make it nested inside parent menu. +For example: +About +> FAQ (https://upstage.org.nz/?page_id=115) +> Contact (/contact) +" + > + <b>Menu</b> + <i class="fas fa-info-circle ml-1"></i> + </span> </div> <template v-if="edit == 'menu'"> <div class="column"> - <Field v-model="menu" /> + <textarea class="textarea" rows="8" v-model="menu" /> </div> <div class="column is-narrow"> <button @@ -66,7 +79,7 @@ </div> </template> <template v-else> - <div class="column">{{ menu }}</div> + <div class="column pre-wrap">{{ menu }}</div> <div class="column is-narrow"> <button class="button is-primary" @click="edit = 'menu'">Edit</button> </div> @@ -106,5 +119,8 @@ export default { }; </script> -<style> +<style scoped> +.pre-wrap { + white-space: pre-wrap; +} </style> From 04414eceb0871e028bbbfd117e7155ad6927babe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=E1=BB=93ng=20Ph=C3=A1t?= <hongphat.js@gmail.com> Date: Sat, 4 Dec 2021 23:26:12 +0700 Subject: [PATCH 3/6] text area description --- .../src/views/backstage/Admin/FoyerCustomisation.vue | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/ui/dashboard/src/views/backstage/Admin/FoyerCustomisation.vue b/ui/dashboard/src/views/backstage/Admin/FoyerCustomisation.vue index 365e9e35..ad363604 100644 --- a/ui/dashboard/src/views/backstage/Admin/FoyerCustomisation.vue +++ b/ui/dashboard/src/views/backstage/Admin/FoyerCustomisation.vue @@ -32,7 +32,7 @@ </div> <template v-if="edit == 'description'"> <div class="column"> - <ElasticInput v-model="description" /> + <textarea class="textarea" rows="4" v-model="description" /> </div> <div class="column is-narrow"> <button @@ -93,9 +93,8 @@ import { useStore } from "vuex"; import { ref, watchEffect } from "@vue/runtime-core"; import { useMutation } from "@/services/graphql/composable"; import { configGraph } from "@/services/graphql"; -import ElasticInput from "@/components/form/ElasticInput.vue"; export default { - components: { Field, ElasticInput }, + components: { Field }, setup: () => { const store = useStore(); From 48d30237952b0bb884f1b5957a6c6124b5824775 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=E1=BB=93ng=20Ph=C3=A1t?= <hongphat.js@gmail.com> Date: Sat, 4 Dec 2021 23:53:53 +0700 Subject: [PATCH 4/6] no text-transform and support html --- config/sqlfiles/create.sql | 10 ++-------- ui/dashboard/src/styles/custom.scss | 1 - ui/dashboard/src/styles/mixins.scss | 1 - ui/dashboard/src/views/Home.vue | 4 ++-- 4 files changed, 4 insertions(+), 12 deletions(-) diff --git a/config/sqlfiles/create.sql b/config/sqlfiles/create.sql index 50415212..47143b94 100644 --- a/config/sqlfiles/create.sql +++ b/config/sqlfiles/create.sql @@ -10,11 +10,5 @@ CREATE TABLE "public"."config" ( -- Seed foyer config INSERT INTO "config" ("name", "value") VALUES ('FOYER_TITLE', 'CYBERFORMANCE PLATFORM'); INSERT INTO "config" ("name", "value") VALUES ('FOYER_DESCRIPTION', 'UpStage is an online venue for live performance: remote performers collaborate in real time using digital media, and online audiences anywhere in the world join events by going to a web page, without having to download and install any additional software. UpStage is available free to anyone who would like to use it.'); -INSERT INTO "config" ("name", "value") VALUES ('FOYER_MENU', 'About -> FAQ (https://upstage.org.nz/?page_id=115) -> Contact (https://upstage.org.nz/?page_id=5) -> Diversity & Inclusion (https://upstage.org.nz/?page_id=8361) -Festivals (https://upstage.org.nz/?page_id=1958) -Development (https://github.com/upstage-org/upstage/) -Donate (https://upstage.org.nz/?page_id=278) -Demo Stage (/demo)'); \ No newline at end of file +INSERT INTO "config" ("name", "value") VALUES ('FOYER_MENU', 'UpStage User Manual (https://docs.upstage.live/) +Customise Foyer (https://dev-app1.upstage.org.nz/backstage/admin/foyer-customisation)'); \ No newline at end of file diff --git a/ui/dashboard/src/styles/custom.scss b/ui/dashboard/src/styles/custom.scss index b7426c1d..194c1c93 100644 --- a/ui/dashboard/src/styles/custom.scss +++ b/ui/dashboard/src/styles/custom.scss @@ -126,7 +126,6 @@ div.moveable-control-box { margin: 8px 12px; padding: 0 20px !important; justify-content: center; - text-transform: uppercase; border: 1px solid transparent; } .vertical-divider { diff --git a/ui/dashboard/src/styles/mixins.scss b/ui/dashboard/src/styles/mixins.scss index ec0d5b12..c7ed1ae4 100644 --- a/ui/dashboard/src/styles/mixins.scss +++ b/ui/dashboard/src/styles/mixins.scss @@ -17,7 +17,6 @@ @mixin textShadow() { color: $black; text-shadow: -3px 0 $primary; - text-transform: uppercase; } @mixin differentiatedToolbar($color) { background-color: $color; diff --git a/ui/dashboard/src/views/Home.vue b/ui/dashboard/src/views/Home.vue index 2187565e..c58f7a60 100644 --- a/ui/dashboard/src/views/Home.vue +++ b/ui/dashboard/src/views/Home.vue @@ -2,8 +2,8 @@ <section id="welcome" class="hero is-fullheight foyer-background"> <div class="hero-body"> <div class="container"> - <h1 class="title">{{ foyer.title }}</h1> - <h2 v-if="foyer.description" class="subtitle">{{ foyer.description }}</h2> + <h1 class="title" v-html="foyer.title" /> + <h2 v-if="foyer.description" class="subtitle" v-html="foyer.description" /> <Loading v-if="loading" /> <div v-else class="links columns is-multiline my-4 pt-6"> <div v-for="stage in liveStages" :key="stage.id" class="column is-4"> From 7d3f2d369995a9e1b90230405d1d0a5fc556fd00 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=E1=BB=93ng=20Ph=C3=A1t?= <hongphat.js@gmail.com> Date: Sun, 5 Dec 2021 00:18:26 +0700 Subject: [PATCH 5/6] relative customise foyer link --- config/sqlfiles/create.sql | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/sqlfiles/create.sql b/config/sqlfiles/create.sql index 47143b94..962698c8 100644 --- a/config/sqlfiles/create.sql +++ b/config/sqlfiles/create.sql @@ -11,4 +11,4 @@ CREATE TABLE "public"."config" ( INSERT INTO "config" ("name", "value") VALUES ('FOYER_TITLE', 'CYBERFORMANCE PLATFORM'); INSERT INTO "config" ("name", "value") VALUES ('FOYER_DESCRIPTION', 'UpStage is an online venue for live performance: remote performers collaborate in real time using digital media, and online audiences anywhere in the world join events by going to a web page, without having to download and install any additional software. UpStage is available free to anyone who would like to use it.'); INSERT INTO "config" ("name", "value") VALUES ('FOYER_MENU', 'UpStage User Manual (https://docs.upstage.live/) -Customise Foyer (https://dev-app1.upstage.org.nz/backstage/admin/foyer-customisation)'); \ No newline at end of file +Customise Foyer (/backstage/admin/foyer-customisation)'); \ No newline at end of file From 5d4cba1296b99861787f94d8b3971f75b48bac9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=E1=BB=93ng=20Ph=C3=A1t?= <hongphat.js@gmail.com> Date: Mon, 6 Dec 2021 23:56:39 +0700 Subject: [PATCH 6/6] remove unnecessary commit and close --- config/schema.py | 2 -- studio/media.py | 4 ---- 2 files changed, 6 deletions(-) diff --git a/config/schema.py b/config/schema.py index 33365911..b9bfe46c 100644 --- a/config/schema.py +++ b/config/schema.py @@ -123,8 +123,6 @@ def mutate(self, info, name, value): config = ConfigModel(name=name, value=value) local_db_session.add(config) - local_db_session.commit() - local_db_session.close() return SaveConfig(success=True) diff --git a/studio/media.py b/studio/media.py index 09e84997..26a7c16a 100644 --- a/studio/media.py +++ b/studio/media.py @@ -208,8 +208,6 @@ def mutate(self, info): local_db_session.flush() total += media.size - local_db_session.commit() - local_db_session.close() return CalcSizes(size=total) @@ -398,8 +396,6 @@ def mutate(self, info, id, approved): else: local_db_session.delete(asset_usage) local_db_session.flush() - local_db_session.commit() - local_db_session.close() permissions = DBSession.query(AssetUsageModel).filter( AssetUsageModel.asset_id == asset_id).all() return ConfirmPermission(success=True, permissions=permissions)