adds page for custom fields

pages/devices/_deviceId.vue

@@ -59,6 +59,10 @@ export default class DevicePage extends Vue {
         {
           to: '/devices/' + this.deviceId + '/contacts',
           name: 'Contacts'
+        },
+        {
+          to: '/devices/' + this.deviceId + '/customfields',
+          name: 'Custom Fields'
         }
       ],
       title: 'Devices'

pages/devices/_deviceId/customfields.vue

+<template>
+  <div>
+    <ProgressIndicator
+      v-model="isInProgress"
+      :dark="isSaving"
+    />
+    <v-card-actions>
+      <v-spacer />
+      <v-btn
+        v-if="isLoggedIn"
+        :disabled="isEditCustomFieldsPage"
+        color="primary"
+        small
+        @click="addField"
+      >
+        Add Custom Field
+      </v-btn>
+    </v-card-actions>
+    <template
+      v-for="(field, index) in customFields"
+    >
+      <NuxtChild
+        :key="'customfield-' + index"
+        v-model="customFields[index]"
+        @delete="deleteField"
+      />
+    </template>
+    <v-card-actions
+      v-if="customFields.length > 3"
+    >
+      <v-spacer />
+      <v-btn
+        v-if="isLoggedIn"
+        :disabled="isEditCustomFieldsPage"
+        color="primary"
+        small
+        @click="addField"
+      >
+        Add Custom Field
+      </v-btn>
+    </v-card-actions>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'nuxt-property-decorator'
+import { CustomTextField } from '@/models/CustomTextField'
+
+import ProgressIndicator from '@/components/ProgressIndicator.vue'
+
+@Component({
+  components: {
+    ProgressIndicator
+  }
+})
+export default class DeviceCustomFieldsPage extends Vue {
+  private customFields: CustomTextField[] = []
+  private isLoading = false
+  private isSaving = false
+
+  mounted () {
+    this.isLoading = true
+    this.$api.devices.findRelatedCustomFields(this.deviceId).then((foundFields) => {
+      this.customFields = foundFields
+      this.isLoading = false
+    }).catch(() => {
+      this.$store.commit('snackbar/setError', 'Failed to fetch custom fields')
+      this.isLoading = false
+    })
+  }
+
+  get isInProgress (): boolean {
+    return this.isLoading || this.isSaving
+  }
+
+  get deviceId (): string {
+    return this.$route.params.deviceId
+  }
+
+  get isLoggedIn (): boolean {
+    return this.$store.getters['oidc/isAuthenticated']
+  }
+
+  get isEditCustomFieldsPage (): boolean {
+    // eslint-disable-next-line no-useless-escape
+    const editUrl = '^\/devices\/' + this.deviceId + '\/customfields\/([0-9]+)\/edit$'
+    return !!this.$route.path.match(editUrl)
+  }
+
+  addField (): void {
+    const field = new CustomTextField()
+    this.isSaving = true
+    this.$api.customFields.add(this.deviceId, field).then(() => {
+      this.isSaving = false
+      this.$router.push('/devices/' + this.deviceId + '/customfields')
+    }).catch(() => {
+      this.isSaving = false
+      this.$store.commit('snackbar/setError', 'Failed to save custom field')
+    })
+  }
+
+  deleteField (field: CustomTextField) {
+    if (!field.id) {
+      return
+    }
+    this.$api.customFields.deleteById(field.id).then(() => {
+      const index: number = this.customFields.findIndex((f: CustomTextField) => f.id === field.id)
+      if (index > -1) {
+        this.customFields.splice(index, 1)
+      }
+    }).catch(() => {
+      this.$store.commit('snackbar/setError', 'Failed to delete custom field')
+    })
+  }
+}
+</script>

pages/devices/_deviceId/customfields/_customfieldId.vue

+<template>
+  <div>
+    <NuxtChild
+      v-if="isEditModeForField"
+      v-model="value"
+    />
+    <CustomFieldCard
+      v-else
+      v-model="value"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'nuxt-property-decorator'
+
+import CustomFieldCard from '@/components/CustomFieldCard.vue'
+import ProgressIndicator from '@/components/ProgressIndicator.vue'
+
+@Component({
+  components: {
+    CustomFieldCard,
+    ProgressIndicator
+  }
+})
+export default class DeviceCustomFieldsIdPage extends Vue {
+  @Prop({
+    required: true,
+    type: Object
+  })
+  readonly value!: CustomTextField
+
+  get field (): CustomTextField {
+    return this.value
+  }
+
+  set field (value: CustomTextField) {
+    this.$emit('input', value)
+  }
+
+  get deviceId (): string {
+    return this.$route.params.deviceId
+  }
+
+  get isEditModeForField () {
+    return this.$route.path === '/devices/' + this.deviceId + '/customfields/' + this.value.id + '/edit'
+  }
+}
+</script>

