helpWanted improvements

docs/model-api.md

@@ -994,6 +994,7 @@ A physical DMX device.
     * [.comment](#Fixture+comment) ⇒ <code>boolean</code>
     * [.helpWanted](#Fixture+helpWanted) ⇒ <code>string</code> \| <code>null</code>
     * [.isHelpWanted](#Fixture+isHelpWanted) ⇒ <code>boolean</code>
+    * [.isCapabilityHelpWanted](#Fixture+isCapabilityHelpWanted) ⇒ <code>boolean</code>
     * [.links](#Fixture+links) ⇒ <code>object.&lt;string, array&gt;</code> \| <code>null</code>
     * [.rdm](#Fixture+rdm) ⇒ <code>object</code> \| <code>null</code>
     * [.physical](#Fixture+physical) ⇒ [<code>Physical</code>](#Physical) \| <code>null</code>
@@ -1128,6 +1129,11 @@ Create a new Fixture instance.
 ### fixture.isHelpWanted ⇒ <code>boolean</code>
 **Kind**: instance property of [<code>Fixture</code>](#Fixture)  
 **Returns**: <code>boolean</code> - True if help is needed in this fixture (maybe in a capability), false otherwise.  
+<a name="Fixture+isCapabilityHelpWanted"></a>
+
+### fixture.isCapabilityHelpWanted ⇒ <code>boolean</code>
+**Kind**: instance property of [<code>Fixture</code>](#Fixture)  
+**Returns**: <code>boolean</code> - True if help is needed in a capability, false otherwise.  
 <a name="Fixture+links"></a>
 
 ### fixture.links ⇒ <code>object.&lt;string, array&gt;</code> \| <code>null</code>

lib/model/Fixture.mjs

@@ -170,11 +170,18 @@ class Fixture {
    * @returns {boolean} True if help is needed in this fixture (maybe in a capability), false otherwise.
    */
   get isHelpWanted() {
-    if (!(`isHelpWanted` in this._cache)) {
-      this._cache.isHelpWanted = this.helpWanted !== null || this.allChannels.some(ch => ch.isHelpWanted);
+    return this.helpWanted !== null || this.isCapabilityHelpWanted;
+  }
+
+  /**
+   * @returns {boolean} True if help is needed in a capability, false otherwise.
+   */
+  get isCapabilityHelpWanted() {
+    if (!(`isCapabilityHelpWanted` in this._cache)) {
+      this._cache.isCapabilityHelpWanted = this.allChannels.some(ch => ch.isHelpWanted);
     }
 
-    return this._cache.isHelpWanted;
+    return this._cache.isCapabilityHelpWanted;
   }
 
   /**

ui/components/fixture-capability-table.vue

@@ -54,7 +54,8 @@
           :key="`cap-${index}-helpWanted`">
           <td colspan="4" />
           <td colspan="2">
-            <app-fixture-help-wanted
+            <app-help-wanted-message
+              type="capability"
               :context="cap.model"
               @helpWantedClicked="$emit(`helpWantedClicked`, $event)" />
           </td>
@@ -116,15 +117,15 @@ td, th {
 
 <script>
 import svg from '~/components/svg.vue';
-import fixtureHelpWanted from '~/components/fixture-help-wanted.vue';
+import helpWantedMessage from '~/components/help-wanted-message.vue';
 
 import CoarseChannel from '~~/lib/model/CoarseChannel.mjs';
 import Mode from '~~/lib/model/Mode.mjs';
 
 export default {
   components: {
     'app-svg': svg,
-    'app-fixture-help-wanted': fixtureHelpWanted
+    'app-help-wanted-message': helpWantedMessage
   },
   props: {
     channel: {

ui/components/fixture-help-wanted.vue → ui/components/help-wanted-message.vue

@@ -2,14 +2,30 @@
   <section class="help-wanted">
     <div class="information">
       <app-svg name="comment-question-outline" title="Help wanted!" />
-      <strong v-if="(context instanceof Fixture)">You can help to improve this fixture definition!</strong>
-      {{ context.helpWanted !== null ? context.helpWanted : `Specific questions are included in the capabilities below.` }}
+      <strong v-if="title">{{ title }} </strong>
+      <span v-html="description" />
     </div>
 
     <div class="actions">
-      <a href="#" class="only-js" @click.prevent="$emit(`helpWantedClicked`, context)"><app-svg name="comment-alert" class="left" /><span>Send information</span></a>
-      <a href="https://github.com/OpenLightingProject/open-fixture-library/issues?q=is%3Aopen+is%3Aissue+label%3Atype-bug" class="no-js" rel="nofollow"><app-svg name="bug" class="left" /><span>Create issue on GitHub</span></a>
-      <a :href="mailtoUrl" class="no-js"><app-svg name="email" class="left" /><span>Send email</span></a>
+      <a
+        v-if="type !== `plugin`"
+        href="#"
+        class="only-js"
+        @click.prevent="$emit(`helpWantedClicked`, context)">
+        <app-svg name="comment-alert" class="left" />
+        <span>Send information</span>
+      </a>
+      <a
+        href="https://github.com/OpenLightingProject/open-fixture-library/issues?q=is%3Aopen+is%3Aissue+label%3Atype-bug"
+        :class="{ 'no-js': type !== `plugin` }"
+        rel="nofollow">
+        <app-svg name="bug" class="left" />
+        <span>Create issue on GitHub</span>
+      </a>
+      <a :href="mailtoUrl" :class="{ 'no-js': type !== `plugin` }">
+        <app-svg name="email" class="left" />
+        <span>Send email</span>
+      </a>
     </div>
   </section>
 </template>
@@ -75,46 +91,81 @@
 <script>
 import svg from '~/components/svg.vue';
 
-import Fixture from '~~/lib/model/Fixture.mjs';
-import Capability from '~~/lib/model/Capability.mjs';
-
 export default {
   components: {
     'app-svg': svg
   },
   props: {
+    type: {
+      type: String,
+      required: true,
+      validate(type) {
+        return [`fixture`, `capability`, `plugin`].includes(type);
+      }
+    },
     context: {
-      type: [Fixture, Capability],
+      type: Object,
       required: true
     }
   },
-  data: () => {
-    return {
-      Fixture
-    };
-  },
   computed: {
     location() {
-      if (this.context instanceof Capability) {
+      if (this.type === `capability`) {
         const cap = this.context;
         const channel = cap._channel;
         return `Channel "${channel.name}" → Capability "${cap.name}" (${cap.rawDmxRange})`;
       }
 
       return null;
     },
+
     fixture() {
-      if (this.context instanceof Fixture) {
+      if (this.type === `fixture`) {
         return this.context;
       }
-      if (this.context instanceof Capability) {
+
+      if (this.type === `capability`) {
         return this.context._channel.fixture;
       }
 
       return null;
     },
+
+    title() {
+      if (this.type === `fixture`) {
+        return `You can help to improve this fixture definition!`;
+      }
+
+      if (this.type === `plugin`) {
+        return `You can help to improve this plugin!`;
+      }
+
+      return null;
+    },
+
+    description() {
+      if (this.type === `fixture`) {
+        if (this.fixture.helpWanted === null) {
+          return `Specific questions are included in the capabilities below.`;
+        }
+
+        if (this.fixture.isCapabilityHelpWanted) {
+          return `${this.fixture.helpWanted} Further questions are included in the capabilities below.`;
+        }
+      }
+
+      return this.context.helpWanted;
+    },
+
     mailtoUrl() {
-      const subject = `Feedback for fixture '${this.fixture.manufacturer.key}/${this.fixture.key}'`;
+      let subject;
+
+      if (this.fixture) {
+        subject = `Feedback for fixture '${this.fixture.manufacturer.key}/${this.fixture.key}'`;
+      }
+      else {
+        subject = `Feedback for ${this.type} '${this.context.key}'`;
+      }
 
       const bodyLines = [];
       if (this.location) {

ui/pages/_manufacturerKey/_fixtureKey.vue

@@ -86,8 +86,9 @@
         </ul>
       </app-labeled-value>
 
-      <app-fixture-help-wanted
+      <app-help-wanted-message
         v-if="fixture.isHelpWanted"
+        type="fixture"
         :context="fixture"
         @helpWantedClicked="helpWantedContext = $event" />
 
@@ -183,7 +184,7 @@
       </div>
     </section>
 
-    <app-fixture-help-wanted-dialog v-model="helpWantedContext" />
+    <app-help-wanted-dialog v-model="helpWantedContext" />
   </div>
 </template>
 
@@ -287,11 +288,11 @@ import categoryBadge from '~/components/category-badge.vue';
 import conditionalDetailsVue from '~/components/conditional-details.vue';
 import downloadButtonVue from '~/components/download-button.vue';
 import fixturePhysical from '~/components/fixture-physical.vue';
-import fixtureHelpWanted from '~/components/fixture-help-wanted.vue';
-import fixtureHelpWantedDialog from '~/components/fixture-help-wanted-dialog.vue';
 import fixtureMatrix from '~/components/fixture-matrix.vue';
 import fixtureWheel from '~/components/fixture-wheel.vue';
 import fixtureMode from '~/components/fixture-mode.vue';
+import helpWantedDialog from '~/components/help-wanted-dialog.vue';
+import helpWantedMessage from '~/components/help-wanted-message.vue';
 import labeledValueVue from '~/components/labeled-value.vue';
 
 import fixtureLinksMixin from '~/assets/scripts/fixture-links-mixin.mjs';
@@ -305,11 +306,11 @@ export default {
     'app-conditional-details': conditionalDetailsVue,
     'app-download-button': downloadButtonVue,
     'app-fixture-physical': fixturePhysical,
-    'app-fixture-help-wanted': fixtureHelpWanted,
-    'app-fixture-help-wanted-dialog': fixtureHelpWantedDialog,
     'app-fixture-matrix': fixtureMatrix,
     'app-fixture-wheel': fixtureWheel,
     'app-fixture-mode': fixtureMode,
+    'app-help-wanted-dialog': helpWantedDialog,
+    'app-help-wanted-message': helpWantedMessage,
     'app-labeled-value': labeledValueVue
   },
   mixins: [fixtureLinksMixin],

ui/pages/about/plugins/_plugin.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h1>{{ pluginName }} Plugin</h1>
+    <h1>{{ pluginData.name }} Plugin</h1>
 
     <div class="version-info hint">
       <template v-if="exportPluginVersion">Export plugin version {{ exportPluginVersion }}</template>
@@ -17,6 +17,11 @@
       </li>
     </ul>
 
+    <app-help-wanted-message
+      v-if="`helpWanted` in pluginData"
+      type="plugin"
+      :context="pluginData" />
+
     <div v-if="`fixtureUsage` in pluginData" class="fixture-usage">
       <h2 id="fixture-usage">Fixture usage</h2>
 
@@ -94,7 +99,12 @@
 <script>
 import plugins from '~~/plugins/plugins.json';
 
+import helpWantedMessage from '~/components/help-wanted-message.vue';
+
 export default {
+  components: {
+    'app-help-wanted-message': helpWantedMessage
+  },
   validate({ params }) {
     return decodeURIComponent(params.plugin) in plugins.data;
   },
@@ -107,15 +117,14 @@ export default {
     }
 
     const pluginData = await app.$axios.$get(`/about/plugins/${pluginKey}.json`);
+    pluginData.key = pluginKey;
 
     const fileLocationOSes = `fileLocations` in pluginData ? Object.keys(pluginData.fileLocations).filter(
       os => os !== `subDirectoriesAllowed`
     ) : null;
 
     return {
-      pluginKey,
       pluginData,
-      pluginName: pluginData.name,
       fileLocationOSes,
       exportPluginVersion: plugins.data[pluginKey].exportPluginVersion,
       importPluginVersion: plugins.data[pluginKey].importPluginVersion,
@@ -127,7 +136,7 @@ export default {
   },
   head() {
     return {
-      title: `${this.pluginName} Plugin`
+      title: `${this.pluginData.name} Plugin`
     };
   }
 };