Merge pull request #13 from zdravkov/master

Kendo ^3.0.0 update

package.json

@@ -8,7 +8,8 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@progress/kendo-theme-bootstrap": "^4.42.0",
+    "@progress/kendo-theme-bootstrap": "^5.0.1",
+    "@progress/kendo-vue-progressbars": "^3.0.5",
     "bootstrap": "4.6.0",
     "core-js": "^3.6.5",
     "rxjs": "6.4.0",
@@ -19,22 +20,22 @@
     "@progress/kendo-data-query": "1.5.5",
     "@progress/kendo-drawing": "1.15.0",
     "@progress/kendo-licensing": "1.2.1",
-    "@progress/kendo-vue-animation": "^2.6.2",
-    "@progress/kendo-vue-buttons": "^2.6.2",
-    "@progress/kendo-vue-charts": "^2.6.2",
-    "@progress/kendo-vue-data-tools": "^2.6.2",
-    "@progress/kendo-vue-dateinputs": "^2.6.2",
-    "@progress/kendo-vue-dropdowns": "^2.6.2",
-    "@progress/kendo-vue-excel-export": "^2.6.2",
-    "@progress/kendo-vue-grid": "^2.6.2",
-    "@progress/kendo-vue-inputs": "^2.6.2",
-    "@progress/kendo-vue-intl": "^2.6.2",
-    "@progress/kendo-vue-pdf": "^2.6.2",
-    "@progress/kendo-vue-popup": "^2.6.2",
-    "@progress/kendo-vue-layout": "^2.6.2",
-    "@progress/kendo-vue-dialogs": "^2.6.2",
-    "@progress/kendo-vue-form": "^2.6.2",
-    "@progress/kendo-vue-upload": "^2.6.2",
+    "@progress/kendo-vue-animation": "^3.0.5",
+    "@progress/kendo-vue-buttons": "^3.0.5",
+    "@progress/kendo-vue-charts": "^3.0.5",
+    "@progress/kendo-vue-data-tools": "^3.0.5",
+    "@progress/kendo-vue-dateinputs": "^3.0.5",
+    "@progress/kendo-vue-dropdowns": "^3.0.5",
+    "@progress/kendo-vue-excel-export": "^3.0.5",
+    "@progress/kendo-vue-grid": "^3.0.5",
+    "@progress/kendo-vue-inputs": "^3.0.5",
+    "@progress/kendo-vue-intl": "^3.0.5",
+    "@progress/kendo-vue-pdf": "^3.0.5",
+    "@progress/kendo-vue-popup": "^3.0.5",
+    "@progress/kendo-vue-layout": "^3.0.5",
+    "@progress/kendo-vue-dialogs": "^3.0.5",
+    "@progress/kendo-vue-form": "^3.0.5",
+    "@progress/kendo-vue-upload": "^3.0.5",
     "hammerjs": "2.0.8",
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",

src/components/detail/ItemDetails.vue

@@ -4,7 +4,7 @@
       <div class="form-group row">
         <label class="col-sm-2 col-form-label">Title</label>
         <div class="col-sm-10">
-          <kendo-input style="width:100%" v-model="itemForm.title" @blur="onBlurTextField" name="title"/>
+          <kendo-input v-model="itemForm.title" @blur="onBlurTextField" name="title"/>
 
         </div>
       </div>
@@ -12,19 +12,18 @@
       <div class="form-group row">
         <label class="col-sm-2 col-form-label">Description</label>
         <div class="col-sm-10">
-          <textarea
-            class="k-textbox"
+          <kendo-textarea
             v-model="itemForm.description"
             @blur="onBlurTextField"
             name="description"
-            style="width:100%; height:60px;"
-          ></textarea>
+            style="height:60px;"
+          ></kendo-textarea>
         </div>
       </div>
       <div class="form-group row">
         <label class="col-sm-2 col-form-label">Item Type</label>
         <div class="col-sm-10">
-           <kendo-dropdownlist
+           <kendo-dropdownlist 
             v-model="itemForm.typeStr"
             :data-items="itemTypesProvider"
             @change="onNonTextFieldChange"
@@ -32,7 +31,7 @@
             name="itemType"
           >
             <template v-slot:itemTypeTemplate="{props}">
-              <div @click="(ev) => props.onClick(ev)">
+              <div @click="(ev) => props.onClick(ev)" :class="props.itemClass">
                 <img :src="itemTypeIconSrc(props.dataItem)" class="backlog-icon" />
                 <span>
                   {{ props.dataItem }}
