From 82e8dfa3b0eece7cdac45dea0f1360cc18a7d791 Mon Sep 17 00:00:00 2001 From: Deepak Paul Date: Tue, 18 Jul 2017 21:55:58 +0530 Subject: [PATCH] [ADF-920] Process Header Component - Refactoring (#2073) [ADF-920] Process Header Component - Refactoring --- .../ng2-activiti-processlist/README.md | 9 +- ...adf-process-instance-header-attachment.png | Bin 0 -> 14197 bytes .../ng2-activiti-processlist/index.ts | 3 +- .../process-instance-header.component.css | 10 +- .../process-instance-header.component.html | 23 +--- .../process-instance-header.component.spec.ts | 122 +++++++++++------- .../process-instance-header.component.ts | 76 +++++------ 7 files changed, 128 insertions(+), 115 deletions(-) create mode 100644 ng2-components/ng2-activiti-processlist/docs/assets/adf-process-instance-header-attachment.png diff --git a/ng2-components/ng2-activiti-processlist/README.md b/ng2-components/ng2-activiti-processlist/README.md index 7bb510cfcb..d802be2613 100644 --- a/ng2-components/ng2-activiti-processlist/README.md +++ b/ng2-components/ng2-activiti-processlist/README.md @@ -24,6 +24,7 @@ - [Process Instance Details Header component](#process-instance-details-header-component) * [Properties](#properties-4) * [Events](#events-4) +- [ProcessInstanceModel](#processinstancemodel) - [Process Instance Tasks component](#process-instance-tasks-component) * [Properties](#properties-5) * [Events](#events-5) @@ -239,19 +240,17 @@ This is a sub-component of the process details component, which renders some gen processInstance="localProcessDetails"> ``` +![adf-process-instance-header](docs/assets/adf-process-instance-header-attachment.png) ### Properties | Name | Type| Description | | --- | --- | --- | -| processInstance | string | (**required**): Full details of the process instance to display information about | -| showDiagram | boolean | If the value is true the button show diagram is shown | +| processInstance | [ProcessInstanceModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-processlist/src/models/process-instance.model.ts) | (**required**): Full details of the process instance to display information about | ### Events -| Name | Description | -| --- | --- | -| showProcessDiagram | Raised when the show diagram button is clicked | +No events ## Process Instance Tasks component diff --git a/ng2-components/ng2-activiti-processlist/docs/assets/adf-process-instance-header-attachment.png b/ng2-components/ng2-activiti-processlist/docs/assets/adf-process-instance-header-attachment.png new file mode 100644 index 0000000000000000000000000000000000000000..c6a876471a58d971b63bada4f313242ca16804cd GIT binary patch literal 14197 zcmb_@bwE~8o9CrVxODSlh zqN2{Ns4auPl6uJMduTaZd3c+-SwhxM&W@Js?iOyAmQLO?w1u4i#YWrmE zFZdd1>pY+wB@A-K4)!6^Dc>SKL9!f|!T%;tK`^dPfYBH3_9I-8xtp)-8&6Q(ErFo2 z26{KUq!t%3s=8|^T^q`XytX!8G|me|>-R5~Z|_N-;qVDGe_6UHk+3>&JE;G4xt`^> z5;)7<^9+^RXk@hkAuKVKn2<^e)%pvBDXGk56Cd}mxIu3OhuQm*o zIx7!e26g4pfArB?2FEgO77KIps_JUEru*yN&NrB=$3AL>7Ga6RCiv*;a&kT6MOuf8 z&4$%oqob}D2MbqMS0dgA9&T=Ad^RIVhC*I@)8QDzEms?vR$eKh*kiQESLYGV?2V=; z>UC+~Pc(QwRTxF?OHc|oo@WZrV!1AKkLAsF@GRIg=CpkyUk^V@+qYkzm5KpNKEMXFzJxs@~P4! zy1&0);^9_{C3)wwu~eQ*|9fWW&%uJ z2nnBvy*~T1KUdyzy#v0i(PLXvTbqD@;MJ>FYnz)FXW|%RJ6(8njWoYex`?HndOV$< z&;6Q)&o3+#H1CQ8-}_=IXlZ!3-0HiI`rix6t*A&G-n6foO-oDjJ>4jpuzUMlTUU3o zCEx}ukbbgB zR#v*&+HNOE++WT)w=OjM3G(r2vm|T6y}q}}Lss^I5_3YfQ!9d4x**stBX=QcM31C; zn8KXd5~ZLU4E_BP*9<-_9gGOBy{|G@2pc_D2I(d*%^m^TmawQt^fRJt<%HOOTU4&2 z6TqU7=4Gb~x~QEqYHFxeNQlY}YKjAH{=9wr7OdRPWLai;d3j;sCRq4J&)tp9&CS)- z)s+=jP)A_xiY<&@L$)=S7rLb)i+JYsO$Pnd!5Hywnz0fV1$&Nl3};XgHO>te2WW} zGD^{ESGvuQGx+U)udZ7E%m8aG8gze)gh3=)rDA8dv(V@b3fI=m3~t%v;X1XX#6C&* zY$MYdJ-lOmAob?@8XTVTfa^0j(^s$fTz|`8V<#~1%hr8t3K@m-VTC@-;j(s2x^i9h z2Kc0j=G*ZWVIm^cm6aL%vgTTof^gE>HDlJsdiD+DjbFF~VqnogiTx|qGc1hq23ko$ z*nR!|cI_cZg{s**zY2%jLs2+iHtG90zIZ_j(=!REv5Hb>a;V7m+Mk^WG)%%8FEgw) z3A|bdt1AwkAp{9SE|w%O^Y`1$$UdT8A}S}iKPoT<0h$xCn$+A4LE%dro4hYChJxyh z1|y^<>H>6_ieTAmD*_C1d{=hv8S1cjN{N?7Mx}lWdD18gHJK+TZsHFsusXf+mypLP z14I_LaeH;jZ*T8hl&Qu{pkq>9TFSP7QKmZw3R$N_m!6R^=(w9W=>BT6(xNvb@MXRV zS7pa$fa@8Z#}c_QvxZ*z1XIpN@rPS?Y;0^TtzWCX2?$%WHTGU! zf4*pZ%Gb2@_rKM;#Oc#|wLm$>*G1GmM_`VTmL>TaFPs<;kzA(k##{(#FJWQ6Oh*f5jWdD20hS zSTT)d=w-TrH7E}6uC!&J^ZQGe>!Z&{+}2`pWt|_Dj;hM|Gie>AMWU@3IHT5bD!b9= zP}~-J3c+Y^F_o|_z|NN6{*k08H$XP-sZ>FMEB5y z@0((SE(d0hO8Y-OhW_n|mChgT9+-6CXGC_C$$ZYv3JX$fWPkg_dI$ z&X@py9+WNQO2fes-@CevmkxJ3{BS$`Q8s3Ne%@d)!AfxP^404Thpxl6XpyvYjqHd+ zx`$W@_fM>y6-T%*%4&k?&)$mrLe5e$f`DUD+Y#)A3ybYX;D$Us`$!fe&54gF1_lNvCnqCgVeR5;`-x&5 zTKRZoB_%(jNf8*R+q;ti&Y-*V)bQ}|!oos*HYd$hfALnZUBpdhpl`UX^?_3HI$Sg^ z(40{F?0lrZJ5{d7M3Ccu5*77B!g}p35zhgVuRu!Svfquhk2d>Bj@=NpFS^0m^GQ%W z4Gj$xLN3d{yJJ#0O`N!PjaiakHouR%fFF^Nh)DH=Xgc~xHC5OW(_pMjn2NNTB)hx} zUq^Kwgh*3|6<)4_;Ao`Qo*}blL!Ht#(J+ZlFBQLR!!a)U+|mWb3+@JmmWu4hMV@%n z49%ran`-1Pvwl+8V?tACDld&S$Zk_9qolyQ9aKN!@(WMN@pB;@202l}A( z6|}at7Hucd_A8X&4pg*#&WlPTT9KfBtj~+0aas|;q!~{|wK=*F!+U&1S{E-nF1mNz zw(r4I;*C8UswFplP5N=e?Cqn*uLzKGnM(IdUamTU!Ie-uqzwsf2_C3yUHZ4)}?t;*}hgR~c2a5)})0t%n>y z8RzA#bcADMzGma(ERVux^a8!L*Q>AFZkd!AyhtkR>GOIY0HfiYVco}PYlIA?fZz}>|~zv>klOmNA+y1mp}TDntB;?Cn|20x|$ zQG2FyOL|TY<&!630O4}BTz))`8_s&l%faCUP|0EQ#mm6JK+v3jay0D9@c%eV5J^c& z(lRqMQ&x^mPS&ZGU>kenCB0IGDd|mhfCRx~)G6VRL^wGmo@ivn!Px5JyJ>4>_it#o z9+{VNcM$BrBQik9I*pAdl_D5Q>yUa@RHDcPQY3Z}4rzb!)Bytb=_5S0WhS_9eN7?e zNy-3#!0rz79;{cyQq}DBEbRiuwJy-7d`0Eii2$14(ZZ5v%HTEXOaH+~J+DlJ1RmQ+ zz0_1;dImlX07&KAw;HCV%Zb#|+AI@bKZbH79@Z+@jlKL5D8vlrbx!8FzIRgSq3&?Z z3m1kntFIxAhdFme6S4v*5*ix1zh8pa3icCRp5=yV3s_VlA|fm-JNI`t2*{5vPlqMk z-P{2AU|lE%orI2&k+J_C$lsApqBV& z_CepeJPdl6tF~4v(k8>f`O8~G8o>eHu9^e9QT%4F8o>aY7!FESkwvdZ}kzZVpsKq3}!^?SV`iy1hRbb7Yq33GCr;=TSQK zu%PJ2h+Wk61k0U6SQu~G)@A}x^DFgN^YiojUR61_Tzzh@Sqge+R%XCJM=vfd1vKjK z<|;E}ig>aIi@}#rz@MzW+L_|c?)SS;$Ta#L}-d~p}GZJn4JjNljz#jyka$9LMcy49e~g8V_Ib%zzRkwHO*2GH&!zQBkps1r!jBj&$YE z_A8git32rrzdoxJ6cqUV*(-V~?2A0KZ?$Tkw)3{Yd*)ls-aJANiBgPd=TsGKEvZE; z^K@#k!>MBr32VdP;)?;Sd!3rQ4IBY~ei64+Zp^u+C`@d#R7$R%v>hUH;=VDySZ=SU zZ!nj-REczLkc-NA7)&(0qzF2*#CS&4|G^?VGwhyonAHAK7pxb3pXG4kV9wZ z=Y`7Y@XrL{0f5bU^ym@z`ncFw2Gy*sm6g%UXk~-1bWc7Z9Hktz{_HDFRbj0PE=fNi z%!*5VivktmQ9m(C-oQfhpEotKPZbZPCWeQ#JxVd4ONC#b_Cy={v}}$J!E4pcLC>u4 z+)P4EoKc}*#OlYcv`?-f z&KA~5t$0j9;bdbY1TZtQpU~^Gtz=fczW@}}H^6bv{uQnAR}yD9dGv@Z(m1N`TW}V( z4X!I5rrM=F>WX71eWeR2iU@A5j53zdS|WCs(Bnq8V!WKw>bD)Ce$8jrV?=y;PNf0JBHZgkm_wV0ZT3S?9RYBuoA9TV-M>lBk_XT}O?vwB7PeE|zfWid( z3p#{7Y_3k$8@&&axd1Qp$7D8)rZMVqWHwO+g^QVMr&mzVi~i~m&j z3r-zA8O1o^7DMP&cF=TpJ0^xI4HZc@bm>BZD*wzOIL-nGCr(2V6{~Q&4DBGLXxM=wDrEg~D3J3>NKua3Qm%G1QO#lO!jEsyzBG8B`7fy)U(b%w_qt;`4 ztf@(KfxT>cdK$Fh?O%n0Md4tUN4$Bnv%T%O(2!h=O+6g`od;gnWw{MJ47d|E1Z1hp zwIsEy?Ci|(4)E#Dj*ic&+1GVwWYqa(wyZ!UJi+_83HP6&7!JD%h*~(zR9U*!`|nLx z)}$^0#sbQ6s(Es1DrmoE>J29OXFnb`>U3rG#V;vmL!3yUwUUVewP19TPv`0OE zg4O0XP$&H#?aJM+=?Kt_wQ$ezrIK-8emc+OLi%Odxx2lMgpB;Tpa7t|GULYYfH1O` zi+_nv~HTO8nswbX^%C<)WS^fM|;`}JeOGe^wK%s?sx1qZka zK+`}!YzS{a90%&m)ZW-7>Xl)wldQZvI7H`rGwx?wqx^XmfWv?b=n&HtW)DI)_~_w( z{`_gM$?fRq0FMtoV{v-ZcCYD%qN8k_i#Tl zc&(NDuGor6jp(CR?kj{>2ki$&Y{@k*2jZ?6Pr4k(S(q|3@N4=WBD52cy=-}h^_@z4 z{#*dr0Q}J4>G=!tzXP3+mXFT^9OR9SjRu@{%YhWfr50l<8~`evfB^efL5iRZynG&Z zdwsrZPqXG}k<-y3C7x40VF%F6bvLoe`_$B3b5sB-9s}hT6eG}jkWf%gul&VxC`m{z z!>(4lV~F)i^)(C($S5g?Nls5s{lJ94$H%`oT#^8U+Booqi^~yUeJA%fhY|n6IMqwk zH>q`F2vaI}VAs$XN~ffLjlZT))(s6W3Z%%gd{5L=22ll~d{6ICje5+^r?_Qk9?V*L z2_xbjolZeQqQYqpc;wGUCSK?Nl1iq4N|81TLA3W$z|`cVfP_TrTig>sF+pn>Zhg2r1QG|pO$AD+{jaKk#C&$< zk*+M@xuYE}l{aeBa(`_P{t6nhyl_%xCTr4<2CscPM@ROgA0FjuIpRM_<{G`rl^MXV zoED{^OHEFCjpZxER)W)cFjHMvT3TvbKe@&|v~NwBV;#%=*-XO8@{~iDU2nl^Rkzx; zcUla9h6|_4DEpbWjQ~(M36i&@JYg=K-R*M{I3UsD);*&X@W)s3Ya_8xZody489C;2 zIA{3YBCLJCTC=yjP|RO*x}g*9@PdlGCCbva_;jPTYKais=?am&B_nQb*vXdUS4C)J z`dpw_0zb>x{fa=i!*4qxuf}4f+Tt6RLmv0JekUDo&pQSI(f8m6i%yIE3=|eY_9PZ; zyApfZ6MNaHpUri|ZcnUqXj3iH=5)OdoX(>h%zvqJ6Izresu=!c`0(ZWd5%a~5@tEC z-8d6PLScD%&{`iZ1VrD2m>8w!&$j?BRxD@$+=!NT4QSawcwPyK6T#^&Esvbe+J~1n~TF*Aa{0wP&~ci~50v66Eff+Oj^z-@6nIxp|fBu+D* zTox9Y74DEkgih`&5RD?*qOp%wW+|DT1+LQUQ{r`GMT9BUeMP*icqiK67blKT@-?L7 z6sM#EUhnx8WV%3H{nFmXKr=p3$;Bh|Q~r+3tCH$%5C>T&#DzqyLYpm zl?R|90%f&naRJO4&E2|a zo-eW$rRTCvbq>s~jUR`iV(7Uvs7)}QLKLx>Wa8>`Q(zh-IIyJ-Bv4AUfDxV{vIHco z-NojcW5eFRC$P7-hXDPuf3*pK6k6N# zG)ddqkEB}1x$iD39a&jfKzaC$b}{>{Zx)es!XvQvxC9xzdG~aGj znO=FY_`ZgiSfXjSlp~}AV(^C&XH6?Hb7eae{Jo(R-kn7m&W;uyf5FDd048<;L<>EE z$^QSUn>fZ`r5HaaD^r?`onfpE4Fa*Dcg-t@`GNP(?-@XP3mSd!^mZyHKSwT z4*K@7h4`tgv&dG$<@+x`#lCaQcDR)Po+TdeT3>(KIwwHDtRoD#WQBlDeg4eAz#t$l zb-(m*@BRGwb5~ba@UTD&`uOQnt<%EJ%1WhKCvs5G1CXKszS-Wv^&9lGS&+4flXC|U z4d`isz?0klCGVYU*7>HpyBjTB%9w=@0{SW#nQ3VxtgO*E&bYDys&K5kfwX(q2q=lA zVHl999^0OnS$FR_-(wv!$#X7A_b1d(k80rGPrKnUG>^t%zo%&-;LwFAQ#^Y)h0_(7 z0x`X6P=5K>4REvKUb#(Q$d8bA>05*`k0YTfLmw7RC1Wnxg!-tF^X0H3l;Fh?4VcIq zWa%qltdxz_71~%(cRFglmND!y5&dmm;|6sXfuTPkinX&)WG;uSDOC^#QueW+K<%gX>T{gsP><+?jw^b5GK zpp7g6wH5&d>#r#S;42Y&IIUc)kjGY{?%dInA>f$-8i@(3tULyQ>@UWeny;o5d+lLl zG@r(8VQ1yuaC-@6#pgi(HC!|WoW7B=gDFK*IBSHxfv_0Dw$Mh>77V#c^u)Gaa*hd! ziJyLw0mu~H>h{!!F>%t=(6|BJ2bpKwi2kUt%eybUFSX*2SSwEb&(I@lp0H`*YCuaZ z`UcT$*{F!X1Qn*?E#OCy^t5rk!DEm`@Na{LoLnZ1t1819QBMUsia7-)n^BR({hM&{ z!nYN0Ae@c~yvhky6igWzHc{11XBH!)%F9RJ9Xj#YO(A(d2mjkcLvi_+4W?4zQrs3j zv4CI7$jk43c3YcaZp(MMyz0nX#BK=_o3=X5H!)}6%un4#?*kC~4c3#4tgPGhR1?i} z>M-}=2f8X|fRmHny_1W7JagG9L>ne5#<@Tci!v9dvJp72EDel1>B1RJ-+e=I7ix_=aO&!9%iDw3XI zF7uEC29$iT%E<|bCG{~O_yER{L%w!ir8h2%8ZEcCGy-j;r0G2I)*=k?L86D%)8F=J zhyT&u*NMJl#hKG}Hi}M{Se9EziMz3Q7)kjst5kqSOJyw3^uG&JOVKk&fH(kf44?<2 z(Qj&TT;5W3Mr+-uMAowLKwKi(j(Nh~*V1p}hOw!hg>>`eqQ+oJ9>gcRq4wjtqMl-# zC3r75+2E4I`}^%3zlj3S>+%5l{u4%+_&BZ&zVs|S8!leXd~|qPfUtpuj5559RbAKg zo24h*JJa0|VQWDNl9R7D;@{%Di{YnZ&mQ{@62G3E<6=W&(@wLNO z>k2id_G7%m4B8nl0!akm#AKtZXHs<#*dx+)1SosHlzsZWpwssepT-wv$^W4teH9$6 zcCp|hV&xViG?e&C_IgW>C}lCtkadUg)cN^7MZA5(48-Vah*3|P&+_U?DN&ELq&T3V8HTNW@@Ul=JQbcRe8ZvqF|RB|GDeN7ZN4}HDO z?}eU}l!UPCszqm9ni~@{0Hh}%`l)3L*96>nSzB*{a{>D9+3u7x;O(`}OIT=V3d+hx z6{eB~f3FOncIuW){Q3oytOI$<0K~T5UPd~){Er{akAHWAW?iV3Gt}3Y28J&fT|nUD z;o%7h4UKq2dXn>S%ScPRdUvr@zTFmvhJSl^N6r=>hJO-_V@;hW+%NKgJ{GrpXHdo- zeRKtvD}nV>`aP#nvXCzF5p}ZkR~Z@49oIkx9{P#O0bzr+_nmdRAz$&nXdo1yqkKKOaDO`KSz5HE$UG^`jHfpbB!tV^uoV z75y-MLL!NG6+;opIHWZ_3=QouXp~QjrayP3?Ce?Tkup4y4Dl=*-yk!1ECzF-7Kks( z=tq+o(UW{(ADZPBsj{=LpCF8lTaYH3nv+>j`S%q2tEvtGf7aHhM6JL%!J`x64e%F<7)|(`l}3L)0aVEVuneKzcE{IXZrfOqUaE zpu71-%(e-f@j#$UX=rEwo_wYh-9tul~T!((%5o>GR4p38|ur?P+}l5>9d@j zn)vu>H^g8AWmm`C87Bnlg;4f%eX0l=jNqviVO;ZELub@@Dp7K+S2*u!H|X5rM&vcU zH{HT0pM{~4_l~FINrn6{t`J41ZK6h@`JL#Db{N!Dq7&^{?{c>srI*pS`nPz<;^ctM zN*ROe6lLkc|IFN3Xgmi|p<)alP96s%7oLXq5l`4hD|sa$gvu0`l<_%SoHVnaBy0)Y zTc1V*!%F-n#CR$(C+p0W*yK{-MD-2K!!JJ3a>{aizr%!*rX-BEE^z1RUCzP|asAK5 z-opy`CmY0?MpKf)NUb5NRmLs@^Hy)2?jOohPV%L>jfX#F+r#ozSi1Kdw{$NKM0}4& zJdMUS)~tcbt>~~KJ+Ub(j}-asDZMP0cbJKDL&eGOPs}7B?se9i_5Ymz`WJ^p8HBxn zR@U130HFI$`7AImK&2U$>w(0X6#fU4GXN=o2nCWLExVk(|?0zsec57N5vpIoPt!{4Dt#xC!nE-m7S zn)za~hlJq12##wZNd7fhGxR{I*hkGD&C7ktlqFU%hRh`E&jDkkFCsSSxaB=Mev^vC zqh=8(6f5y22KDK-P=6=7i9W{LobX|6>OMqwc8bQPo^#&k+~I-k)uOgz%0D?D3p&k5 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 R@Zub#Age0#RmwEvzW|GH|GWSI literal 0 HcmV?d00001 diff --git a/ng2-components/ng2-activiti-processlist/index.ts b/ng2-components/ng2-activiti-processlist/index.ts index 2416c2f9b6..7848f52cca 100644 --- a/ng2-components/ng2-activiti-processlist/index.ts +++ b/ng2-components/ng2-activiti-processlist/index.ts @@ -19,7 +19,7 @@ import { ModuleWithProviders, NgModule } from '@angular/core'; import { MdProgressSpinnerModule } from '@angular/material'; import { ActivitiFormModule } from 'ng2-activiti-form'; import { ActivitiTaskListModule } from 'ng2-activiti-tasklist'; -import { CoreModule } from 'ng2-alfresco-core'; +import { CoreModule, CardViewUpdateService } from 'ng2-alfresco-core'; import { DataTableModule } from 'ng2-alfresco-datatable'; import { CreateProcessAttachmentComponent } from './src/components/create-process-attachment.component'; @@ -106,6 +106,7 @@ export const ACTIVITI_PROCESSLIST_DIRECTIVES: [any] = [ export const ACTIVITI_PROCESSLIST_PROVIDERS: [any] = [ ProcessService, ProcessUploadService, + CardViewUpdateService, // Old Deprecated import ActivitiProcessService diff --git a/ng2-components/ng2-activiti-processlist/src/components/process-instance-header.component.css b/ng2-components/ng2-activiti-processlist/src/components/process-instance-header.component.css index 15b522136a..d5af0b0328 100644 --- a/ng2-components/ng2-activiti-processlist/src/components/process-instance-header.component.css +++ b/ng2-components/ng2-activiti-processlist/src/components/process-instance-header.component.css @@ -2,10 +2,8 @@ width: 100%; } -.activiti-label { - font-weight: bolder; -} - -.activiti-process-header__value { - color: rgb(68, 138, 255); +.adf-card-container { + font-family: inherit; + height: 19em; + padding: 8px; } diff --git a/ng2-components/ng2-activiti-processlist/src/components/process-instance-header.component.html b/ng2-components/ng2-activiti-processlist/src/components/process-instance-header.component.html index 8d8aa72980..8cb8c70d01 100644 --- a/ng2-components/ng2-activiti-processlist/src/components/process-instance-header.component.html +++ b/ng2-components/ng2-activiti-processlist/src/components/process-instance-header.component.html @@ -1,22 +1,5 @@
-
-
- {{ 'DETAILS.LABELS.STARTED_BY' | translate }}: - {{getStartedByFullName()}} -
-
- {{ 'DETAILS.LABELS.STARTED' | translate }}: - {{getFormatDate(processInstance.started, 'medium')}} -
-
- -
-
- {{ 'DETAILS.LABELS.ENDED' | translate }}: - {{getFormatDate(processInstance.ended, 'medium')}} -
- -
+ + +
diff --git a/ng2-components/ng2-activiti-processlist/src/components/process-instance-header.component.spec.ts b/ng2-components/ng2-activiti-processlist/src/components/process-instance-header.component.spec.ts index 92d5748b7f..5ceec4d1a4 100644 --- a/ng2-components/ng2-activiti-processlist/src/components/process-instance-header.component.spec.ts +++ b/ng2-components/ng2-activiti-processlist/src/components/process-instance-header.component.spec.ts @@ -16,21 +16,21 @@ */ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; -import { AlfrescoTranslationService, CoreModule } from 'ng2-alfresco-core'; -import { exampleProcess, processEnded } from './../assets/process.model.mock'; -import { TranslationMock } from './../assets/translation.service.mock'; -import { ProcessInstance } from './../models/process-instance.model'; +import { AlfrescoTranslationService, CardViewUpdateService, CoreModule } from 'ng2-alfresco-core'; +import { Observable } from 'rxjs/Rx'; + +import { ProcessInstance } from '../models/process-instance.model'; +import { exampleProcess } from './../assets/process.model.mock'; import { ProcessService } from './../services/process.service'; import { ProcessCommentsComponent } from './process-comments.component'; import { ProcessInstanceHeaderComponent } from './process-instance-header.component'; describe('ProcessInstanceHeaderComponent', () => { + let service: ProcessService; let componentHandler: any; let component: ProcessInstanceHeaderComponent; let fixture: ComponentFixture; - let element: HTMLElement; beforeEach(async(() => { TestBed.configureTestingModule({ @@ -43,16 +43,20 @@ describe('ProcessInstanceHeaderComponent', () => { ], providers: [ ProcessService, - {provide: AlfrescoTranslationService, useClass: TranslationMock} + CardViewUpdateService ] }).compileComponents(); + + let translateService = TestBed.get(AlfrescoTranslationService); + spyOn(translateService, 'addTranslationFolder').and.stub(); + spyOn(translateService.translate, 'get').and.callFake((key) => { return Observable.of(key); }); })); beforeEach(() => { fixture = TestBed.createComponent(ProcessInstanceHeaderComponent); component = fixture.componentInstance; - element = fixture.nativeElement; + service = TestBed.get(ProcessService); component.processInstance = new ProcessInstance(exampleProcess); @@ -63,71 +67,97 @@ describe('ProcessInstanceHeaderComponent', () => { window['componentHandler'] = componentHandler; }); - it('should render empty component if no form details provided', () => { + it('should render empty component if no process details provided', () => { component.processInstance = undefined; fixture.detectChanges(); expect(fixture.debugElement.children.length).toBe(0); }); - it('should display started by user', () => { + it('should display status as running when process is not complete', () => { + component.processInstance.ended = null; + component.ngOnChanges({}); fixture.detectChanges(); - let formValueEl = fixture.debugElement.query(By.css('[data-automation-id="header-started-by"] .activiti-process-header__value')); - expect(formValueEl).not.toBeNull(); - expect(formValueEl.nativeElement.innerText).toBe('Bob Jones'); + let valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-textitem-value-status"]'); + expect(valueEl.innerText).toBe('Running'); }); - it('should display empty started by user if user unknown', () => { - component.processInstance.startedBy = null; + it('should display status as completed when process is complete', () => { + component.processInstance.ended = '2016-11-03'; + component.ngOnChanges({}); fixture.detectChanges(); - let formValueEl = fixture.debugElement.query(By.css('[data-automation-id="header-started-by"] .activiti-process-header__value')); - expect(formValueEl).not.toBeNull(); - expect(formValueEl.nativeElement.innerText).toBe(''); + let valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-textitem-value-status"]'); + expect(valueEl.innerText).toBe('Completed'); }); - it('should display process start date', () => { - component.processInstance.started = '2016-11-10T03:37:30.010+0000'; + it('should display due date', () => { + component.processInstance.ended = '2016-11-03'; + component.ngOnChanges({}); fixture.detectChanges(); - let formValueEl = fixture.debugElement.query(By.css('[data-automation-id="header-started"] .activiti-process-header__value')); - expect(formValueEl).not.toBeNull(); - expect(formValueEl.nativeElement.innerText).toBe('Nov 10, 2016, 3:37:30 AM'); + let valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-dateitem-dueDate"]'); + expect(valueEl.innerText).toBe('Nov 03 2016'); }); - it('should display ended date if process is ended', () => { - component.processInstance.ended = '2016-11-10T03:37:30.010+0000'; + it('should display placeholder if no due date', () => { + component.processInstance.ended = null; + component.ngOnChanges({}); fixture.detectChanges(); - let formValueEl = fixture.debugElement.query(By.css('[data-automation-id="header-status"] .activiti-process-header__value')); - expect(formValueEl).not.toBeNull(); - expect(formValueEl.nativeElement.innerText).toBe('Nov 10, 2016, 3:37:30 AM'); + let valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-dateitem-dueDate"]'); + expect(valueEl.innerText).toBe('No date'); }); - it('should render the button show diagram as default', () => { + it('should display process category', () => { + component.processInstance.processDefinitionCategory = 'Accounts'; + component.ngOnChanges({}); fixture.detectChanges(); - let formValueEl = fixture.debugElement.query(By.css('[data-automation-id="header-show-diagram"]')); - expect(formValueEl).not.toBeNull(); + let valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-textitem-value-category"]'); + expect(valueEl.innerText).toBe('Accounts'); }); - it('should render the button show diagram enabled as default', () => { + it('should display placeholder if no process category', () => { + component.processInstance.processDefinitionCategory = null; + component.ngOnChanges({}); fixture.detectChanges(); - let showButton: HTMLButtonElement = element.querySelector('#show-diagram-button'); - expect(showButton).toBeDefined(); - expect(showButton.disabled).toBeFalsy(); + let valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-textitem-value-category"]'); + expect(valueEl.innerText).toBe('No category'); }); - it('should render the button show diagram disabled', () => { - component.processInstance = new ProcessInstance(processEnded); + it('should display created date', () => { + component.processInstance.started = '2016-11-03'; + component.ngOnChanges({}); fixture.detectChanges(); - fixture.whenStable().then(() => { - let showButton: HTMLButtonElement = element.querySelector('#show-diagram-button'); - expect(showButton).toBeDefined(); - expect(showButton.disabled).toBeTruthy(); - }); + let valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-dateitem-created"]'); + expect(valueEl.innerText).toBe('Nov 03 2016'); }); - it('should NOT render the button show diagram is the property showDiagram is false', () => { - component.showDiagram = false; + it('should display started by', () => { + component.processInstance.startedBy = {firstName: 'Admin', lastName: 'User'}; + component.ngOnChanges({}); fixture.detectChanges(); - let formValueEl = fixture.debugElement.query(By.css('[data-automation-id="header-show-pippo"]')); - expect(formValueEl).toBeNull(); + let valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-textitem-value-assignee"]'); + expect(valueEl.innerText).toBe('Admin User'); }); + it('should display process instance id', () => { + component.processInstance.id = '123'; + component.ngOnChanges({}); + fixture.detectChanges(); + let valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-textitem-value-id"]'); + expect(valueEl.innerText).toBe('123'); + }); + + it('should display description', () => { + component.processInstance.processDefinitionDescription = 'Test process'; + component.ngOnChanges({}); + fixture.detectChanges(); + let valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-textitem-value-description"]'); + expect(valueEl.innerText).toBe('Test process'); + }); + + it('should display placeholder if no description', () => { + component.processInstance.processDefinitionDescription = null; + component.ngOnChanges({}); + fixture.detectChanges(); + let valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-textitem-value-description"]'); + expect(valueEl.innerText).toBe('No description'); + }); }); diff --git a/ng2-components/ng2-activiti-processlist/src/components/process-instance-header.component.ts b/ng2-components/ng2-activiti-processlist/src/components/process-instance-header.component.ts index 7dfceac75b..c14cfa1974 100644 --- a/ng2-components/ng2-activiti-processlist/src/components/process-instance-header.component.ts +++ b/ng2-components/ng2-activiti-processlist/src/components/process-instance-header.component.ts @@ -15,9 +15,8 @@ * limitations under the License. */ -import { DatePipe } from '@angular/common'; -import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { AlfrescoTranslationService, LogService } from 'ng2-alfresco-core'; +import { Component, Input, OnChanges, SimpleChanges } from '@angular/core'; +import { AlfrescoTranslationService, CardViewDateItemModel, CardViewItem, CardViewTextItemModel, LogService } from 'ng2-alfresco-core'; import { ProcessInstance } from '../models/process-instance.model'; declare let componentHandler: any; @@ -27,19 +26,12 @@ declare let componentHandler: any; templateUrl: './process-instance-header.component.html', styleUrls: ['./process-instance-header.component.css'] }) -export class ProcessInstanceHeaderComponent { - - @Input() - showDiagram: boolean = true; +export class ProcessInstanceHeaderComponent implements OnChanges { @Input() processInstance: ProcessInstance; - @Output() - onError: EventEmitter = new EventEmitter(); - - @Output() - showProcessDiagram: EventEmitter = new EventEmitter(); + properties: CardViewItem []; constructor(private translate: AlfrescoTranslationService, private logService: LogService) { @@ -49,37 +41,47 @@ export class ProcessInstanceHeaderComponent { } } - getStartedByFullName(): string { - if (this.processInstance && this.processInstance.startedBy) { - return (this.processInstance.startedBy.firstName && this.processInstance.startedBy.firstName !== 'null' - ? this.processInstance.startedBy.firstName + ' ' : '') + - this.processInstance.startedBy.lastName; - } - return ''; + ngOnChanges(changes: SimpleChanges) { + this.refreshData(); } - getFormatDate(value, format: string) { - let datePipe = new DatePipe('en-US'); - try { - return datePipe.transform(value, format); - } catch (err) { - this.logService.error(`ProcessListInstanceHeader: error parsing date ${value} to format ${format}`); + refreshData() { + if (this.processInstance) { + this.properties = [ + new CardViewTextItemModel({label: 'Status:', value: this.getProcessStatus(), key: 'status'}), + new CardViewDateItemModel({label: 'Due Date:', value: this.processInstance.ended, format: 'MMM DD YYYY', key: 'dueDate', default: 'No date'}), + new CardViewTextItemModel({label: 'Category:', value: this.processInstance.processDefinitionCategory, key: 'category', default: 'No category'}), + new CardViewTextItemModel( + { + label: 'Created By:', + value: this.getStartedByFullName(), + key: 'assignee', + default: 'No assignee' + }), + new CardViewDateItemModel({label: 'Created:', value: this.processInstance.started, format: 'MMM DD YYYY', key: 'created'}), + new CardViewTextItemModel({label: 'Id:', value: this.processInstance.id, key: 'id'}), + new CardViewTextItemModel({label: 'Description:', value: this.processInstance.processDefinitionDescription, key: 'description', default: 'No description'}) + ]; } } + getProcessStatus(): string { + if (this.processInstance) { + return this.isRunning() ? 'Running' : 'Completed'; + } + } + + getStartedByFullName(): string { + let fullName = ''; + if (this.processInstance && this.processInstance.startedBy) { + fullName += this.processInstance.startedBy.firstName || ''; + fullName += fullName ? ' ' : ''; + fullName += this.processInstance.startedBy.lastName || ''; + } + return fullName; + } + isRunning(): boolean { return this.processInstance && !this.processInstance.ended; } - - isDiagramDisabled(): boolean { - return !this.isRunning() ? true : undefined; - } - - showDiagramEvent() { - this.showProcessDiagram.emit({value: this.processInstance.id}); - } - - isShowDiagram(): boolean { - return this.showDiagram; - } }