Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-08-20 14:43:49 +00:00
Code Issues Actions Projects Releases Wiki Activity

Merge branch 'master' into 110_extend_thirdparty

Browse Source
This commit is contained in:
Mathieu Jaumotte
2021-08-17 20:47:58 +02:00
parent 4eef8492b1 4cf676858e
commit 6ad8a73fc0
246 changed files with 12009 additions and 3966 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/Bundle/ChillMainBundle/CRUD/Controller/CRUDController.php
View File

@@ -1137,11 +1137,12 @@ class CRUDController extends AbstractController
}
/**
* @todo (check how to do this with dependency injection and make changes...)
* @return PaginatorFactory
*/
protected function getPaginatorFactory(): PaginatorFactory
{
return $this->container->get(PaginatorFactory::class);
return $this->container->get('chill_main.paginator_factory');
}
/**

73
src/Bundle/ChillMainBundle/Controller/SearchController.php
View File

@@ -22,7 +22,9 @@
namespace Chill\MainBundle\Controller;
use Chill\MainBundle\Search\SearchApiNoQueryException;
use Chill\MainBundle\Serializer\Model\Collection;
use GuzzleHttp\Psr7\Response;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Chill\MainBundle\Search\UnknowSearchDomainException;
@@ -33,6 +35,7 @@ use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Component\Form\Extension\Core\Type\FormType;
use Symfony\Component\HttpFoundation\JsonResponse;
use Chill\MainBundle\Search\SearchProvider;
use Symfony\Component\HttpKernel\Exception\BadRequestHttpException;
use Symfony\Contracts\Translation\TranslatorInterface;
use Chill\MainBundle\Pagination\PaginatorFactory;
use Chill\MainBundle\Search\SearchApi;
@@ -46,15 +49,15 @@ use Symfony\Component\HttpFoundation\Exception\BadRequestException;
class SearchController extends AbstractController
{
protected SearchProvider $searchProvider;
protected TranslatorInterface $translator;
protected PaginatorFactory $paginatorFactory;
protected SearchApi $searchApi;
function __construct(
SearchProvider $searchProvider,
SearchProvider $searchProvider,
TranslatorInterface $translator,
PaginatorFactory $paginatorFactory,
SearchApi $searchApi
@@ -65,14 +68,14 @@ class SearchController extends AbstractController
$this->searchApi = $searchApi;
}
public function searchAction(Request $request, $_format)
{
$pattern = $request->query->get('q', '');
if ($pattern === ''){
switch($_format) {
case 'html':
case 'html':
return $this->render('@ChillMain/Search/error.html.twig',
array(
'message' => $this->translator->trans("Your search is empty. "
@@ -86,16 +89,16 @@ class SearchController extends AbstractController
]);
}
}
$name = $request->query->get('name', NULL);
try {
if ($name === NULL) {
if ($_format === 'json') {
return new JsonResponse('Currently, we still do not aggregate results '
. 'from different providers', JsonResponse::HTTP_BAD_REQUEST);
}
// no specific search selected. Rendering result in "preview" mode
$results = $this->searchProvider
->getSearchResults(
@@ -119,7 +122,7 @@ class SearchController extends AbstractController
),
$_format
)];
if ($_format === 'json') {
return new JsonResponse(\reset($results));
}
@@ -141,8 +144,8 @@ class SearchController extends AbstractController
'pattern' => $pattern
));
}
return $this->render('@ChillMain/Search/list.html.twig',
array('results' => $results, 'pattern' => $pattern)
);
@@ -159,29 +162,33 @@ class SearchController extends AbstractController
." one type");
}
$collection = $this->searchApi->getResults($query, $types, []);
try {
$collection = $this->searchApi->getResults($query, $types, []);
} catch (SearchApiNoQueryException $e) {
throw new BadRequestHttpException($e->getMessage(), $e);
}
return $this->json($collection);
return $this->json($collection, \Symfony\Component\HttpFoundation\Response::HTTP_OK, [], [ "groups" => ["read"]]);
}
public function advancedSearchListAction(Request $request)
{
/* @var $variable Chill\MainBundle\Search\SearchProvider */
$searchProvider = $this->searchProvider;
$advancedSearchProviders = $searchProvider
->getHasAdvancedFormSearchServices();
if(\count($advancedSearchProviders) === 1) {
\reset($advancedSearchProviders);
return $this->redirectToRoute('chill_main_advanced_search', [
'name' => \key($advancedSearchProviders)
]);
}
return $this->render('@ChillMain/Search/choose_list.html.twig');
}
public function advancedSearchAction($name, Request $request)
{
try {
@@ -190,22 +197,22 @@ class SearchController extends AbstractController
/* @var $variable Chill\MainBundle\Search\HasAdvancedSearchFormInterface */
$search = $this->searchProvider
->getHasAdvancedFormByName($name);
} catch (\Chill\MainBundle\Search\UnknowSearchNameException $e) {
throw $this->createNotFoundException("no advanced search for "
. "$name");
}
if ($request->query->has('q')) {
$data = $search->convertTermsToFormData($searchProvider->parse(
$request->query->get('q')));
}
$form = $this->createAdvancedSearchForm($name, $data ?? []);
if ($request->isMethod(Request::METHOD_POST)) {
$form->handleRequest($request);
if ($form->isValid()) {
$pattern = $this->searchProvider
->getHasAdvancedFormByName($name)
@@ -215,8 +222,8 @@ class SearchController extends AbstractController
'q' => $pattern, 'name' => $name
]);
}
}
}
return $this->render('@ChillMain/Search/advanced_search.html.twig',
[
'form' => $form->createView(),
@@ -224,15 +231,15 @@ class SearchController extends AbstractController
'title' => $search->getAdvancedSearchTitle()
]);
}
protected function createAdvancedSearchForm($name, array $data = [])
{
$builder = $this
->get('form.factory')
->createNamedBuilder(
null,
FormType::class,
$data,
FormType::class,
$data,
[ 'method' => Request::METHOD_POST ]
);
@@ -240,12 +247,12 @@ class SearchController extends AbstractController
->getHasAdvancedFormByName($name)
->buildForm($builder)
;
$builder->add('submit', SubmitType::class, [
'label' => 'Search'
]);
return $builder->getForm();
}
}

6
src/Bundle/ChillMainBundle/DependencyInjection/ChillMainExtension.php
View File

@@ -32,9 +32,8 @@ use Chill\MainBundle\Doctrine\DQL\JsonAggregate;
use Chill\MainBundle\Doctrine\DQL\JsonbExistsInArray;
use Chill\MainBundle\Doctrine\DQL\Similarity;
use Chill\MainBundle\Doctrine\DQL\OverlapsI;
use Symfony\Component\DependencyInjection\Definition;
use Symfony\Component\DependencyInjection\Reference;
use Chill\MainBundle\Doctrine\DQL\Replace;
use Chill\MainBundle\Doctrine\ORM\Hydration\FlatHierarchyEntityHydrator;
use Chill\MainBundle\Doctrine\Type\NativeDateIntervalType;
use Chill\MainBundle\Doctrine\Type\PointType;
use Symfony\Component\HttpFoundation\Request;
@@ -186,6 +185,9 @@ class ChillMainExtension extends Extension implements PrependExtensionInterface,
'OVERLAPSI' => OverlapsI::class,
],
],
'hydrators' => [
'chill_flat_hierarchy_list' => FlatHierarchyEntityHydrator::class,
],
],
],
);

47
src/Bundle/ChillMainBundle/Doctrine/ORM/Hydration/FlatHierarchyEntityHydrator.php Normal file
View File

@@ -0,0 +1,47 @@
<?php
declare(strict_types=1);
namespace Chill\MainBundle\Doctrine\ORM\Hydration;
use Doctrine\ORM\Internal\Hydration\ObjectHydrator;
use Generator;
final class FlatHierarchyEntityHydrator extends ObjectHydrator
{
public const LIST = 'chill_flat_hierarchy_list';
protected function hydrateAllData()
{
return array_values(iterator_to_array($this->flatListGenerator($this->buildChildrenHashmap(parent::hydrateAllData()))));
}
private function flatListGenerator(array $hashMap, ?object $parent = null): Generator
{
$parent = null === $parent ? null : spl_object_id($parent);
$hashMap += [$parent => []];
foreach ($hashMap[$parent] as $node) {
yield spl_object_id($node) => $node;
yield from $this->flatListGenerator($hashMap, $node);
}
}
private function buildChildrenHashmap(array $nodes): array
{
return array_reduce(
$nodes,
static function (array $collect, $node): array {
$parentId = (null === $parent = $node->getParent()) ?
null :
spl_object_id($parent);
$collect[$parentId][] = $node;
return $collect;
},
[]
);
}
}

369
src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss
View File

@@ -4,23 +4,153 @@
// Chill mixins
@import './scss/mixins';
// Chill buttons
@import './scss/buttons';
// Chill forms
@import './scss/forms';
// Chill record_actions
@import './scss/record_actions';
// Chill entity render box system
@import './scss/render_box';
// Chill flex responsive table/block presentation
@import './scss/flex_table';
/*
* Specific rules
* BASE LAYOUT POSITION
*/
.custom_field_no_data,
.chill-no-data-statement {
font-style: italic;
body {
display: flex;
flex-direction: column;
min-height: 100vh;
footer {
margin-top: auto;
}
}
header {
nav.navbar {
padding: 0;
a.navbar-brand img {
height: 50px;
margin: 8px 0;
}
div.navbar-collapse {
float: right;
}
ul.navbar-nav {
display: flex;
align-items: stretch;
li.nav-item {
display: flex;
&.btn {
padding-top: 0;
padding-bottom: 0;
}
& > a {
align-self: center;
}
form.form-inline {
align-self: center;
display: flex;
input.form-control {
align-self: center;
height: 32px;
}
}
}
}
div.dropdown-menu {
margin: 0;
padding: 0;
border-radius: 0;
a.dropdown-item {
width: 120%;
border: 0;
border-bottom: 1px solid $gray-200;
font-size: smaller;
i {
float: right; }
&:hover {
color: $gray-500 !important; }
}
}
// fullwidth menu when navbar is collapsed
@media (max-width: 767px) {
& {
position: relative;
}
button.navbar-toggler {
float: right;
}
div.navbar-collapse {
float: none;
position: absolute;
top: 4em;
left: 0;
right: 0;
z-index: 2;
padding: 1em;
border-top: 1px solid shade-color($primary, 25%);
ul.navbar-nav {
display: grid;
grid-template-areas:
"sear sear sear"
"sect user lang";
li.nav-item {
flex-direction: column;
border: 0;
a.nav-link {}
&.navigation-search {
grid-area: sear;
margin-bottom: 1em;
form {
width: 100%;
input.form-control {}
button.btn {}
}
}
&.nav-section { grid-area: sect; }
&.nav-user { grid-area: user; }
&.nav-language { grid-area: lang; }
}
li.dropdown {
&, & > * {
background-color: transparent !important;
}
a.dropdown-toggle {}
div.dropdown-menu {
display: block;
border: 0;
a.dropdown-item {
width: 100%;
border: 0;
border-top: 1px dotted $gray-200;
background-color: transparent !important;
}
}
}
}
}
}
}
}
// styles communs pour tous les bandeaux
div.banner {
a {
text-decoration: none;
&.phone,
&.email {
color: $white;
}
}
.id-number {
font-weight: lighter;
font-size: 50%;
@@ -28,17 +158,230 @@ div.banner {
&:before { content: '(n°'; }
&:after { content: ')'; }
}
a.phone,
a.email {
color: white;
}
ul.list-content {
//margin: 0 auto;
}
span.age {
margin-left: 0.5em;
&:before { content: '('; }
&:after { content: ')'; }
}
}
div.vertical-menu {
border-radius: 0;
margin-top: 0.5rem;
a.list-group-item {
background-color: $chill-yellow;
border: 0;
margin-bottom: 0.25rem;
&:hover {
background-color: tint-color($chill-yellow, 20%)
}
}
}
footer.footer {
background: $dark;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
p {
font-family: Open Sans;
font-weight: 300;
clear: both;
color: $white;
font-size: 0.9em;
line-height: 1.5em;
margin: auto;
max-width: 35em;
text-align: center;
a, a:hover {
text-decoration: underline;
}
}
}
/*
* SPECIFIC RULES
*/
/// titles
h1, h2,
.h1, .h2 {
font-weight: $headings-font-weight + 200;
}
/// typography
.open_sansbold {
font-weight: bold;
}
/// no borders on head table
table.table-bordered {
thead, thead * {
border: 0 !important;
text-align: center;
}
}
/// comments quotes
.chill-user-quote {
border-left: 10px solid $yellow;
margin: 1.5em 10px;
padding: 0.5em 15px;
background-color: $gray-200;
color: $gray-800;
font-size: 90%;
// test a bottom right decoration (to be confirmed)
&.test {
position: relative;
&:after {
content: '';
position: absolute;
width: 0px; height: 0px;
bottom: 0; right: 0;
background: $white;
border-top: 10px solid $gray-200;
border-left: 10px solid $gray-200;
border-right: 10px solid $white;
border-bottom: 10px solid $white;
}
}
// ckeditor citation
blockquote p {
font-style: italic;
padding-left: 2em;
quotes: "“" "„";
position: relative;
&:before {
content: open-quote;
font-size: 400%;
color: $gray-400;
position: absolute;
top: -25px;
left: 0;
}
}
}
div.metadata {
font-size: smaller;
color: $gray-600;
span.user, span.date {
text-decoration: underline dotted;
&:hover {
color: $gray-700;
}
}
}
/// display definition list
// with dt and dd on same line
dl.definition-inline {
dd {
display: inline;
margin: 0;
&:after{
display: block;
content: '';
}
}
dt{
display: inline-block;
min-width: 200px;
}
}
/// when there is no data
.custom_field_no_data,
.chill-no-data-statement {
font-style: italic;
}
//// still used ?
// move from chillmain.css, converted to sass
div#usefulbar {
background-color: $yellow;
z-index: 1000;
padding-right: 15px;
form {
margin: 0;
}
i.menu {
font-size: 2em;
}
ul {
display: flex;
justify-content: flex-end;
margin: 0;
padding-top: 5px;
padding-right: 10px;
}
li {
color: $white;
margin-left: 10px;
a {
color: $white;
text-shadow: 0px 0px 1px $gray-600;
}
i.icon-user-add {
&:before {
vertical-align: -5px;
}
}
&#search_element {
text-align: right;
div#search_form {
margin: 0;
padding: 0;
div, .field {
margin: 0;
}
button {
color: $white;
border: none;
bottom: -2px;
height: 35px;
}
}
}
}
}
div#flashMessages {
margin-top: 20px;
.flash-notice {
margin-top: 10px;
margin-bottom: 10px;
}
}
.personName {
font-variant: small-caps;
text-transform: capitalize;
}
// probably used in client chill.
// think to rename like above
input.belgian_national_number_inversed_date {
width: 7em;
margin-right: 1em;
}
input.belgian_national_number_daily_counter {
width: 4em;
margin-right: 1em;
}
input.belgian_national_number_control_digit {
width: 3em;
}
//
input.belgian_national_number {
&.inversed_date {}
&.daily_counter {}
&.control_digit {}
}

