Merge Environ & Label inputs into KeyValueList

dockers/manager/front/src/components/Docker/Container/Create.vue

@@ -1,7 +1,7 @@
 <template>
  <q-form @submit="submit">
  <q-card-section class="q-gutter-md">
- <q-input v-if="!readonly" v-model="form.name" label="Name" />
+ <q-input v-if="!readonly" v-model="form.name" autofocus label="Name" />
  <image-input v-if="!readonly" ref="image" v-model="image" />
  <q-list separator class="rounded-borders" bordered>
  <component
@@ -13,11 +13,17 @@
  :is="formChildren.environment"
  v-model="form.environment"
  :readonly="readonly"
+ icon="attach_money"
+ label="Environment"
+ :caption="`${form.environment.length} variable(s)`"
  />
  <component
  :is="formChildren.labels"
  v-model="form.labels"
  :readonly="readonly"
+ icon="label"
+ label="Labels"
+ :caption="`${form.labels.length} label(s)`"
  />
  <component
  :is="formChildren.ports"
@@ -63,8 +69,7 @@
 import ExtraConfig from "./Form/ExtraConfig.vue";
 import MountsInput from "./Form/MountsInput.vue";
 import DeepForm from "src/mixins/DeepForm.js";
-import EnvironInput from "./Form/EnvironInput.vue";
-import LabelInputVue from "../LabelInput.vue";
+import KeyValueListInput from "../KeyValueListInput.vue";
 import NetworkInput from "./Form/NetworkInput.vue";
 import ExposedPorts from "./Form/ExposedPorts.vue";
 import ImageInput from "./Form/ImageInput.vue";
@@ -73,7 +78,6 @@ import ResetAndSave from "src/components/ResetAndSave.vue";
 
 export default {
  components: {
- EnvironInput,
  ExtraConfig,
  ImageInput,
  ResetAndSave
@@ -86,8 +90,8 @@ export default {
  start: true,
  name: null,
  image: null,
- labels: LabelInputVue,
- environment: EnvironInput,
+ labels: KeyValueListInput,
+ environment: KeyValueListInput,
  extra: ExtraConfig,
  ports: null,
  capAdd: null,

dockers/manager/front/src/components/Docker/Container/Form/EnvironInput.vue → dockers/manager/front/src/components/Docker/KeyValueListInput.vue

@@ -1,9 +1,5 @@
 <template>
- <q-expansion-item
- icon="attach_money"
- label="Environment"
- :caption="`${form.length} variable(s)`"
- >
+ <q-expansion-item v-bind="$attrs">
  <q-separator />
  <q-card>
  <q-card-section>
@@ -17,15 +13,19 @@
  >
  <template #inputs>
  <q-input
+ ref="key"
  v-model="model.key"
+ :rules="[required('Name cannot be empty')]"
+ lazy-rules="ondemand"
  class="col"
  flat
  label="Name"
+ @input="$refs.key.resetValidation()"
  @keypress.enter.prevent="addEntry"
  />
  <q-input
  v-model="model.value"
- class="col"
+ class="col fit"
  flat
  label="Value"
  @keypress.enter.prevent="addEntry"
@@ -34,20 +34,26 @@
  <template #entry="{entry}">
  <div class="ellipsis">
  {{ entry.key }}
- <q-popup-edit v-model="entry.key">
- <q-input
- v-model.number="entry.key"
- :readonly="readonly"
- dense
- autofocus
- />
+ <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">
+ <div class="ellipsis fit">
  {{ entry.value }}
  <q-popup-edit v-model="entry.value">
  <q-input
- v-model.number="entry.value"
+ v-model="entry.value"
  :readonly="readonly"
  dense
  autofocus
@@ -70,14 +76,16 @@ export default {
  mixins: [DeepForm],
  formDefinition: [],
  props: {
- label: { type: String, default: null },
  readonly: { type: Boolean, default: false }
  },
  data: () => ({ model: { key: "", value: "" } }),
  methods: {
  addEntry() {
- this.form.unshift(this.model);
- this.model = { key: "", value: "" };
+ 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);

dockers/manager/front/src/components/Docker/Network/Create.vue

@@ -9,6 +9,7 @@
  :readonly="readonly"
  :rules="[required('Name is required')]"
  required
+ autofocus
  label="Name"
  />
  </div>
@@ -33,6 +34,9 @@
  :is="formChildren.labels"
  v-model="form.labels"
  :readonly="readonly"
+ icon="label"
+ label="Labels"
+ :caption="`${form.labels.length} label(s)`"
  />
  </q-list>
  </q-card-section>
@@ -50,20 +54,22 @@
 
 <script>
 import DeepForm from "src/mixins/DeepForm.js";
-import LabelInput from "../LabelInput.vue";
+import KeyValueListInput from "../KeyValueListInput.vue";
 import IpamsInput from "./IpamsInput.vue";
 import ResetAndSave from "src/components/ResetAndSave.vue";
 import api from "src/api";
 
 export default {
- components: { ResetAndSave, LabelInput },
+ components: { ResetAndSave },
  mixins: [DeepForm],
- props: { readonly: { type: Boolean, default: false } },
+ props: {
+ readonly: { type: Boolean, default: false }
+ },
  formDefinition: {
  internal: false,
  name: null,
  ipams: IpamsInput,
- labels: LabelInput
+ labels: KeyValueListInput
  },
  methods: {
  validate() {

dockers/manager/front/src/components/Docker/Volume/Create.vue

@@ -3,7 +3,13 @@
  <q-card-section class="q-gutter-md">
  <q-input v-model="form.name" required label="Name" />
  <q-list separator class="rounded-borders" bordered>
- <component :is="formChildren.labels" v-model="form.labels" />
+ <component
+ :is="formChildren.labels"
+ v-model="form.labels"
+ icon="label"
+ label="Labels"
+ :caption="`${form.labels.length} label(s)`"
+ />
  </q-list>
  </q-card-section>
 
@@ -14,7 +20,7 @@
 </template>
 
 <script>
-import LabelInput from "../LabelInput.vue";
+import KeyValueListInput from "../KeyValueListInput.vue";
 import DeepForm from "src/mixins/DeepForm";
 import ResetAndSave from "src/components/ResetAndSave.vue";
 import api from "src/api";
@@ -24,7 +30,7 @@ export default {
  mixins: [DeepForm],
  formDefinition: {
  name: null,
- labels: LabelInput
+ labels: KeyValueListInput
  },
  methods: {
  submit(done) {

dockers/manager/front/src/components/Shell/Create.vue

@@ -34,6 +34,9 @@
  <component
  :is="formChildren.environment"
  v-model="form.environment"
+ icon="attach_money"
+ label="Environment"
+ :caption="`${form.environment.length} variable(s)`"
  />
  </q-list>
  </div>
@@ -52,7 +55,7 @@
 <script>
 import DeepForm from "src/mixins/DeepForm";
 import ContainerSelect from "../Docker/Container/Form/ContainerSelect.vue";
-import EnvironInputVue from "../Docker/Container/Form/EnvironInput.vue";
+import KeyValueListInput from "../Docker/KeyValueListInput.vue";
 import ResetAndSave from "../ResetAndSave.vue";
 import api from "src/api";
 
@@ -65,7 +68,7 @@ export default {
  privileged: false,
  cmd: "/bin/sh -c 'if which bash; then bash ; else sh ; fi'",
  containerName: ContainerSelect,
- environment: EnvironInputVue
+ environment: KeyValueListInput
  },
  methods: {
  submit() {