Add video helpers on forms (#737)

addon/components/fd-editing-panels/fd-association-editing-panel-link.js

@@ -13,4 +13,12 @@ export default Component.extend(FdReadonlyModeMixin, {
     @default undefined
   */
   model: undefined,
+
+  /**
+    Url video help.
+
+    @property urlHelp
+    @type String
+  */
+  urlHelp: 'https://www.youtube.com/embed/G9zoWWLCwuk'
 });

addon/components/fd-editing-panels/fd-composition-editing-panel-link.js

@@ -13,4 +13,12 @@ export default Component.extend(FdReadonlyModeMixin, {
     @default undefined
   */
   model: undefined,
+
+  /**
+    Url video help.
+
+    @property urlHelp
+    @type String
+  */
+  urlHelp: 'https://www.youtube.com/embed/G9zoWWLCwuk'
 });

addon/components/fd-sheets/fd-base-sheet.js

@@ -1,8 +1,9 @@
 import Component from '@ember/component';
 import FdSaveHasManyRelationshipsMixin from '../../mixins/fd-save-has-many-relationships';
 import { inject as service } from '@ember/service';
-import { isBlank } from '@ember/utils';
+import { isBlank, isNone } from '@ember/utils';
 import { assert } from '@ember/debug';
+import { getOwner } from '@ember/application';
 
 export default Component.extend(FdSaveHasManyRelationshipsMixin, {
 
@@ -72,6 +73,21 @@ export default Component.extend(FdSaveHasManyRelationshipsMixin, {
    */
   readonlyMode: true,
 
+  /**
+    Get url video help.
+
+     @method getHelpUrl
+     @param {String} componentName Component name.
+  */
+  getHelpUrl(componentName) {
+    let component = getOwner(this).lookup(`component:${componentName}`);
+    if (isNone(component)) {
+      return;
+    }
+
+    return component.get('urlHelp');
+  },
+
   init() {
     this._super(...arguments);
 

addon/components/fd-sheets/fd-class-sheet.js

@@ -90,6 +90,23 @@ export default FdBaseSheet.extend({
     }
   }),
 
+  /**
+    Url video help.
+
+    @method urlVideoHelp
+  */
+  urlVideoHelp: computed('componentNamePart', function() {
+    let componentNamePart = this.get('componentNamePart');
+    if (isNone(componentNamePart)) {
+      return;
+    }
+
+    let componentName = `fd-editing-panels/fd-${componentNamePart}-editing-panel`;
+    let url = this.getHelpUrl(componentName);
+
+    return url;
+  }),
+
   /**
     Opening sheet.
 

addon/components/fd-sheets/fd-diagram-sheet.js

@@ -122,6 +122,37 @@ export default FdBaseSheet.extend(
     }
   }),
 
+  /**
+    Type diagram.
+
+    @method diagramType
+  */
+  diagramType: computed('selectedValue.data.constructor.modelName', function() {
+    let type = this.get('selectedValue.data.constructor.modelName');
+    if (isNone(type)) {
+      return undefined;
+    }
+
+    return type.split('-').pop();
+  }),
+
+  /**
+    Url video help.
+
+    @method urlVideoHelp
+  */
+  urlVideoHelp: computed('diagramType', function() {
+    let diagramType = this.get('diagramType');
+    if (isNone(diagramType)) {
+      return;
+    }
+
+    let componentName = `fd-uml-diagram-toolbars/fd-${diagramType}-toolbar`;
+    let url = this.getHelpUrl(componentName);
+
+    return url;
+  }),
+
   /**
     Opening sheet.
 

addon/components/fd-sheets/fd-edit-diagram-object-sheet.js

@@ -145,6 +145,24 @@ export default FdBaseSheet.extend({
     }
   }),
 
+  /**
+    Url video help.
+
+    @method urlVideoHelp
+  */
+  urlVideoHelp: computed('objectEditFormNamePart', function() {
+    let componentNamePart = this.get('objectEditFormNamePart');
+    if (isNone(componentNamePart)) {
+      return;
+    }
+
+    let isLink = this.get('isLink') ? '-link' : '';
+    let componentName = `fd-editing-panels/fd-${componentNamePart}-editing-panel${isLink}`;
+    let url = this.getHelpUrl(componentName);
+
+    return url;
+  }),
+
   /**
     Opening sheet.
 

addon/components/fd-sheets/fd-sheets-tool-bar.js

@@ -84,6 +84,14 @@ export default Component.extend(FdReadonlyProjectMixin, {
   */
   sheetButtons: undefined,
 
+  /**
+    Url video helper.
+
+    @property sheetHelper
+    @type String
+  */
+  sheetHelper: undefined,
+
   /**
     Object visible button.
 
@@ -141,11 +149,11 @@ export default Component.extend(FdReadonlyProjectMixin, {
   */
   isNewModel: false,
 
-  /**	
-    Current sheet content value.	
-    @property contentSheetValue	
-    @type Object	
-  */	
+  /**
+    Current sheet content value.
+    @property contentSheetValue
+    @type Object
+  */
   contentSheetValue: undefined,
 
   /**
@@ -330,7 +338,7 @@ export default Component.extend(FdReadonlyProjectMixin, {
 
       classDiagrams.pushObjects(cadDiagramsCurrentStage.filter(function (diagram) {
         if (!isNone(diagram.caseObjectsString)) {
-          return diagram.caseObjectsString.includes("Class:(" + currentClassName + ")"); 
+          return diagram.caseObjectsString.includes("Class:(" + currentClassName + ")");
         }
       }));
 
@@ -341,7 +349,7 @@ export default Component.extend(FdReadonlyProjectMixin, {
         on: 'click',
         position: 'bottom right',
         target: event.currentTarget,
-      }).popup('show');      
+      }).popup('show');
     },
 
     /**

addon/components/fd-uml-diagram-editor.js

@@ -198,15 +198,6 @@ FdPopupActions, {
     return this.get('readonlyMode') && !this.get('model.isNew');
   }),
 
-  diagramType: computed('model.constructor.modelName', function() {
-    let type = this.get('model.constructor.modelName');
-    if (isNone(type)) {
-      return undefined;
-    }
-
-    return type.split('-').pop();
-  }),
-
   init() {
     this._super(...arguments);
 

addon/components/fd-uml-diagram-toolbars/fd-cad-toolbar.js

@@ -4,5 +4,13 @@ import layout from '../../templates/components/fd-uml-diagram-toolbars/fd-cad-to
 export default Component.extend({
   layout,
 
-  tagName: ''
+  tagName: '',
+
+  /**
+    Url video help.
+
+    @property urlHelp
+    @type String
+  */
+  urlHelp: 'https://www.youtube.com/embed/tQLDUXOnxnA'
 });

addon/components/fd-uml-diagram-toolbars/fd-ucd-toolbar.js

@@ -4,5 +4,13 @@ import layout from '../../templates/components/fd-uml-diagram-toolbars/fd-ucd-to
 export default Component.extend({
   layout,
 
-  tagName: ''
+  tagName: '',
+
+  /**
+    Url video help.
+
+    @property urlHelp
+    @type String
+  */
+  urlHelp: 'https://www.youtube.com/embed/VcPrY-FFjGI'
 });

addon/components/fd-view-helper.js

@@ -0,0 +1,41 @@
+import Component from '@ember/component';
+import $ from 'jquery';
+import layout from '../templates/components/fd-view-helper';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+
+  /**
+    Url video.
+
+    @property url
+    @type String
+  */
+  url: '',
+
+  /**
+    Position popup.
+
+    @property position
+    @type String
+  */
+  position: 'center',
+
+  actions: {
+    /**
+      Open popup with video helper.
+
+      @method actions.viewHelper
+    */
+    viewHelper(event) {
+      let position = this.get('position');
+      let popup = $(event.currentTarget.nextElementSibling);
+      popup.popup({
+        on: 'click',
+        position: `bottom ${position}`,
+        target: event.currentTarget,
+      }).popup('show');
+    }
+  }
+});

addon/locales/en/components/fd-view-helper.js

@@ -0,0 +1,3 @@
+export default {
+  'video-help-title': 'Video help'
+};

addon/locales/en/translations.js

@@ -153,6 +153,7 @@ import FdApplicationModelForm from './forms/fd-application-model';
 import FdArchitectureForm from './forms/fd-architecture';
 import FdGisSubsystem from './components/fd-gis-subsystem';
 import FdColorSettingPanel from './components/fd-color-setting-panel';
+import FdViewHelperPanel from './components/fd-view-helper';
 
 const translations = {};
 $.extend(true, translations, EmberFlexberryTranslations);
@@ -474,6 +475,7 @@ $.extend(true, translations, {
     'fd-modal-message-box': FdfModalMessageBox,
     'fd-gis-subsystem': FdGisSubsystem,
     'fd-color-setting-panel': FdColorSettingPanel,
+    'fd-view-helper': FdViewHelperPanel
   }
 
 });

