scinote-web/app/javascript/vue/protocol/protocolOptions.vue
artoscinote 6352a4dd04
Implement protocol options dropdown [SCI-6750, SCI-6751] (#4066)
* Implement protocol options dropdown [SCI-6750, SCI-6751]

* Implement simple API error handling for step status update [SCI-6354]
2022-05-03 15:18:48 +02:00

98 lines
2.8 KiB
Vue

<template>
<div class="dropdown sci-dropdown protocol-options-dropdown">
<button
class="btn btn-secondary dropdown-toggle"
type="button"
id="dropdownProtocolOptions"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="true"
>
<span class="fas fa-cog"></span>
<span>{{ i18n.t("my_modules.protocol.options_dropdown.title") }}</span>
<span class="caret"></span>
</button>
<ul
class="dropdown-menu dropdown-menu-right"
aria-labelledby="dropdownProtocolOptions"
>
<li>
<a
ref="loadProtocol"
data-action="load-from-repository"
@click="loadProtocol"
:class="{ disabled: !protocol.attributes.urls.load_from_repo_url }"
>
<span class="fas fa-edit"></span>
<span>{{ i18n.t("my_modules.protocol.options_dropdown.load_from_repo") }}</span>
</a>
</li>
<li>
<a
ref="saveProtocol"
data-action="copy-to-repository"
@click="saveProtocol"
:class="{ disabled: !protocol.attributes.urls.save_to_repo_url }"
>
<span class="fas fa-check"></span>
<span>{{
i18n.t("my_modules.protocol.options_dropdown.save_to_repo")
}}</span>
</a>
</li>
<li>
<a data-action="load-from-file"
class="btn-open-file"
:class="{ disabled: !protocol.attributes.urls.import_url }">
<span class="fas fa-download"></span>
<span>{{ i18n.t("my_modules.protocol.options_dropdown.import") }}</span>
<input type="file" value="" accept=".eln" data-turbolinks="false">
</a>
</li>
<li>
<a
data-turbolinks="false"
:href="protocol.attributes.urls.export_url"
:class="{ disabled: !protocol.attributes.urls.export_url }"
>
<span class="fas fa-upload"></span>
<span>{{
i18n.t("my_modules.protocol.options_dropdown.export")
}}</span>
</a>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "ProtocolOptions",
props: {
protocol: {
type: Object,
required: true,
},
},
mounted() {
// Legacy global functions from app/assets/javascripts/my_modules/protocols.js
initLoadFromRepository();
initCopyToRepository();
initImport();
},
methods: {
loadProtocol() {
$.get(
this.protocol.attributes.urls.load_from_repo_url + "?type=recent"
).success((data) => {
$(this.$refs.loadProtocol).trigger("ajax:success", data);
});
},
saveProtocol() {
$.get(this.protocol.attributes.urls.save_to_repo_url).success((data) => {
$(this.$refs.saveProtocol).trigger("ajax:success", data);
});
}
},
};
</script>