Use ListInput in more complex components

SakiiR · Aug 13, 2021 · b217574 · b217574
1 parent 7a8c7ad
commit b217574
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 302 deletions.
diff --git a/dockers/manager/front/src/components/DNS/Rule/RuleInput.vue b/dockers/manager/front/src/components/DNS/Rule/RuleInput.vue
@@ -1,84 +1,56 @@
 <template>
  <div class="q-mb-md">
  <div class="text-h6">Records</div>
- <base-grid-input
+ <component
+ :is="formChildren"
+ v-model="form"
+ :default="{ enabled: true }"
  :titles="['Record', 'Enabled']"
  grid-format="1fr auto"
- :entries="form"
  :error="error"
- @addEntry="addEntry"
- @removeEntry="removeEntry"
  >
- <template #inputs>
+ <template #content="props">
  <q-input
- v-model="model.content"
- class="col"
- flat
+ v-model="props.model.content"
+ :rules="[required()]"
  label="New record"
- @keypress.enter.prevent="addEntry"
+ flat
+ v-bind="props"
  />
- <div>
- <q-toggle
- v-model="model.enabled"
- title="Enabled"
- :color="model.enabled ? 'positive' : 'negative'"
- />
-
- <q-tooltip anchor="top middle" self="bottom middle">
- {{ model.enabled ? "Enabled" : "Disabled" }}
- </q-tooltip>
- </div>
  </template>
- <template #entry="{entry}">
- <div class="ellipsis">
- {{ entry.content }}
- <q-popup-edit v-model="entry.content">
- <q-input v-model="entry.content" class="col" flat label="Content" />
- </q-popup-edit>
- </div>
- <div class="ellipsis">
- <q-toggle
- v-model="entry.enabled"
- title="Enabled"
- :color="entry.enabled ? 'positive' : 'negative'"
- />
-
- <q-tooltip anchor="top middle" self="bottom middle">
- {{ entry.enabled ? "Enabled" : "Disabled" }}
- </q-tooltip>
- </div>
+ <template #enabled.nopopup="props">
+ <q-toggle
+ v-model="props.model.enabled"
+ :color="props.model.enabled ? 'positive' : 'negative'"
+ class="fit"
+ v-bind="props"
+ />
+ <q-tooltip anchor="top middle" self="bottom middle">
+ {{ props.model.enabled ? "Enabled" : "Disabled" }}
+ </q-tooltip>
  </template>
- </base-grid-input>
+ </component>
  </div>
 </template>
 
 <script>
 import DeepForm from "src/mixins/DeepForm";
-import BaseGridInput from "src/components/BaseGridInput.vue";
+import ListInput from "src/components/ListInput.vue";
 
 export default {
- components: { BaseGridInput },
  mixins: [DeepForm],
  props: {
  label: { type: String, default: null }
  },
- data: () => ({ model: { content: null, enabled: true }, error: null }),
- formDefinition: [],
+ data: () => ({ error: null }),
+ formDefinition: ListInput,
  methods: {
  validate() {
  if (this.form.length < 1) {
  this.error = "You need at least one record.";
  return false;
  }
  return true;
- },
- addEntry() {
- if (!this.model.content) return;
- this.form.unshift(this.model);
- this.model = { content: null, enabled: true };
- },
- removeEntry(idx) {
- this.form.splice(idx, 1);
  }
  }
 };

diff --git a/dockers/manager/front/src/components/Docker/Container/Form/ExposedPorts.vue b/dockers/manager/front/src/components/Docker/Container/Form/ExposedPorts.vue
@@ -7,118 +7,67 @@
  <q-separator />
  <q-card>
  <q-card-section>
- <base-grid-input
- :readonly="readonly"
+ <component
+ :is="formChildren"
+ v-model="form"
+ :default="{ protocol: 'tcp', targets: [] }"
  :titles="['Container port', 'Protocol', 'Targets']"
- grid-format="150px 85px auto"
- :entries="form"
- @addEntry="addEntry"
- @removeEntry="removeEntry"
+ grid-format="150px 100px auto"
+ :readonly="readonly"
  >
