X-Git-Url: http://git.rot13.org/?a=blobdiff_plain;f=koha-tmpl%2Fintranet-tmpl%2Fprog%2Fen%2Fmodules%2Fadmin%2Fbiblio_framework.tt;h=166663f2d290fd0ef93330c8ea5efe2b7648c763;hb=a482880352c4e9b363402a83358e1c239fbc1d74;hp=eb826a4136e4b437a9c428a6f92409d21029d26c;hpb=8e9fc9b38565e574d9537250b579db023234cbcb;p=koha.git

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/biblio_framework.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/biblio_framework.tt
index eb826a4136..166663f2d2 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/biblio_framework.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/biblio_framework.tt
@@ -1,139 +1,37 @@
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Koha &rsaquo; Administration &rsaquo; MARC frameworks
-[% IF ( add_form ) %]
-&rsaquo; [% IF ( frameworkcode ) %]Modify framework text[% ELSE %]Add framework[% END %]
-[% ELSIF ( delete_confirm ) %]
-&rsaquo; Delete framework for [% frameworktext %] ([% frameworkcode %])?
+[% IF op == 'add_form' %]
+&rsaquo; [% IF framework %]Modify framework text[% ELSE %]Add framework[% END %]
+[% ELSIF op == 'delete_confirm' %]
+&rsaquo; Delete framework for [% framework.frameworktext |html %] ([% framework.frameworkcode %])?
 [% END %]
 </title>
 [% INCLUDE 'doc-head-close.inc' %]
+<link rel="stylesheet" type="text/css" href="[% interface %]/[% theme %]/css/datatables.css" />
+[% INCLUDE 'datatables.inc' %]
 <script type="text/javascript">
-//<![CDATA[
-
-function isNotNull(f,noalert) {
-    if (f.value.length ==0) {
-        return false;
-    }
-    return true;
-}
-function toUC(f) {
-    f.value = f.value.toUpperCase();
-    return true;
-}
-/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-function Check(f) {
-    var ok=1;
-    var _alertString="";
-    var alertString2;
-    if (f.frameworkcode.value.length==0) {
-        _alertString += "\n- " + _("Framework code missing");
-    }
-    if (!(isNotNull(window.document.Aform.frameworktext))) {
-        _alertString += "\n- " + _("Description missing");
-    }
-    if (_alertString.length==0) {
-        document.Aform.submit();
-    } else {
-        alertString2  = _("Form not submitted because of the following problem(s)");
-        alertString2 += "\n------------------------------------------------------------------------------------\n";
-        alertString2 += _alertString;
-        alert(alertString2);
-        return false;
-    }
-    return true;
-}
-
-$(document).ready(function() {
-    new YAHOO.widget.Button("newframework");
-});
-//]]>
-</script>
-<script type="text/javascript">
-/* Import/Export from/to spreadsheet */
-
-    var importing = false;
-
-    $(document).ready(function() {
-        $("body").css("cursor", "auto");
-        $('.import_export_options').hide();
-        $('a.import_export_fw').click(function() {
-            if (!importing) {
-                $('.import_export_options').hide();
-                $(this).next().show('slide');
-            }
-            return false;
-        });
-        $('.import_export_close').click(function() {
-            if (!importing) {
-                $('.import_export_options').fadeOut('fast');
-                $("body").css("cursor", "auto");
-            }
-        });
-        $('.input_import').val("");
-
-        var matches = new RegExp("\\?error_import_export=(.+)$").exec(window.location.search);
-        if (matches && matches.length > 1) {
-            alert(_("Error importing the framework ") + decodeURIComponent(matches[1]));
-        }
-    });
-    
-    $(function() {
-        $('input.input_import').change( function() {
-            var filename = $(this).val();
-            if ( ! /(?:\.csv|\.sql|\.ods|\.xml)$/.test(filename)) {
-                $(this).css("background-color","yellow");
-                alert(_('Please select an ods or xml file'));
-                $(this).val("");
-                $(this).css("background-color","white");
-            }
-        });
-        $('form.form_export').submit(function() {
-            $('.import_export_options').hide();
-            return true;
-        });
-        $('form.form_import').submit(function() {
-            var id = $(this).attr('id');
-            var obj = $('#' + id + ' input:file');
-            if (/(?:\.csv|\.sql|\.ods|\.xml)$/.test(obj.val())) {
-                if (confirm('Do you really want to import the framework fields/subfields (will overwrite current configuration, for safety reasons please make before an export to have a backup file)?')) {
-                    var frameworkcode = $('#' + id + ' input:hidden[name=frameworkcode]').val();
-                    $('#importing_' + frameworkcode).find("span").html("Importing <strong>" + frameworkcode + "</strong> from <i>" + obj.val().replace(new RegExp("^.+[/\\\\]"),"") + "</i>");
-                    if (navigator.userAgent.toLowerCase().indexOf('msie') != -1) {
-                        var timestamp = new Date().getTime();
-                        $('#importing_' + frameworkcode).find("img").attr('src', '/intranet-tmpl/prog/img/loading.gif' + '?' +timestamp);
-                    }
-                    $('#importing_' + frameworkcode).css('display', 'block');
-                    if (navigator.userAgent.toLowerCase().indexOf('firefox') == -1) $("body").css("cursor", "progress");
-                    importing = true;
-                    return true;
-                } else
-                    return false;
-            }
-            obj.css("background-color","yellow");
-            alert(_('Please select an spreadsheet (csv, ods, xml) or sql file'));
-            obj.val("");
-            obj.css("background-color","white");
-            return false;
-        });
-    });
-    
-    
-
+    /* Set some variable needed in biblio_framework.js */
+    var MSG_IMPORT_ERROR = _("Error importing the framework");
+    var MSG_SELECT_FILE_FORMAT = _("Please select a CSV (.csv), ODS (.ods) or XML (.xml) spreadsheet file.");
+    var MSG_OVERWRITE_WARNING = _("Do you really want to import the framework fields and subfields? This will overwrite the current configuration. For safety reasons please use the export option to make a backup");
+    var MSG_IMPORTING_TO_FRAMEWORK = _("Importing to framework: %s. Importing from file: %s.");
+    var template_path = "[% interface %]/[% theme %]";
 </script>