25
src/Bundle/ChillMainBundle/Resources/public/chill/css/chillmain.css
View File

@@ -1,25 +0,0 @@
div#usefulbar { background-color: #fbba3a; z-index: 1000; padding-right: 15px; }
div#usefulbar form { margin: 0; }
div#usefulbar i.menu { font-size: 2em; }
div#usefulbar ul { display: flex; justify-content: flex-end; margin: 0; padding-top: 5px; padding-right: 10px; }
div#usefulbar li { color: white; margin-left: 10px; }
div#usefulbar li a { color: white; text-shadow: 0px 0px 1px #555; }
div#usefulbar li i.icon-user-add:before { vertical-align: -5px; }
div#usefulbar li#search_element { text-align: right; }
div#usefulbar li#search_element div#search_form { margin: 0; padding: 0; }
div#usefulbar li#search_element div#search_form div { margin: 0; }
div#usefulbar li#search_element div#search_form .field { margin: 0; }
div#usefulbar li#search_element div#search_form button { color: white; border: none; bottom: -2px; height: 35px; }
div#flashMessages { margin-top: 20px; }
div#flashMessages .flash-notice { margin-top: 10px; margin-bottom: 10px; }
.personName { font-variant: small-caps; text-transform: capitalize; }
.personName { text-transform: capitalize; }
input.belgian_national_number_inversed_date { width: 7em; margin-right: 1em; }
input.belgian_national_number_daily_counter { width: 4em; margin-right: 1em; }
input.belgian_national_number_control_digit { width: 3em; }

4
src/Bundle/ChillMainBundle/Resources/public/chill/index.js
View File

