[%# 1.0@bugzilla.org %]
[%# The contents of this file are subject to the Mozilla Public
  # License Version 1.1 (the "License"); you may not use this file
  # except in compliance with the License. You may obtain a copy of
  # the License at http://www.mozilla.org/MPL/
  #
  # Software distributed under the License is distributed on an "AS
  # IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or
  # implied. See the License for the specific language governing
  # rights and limitations under the License.
  #
  # The Original Code is the Bugzilla Test Runner System.
  #
  # The Initial Developer of the Original Code is Maciej Maczynski.
  # Portions created by Maciej Maczynski are Copyright (C) 2001
  # Maciej Maczynski. All Rights Reserved.
  #
  # Contributor(s): Ed Fuentetaja <efuentetaja@acm.org>
  #                 Greg Hendricks <ghendricks@novell.com>
  #%]

[%# INTERFACE:
  # ...
  #%]
  

[% PROCESS global/variables.none.tmpl %]
[% PROCESS testopia/style.none.tmpl %]
[% PROCESS testopia/blocks.html.tmpl %]

[% javascript_urls.push( 'testopia/js/case.js') %]
[% javascript_urls.push( 'testopia/js/plan.js') %]
[% javascript_urls.push( 'testopia/js/attachments.js') %] 
[% javascript_urls.push( 'testopia/js/tags.js') %] 
[% javascript_urls.push( 'testopia/js/caserun.js') %] 

[% title = "Test Case $case.id: $case.summary" %]
[% PROCESS global/header.html.tmpl %]

<script type="text/javascript">
var tcase = [% case.to_json FILTER html_light %];

Ext.onReady(function(){
    Ext.QuickTips.init();

    var testopia_form = new Ext.form.BasicForm('testopia_helper_frm',{});

    var confirmDelete = function(){
        Ext.Msg.show({
           title:'Confirm Delete?',
           msg: 'You are about to delete case ' + tcase.case_id + ' with all of its children and history. Are you sure you want to continue?',
           buttons: Ext.Msg.YESNO,
           fn: caseDelete,
           animEl: 'plan-delete-btn',
           icon: Ext.MessageBox.QUESTION
        });
    };
    var caseDelete = function(btn){
        if (btn == 'yes'){
            testopia_form.submit({
                url: 'tr_process_case.cgi',
                params: {case_id: tcase.case_id, action:'delete'},
                success: function(data){
                    Ext.Msg.show({
                        title:'Test Case Deleted',
                        msg: "Test case " + tcase.case_id + " was deleted",
                        buttons: Ext.Msg.OK,
                        icon: Ext.MessageBox.INFO
                    });
                    window.location = 'tr_show_plan.cgi?plan_id=[% case.plans.0.id FILTER none %]';
                },
                failure: testopiaError
            });
        }
    };

    function submitEdits(field, value){
        var params = {action: 'edit', case_id: tcase.case_id};
        switch(field){
            case 'priority': 
                params.priority = value;
                break;
            case 'alias': 
                params.alias = value;
                break;
            case 'status': 
                params.status = value;
                break;
            case 'summary': 
                params.summary = value;
                break;
            case 'category': 
                params.category = value;
                break;
            case 'estimated_time': 
                params.estimated_time = value;
                break;
            case 'tester': 
                params.tester = value;
                break;
            case 'requirement': 
                params.requirement = value;
                break;
        }
        testopia_form.submit({
            url: 'tr_process_case.cgi',
            params: params,
            success: function(){
                TestopiaUtil.notify.msg('Test Case updated', 'Test Case {0} was updated successfully', field);
            },
            failure: testopiaError
        });

    }

    function processText(){
        var params = {};
        params.tcsetup = Ext.getCmp('setup_editor').getValue();
        params.tcbreakdown = Ext.getCmp('breakdown_editor').getValue();
        params.tcaction = Ext.getCmp('action_editor').getValue();
        params.tceffect = Ext.getCmp('effect_editor').getValue();
        params.case_id = tcase.case_id;
        params.action = 'update_doc';
        testopia_form.submit({
            url: 'tr_process_case.cgi',
            method: 'POST',
            params: params,
            success: function(){
                TestopiaUtil.notify.msg('Test case updated', 'Test Case {0} was updated successfully', 'Document');
            },
            failure: testopiaError
        });
    }

    var fileMenu = new Ext.menu.Menu({
        id: 'file-menu',
        items: [{
            text: "Clone",
            icon: 'testopia/img/copy.png',
            iconCls: 'img_button_16x',
            handler: function(){
                caseClonePopup(tcase.product_id, tcase.case_id);
            }
        },{
            text: "Print",
            handler: function(){
                window.location='tr_show_case.cgi?&case_id=[% case.id FILTER none %]&ctype=print';
            }
        },{
            text: 'Export',
            menu: [{
                text: 'CSV',
                handler: function(){
                    window.location='tr_show_case.cgi?&case_id=[% case.id FILTER none %]&ctype=csv';
                }
            },{
                text: 'XML',
                handler: function(){
                    window.location='tr_show_case.cgi?&case_id=[% case.id FILTER none %]&ctype=xml';
                }
            }]
        },{
            text: "Delete",
            id: 'btn-delete',
            icon: 'testopia/img/delete.png',
            iconCls: 'img_button_16x',
            disabled: tcase.candelete ? false : true,
            handler: confirmDelete
        }]
    });

    var caseControls = new Ext.Toolbar();
    caseControls.render('case-tb-div');
    caseControls.add({
        text: 'File',
        menu: fileMenu
    },
    new Ext.Toolbar.Fill(),
    {
        xtype: 'button',
        id: 'plan-copy-button',
        template: button_16x_tmpl,
        icon: 'testopia/img/copy.png',
        iconCls: 'img_button_16x',
        tooltip: 'Clone this Test Case',
        handler: function(){
            caseClonePopup(tcase.product_id, tcase.case_id);
        }
    }
[% IF case.candelete %]
    ,{
        xtype: 'button',
        template: button_16x_tmpl,
        id: 'plan-delete-btn',
        icon: 'testopia/img/delete.png',
        iconCls: 'img_button_16x',
        tooltip: 'Delete this Test Case',
        handler: confirmDelete
    }
[% END %]    
);
    var cases = new Ext.grid.GridPanel({
        
    });
    var tutil = new TestopiaUtil();// utils yo!
    var casepanel = new Ext.Panel({
        layout: 'border',
        monitorResize: true,
        applyTo: 'case-body-div',
        height: 800,
        footer: true,
        items:[{
            xtype: 'tabpanel',
            enableTabScroll: true,
            id: 'object_panel',
            split: true,
            region: 'center',
            activeTab: 0,
            items: [
            {
                layout: 'column',
                title: 'Action / Expected Results',
                tbar: new DocCompareToolbar('case',tcase.case_id),
                id: 'action_panel',
                items: [{
                    columnWidth:0.5,
                    layout:'fit',
                    items:{
                        title: 'Action',
                        height: 450,
                        bodyBorder: false,
                        border: false,
                        layout: 'fit',
                        items:[{
                            id: 'action_editor',
                            xtype:'htmleditor',
                            value: '[% case.text.action FILTER js %]'
                        }]
                    }
                },{
                    columnWidth:0.5,
                    layout:'fit',
                    items:{
                        title: 'Expected Results',
                        height: 450,
                        bodyBorder: false,
                        border: false,
                        layout: 'fit',
                        items:[{
                            id: 'effect_editor',
                            xtype:'htmleditor',
                            value: '[% case.text.effect FILTER js %]'
                        }]  
                    }
                }],
                buttons: [{ 
                    text: 'Update Action/Results',
                    handler: processText
                }]
            },{
                layout: 'column',
                title: 'Set Up / Break Down',
                items: [{
                    columnWidth:0.5,
                    layout:'fit',
                    items:{
                        title: 'Setup',
                        height: 450,
                        bodyBorder: false,
                        border: false,
                        layout: 'fit',
                        items:[{
                            id: 'setup_editor',
                            xtype:'htmleditor',
                            value: '[% case.text.setup FILTER js %]'
                        }]
                    }
                },{
                    columnWidth:0.5,
                    layout:'fit',
                    items:{
                        title: 'Breakdown',
                        height: 450,
                        bodyBorder: false,
                        border: false,
                        layout: 'fit',
                        items:[{
                            id: 'breakdown_editor',
                            xtype:'htmleditor',
                            value: '[% case.text.breakdown FILTER js %]'
                        }]
                    }
                }],
                buttons: [{ 
                    text: 'Update Setup/Breakdown',
                    handler: processText
                }]
            },
            new HistoryGrid('case', [% case.id FILTER none %]),
            new CaseRunListGrid({case_id: tcase.case_id, viewall: 1}),
            new AttachGrid(tcase),
            new CaseBugsGrid([% case.id FILTER none %]), 
            new CaseComponentsGrid(tcase.case_id),
            {
                title: 'Dependencies',
                listeners: {'activate': function(){ this.doLayout(); }},
                buttons: [{ 
                    text: 'Submit',
                    disabled: tcase.canedit ? false : true,
                    handler: function(){
                        var params = {};
                        params.tcdependson = Ext.getCmp('tcdependson').getValue();
                        params.tcblocks = Ext.getCmp('tcblocks').getValue();
                        params.action = 'edit';
                        params.case_id = tcase.case_id;
                        testopia_form.submit({
                            url: 'tr_process_case.cgi',
                            params: params,
                            success: function(){
                                TestopiaUtil.notify.msg('Test Case updated', 'Test Case {0} was updated successfully', 'dependencies');
                            },
                            failure: testopiaError
                        });
                    }
                }],
                items: [{
                    layout: 'column',
                    items: [{
                        columnWidth: 0.5,
                        layout: 'fit',
                        border: false,
                        items: [{
                            xtype: 'treepanel',
                            border: false,
                            root: new Ext.tree.TreeNode({text: 'Test Case [% case.id FILTER none %]'})
                        }]
                        
                    },{
                        columnWidth: 0.5,
                        layout: 'fit',
                        border: false,
                        items: [{
                            layout: 'table',
                            border: false,
                            layoutConfig: { columns: 2 },
                            items: [{
                                html: '<b>Depends On</b>'
                            },{
                                html: '<b>Blocks</b>'
                            },{
                                xtype: 'textarea',
                                name: 'tcblocks',
                                id: 'tcblocks',
                                value: '[% case.blocked_list FILTER html %]',
                                width: 250
                            },{
                                xtype: 'textarea',
                                name: 'tcdependson',
                                id: 'tcdependson',
                                value: '[% case.dependson_list FILTER html %]',
                                width: 250
                            },{
                                border: false,
                                height: 200,
                                autoScroll: true,
                                html:'[% FOREACH dep = case.blocked %]<a href="tr_show_case.cgi?case_id=[% dep.id FILTER none %]" title="[% dep.summary %]">[% dep.id FILTER none %]</a> [% END %]'
                            },{
                                border: false,
                                height: 200,
                                autoScroll: true,
                                html:'[% FOREACH dep = case.dependson %]<a href="tr_show_case.cgi?case_id=[% dep.id FILTER none %]" title="[% dep.summary %]">[% dep.id FILTER none %]</a> [% END %]'
                            }]
                        }]
                    }]
                }]
            },{
                title: "Automation",
                xtype: 'form',
                id: 'case_automation_frm',
                bodyStyle: 'padding: 10px',
                listeners: {'activate': function(){ this.doLayout(); }},
                buttons: [{ 
                    text: 'Submit',
                    disabled: tcase.canedit ? false : true,
                    handler: function(){
                        var params = Ext.getCmp('case_automation_frm').getForm().getValues();
                        params.case_id = tcase.case_id;
                        params.action = 'edit';
                        params.isautomated = params['ncf-automated-checkbox'] == 'on' ? 'on' : 'off';
                        testopia_form.submit({
                            url: 'tr_process_case.cgi',
                            params: params,
                            success: function(){
                                TestopiaUtil.notify.msg('Test case updated', 'Test Case {0} was updated successfully', 'automation');
                            },
                            failure: testopiaError
                        });
                    }
                }],
                items: [{
                    xtype: 'fieldset',
                    autoHeight: true,
                    checkboxToggle: true,
                    title: 'Automated',
                    id: 'ncf-automated',
                    checkBoxName: 'isautomated',
                    collapsed: tcase.isautomated == 1 ? false : true,
                    items: [{
                        xtype:'textfield',
                        fieldLabel: 'Scripts',
                        id:'ncf-scripts',
                        name: 'script',
                        value: tcase.script
                    },{
                        xtype:'textfield',
                        fieldLabel: 'Arguments',
                        id:'ncf-arguments',
                        name: 'arguments',
                        value: tcase.arguments
                    },{
                        xtype:'textfield',
                        fieldLabel: 'Alias',
                        id:'case_alias',
                        name: 'alias',
                        value: tcase.alias
                    }]
                }]
            }]
        },{
            xtype: 'panel',
            split: true,
            title: '[% title FILTER js %]',
            region: 'north',
            contentEl: 'case_overview',
            height: 245,
            hideBorders: true
        },{
            xtype: 'tabpanel',
            split: true,
            region:'east',
            width: 200,
            activeTab: 0,
            items:[
                new TestopiaObjectTags('case', [% case.id FILTER none %]),
                new CasePlans([% case.id FILTER none %], [% case.plans.0.product_id FILTER none %])
            ]
        }]
    });
[% IF case.canedit %]
// Summary Editing    
    var summary_edit_btn = new Ext.Button({
        applyTo: 'case_summary_edit_btn_div',
        template: button_16x_tmpl,
        id:'case_summary_edit_btn',
        icon: 'testopia/img/edit.png',
        iconCls: 'img_button_16x',
        tooltip: 'Edit Case Summary',
        handler: function(){
            Ext.getCmp('case_summary_edt').startEdit(Ext.get('case_summary_div'));
        }
    });
    var case_summary_edt = new Ext.Editor(
        new Ext.form.TextField({
            width: Ext.get('case_summary_div').getWidth() < 200 ? 200 : Ext.get('case_summary_div').getWidth(),
            name: 'summary'
        }),{
            alignment: 'tl-tl',
            id: 'case_summary_edt',
            ignoreNoChange: true,
            updateEl: true,
            completeOnEnter: true,
            ignoreNoChange: true,
            cancelOnEsc: true
    });
    case_summary_edt.on('complete', function(e,v,sv){
        submitEdits('summary', v);
    });

// Tester Editing
    var tester_edit_btn = new Ext.Button({
        applyTo: 'tester_edit_btn_div',
        template: button_16x_tmpl,
        id:'tester_edit_btn',
        icon: 'testopia/img/edit.png',
        iconCls: 'img_button_16x',
        tooltip: 'Edit Default Tester',
        handler: function(){
            Ext.getCmp('tester_edt').startEdit(Ext.get('tester_div'), '[% case.default_tester.name FILTER js %]');
        }
    });
    var tester_edt = new Ext.Editor(
        new UserLookup({
            hiddenName: 'tester',
            value: tcase.tester
        }),
    {
        alignment: 'tl-tl',
        id: 'tester_edt',
        updateEl: true,
        completeOnEnter: true,
        ignoreNoChange: true,
        cancelOnEsc: true
    });
    tester_edt.on('complete', function(e,v){
        submitEdits('tester', v);
    });

// Requirement Editing
    var requirement_edit_btn = new Ext.Button({
        applyTo: 'requirement_edit_btn_div',
        template: button_16x_tmpl,
        id:'requirment_edit_btn',
        icon: 'testopia/img/edit.png',
        iconCls: 'img_button_16x',
        tooltip: 'Edit Requirement',
        handler: function(){
            Ext.getCmp('requirement_edt').startEdit(Ext.get('requirement_div'));
        }
    });
    var requirement_edt = new Ext.Editor(
        new Ext.form.TextField({
            width: 300,
            name: 'requirement'
        }),
        {
            alignment: 'tl-tl',
            id: 'requirement_edt',
            ignoreNoChange: true,
            updateEl: true,
            completeOnEnter: true,
            ignoreNoChange: true,
            cancelOnEsc: true
        }
    );
    requirement_edt.on('complete', function(e,v,sv){
        submitEdits('requirement', v);
    });

// Time Editing
    var time_edit_btn = new Ext.Button({
        applyTo: 'time_edit_btn_div',
        template: button_16x_tmpl,
        id:'time_edit_btn',
        icon: 'testopia/img/edit.png',
        iconCls: 'img_button_16x',
        tooltip: 'Edit Estimated Time',
        handler: function(){
            Ext.getCmp('time_edt').startEdit(Ext.get('estimated_time_div'));
        }
    });
    var time_edt = new Ext.Editor(
        new Ext.form.TextField({
            width: 300,
            name: 'estimated_time'
        }),{
            alignment: 'tl-tl',
            id: 'time_edt',
            ignoreNoChange: true,
            updateEl: true,
            completeOnEnter: true,
            ignoreNoChange: true,
            cancelOnEsc: true
    });
    time_edt.on('complete', function(e,v,sv){
        submitEdits('estimated_time', v);
    });

// Combo Boxes
    var pbox = new PriorityCombo({
        hiddenName: 'priority',
        transform: 'priority'
    });
    pbox.on('select', function(c,r,i){
        submitEdits('priority', r.get('value'));
    });

    var sbox = new CaseStatusCombo({
        hiddenName: 'status',
        transform: 'status'
    });
    sbox.on('select', function(c,r,i){
        submitEdits('status', r.get('value'));
    });

    var cbox = new CaseCategoryCombo({
        hiddenName: 'category',
        transform: 'category'
    });
    cbox.on('select', function(c,r,i){
        submitEdits('category', r.get('value'));
    });
[% END %]
});
</script>

[% PROCESS testopia/case/navigate.html.tmpl %]

<div id="case-body-div"></div>

<div id="case_overview">
<div id="case-tb-div"></div>
<table width="100%">
  <tbody align="left">
    <tr class="bz_row_header">
      <th colspan="3">Case Summary</th>
    </tr>
    <tr class="bz_row_data">
      <td colspan="3">
        <table>
          <tr style="width:100%;">
            <td><div id="case_summary_div">[% case.summary FILTER html %]</div></td>
            <td><div id="case_summary_edit_btn_div"></div></td>
          </tr>
        </table>
      </td>
    </tr>
    <tr class="bz_row_header">
      <th>Author</th>
      <th>Requirement</th>
      <th>Created</th>
      </tr>
    <tr class="bz_row_data">
      <td><a href="mailto:[% case.author.email FILTER html %]">[% case.author.identity FILTER html %]</a><br></td>
      <td>
        <table>
          <tr style="width:100%;">
            <td><div id="requirement_div">[% case.requirement FILTER html %]</div></td>
            <td><div id="requirement_edit_btn_div"></div></td>
          </tr>
        </table>
      </td>
      <td>[% case.creation_date FILTER time %]</td>
      </tr>
    <tr class="bz_row_header">
      <th>Tester</th>
      <th>Estimated Time</th>
      <th>Automated</th>
      </tr>
    <tr class="bz_row_data">
      <td>
        <table>
          <tr><td><a href="mailto:[% case.default_tester.email FILTER html %]" id="tester_div">[% case.default_tester.identity FILTER html %]</a></td>
          <td><div id="tester_edit_btn_div"></div></td>
          </tr>
        </table>
      </td>
      <td>
        <table>
          <tr><td><div id="estimated_time_div">[% case.estimated_time FILTER html %]</div></td>
          <td><div id="time_edit_btn_div"></div></td>
          </tr>
        </table>
      </td>
      <td>[% case.isautomated ? "YES" : "NO" FILTER html %]</td>
    </tr>
    <tr class="bz_row_header">
      <th>Category</th>
      <th>Priority</th>
      <th>Status</th>

      </tr>
    <tr class="bz_row_data">
      <td>[% IF case.canedit %]
          [% PROCESS select sel = { name      => 'category',
                                    accesskey => 'c', 
                                    list      => case.get_category_list
                                    default   => case.category.name } %]
          [% ELSE %]
          [% case.category.name FILTER html %]
          [% END %]
      </td>
      <td>
        <table><tr><td>
        [% IF case.canedit %]
          [% PROCESS select sel = { name      => 'priority',
                                    accesskey => 'p', 
                                    list      => case.get_priority_list
                                    default   => case.priority } %]
        [% ELSE %]
          [% case.priority FILTER html %]
        [% END %]
          </td><td> <img src='images/help.png' id="priority_help" style="cursor:pointer" onclick='window.open("testing_priorities.html","Priority Definitions","resizable=no, scrollbars=yes, width=550,height=420");'/></td></tr>
        </table>
      </td>
      <td>[% IF case.canedit %]
          [% PROCESS select sel = { name      => 'status',
                                    accesskey => 's', 
                                    list      => case.get_status_list
                                    default   => case.status } %]
          [% ELSE %]
          [% case.status FILTER html %]
          [% END %]
      </td>
    </tr>
  </tbody>
</table>
</div>

[% PROCESS global/footer.html.tmpl %]
