init symbology form with custom field values if existing

public/config/config.json

 {
     "BASE_URL":"/geocontrib/",
-    "DOMAIN":"http://localhost:8010/",
+    "DOMAIN":"http://localhost/",
     "NODE_ENV":"development",
     "VUE_APP_LOCALE":"fr-FR",
     "VUE_APP_APPLICATION_NAME":"GéoContrib",
     "VUE_APP_APPLICATION_FAVICO":"/geocontrib/img/geo2f.ico",
     "VUE_APP_APPLICATION_ABSTRACT":"Application de saisie d'informations géographiques contributive",
     "VUE_APP_LOGO_PATH":"/geocontrib/img/logo-neogeo-circle.png",
-    "VUE_APP_DJANGO_BASE":"http://localhost:8010",
-    "VUE_APP_DJANGO_API_BASE":"http://localhost:8010/api/",
+    "VUE_APP_DJANGO_BASE":"http://localhost",
+    "VUE_APP_DJANGO_API_BASE":"http://localhost/api/",
     "VUE_APP_RELOAD_INTERVAL": 15000,
     "VUE_APP_DISABLE_LOGIN_BUTTON":false,
     "VUE_APP_LOGIN_URL":"",

src/views/feature_type/Feature_type_symbology.vue

@@ -191,13 +191,17 @@ export default {
     }
     this.SET_CURRENT_FEATURE_TYPE_SLUG(this.$route.params.slug_type_signal);
     if (this.feature_type) {
-      // Init form
-      this.form.color = JSON.parse(JSON.stringify(this.feature_type.color));
-      this.form.icon = JSON.parse(JSON.stringify(this.feature_type.icon));
-      this.form.colors_style = {
-        ...this.form.colors_style,
-        ...JSON.parse(JSON.stringify(this.feature_type.colors_style))
-      };
+      this.initForm();
+    } else {
+      this.loading = true;
+      this.GET_PROJECT_FEATURE_TYPES(this.$route.params.slug)
+        .then(() => {
+          this.initForm();
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
     }
   },
 
@@ -213,6 +217,19 @@ export default {
       'GET_PROJECT_INFO'
     ]),
 
+    initForm() {
+      this.form.color = JSON.parse(JSON.stringify(this.feature_type.color));
+      this.form.icon = JSON.parse(JSON.stringify(this.feature_type.icon));
+      this.form.colors_style = {
+        ...this.form.colors_style,
+        ...JSON.parse(JSON.stringify(this.feature_type.colors_style))
+      };
+      if (this.feature_type.colors_style && Object.keys(this.feature_type.colors_style.colors).length > 0) {
+        this.selectedCustomfield =
+          this.feature_type.customfield_set.find(el => el.name === this.feature_type.colors_style.custom_field_name).name;
+      }
+    },
+
     setDefaultStyle(e) {
       const value  = e.value;
       this.form.color = value.color.value;
@@ -235,7 +252,7 @@ export default {
             .then(() => {
               this.loading = false;
               this.success =
-                'La modification de la symbologie a été prise en compte. Vous allez être redirigé vers la page d\'acceuil du projet.';
+                'La modification de la symbologie a été prise en compte. Vous allez être redirigé vers la page d\'accueil du projet.';
               setTimeout(() => {
                 this.$router.push({
                   name: 'project_detail',