+<script type="text/javascript" src="[% interface %]/[% theme %]/js/biblio_framework.js"></script>
 
 </head>
 <body id="admin_biblio_framework" class="admin">
 [% INCLUDE 'header.inc' %]
-[% INCLUDE 'cat-search.inc' %]
+[% INCLUDE 'prefs-admin-search.inc' %]
 
 <div id="breadcrumbs">
         <a href="/cgi-bin/koha/mainpage.pl">Home</a>
 &rsaquo; <a href="/cgi-bin/koha/admin/admin-home.pl">Administration</a>
 &rsaquo; <a href="/cgi-bin/koha/admin/biblio_framework.pl">MARC frameworks</a>
-[% IF ( add_form ) %]
-&rsaquo; [% IF ( frameworkcode ) %]Modify framework text[% ELSE %]Add framework[% END %]
-[% ELSIF ( delete_confirm ) %]
-&rsaquo; Delete framework for [% frameworktext %] ([% frameworkcode %])?
+[% IF op == 'add_form' %]
+&rsaquo; [% IF framework %]Modify framework text[% ELSE %]Add framework[% END %]
+[% ELSIF op == 'delete_confirm' %]
+&rsaquo; Delete framework for [% framework.frameworktext |html %] ([% framework.frameworkcode %])?
 [% END %]
 </div>
 
