Attachment #131371 for bug #30225

View | Details | Raw Unified | Return to bug 30225
Collapse All | Expand All




    <div class="row">
        <div class="col-sm-10 col-sm-push-2">
            <main>
                  <div id="cities"></div>
[% FOR m IN messages %]
    <div class="dialog [% m.type | html %]">
        [% 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 %]
    </div>
[% END %]

[% IF op == 'add_form' %]
    [% IF city %]
        <h1>Modify a city</h1>
    [% ELSE %]
        <h1>New city</h1>
    [% END %]

    <form action="/cgi-bin/koha/admin/cities.pl" name="Aform" method="post" class="validated">
        <input type="hidden" name="op" value="add_validate" />
        <input type="hidden" name="cityid" value="[% city.cityid | html %]" />

        <fieldset class="rows">
            <ol>
                [% IF city %]
                    <li><span class="label">City ID: </span>[% city.cityid | html %]</li>
                [% END %]
                <li>
                    <label for="city_name" class="required">City: </label>
                    <input type="text" name="city_name" id="city_name" size="80" maxlength="100" value="[% city.city_name | html %]" required="required" class="required" /> <span class="required">Required</span>
                </li>
                <li>
                    <label for="city_state">State: </label>
                    <input type="text" name="city_state" id="city_state" size="80" maxlength="100" value="[% city.city_state | html %]" />
                </li>
                <li>
                    <label for="city_zipcode" class="required">ZIP/Postal code: </label>
                    <input type="text" name="city_zipcode" id="city_zipcode" size="20" maxlength="20" value="[% city.city_zipcode | html %]" required="required" class="required" /> <span class="required">Required</span>
                </li>
                <li>
                    <label for="city_country">Country: </label>
                    <input type="text" name="city_country" id="city_country" size="80" maxlength="100" value="[% city.city_country | html %]" />
                </li>
            </ol>
        </fieldset>

        <fieldset class="action">
            <input type="submit" value="Submit" />
            <a class="cancel" href="/cgi-bin/koha/admin/cities.pl">Cancel</a>
        </fieldset>
    </form>
[% END %]

[% IF op == 'delete_confirm' %]
    <div class="dialog alert">
        <h3>Delete city "[% city.city_name | html %]?"</h3>
        <table>
            <tr><th>City id</th>
                <td>[% city.cityid | html %]</td>
            </tr>
            <tr><th>City</th>
                <td>[% city.city_name | html %]</td>
            </tr>
            <tr><th>State</th>
                <td>[% city.city_state | html %]</td>
            </tr>
            <tr><th>ZIP/Postal code</th>
                <td>[% city.city_zipcode | html %]</td>
            </tr>
            <tr><th>Country</th>
                <td>[% city.city_country | html %]</td>
            </tr>
        </table>
        <form action="/cgi-bin/koha/admin/cities.pl" method="post">
            <input type="hidden" name="op" value="delete_confirmed" />
            <input type="hidden" name="cityid" value="[% city.cityid | html %]" />
            <button type="submit" class="approve"><i class="fa fa-fw fa-check"></i> Yes, delete</button>
        </form>
        <form action="/cgi-bin/koha/admin/cities.pl" method="get">
            <button type="submit" class="deny"><i class="fa fa-fw fa-remove"></i> No, do not delete</button>
        </form>
    </div>
[% END %]

[% IF op == 'list' %]

    <div id="toolbar" class="btn-toolbar">
        <a class="btn btn-default" id="newcity" href="/cgi-bin/koha/admin/cities.pl?op=add_form"><i class="fa fa-plus"></i> New city</a>
    </div>

    <h2>Cities</h2>
    [% IF city_name_filter %]
        Searching: [% city_name_filter | html %]
    [% END %]

    [% IF cities_count > 0 %]
        <div class="table_cities_table_controls"></div>
        <table id="table_cities">
            <thead>
                <tr>
                    <th>City ID</th>
                    <th>City</th>
                    <th>State</th>
                    <th>ZIP/Postal code</th>
                    <th>Country</th>
                    <th data-class-name="actions noExport">Actions</th>
                </tr>
            </thead>
        </table>
    [% ELSE %]
        <div class="dialog message">
            There are no cities defined. <a href="/cgi-bin/koha/admin/cities.pl?op=add_form">Create a new city</a>.
        </div>
    [% END %]
