Standardizes some Form Inputs + NavBar behavior

frontend/components/TitleBar.vue

@@ -1,19 +1,41 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
 
+const router = useRouter()
+
 interface Props {
   title: string
 }
 const props = withDefaults(defineProps<Props>(), {})
+
+const back = () => { router.go(-1) }
+
 onMounted(() => {
   document.title = 'RMI | PACTA | ' + props.title
 })
 </script>
 
 <template>
-  <h1 class="inline-block text-primary title-bar">
-    {{ title }}
-  </h1>
+  <div class="relative flex flex-column gap-2 align-items-start">
+    <PVButton
+      icon="pi pi-angle-left"
+      class="p-button-secondary p-button-text md:hidden p-0 text-600 pr-2"
+      style="margin-left: -.25rem"
+      label="Back"
+      @click="back"
+    />
+    <PVButton
+      v-tooltip.right="'Go Back'"
+      icon="pi pi-angle-left"
+      class="p-button-secondary p-button-text hidden md:block md:absolute p-0 h-auto w-auto"
+      style="left: -1.75rem; top: .5rem;"
+      rounded
+      @click="back"
+    />
+    <h1 class="inline-block text-primary title-bar mb-0">
+      {{ title }}
+    </h1>
+  </div>
 </template>
 
 <style scoped lang="scss">

frontend/components/pactaversion/Editor.vue

@@ -1,16 +1,26 @@
 <script setup lang="ts">
 import { type PactaVersion } from '@/openapi/generated/pacta'
+import FormField from '@/components/form/Field.vue'
 
 const props = defineProps<{
   pactaVersion: PactaVersion
 }>()
-
 const emit = defineEmits<(e: 'update:pactaVersion', pactaVersion: PactaVersion) => void>()
-
 const model = computed({
   get: () => props.pactaVersion,
   set: (pactaVersion: PactaVersion) => { emit('update:pactaVersion', pactaVersion) }
 })
+
+const nameCompleted = computed(() => model.value.name.length > 0)
+const digestCompleted = computed(() => model.value.digest.length > 0)
+const incompleteFields = computed<string[]>(() => {
+  const result: string[] = []
+  if (!nameCompleted.value) { result.push('Version Name') }
+  if (!digestCompleted.value) { result.push('Docker Image Digest') }
+  return result
+})
+
+defineExpose({ incompleteFields })
 </script>
 
 <template>
@@ -19,7 +29,7 @@ const model = computed({
       label="Version Name"
       help-text="The name of the version of the PACTA algorithm."
       required
-      :completed="model.name.length > 0"
+      :completed="nameCompleted"
     >
       <PVInputText
         v-model="model.name"

frontend/layouts/default.vue

@@ -25,7 +25,7 @@ onMounted(() => {
       :aria-hidden="anyBlockingModalOpen"
     >
       <main
-        class="px-3 md:px-4 w-full lg:w-10 xl:w-8 mx-auto"
+        class="px-3 md:px-6 w-full lg:w-10 xl:w-8 mx-auto"
         style="min-height: calc(100vh - 9rem - 4px);"
       >
         <NuxtErrorBoundary>

frontend/pages/admin/pacta-version/[id].vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import PactaversionEditor from '@/components/pactaversion/Editor.vue'
 import { type PactaVersion, type PactaVersionChanges } from '@/openapi/generated/pacta'
 
 const router = useRouter()
@@ -11,6 +12,7 @@ const id = presentOrCheckURL(fromParams('id'))
 const prefix = 'admin/pacta-version/[id]'
 const persistedPactaVersion = useState<PactaVersion>(`${prefix}.persistedPactaVersion`)
 const pactaVersion = useState<PactaVersion>(`${prefix}.pactaVersion`)
+const editor = useState<typeof PactaversionEditor>(`${prefix}.editor`)
 
 const changes = computed<PactaVersionChanges>(() => {
   const a = persistedPactaVersion.value
@@ -23,6 +25,14 @@ const changes = computed<PactaVersionChanges>(() => {
   }
 })
 const hasChanges = computed<boolean>(() => Object.keys(changes.value).length > 0)
+const incompleteFields = computed<string[]>(() => editor.value?.incompleteFields ?? [])
+const isIncomplete = computed(() => incompleteFields.value.length > 0)
+const saveTooltip = computed<string | undefined>(() => {
+  if (!hasChanges.value) { return 'All changes saved' }
+  if (isIncomplete.value) { return `Cannot save with incomplete fields: ${incompleteFields.value.join(', ')}` }
+  return undefined
+})
+const saveDisabled = computed<boolean>(() => saveTooltip.value !== undefined)
 
 const markDefault = () => withLoadingAndErrorHandling(
   () => pactaClient.markPactaVersionAsDefault(id)
@@ -78,21 +88,24 @@ onMounted(async () => {
       />
     </div>
     <PactaversionEditor
+      ref="editor"
       v-model:pactaVersion="pactaVersion"
     />
-    <div class="flex gap-3">
+    <div class="flex gap-3 align-items-center">
       <LinkButton
         label="Discard Changes"
         icon="pi pi-arrow-left"
         class="p-button-secondary p-button-outlined"
       />
-      <PVButton
-        :disabled="!hasChanges"
-        label="Save Changes"
-        icon="pi pi-arrow-right"
-        icon-pos="right"
-        @click="saveChanges"
-      />
+      <div v-tooltip.bottom="saveTooltip">
+        <PVButton
+          :disabled="saveDisabled"
+          label="Save Changes"
+          icon="pi pi-arrow-right"
+          icon-pos="right"
+          @click="saveChanges"
+        />
+      </div>
     </div>
     <StandardDebug
       :value="persistedPactaVersion"

frontend/plugins/primevue.ts

@@ -12,6 +12,7 @@ import Dialog from 'primevue/dialog'
 import InputText from 'primevue/inputtext'
 import FileUpload from 'primevue/fileupload'
 import Textarea from 'primevue/textarea'
+import Tooltip from 'primevue/tooltip'
 import Message from 'primevue/message'
 import ProgressSpinner from 'primevue/progressspinner'
 
@@ -34,4 +35,6 @@ export default defineNuxtPlugin(({ vueApp }) => {
   vueApp.component('PVMessage', Message)
   vueApp.component('PVProgressSpinner', ProgressSpinner)
   vueApp.component('PVTextarea', Textarea)
+
+  vueApp.directive('tooltip', Tooltip)
 })