Generalize ListInput & use in many places

SakiiR · Jul 13, 2021 · cecaffa · cecaffa
1 parent 61e7c32
commit cecaffa
Show file tree

Hide file tree

Showing 13 changed files with 208 additions and 347 deletions.
diff --git a/dockers/manager/front/src/components/BaseGridInput.vue b/dockers/manager/front/src/components/BaseGridInput.vue
@@ -10,7 +10,14 @@
  {{ title }}
  </div>
  </template>
- <template v-else>
+ <q-form
+ v-else
+ ref="form"
+ style="display: contents"
+ greedy
+ @input="$refs.form.resetValidation()"
+ @submit="$emit('addEntry')"
+ >
  <slot name="inputs" />
  <div v-if="!readonly" class="text-center">
  <q-btn
@@ -21,17 +28,19 @@
  icon="eva-plus"
  color="positive"
  :loading="loading"
- @click="$emit('addEntry')"
+ type="submit"
  />
  </div>
- </template>
+ </q-form>
  <div v-if="!readonly" class="spacing" />
  <div v-if="readonly && entries.length === 0" style="display: contents">
  <div v-for="(title, idx) of titles" :key="`title-${idx}`">-</div>
  </div>
  <div v-for="(entry, idx) of entries" :key="idx" style="display: contents">
  <div v-if="idx > 0" class="separator"></div>
- <slot name="entry" :entry="entry" />
+ <slot name="entry" :entry="entry">
+ <div class="ellipsis">{{ entry }}</div>
+ </slot>
  <div v-if="!readonly" class="text-center">
  <q-btn
  dense