[% END %]

            </main>
        </div> <!-- /.col-sm-10.col-sm-push-2 -->


    [% INCLUDE 'datatables.inc' %]
    [% INCLUDE 'columns_settings.inc' %]
    <script>

        var columns_settings = [% TablesSettings.GetColumns( 'admin', 'cities', 'table_cities', 'json' ) | $raw %];
        $(document).ready(function() {
            var cities_table_url = '/api/v1/cities?';

        [% IF city_name_filter %]

            };
            cities_table_url += 'q='+ encodeURIComponent(JSON.stringify(city_name_filter));
        [% END %]

            var cities_table = $("#table_cities").kohaTable({
                "ajax": {
                    "url": cities_table_url
                },
                "order": [[ 1, "asc" ]],
                "columnDefs": [ {
                    "targets": [0,1,2,3,4],
                    "render": function (data, type, row, meta) {
                        if ( type == 'display' ) {
                            return data.escapeHtml();
                        }
                        return data;
                    }
                } ],
                "columns": [
                    {
                        "data": "city_id",
                        "searchable": true,
                        "orderable": true
                    },
                    {
                        "data": "name",
                        "searchable": true,
                        "orderable": true
                    },
                    {
                        "data": "state",
                        "searchable": true,
                        "orderable": true
                    },
                    {
                        "data": "postal_code",
                        "searchable": true,
                        "orderable": true
                    },
                    {
                        "data": "country",
                        "searchable": true,
                        "orderable": true
                    },
                    {
                        "data": function( row, type, val, meta ) {

                            var result = '<a class="btn btn-default btn-xs" role="button" href="/cgi-bin/koha/admin/cities.pl?op=add_form&amp;cityid='+ encodeURIComponent(row.city_id) +'"><i class="fa fa-pencil" aria-hidden="true"></i> '+_("Edit")+'</a>'+"\n";
                            result += '<a class="btn btn-default btn-xs" role="button" href="/cgi-bin/koha/admin/cities.pl?op=delete_confirm&amp;cityid='+ encodeURIComponent(row.city_id) +'"><i class="fa fa-trash" aria-hidden="true"></i> '+_("Delete")+'</a>';
                            return result;

                        },
                        "searchable": false,
                        "orderable": false
                    }
                ]
            }, columns_settings, 1);

        });
    </script>
    [% Asset.js("js/vue/dist/main.js") %]
    [% Asset.js("js/vue/dist/runtime.js") %]

