From 292388dead31517932f39aa8ccf187d6aa9f448a Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Wed, 29 Jun 2022 15:35:12 +0200
Subject: [PATCH] Iterated on class UI

---
 app/imports/ui/properties/forms/ClassForm.vue | 136 +++++++++---------
 .../ui/properties/viewers/ClassViewer.vue     |   1 +
 2 files changed, 69 insertions(+), 68 deletions(-)

diff --git a/app/imports/ui/properties/forms/ClassForm.vue b/app/imports/ui/properties/forms/ClassForm.vue
index b97e6b3b..d301b750 100644
--- a/app/imports/ui/properties/forms/ClassForm.vue
+++ b/app/imports/ui/properties/forms/ClassForm.vue
@@ -28,73 +28,6 @@
         />
       </v-col>
     </v-row>
-    <v-layout align-center>
-      <v-btn
-        icon
-        style="margin-top: -30px;"
-        class="mr-2"
-        :loading="addExtraTagsLoading"
-        :disabled="extraTagsFull"
-        @click="addExtraTags"
-      >
-        <v-icon>
-          mdi-plus
-        </v-icon>
-      </v-btn>
-      <smart-combobox
-        label="Tags Required"
-        hint="Class levels added to this class must have these tags"
-        multiple
-        chips
-        deletable-chips
-        :value="model.slotTags"
-        :error-messages="errors.slotTags"
-        @change="change('slotTags', ...arguments)"
-      />
-    </v-layout>
-    <v-slide-x-transition group>
-      <div
-        v-for="(extras, i) in model.extraTags"
-        :key="extras._id"
-        class="extra-tags layout align-center justify-space-between"
-      >
-        <smart-select
-          label="Operation"
-          style="width: 90px; flex-grow: 0;"
-          :items="extraTagOperations"
-          :value="extras.operation"
-          :error-messages="errors.extraTags && errors.extraTags[i]"
-          @change="change(['extraTags', i, 'operation'], ...arguments)"
-        />
-        <smart-combobox
-          label="Tags"
-          :hint="extras.operation === 'OR' ? 'The class levels can have these tags instead' : 'The class levels can not have any of these tags'"
-          class="mx-2"
-          multiple
-          chips
-          deletable-chips
-          :value="extras.tags"
-          @change="change(['extraTags', i, 'tags'], ...arguments)"
-        />
-        <v-btn
-          icon
-          style="margin-top: -30px;"
-          @click="$emit('pull', {path: ['extraTags', i]})"
-        >
-          <v-icon>mdi-delete</v-icon>
-        </v-btn>
-      </div>
-    </v-slide-x-transition>
-
-    <computed-field
-      label="Condition"
-      hint="A caclulation to determine if this class can have levels added to it"
-      placeholder="Always allow"
-      :model="model.slotCondition"
-      :error-messages="errors.slotCondition"
-      @change="({path, value, ack}) =>
-        $emit('change', {path: ['slotCondition', ...path], value, ack})"
-    />
 
     <inline-computation-field
       label="Description"
@@ -117,13 +50,80 @@
       >
         <smart-combobox
           label="Tags"
-          hint="This slot's own tags which will be used to fill other slots"
+          hint="This class's own tags"
           multiple
           chips
           deletable-chips
           :value="model.tags"
           @change="change('tags', ...arguments)"
         />
+        <v-layout align-center>
+          <v-btn
+            icon
+            style="margin-top: -30px;"
+            class="mr-2"
+            :loading="addExtraTagsLoading"
+            :disabled="extraTagsFull"
+            @click="addExtraTags"
+          >
+            <v-icon>
+              mdi-plus
+            </v-icon>
+          </v-btn>
+          <smart-combobox
+            label="Tags Required"
+            hint="Class levels added to this class must have these tags"
+            multiple
+            chips
+            deletable-chips
+            :value="model.slotTags"
+            :error-messages="errors.slotTags"
+            @change="change('slotTags', ...arguments)"
+          />
+        </v-layout>
+        <v-slide-x-transition group>
+          <div
+            v-for="(extras, i) in model.extraTags"
+            :key="extras._id"
+            class="extra-tags layout align-center justify-space-between"
+          >
+            <smart-select
+              label="Operation"
+              style="width: 90px; flex-grow: 0;"
+              :items="extraTagOperations"
+              :value="extras.operation"
+              :error-messages="errors.extraTags && errors.extraTags[i]"
+              @change="change(['extraTags', i, 'operation'], ...arguments)"
+            />
+            <smart-combobox
+              label="Tags"
+              :hint="extras.operation === 'OR' ? 'The class levels can have these tags instead' : 'The class levels can not have any of these tags'"
+              class="mx-2"
+              multiple
+              chips
+              deletable-chips
+              :value="extras.tags"
+              @change="change(['extraTags', i, 'tags'], ...arguments)"
+            />
+            <v-btn
+              icon
+              style="margin-top: -30px;"
+              @click="$emit('pull', {path: ['extraTags', i]})"
+            >
+              <v-icon>mdi-delete</v-icon>
+            </v-btn>
+          </div>
+        </v-slide-x-transition>
+
+        <computed-field
+          label="Condition"
+          hint="A caclulation to determine if this class can have levels added to it"
+          placeholder="Always allow"
+          :model="model.slotCondition"
+          :error-messages="errors.slotCondition"
+          @change="({path, value, ack}) =>
+            $emit('change', {path: ['slotCondition', ...path], value, ack})"
+        />
       </form-section>
     </form-sections>
   </div>
diff --git a/app/imports/ui/properties/viewers/ClassViewer.vue b/app/imports/ui/properties/viewers/ClassViewer.vue
index 26e4ffbd..44322a52 100644
--- a/app/imports/ui/properties/viewers/ClassViewer.vue
+++ b/app/imports/ui/properties/viewers/ClassViewer.vue
@@ -11,6 +11,7 @@
         :value="model.slotCondition && (model.slotCondition.value || model.slotCondition.calculation)"
       />
       <property-field
+        v-if="(model.slotTags && model.slotTags.length) || (model.extraTags && model.extraTags.length)"
         name="Tags Required"
         :cols="{cols: 12}"
       >