@@ -81,7 +80,7 @@
             name="itemPrority"
           >
             <template v-slot:itemPriorityTemplate="{props}">
-              <div @click="(ev) => props.onClick(ev)">
+              <div @click="(ev) => props.onClick(ev)" :class="props.itemClass">
                 <span :class="indicatorClass(props.dataItem)">{{ props.dataItem }}</span>
                </div>
             </template>
@@ -154,7 +153,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref, toRefs, nextTick } from "vue";
+import { defineComponent, PropType, ref, toRefs } from "vue";
 import { Observable } from "rxjs";
 
 import { PtItem, PtUser } from "@/core/models/domain";
@@ -167,8 +166,8 @@ import {
   PtItemDetailsEditFormModel,
   ptItemToFormModel,
 } from "@/shared/models/forms/pt-item-details-edit-form";
-import { DropDownListVue3 as DropDownList, DropDownListChangeEvent } from '@progress/kendo-vue-dropdowns';
-import { Input, SliderVue3 as Slider, SliderChangeEvent } from '@progress/kendo-vue-inputs';
+import { DropDownList, DropDownListChangeEvent } from '@progress/kendo-vue-dropdowns';
+import { Input, Slider, TextArea, SliderChangeEvent } from '@progress/kendo-vue-inputs';
 import { Upload, UploadOnStatusChangeEvent } from '@progress/kendo-vue-upload';
 import { PtItemType } from "@/core/models/domain/types";
 import { PriorityEnum } from "@/core/models/domain/enums";
@@ -177,6 +176,7 @@ import { getIndicatorClass } from '@/shared/helpers/priority-styling';
 export default defineComponent({
   name: "PtItemChitchat",
   components: {
+    'kendo-textarea': TextArea,
     'kendo-input': Input,
     'kendo-dropdownlist': DropDownList,
     "kendo-slider": Slider,
@@ -222,7 +222,6 @@ export default defineComponent({
     };
 
     const onNonTextFieldChange = async () => {
-      await nextTick();
       notifyUpdateItem();
     };
 

src/views/BacklogPage.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div
+    <div 
       class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3"
     >
       <h1 class="h2">Backlog</h1>
@@ -12,7 +12,8 @@
         </div>
       </div>
     </div>
-    <grid
+    <grid 
+       
       :data-items="gridData"
       :columns="columns"
       @rowclick="onSelectionChange"

src/views/DashboardPage.vue

@@ -24,7 +24,7 @@
             :style="{width: '250px'}"
           >
             <template v-slot:userFilterItemTemplate="{props}">
-              <div class="row k-item" style="margin-left: 5px;" @click="(ev) => props.onClick(ev)">
+              <div :class="{ row: true, ...props.itemClass}" style="margin-left: 5px;" @click="(ev) => props.onClick(ev)">
                 <img class="li-avatar rounded" :src="props.dataItem.avatar" />
                 <span style="margin-left: 5px;">{{ props.dataItem.fullName }}</span>
               </div>
@@ -32,9 +32,9 @@
           </kendo-combobox>
 
           <kendo-buttongroup>
-            <kendo-button :look="'flat'" :icon="'calendar'" @click="onMonthRangeTap(3)">3 Months</kendo-button>
-            <kendo-button :look="'flat'" :icon="'calendar'" @click="onMonthRangeTap(6)">6 Months</kendo-button>
-            <kendo-button :look="'flat'" :icon="'calendar'" @click="onMonthRangeTap(12)">1 Year</kendo-button>
+            <kendo-button :fill-mode="'flat'" :icon="'calendar'" @click="onMonthRangeTap(3)">3 Months</kendo-button>
+            <kendo-button :fill-mode="'flat'" :icon="'calendar'" @click="onMonthRangeTap(6)">6 Months</kendo-button>
+            <kendo-button :fill-mode="'flat'" :icon="'calendar'" @click="onMonthRangeTap(12)">1 Year</kendo-button>
           </kendo-buttongroup>
         </div>
       </div>
@@ -63,7 +63,7 @@
                   :axis-base-unit="'months'"
                 />
               </ChartCategoryAxis>
-              <ChartLegend :position="'bottom'" />
+              <ChartLegend :position="'bottom'"  />
               <ChartSeriesDefaults :type="'column'" :stack="true" :gap="0.06" />
               <ChartSeries>
                 <ChartSeriesItem