addon/locales/ru/components/fd-view-helper.js

@@ -0,0 +1,3 @@
+export default {
+  'video-help-title': 'Видео подсказка'
+};

addon/locales/ru/translations.js

@@ -152,6 +152,7 @@ import FdApplicationModelForm from './forms/fd-application-model';
 import FdArchitectureForm from './forms/fd-architecture';
 import FdGisSubsystem from './components/fd-gis-subsystem';
 import FdColorSettingPanel from './components/fd-color-setting-panel';
+import FdViewHelperPanel from './components/fd-view-helper';
 
 const translations = {};
 $.extend(true, translations, EmberFlexberryTranslations);
@@ -473,6 +474,7 @@ $.extend(true, translations, {
     'fd-modal-message-box': FdfModalMessageBox,
     'fd-gis-subsystem': FdGisSubsystem,
     'fd-color-setting-panel': FdColorSettingPanel,
+    'fd-view-helper': FdViewHelperPanel
   }
 
 });

addon/templates/components/fd-sheets/fd-class-sheet.hbs

@@ -8,6 +8,7 @@
       readonlyMode=readonlyMode
       isNewModel=selectedValue.data.isNew
       sheetButtons=(array 'delete' 'save' 'share' 'dependencies')
+      sheetHelper=urlVideoHelp
       toolbarVisible=(not isAddMode)
       saveSheet=(action 'save')
       deleteSheet=(action 'delete')

