@@ -, +, @@
---
.../prog/en/modules/admin/cities.tt | 191 +-----------------
koha-tmpl/intranet-tmpl/prog/js/datatables.js | 8 +-
.../intranet-tmpl/prog/js/vue/Cities.vue | 64 ++++++
.../js/vue/components/CitiesButtonDelete.vue | 9 +
.../js/vue/components/CitiesButtonEdit.vue | 9 +
.../prog/js/vue/components/CitiesFormAdd.vue | 137 +++++++++++++
.../components/CitiesFormConfirmDelete.vue | 107 ++++++++++
.../prog/js/vue/components/CitiesList.vue | 129 ++++++++++++
.../prog/js/vue/components/CitiesToolbar.vue | 10 +
.../intranet-tmpl/prog/js/vue/main-cities.ts | 18 ++
.../intranet-tmpl/prog/js/vue/vue-shims.d.ts | 4 +
package.json | 38 +++-
tsconfig.json | 4 +
webpack.config.js | 36 ++++
14 files changed, 570 insertions(+), 194 deletions(-)
create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/Cities.vue
create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/CitiesButtonDelete.vue
create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/CitiesButtonEdit.vue
create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/CitiesFormAdd.vue
create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/CitiesFormConfirmDelete.vue
create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/CitiesList.vue
create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/CitiesToolbar.vue
create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/main-cities.ts
create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/vue-shims.d.ts
create mode 100644 tsconfig.json
create mode 100644 webpack.config.js
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/cities.tt
+++ a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/cities.tt
@@ -69,135 +69,7 @@
-
-[% FOR m IN messages %]
-
- [% SWITCH m.code %]
- [% CASE 'error_on_update' %]
- An error occurred when updating this city. Perhaps it already exists.
- [% CASE 'error_on_insert' %]
- An error occurred when adding this city. The city id might already exist.
- [% CASE 'error_on_delete' %]
- An error occurred when deleting this city. Check the logs.
- [% CASE 'success_on_update' %]
- City updated successfully.
- [% CASE 'success_on_insert' %]
- City added successfully.
- [% CASE 'success_on_delete' %]
- City deleted successfully.
- [% CASE 'already_exists' %]
- This city already exists.
- [% CASE %]
- [% m.code | html %]
- [% END %]
-
-[% END %]
-
-[% IF op == 'add_form' %]
- [% IF city %]
- Modify a city
- [% ELSE %]
- New city
- [% END %]
-
-
-[% END %]
-
-[% IF op == 'delete_confirm' %]
-
-
Delete city "[% city.city_name | html %]?"
-
- City id
- [% city.cityid | html %]
-
- City
- [% city.city_name | html %]
-
- State
- [% city.city_state | html %]
-
- ZIP/Postal code
- [% city.city_zipcode | html %]
-
- Country
- [% city.city_country | html %]
-
-
-
-
-
-[% END %]
-
-[% IF op == 'list' %]
-
-
-
- Cities
- [% IF city_name_filter %]
- Searching: [% city_name_filter | html %]
- [% END %]
-
- [% IF cities_count > 0 %]
-
-
-
-
- City ID
- City
- State
- ZIP/Postal code
- Country
- Actions
-
-
-
- [% ELSE %]
-
- [% END %]
-[% END %]
-
+
@@ -213,9 +85,7 @@
[% INCLUDE 'datatables.inc' %]
[% INCLUDE 'columns_settings.inc' %]
+ [% Asset.js("js/vue/dist/main.js") %]
+ [% Asset.js("js/vue/dist/runtime.js") %]
+
[% END %]
[% INCLUDE 'intranet-bottom.inc' %]
--- a/koha-tmpl/intranet-tmpl/prog/js/datatables.js
+++ a/koha-tmpl/intranet-tmpl/prog/js/datatables.js
@@ -511,10 +511,6 @@ jQuery.fn.dataTable.ext.errMode = function(settings, note, message) {
$.fn.kohaTable = function(options, table_settings, add_filters, default_filters) {
var settings = null;
- if ( add_filters ) {
- $(this).find('thead tr').clone(true).appendTo( $(this).find('thead') );
- }
-
if(options) {
if(!options.criteria || ['contains', 'starts_with', 'ends_with', 'exact'].indexOf(options.criteria.toLowerCase()) === -1) options.criteria = 'contains';
options.criteria = options.criteria.toLowerCase();
@@ -846,8 +842,12 @@ jQuery.fn.dataTable.ext.errMode = function(settings, note, message) {
if ( add_filters ) {
var table_dt = table.DataTable();
+
+ $(this).find('thead tr').clone().appendTo( $(this).find('thead') );
+
$(this).find('thead tr:eq(1) th').each( function (i) {
var is_searchable = table_dt.settings()[0].aoColumns[i].bSearchable;
+ $(this).removeClass('sorting');
if ( is_searchable ) {
let input_type = 'input';
if ( $(this).data('filter') ) {
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/Cities.vue
+++ a/koha-tmpl/intranet-tmpl/prog/js/vue/Cities.vue
@@ -0,0 +1,64 @@
+
+
+ {{message}}
+ {{error}}
+
+
+
+
+
+
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/CitiesButtonDelete.vue
+++ a/koha-tmpl/intranet-tmpl/prog/js/vue/components/CitiesButtonDelete.vue
@@ -0,0 +1,9 @@
+
+ Delete
+
+
+
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/CitiesButtonEdit.vue
+++ a/koha-tmpl/intranet-tmpl/prog/js/vue/components/CitiesButtonEdit.vue
@@ -0,0 +1,9 @@
+
+ Edit
+
+
+
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/CitiesFormAdd.vue
+++ a/koha-tmpl/intranet-tmpl/prog/js/vue/components/CitiesFormAdd.vue
@@ -0,0 +1,137 @@
+
+ Edit city
+ New city
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Submit
+ Cancel
+
+
+
+
+
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/CitiesFormConfirmDelete.vue
+++ a/koha-tmpl/intranet-tmpl/prog/js/vue/components/CitiesFormConfirmDelete.vue
@@ -0,0 +1,107 @@
+
+ Delete city
+
+
+
+ {{city.city_id}}
+
+
+ {{city.name}}
+
+
+ {{city.state}}
+
+
+ {{city.postal_code}}
+
+
+ {{city.country}}
+
+ Submit
+ Cancel
+
+
+
+
+
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/CitiesList.vue
+++ a/koha-tmpl/intranet-tmpl/prog/js/vue/components/CitiesList.vue
@@ -0,0 +1,129 @@
+
+
+
+
There are no cities defined.
+
Loading...
+
+
+
+
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/CitiesToolbar.vue
+++ a/koha-tmpl/intranet-tmpl/prog/js/vue/components/CitiesToolbar.vue
@@ -0,0 +1,10 @@
+
+ New city
+
+
+
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/main-cities.ts
+++ a/koha-tmpl/intranet-tmpl/prog/js/vue/main-cities.ts
@@ -0,0 +1,18 @@
+import {createApp} from 'vue'
+import BootstrapVue3 from 'bootstrap-vue-3'
+
+//import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
+
+import {library} from "@fortawesome/fontawesome-svg-core";
+import {faPlus, faPencil, faTrash} from "@fortawesome/free-solid-svg-icons";
+import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
+
+library.add(faPlus, faPencil, faTrash)
+
+import App from './Cities.vue'
+
+createApp(App)
+ .component("font-awesome-icon", FontAwesomeIcon)
+ .use(BootstrapVue3)
+ .mount('#cities')
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/vue-shims.d.ts
+++ a/koha-tmpl/intranet-tmpl/prog/js/vue/vue-shims.d.ts
@@ -0,0 +1,4 @@
+declare module "*.vue" {
+ import Vue from "vue";
+ export default Vue;
+}
--- a/package.json
+++ a/package.json
@@ -7,7 +7,15 @@
"test": "test"
},
"dependencies": {
- "bootstrap": "^4.5.2",
+ "@fortawesome/fontawesome-svg-core": "^6.1.0",
+ "@fortawesome/free-solid-svg-icons": "^6.0.0",
+ "@fortawesome/vue-fontawesome": "^3.0.0-5",
+ "@popperjs/core": "^2.11.2",
+ "babel-core": "^7.0.0-beta.3",
+ "bootstrap": "^5.1.3",
+ "bootstrap-vue": "^2.21.2",
+ "bootstrap-vue-3": "^0.1.9",
+ "css-loader": "^6.6.0",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^4.0.0",
"gulp-concat-po": "^1.0.0",
@@ -20,10 +28,15 @@
"js-yaml": "^3.13.1",
"lodash": "^4.17.12",
"merge-stream": "^2.0.0",
- "minimist": "^1.2.5"
+ "minimist": "^1.2.5",
+ "style-loader": "^3.3.1",
+ "vue": "^3.2.31",
+ "vue-router": "^3.4.3"
},
"scripts": {
"build": "node_modules/.bin/gulp build",
+ "build_js": "webpack --mode production",
+ "watch_js": "webpack --mode development --watch",
"css": "node_modules/.bin/gulp css",
"watch": "node_modules/.bin/gulp watch"
},
@@ -37,5 +50,24 @@
"js-yaml": "^3.13.1"
},
"author": "",
- "license": "GPL-3.0"
+ "license": "GPL-3.0",
+ "devDependencies": {
+ "@babel/core": "^7.17.5",
+ "@babel/preset-env": "^7.16.11",
+ "@vue/compiler-sfc": "^3.2.31",
+ "babel-loader": "^8.2.3",
+ "babelify": "^10.0.0",
+ "browserify": "^17.0.0",
+ "clean-webpack-plugin": "^4.0.0",
+ "gulp-tap": "^1.0.1",
+ "html-webpack-plugin": "^5.5.0",
+ "ts-loader": "^9.2.7",
+ "typescript": "^4.6.2",
+ "vinyl-source-stream": "^2.0.0",
+ "vue-loader": "^17.0.0",
+ "watchify": "^4.0.0",
+ "webpack": "^5.69.1",
+ "webpack-cli": "^4.9.2",
+ "webpack-dev-server": "^4.7.4"
+ }
}
--- a/tsconfig.json
+++ a/tsconfig.json
@@ -0,0 +1,4 @@
+{
+ "compilerOptions": {
+ }
+}
--- a/webpack.config.js
+++ a/webpack.config.js
@@ -0,0 +1,36 @@
+const { VueLoaderPlugin } = require("vue-loader");
+const autoprefixer = require("autoprefixer");
+const path = require("path");
+
+module.exports = {
+ entry: {
+ main: "./koha-tmpl/intranet-tmpl/prog/js/vue/main-cities.ts",
+ },
+ output: {
+ filename: "[name].js",
+ path: path.resolve(__dirname, "koha-tmpl/intranet-tmpl/prog/js/vue/dist/"),
+ chunkFilename: "[name].js",
+ },
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: "vue-loader",
+ },
+ {
+ test: /\.ts$/,
+ loader: 'ts-loader',
+ options: {
+ appendTsSuffixTo: [/\.vue$/]
+ }
+ },
+ {
+ test: /\.css$/,
+ use: ['style-loader', 'css-loader']
+ }
+ ],
+ },
+ plugins: [
+ new VueLoaderPlugin(),
+ ],
+};
--