- <template #inputs>
+ <template #containerPort="props">
  <q-input
- ref="port"
- v-model.number="model.containerPort"
+ v-model.number="props.model.containerPort"
  mask="#####"
  :rules="[validatePort]"
- lazy-rules="ondemand"
  label="Container port"
- @input="$refs.port.resetValidation()"
- @keypress.enter.prevent="addEntry"
- @change="addPort(model.containerPort)"
+ v-bind="props"
+ @input="addPort(props.model)"
  />
+ </template>
+ <template #protocol="props">
  <q-select
- v-model="model.protocol"
- class="fit"
- label="Protocol"
+ v-model="props.model.protocol"
  :options="['tcp', 'udp']"
+ :rules="[required()]"
+ label="Protocol"
+ v-bind="props"
  />
+ </template>
+
+ <template #targets="props">
  <q-select
- v-model="model.targets"
- class="fit"
+ v-model="props.model.targets"
+ label="Targets"
  use-chips
  new-value-mode="add"
  use-input
  hide-dropdown-icon
  multiple
  outlined
- label="Targets"
+ v-bind="props"
  />
  </template>
- <template #entry="{entry}">
- <div class="ellipsis">
- {{ entry.containerPort }}
-
- <q-popup-edit
- v-model="entry.containerPort"
- :validate="validatePort"
- >
- <template #default="{validate}">
- <q-input
- v-model.number="entry.containerPort"
- mask="#####"
- :rules="[validate]"
- :readonly="readonly"
- dense
- autofocus
- />
- </template>
- </q-popup-edit>
- </div>
- <div class="ellipsis">
- {{ entry.protocol }}
- <q-popup-edit v-model="entry.protocol" :validate="required()">
- <q-select
- v-model="entry.protocol"
- :readonly="readonly"
- :options="['tcp', 'udp']"
- dense
- autofocus
- />
- </q-popup-edit>
- </div>
- <div class="ellipsis">
- {{ entry.targets ? entry.targets.join(", ") : "Not forwarded" }}
-
- <q-popup-edit v-model="entry.targets">
- <q-select
- v-model="entry.targets"
- :readonly="readonly"
- use-chips
- new-value-mode="add"
- use-input
- hide-dropdown-icon
- multiple
- outlined
- />
- </q-popup-edit>
- </div>
+ <template #display-targets="{targets}">
+ {{ targets.join(", ") || "Not forwarded" }}
  </template>
- </base-grid-input>
+ </component>
  </q-card-section>
  </q-card>
  </q-expansion-item>
 </template>
 
 <script>
 import DeepForm from "src/mixins/DeepForm.js";
-import BaseGridInput from "src/components/BaseGridInput.vue";
-
-const defaultModel = {
- containerPort: null,
- protocol: "tcp",
- targets: []
-};
+import ListInput from "src/components/ListInput.vue";
 
 export default {
- components: { BaseGridInput },
  mixins: [DeepForm],
  props: {
  readonly: { type: Boolean, default: false },
  container: { type: Object, default: null }
  },
- formDefinition: [],
- data: () => ({ model: { ...defaultModel } }),
+ formDefinition: ListInput,
  methods: {
  validatePort(p) {
  const max = 2 ** 16 - 1;
@@ -127,18 +76,11 @@ export default {
  `Must be in range 0 - ${max}`
  );
  },
- addPort(port) {
- this.model.targets = port ? [`0.0.0.0:${port}`] : [];
- },
- addEntry() {
- if (!this.model.protocol) return;
- if (this.$refs.port.validate()) {
- this.form.unshift(this.model);
- this.model = { ...defaultModel };
- }
- },
- removeEntry(idx) {
- this.form.splice(idx, 1);
+ addPort(model) {
+ model.targets =
+ this.validatePort(model.containerPort) === true
+ ? [`0.0.0.0:${model.containerPort}`]
+ : [];
  }
  }
 };