addon/templates/components/fd-sheets/fd-diagram-sheet.hbs

@@ -8,6 +8,7 @@
       readonlyMode=readonlyMode
       isNewModel=selectedValue.data.isNew
       sheetButtons=(array 'delete' 'save' 'print' 'share' 'steps' 'copy')
+      sheetHelper=urlVideoHelp
       toolbarVisible=(not isAddMode)
       saveSheet=(action 'save')
       deleteSheet=(action 'delete')
@@ -73,6 +74,7 @@
           model=selectedValue.data
           emptyReferenceCountItems=emptyReferenceCountItems
           sheetComponentName=sheetComponentName
+          diagramType=diagramType
           readonlyMode=readonlyMode
           openEditFormAction=(action "openNestedSheet")
         }}

addon/templates/components/fd-sheets/fd-edit-diagram-object-sheet.hbs

@@ -8,6 +8,7 @@
       readonlyMode=readonlyMode
       isNewModel=selectedValue.isNew
       sheetButtons=(array 'save' 'share' (if (not isLink) 'dependencies'))
+      sheetHelper=urlVideoHelp
       saveSheet=(action 'save')
       contentSheetValue=selectedValue
     }}

addon/templates/components/fd-sheets/fd-sheets-tool-bar.hbs

@@ -1,4 +1,10 @@
 <div class="fd-sheet-toolbar">
+  {{#if sheetHelper}}
+    {{fd-view-helper
+      url=sheetHelper
+      position='right'
+    }}
+  {{/if}}
   {{#if customButtonVisible}}
     <button class="ui button" {{action 'customButtonAction'}}>
       {{t customButtonTitle}}
@@ -61,7 +67,7 @@
       </button>
       <div class="ui flowing popup" data-variation="wide">
         {{fd-attribute-table
-          tableView=tableViewDiagrams 
+          tableView=tableViewDiagrams
           model=classDiagrams
           edit=(action 'openDependentDiagram')
           toolbarVisible=false

addon/templates/components/fd-sheets/fd-view-sheet.hbs

@@ -8,6 +8,7 @@
       readonlyMode=readonlyMode
       isNewModel=selectedValue.isNew
       sheetButtons=(array 'delete' 'save' 'share')
+      sheetHelper='https://www.youtube.com/embed/MD89A4qXZ0o'
       saveSheet=(action 'save')
       deleteSheet=(action 'delete')
       contentSheetValue=selectedValue

addon/templates/components/fd-view-helper.hbs

@@ -0,0 +1,6 @@
+<button class="ui icon button help" onclick={{action 'viewHelper'}} title={{t "components.fd-view-helper.video-help-title"}}>
+  <i class="icon-fd-help icon"></i>
+</button>
+<div class="ui flowing popup" data-variation="wide">
+  <iframe width="560" height="315" src={{url}} frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>

app/components/fd-view-helper.js

@@ -0,0 +1 @@
+export { default } from 'ember-flexberry-designer/components/fd-view-helper';