[% END %]
[% INCLUDE 'intranet-bottom.inc' %]




    $.fn.kohaTable = function(options, columns_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();


        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 ) {
                    var title = $(this).text();
                    var existing_search = table_dt.column(i).search();




<template>
    <Toolbar v-if="op=='list'" @switch-view="switchView"/>
    <b-alert v-if="message" variant="success" show>{{message}}</b-alert>
    <b-alert v-if="error" variant="warning" show>{{error}}</b-alert>
    <List v-if="op=='list'" @set-current-city-id="setCurrentCityID" @switch-view="switchView" @set-error="setError"/>
    <AddForm v-if="op=='add-form'" :city_id=city_id @city-created="cityCreated" @city-updated="cityUpdated" @set-error="setError" @switch-view="switchView"/>
    <ConfirmDeleteForm v-if="op=='confirm-delete-form'" :city_id=city_id @city-deleted="cityDeleted" @switch-view="switchView"/>
</template>

<script>
import Toolbar from "./components/CitiesToolbar.vue";
import List from "./components/CitiesList.vue";
import AddForm from "./components/CitiesFormAdd.vue";
import ConfirmDeleteForm from "./components/CitiesFormConfirmDelete.vue";

import {reactive, computed} from "vue";

export default {
    data() {
        return {city_id: null, op: 'list', message: null, error: null}
    },
    methods: {
        switchView(view) {
            this.message = null
            this.error = null
            this.op = view
        },
        cityCreated() {
            this.message = "City created"
            this.error = null
            this.city_id = null
            this.op = 'list'
        },
        cityUpdated() {
            this.message = "City updated"
            this.error = null
            this.city_id = null
            this.op = 'list'
        },
        cityDeleted() {
            this.message = "City deleted"
            this.error = null
            this.city_id = null
            this.op = 'list'
        },
        setCurrentCityID(city_id){
            this.city_id = city_id
        },
        setError(error){
            this.message = null
            this.error = "Something went wrong: " + error
        },
    },
    components: {
        Toolbar,
        List,
        AddForm,
        ConfirmDeleteForm,
    },
    emits:['set-error'],
};
</script>




<template>
    <h2 v-if="city.city_id">Edit city</h2>
    <h2 v-else>New city</h2>
    <div>
        <b-form @submit="onSubmit">
            <b-form-group
                id="city_name"
                label="City name:"
                label-for="city_name"
                label-cols="4"
                label-cols-lg="2"
            >
                <b-form-input
                    id="city_name"
                    v-model="city.name"
                    placeholder="City name"
                    required
                ></b-form-input>
            </b-form-group>
            <b-form-group
                id="city_state"
                label="State:"
                label-for="city_state"
                label-cols="4" label-cols-lg="2"
            >
                <b-form-input
                    id="city_state"
                    v-model="city.state"
                    placeholder="City state"
                ></b-form-input>
            </b-form-group>
            <b-form-group
                id="city_postal_code"
                label="ZIP/Postal code"
                label-for="postal_code"
                label-cols="4" label-cols-lg="2"
            >
                <b-form-input
                    id="postal_code"
                    v-model="city.postal_code"
                    placeholder="City postal code"
                    required
                ></b-form-input>
            </b-form-group>
            <b-form-group
                id="city_country"
                label="Country:"
                label-for="city_country"
                label-cols="4" label-cols-lg="2"
            >
                <b-form-input
                    id="city_country"
                    v-model="city.country"
                    placeholder="City country"
                ></b-form-input>
            </b-form-group>
            <b-button type="submit" variant="primary">Submit</b-button>
            <a href="#" @click="$emit('switch-view', 'list')">Cancel</a>
        </b-form>
    </div>
</template>

<script>


export default {
    data() {
        return {
            city: {
                city_id: null,
                name: '',
                state: '',
                postal_code: '',
                country: '',
            }
        }
    },
   created() {
        if( this.city_id ) {

            const apiUrl = '/api/v1/cities/' + this.city_id;

            fetch(apiUrl)
                .then(res => res.json())
                .then(
                    (result) => {
                        this.city = result
                    },
                    (error) => {
                        this.$emit('set-error', error)
                    }
                )
        }
   },
    methods:{
        onSubmit(){

            let city = this.city;
            let apiUrl = '/api/v1/cities'

            const myHeaders = new Headers()
            myHeaders.append('Content-Type', 'application/json')

            let method = 'POST'
            if ( city.city_id ) {
                method = 'PUT'
                apiUrl += '/' + city.city_id
            }
            delete city.city_id

            const options = {
                method: method,
                body: JSON.stringify(city),
                myHeaders
            }

            fetch(apiUrl, options)
                .then(response => {
                    if ( response.status == 200 ) {
                        this.$emit('city-updated')
                    } else if ( response.status == 201 ) {
                        this.$emit('city-created')
                    } else {
                        this.$emit('set-error', response.message || response.statusText)
                    }
                }, (error) => {
                    this.$emit('set-error', error)
                })
        }
    },
    emits: ['city-created', 'city-updated', 'set-error', 'switch-view'],
    props: {
        city_id: Number
    },
    name: "CitiesFormAdd.vue",
}
</script>




<template>
    <h2> Delete city</h2>
    <div>
        <b-form @submit="onSubmit">
            <b-form-group
                id="city_id"
                label="City ID:"
                label-for="city_id"
                label-cols="4"
                label-cols-lg="2"
            >
                {{city.city_id}}
            </b-form-group>
            <b-form-group
                id="city_name"
                label="City name:"
                label-for="city_name"
                label-cols="4"
                label-cols-lg="2"
            >
                {{city.name}}
            </b-form-group>
            <b-form-group
                id="city_state"
                label="State:"
                label-for="city_state"
                label-cols="4" label-cols-lg="2"
            >
                {{city.state}}
            </b-form-group>
            <b-form-group
                id="city_postal_code"
                label="ZIP/Postal code"
                label-for="postal_code"
                label-cols="4" label-cols-lg="2"
            >
                {{city.postal_code}}
            </b-form-group>
            <b-form-group
                id="city_country"
                label="Country:"
                label-for="city_country"
                label-cols="4" label-cols-lg="2"
            >
                {{city.country}}
            </b-form-group>
            <b-button type="submit" variant="primary">Submit</b-button>
            <a href="#" @click="$emit('switch-view', 'list')">Cancel</a>
        </b-form>
    </div>
</template>

<script>

export default {
    data() {
        return {
            city: {},
        }
    },
    created() {
        console.log("created" + this.city_id)
        const apiUrl = '/api/v1/cities/' + this.city_id;

        fetch(apiUrl)
            .then(res => res.json())
            .then(
                (result) => {
                    this.city = result
                },
                (error) => {
                    this.$emit('set-error', error)
                }
            )
    },
    methods:{
        onSubmit(){

            let apiUrl = '/api/v1/cities/' + this.city_id

            const myHeaders = new Headers()
            myHeaders.append('Content-Type', 'application/json')

            const options = {
                method: 'DELETE',
                myHeaders
            }

            fetch(apiUrl, options)
                .then(response => {
                    if ( response.status == 204 ) {
                        this.$emit('city-deleted')
                    } else {
                        this.$emit('set-error', response.message || response.statusText)
                    }
                }, (error) => {
                    this.$emit('set-error', error)
                })
        }
    },
    emits: ['city-deleted', 'set-error', 'switch-view'],
    props: {
        city_id: Number
    },
    name: "CitiesFormConfirmDelete.vue",
}
</script>




<template>
    <div>
        <table v-if="cities.length" id="my_table"></table>
        <div v-else-if="this.initialized" class="dialog message">There are no cities defined.</div>
        <div v-else>Loading...</div>
    </div>
</template>

<script>
import CitiesButtonEdit from "./CitiesButtonEdit.vue";
import CitiesButtonDelete from "./CitiesButtonDelete.vue";
import {createVNode, defineComponent, render, resolveComponent} from 'vue'
export default {
    name: "CitiesList.vue",
    created() {
        const apiUrl = '/api/v1/cities';

        fetch(apiUrl)
            .then(res => res.json())
            .then(
                (result) => {
                    this.cities = result
                    this.initialized = true
                },
                (error) => {
                    this.$emit('set-error', error)
                }
            )
    },
    updated() {
        let edit_city = this.edit_city;
        let delete_city = this.delete_city;
        $('#my_table').kohaTable({
            "ajax": {
                "url": cities_table_url,
            },
            "order": [[1, "asc"]],
            "columnDefs": [{
                "targets": [0, 1, 2, 3, 4],
                "render": function (data, type, row, meta) {
                    if (type == 'display') {
                        return escape_str(data);
                    }
                    return data;
                }
            }],
            "columns": [
                {
                    "title": __("City ID"),
                    "data": "city_id",
                    "searchable": true,
                    "orderable": true
                },
                {
                    "title": __("City"),
                    "data": "name",
                    "searchable": true,
                    "orderable": true
                },
                {
                    "title": __("State"),
                    "data": "state",
                    "searchable": true,
                    "orderable": true
                },
                {
                    "title": __("ZIP/Postal code"),
                    "data": "postal_code",
                    "searchable": true,
                    "orderable": true
                },
                {
                    "title": __("Country"),
                    "data": "country",
                    "searchable": true,
                    "orderable": true
                },
                {
                    "title": __("Actions"),
                    "data": function (row, type, val, meta) {
                        return '<div class="actions" data-city_id="' + row.city_id + '"></div>';
                    },
                    "searchable": false,
                    "orderable": false
                }
            ],
            drawCallback: function (settings) {
                $.each($(this).find(".actions"), function (index, e) {
                    let city_id = $(e).data('city_id')
                    let editButton = createVNode(CitiesButtonEdit, {
                        onClick: () => {
                            edit_city(city_id)
                        }
                    })
                    let deleteButton = createVNode(CitiesButtonDelete, {
                        onClick: () => {
                            delete_city(city_id)
                        }
                    })
                    let n = createVNode('span', {}, [editButton, deleteButton]);
                    render(n, e);
                });
            }

        }, columns_settings, 1);
    },
    beforeUnmount() {
        $('#my_table')
            .DataTable()
            .destroy(true);
    },
    data: function () {
        return {
            cities: [],
            initialized: false,
        }
    },
    methods: {
        edit_city: function (city_id) {
            this.$emit('set-current-city-id', city_id)
            this.$emit('switch-view', 'add-form')
        },
        delete_city: function (city_id) {
            this.$emit('set-current-city-id', city_id)
            this.$emit('switch-view', 'confirm-delete-form')
        },
    }
}
</script>

Line 0 Link Here

(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/components/CitiesToolbar.vue (+10 lines)
	1	<template>
	2	<b-button @click="$emit('switch-view', 'add-form')" id="newcity" variant="default"><font-awesome-icon icon="plus" /> New city</b-button>
	3	</template>
	4
	5	<script>
	6	export default {
	7	name: "CitiesToolbar.vue",
	8	emits: ['switch-view'],
	9	}
	10	</script>




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')

Lines 7-13 Link Here

(-)a/package.json (-3 / +34 lines)
7	"test": "test"	7	"test": "test"
8	},	8	},
9	"dependencies": {	9	"dependencies": {
10	"bootstrap": "^4.5.2",	10	"@fortawesome/fontawesome-svg-core": "^1.3.0",
		11	"@fortawesome/free-solid-svg-icons": "^6.0.0",
		12	"@fortawesome/vue-fontawesome": "^3.0.0-5",
		13	"@popperjs/core": "^2.11.2",
		14	"babel-core": "^7.0.0-beta.3",
		15	"bootstrap": "^5.1.3",
		16	"bootstrap-vue": "^2.21.2",
		17	"css-loader": "^6.6.0",
11	"gulp": "^4.0.2",	18	"gulp": "^4.0.2",
12	"gulp-autoprefixer": "^4.0.0",	19	"gulp-autoprefixer": "^4.0.0",
13	"gulp-concat-po": "^1.0.0",	20	"gulp-concat-po": "^1.0.0",
Lines 20-29 Link Here
20	"js-yaml": "^3.13.1",	27	"js-yaml": "^3.13.1",
21	"lodash": "^4.17.12",	28	"lodash": "^4.17.12",
22	"merge-stream": "^2.0.0",	29	"merge-stream": "^2.0.0",
23	"minimist": "^1.2.5"	30	"minimist": "^1.2.5",
		31	"style-loader": "^3.3.1",
		32	"vue": "^3.2.31",
		33	"vue-router": "^3.4.3"
24	},	34	},
25	"scripts": {	35	"scripts": {
26	"build": "node_modules/.bin/gulp build",	36	"build": "node_modules/.bin/gulp build",
		37	"build_js": "webpack --mode production",
		38	"watch_js": "webpack --mode development --watch",
27	"css": "node_modules/.bin/gulp css",	39	"css": "node_modules/.bin/gulp css",
28	"watch": "node_modules/.bin/gulp watch"	40	"watch": "node_modules/.bin/gulp watch"
29	},	41	},
Lines 37-41 Link Here
37	"js-yaml": "^3.13.1"	49	"js-yaml": "^3.13.1"
38	},	50	},
39	"author": "",	51	"author": "",
40	"license": "GPL-3.0"	52	"license": "GPL-3.0",
		53	"devDependencies": {
		54	"@babel/core": "^7.17.5",
		55	"@babel/preset-env": "^7.16.11",
		56	"@vue/compiler-sfc": "^3.2.31",
		57	"babel-loader": "^8.2.3",
		58	"babelify": "^10.0.0",
		59	"browserify": "^17.0.0",
		60	"clean-webpack-plugin": "^4.0.0",
		61	"gulp-tap": "^1.0.1",
		62	"html-webpack-plugin": "^5.5.0",
		63	"ts-loader": "^9.2.7",
		64	"typescript": "^4.6.2",
		65	"vinyl-source-stream": "^2.0.0",
		66	"vue-loader": "^17.0.0",
		67	"watchify": "^4.0.0",
		68	"webpack": "^5.69.1",
		69	"webpack-cli": "^4.9.2",
		70	"webpack-dev-server": "^4.7.4"
		71	}
