case 4602 - logo and attachment forms: upload and delete only shown when usable

Business logos: file choosers only with change rights on global settings,
Upload only once a file is chosen (cleared after upload), Delete only for a
logo that exists (image load / error). Removed the unused, undeclared
readOnly. Attachments: Upload only once a file is selected.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

ayanova/src/components/attachment-control.vue

@@ -115,9 +115,13 @@
                     v-model="notes"
                     :label="$ay.t('AttachmentNotes')"
                   ></v-text-field>
-                  <v-btn color="primary" text @click="upload">{{
+                  <v-btn
-                    $ay.t("Upload")
+                    v-if="uploadFiles && uploadFiles.length > 0"
-                  }}</v-btn>
+                    color="primary"
+                    text
+                    @click="upload"
+                    >{{ $ay.t("Upload") }}</v-btn
+                  >
                 </div>
               </v-tab-item>
             </v-tabs-items>

ayanova/src/views/adm-global-logo.vue

@@ -16,8 +16,11 @@
               class="grey lighten-2"
               :src="smallUrl"
               :alt="$ay.t('SmallLogo')"
+              @load="hasSmall = true"
+              @error="hasSmall = false"
             />
             <v-file-input
+              v-if="rights.change"
               v-model="uploadSmall"
               dense
               accept="image/*"
@@ -26,20 +29,31 @@
               :rules="rules"
               data-cy="uploadSmall"
             ></v-file-input>
-            <v-btn color="primary" text @click="remove('small')">{{
+            <v-btn
-              $ay.t("Delete")
+              v-if="rights.change && hasSmall"
-            }}</v-btn>
+              color="primary"
-            <v-btn color="primary" text @click="upload('small')">{{
+              text
-              $ay.t("Upload")
+              @click="remove('small')"
-            }}</v-btn>
+              >{{ $ay.t("Delete") }}</v-btn
+            >
+            <v-btn
+              v-if="rights.change && uploadSmall"
+              color="primary"
+              text
+              @click="upload('small')"
+              >{{ $ay.t("Upload") }}</v-btn
+            >
           </v-col>
           <v-col cols="12" class="mt-10">
             <img
               class="mt-10 grey lighten-2"
               :src="mediumUrl"
               :alt="$ay.t('MediumLogo')"
+              @load="hasMedium = true"
+              @error="hasMedium = false"
             />
             <v-file-input
+              v-if="rights.change"
               v-model="uploadMedium"
               dense
               accept="image/*"
@@ -47,20 +61,31 @@
               :label="$ay.t('MediumLogo')"
               :rules="rules"
             ></v-file-input>
-            <v-btn color="primary" text @click="remove('medium')">{{
+            <v-btn
-              $ay.t("Delete")
+              v-if="rights.change && hasMedium"
-            }}</v-btn>
+              color="primary"
-            <v-btn color="primary" text @click="upload('medium')">{{
+              text
-              $ay.t("Upload")
+              @click="remove('medium')"
-            }}</v-btn>
+              >{{ $ay.t("Delete") }}</v-btn
+            >
+            <v-btn
+              v-if="rights.change && uploadMedium"
+              color="primary"
+              text
+              @click="upload('medium')"
+              >{{ $ay.t("Upload") }}</v-btn
+            >
           </v-col>
           <v-col cols="12" class="mt-10">
             <img
               class="mt-10 grey lighten-2"
               :src="largeUrl"
               :alt="$ay.t('LargeLogo')"
+              @load="hasLarge = true"
+              @error="hasLarge = false"
             />
             <v-file-input
+              v-if="rights.change"
               v-model="uploadLarge"
               dense
               accept="image/*"
@@ -68,12 +93,20 @@
               :label="$ay.t('LargeLogo')"
               :rules="rules"
             ></v-file-input>
-            <v-btn color="primary" text @click="remove('large')">{{
+            <v-btn
-              $ay.t("Delete")
+              v-if="rights.change && hasLarge"
-            }}</v-btn>
+              color="primary"
-            <v-btn color="primary" text @click="upload('large')">{{
+              text
-              $ay.t("Upload")
+              @click="remove('large')"
-            }}</v-btn>
+              >{{ $ay.t("Delete") }}</v-btn
+            >
+            <v-btn
+              v-if="rights.change && uploadLarge"
+              color="primary"
+              text
+              @click="upload('large')"
+              >{{ $ay.t("Upload") }}</v-btn
+            >
           </v-col>
         </v-row>
       </v-form>
@@ -94,6 +127,10 @@ export default {
       mediumUrl: null,
       largeUrl: null,
       smallUrl: null,
+      //case 4602: Delete is shown only for a logo that exists (set by the image's load / error)
+      hasSmall: false,
+      hasMedium: false,
+      hasLarge: false,
       fileSizeExceededWarning: "",
       formState: {
         ready: false,
@@ -119,7 +156,6 @@ export default {
     try {
       await initForm(vm);
       vm.formState.ready = true;
-      vm.readOnly = !vm.rights.change;
       window.$gz.eventBus.$on("menu-click", clickHandler);
       //NOTE: this would normally be in getDataFromAPI but this form doesn't really need that function so doing it here
       generateMenu(vm);
@@ -171,12 +207,15 @@ export default {
           switch (size) {
             case "small":
               vm.smallUrl = `${window.$gz.api.logoUrl(size)}?x=${Date.now()}`;
+              vm.uploadSmall = null;
               break;
             case "medium":
               vm.mediumUrl = `${window.$gz.api.logoUrl(size)}?x=${Date.now()}`;
+              vm.uploadMedium = null;
               break;
             case "large":
               vm.largeUrl = `${window.$gz.api.logoUrl(size)}?x=${Date.now()}`;
+              vm.uploadLarge = null;
               break;
             default:
               return;
@@ -207,12 +246,15 @@ export default {
           switch (size) {
             case "small":
               vm.smallUrl = null;
+              vm.hasSmall = false;
               break;
             case "medium":
               vm.mediumUrl = null;
+              vm.hasMedium = false;
               break;
             case "large":
               vm.largeUrl = null;
+              vm.hasLarge = false;
               break;
             default:
               return;