@@ -60,7 +69,7 @@ export default {
  },
  computed: {
  style() {
- const columnEnd = this.gridFormat.split(/\s+/).length + 1;
+ const columnEnd = this.gridFormat.trim().split(/\s+/).length + 1;
  if (this.readonly) {
  return {
  "grid-template-columns": this.gridFormat,
@@ -75,6 +84,7 @@ export default {
  }
 };
 </script>
+
 <style lang="scss" scoped>
 .input-grid {
  width: 100%;

diff --git a/dockers/manager/front/src/components/Docker/Container/Form/CapabilitiesAddInput.vue b/dockers/manager/front/src/components/Docker/Container/Form/CapabilitiesAddInput.vue
@@ -21,11 +21,6 @@
  </template>
  </q-select>
  </template>
- <template #entry="props">
- <div class="ellipsis">
- {{ props.entry }}
- </div>
- </template>
  </base-grid-input>
 </template>
 

diff --git a/dockers/manager/front/src/components/Docker/Container/Form/CapabilitiesDropInput.vue b/dockers/manager/front/src/components/Docker/Container/Form/CapabilitiesDropInput.vue
@@ -21,11 +21,6 @@
  </template>
  </q-select>
  </template>
- <template #entry="props">
- <div class="ellipsis">
- {{ props.entry }}
- </div>
- </template>
  </base-grid-input>
 </template>
 

diff --git a/dockers/manager/front/src/components/Docker/Image/TagInput.vue b/dockers/manager/front/src/components/Docker/Image/TagInput.vue
@@ -8,12 +8,7 @@
  @removeEntry="removeTag"
  >
  <template #inputs>
- <q-input v-model="model" label="New tag" @keypress.enter="addTag" />
- </template>
- <template #entry="{entry}">
- <div class="ellipsis">
- {{ entry }}
- </div>
+ <q-input v-model="model" label="New tag" />
  </template>
  </base-grid-input>
 </template>

diff --git a/dockers/manager/front/src/components/Docker/KeyValueListInput.vue b/dockers/manager/front/src/components/Docker/KeyValueListInput.vue
@@ -3,93 +3,44 @@
  <q-separator />
  <q-card>
  <q-card-section>
- <base-grid-input
- :readonly="readonly"
+ <component
+ :is="formChildren"
+ v-model="form"
  :titles="['Name', 'Value']"
- grid-format="1fr 1fr"
- :entries="form"
- @addEntry="addEntry"
- @removeEntry="removeEntry"
+ :readonly="readonly"
  >
- <template #inputs>
+ <template #key="props">
  <q-input
- ref="key"
- v-model="model.key"
+ v-model="props.model.key"
  :rules="[required('Name cannot be empty')]"
- lazy-rules="ondemand"
- class="col"
- flat
  label="Name"
- @input="$refs.key.resetValidation()"
- @keypress.enter.prevent="addEntry"
+ flat
+ v-bind="props"
  />
+ </template>
+ <template #value="props">
  <q-input
- v-model="model.value"
- class="col fit"
- flat
+ v-model="props.model.value"
  label="Value"
- @keypress.enter.prevent="addEntry"
+ flat
+ v-bind="props"
  />
  </template>
- <template #entry="{entry}">
- <div class="ellipsis">
- {{ entry.key }}
- <q-popup-edit
- v-model="entry.key"
- :validate="required('Name cannot be empty')"
- >
- <template #default="{validate}">
- <q-input
- v-model="entry.key"
- :rules="[validate]"
- :readonly="readonly"
- dense
- autofocus
- />
- </template>
- </q-popup-edit>
- </div>
- <div class="ellipsis fit">
- {{ entry.value }}
- <q-popup-edit v-model="entry.value">
- <q-input
- v-model="entry.value"
- :readonly="readonly"
- dense
- autofocus
- />
- </q-popup-edit>
- </div>
- </template>
- </base-grid-input>
+ </component>
  </q-card-section>
  </q-card>
  </q-expansion-item>
 </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],
- formDefinition: [],
+ formDefinition: ListInput,
  props: {
  readonly: { type: Boolean, default: false }
- },
- data: () => ({ model: { key: "", value: "" } }),
- methods: {
- addEntry() {
- if (this.$refs.key.validate()) {
- this.form.unshift(this.model);
- this.model = { key: "", value: "" };
- this.$refs.key.resetValidation();
- }
- },
- removeEntry(idx) {
- this.form.splice(idx, 1);
- }
  }
 };
 </script>
diff --git a/dockers/manager/front/src/components/Docker/Network/IpamsInput.vue b/dockers/manager/front/src/components/Docker/Network/IpamsInput.vue
@@ -21,73 +21,38 @@
  <q-separator />
  <q-card>
  <q-card-section>
- <base-grid-input
- :readonly="readonly"
+ <component
+ :is="formChildren"
+ v-model="form"
  :titles="['Subnet', 'Gateway', 'IP Range']"
- grid-format="1fr 1fr 1fr"
- :entries="form"
- @addEntry="addEntry"
- @removeEntry="removeEntry"
+ :readonly="readonly"
  >
- <template #inputs>
+ <template #subnet="props">
  <q-input
- v-model="model.subnet"
- class="col"
- flat
+ v-model.number="props.model.subnet"
+ :rules="[required()]"
  label="Subnet"
- @keypress.enter.prevent="addEntry"
+ flat
+ v-bind="props"
  />
+ </template>
+ <template #gateway="props">
  <q-input
- v-model="model.gateway"
- class="col"
- flat
+ v-model.number="props.model.gateway"
  label="Gateway"
- @keypress.enter.prevent="addEntry"
+ flat
+ v-bind="props"
  />
+ </template>
+ <template #ipRange="props">
  <q-input
- v-model="model.ipRange"
- class="col"
- flat
+ v-model.number="props.model.ipRange"
  label="IP Range"
- @keypress.enter.prevent="addEntry"
+ flat
+ v-bind="props"
  />
  </template>
- <template #entry="{entry}">
- <div class="ellipsis">
- {{ entry.subnet }}
- <q-popup-edit v-model="entry.subnet">
- <q-input
- v-model.number="entry.subnet"
- :readonly="readonly"
- dense
- autofocus
- />
- </q-popup-edit>
- </div>
- <div class="ellipsis">
- {{ entry.gateway }}
- <q-popup-edit v-model="entry.gateway">
- <q-input
- v-model.number="entry.gateway"
- :readonly="readonly"
- dense
- autofocus
- />
- </q-popup-edit>
- </div>
- <div class="ellipsis">
- {{ entry.ipRange }}
- <q-popup-edit v-model="entry.ipRange">
- <q-input
- v-model.number="entry.ipRange"
- :readonly="readonly"
- dense
- autofocus
- />
- </q-popup-edit>
- </div>
- </template>
- </base-grid-input>
+ </component>
  </q-card-section>
  </q-card>
  </q-expansion-item>
@@ -96,39 +61,22 @@
 <script>
 import DeepForm from "src/mixins/DeepForm";
 import HelpLink from "src/components/HelpLink.vue";
-import BaseGridInput from "src/components/BaseGridInput.vue";
-
-const defaultModel = {
- subnet: null,
- gateway: null,
- ipRange: null
-};
+import ListInput from "src/components/ListInput.vue";
 
 export default {
- components: { HelpLink, BaseGridInput },
+ components: { HelpLink },
  mixins: [DeepForm],
  props: {
  readonly: { type: Boolean, default: false }
  },
- formDefinition: [],
- data: () => ({ model: { ...defaultModel } }),
+ formDefinition: ListInput,
  computed: {
  caption() {
  if (this.form.length === 0) {
  return "Automatic";
  }
  return `${this.form.length} setting(s)`;
  }
- },
- methods: {
- removeEntry(idx) {
- this.form.splice(idx, 1);
- },
- addEntry() {
- if (!this.model.subnet) return;
- this.form.unshift(this.model);
- this.model = { ...defaultModel };
- }
  }
 };
 </script>