edit name functionality

Hubs-Foundation · Aug 1, 2023 · 3b561dc · 3b561dc
1 parent 839b3a8
commit 3b561dc
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 14 deletions.
diff --git a/admin/src/react-components/ThemeBuilder/ThemeBuilder.tsx b/admin/src/react-components/ThemeBuilder/ThemeBuilder.tsx
@@ -2,12 +2,13 @@ import React, {useEffect, useMemo, useState} from 'react';
 // import theme from "../../utils/sample-theme";
 import {Button, Input, Select} from '@mozilla/lilypad-ui'
 
-const ThemeBuilder = ({config, onGlobalChange, onSave, path}) => {
+const ThemeBuilder = ({config, onGlobalChange, onSave, path, setState, disableSave}) => {
     const [themes, setThemes] =useState(JSON.parse(config?.hubs?.theme?.themes))
     const [selectedTheme, setSelectedTheme] = useState(themes.find(theme => !!theme?.default))
-    const formattedThemes = useMemo(() => themes.map(theme => ({title: theme.name, value: theme.id})), [themes]);
+    const formattedThemes = useMemo(() => themes.map(theme => ({title: theme.name, value: theme.id})), [themes, config]);
 
     const onThemeSelect = e => {
+        e.preventDefault()
         setSelectedTheme(themes.find(theme => theme.id === e.target.value))
     }
 
@@ -20,18 +21,44 @@ const ThemeBuilder = ({config, onGlobalChange, onSave, path}) => {
         e.preventDefault()
         e.persist()
         setSelectedTheme(prevState => ({...prevState, variables: {...prevState.variables, [key]: e.target.value}}))
-        console.log([...themes.filter(theme => theme.id !== selectedTheme.id), {...selectedTheme, variables: {...selectedTheme.variables, [key]: e.target.value}}])
         onGlobalChange(path, JSON.stringify([...themes.filter(theme => theme.id !== selectedTheme.id), {...selectedTheme, variables: {...selectedTheme.variables, [key]: e.target.value}}]))
     }
-
+
+    const onNameChange = (e )=> {
+        e.preventDefault()
+        e.persist()
+        setSelectedTheme(prevState => ({...prevState, name: e.target.value}))
+        onGlobalChange(path, JSON.stringify([...themes.filter(theme => theme.id !== selectedTheme.id), {...selectedTheme, name: e.target.value}]))
+        console.log(themes, e.target.value)
+        if(themes.find(theme => theme.name === e.target.value)){
+            const warningMessage = "Theme already exists with this name. Please use a different name."
+            setState({warningMessage})
+        } else {
+            setState({warningMessage: null})
+        }
+    }
+
+    // edit name and validate no duplicates
+    // add new theme
+    // generate id from theme name?
+    // copy json
+    // import theme from json - validate and populate missing variables
+    // import theme from web url?? - validate and populate missing variables
+    // select from github themes
+    // duplicate theme
+    // delete theme
+    // populate with defaults
+    // calculate darkness or lightness from states
+
     return (
         <div>
             <Select label="Themes" options={formattedThemes} name="Themes" value={selectedTheme.id} onChange={onThemeSelect}/>
             <form onSubmit={onSubmit} >
+                <Input label="Name" name="Name" value={selectedTheme.name} onChange={onNameChange} placeholder="Name your theme" />
                 {Object.entries(selectedTheme.variables).map(([key, value]) => {
-                    return <Input label={key} name={key} value={value} onChange={e => onVariableChange(e, key)}/>
+                    return <Input key={key} label={key} name={key} value={value} onChange={e => onVariableChange(e, key)}/>
                 })}
-                <Button type="submit" text="Submit" label="Submit" />
+                <Button type="submit" text="Submit" label="Submit" disabled={disableSave}/>
             </form>
         </div>
     )

diff --git a/admin/src/react-components/service-editor.js b/admin/src/react-components/service-editor.js
@@ -433,8 +433,8 @@ class ConfigurationEditor extends Component {
 
 
     return (<>
-    <ThemeBuilder config={config} onGlobalChange={this.onChange.bind(this)} onSave={this.onSubmit.bind(this)} path={configurables[2][0]}/>
-      <form onSubmit={this.onSubmit.bind(this)}>
+    <ThemeBuilder config={config} onGlobalChange={this.onChange.bind(this)} onSave={this.onSubmit.bind(this)} path={configurables[2][0]} setState={this.setState.bind(this)} disableSave={!!this.state.warningMessage}/>
+      {/* <form onSubmit={this.onSubmit.bind(this)}>
         <h3 className="heading-sm mb-24">Nametags</h3>
         {getInput(configurables[0])}
         {getInput(configurables[1])}
@@ -469,7 +469,7 @@ class ConfigurationEditor extends Component {
             </Button>
           )}
         </div>
-      </form>
+      </form> */}
       </>
     );
   }

diff --git a/admin/src/utils/sample-theme.js b/admin/src/utils/sample-theme.js
@@ -40,7 +40,6 @@ const theme = [
       "accent5-border-color": "#13a4ed",
       "accent5-color-hover": "#5D646C",
       "accent5-color-pressed": "#21242C",
-      "admin-color": "#13a4ed",
       "text1-color": "#ffffff",
       "text1-color-hover": "#E7E7E7",
       "text1-color-pressed": "#DBDBDB",
@@ -66,8 +65,6 @@ const theme = [
       "accept-color": "#2B313B",
       "accept-color-hover": "#5D646C",
       "accept-border-color": "#7ED320",
-      "background-hover-color": "#aaaaaa",
-      "status-enabled-color": "#7ED320",
       "input-bg-color": "#21242C",
       "tip-text-color": "#ffffff",
       "tip-bg-color": "#017ab8",

diff --git a/themes.json b/themes.json
@@ -64,8 +64,6 @@
       "accept-color": "#2B313B",
       "accept-color-hover": "#5D646C",
       "accept-border-color": "#7ED320",
-      "background-hover-color": "#aaaaaa",
-      "status-enabled-color": "#7ED320",
       "input-bg-color": "#21242C",
       "tip-text-color": "#ffffff",
       "tip-bg-color": "#017ab8",