pages/devices/_deviceId/customfields/_customfieldId/edit.vue

+<template>
+  <div>
+    <ProgressIndicator
+      v-model="isSaving"
+      dark
+    />
+    <CustomFieldCardForm
+      ref="customFieldCardForm"
+      v-model="valueCopy"
+    >
+      <template #actions>
+        <v-btn
+          v-if="isLoggedIn"
+          text
+          small
+          nuxt
+          :to="'/devices/' + deviceId + '/customfields'"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          v-if="isLoggedIn"
+          color="green"
+          small
+          @click="save()"
+        >
+          Apply
+        </v-btn>
+      </template>
+    </CustomFieldCardForm>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch } from 'nuxt-property-decorator'
+
+import { CustomTextField } from '@/models/CustomTextField'
+
+import CustomFieldCardForm from '@/components/CustomFieldCardForm.vue'
+import ProgressIndicator from '@/components/ProgressIndicator.vue'
+
+@Component({
+  components: {
+    CustomFieldCardForm,
+    ProgressIndicator
+  }
+})
+export default class DeviceCustomFieldsShowPage extends Vue {
+  private isSaving: boolean = false
+  private valueCopy: CustomTextField = new CustomTextField()
+
+  @Prop({
+    required: true,
+    type: Object
+  })
+  readonly value!: CustomTextField
+
+  created () {
+    this.valueCopy = CustomTextField.createFromObject(this.value)
+  }
+
+  mounted () {
+    (this.$refs.customFieldCardForm as Vue & { focus: () => void}).focus()
+  }
+
+  get deviceId (): string {
+    return this.$route.params.deviceId
+  }
+
+  get isLoggedIn (): boolean {
+    return this.$store.getters['oidc/isAuthenticated']
+  }
+
+  save (): void {
+    this.isSaving = true
+    this.$api.customFields.save(this.deviceId, this.valueCopy).then(() => {
+      this.isSaving = false
+      this.$emit('input', this.valueCopy)
+      this.$router.push('/devices/' + this.deviceId + '/customfields')
+    }).catch((e) => {
+      this.isSaving = false
+      this.$store.commit('snackbar/setError', 'Failed to save custom field')
+    })
+  }
+
+  @Watch('value', { immediate: true, deep: true })
+  // @ts-ignore
+  onValueChanged (val: Device) {
+    this.valueCopy = CustomTextField.createFromObject(val)
+  }
+}
+</script>

pages/devices/_deviceId/customfields/index.vue

+<template>
+  <CustomFieldCard
+    v-model="value"
+  >
+    <template #actions>
+      <v-btn
+        v-if="isLoggedIn"
+        color="primary"
+        text
+        small
+        nuxt
+        :to="'/devices/' + deviceId + '/customfields/' + value.id + '/edit'"
+      >
+        Edit
+      </v-btn>
+      <v-menu
+        v-if="isLoggedIn"
+        close-on-click
+        close-on-content-click
+        offset-x
+        left
+        z-index="999"
+      >
+        <template v-slot:activator="{ on }">
+          <v-btn
+            data-role="property-menu"
+            icon
+            small
+            v-on="on"
+          >
+            <v-icon
+              dense
+              small
+            >
+              mdi-dots-vertical
+            </v-icon>
+          </v-btn>
+        </template>
+        <v-list>
+          <v-list-item
+            dense
+            @click="deleteField"
+          >
+            <v-list-item-content>
+              <v-list-item-title
+                class="red--text"
+              >
+                <v-icon
+                  left
+                  small
+                  color="red"
+                >
+                  mdi-delete
+                </v-icon>
+                Remove field
+              </v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </template>
+  </CustomFieldCard>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'nuxt-property-decorator'
+
+import { CustomTextField } from '@/models/CustomTextField'
+import CustomFieldCard from '@/components/CustomFieldCard.vue'
+
+@Component({
+  components: {
+    CustomFieldCard
+  }
+})
+export default class DeviceCustomFieldsShowPage extends Vue {
+  @Prop({
+    required: true,
+    type: Object
+  })
+  readonly value!: CustomTextField
+
+  get field (): CustomTextField {
+    return this.value
+  }
+
+  set field (value: CustomTextField) {
+    this.$emit('input', value)
+  }
+
+  get deviceId (): string {
+    return this.$route.params.deviceId
+  }
+
+  get isLoggedIn (): boolean {
+    return this.$store.getters['oidc/isAuthenticated']
+  }
+
+  deleteField (): void {
+    this.$emit('delete', this.value)
+  }
+}
+</script>