@@ -14,12 +14,12 @@ global.select2 = select2;
require('select2/dist/css/select2.css');
require('select2-bootstrap-theme/dist/select2-bootstrap.css');
/*
* Load Chill themes assets
*/
require('./chillmain.scss');
require('./css/chillmain.css');
import { chill } from './js/chill.js';
global.chill = chill;
@@ -34,6 +34,7 @@ require('./img/favicon.ico');
require('./img/logo-chill-sans-slogan_white.png');
require('./img/logo-chill-outil-accompagnement_white.png');
/*
* Load local libs
* Some libs are only used in a few pages, they are loaded on a case by case basis
@@ -45,7 +46,6 @@ require('../lib/breadcrumb/index.js');
require('../lib/download-report/index.js');
require('../lib/select_interactive_loading/index.js');
require('../lib/export-list/index.js');
require('../lib/entity/index.js');
//require('../lib/show_hide/index.js');
//require('../lib/tabs/index.js');

18
src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/custom/_buttons.scss → src/Bundle/ChillMainBundle/Resources/public/chill/scss/buttons.scss
View File

@@ -62,10 +62,10 @@ $chill-theme-buttons: (
&.btn-view::before,
&.btn-save::before,
&.btn-duplicate::before,
&.btn-not-duplicate::before,
&.btn-submit::before,
&.btn-reset::before,
&.btn-action::before,
// &.btn-not-duplicate::before,
// &.btn-submit::before,
// &.btn-reset::before,
// &.btn-action::before,
&.btn-delete::before,
&.btn-remove::before,
&.btn-cancel::before {
@@ -101,3 +101,13 @@ $chill-theme-buttons: (
color: $light;
}
}
/// allow to hide icon (herited from scratch)
.btn {
&.change-icon {
&::before {
content: '';
margin-right: 0;
}
}
}

92
src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss
View File

@@ -1,59 +1,80 @@
/*
* FLEX RESPONSIVE TABLE/BLOCK PRESENTATION
*/
div.flex-bloc,
div.flex-table {
display: flex;
align-items: stretch;
align-content: stretch;
box-sizing: border-box;
margin: 1.5em 0;
div.item-bloc {
display: flex;
@include border-collapse;
padding: 1em;
div.item-row {
display: flex;
div.item-col:last-child {
display: flex;
}
}
}
h2, h3, h4, dl, p {
margin: 0;
}
h2, h3, h4 {
color: var(--bs-chill-blue);
color: $blue;
}
div.item-bloc {
@include border-collapse;
ul.record_actions {
margin: 0;
li {
margin-right: 5px;
}
}
}
/*
* Bloc appearance
*/
div.flex-bloc {
box-sizing: border-box;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
align-content: stretch;
div.item-bloc {
flex-grow: 0; flex-shrink: 1; flex-basis: auto;
margin: 0;
padding: 1em;
display: flex;
flex-direction: column;
margin: 0;
div.item-row {
flex-grow: 1; flex-shrink: 1; flex-basis: auto;
display: flex;
flex-direction: column;
div.item-col {
&.separator {
margin-top: 0.5em;
border-top: 1px dotted $gray-900;
padding-top: 0.5em;
}
&:first-child {
flex-grow: 0; flex-shrink: 0; flex-basis: auto;
padding-bottom: 0.5em;
border-bottom: 1px dotted #0000004f;
margin-bottom: 0.5em;
}
&:last-child {
flex-grow: 1; flex-shrink: 1; flex-basis: auto;
display: flex;
.list-content { // ul, dl, or div
}
ul.record_actions {
margin: 0;
align-self: flex-end;
flex-grow: 1; flex-shrink: 0; flex-basis: auto;
margin: 0;
li {
margin-right: 5px;
}
@@ -67,51 +88,47 @@ div.flex-bloc {
/*
* Table appearance
*/
div.flex-table {
display: flex;
flex-direction: column;
align-items: stretch;
align-content: stretch;
div.item-bloc {
display: flex;
flex-direction: column;
padding: 1em;
&:nth-child(even) {
background-color: $gray-200;
.chill-user-quote {
background-color: shade-color($gray-200, 5%)
}
}
div.item-row {
display: flex;
flex-direction: row;
&:not(:first-child) {
&.separator {
margin-top: 0.5em;
border-top: 1px dotted #0000004f;
border-top: 1px dotted $gray-900;
padding-top: 0.5em;
flex-direction: column;
//flex-direction: column;
}
div.item-col {
&:first-child {
flex-grow: 0; flex-shrink: 0; flex-basis: 33%;
flex-grow: 0; flex-shrink: 0; flex-basis: auto;
}
&:last-child {
flex-grow: 1; flex-shrink: 1; flex-basis: auto;
display: flex;
justify-content: flex-end;
.list-content { // ul, dl, or div
}
ul.record_actions {
margin: 0;
align-self: flex-start;
flex-grow: 1; flex-shrink: 0; flex-basis: auto;
li {
margin-right: 5px;
}
align-self: flex-start;
}
}
}
@media only screen and (max-width: 900px) {
flex-direction: column;
div.item-col {
@@ -122,9 +139,6 @@ div.flex-table {
}
}
}
// neutralize
div.chill_address div.chill_address_address p { text-indent: 0; }
}
}
}

44
src/Bundle/ChillMainBundle/Resources/public/chill/scss/forms.scss Normal file
View File

@@ -0,0 +1,44 @@
/// forms
form {
/* avoid useless html in first level of the custom fields row loop in forms
* (better should to improve the loop)
*/
& > div.container-fluid {
& > div.row > .parent {
padding: 0;
& div.cf-fields span.cf-title {
margin: 1em -15px 0;
width: calc(100% + 30px);
@include title_in_form;
}
}
}
fieldset {
margin-top: 1em;
& > legend {
@include title_in_form;
}
}
// customfields titles in form
span.cf-title {
@include title_in_form;
}
label {
display: inline;
&.required:after {
content: " *";
color: $red;
}
}
}
.col-form-label {
padding-top: .5em;
padding-bottom: .5em;
font-weight: 700;
margin-bottom: .375em;
}

14
src/Bundle/ChillMainBundle/Resources/public/chill/scss/mixins.scss
View File

@@ -1,4 +1,18 @@
//
// Titles in forms
//
@mixin title_in_form {
font-size: 1.438em;
font-weight: 700;
width: 100%;
border-bottom: 3px solid $gray-200;
margin-bottom: 1em;
display: block;
}
// We use box-shadow instead of border
// to avoid to manage border double-width
// Then we can simulate border-collapse: collapse (table)

52
src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/custom/_record_actions.scss → src/Bundle/ChillMainBundle/Resources/public/chill/scss/record_actions.scss
View File

@@ -1,13 +1,22 @@
ul.record_actions,
ul.record_actions_column {
ul.record_actions {
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse;
justify-content: flex-end;
padding: 0.5em 0;
&.record_actions--left {
&.column {
flex-direction: column;
}
&.left {
justify-content: flex-start;
}
padding: 0.5em 0;
flex-wrap: wrap-reverse;
&.sticky-form-buttons {
padding-left: 1em;
padding-right: 1em;
}
li {
display: inline-block;
@@ -18,37 +27,34 @@ ul.record_actions_column {
&:last-child {
margin-right: 0;
}
}
li.cancel {
order: 1;
margin-right: auto;
&.cancel {
order: 1;
margin-right: auto;
}
}
}
ul.record_actions {
flex-direction: row;
}
ul.record_actions_column {
flex-direction: column;
}
ul.record_actions.sticky-form-buttons {
padding-left: 1em;
padding-right: 1em;
.sticky-form-buttons {
margin-top: 4em;
background-color: $beige;
position: sticky;
bottom: 0.3em;
text-align: center;
display: flex;
padding: 0.8em 1.6em;
border-radius: 0;
z-index: 1000;
}
/// EXCEPTIONS
// inside table exceptions
table {
td ul.record_actions,
ul.record_actions_small {
li {
margin-right: 0.2em;
}
}
ul.record_actions {
margin: 0;
padding: 0.5em;

28
src/Bundle/ChillMainBundle/Resources/public/chill/scss/render_box.scss
View File

@@ -13,12 +13,18 @@ section.chill-entity {
}
// specific rules
// all render box doesn't use a section tag !
.chill-entity {
// used for: entity-person, entity-thirdparty
&.entity-person,
&.entity-thirdparty {
span.entity-raw {
& > span:not(:first-child):before {
content: " ";
}
}
div.entity-label {
div.denomination {
&.h3 {
@@ -87,9 +93,25 @@ section.chill-entity {
font-style: italic;
}
span.address-valid {
&.address-since {}
&.address-until {}
.address-valid {
margin-top: 2em;
&.date-since {}
&.date-until {}
}
}
// used for comment-embeddable
&.entity-comment-embeddable {
width: 100%;
div.metadata {
font-size: smaller;
color: $gray-600;
span.user, span.date {
text-decoration: underline dotted;
&:hover {
color: $gray-700;
}
}
}
}
}

6
src/Bundle/ChillMainBundle/Resources/public/lib/entity/comment_embeddable.scss
View File

@@ -1,6 +0,0 @@
.chill-entity__comment-embeddable {
.chill-entity__comment-embeddable__metadata {
font-size: smaller;
color: var(--chill-light-gray);
}
}

2
src/Bundle/ChillMainBundle/Resources/public/lib/entity/index.js
View File

@@ -1,2 +0,0 @@
// css classes to render entities
require('./comment_embeddable.scss');

280
src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/_custom.scss
View File

@@ -1,284 +1,6 @@
/*
* These custom styles will override bootstrap enabled stylesheets
* in mod_bootstrap entrypoint
*/
/// chill buttons
@import 'custom/_buttons';
// chill record_actions
@import 'custom/_record_actions';
/// titles
h1, h2, .h1, .h2 {
font-weight: $headings-font-weight + 200;
}
/// typography
.open_sansbold {
font-weight: bold;
}
/// forms
@mixin title_in_form {
font-size: 1.438em;
font-weight: 700;
width: 100%;
border-bottom: 3px solid $gray-200;
margin-bottom: 1em;
display: block;
}
.col-form-label {
padding-top: .5em;
padding-bottom: .5em;
font-weight: 700;
margin-bottom: .375em;
}
form {
/* avoid useless html in first level of the custom fields row loop in forms
* (better should to improve the loop)
*/
& > div.container-fluid {
& > div.row > .parent {
padding: 0;
& div.cf-fields span.cf-title {
margin: 1em -15px 0;
width: calc(100% + 30px);
@include title_in_form;
}
}
}
fieldset {
margin-top: 1em;
& > legend {
@include title_in_form;
}
}
label {
display: inline;
&.required:after {
content: " *";
color: $red;
}
}
}
/// table
table.table-bordered {
thead, thead * {
border: 0 !important;
text-align: center;
}
}
/// chill elements of design
.sticky-form-buttons {
margin-top: 4em;
background-color: $beige;
position: sticky;
bottom: 0.3em;
text-align: center;
display: flex;
padding: 0.8em 1.6em;
border-radius: 0;
}
.chill-user-quote {
border-left: 10px solid $yellow;
margin: 1.5em 10px;
padding: 0.5em 15px;
quotes: "\201C" "\201D" "\2018" "\2019";
background-color: $gray-200;
blockquote {
border-left: 0.4em solid $gray-400;
padding-left: 0.9em;
margin-left: 0.9em;
font-style: italic;
}
}
div.chill_address {
div.chill_address_address {
margin: 0.7em 0;
font-size: 98%;
font-variant: small-caps;
p {
display: inline-block;
margin: 0 0 0 1.5em;
text-indent: -1.5em;
}
}
}
/// base layout positions
body {
display: flex;
flex-direction: column;
min-height: 100vh;
footer {
margin-top: auto;
}
}
header {
nav.navbar {
padding: 0;
a.navbar-brand img {
height: 50px;
margin: 8px 0;
}
div.navbar-collapse {
float: right;
}
ul.navbar-nav {
display: flex;
align-items: stretch;
li.nav-item {
display: flex;
&.btn {
padding-top: 0;
padding-bottom: 0;
}
& > a {
align-self: center;
}
form.form-inline {
align-self: center;
display: flex;
input.form-control {
align-self: center;
height: 32px;
}
}
}
}
div.dropdown-menu {
margin: 0;
padding: 0;
border-radius: 0;
a.dropdown-item {
width: 120%;
border: 0;
border-bottom: 1px solid $gray-200;
font-size: smaller;
i {
float: right; }
&:hover {
color: $gray-500 !important; }
}
}
// fullwidth menu when navbar is collapsed
@media (max-width: 767px) {
& {
position: relative;
}
button.navbar-toggler {
float: right;
}
div.navbar-collapse {
float: none;
position: absolute;
top: 4em;
left: 0;
right: 0;
z-index: 2;
padding: 1em;
border-top: 1px solid shade-color($primary, 25%);
ul.navbar-nav {
display: grid;
grid-template-areas:
"sear sear sear"
"sect user lang";
li.nav-item {
flex-direction: column;
border: 0;
a.nav-link {}
&.navigation-search {
grid-area: sear;
margin-bottom: 1em;
form {
width: 100%;
input.form-control {}
button.btn {}
}
}
&.nav-section { grid-area: sect; }
&.nav-user { grid-area: user; }
&.nav-language { grid-area: lang; }
}
li.dropdown {
&, & > * {
background-color: transparent !important;
}
a.dropdown-toggle {}
div.dropdown-menu {
display: block;
border: 0;
a.dropdown-item {
width: 100%;
border: 0;
border-top: 1px dotted $gray-200;
background-color: transparent !important;
}
}
}
}
}
}
}
}
div.banner {
div.header-name,
div.header-details {
div.row > div:first-child {
@media (min-width: 576px) {
//margin-left: 1.5em;
}
}
}
a {
text-decoration: none;
}
}
div.vertical-menu {
border-radius: 0;
margin-top: 0.5rem;
a.list-group-item {
background-color: $chill-yellow;
border: 0;
margin-bottom: 0.25rem;
&:hover {
background-color: tint-color($chill-yellow, 20%)
}
}
}
footer.footer {
background: $dark;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
p {
font-family: Open Sans;
font-weight: 300;
clear: both;
color: $white;
font-size: 0.9em;
line-height: 1.5em;
margin: auto;
max-width: 35em;
text-align: center;
a, a:hover {
text-decoration: underline;
}
}
}

0
src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/shared.scss → src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/_shared.scss
View File

8
src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/custom/_variables.scss
View File

@@ -14,7 +14,7 @@ $gray-400: #ced4da !default;
$gray-500: #b2b2b2 !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #333333 !default;
$gray-800: #2c2d2f !default;
$gray-900: #212529 !default;
$black: #111 !default;
// scss-docs-end gray-color-variables
@@ -160,7 +160,7 @@ $chill-pink: $pink;
$chill-gray: $gray-600;
$chill-dark-gray: $gray-800;
$chill-light-gray: $gray-200;
$chill-llight-gray: $gray-100;
$chill-llight-gray: $gray-100;
// scss-docs-end theme-color-variables
// scss-docs-start theme-colors-map
@@ -176,7 +176,7 @@ $theme-colors: (
) !default;
// scss-docs-end theme-colors-map
$chill-colors: (
$chill-colors: (
"chill-blue": $chill-blue,
"chill-green": $chill-green,
"chill-green-dark": $chill-green-dark,
@@ -382,7 +382,7 @@ $border-color: $gray-300 !default;
// scss-docs-end border-variables
// scss-docs-start border-radius-variables
$border-radius: .25rem !default; // <==
$border-radius: .25rem !default; // <==
$border-radius-sm: .2rem !default;
$border-radius-lg: .3rem !default;
$border-radius-pill: 50rem !default;

193
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
View File

@@ -1,147 +1,86 @@
<template>
<div class="chill-entity entity-address">
<h2 v-if="!edit">{{ $t('create_a_new_address') }}</h2>
<h2 v-else>{{ $t('edit_address') }}</h2>
<show-address
v-if="address"
v-bind:address="address">
</show-address>
<add-address
@addNewAddress="addNewAddress">
</add-address>
<div v-for="error in displayErrors" class="alert alert-danger my-2">
{{ error }}
</div>
<div v-if="!edit" class='person-address__valid'>
<h2>{{ $t('date') }}</h2>
<div class="input-group mb-3">
<span class="input-group-text" id="validFrom"><i class="fa fa-fw fa-calendar"></i></span>
<input type="date" class="form-control form-control-lg" name="validFrom"
v-bind:placeholder="$t('validFrom')"
v-model="validFrom"
aria-describedby="validFrom" />
</div>
<div v-if="errors.length > 0">
{{ errors }}
</div>
<div v-if="loading">
{{ $t('loading') }}
</div>
<div v-if="success">
{{ $t('person_address_creation_success') }}
</div>
</div>
<ul class="record_actions sticky-form-buttons">
<li class="cancel">
<a :href="backUrl" class="btn btn-cancel">{{ $t('back_to_the_list') }}</a>
</li>
<li v-if="!edit">
<button type="submit" class="btn btn-update" @click="addToPerson">
{{ $t('add_an_address_to_person') }}
</button>
</li>
</ul>
<add-address
v-bind:key="context.entity.type"
v-bind:context="context"
v-bind:options="addAddress.options"
v-bind:result="addAddress.result"
@submitAddress="submitAddress"
ref="addAddress">
</add-address>
</template>
<script>
/*
* Address component is a uniq component for many contexts.
* Allow to create/attach/edit an address to
* - a person (new or edit address),
* - a household (move or edit address)
*
* */
import AddAddress from './components/AddAddress.vue';
import ShowAddress from './components/ShowAddress.vue';
export default {
name: 'App',
name: "App",
components: {
AddAddress,
ShowAddress
AddAddress
},
data() {
return {
edit: window.mode === 'edit',
personId: window.personId,
addressId: window.addressId,
backUrl: `/fr/person/${window.personId}/address/list`, //TODO better way to pass this
validFrom: new Date().toISOString().split('T')[0]
}
},
computed: {
address() {
return this.$store.state.address;
},
errors() {
return this.$store.state.errorMsg;
},
loading() {
return this.$store.state.loading;
},
success() {
return this.$store.state.success;
context: {
edit: window.mode === 'edit',
entity: {
type: window.entityType,
id: window.entityId
},
addressId: window.addressId | null,
backUrl: window.backUrl,
},
addAddress: {
options: {
/// Options override default.
/// null value take default component value defined in AddAddress data()
button: {
text: {
create: window.buttonText || null,
edit: window.buttonText || null
},
size: window.buttonSize || null,
displayText: window.buttonDisplayText //boolean, default: true
},
/// Modal title text if create or edit address (trans chain, see i18n)
title: {
create: window.modalTitle || null,
edit: window.modalTitle || null
},
/// Display each step in page or Modal
bindModal: {
step1: window.binModalStep1, //boolean, default: true
step2: window.binModalStep2 //boolean, default: true
}
}
}
}
},
methods: {
addNewAddress({ address, modal }) {
console.log('@@@ CLICK button addNewAdress', address);
let newAddress = {
'isNoAddress': address.isNoAddress,
'street': address.isNoAddress ? '' : address.street,
'streetNumber': address.isNoAddress ? '' : address.streetNumber,
'postcode': {'id': address.selected.city.id},
'floor': address.floor,
'corridor': address.corridor,
'steps': address.steps,
'flat': address.flat,
'buildingName': address.buildingName,
'distribution': address.distribution,
'extra': address.extra
};
if (address.selected.address.point !== undefined){
newAddress = Object.assign(newAddress, {
'point': address.selected.address.point.coordinates
});
}
if (address.writeNewPostalCode){
let newPostalCode = address.newPostalCode;
newPostalCode = Object.assign(newPostalCode, {
'country': {'id': address.selected.country.id },
});
newAddress = Object.assign(newAddress, {
'newPostalCode': newPostalCode
});
}
if (this.edit){
this.$store.dispatch('updateAddress', {
addressId: this.addressId,
newAddress: newAddress
});
} else {
this.$store.dispatch('addAddress', newAddress);
}
modal.showModal = false;
displayErrors() {
return this.$refs.addAddress.errorMsg;
},
addToPerson() {
this.$store.dispatch('addDateToAddressAndAddressToPerson', {
personId: this.personId,
addressId: this.$store.state.address.address_id,
body: { validFrom: {datetime: `${this.validFrom}T00:00:00+0100`}},
backUrl: this.backUrl
})
},
getEditAddress() {
this.$store.dispatch('getEditAddress', this.addressId);
submitAddress() {
console.log('@@@ click on Submit Address Button');
// Cast child method
this.$refs.addAddress.submitNewAddress();
// it fetch post request only for person and household
// else get returned payload then dispatch from here (parent)
}
},
mounted() {
if (this.edit) {
this.getEditAddress();
}
},
};
}
}
</script>

36
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/api.js
View File

@@ -4,7 +4,7 @@
* @returns {Promise} a promise containing all Country object
*/
const fetchCountries = () => {
console.log('<<< fetching countries');
//console.log('<<< fetching countries');
const url = `/api/1.0/main/country.json?item_per_page=1000`;
return fetch(url)
@@ -20,7 +20,7 @@ const fetchCountries = () => {
* @returns {Promise} a promise containing all Postal Code objects filtered with country
*/
const fetchCities = (country) => {
console.log('<<< fetching cities for', country);
//console.log('<<< fetching cities for', country);
const url = `/api/1.0/main/postal-code.json?item_per_page=1000&country=${country.id}`;
return fetch(url)
.then(response => {
@@ -35,7 +35,7 @@ const fetchCities = (country) => {
* @returns {Promise} a promise containing all AddressReference objects filtered with postal code
*/
const fetchReferenceAddresses = (postalCode) => {
console.log('<<< fetching references addresses for', postalCode);
//console.log('<<< fetching references addresses for', postalCode);
const url = `/api/1.0/main/address-reference.json?item_per_page=1000&postal_code=${postalCode.id}`;
return fetch(url)
.then(response => {
@@ -50,7 +50,7 @@ const fetchReferenceAddresses = (postalCode) => {
* @returns {Promise} a promise containing all AddressReference objects filtered with postal code
*/
const fetchAddresses = () => {
console.log('<<< fetching addresses');
//console.log('<<< fetching addresses');
//TODO deal with huge number of addresses... we should do suggestion...
const url = `/api/1.0/main/address.json?item_per_page=1000`;
return fetch(url)
@@ -125,31 +125,6 @@ const postPostalCode = (postalCode) => {
});
};
/*
* Endpoint chill_api_single_person_address
* method POST, post Person instance
*
* @id integer - id of Person
* @body Object - dictionary with changes to post
*/
const postAddressToPerson = (personId, addressId) => {
console.log(personId);
console.log(addressId);
const body = {
'id': addressId
};
const url = `/api/1.0/person/person/${personId}/address.json`
return fetch(url, {
method: 'POST',
headers: {'Content-Type': 'application/json;charset=utf-8'},
body: JSON.stringify(body)
})
.then(response => {
if (response.ok) { return response.json(); }
throw Error('Error with request resource response');
});
};
/*
* Endpoint chill_api_single_address__index
* method GET, get Address Object
@@ -157,7 +132,7 @@ const postAddressToPerson = (personId, addressId) => {
* @returns {Promise} a promise containing a Address object
*/
const getAddress = (id) => {
console.log('<<< get address');
//console.log('<< get address');
const url = `/api/1.0/main/address/${id}.json`;
return fetch(url)
.then(response => {
@@ -174,6 +149,5 @@ export {
postAddress,
patchAddress,
postPostalCode,
postAddressToPerson,
getAddress
};

749
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
View File

@@ -1,273 +1,618 @@
<template>
<button v-if="!edit" class="btn btn-create mt-4" @click="openModal">
{{ $t('add_an_address_title') }}
</button>
<button v-else class="btn btn-create mt-4" @click="openModal">
{{ $t('edit_address') }}
<!-- start with a button -->
<button v-if="step1WithModal"
@click="openShowPane"
class="btn" :class="getClassButton"
type="button" name="button" :title="$t(getTextButton)">
<span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
</button>
<teleport to="body">
<modal v-if="modal.showModal"
v-bind:modalDialogClass="modal.modalDialogClass"
@close="modal.showModal = false">
<!-- step 1 -->
<teleport to="body" v-if="step1WithModal">
<modal v-if="flag.showPane"
modalDialogClass="modal-dialog-scrollable modal-xl"
@close="flag.showPane = false">
<template v-slot:header>
<h3 v-if="!edit" class="modal-title">{{ $t('add_an_address_title') }}</h3>
<h3 v-if="edit" class="modal-title">{{ $t('edit_an_address_title') }}</h3>
<h2 class="modal-title">{{ $t(getTextTitle) }}
<span v-if="flag.loading" class="loading">
<i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
<span class="sr-only">{{ $t('loading') }}</span>
</span>
</h2>
</template>
<template v-slot:body>
<div class="address-form">
<h4 class="h3">{{ $t('select_an_address_title') }}
<span v-if="loading">
<i class="fa fa-circle-o-notch fa-spin fa-lg"></i>
</span>
</h4>
<div class="row my-3">
<div class="col-lg-6">
<div class="form-check">
<input type="checkbox"
class="form-check-input"
id="isNoAddress"
v-model="isNoAddress"
v-bind:value="value" />
<label class="form-check-label" for="isNoAddress">
{{ $t('isNoAddress') }}
</label>
</div>
<country-selection
v-bind:address="address"
v-bind:getCities="getCities">
</country-selection>
<city-selection
v-bind:address="address"
v-bind:focusOnAddress="focusOnAddress"
v-bind:getReferenceAddresses="getReferenceAddresses">
</city-selection>
<address-selection
v-if="!isNoAddress"
v-bind:address="address"
v-bind:updateMapCenter="updateMapCenter">
</address-selection>
</div>
<div class="col-lg-6 mt-3 mt-lg-0">
<address-map
v-bind:address="address"
ref="addressMap">
</address-map>
</div>
</div>
<address-more
v-if="!isNoAddress"
v-bind:address="address">
</address-more>
</div>
<show-address-pane
v-bind:context="this.context"
v-bind:options="this.options"
v-bind:default="this.default"
v-bind:entity="this.entity"
v-bind:valid="this.valid"
v-bind:flag="this.flag"
ref="showAddress">
</show-address-pane>
</template>
<template v-slot:footer>
<button class="btn btn-create"
@click.prevent="$emit('addNewAddress', { address, modal })">
{{ $t('action.add')}}
<button @click="openEditPane"
class="btn btn-update">
{{ $t('action.edit')}}
</button>
<button class="btn btn-save"
@click.prevent="$emit('submitAddress')">
{{ $t('action.save')}}
</button>
</template>
</modal>
</teleport>
<div class="mt-4" v-else>
<show-address-pane v-if="flag.showPane"
v-bind:context="this.context"
v-bind:options="this.options"
v-bind:default="this.default"
v-bind:entity="this.entity"
v-bind:valid="this.valid"
v-bind:flag="this.flag"
ref="showAddress"
v-bind:insideModal="false" @openEditPane="openEditPane"
@submitAddress="$emit('submitAddress')">
</show-address-pane>
</div>
<!-- step 2 -->
<teleport to="body" v-if="step2WithModal">
<modal v-if="flag.editPane"
modalDialogClass="modal-dialog-scrollable modal-xl"
@close="flag.editPane = false">
<template v-slot:header>
<h2 class="modal-title">{{ $t(getTextTitle) }}
<span v-if="flag.loading" class="loading">
<i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
<span class="sr-only">{{ $t('loading') }}</span>
</span>
</h2>
</template>
<template v-slot:body>
<edit-address-pane
v-bind:context="this.context"
v-bind:options="this.options"
v-bind:default="this.default"
v-bind:entity="this.entity"
v-bind:flag="this.flag"
@getCities="getCities"
@getReferenceAddresses="getReferenceAddresses">
</edit-address-pane>
</template>
<template v-slot:footer>
<button class="btn btn-cancel change-icon" @click="flag.showPane = true; flag.editPane = false;">
{{ $t('action.cancel') }}
</button>
<button class="btn btn-update"
@click="closeEditPane">
{{ $t('action.valid')}}
</button>
</template>
</modal>
</teleport>
<div class="mt-4" v-else>
<edit-address-pane v-if="flag.editPane"
v-bind:context="this.context"
v-bind:options="this.options"
v-bind:default="this.default"
v-bind:entity="this.entity"
v-bind:flag="this.flag"
v-bind:insideModal="false" @closeEditPane="closeEditPane"
@getCities="getCities"
@getReferenceAddresses="getReferenceAddresses">
</edit-address-pane>
</div>
</template>
<script>
import Modal from 'ChillMainAssets/vuejs/_components/Modal';
import { fetchCountries, fetchCities, fetchReferenceAddresses } from '../api'
import CountrySelection from './AddAddress/CountrySelection';
import CitySelection from './AddAddress/CitySelection';
import AddressSelection from './AddAddress/AddressSelection';
import AddressMap from './AddAddress/AddressMap';
import AddressMore from './AddAddress/AddressMore'
import { getAddress, fetchCountries, fetchCities, fetchReferenceAddresses, patchAddress, postAddress, postPostalCode } from '../api';
import { postAddressToPerson, postAddressToHousehold } from "ChillPersonAssets/vuejs/_api/AddAddress.js";
import ShowAddressPane from './ShowAddressPane.vue';
import EditAddressPane from './EditAddressPane.vue';
export default {
name: 'AddAddresses',
name: "AddAddress",
props: ['context', 'options', 'result'],
emits: ['submitAddress'],
components: {
Modal,
CountrySelection,
CitySelection,
AddressSelection,
AddressMap,
AddressMore
ShowAddressPane,
EditAddressPane,
},
props: [
],
emits: ['addNewAddress'],
data() {
return {
edit: window.mode === 'edit',
modal: {
showModal: false,
modalDialogClass: "modal-dialog-scrollable modal-xl"
flag: {
showPane: false,
editPane: false,
loading: false,
success: false
},
loading: false,
address: {
writeNewAddress: false,
writeNewPostalCode: false,
default: {
button: {
text: { create: 'add_an_address_title', edit: 'edit_address' },
type: { create: 'btn-create', edit: 'btn-update'},
displayText: true
},
title: { create: 'add_an_address_title', edit: 'edit_address' },
bindModal: {
step1: true,
step2: true,
},
},
entity: {
address: {}, // <== loaded and returned
loaded: {
countries: [],
cities: [],
addresses: [],
},
selected: {
selected: { // <== make temporary changes
isNoAddress: false,
country: {},
city: {},
postcode: {
code: null,
name: null
},
address: {},
},
newPostalCode: {
code: null,
name: null
writeNew: {
address: false,
postcode: false
}
},
addressMap: {
center : [48.8589, 2.3469], // Note: LeafletJs demands [lat, lon] cfr https://macwright.com/lonlat/
// Note: LeafletJs demands [lat, lon]
// cfr https://macwright.com/lonlat/
center : [48.8589, 2.3469],
zoom: 12
},
isNoAddress: false,
street: null,
streetNumber: null,
floor: null,
corridor: null,
steps: null,
floor: null,
flat: null,
buildingName: null,
extra: null,
distribution: null,
},
errorMsg: {},
valid: {
from: new Date(),
to: null
},
errorMsg: []
}
},
computed: {
isNoAddress: {
set(value) {
console.log('value', value);
this.address.isNoAddress = value;
},
get() {
return this.address.isNoAddress;
step1WithModal() {
return (this.options.bindModal !== null && typeof this.options.bindModal.step1 !== 'undefined') ?
this.options.bindModal.step1 : this.default.bindModal.step1;
},
step2WithModal() {
let step2 = (this.options.bindModal !== null && typeof this.options.bindModal.step2 !== 'undefined') ?
this.options.bindModal.step2 : this.default.bindModal.step2;
if (step2 === false && this.step1WithModal === true) {
console.log("step2 must open in a Modal");
return true;
}
return step2;
},
getTextTitle() {
if ( typeof this.options.title !== 'undefined'
&& ( this.options.title.edit !== null
|| this.options.title.create !== null
)) {
return (this.context.edit) ? this.options.title.edit : this.options.title.create;
}
return (this.context.edit) ? this.default.title.edit : this.default.title.create;
},
getTextButton() {
if ( typeof this.options.button.text !== 'undefined'
&& ( this.options.button.text.edit !== null
|| this.options.button.text.create !== null
)) {
return (this.context.edit) ? this.options.button.text.edit : this.options.button.text.create;
}
return (this.context.edit) ? this.default.button.text.edit : this.default.button.text.create;
},
getClassButton() {
let type = (this.context.edit) ? this.default.button.type.edit : this.default.button.type.create;
let size = (typeof this.options.button !== 'undefined' && this.options.button.size !== null) ?
`${this.options.button.size} ` : '';
return `${size}${type}`;
},
displayTextButton() {
return (typeof this.options.button !== 'undefined' && typeof this.options.button.displayText !== 'undefined') ?
this.options.button.displayText : this.default.button.displayText;
},
context() {
return this.context;
}
},
mounted() {
this.getCountries();
if (!this.step1WithModal) {
//console.log('Mounted now !');
this.openShowPane();
}
},
methods: {
openModal() {
this.modal.showModal = true;
this.resetAll();
//this.$nextTick(function() {
// this.$refs.search.focus(); // positionner le curseur à l'ouverture de la modale
//})
/*
* Opening and closing Panes when interacting with buttons
*/
openShowPane() {
console.log('open the Show Panel');
if (this.context.edit) {
this.getInitialAddress(this.context.addressId);
}
// when create new address, start first with editPane
if ( this.context.edit === false
&& this.flag.editPane === false
) {
this.openEditPane();
this.flag.editPane = true;
} else {
this.flag.showPane = true;
}
},
focusOnCity() {
const citySelector = document.getElementById('citySelector');
citySelector.focus();
openEditPane() {
console.log('open the Edit panel');
this.initForm();
this.getCountries();
},
focusOnAddress() {
const addressSelector = document.getElementById('addressSelector');
addressSelector.focus();
closeEditPane() {
console.log('close the Edit Panel');
this.applyChanges();
this.flag.showPane = true;
this.flag.editPane = false;
},
getCountries() {
console.log('getCountries');
this.loading = true;
fetchCountries().then(countries => new Promise((resolve, reject) => {
this.address.loaded.countries = countries.results;
resolve()
this.loading = false;
}))
.catch((error) => {
this.errorMsg.push(error.message);
this.loading = false;
});
},
getCities(country) {
console.log('getCities for', country.name);
this.loading = true;
fetchCities(country).then(cities => new Promise((resolve, reject) => {
this.address.loaded.cities = cities.results.filter(c => c.origin !== 3); // filter out user-defined cities
resolve();
this.loading = false;
/*
* Async Fetch datas
*/
getInitialAddress(id) {
this.flag.loading = true;
getAddress(id).then(
address => new Promise((resolve, reject) => {
this.entity.address = address;
this.flag.loading = false;
resolve();
}))
.catch((error) => {
this.errorMsg.push(error.message);
this.loading = false;
this.flag.loading = false;
});
},
getReferenceAddresses(city) {
this.loading = true;
console.log('getReferenceAddresses for', city.name);
fetchReferenceAddresses(city).then(addresses => new Promise((resolve, reject) => {
console.log('addresses', addresses);
this.address.loaded.addresses = addresses.results;
getCountries() {
this.flag.loading = true;
fetchCountries().then(
countries => new Promise((resolve, reject) => {
this.entity.loaded.countries = countries.results;
this.flag.showPane = false;
this.flag.editPane = true;
this.flag.loading = false;
resolve()
}))
.catch((error) => {
this.errorMsg.push(error.message);
this.flag.loading = false;
});
},
getCities(country) {
this.flag.loading = true;
fetchCities(country).then(
cities => new Promise((resolve, reject) => {
this.entity.loaded.cities = cities.results.filter(c => c.origin !== 3); // filter out user-defined cities
this.flag.loading = false;
resolve();
this.loading = false;
}))
}))
.catch((error) => {
this.errorMsg.push(error.message);
this.flag.loading = false;
});
},
getReferenceAddresses(city) {
this.flag.loading = true;
fetchReferenceAddresses(city).then(
addresses => new Promise((resolve, reject) => {
this.entity.loaded.addresses = addresses.results;
this.flag.loading = false;
resolve();
}))
.catch((error) => {
this.errorMsg.push(error.message);
this.flag.loading = false;
});
},
/*
* Make form ready for new changes
*/
initForm() {
console.log('init form');
this.entity.loaded.addresses = [];
this.entity.loaded.cities = [];
this.entity.loaded.countries = [];
this.entity.selected.isNoAddress = (this.context.edit && this.entity.address.text === '') ? true : false;
this.entity.selected.country = this.context.edit ? this.entity.address.country : {};
this.entity.selected.postcode = this.context.edit ? this.entity.address.postcode : {};
this.entity.selected.city = {};
this.entity.selected.address = {};
this.entity.selected.address.street = this.context.edit ? this.entity.address.street: null;
this.entity.selected.address.streetNumber = this.context.edit ? this.entity.address.streetNumber: null;
this.entity.selected.address.floor = this.context.edit ? this.entity.address.floor: null;
this.entity.selected.address.corridor = this.context.edit ? this.entity.address.corridor: null;
this.entity.selected.address.steps = this.context.edit ? this.entity.address.steps: null;
this.entity.selected.address.flat = this.context.edit ? this.entity.address.flat: null;
this.entity.selected.address.buildingName = this.context.edit ? this.entity.address.buildingName: null;
this.entity.selected.address.distribution = this.context.edit ? this.entity.address.distribution: null;
this.entity.selected.address.extra = this.context.edit ? this.entity.address.extra: null;
this.entity.selected.writeNew.address = this.context.edit;
this.entity.selected.writeNew.postcode = this.context.edit;
},
/*
* When changes are validated (get out step2 edit pane, button valid),
* apply some transformations before asyncing with backend
* from entity.selected to entity.address
*/
applyChanges()
{
let newAddress = {
'isNoAddress': this.entity.selected.isNoAddress,
'street': this.entity.selected.isNoAddress ? '' : this.entity.selected.address.street,
'streetNumber': this.entity.selected.isNoAddress ? '' : this.entity.selected.address.streetNumber,
'postcode': {'id': this.entity.selected.city.id },
'floor': this.entity.selected.address.floor,
'corridor': this.entity.selected.address.corridor,
'steps': this.entity.selected.address.steps,
'flat': this.entity.selected.address.flat,
'buildingName': this.entity.selected.address.buildingName,
'distribution': this.entity.selected.address.distribution,
'extra': this.entity.selected.address.extra
};
if (this.entity.selected.address.point !== undefined) {
newAddress = Object.assign(newAddress, {
'point': this.entity.selected.address.point.coordinates
});
}
if (this.entity.selected.writeNew.postcode) {
let newPostcode = this.entity.selected.postcode;
newPostcode = Object.assign(newPostcode, {
'country': {'id': this.entity.selected.country.id },
});
newAddress = Object.assign(newAddress, {
'newPostcode': newPostcode
});
}
if (this.context.edit) {
this.updateAddress({
addressId: this.context.addressId,
newAddress: newAddress
});
} else {
this.addAddress(newAddress);
}
},
/*
* Async POST transactions,
* creating new address, and receive backend datas when promise is resolved
*/
addAddress(payload)
{
this.flag.loading = true;
if ('newPostcode' in payload) {
let postcodeBody = payload.newPostcode;
if (this.context.entity.type === 'person') {
postcodeBody = Object.assign(postcodeBody, {'origin': 3});
}
postPostalCode(postcodeBody)
.then(postalCode => {
let body = payload;
body.postcode = {'id': postalCode.id },
postAddress(body)
.then(address => new Promise((resolve, reject) => {
this.entity.address = address;
this.flag.loading = false;
this.flag.success = true;
resolve();
}))
.catch((error) => {
this.errorMsg.push(error);
this.flag.loading = false;
});
})
} else {
postAddress(payload)
.then(address => new Promise((resolve, reject) => {
this.entity.address = address;
this.flag.loading = false;
this.flag.success = true;
resolve();
}))
.catch((error) => {
this.errorMsg.push(error);
this.flag.loading = false;
});
}
},
/*
* Async PATCH transactions,
* then update existing address with backend datas when promise is resolved
*/
updateAddress(payload)
{
// TODO change the condition because it writes new postal code in edit mode now: !writeNewPostalCode
this.flag.loading = true;
if ('newPostcode' in payload.newAddress) {
let postcodeBody = payload.newAddress.newPostcode;
postcodeBody = Object.assign(postcodeBody, {'origin': 3});
postPostalCode(postcodeBody)
.then(postalCode => {
let body = payload.newAddress;
body.postcode = {'id': postalCode.id },
patchAddress(payload.addressId, body)
.then(address => new Promise((resolve, reject) => {
this.entity.address = address;
this.flag.loading = false;
this.flag.success = true;
resolve();
}))
.catch((error) => {
this.errorMsg.push(error);
this.flag.loading = false;
});
})
} else {
patchAddress(payload.addressId, payload.newAddress)
.then(address => new Promise((resolve, reject) => {
this.entity.address = address;
this.flag.loading = false;
this.flag.success = true;
resolve();
}))
.catch((error) => {
this.errorMsg.push(error);
this.flag.loading = false;
});
}
},
/*
* When submit address
* (get out step1 show pane, submit button)
*/
submitNewAddress()
{
let payload = {
entity: this.context.entity.type,
entityId: this.context.entity.id,
addressId: this.entity.address.address_id,
body: {
validFrom: {
datetime: `${this.valid.from.toISOString().split('T')[0]}T00:00:00+0100`
}
},
backUrl: this.context.backUrl
}
if ( payload.entity !== 'person' && payload.entity !== 'household' ) {
// just return payload to parent
// (changes will be patched in parent store)
this.initForm();
this.flag.showPane = false;
return payload;
}
console.log('submitNewAddress with', payload);
this.addDateToAddressAndAddressTo(payload);
this.initForm();
this.flag.showPane = false;
},
addDateToAddressAndAddressTo(payload)
{
console.log('addDateToAddressAndAddressTo', payload.entity)
this.flag.loading = true;
return patchAddress(payload.addressId, payload.body)
.then(address => new Promise((resolve, reject) => {
this.valid.from = address.validFrom;
resolve();
})
.then(this.postAddressTo(payload))
)
.catch((error) => {
this.errorMsg.push(error.message);
this.loading = false;
this.errorMsg.push(error);
this.flag.loading = false;
});
},
updateMapCenter(point) {
console.log('point', point);
this.address.addressMap.center[0] = point.coordinates[1]; // TODO use reverse()
this.address.addressMap.center[1] = point.coordinates[0];
this.$refs.addressMap.update(); // cast child methods
postAddressTo(payload)
{
console.log('postAddressTo', payload.entity);
if (!this.context.edit) {
switch (payload.entity) {
case 'household':
postAddressToHousehold(payload.entityId, payload.addressId)
.then(household => new Promise((resolve, reject) => {
console.log('postAddressToHousehold', household);
this.flag.loading = false;
this.flag.success = true;
window.location.assign(payload.backUrl);
resolve();
}))
.catch((error) => {
this.errorMsg.push(error);
this.flag.loading = false;
})
;
break;
case 'person':
postAddressToPerson(payload.entityId, payload.addressId)
.then(person => new Promise((resolve, reject) => {
console.log('postAddressToPerson', person);
this.flag.loading = false;
this.flag.success = true;
window.location.assign(payload.backUrl);
resolve();
}))
.catch((error) => {
this.errorMsg.push(error);
this.flag.loading = false;
})
;
break;
default:
this.errorMsg.push('That entity is not managed by address !');
}
} else {
// address is already linked, just finish !
window.location.assign(payload.backUrl);
}
},
resetAll() {
console.log('reset all selected');
this.address.loaded.addresses = [];
this.address.selected.address = {};
this.address.loaded.cities = [];
this.address.selected.city = {};
this.address.selected.country = {};
this.address.isNoAddress = this.edit ? this.$store.state.editAddress.isNoAddress: false;;
this.address.street = this.edit ? this.$store.state.editAddress.street: null;
this.address.streetNumber = this.edit ? this.$store.state.editAddress.streetNumber: null;
this.address.floor = this.edit ? this.$store.state.editAddress.floor: null;
this.address.corridor = this.edit ? this.$store.state.editAddress.corridor: null;
this.address.steps = this.edit ? this.$store.state.editAddress.steps: null;
this.address.flat = this.edit ? this.$store.state.editAddress.flat: null;
this.address.buildingName = this.edit ? this.$store.state.editAddress.buildingName: null;
this.address.distribution = this.edit ? this.$store.state.editAddress.distribution: null;
this.address.extra = this.edit ? this.$store.state.editAddress.extra: null;
this.address.writeNewAddress = this.edit;
this.address.writeNewPostalCode = this.edit;
this.address.newPostalCode = this.edit ?
{
code: this.$store.state.editAddress.postcode !== undefined ? this.$store.state.editAddress.postcode.code : null,
name: this.$store.state.editAddress.postcode !== undefined ? this.$store.state.editAddress.postcode.name : null
} : {};
console.log('cities and addresses', this.address.loaded.cities, this.address.loaded.addresses);
}
}
}
</script>
<style lang="scss">
div.address-form {
h4.h3 {
font-weight: bold;
}
div#address_map {
height: 400px;
width: 100%;
div.entity-address {
position: relative;
div.loading {
position: absolute;
right: 0; top: -55px;
}
}
</style>

12
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMap.vue
View File

@@ -13,16 +13,18 @@ let marker;
export default {
name: 'AddressMap',
props: ['address'],
props: ['entity'],
computed: {
center() {
return this.address.addressMap.center;
return this.entity.selected.addressMap.center;
},
},
methods:{
init() {
map = L.map('address_map').setView([46.67059, -1.42683], 12);
map.scrollWheelZoom.disable();
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
@@ -36,9 +38,9 @@ export default {
},
update() {
console.log('update map with : ', this.address.addressMap.center)
marker.setLatLng(this.address.addressMap.center);
map.setView(this.address.addressMap.center, 15);
//console.log('update map with : ', this.address.addressMap.center)
marker.setLatLng(this.entity.addressMap.center);
map.setView(this.entity.addressMap.center, 15);
}
},
mounted(){

37
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMore.vue
View File

@@ -74,69 +74,62 @@
<script>
export default {
name: "AddressMore",
props: ['address'],
props: ['entity'],
computed: {
floor: {
set(value) {
console.log('value', value);
this.address.floor = value;
this.entity.selected.address.floor = value;
},
get() {
return this.address.floor;
return this.entity.selected.address.floor;
}
},
corridor: {
set(value) {
console.log('value', value);
this.address.corridor = value;
this.entity.selected.address.corridor = value;
},
get() {
return this.address.corridor;
return this.entity.selected.address.corridor;
}
},
steps: {
set(value) {
console.log('value', value);
this.address.steps = value;
this.entity.selected.address.steps = value;
},
get() {
return this.address.steps;
return this.entity.selected.address.steps;
}
},
flat: {
set(value) {
console.log('value', value);
this.address.flat = value;
this.entity.selected.address.flat = value;
},
get() {
return this.address.flat;
return this.entity.selected.address.flat;
}
},
buildingName: {
set(value) {
console.log('value', value);
this.address.buildingName = value;
this.entity.selected.address.buildingName = value;
},
get() {
return this.address.buildingName;
return this.entity.selected.address.buildingName;
}
},
extra: {
set(value) {
console.log('value', value);
this.address.extra = value;
this.entity.selected.address.extra = value;
},
get() {
return this.address.extra;
return this.entity.selected.address.extra;
}
},
distribution: {
set(value) {
console.log('value', value);
this.address.distribution = value;
this.entity.selected.address.distribution = value;
},
get() {
return this.address.distribution;
return this.entity.selected.address.distribution;
}
}
}

24
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue
View File

@@ -47,7 +47,7 @@ import VueMultiselect from 'vue-multiselect';
export default {
name: 'AddressSelection',
components: { VueMultiselect },
props: ['address', 'updateMapCenter'],
props: ['entity', 'updateMapCenter'],
data() {
return {
value: null
@@ -55,28 +55,28 @@ export default {
},
computed: {
writeNewAddress() {
return this.address.writeNewAddress;
return this.entity.selected.writeNew.address;
},
writeNewPostalCode() {
return this.address.writeNewPostalCode;
return this.entity.selected.writeNew.postCode;
},
addresses() {
return this.address.loaded.addresses;
return this.entity.loaded.addresses;
},
street: {
set(value) {
this.address.street = value;
this.entity.selected.address.street = value;
},
get() {
return this.address.street;
return this.entity.selected.address.street;
}
},
streetNumber: {
set(value) {
this.address.streetNumber = value;
this.entity.selected.address.streetNumber = value;
},
get() {
return this.address.streetNumber;
return this.entity.selected.address.streetNumber;
}
},
},
@@ -85,13 +85,13 @@ export default {
return value.streetNumber === undefined ? value.street : `${value.streetNumber}, ${value.street}`
},
selectAddress(value) {
this.address.selected.address = value;
this.address.street = value.street;
this.address.streetNumber = value.streetNumber;
this.entity.selected.address = value;
this.entity.selected.address.street = value.street;
this.entity.selected.address.streetNumber = value.streetNumber;
this.updateMapCenter(value.point);
},
addAddress() {
this.address.writeNewAddress = true;
this.entity.selected.writeNew.address = true;
}
}
};

37
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue
View File

@@ -12,13 +12,13 @@
:placeholder="$t('select_city')"
:taggable="true"
:multiple="false"
@tag="addPostalCode"
@tag="addPostcode"
:tagPlaceholder="$t('create_postal_code')"
:options="cities">
</VueMultiselect>
</div>
<div class="custom-postcode row g-1" v-if="writeNewPostalCode">
<div class="custom-postcode row g-1" v-if="writeNewPostcode">
<div class="col-4">
<div class="form-floating">
<input class="form-control"
@@ -28,7 +28,7 @@
v-model="code"/>
<label for="code">{{ $t('postalCode_code') }}</label>
</div>
</div>
</div>
<div class="col-8">
<div class="form-floating">
<input class="form-control"
@@ -48,33 +48,34 @@ import VueMultiselect from 'vue-multiselect';
export default {
name: 'CitySelection',
components: { VueMultiselect },
props: ['address', 'getReferenceAddresses', 'focusOnAddress'],
props: ['entity', 'focusOnAddress'],
emits: ['getReferenceAddresses'],
data() {
return {
value: null
}
},
computed: {
writeNewPostalCode() {
return this.address.writeNewPostalCode;
writeNewPostcode() {
return this.entity.selected.writeNew.postcode;
},
cities() {
return this.address.loaded.cities;
return this.entity.loaded.cities;
},
name: {
set(value) {
this.address.newPostalCode.name = value;
this.entity.selected.postcode.name = value;
},
get() {
return this.address.newPostalCode.name;
return this.entity.selected.postcode.name;
}
},
code: {
set(value) {
this.address.newPostalCode.code= value;
this.entity.selected.postcode.code= value;
},
get() {
return this.address.newPostalCode.code;
return this.entity.selected.postcode.code;
}
},
},
@@ -83,14 +84,14 @@ export default {
return `${value.code}-${value.name}`
},
selectCity(value) {
this.address.selected.city = value;
this.address.newPostalCode.name = value.name;
this.address.newPostalCode.code = value.code;
this.getReferenceAddresses(value);
this.entity.selected.city = value;
this.entity.selected.postcode.name = value.name;
this.entity.selected.postcode.code = value.code;
this.$emit('getReferenceAddresses', value);
this.focusOnAddress();
},
addPostalCode() {
this.address.writeNewPostalCode = true;
addPostcode() {
this.entity.selected.writeNew.postcode = true;
}
}
};

58
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CountrySelection.vue
View File

@@ -2,13 +2,13 @@
<div class="my-1">
<label class="col-form-label" for="countrySelect">{{ $t('country') }}</label>
<VueMultiselect
v-model="value"
id="countrySelect"
track-by="id"
label="name"
:custom-label="transName"
:placeholder="$t('select_country')"
:options="countries"
track-by="id"
v-bind:custom-label="transName"
v-bind:placeholder="$t('select_country')"
v-bind:options="sortedCountries"
v-model="value"
@select="selectCountry">
</VueMultiselect>
</div>
@@ -20,43 +20,47 @@ import VueMultiselect from 'vue-multiselect';
export default {
name: 'CountrySelection',
components: { VueMultiselect },
props: ['address', 'getCities'],
props: ['context', 'entity'],
emits: ['getCities'],
data() {
return {
edit: window.mode === 'edit',
defaultCountry: this.edit ? this.$store.state.editAddress.country.code : 'FR',
value: this.address.loaded.countries.filter(c => c.countryCode === this.defaultCountry)[0]
value: this.selectCountryByCode(
this.context.edit ? this.entity.selected.country.code : 'FR'
)
}
},
computed: {
sortedCountries() {
//console.log('sorted countries');
const countries = this.entity.loaded.countries;
let sortedCountries = [];
sortedCountries.push(...countries.filter(c => c.countryCode === 'FR'))
sortedCountries.push(...countries.filter(c => c.countryCode === 'BE'))
sortedCountries.push(...countries.filter(c => c.countryCode !== 'FR').filter(c => c.countryCode !== 'BE'))
return sortedCountries;
}
},
mounted() {
this.init();
},
methods: {
init() {
this.value = this.edit ?
this.address.loaded.countries.filter(c => c.countryCode === this.$store.state.editAddress.country.code)[0]:
this.address.loaded.countries.filter(c => c.countryCode === 'FR')[0]
if (this.value !== undefined) {
this.selectCountry(this.value);
}
},
selectCountryByCode(countryCode) {
return this.entity.loaded.countries.filter(c => c.countryCode === countryCode)[0];
},
transName ({ name }) {
return name.fr //TODO multilang
},
selectCountry(value) {
this.address.selected.country = value;
this.getCities(value);
},
},
mounted(){
this.init()
},
computed: {
countries() {
const countries = this.address.loaded.countries;
let orderedCountries = [];
orderedCountries.push(...countries.filter(c => c.countryCode === 'FR'))
orderedCountries.push(...countries.filter(c => c.countryCode === 'BE'))
orderedCountries.push(...countries.filter(c => c.countryCode !== 'FR').filter(c => c.countryCode !== 'BE'))
return orderedCountries;
//console.log('select country', value);
this.entity.selected.country = value;
this.$emit('getCities', value);
}
}
};
</script>

47
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/SelectHouseholdAddress.vue Normal file
View File

@@ -0,0 +1,47 @@
<template>
<div class="container">
<VueMultiselect
v-model="value"
@select="selectAddress"
name="field"
track-by="id"
label="value"
:custom-label="transName"
:multiple="false"
:placeholder="$t('select_address')"
:options="addresses">
</VueMultiselect>
</div>
</template>
<script>
import VueMultiselect from 'vue-multiselect';
export default {
name: 'SelectHouseholdAddress',
components: { VueMultiselect },
props: ['address'],
data() {
return {
value: null
}
},
computed: {
addresses() {
return this.address.loaded.addresses;
}
},
methods: {
transName(value) {
return `${value.text} ${value.postcode.name}`
},
selectAddress(value) {
this.address.selected.address = value;
}
}
};
</script>
<style src="vue-multiselect/dist/vue-multiselect.css"></style>

160
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditAddressPane.vue Normal file
View File

@@ -0,0 +1,160 @@
<template>
<div class="address-form">
<!-- Not display in modal -->
<div v-if="insideModal == false" class="loading">
<i v-if="flag.loading" class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></i>
<span class="sr-only">Loading...</span>
</div>
<h4 class="h3">{{ $t('select_an_address_title') }}</h4>
<div class="row my-3">
<div class="col-lg-6">
<div class="form-check">
<input type="checkbox"
class="form-check-input"
id="isNoAddress"
v-model="isNoAddress"
v-bind:value="value" />
<label class="form-check-label" for="isNoAddress">
{{ $t('isNoAddress') }}
</label>
</div>
<country-selection
v-bind:context="context"
v-bind:entity="entity"
@getCities="$emit('getCities', selected.country)">
</country-selection>
<city-selection
v-bind:entity="entity"
v-bind:focusOnAddress="focusOnAddress"
@getReferenceAddresses="$emit('getReferenceAddresses', selected.city)">
</city-selection>
<address-selection v-if="!isNoAddress"
v-bind:entity="entity"
v-bind:updateMapCenter="updateMapCenter">
</address-selection>
</div>
<div class="col-lg-6 mt-3 mt-lg-0">
<address-map
v-bind:entity="entity"
ref="addressMap">
</address-map>
</div>
</div>
<address-more v-if="!isNoAddress"
v-bind:entity="entity">
</address-more>
<!-- Not display in modal -->
<ul v-if="insideModal == false"
class="record_actions sticky-form-buttons">
<li class="cancel">
<a class="btn btn-cancel" v-bind:href="context.backUrl">
{{ $t('back_to_the_list') }}
</a>
</li>
<li>
<a class="btn btn-cancel change-icon" @click="flag.showPane = true; flag.editPane = false;">
{{ $t('action.cancel') }}
</a>
</li>
<li>
<a class="btn btn-update" @click.prevent="$emit('closeEditPane')">
{{ $t('action.valid_and_see')}}
</a>
</li>
</ul>
</div>
</template>
<script>
import CountrySelection from './AddAddress/CountrySelection';
import CitySelection from './AddAddress/CitySelection';
import AddressSelection from './AddAddress/AddressSelection';
import AddressMap from './AddAddress/AddressMap';
import AddressMore from './AddAddress/AddressMore'
export default {
name: "EditAddressPane",
components: {
CountrySelection,
CitySelection,
AddressSelection,
AddressMap,
AddressMore
},
props: [
'context',
'options',
'default',
'flag',
'entity',
'errorMsg',
'insideModal'
],
emits: ['closeEditPane', 'getCities', 'getReferenceAddresses'],
data() {
return {
value: false
}
},
computed: {
address() {
return this.entity.address;
},
loaded() {
return this.entity.loaded;
},
selected() {
return this.entity.selected;
},
addressMap() {
return this.entity.addressMap;
},
isNoAddress: {
set(value) {
console.log('isNoAddress value', value);
this.entity.selected.isNoAddress = value;
},
get() {
return this.entity.selected.isNoAddress;
}
}
},
methods: {
focusOnAddress() {
const addressSelector = document.getElementById('addressSelector');
addressSelector.focus();
},
updateMapCenter(point) {
//console.log('point', point);
this.addressMap.center[0] = point.coordinates[1]; // TODO use reverse()
this.addressMap.center[1] = point.coordinates[0];
this.$refs.addressMap.update(); // cast child methods
}
}
};
</script>
<style lang="scss">
div.address-form {
h4.h3 {
font-weight: bold;
}
div#address_map {
height: 400px;
width: 100%;
}
}
</style>

108
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowAddress.vue
View File

@@ -1,64 +1,62 @@
<template>
<div class="address multiline">
<p v-if="address.text"
class="street">
{{ address.text }}
</p>
<p v-if="address.postcode"
class="postcode">
{{ address.postcode.name }}
</p>
<p v-if="address.country"
class="country">
{{ address.country.name.fr }}
</p>
<div v-if="address.floor">
<span class="floor">
<b>{{ $t('floor') }}</b>: {{ address.floor }}
</span>
<div class="chill-entity entity-address my-3">
<div class="address multiline">
<p v-if="address.text"
class="street">
{{ address.text }}
</p>
<p v-if="address.postcode"
class="postcode">
{{ address.postcode.code }} {{ address.postcode.name }}
</p>
<p v-if="address.country"
class="country">
{{ address.country.name.fr }}
</p>
</div>
<div v-if="address.corridor">
<span class="corridor">
<b>{{ $t('corridor') }}</b>: {{ address.corridor }}
</span>
</div>
<div v-if="address.steps">
<span class="steps">
<b>{{ $t('steps') }}</b>: {{ address.steps }}
</span>
</div>
<div v-if="address.flat">
<span class="flat">
<b>{{ $t('flat') }}</b>: {{ address.flat }}
</span>
</div>
<div v-if="address.buildingName">
<span class="buildingName">
<b>{{ $t('buildingName') }}</b>: {{ address.buildingName }}
</span>
</div>
<div v-if="address.extra">
<span class="extra">
<b>{{ $t('extra') }}</b>: {{ address.extra }}
</span>
</div>
<div v-if="address.distribution">
<span class="distribution">
<b>{{ $t('distribution') }}</b>: {{ address.distribution }}
</span>
<div>
<div v-if="address.floor">
<span class="floor">
<b>{{ $t('floor') }}</b>: {{ address.floor }}
</span>
</div>
<div v-if="address.corridor">
<span class="corridor">
<b>{{ $t('corridor') }}</b>: {{ address.corridor }}
</span>
</div>
<div v-if="address.steps">
<span class="steps">
<b>{{ $t('steps') }}</b>: {{ address.steps }}
</span>
</div>
<div v-if="address.flat">
<span class="flat">
<b>{{ $t('flat') }}</b>: {{ address.flat }}
</span>
</div>
<div v-if="address.buildingName">
<span class="buildingName">
<b>{{ $t('buildingName') }}</b>: {{ address.buildingName }}
</span>
</div>
<div v-if="address.extra">
<span class="extra">
<b>{{ $t('extra') }}</b>: {{ address.extra }}
</span>
</div>
<div v-if="address.distribution">
<span class="distribution">
<b>{{ $t('distribution') }}</b>: {{ address.distribution }}
</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ShowAddress',
props: ['address'],
data() {
return {
}
},
};
name: "ShowAddress",
props: ['address']
}
</script>

101
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowAddressPane.vue Normal file
View File

@@ -0,0 +1,101 @@
<template>
<div v-if="insideModal == false" class="loading">
<i v-if="flag.loading" class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></i>
<span class="sr-only">{{ $t('loading') }}</span>
</div>
<div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
{{ errorMsg }}
</div>
<div v-if="flag.success" class="alert alert-success">
{{ $t(getSuccessText) }}
</div>
<show-address :address="address"></show-address>
<div v-if="showDateFrom" class='address-valid date-since'>
<h3>{{ $t(getValidFromDateText) }}</h3>
<div class="input-group mb-3">
<span class="input-group-text" id="validFrom"><i class="fa fa-fw fa-calendar"></i></span>
<input type="date" class="form-control form-control-lg" name="validFrom"
v-bind:placeholder="$t(getValidFromDateText)"
v-model="validFrom"
aria-describedby="validFrom"
/>
</div>
</div>
<ul v-if="insideModal == false"
class="record_actions sticky-form-buttons">
<li class="cancel">
<a class="btn btn-cancel" v-bind:href="context.backUrl">
{{ $t('back_to_the_list') }}</a>
</li>
<li>
<a @click.prevent="$emit('openEditPane')"
class="btn btn-update">
{{ $t('action.edit')}}
</a>
</li>
<li>
<a class="btn btn-save"
@click.prevent="$emit('submitAddress')">
{{ $t('action.save')}}
</a>
</li>
</ul>
</template>
<script>
import { dateToISO, ISOToDate, ISOToDatetime } from 'ChillMainAssets/chill/js/date.js';
import ShowAddress from './ShowAddress.vue';
export default {
name: 'ShowAddressPane',
components: {
ShowAddress
},
props: [
'context',
'options',
'default',
'flag',
'entity',
'valid',
'errorMsg',
'insideModal'
],
emits: ['openEditPane', 'submitAddress'], //?
computed: {
address() {
return this.entity.address;
},
validFrom: {
set(value) {
this.valid.from = ISOToDate(value);
},
get() {
return dateToISO(this.valid.from);
}
},
getValidFromDateText() {
return (this.context.entity.type === 'household') ? 'move_date' : 'validFrom';
},
getSuccessText() {
switch (this.context.entity.type) {
/*
case 'household':
return (this.context.edit) ? 'household_address_edit_success' : 'household_address_move_success';
case 'person':
return (this.context.edit) ? 'person_address_edit_success' : 'person_address_creation_success';
*/
default:
return (this.context.edit) ? 'address_edit_success' : 'address_new_success';
}
},
showDateFrom() {
return !this.context.edit && !this.options.hideDateFrom;
}
}
};
</script>

55
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/i18n.js Normal file
View File

@@ -0,0 +1,55 @@
const addressMessages = {
fr: {
add_an_address_title: 'Créer une adresse',
edit_an_address_title: 'Modifier une adresse',
create_a_new_address: 'Créer une nouvelle adresse',
edit_address: 'Modifier l\'adresse',
select_an_address_title: 'Sélectionner une adresse',
fill_an_address: 'Compléter l\'adresse',
select_country: 'Choisir le pays',
country: 'Pays',
select_city: 'Choisir une localité',
city: 'Localité',
other_city: 'Autre localité',
select_address: 'Choisir une adresse',
address: 'Adresse',
other_address: 'Autre adresse',
create_address: 'Adresse inconnue. Cliquez ici pour créer une nouvelle adresse',
isNoAddress: 'Pas d\'adresse complète',
street: 'Nom de rue',
streetNumber: 'Numéro',
floor: 'Étage',
corridor: 'Couloir',
steps: 'Escalier',
flat: 'Appartement',
buildingName: 'Nom du bâtiment',
extra: 'Complément d\'adresse',
distribution: 'Service particulier de distribution',
create_postal_code: 'Localité inconnue. Cliquez ici pour créer une nouvelle localité',
postalCode_name: 'Nom',
postalCode_code: 'Code postal',
date: 'Date de la nouvelle adresse',
validFrom: 'Date de la nouvelle adresse',
back_to_the_list: 'Retour à la liste',
loading: 'chargement en cours...',
address_new_success: 'La nouvelle adresse est enregistrée',
address_edit_success: 'L\'adresse a été mise à jour',
// person specific
add_an_address_to_person: 'Ajouter l\'adresse à la personne',
person_address_creation_success: 'La nouvelle adresse de la personne est enregistrée',
person_address_edit_success: 'L\'adresse de la personne a été mise à jour',
// household specific
move_date: 'Date du déménagement',
select_a_existing_address: 'Sélectionner une adresse existante',
add_an_address_to_household: 'Enregistrer',
household_address_move_success: 'La nouvelle adresse du ménage est enregistrée',
household_address_edit_success: 'L\'adresse du ménage a été mise à jour',
}
};
export {
addressMessages
};

13
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/index.js
View File

@@ -1,16 +1,13 @@
import { createApp } from 'vue'
import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n'
import { addressMessages } from './js/i18n'
import { store } from './store'
import { createApp } from 'vue';
import App from './App.vue';
import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n';
import { addressMessages } from './i18n';
const i18n = _createI18n(addressMessages);
const i18n = _createI18n( addressMessages );
const app = createApp({
template: `<app></app>`,
template: `<app></app>`,
})
.use(store)
.use(i18n)
.component('app', App)
.mount('#address');

42
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/js/i18n.js
View File

@@ -1,42 +0,0 @@
const addressMessages = {
fr: {
add_an_address_title: 'Créer une adresse',
edit_an_address_title: 'Modifier une adresse',
create_a_new_address: 'Créer une nouvelle adresse',
edit_address: 'Modifier l\'adresse',
select_an_address_title: 'Sélectionner une adresse',
fill_an_address: 'Compléter l\'adresse',
select_country: 'Choisir le pays',
country: 'Pays',
select_city: 'Choisir une localité',
city: 'Localité',
other_city: 'Autre localité',
select_address: 'Choisir une adresse',
address: 'Adresse',
other_address: 'Autre adresse',
create_address: 'Adresse inconnue. Cliquez ici pour créer une nouvelle adresse',
isNoAddress: 'Pas d\'adresse complète',
street: 'Nom de rue',
streetNumber: 'Numéro',
floor: 'Étage',
corridor: 'Couloir',
steps: 'Escalier',
flat: 'Appartement',
buildingName: 'Nom du bâtiment',
extra: 'Complément d\'adresse',
distribution: 'Service particulier de distribution',
create_postal_code: 'Localité inconnue. Cliquez ici pour créer une nouvelle localité',
postalCode_name: 'Nom',
postalCode_code: 'Code postal',
date: 'Date de la nouvelle adresse',
add_an_address_to_person: 'Ajouter l\'adresse à la personne',
validFrom: 'Date de la nouvelle adresse',
back_to_the_list: 'Retour à la liste',
person_address_creation_success: 'La nouvelle adresse de la personne est enregistrée',
loading: 'chargement en cours...'
}
};
export {
addressMessages
};

14
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/store.js Normal file
View File

@@ -0,0 +1,14 @@
import 'es6-promise/auto';
import { createStore } from 'vuex';
const debug = process.env.NODE_ENV !== 'production';
const store = createStore({
strict: debug,
state: {},
getters: {},
mutations: {},
actions: {},
});
export { store };

158
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/store/index.js
View File

@@ -1,158 +0,0 @@
import 'es6-promise/auto';
import { createStore } from 'vuex';
import { patchAddress, postAddress, postPostalCode, postAddressToPerson, getAddress } from '../api'
const debug = process.env.NODE_ENV !== 'production';
const store = createStore({
strict: debug,
state: {
address: {},
editAddress: {}, //TODO or should be address?
person: {},
errorMsg: [],
loading: false,
success: false
},
getters: {
},
mutations: {
catchError(state, error) {
state.errorMsg.push(error);
},
addAddress(state, address) {
console.log('@M addAddress address', address);
state.address = address;
},
updateAddress(state, address) {
console.log('@M updateAddress address', address);
state.address = address;
},
addAddressToPerson(state, person) {
console.log('@M addAddressToPerson person', person);
state.person = person;
},
addDateToAddress(state, validFrom) {
console.log('@M addDateToAddress address.validFrom', validFrom);
state.validFrom = validFrom;
},
getEditAddress(state, address) {
console.log('@M getEditAddress address', address);
state.editAddress = address;
},
setLoading(state, b) {
state.loading = b;
},
setSuccess(state, b) {
state.success = b;
}
},
actions: {
addAddress({ commit }, payload) {
console.log('@A addAddress payload', payload);
commit('setLoading', true);
if('newPostalCode' in payload){
let postalCodeBody = payload.newPostalCode;
postalCodeBody = Object.assign(postalCodeBody, {'origin': 3});
postPostalCode(postalCodeBody)
.then(postalCode => {
let body = payload;
body.postcode = {'id': postalCode.id},
postAddress(body)
.then(address => new Promise((resolve, reject) => {
commit('addAddress', address);
resolve();
commit('setLoading', false);
}))
.catch((error) => {
commit('catchError', error);
commit('setLoading', false);
});
})
} else {
postAddress(payload)
.then(address => new Promise((resolve, reject) => {
commit('addAddress', address);
resolve();
commit('setLoading', false);
}))
.catch((error) => {
commit('catchError', error);
commit('setLoading', false);
});
}
},
addDateToAddressAndAddressToPerson({ commit }, payload) {
console.log('@A addDateToAddressAndAddressToPerson payload', payload);
commit('setLoading', true);
patchAddress(payload.addressId, payload.body)
.then(address => new Promise((resolve, reject) => {
commit('addDateToAddress', address.validFrom);
resolve();
}).then(
postAddressToPerson(payload.personId, payload.addressId)
.then(person => new Promise((resolve, reject) => {
commit('addAddressToPerson', person);
commit('setLoading', false);
commit('setSuccess', true);
window.location.assign(payload.backUrl);
resolve();
}))
.catch((error) => {
commit('catchError', error);
commit('setLoading', false);
})
))
.catch((error) => {
commit('catchError', error);
commit('setLoading', false);
});
},
updateAddress({ commit }, payload) {
console.log('@A updateAddress payload', payload);
if('newPostalCode' in payload.newAddress){ // TODO change the condition because it writes new postal code in edit mode now: !writeNewPostalCode
let postalCodeBody = payload.newAddress.newPostalCode;
postalCodeBody = Object.assign(postalCodeBody, {'origin': 3});
postPostalCode(postalCodeBody)
.then(postalCode => {
let body = payload.newAddress;
body.postcode = {'id': postalCode.id },
patchAddress(payload.addressId, body)
.then(address => new Promise((resolve, reject) => {
commit('updateAddress', address);
resolve();
}))
.catch((error) => {
commit('catchError', error);
});
})
} else {
patchAddress(payload.addressId, payload.newAddress)
.then(address => new Promise((resolve, reject) => {
commit('updateAddress', address);
resolve();
}))
.catch((error) => {
commit('catchError', error);
});
}
},
getEditAddress({ commit }, payload) {
console.log('@A getEditAddress payload', payload);
getAddress(payload).then(address => new Promise((resolve, reject) => {
commit('getEditAddress', address);
resolve();
}))
.catch((error) => {
commit('catchError', error);
});
},
}
});
export { store };

16
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue
View File

@@ -24,16 +24,16 @@
<!-- :: end styles bootstrap :: -->
</div>
</transition>
</template>
</template>
<script>
/*
* This Modal component is a mix between Vue3 modal implementation
* This Modal component is a mix between Vue3 modal implementation
* [+] with 'v-if:showModal' directive:parameter, html scope is added/removed not just shown/hidden
* [+] with slot we can pass content from parent component
* [+] some classes are passed from parent component
* and Bootstrap 4.6 _modal.scss module
* [+] using bootstrap css classes, the modal have a responsive behaviour,
* [+] using bootstrap css classes, the modal have a responsive behaviour,
* [+] modal design can be configured using css classes (size, scroll)
*/
export default {
@@ -54,7 +54,7 @@ export default {
background-color: rgba(0, 0, 0, 0.75);
transition: opacity 0.3s ease;
}
.modal-header .close {
.modal-header .close {
border-top-right-radius: 0.3rem;
}
/*
@@ -71,7 +71,8 @@ export default {
.modal-leave-active {
opacity: 0;
}
.modal-enter .modal-container,
.modal-enter
.modal-container,
.modal-leave-active .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
@@ -80,4 +81,9 @@ export default {
font-size: 1.5rem;
font-weight: bold;
}
div.modal-footer {
button:first-child {
margin-right: auto;
}
}
</style>

28
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly.vue
View File

@@ -1,21 +1,21 @@
<template>
<a class="btn" target="_blank"
<a class="btn btn-sm" target="_blank"
:class="classAction"
:title="$t(titleAction)"
@click="openModal">
{{ buttonText }}
</a>
<teleport to="body">
<modal v-if="modal.showModal"
:modalDialogClass="modal.modalDialogClass"
@close="modal.showModal = false">
<template v-slot:header>
<h3 class="modal-title">{{ $t(titleModal) }}</h3>
</template>
<template v-slot:body v-if="type === 'person'">
<on-the-fly-person
v-bind:id="id"
@@ -24,7 +24,7 @@
ref="castPerson">
</on-the-fly-person>
</template>
<template v-slot:body v-else-if="type === 'thirdparty'">
<on-the-fly-thirdparty
v-bind:id="id"
@@ -33,31 +33,29 @@
ref="castThirdparty">
</on-the-fly-thirdparty>
</template>
<template v-slot:body v-else>
<on-the-fly-create
v-bind:action="action"
ref="castNew">
</on-the-fly-create>
</template>
<template v-slot:footer>
<button v-if="action === 'show'"
@click="changeActionTo('edit')"
class="btn btn-update"> <!-- @click.prevent="$emit('..', ..)" -->
class="btn btn-update">
</button>
<button v-else
class="btn btn-save"
@click="saveAction"
> <!--
-->
@click="saveAction">
{{ $t('action.save')}}
</button>
</template>
</modal>
</teleport>
</template>
<script>
@@ -128,7 +126,7 @@ export default {
},
changeActionTo(action) {
// [BUG] clic first on show item button; in modal clic edit button; close modal; clic again on show item button
this.$data.action = action;
this.$data.action = action;
},
saveAction() {
console.log('saveAction');

4
src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
View File

@@ -32,6 +32,8 @@ const messages = {
remove: "Enlever",
delete: "Supprimer",
save: "Enregistrer",
valid: "Valider",
valid_and_see: "Valider et voir",
add: "Ajouter",
show_modal: "Ouvrir une modale",
ok: "OK",
@@ -61,7 +63,7 @@ const messages = {
title: "Création d'un nouvel usager ou d'un tiers professionnel",
person: "un nouvel usager",
thirdparty: "un nouveau tiers professionnel"
},
},
},
}
};

69
src/Bundle/ChillMainBundle/Resources/views/Entity/CommentEmbeddable.html.twig
View File

@@ -1,36 +1,45 @@
{{ opening_box|raw }}
<div class="">
<div class="comment-embeddable_comment">
{%- if options['limit_lines'] is not null -%}
{% set content = comment.comment|split('\n')|slice(0, options['limit_lines'])|join('\n') %}
{%- else -%}
{% set content = comment.comment %}
{%- endif -%}
{#
Template to render a comment
<blockquote class="chill-user-quote">
OPTIONS
* disable_markdown bool
* limit_lines integer|null
* metadata bool
#}
{{ opening_box|raw }}
{%- if options['limit_lines'] is not null -%}
{% set content = comment.comment|split('\n')|slice(0, options['limit_lines'])|join('\n') %}
{%- else -%}
{% set content = comment.comment %}
{%- endif -%}
<blockquote class="chill-user-quote">
{% if options['disable_markdown'] %}
{{ content|nl2br }}
{% else %}
{{ content|chill_markdown_to_html }}
{% endif %}
</blockquote>
</div>
</div>
{% if options['metadata'] %}
<div class="chill-entity__comment-embeddable__metadata">
{% if user is not empty %}
<span class="chill-entity__comment-embeddable__user">
{{ 'Last updated by'| trans }} {{ user|chill_entity_render_box(options['user']) }}
</span>';
{% endif %}
{% if comment.date is not empty %}
<span class="chill-entity__comment-embeddable__date">
{% if user is empty %}{{ 'Last updated on'|trans ~ ' ' }}{% else %}{{ 'on'|trans ~ ' ' }}{% endif %}
{{ comment.date|format_datetime("medium", "short") }}
</span>
{% endif %}
</div>
{% endif %}
{{ closing_box|raw }}
{% if options['metadata'] %}
<div class="metadata">
{% if user is not empty %}
{{ 'Last updated by'| trans }}
<span class="user">
{{ user|chill_entity_render_box(options['user']) }}
</span>
{% endif %}
{% if comment.date is not empty %}
{% if user is empty %}
{{ 'Last updated on'|trans ~ ' ' }}
{% else %}
{{ 'on'|trans ~ ' ' }}
{% endif %}
<span class="date">
{{ comment.date|format_datetime("medium", "short") }}
</span>
{% endif %}
</div>
{% endif %}
</blockquote>
{{ closing_box|raw }}

4
src/Bundle/ChillMainBundle/Resources/views/Entity/address.html.twig
View File

@@ -71,12 +71,12 @@
{% macro validity(address, options) %}
{%- if options['with_valid_from'] == true -%}
<span class="address-valid address-since">
<span class="address-valid date-since">
{{ 'Since %date%'|trans( { '%date%' : address.validFrom|format_date('long') } ) }}
</span>
{%- endif -%}
{%- if options['with_valid_to'] == true -%}
<span class="address-valid address-until">
<span class="address-valid date-until">
{{ 'Until %date%'|trans( { '%date%' : address.validTo|format_date('long') } ) }}
</span>
{%- endif -%}

37
src/Bundle/ChillMainBundle/Resources/views/layout.html.twig
View File

@@ -53,23 +53,30 @@
{% block sublayout_content %}
<div class="row justify-content-center my-5">
{% for flashMessage in app.session.flashbag.get('success') %}
<div class="col-8 mb-5 alert alert-success flash_message">
<span>{{ flashMessage|raw }}</span>
</div>
{% endfor %}
{# Flash messages ! #}
{% if app.session.flashbag.keys()|length > 0 %}
<div class="col-8 mb-5 flash_message">
{% for flashMessage in app.session.flashbag.get('error') %}
<div class="col-8 mb-5 alert alert-danger flash_message">
<span>{{ flashMessage|raw }}</span>
</div>
{% endfor %}
{% for flashMessage in app.session.flashbag.get('success') %}
<div class="col-8 alert alert-success flash_message">
<span>{{ flashMessage|raw }}</span>
</div>
{% endfor %}
{% for flashMessage in app.session.flashbag.get('notice') %}
<div class="col-8 mb-5 alert alert-warning flash_message">
<span>{{ flashMessage|raw }}</span>
</div>
{% endfor %}
{% for flashMessage in app.session.flashbag.get('error') %}
<div class="col-8 alert alert-danger flash_message">
<span>{{ flashMessage|raw }}</span>
</div>
{% endfor %}
{% for flashMessage in app.session.flashbag.get('notice') %}
<div class="col-8 alert alert-warning flash_message">
<span>{{ flashMessage|raw }}</span>
</div>
{% endfor %}
</div>
{% endif %}
{% block content %}
<div class="col-8 main_search">

37
src/Bundle/ChillMainBundle/Resources/views/layoutWithVerticalMenu.html.twig
View File

@@ -27,23 +27,30 @@
<div class="row">
<div class="col-md-9 my-5">
{% for flashMessage in app.session.flashbag.get('success') %}
<div class="col-8 mb-5 alert alert-success flash_message">
<span>{{ flashMessage|raw }}</span>
</div>
{% endfor %}
{# Flash messages ! #}
{% if app.session.flashbag.keys()|length > 0 %}
<div class="row justify-content-center mb-5">
{% for flashMessage in app.session.flashbag.get('error') %}
<div class="col-8 mb-5 alert alert-danger flash_message">
<span>{{ flashMessage|raw }}</span>
</div>
{% endfor %}
{% for flashMessage in app.session.flashbag.get('success') %}
<div class="col-8 alert alert-success flash_message">
<span>{{ flashMessage|raw }}</span>
</div>
{% endfor %}
{% for flashMessage in app.session.flashbag.get('notice') %}
<div class="col-8 mb-5 alert alert-warning flash_message">
<span>{{ flashMessage|raw }}</span>
</div>
{% endfor %}
{% for flashMessage in app.session.flashbag.get('error') %}
<div class="col-8 alert alert-danger flash_message">
<span>{{ flashMessage|raw }}</span>
</div>
{% endfor %}
{% for flashMessage in app.session.flashbag.get('notice') %}
<div class="col-8 alert alert-warning flash_message">
<span>{{ flashMessage|raw }}</span>
</div>
{% endfor %}
</div>
{% endif %}
{% block layout_wvm_content %}<!-- content of the layoutWithVerticalMenu is empty -->
{% endblock %}

59
src/Bundle/ChillMainBundle/Search/Entity/SearchUserApiProvider.php Normal file
View File

@@ -0,0 +1,59 @@
<?php
namespace Chill\MainBundle\Search\Entity;
use Chill\MainBundle\Repository\UserRepository;
use Chill\MainBundle\Search\SearchApiInterface;
use Chill\MainBundle\Search\SearchApiQuery;
class SearchUserApiProvider implements SearchApiInterface
{
private UserRepository $userRepository;
/**
* @param UserRepository $userRepository
*/
public function __construct(UserRepository $userRepository)
{
$this->userRepository = $userRepository;
}
public function provideQuery(string $pattern, array $parameters): SearchApiQuery
{
$query = new SearchApiQuery();
$query
->setSelectKey("user")
->setSelectJsonbMetadata("jsonb_build_object('id', u.id)")
->setSelectPertinence("GREATEST(SIMILARITY(LOWER(UNACCENT(?)), u.usernamecanonical),
SIMILARITY(LOWER(UNACCENT(?)), u.emailcanonical))", [ $pattern, $pattern ])
->setFromClause("users AS u")
->setWhereClause("SIMILARITY(LOWER(UNACCENT(?)), u.usernamecanonical) > 0.15
OR
SIMILARITY(LOWER(UNACCENT(?)), u.emailcanonical) > 0.15
", [ $pattern, $pattern ]);
return $query;
}
public function supportsTypes(string $pattern, array $types, array $parameters): bool
{
return \in_array('user', $types);
}
public function prepare(array $metadatas): void
{
$ids = \array_map(fn($m) => $m['id'], $metadatas);
$this->userRepository->findBy([ 'id' => $ids ]);
}
public function supportsResult(string $key, array $metadatas): bool
{
return $key === 'user';
}
public function getResult(string $key, array $metadata, float $pertinence)
{
return $this->userRepository->find($metadata['id']);
}
}

19
src/Bundle/ChillMainBundle/Search/SearchApi.php
View File

@@ -2,6 +2,7 @@
namespace Chill\MainBundle\Search;
use Chill\MainBundle\Search\Entity\SearchUserApiProvider;
use Chill\MainBundle\Serializer\Model\Collection;
use Chill\MainBundle\Pagination\PaginatorFactory;
use Chill\PersonBundle\Search\SearchPersonApiProvider;
@@ -25,12 +26,14 @@ class SearchApi
EntityManagerInterface $em,
SearchPersonApiProvider $searchPerson,
ThirdPartyApiSearch $thirdPartyApiSearch,
SearchUserApiProvider $searchUser,
PaginatorFactory $paginator
)
{
$this->em = $em;
$this->providers[] = $searchPerson;
$this->providers[] = $thirdPartyApiSearch;
$this->providers[] = $searchUser;
$this->paginator = $paginator;
}
@@ -41,6 +44,10 @@ class SearchApi
{
$queries = $this->findQueries($pattern, $types, $parameters);
if (0 === count($queries)) {
throw new SearchApiNoQueryException($pattern, $types, $parameters);
}
$total = $this->countItems($queries, $types, $parameters);
$paginator = $this->paginator->create($total);
@@ -49,9 +56,7 @@ class SearchApi
$this->prepareProviders($rawResults);
$results = $this->buildResults($rawResults);
$collection = new Collection($results, $paginator);
return $collection;
return new Collection($results, $paginator);
}
private function findQueries($pattern, array $types, array $parameters): array
@@ -77,7 +82,7 @@ class SearchApi
$rsmCount->addScalarResult('count', 'count');
$countNq = $this->em->createNativeQuery($countQuery, $rsmCount);
$countNq->setParameters($parameters);
return $countNq->getSingleScalarResult();
}
@@ -130,7 +135,7 @@ class SearchApi
$nq = $this->em->createNativeQuery($union, $rsm);
$nq->setParameters($parameters);
return $nq->getResult();
}
@@ -142,7 +147,7 @@ class SearchApi
if ($p->supportsResult($r['key'], $r['metadata'])) {
$metadatas[$k][] = $r['metadata'];
break;
}
}
}
}
@@ -161,7 +166,7 @@ class SearchApi
$p->getResult($r['key'], $r['metadata'], $r['pertinence'])
);
break;
}
}
}
}

23
src/Bundle/ChillMainBundle/Search/SearchApiNoQueryException.php Normal file
View File

@@ -0,0 +1,23 @@
<?php
namespace Chill\MainBundle\Search;
use Throwable;
class SearchApiNoQueryException extends \RuntimeException
{
private string $pattern;
private array $types;
private array $parameters;
public function __construct(string $pattern = "", array $types = [], array $parameters = [], $code = 0, Throwable $previous = null)
{
$typesStr = \implode(", ", $types);
$message = "No query for this search: pattern : {$pattern}, types: {$typesStr}";
$this->pattern = $pattern;
$this->types = $types;
$this->parameters = $parameters;
parent::__construct($message, $code, $previous);
}
}

3
src/Bundle/ChillMainBundle/chill.api.specs.yaml
View File

@@ -127,8 +127,6 @@ paths:
- person
- thirdparty
description: >
**Warning**: This is currently a stub (not really implemented
The search is performed across multiple entities. The entities must be listed into
`type` parameters.
@@ -152,6 +150,7 @@ paths:
enum:
- person
- thirdparty
- user
responses:
200:
description: "OK"

5
src/Bundle/ChillMainBundle/config/services/search.yaml
View File

@@ -7,3 +7,8 @@ services:
Chill\MainBundle\Search\SearchApi:
autowire: true
autoconfigure: true
Chill\MainBundle\Search\Entity\:
autowire: true
autoconfigure: true
resource: '../../Search/Entity'