@@ -141,139 +39,246 @@ $(document).ready(function() {
   <div id="bd">
     <div id="yui-main">
       <div class="yui-b">
-	
-[% IF ( else ) %]<div id="toolbar">
-	<ul class="toolbar">
-    <li><a id="newframework" href="/cgi-bin/koha/admin/biblio_framework.pl?op=add_form">New framework</a></li>
-</ul></div>[% END %]
 
-[% IF ( add_form ) %]
-    <h1>[% IF ( frameworkcode ) %]Modify framework text[% ELSE %]Add framework[% END %]</h1>
-    <form action="[% script_name %]" name="Aform" method="post" onsubmit="return Check(this);">
+[% FOR m IN messages %]
+    <div class="dialog [% m.type %]">
+        [% SWITCH m.code %]
+        [% CASE 'error_on_update' %]
+            An error occurred when updating this framework. Perhaps it already exists.
+        [% CASE 'error_on_insert' %]
+            An error occurred when adding this framework. The framework might already exist.
+        [% CASE 'error_on_delete' %]
+            An error occurred when deleting this framework. Check the logs.
+        [% CASE 'success_on_update' %]
+            Framework updated successfully.
+        [% CASE 'success_on_insert' %]
+            Framework added successfully.
+        [% CASE 'success_on_delete' %]
+            Framework deleted successfully.
+        [% CASE 'already_exists' %]
+            This framework code already exists.
+        [% CASE %]
+            [% m.code %]
+        [% END %]
+    </div>
+[% END %]
+
+
+
+[% IF op == 'list'%]
+    <div id="toolbar" class="btn-toolbar">
+        <a class="btn btn-default btn-sm" id="newframework" href="/cgi-bin/koha/admin/biblio_framework.pl?op=add_form"><i class="fa fa-plus"></i> New framework</a>
+    </div>
+[% END %]
+
+[% IF op == 'add_form' %]
+    <h1>[% IF framework %]Modify framework text[% ELSE %]Add framework[% END %]</h1>
+    <form action="/cgi-bin/koha/admin/biblio_framework.pl" name="Aform" method="post" class="validated">
         <input type="hidden" name="op" value="add_validate" />
-    <fieldset class="rows">
-    <ol>
-	[% IF ( frameworkcode ) %]
-        <li><span class="label">Framework code</span><input type="hidden" id="frameworkcode" name="frameworkcode" value="[% frameworkcode %]" />[% frameworkcode %]
-            <input type="hidden" name="modif" value="1" />
-        </li>
-	[% ELSE %]
-        <li><label for="frameworkcode">Framework code</label><input type="text" id="frameworkcode" name="frameworkcode" size="4" maxlength="4" onblur="toUC(this)" /></li>
-	[% END %]
-        <li><label for="description">Description</label>
-        <input type="text" name="frameworktext" id="description" size="40" maxlength="80" value="[% frameworktext |html %]" /></li></ol></fieldset>
-        <fieldset class="action">	<input type="submit" value="Submit" class="submit" /></fieldset>
+        <fieldset class="rows">
+            <ol>
+                [% IF framework %]
+                    <li>
+                        <span class="label">Framework code: </span>
+                        <input type="hidden" id="frameworkcode" name="frameworkcode" value="[% framework.frameworkcode %]" />[% framework.frameworkcode %]
+                        <input type="hidden" name="is_a_modif" value="1" />
+                    </li>
+                [% ELSE %]
+                    <li>
+                        <label for="frameworkcode" class="required">Framework code: </label>
+                        <input type="text" id="frameworkcode" name="frameworkcode" size="4" maxlength="4" required="required" class="required" />
+                        <span class="required">Required</span>
+                    </li>
+                [% END %]
+                <li>
+                    <label for="description" class="required">Description: </label>
+                    <input type="text" name="frameworktext" id="description" size="40" maxlength="80" value="[% framework.frameworktext |html %]" required="required" class="required" />
+                    <span class="required">Required</span>
+                </li>
+            </ol>
+        </fieldset>
+        <fieldset class="action">
+            <input type="submit" value="Submit" class="submit" />
+        </fieldset>
     </form>
 [% END %]
 
-[% IF ( delete_confirm ) %]
-<div class="dialog alert">
-    <h3>Delete framework for [% frameworktext %] ([% frameworkcode %])?</h3>
-    [% IF ( total ) %]
-       <p><strong>This framework is used [% total %] times</strong>.</p>
-    [% END %]
-    <form class="inline" action="[% script_name %]" method="post"><input type="hidden" name="op" value="delete_confirmed" /><input type="hidden" name="frameworkcode" value="[% frameworkcode %]" /><input type="submit" class="approve" value="Yes, delete this framework!" />
-    </form>
-    <form class="inline" action="[% script_name %]" method="get"><input type="submit" class="deny" value="No, do not delete!" /></form>
-</div>
+[% IF op == 'delete_confirm' %]
+    <div class="dialog alert">
+        [% IF biblios_use_this_framework %]
+            <h3>This framework cannot be deleted</h3>
+            <p><strong><span class="ex">[% framework.frameworktext |text %] ([% framework.frameworkcode %])</span></strong></p>
+            <p>The framework is used [% biblios_use_this_framework %] times.</p>
+            <form action="/cgi-bin/koha/admin/biblio_framework.pl" method="get">
+                <button type="submit"><i class="fa fa-fw fa-arrow-left"></i> Return to frameworks</button>
+            </form>
+        [% ELSE %]
+            <h3>Delete framework for [% framework.frameworktext |html %] ([% framework.frameworkcode %])?</h3>
+            <form class="inline" action="/cgi-bin/koha/admin/biblio_framework.pl" method="post">
+                <input type="hidden" name="op" value="delete_confirmed" />
+                <input type="hidden" name="frameworkcode" value="[% framework.frameworkcode %]" />
+                <button type="submit" class="approve"><i class="fa fa-fw fa-check"></i> Yes, delete this framework</button>
+            </form>
+            <form class="inline" action="/cgi-bin/koha/admin/biblio_framework.pl" method="get">
+                <button type="submit" class="deny"><i class="fa fa-fw fa-remove"></i> No, do not delete</button>
+            </form>
+        [% END %]
+    </div>
 [% END %]
 
-[% IF ( else ) %]
+[% IF op == 'list' %]
 <h1>MARC frameworks</h1>
 <p>Framework name, then go to MARC biblio to set MARC editor parameters</p>
-<table>
+<table id="table_biblio_frameworks">
+    <thead>
     <tr>
         <th>Code</th>
         <th>Description</th>
         <th>&nbsp;</th>
-        <th>Edit</th>
-        <th>Delete</th>
-        <th title="Export framework structure (fields, subfields) to a spreadsheet file (.csv, .xml, .ods) or SQL file">Export</th>
-        <th title="Import framework structure (fields, subfields) from a spreadsheet file (.csv, .xml, .ods) or SQL file">Import</th>
     </tr>
+    </thead>
+    <tbody>
     <tr>
         <td>&nbsp;</td>
         <td>Default framework</td>
-        <td><a href="marctagstructure.pl?frameworkcode=[% frameworkcode %]">MARC structure</a></td>
-        <td>&nbsp;</td>
-        <td>&nbsp;</td>
-        <td><div class="import_export"><a class="import_export_fw" href="#" title="Export [% frameworkcode %] framework structure (fields, subfields) to a spreadsheet file (.csv, .xml, .ods) or SQL file">Export</a>
-            <div class="import_export_options">
-                <form action="import_export_framework.pl" name="form_[% frameworkcode %]" method="get" target="_blank"  class="form_export">
-                    <input type="hidden" name="frameworkcode" value="[% frameworkcode %]" />
-                    <ul>
-                        <li class="li_close_import_export"><span class="import_export_close" title="Close popup">Close</span></li>
-                        <li><input type="radio" name="type_export_[% frameworkcode %]" value="csv" id="type_export_[% frameworkcode %]" checked="checked" /><label for="type_export_[% frameworkcode %]" title="Export to CSV spreadsheet">Export to CSV spreadsheet</label></li>
-                        <li><input type="radio" name="type_export_[% frameworkcode %]" value="excel" id="type_export_[% frameworkcode %]" /><label for="type_export_[% frameworkcode %]" title="Export to Excel as XML format, compatible with OpenOffice/LibreOffice as well">Export to Excel with XML format</label></li>
-                        <li><input type="radio" name="type_export_[% frameworkcode %]" value="ods" id="type_export_[% frameworkcode %]" /><label for="type_export_[% frameworkcode %]">Export to OpenDocument spreadsheet format</label></li>
-                        <li><input type="radio" name="type_export_[% frameworkcode %]" value="sql" id="type_export_[% frameworkcode %]" /><label for="type_export_[% frameworkcode %]" title="Export to SQL">Export to SQL</label></li>
-                        <li><input type="submit" class="export_ok" href="#" value="Export" title="Export to a spreadsheet" /></li>
-                    </ul>
-                </form>
-            </div>
-            </div>
-        </td>
-        <td><div class="import_export"><a href="#" class="import_export_fw" title="Import [% frameworkcode %] framework structure (fields, subfields) from a spreadsheet file (.csv, .xml, .ods) or SQL file">Import</a>
-            <div class="import_export_options">
-                <form action="/cgi-bin/koha/admin/import_export_framework.pl" name="form_i_[% frameworkcode %]" id="form_i_[% frameworkcode %]" method="post" enctype="multipart/form-data" class="form_import">
-                    <input type="hidden" name="frameworkcode" value="[% frameworkcode %]" />
-                    <input type="hidden" name="action" value="import" />
-                    <ul>
-                        <li class="li_close_import_export"><span class="import_export_close" title="Close popup">Close</span></li>
-                        <li><label for="file_import_[% frameworkcode %]" title="Import from a spreadsheet, formats available: ods, xml (formatted from excel)">Spreadsheet file</label><input type="file" name="file_import_[% frameworkcode %]" id="file_import_[% frameworkcode %]" class="input_import" value="" autocomplete="off" /></li>
-                        <li><input type="submit" class="import_ok" value="Import" title="Import from a spreadsheet" /><div id="importing_[% frameworkcode %]" style="display:none" class="importing"><img src="/intranet-tmpl/prog/img/loading.gif" /><span class="importing_msg"></span></div></li>
-                    </ul>
-                </form>
+        <td>
+          <div class="dropdown">
+            <a class="btn btn-default btn-xs dropdown-toggle" id="frameworkactions[% loo.frameworkcode %]" role="button" data-toggle="dropdown" href="#">
+              Actions <b class="caret"></b>
+            </a>
+            <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="frameworkactions[% loo.frameworkcode %]">
+              <li><a href="marctagstructure.pl?frameworkcode="><i class="fa fa-eye"></i> MARC structure</a></li>
+              <!-- Trigger modal -->
+              <li><a href="#" data-toggle="modal" data-target="#exportModal_default" title="Export framework structure (fields, subfields) to a spreadsheet file (.csv, .xml, .ods)"><i class="fa fa-upload"></i> Export</a></li>
+              <!-- Trigger modal -->
+              <li><a href="#" data-toggle="modal" data-target="#importModal_[% framework.frameworkcode %][% frameworks.count %]" title="Import framework structure (fields, subfields) from a spreadsheet file (.csv, .xml, .ods)"><i class="fa fa-download"></i> Import</a></li>
+            </ul>
+            <!-- Modal to export default framework -->
+            <div class="modal" id="exportModal_default" tabindex="-1" role="dialog" aria-labelledby="exportLabelexportModal_default" aria-hidden="true">
+              <div class="modal-dialog">
+              <div class="modal-content">
+              <div class="modal-header">
+                <button type="button" class="closebtn" data-dismiss="modal" aria-hidden="true">×</button>
+                <h3 id="exportLabelexportModal_default">Export default framework</h3>
+              </div>
+              <form action="import_export_framework.pl" name="form_defaul" method="get" target="_blank"  class="form_export">
+                <div class="modal-body">
+                  <fieldset>
+                    <input type="hidden" name="frameworkcode" value="" />
+                    <p><label for="csv_type_export_default"><input type="radio" name="type_export_default" value="csv" id="csv_type_export_default" checked="checked" /> Export to CSV spreadsheet</label></p>
+                    <p><label for="xml_type_export_default"><input type="radio" name="type_export_default" value="excel" id="xml_type_export_default" /> Export to Excel with XML format, compatible with OpenOffice/LibreOffice as well</label></p>
+                    <p><label for="ods_type_export_default"><input type="radio" name="type_export_default" value="ods" id="ods_type_export_default" /> Export to OpenDocument spreadsheet format</label></p>
+                  </fieldset>
+                </div>
+                <div class="modal-footer">
+                  <button type="submit" class="btn btn-default">Export</button>
+                  <button class="btn btn-link" data-dismiss="modal" aria-hidden="true">Cancel</button>
+                </div>
+              </form>
+              </div>
+              </div>
             </div>
+
+            <!-- Modal to import default framework -->
+            <div class="modal" id="importModal_[% framework.frameworkcode %][% frameworks.count %]" tabindex="-1" role="dialog" aria-labelledby="importLabelexportModal_default[% frameworks.count %]" aria-hidden="true">
+              <div class="modal-dialog">
+              <div class="modal-content">
+              <div class="modal-header">
+                <button type="button" class="closebtn" data-dismiss="modal" aria-hidden="true">×</button>
+                <h3 id="importLabelexportModal_[% framework.frameworkcode %][% frameworks.count %]">Import default framework structure (fields and subfields) from a spreadsheet file (.csv, .xml, .ods)</h>
+              </div>
+              <form action="/cgi-bin/koha/admin/import_export_framework.pl" name="form_i_default" id="form_i_default" method="post" enctype="multipart/form-data" class="form_import">
+                <div class="modal-body">
+                  <input type="hidden" name="frameworkcode" value="default" />
+                  <input type="hidden" name="action" value="import" />
+                  <p><label for="file_import_default">Upload file:</label> <input type="file" name="file_import_default" id="file_import_default" class="input_import" /></p>
+                    <div id="importing_default" style="display:none" class="importing"><img src="[% interface %]/[% theme %]/img/spinner-small.gif" alt="" /><span class="importing_msg"></span></div>
+                </div>
+                <div class="modal-footer">
+                  <button type="submit" class="btn btn-default">Import</button>
+                  <button class="btn btn-link" data-dismiss="modal" aria-hidden="true">Close</button>
+                </div>
+              </form>
+              </div>
+              </div>
             </div>
+          </div>
         </td>
     </tr>
-    <!-- note highlight assignment appears backwards because we already have a normal row for Default -->
-    [% FOREACH loo IN loop %]
-    [% IF ( loop.odd ) %]<tr class="highlight">
-    [% ELSE %]<tr>
-    [% END %]
+
+    [% FOREACH loo IN frameworks %]
+        <tr>
             <td>[% loo.frameworkcode %]</td>
-            <td>[% loo.frameworktext %]</td>
-            <td><a href="marctagstructure.pl?frameworkcode=[% loo.frameworkcode %]" >MARC structure</a></td>
-            <td><a href="[% loo.script_name %]?op=add_form&amp;frameworkcode=[% loo.frameworkcode |html %]">Edit</a></td>
-            <td><a href="[% loo.script_name %]?op=delete_confirm&amp;frameworkcode=[% loo.frameworkcode |html %]">Delete</a></td>
+            <td>[% loo.frameworktext |html %]</td>
             <td>
-            <div class="import_export"><a class="import_export_fw" href="#" title="Export [% loo.frameworkcode %] framework structure (fields, subfields) to a spreadsheet file (.csv, .xml, .ods) or SQL file">Export</a>
-                <div class="import_export_options">
-                    <form action="import_export_framework.pl" name="form_[% loo.frameworkcode %]" method="get" target="_blank" class="form_export">
+              <div class="dropdown">
+                <a class="btn btn-default btn-xs dropdown-toggle" id="frameworkactions[% loo.frameworkcode %]" role="button" data-toggle="dropdown" href="#">
+                  Actions <b class="caret"></b>
+                </a>
+                <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="frameworkactions[% loo.frameworkcode %]">
+                  <li><a href="marctagstructure.pl?frameworkcode=[% loo.frameworkcode %]"><i class="fa fa-eye"></i> MARC structure</a></li>
+                  <li><a href="/cgi-bin/koha/admin/biblio_framework.pl?op=add_form&amp;frameworkcode=[% loo.frameworkcode |html %]"><i class="fa fa-pencil"></i> Edit</a></li>
+                  <li><a href="/cgi-bin/koha/admin/biblio_framework.pl?op=delete_confirm&amp;frameworkcode=[% loo.frameworkcode |html %]"><i class="fa fa-trash"></i> Delete</a></li>
+                  <!-- Trigger modal -->
+                  <li><a href="#" data-toggle="modal" data-target="#exportModal_[% loo.frameworkcode %][% loop.count %]" title="Export framework structure (fields, subfields) to a spreadsheet file (.csv, .xml, .ods)"><i class="fa fa-upload"></i> Export</a></li>
+                  <!-- Trigger modal -->
+                  <li><a href="#" data-toggle="modal" data-target="#importModal_[% loo.frameworkcode %][% loop.count %]" title="Import framework structure (fields, subfields) from a spreadsheet file (.csv, .xml, .ods)"><i class="fa fa-download"></i> Import</a></li>
+                </ul>
+                <!-- Modal to export other framework -->
+                <div class="modal" id="exportModal_[% loo.frameworkcode %][% loop.count %]" tabindex="-1" role="dialog" aria-labelledby="exportLabelexportModal_[% loo.frameworkcode %][% loop.count %]" aria-hidden="true">
+                  <div class="modal-dialog">
+                  <div class="modal-content">
+                  <div class="modal-header">
+                    <button type="button" class="closebtn" data-dismiss="modal" aria-hidden="true">×</button>
+                    <h3 id="exportLabelexportModal_[% loo.frameworkcode %][% loop.count %]">Export [% loo.frameworktext |html %] framework</h3>
+                  </div>
+                  <form action="import_export_framework.pl" name="form_[% loo.frameworkcode %]" method="get" target="_blank"  class="form_export">
+                    <div class="modal-body">
+                      <fieldset>
                         <input type="hidden" name="frameworkcode" value="[% loo.frameworkcode %]" />
-                        <ul>
-                            <li class="li_close_import_export"><span class="import_export_close" title="Close popup">Close</span></li>
-                            <li><input type="radio" name="type_export_[% loo.frameworkcode %]" value="csv" id="type_export_[% loo.frameworkcode %]" checked="checked" /><label for="type_export_[% loo.frameworkcode %]" title="Export to CSV spreadsheet">Export to CSV spreadsheet</label></li>
-                            <li><input type="radio" name="type_export_[% loo.frameworkcode %]" value="excel" id="type_export_[% loo.frameworkcode %]" /><label for="type_export_[% loo.frameworkcode %]" title="Export to Excel as XML format, compatible with OpenOffice/LibreOffice as well">Export to Excel as XML format</label></li>
-                            <li><input type="radio" name="type_export_[% loo.frameworkcode %]" value="ods" id="type_export_[% loo.frameworkcode %]" /><label for="type_export_[% loo.frameworkcode %]">Export to OpenDocument spreadsheet format</label></li>
-                            <li><input type="radio" name="type_export_[% loo.frameworkcode %]" value="sql" id="type_export_[% loo.frameworkcode %]" /><label for="type_export_[% loo.frameworkcode %]" title="Export to SQL">Export to SQL</label></li>
-                            <li><input type="submit" class="export_ok" href="#" value="Export" title="Export to a spreadsheet" /></li>
-                        </ul>
-                    </form>
+                        <p><label for="csv_type_export_[% loo.frameworkcode %][% loop.count %]"><input type="radio" name="type_export_[% loo.frameworkcode %]" value="csv" id="csv_type_export_[% loo.frameworkcode %][% loop.count %]" checked="checked" /> Export to CSV spreadsheet</label></p>
+                        <p><label for="xml_type_export_[% loo.frameworkcode %][% loop.count %]"><input type="radio" name="type_export_[% loo.frameworkcode %]" value="excel" id="xml_type_export_[% loo.frameworkcode %][% loop.count %]" /> Export to Excel with XML format, compatible with OpenOffice/LibreOffice as well</label></p>
+                        <p><label for="ods_type_export_[% loo.frameworkcode %][% loop.count %]"><input type="radio" name="type_export_[% loo.frameworkcode %]" value="ods" id="ods_type_export_[% loo.frameworkcode %][% loop.count %]" /> Export to OpenDocument spreadsheet format</label></p>
+                      </fieldset>
+                    </div>
+                    <div class="modal-footer">
+                      <button type="submit" class="btn btn-default">Export</button>
+                      <button class="btn btn-link" data-dismiss="modal" aria-hidden="true">Cancel</button>
+                    </div>
+                  </form>
+                  </div>
+                  </div>
                 </div>
+
+                <!-- Modal to import other framework -->
+                <div class="modal" id="importModal_[% loo.frameworkcode %][% loop.count %]" tabindex="-1" role="dialog" aria-labelledby="importLabelexportModal_[% loo.frameworkcode %][% loop.count %]" aria-hidden="true">
+                  <div class="modal-dialog">
+                  <div class="modal-content">
+                  <div class="modal-header">
+                    <button type="button" class="closebtn" data-dismiss="modal" aria-hidden="true">×</button>
+                    <h3 id="importLabelexportModal_[% loo.frameworkcode %][% loop.count %]">Import [% loo.frameworkcode %] framework structure (fields and subfields) from a spreadsheet file (.csv, .xml, .ods)</h3>
+                  </div>
+                  <form action="/cgi-bin/koha/admin/import_export_framework.pl" name="form_i_[% loo.frameworkcode %]" id="form_i_[% loo.frameworkcode %]" method="post" enctype="multipart/form-data" class="form_import">
+                    <div class="modal-body">
+                      <input type="hidden" name="frameworkcode" value="[% loo.frameworkcode %]" />
+                      <input type="hidden" name="action" value="import" />
+                      <p><label for="file_import_[% loo.frameworkcode %]">Upload file:</label> <input type="file" name="file_import_[% loo.frameworkcode %]" id="file_import_[% loo.frameworkcode %]" class="input_import" /></p>
+                      <div id="importing_[% loo.frameworkcode %]" style="display:none" class="importing"><img src="[% interface %]/[% theme %]/img/spinner-small.gif" alt="" /><span class="importing_msg"></span></div>
+                    </div>
+                    <div class="modal-footer">
+                      <button type="submit" class="btn btn-default">Import</button>
+                      <button class="btn btn-link" data-dismiss="modal" aria-hidden="true">Close</button>
+                    </div>
+                  </form>
+                  </div>
+                  </div>
                 </div>
+              </div>
             </td>
-            <td><div class="import_export"><a class="import_export_fw" href="#" title="Import [% loo.frameworkcode %] framework structure (fields, subfields) from a spreadsheet file (.csv, .xml, .ods) or SQL file">Import</a>
-            <div class="import_export_options">
-                <form action="/cgi-bin/koha/admin/import_export_framework.pl" name="form_i_[% loo.frameworkcode %]" id="form_i_[% loo.frameworkcode %]" method="post" enctype="multipart/form-data" class="form_import">
-                    <input type="hidden" name="frameworkcode" value="[% loo.frameworkcode %]" />
-                    <input type="hidden" name="action" value="import" />
-                    <ul>
-                        <li class="li_close_import_export"><span class="import_export_close" title="Close popup">Close</span></li>
-                        <li><label for="file_import_[% loo.frameworkcode %]" title="Import from a spreadsheet, formats available: ods, xml (formatted from excel)">Spreadsheet file</label><input type="file" name="file_import_[% loo.frameworkcode %]" id="file_import_[% loo.frameworkcode %]" class="input_import" value="" autocomplete="off" /></li>
-                        <li><input type="submit" class="import_ok" value="Import" title="Import from a spreadsheet" /><div id="importing_[% loo.frameworkcode %]" style="display:none" class="importing"><img src="/intranet-tmpl/prog/img/loading.gif" /><span class="importing_msg"></span></div></li>
-                    </ul>
-                </form>
-            </div>
-            </div>
-        </td>
         </tr>
+
     [% END %]
 </table>
-    [% IF ( previous ) %]<a href="[% previous %]">&lt;&lt; Previous</a>[% END %]
-    [% IF ( next ) %]<a href="[% next %]">Next &gt;&gt;</a>[% END %]
 
 [% END %]
     </div>