start handling templates and modes

vuejs/client/src/components/Form/Templates.vue

@@ -1,10 +1,8 @@
 <script setup>
-import { reactive, defineProps, onMounted, ref } from "vue";
+import { reactive, defineProps, computed, onBeforeMount } from "vue";
 import Container from "@components/Widget/Container.vue";
-import Fields from "@components/Form/Fields.vue";
-import Title from "@components/Widget/Title.vue";
-import Subtitle from "@components/Widget/Subtitle.vue";
 import Combobox from "@components/Forms/Field/Combobox.vue";
+import Advanced from "@components/Form/Advanced.vue";
 import { v4 as uuidv4 } from "uuid";
 
 /**
@@ -65,41 +63,73 @@ const comboboxTemplate = {
   columns: { pc: 4, tablet: 6, mobile: 12 },
 };
 
+const comboboxModes = {
+  id: uuidv4(),
+  name: uuidv4(),
+  disabled: false,
+  required: false,
+  label: "dashboard_modes",
+  tabId: "1",
+  columns: { pc: 4, tablet: 6, mobile: 12 },
+};
+
 const data = reactive({
-  currTemplate: "",
-  currPlugin: "",
+  currTemplateName: "",
+  currModeName: "",
+  modes: computed(() => {
+    if (!props.templates) return [];
+    // modes are first level keys of props.templates
+    return Object.keys(props.templates);
+  }),
+  templates: computed(() => {
+    // Get all templates available for the current mode
+    if (!data.currModeName) return [];
+    return Object.keys(props.templates[data.currModeName]);
+  }),
 });
 
-function getFirstTemplate() {
+function getFirstTemplateName() {
+  return Object.keys(props.templates[data.currModeName])[0];
+}
+
+function getFirstModeName() {
+  // Get first key in props.templates dict
   return Object.keys(props.templates)[0];
 }
 
-function getTemplateNames() {
-  return Object.keys(props.templates);
-}
-
-onMounted(() => {
+onBeforeMount(() => {
   // Get first props.templates template name
-  data.currTemplate = getFirstTemplate();
+  data.currModeName = getFirstModeName();
+  data.currTemplateName = getFirstTemplateName();
 });
 </script>
 
 <template>
   <Container
+    v-if="data.currModeName && data.currTemplateName"
     :tag="'form'"
     method="POST"
     :containerClass="`col-span-12 w-full m-1 p-1`"
     :columns="props.columns"
   >
-    <template v-for="(template, template_name) in props.templates">
-      <Container :containerClass="`col-span-12 grid grid-cols-12`">
-        <Combobox
-          v-bind="comboboxTemplate"
-          :value="getFirstTemplate()"
-          :values="getTemplateNames()"
-          @inp="data.currPlugin = $event"
-        />
-      </Container>
-    </template>
+    {{ data }}
+    <Container :containerClass="`col-span-12 grid grid-cols-12`">
+      <Combobox
+        v-bind="comboboxTemplate"
+        :value="data.currTemplateName"
+        :values="data.templates"
+        @inp="data.currTemplateName = $event"
+      />
+      <Combobox
+        v-bind="comboboxModes"
+        :value="data.currModeName"
+        :values="data.modes"
+        @inp="data.currModeName = $event"
+      />
+    </Container>
+    <Advanced
+      v-if="data.currModeName === 'advanced'"
+      :template="props.templates[data.currModeName][data.currTemplateName]"
+    />
   </Container>
 </template>

vuejs/client/src/components/Forms/Field/Combobox.vue

@@ -1,5 +1,13 @@
 <script setup>
-import { ref, reactive, watch, onMounted, defineEmits, defineProps } from "vue";
+import {
+  ref,
+  reactive,
+  watch,
+  onMounted,
+  defineEmits,
+  defineProps,
+  computed,
+} from "vue";
 import { contentIndex } from "@utils/tabindex.js";
 import Container from "@components/Widget/Container.vue";
 import Header from "@components/Forms/Header/Field.vue";
@@ -66,6 +74,7 @@ const props = defineProps({
   values: {
     type: Array,
     required: true,
+    default: [],
   },
   inpType: {
     type: String,
@@ -127,6 +136,12 @@ const props = defineProps({
 const inp = reactive({
   value: "",
   isValid: true,
+  isMatching: computed(() => {
+    if (!props.values) return false;
+    return props.values.some((str) =>
+      str.toLowerCase().includes(inp.value.toLowerCase())
+    );
+  }),
 });
 
 const inputEl = ref();
@@ -359,18 +374,8 @@ const emits = defineEmits(["inp"]);
           />
           <div
             class="select-dropdown-btn"
-            v-if="
-              !props.values.some((str) =>
-                str.toLowerCase().includes(inp.value.toLowerCase())
-              )
-            "
-            :aria-hidden="
-              !props.values.some((str) =>
-                str.toLowerCase().includes(inp.value.toLowerCase())
-              )
-                ? 'true'
-                : 'false'
-            "
+            v-if="!inp.isMatching"
+            :aria-hidden="!inp.isMatching ? 'true' : 'false'"
             role="alert"
           >
             <p class="combobox-no-match">

vuejs/client/src/lang/en.json

@@ -25,6 +25,7 @@
   "dashboard_configs": "configs",
   "dashboard_plugins": "plugins",
   "dashboard_templates": "templates",
+  "dashboard_modes": "modes",
   "dashboard_jobs": "jobs",
   "dashboard_bans": "bans",
   "dashboard_actions": "actions",