41	}	72	}

Line 0 Link Here

(-)a/tsconfig.json (+4 lines)
	1	{
	2	"compilerOptions": {
	3	}
	4	}




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(),
  ],
};

Return to bug 30225

Lines 505-514 jQuery.fn.dataTable.ext.errMode = function(settings, note, message) { Link Here

(-)a/koha-tmpl/intranet-tmpl/prog/js/datatables.js (-4 / +4 lines)
505	$.fn.kohaTable = function(options, columns_settings, add_filters, default_filters) {	505	$.fn.kohaTable = function(options, columns_settings, add_filters, default_filters) {
506	var settings = null;	506	var settings = null;
507		507
508	if ( add_filters ) {
509	$(this).find('thead tr').clone(true).appendTo( $(this).find('thead') );
510	}
511
512	if(options) {	508	if(options) {
513	if(!options.criteria \|\| ['contains', 'starts_with', 'ends_with', 'exact'].indexOf(options.criteria.toLowerCase()) === -1) options.criteria = 'contains';	509	if(!options.criteria \|\| ['contains', 'starts_with', 'ends_with', 'exact'].indexOf(options.criteria.toLowerCase()) === -1) options.criteria = 'contains';
514	options.criteria = options.criteria.toLowerCase();	510	options.criteria = options.criteria.toLowerCase();
Lines 772-779 jQuery.fn.dataTable.ext.errMode = function(settings, note, message) { Link Here
772		768
773	if ( add_filters ) {	769	if ( add_filters ) {
774	var table_dt = table.DataTable();	770	var table_dt = table.DataTable();
		771
		772	$(this).find('thead tr').clone().appendTo( $(this).find('thead') );
		773
775	$(this).find('thead tr:eq(1) th').each( function (i) {	774	$(this).find('thead tr:eq(1) th').each( function (i) {
776	var is_searchable = table_dt.settings()[0].aoColumns[i].bSearchable;	775	var is_searchable = table_dt.settings()[0].aoColumns[i].bSearchable;
		776	$(this).removeClass('sorting');
777	if ( is_searchable ) {	777	if ( is_searchable ) {
778	var title = $(this).text();	778	var title = $(this).text();
779	var existing_search = table_dt.column(i).search();	779	var existing_search = table_dt.column(i).search();

Lines 69-203 Link Here

(-)a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/cities.tt (-187 / +4 lines)
69	<div class="row">	69	<div class="row">
70	<div class="col-sm-10 col-sm-push-2">	70	<div class="col-sm-10 col-sm-push-2">
71	<main>	71	<main>
72		72	<div id="cities"></div>
73	[% FOR m IN messages %]
74	<div class="dialog [% m.type \| html %]">
75	[% SWITCH m.code %]
76	[% CASE 'error_on_update' %]
77	An error occurred when updating this city. Perhaps it already exists.
78	[% CASE 'error_on_insert' %]
79	An error occurred when adding this city. The city id might already exist.
80	[% CASE 'error_on_delete' %]
81	An error occurred when deleting this city. Check the logs.
82	[% CASE 'success_on_update' %]
83	City updated successfully.
84	[% CASE 'success_on_insert' %]
85	City added successfully.
86	[% CASE 'success_on_delete' %]
87	City deleted successfully.
88	[% CASE 'already_exists' %]
89	This city already exists.
90	[% CASE %]
91	[% m.code \| html %]
92	[% END %]
93	</div>
94	[% END %]
95
96	[% IF op == 'add_form' %]
97	[% IF city %]
98	<h1>Modify a city</h1>
99	[% ELSE %]
100	<h1>New city</h1>
101	[% END %]
102
103	<form action="/cgi-bin/koha/admin/cities.pl" name="Aform" method="post" class="validated">
104	<input type="hidden" name="op" value="add_validate" />
105	<input type="hidden" name="cityid" value="[% city.cityid \| html %]" />
106
107	<fieldset class="rows">
108	<ol>
109	[% IF city %]
110	<li><span class="label">City ID: </span>[% city.cityid \| html %]</li>
111	[% END %]
112	<li>
113	<label for="city_name" class="required">City: </label>
114	<input type="text" name="city_name" id="city_name" size="80" maxlength="100" value="[% city.city_name \| html %]" required="required" class="required" /> <span class="required">Required</span>
115	</li>
116	<li>
117	<label for="city_state">State: </label>
118	<input type="text" name="city_state" id="city_state" size="80" maxlength="100" value="[% city.city_state \| html %]" />
119	</li>
120	<li>
121	<label for="city_zipcode" class="required">ZIP/Postal code: </label>
122	<input type="text" name="city_zipcode" id="city_zipcode" size="20" maxlength="20" value="[% city.city_zipcode \| html %]" required="required" class="required" /> <span class="required">Required</span>
123	</li>
124	<li>
125	<label for="city_country">Country: </label>
126	<input type="text" name="city_country" id="city_country" size="80" maxlength="100" value="[% city.city_country \| html %]" />
127	</li>
128	</ol>
129	</fieldset>
130
131	<fieldset class="action">
132	<input type="submit" value="Submit" />
133	<a class="cancel" href="/cgi-bin/koha/admin/cities.pl">Cancel</a>
134	</fieldset>
135	</form>
136	[% END %]
137
138	[% IF op == 'delete_confirm' %]
139	<div class="dialog alert">
140	<h3>Delete city "[% city.city_name \| html %]?"</h3>
141	<table>
142	<tr><th>City id</th>
143	<td>[% city.cityid \| html %]</td>
144	</tr>
145	<tr><th>City</th>
146	<td>[% city.city_name \| html %]</td>
147	</tr>
148	<tr><th>State</th>
149	<td>[% city.city_state \| html %]</td>
150	</tr>
151	<tr><th>ZIP/Postal code</th>
152	<td>[% city.city_zipcode \| html %]</td>
153	</tr>
154	<tr><th>Country</th>
155	<td>[% city.city_country \| html %]</td>
156	</tr>
157	</table>
158	<form action="/cgi-bin/koha/admin/cities.pl" method="post">
159	<input type="hidden" name="op" value="delete_confirmed" />
160	<input type="hidden" name="cityid" value="[% city.cityid \| html %]" />
161	<button type="submit" class="approve"><i class="fa fa-fw fa-check"></i> Yes, delete</button>
162	</form>
163	<form action="/cgi-bin/koha/admin/cities.pl" method="get">
164	<button type="submit" class="deny"><i class="fa fa-fw fa-remove"></i> No, do not delete</button>
165	</form>
166	</div>
167	[% END %]
168
169	[% IF op == 'list' %]
170
171	<div id="toolbar" class="btn-toolbar">
172	<a class="btn btn-default" id="newcity" href="/cgi-bin/koha/admin/cities.pl?op=add_form"><i class="fa fa-plus"></i> New city</a>
173	</div>
174
175	<h2>Cities</h2>
176	[% IF city_name_filter %]
177	Searching: [% city_name_filter \| html %]
178	[% END %]
179
180	[% IF cities_count > 0 %]
181	<div class="table_cities_table_controls"></div>
182	<table id="table_cities">
183	<thead>
184	<tr>
185	<th>City ID</th>
186	<th>City</th>
187	<th>State</th>
188	<th>ZIP/Postal code</th>
189	<th>Country</th>
190	<th data-class-name="actions noExport">Actions</th>
191	</tr>
192	</thead>
193	</table>
194	[% ELSE %]
195	<div class="dialog message">
196	There are no cities defined. <a href="/cgi-bin/koha/admin/cities.pl?op=add_form">Create a new city</a>.
197	</div>
198	[% END %]
199	[% END %]
200
201	</main>	73	</main>
202	</div> <!-- /.col-sm-10.col-sm-push-2 -->	74	</div> <!-- /.col-sm-10.col-sm-push-2 -->
203		75
Lines 213-221 Link Here
213	[% INCLUDE 'datatables.inc' %]	85	[% INCLUDE 'datatables.inc' %]
214	[% INCLUDE 'columns_settings.inc' %]	86	[% INCLUDE 'columns_settings.inc' %]
215	<script>	87	<script>
216
217	var columns_settings = [% TablesSettings.GetColumns( 'admin', 'cities', 'table_cities', 'json' ) \| $raw %];	88	var columns_settings = [% TablesSettings.GetColumns( 'admin', 'cities', 'table_cities', 'json' ) \| $raw %];
218	$(document).ready(function() {
219	var cities_table_url = '/api/v1/cities?';	89	var cities_table_url = '/api/v1/cities?';
220		90
221	[% IF city_name_filter %]	91	[% IF city_name_filter %]
Lines 226-287 Link Here
226	};	96	};
227	cities_table_url += 'q='+ encodeURIComponent(JSON.stringify(city_name_filter));	97	cities_table_url += 'q='+ encodeURIComponent(JSON.stringify(city_name_filter));
228	[% END %]	98	[% END %]
229
230	var cities_table = $("#table_cities").kohaTable({
231	"ajax": {
232	"url": cities_table_url
233	},
234	"order": [[ 1, "asc" ]],
235	"columnDefs": [ {
236	"targets": [0,1,2,3,4],
237	"render": function (data, type, row, meta) {
238	if ( type == 'display' ) {
239	return data.escapeHtml();
240	}
241	return data;
242	}
243	} ],
244	"columns": [
245	{
246	"data": "city_id",
247	"searchable": true,
248	"orderable": true
249	},
250	{
251	"data": "name",
252	"searchable": true,
253	"orderable": true
254	},
255	{
256	"data": "state",
257	"searchable": true,
258	"orderable": true
259	},
260	{
261	"data": "postal_code",
262	"searchable": true,
263	"orderable": true
264	},
265	{
266	"data": "country",
267	"searchable": true,
268	"orderable": true
269	},
270	{
271	"data": function( row, type, val, meta ) {
272
273	var result = '<a class="btn btn-default btn-xs" role="button" href="/cgi-bin/koha/admin/cities.pl?op=add_form&cityid='+ encodeURIComponent(row.city_id) +'"><i class="fa fa-pencil" aria-hidden="true"></i> '+_("Edit")+'</a>'+"\n";
274	result += '<a class="btn btn-default btn-xs" role="button" href="/cgi-bin/koha/admin/cities.pl?op=delete_confirm&cityid='+ encodeURIComponent(row.city_id) +'"><i class="fa fa-trash" aria-hidden="true"></i> '+_("Delete")+'</a>';
275	return result;
276
277	},
278	"searchable": false,
279	"orderable": false
280	}
281	]
282	}, columns_settings, 1);
283
284	});
285	</script>	99	</script>
		100	[% Asset.js("js/vue/dist/main.js") %]
		101	[% Asset.js("js/vue/dist/runtime.js") %]
		102
286	[% END %]	103	[% END %]
287	[% INCLUDE 'intranet-bottom.inc' %]	104	[% INCLUDE 'intranet-bottom.inc' %]

Line 0 Link Here

(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/Cities.vue (+62 lines)
	1	<template>
	2	<Toolbar v-if="op=='list'" @switch-view="switchView"/>
	3	<b-alert v-if="message" variant="success" show>{{message}}</b-alert>
	4	<b-alert v-if="error" variant="warning" show>{{error}}</b-alert>
	5	<List v-if="op=='list'" @set-current-city-id="setCurrentCityID" @switch-view="switchView" @set-error="setError"/>
	6	<AddForm v-if="op=='add-form'" :city_id=city_id @city-created="cityCreated" @city-updated="cityUpdated" @set-error="setError" @switch-view="switchView"/>
	7	<ConfirmDeleteForm v-if="op=='confirm-delete-form'" :city_id=city_id @city-deleted="cityDeleted" @switch-view="switchView"/>
	8	</template>
	9
	10	<script>
	11	import Toolbar from "./components/CitiesToolbar.vue";
	12	import List from "./components/CitiesList.vue";
	13	import AddForm from "./components/CitiesFormAdd.vue";
	14	import ConfirmDeleteForm from "./components/CitiesFormConfirmDelete.vue";
	15
	16	import {reactive, computed} from "vue";
	17
	18	export default {
	19	data() {
	20	return {city_id: null, op: 'list', message: null, error: null}
	21	},
	22	methods: {
	23	switchView(view) {
	24	this.message = null
	25	this.error = null
	26	this.op = view
	27	},
	28	cityCreated() {
	29	this.message = "City created"
	30	this.error = null
	31	this.city_id = null
	32	this.op = 'list'
	33	},
	34	cityUpdated() {
	35	this.message = "City updated"
	36	this.error = null
	37	this.city_id = null
	38	this.op = 'list'
	39	},
	40	cityDeleted() {
	41	this.message = "City deleted"
	42	this.error = null
	43	this.city_id = null
	44	this.op = 'list'
	45	},
	46	setCurrentCityID(city_id){
	47	this.city_id = city_id
	48	},
	49	setError(error){
	50	this.message = null
	51	this.error = "Something went wrong: " + error
	52	},
	53	},
	54	components: {
	55	Toolbar,
	56	List,
	57	AddForm,
	58	ConfirmDeleteForm,
	59	},
	60	emits:['set-error'],
	61	};
	62	</script>

Line 0 Link Here

(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/components/CitiesFormAdd.vue (+137 lines)
		1	<template>
		2	<h2 v-if="city.city_id">Edit city</h2>
		3	<h2 v-else>New city</h2>
		4	<div>
		5	<b-form @submit="onSubmit">
		6	<b-form-group
		7	id="city_name"
		8	label="City name:"
		9	label-for="city_name"
		10	label-cols="4"
		11	label-cols-lg="2"
		12	>
		13	<b-form-input
		14	id="city_name"
		15	v-model="city.name"
		16	placeholder="City name"
		17	required
		18	></b-form-input>
		19	</b-form-group>
		20	<b-form-group
		21	id="city_state"
		22	label="State:"
		23	label-for="city_state"
		24	label-cols="4" label-cols-lg="2"
		25	>
		26	<b-form-input
		27	id="city_state"
		28	v-model="city.state"
		29	placeholder="City state"
		30	></b-form-input>
		31	</b-form-group>
		32	<b-form-group
		33	id="city_postal_code"
		34	label="ZIP/Postal code"
		35	label-for="postal_code"
		36	label-cols="4" label-cols-lg="2"
		37	>
		38	<b-form-input
		39	id="postal_code"
		40	v-model="city.postal_code"
		41	placeholder="City postal code"
		42	required
		43	></b-form-input>
		44	</b-form-group>
		45	<b-form-group
		46	id="city_country"
		47	label="Country:"
		48	label-for="city_country"
		49	label-cols="4" label-cols-lg="2"
		50	>
		51	<b-form-input
		52	id="city_country"
		53	v-model="city.country"
		54	placeholder="City country"
		55	></b-form-input>
		56	</b-form-group>
		57	<b-button type="submit" variant="primary">Submit</b-button>
		58	<a href="#" @click="$emit('switch-view', 'list')">Cancel</a>
		59	</b-form>
		60	</div>
		61	</template>
		62
		63	<script>
		64
65
66	export default {
67	data() {
68	return {
69	city: {
70	city_id: null,
71	name: '',
72	state: '',
73	postal_code: '',
74	country: '',
75	}
76	}
77	},
78	created() {
79	if( this.city_id ) {
80
81	const apiUrl = '/api/v1/cities/' + this.city_id;
82
83	fetch(apiUrl)
84	.then(res => res.json())
85	.then(
86	(result) => {
87	this.city = result
88	},
89	(error) => {
90	this.$emit('set-error', error)
91	}
92	)
93	}
94	},
95	methods:{
96	onSubmit(){
97
98	let city = this.city;
99	let apiUrl = '/api/v1/cities'
100
101	const myHeaders = new Headers()
102	myHeaders.append('Content-Type', 'application/json')
103
104	let method = 'POST'
105	if ( city.city_id ) {
106	method = 'PUT'
107	apiUrl += '/' + city.city_id
108	}
109	delete city.city_id
110
111	const options = {
112	method: method,
113	body: JSON.stringify(city),
114	myHeaders
115	}
116
117	fetch(apiUrl, options)
118	.then(response => {
119	if ( response.status == 200 ) {
120	this.$emit('city-updated')
121	} else if ( response.status == 201 ) {
122	this.$emit('city-created')
123	} else {
124	this.$emit('set-error', response.message \|\| response.statusText)
125	}
126	}, (error) => {
127	this.$emit('set-error', error)
128	})
129	}
130	},
131	emits: ['city-created', 'city-updated', 'set-error', 'switch-view'],
132	props: {
133	city_id: Number
134	},
135	name: "CitiesFormAdd.vue",
136	}
137	</script>

Line 0 Link Here

(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/components/CitiesFormConfirmDelete.vue (+107 lines)
		1	<template>
		2	<h2> Delete city</h2>
		3	<div>
		4	<b-form @submit="onSubmit">
		5	<b-form-group
		6	id="city_id"
		7	label="City ID:"
		8	label-for="city_id"
		9	label-cols="4"
		10	label-cols-lg="2"
		11	>
		12	{{city.city_id}}
		13	</b-form-group>
		14	<b-form-group
		15	id="city_name"
		16	label="City name:"
		17	label-for="city_name"
		18	label-cols="4"
		19	label-cols-lg="2"
		20	>
		21	{{city.name}}
		22	</b-form-group>
		23	<b-form-group
		24	id="city_state"
		25	label="State:"
		26	label-for="city_state"
		27	label-cols="4" label-cols-lg="2"
		28	>
		29	{{city.state}}
		30	</b-form-group>
		31	<b-form-group
		32	id="city_postal_code"
		33	label="ZIP/Postal code"
		34	label-for="postal_code"
		35	label-cols="4" label-cols-lg="2"
		36	>
		37	{{city.postal_code}}
		38	</b-form-group>
		39	<b-form-group
		40	id="city_country"
		41	label="Country:"
		42	label-for="city_country"
		43	label-cols="4" label-cols-lg="2"
		44	>
		45	{{city.country}}
		46	</b-form-group>
		47	<b-button type="submit" variant="primary">Submit</b-button>
		48	<a href="#" @click="$emit('switch-view', 'list')">Cancel</a>
		49	</b-form>
		50	</div>
		51	</template>
		52
		53	<script>
		54
		55	export default {
		56	data() {
		57	return {
		58	city: {},
		59	}
		60	},
		61	created() {
		62	console.log("created" + this.city_id)
		63	const apiUrl = '/api/v1/cities/' + this.city_id;
		64
65	fetch(apiUrl)
66	.then(res => res.json())
67	.then(
68	(result) => {
69	this.city = result
70	},
71	(error) => {
72	this.$emit('set-error', error)
73	}
74	)
75	},
76	methods:{
77	onSubmit(){
78
79	let apiUrl = '/api/v1/cities/' + this.city_id
80
81	const myHeaders = new Headers()
82	myHeaders.append('Content-Type', 'application/json')
83
84	const options = {
85	method: 'DELETE',
86	myHeaders
87	}
88
89	fetch(apiUrl, options)
90	.then(response => {
91	if ( response.status == 204 ) {
92	this.$emit('city-deleted')
93	} else {
94	this.$emit('set-error', response.message \|\| response.statusText)
95	}
96	}, (error) => {
97	this.$emit('set-error', error)
98	})
99	}
100	},
101	emits: ['city-deleted', 'set-error', 'switch-view'],
102	props: {
103	city_id: Number
104	},
105	name: "CitiesFormConfirmDelete.vue",
106	}
107	</script>

Line 0 Link Here

(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/main-cities.ts (+18 lines)
	1	import {createApp} from 'vue'
	2	import BootstrapVue3 from 'bootstrap-vue-3'
	3
	4	//import 'bootstrap/dist/css/bootstrap.css'
	5	import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
	6
	7	import {library} from "@fortawesome/fontawesome-svg-core";
	8	import {faPlus, faPencil, faTrash} from "@fortawesome/free-solid-svg-icons";
	9	import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
	10
	11	library.add(faPlus, faPencil, faTrash)
	12
	13	import App from './Cities.vue'
	14
	15	createApp(App)
	16	.component("font-awesome-icon", FontAwesomeIcon)
	17	.use(BootstrapVue3)
	18	.mount('#cities')

Line 0 Link Here

(-)a/webpack.config.js (-1 / +36 lines)
0	-	1	const { VueLoaderPlugin } = require("vue-loader");
		2	const autoprefixer = require("autoprefixer");
		3	const path = require("path");
		4
		5	module.exports = {
		6	entry: {
		7	main: "./koha-tmpl/intranet-tmpl/prog/js/vue/main-cities.ts",
		8	},
		9	output: {
		10	filename: "[name].js",
		11	path: path.resolve(__dirname, "koha-tmpl/intranet-tmpl/prog/js/vue/dist/"),
		12	chunkFilename: "[name].js",
		13	},
		14	module: {
		15	rules: [
		16	{
		17	test: /\.vue$/,
		18	loader: "vue-loader",
		19	},
		20	{
		21	test: /\.ts$/,
		22	loader: 'ts-loader',
		23	options: {
		24	appendTsSuffixTo: [/\.vue$/]
		25	}
		26	},
		27	{
		28	test: /\.css$/,
		29	use: ['style-loader', 'css-loader']
		30	}
		31	],
		32	},
		33	plugins: [
		34	new VueLoaderPlugin(),
		35	],
		36	};